Remove all non ES5/ES Modules syntax from generated Admin UI files (#…

…4857)

.changeset/tough-turkeys-wait.md

@@ -0,0 +1,6 @@
+---
+'@keystone-next/admin-ui': major
+'@keystone-next/auth': major
+---
+
+Removed all syntax that is not ES5 + ES Modules in the generated Admin UI pages.

packages-next/admin-ui/ARCHITECTURE.md

@@ -0,0 +1,7 @@
+# Architecture
+
+TODO: the rest of this
+
+## Invariants
+
+- Generated files for the Admin UI should only contain valid ES5 + ES Modules because Keystone should not make assumptions about the user's Babel config.

packages-next/admin-ui/pages/App/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/admin-ui.cjs.js",
+  "module": "dist/admin-ui.esm.js"
+}

packages-next/admin-ui/src/pages/App/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { KeystoneProvider } from '../../context';
+import { ErrorBoundary } from '../../components';
+import { Core } from '@keystone-ui/core';
+import { AppProps } from 'next/app';
+import { DocumentNode } from 'graphql';
+import { AdminConfig, FieldViews } from '@keystone-next/types';
+
+type AppConfig = {
+  adminConfig: AdminConfig;
+  adminMetaHash: string;
+  fieldViews: FieldViews;
+  lazyMetadataQuery: DocumentNode;
+};
+
+export const getApp = (props: AppConfig) => ({ Component, pageProps }: AppProps) => {
+  return (
+    <Core>
+      <KeystoneProvider {...props}>
+        <ErrorBoundary>
+          <Component {...pageProps} />
+        </ErrorBoundary>
+      </KeystoneProvider>
+    </Core>
+  );
+};

packages-next/admin-ui/src/pages/HomePage/index.tsx

@@ -1,6 +1,6 @@
 /* @jsx jsx */
 
-import { ButtonHTMLAttributes, useState } from 'react';
+import { ButtonHTMLAttributes, useMemo, useState } from 'react';
 
 import { Center, Inline, Heading, VisuallyHidden, jsx, useTheme } from '@keystone-ui/core';
 import { makeDataGetter } from '@keystone-next/admin-ui-utils';
@@ -10,7 +10,7 @@ import { LoadingDots } from '@keystone-ui/loading';
 
 import { CreateItemDrawer } from '../../components/CreateItemDrawer';
 import { PageContainer, HEADER_HEIGHT } from '../../components/PageContainer';
-import { DocumentNode, useQuery } from '../../apollo';
+import { gql, useQuery } from '../../apollo';
 import { useKeystone, useList } from '../../context';
 import { useRouter, Link } from '../../router';
 
@@ -121,12 +121,33 @@ const CreateButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
   );
 };
 
-export const HomePage = ({ query }: { query: DocumentNode }) => {
+export const HomePage = () => {
   const {
     adminMeta: { lists },
     visibleLists,
   } = useKeystone();
-
+  const query = useMemo(
+    () => gql`
+    query {
+      keystone {
+        adminMeta {
+          lists {
+            key
+            fields {
+              path
+              createView {
+                fieldMode
+              }
+            }
+          }
+        }
+      }
+      ${Object.entries(lists)
+        .map(([listKey, list]) => `${listKey}: ${list.gqlNames.listQueryMetaName} { count }`)
+        .join('\n')}
+    }`,
+    [lists]
+  );
   let { data, error } = useQuery(query, { errorPolicy: 'all' });
 
   const dataGetter = makeDataGetter(data, error?.graphQLErrors);

packages-next/admin-ui/src/pages/ItemPage/index.tsx

@@ -281,7 +281,9 @@ function DeleteButton({
   );
 }
 
-export const ItemPage = ({ listKey }: ItemPageProps) => {
+export const getItemPage = (props: ItemPageProps) => () => <ItemPage {...props} />;
+
+const ItemPage = ({ listKey }: ItemPageProps) => {
   const router = useRouter();
   const { id } = router.query;
   const list = useList(listKey);

packages-next/admin-ui/src/pages/ListPage/index.tsx

@@ -115,7 +115,9 @@ function useQueryParamsFromLocalStorage(listKey: string) {
   }, [localStorageKey, router]);
 }
 
-export const ListPage = ({ listKey }: ListPageProps) => {
+export const getListPage = (props: ListPageProps) => () => <ListPage {...props} />;
+
+const ListPage = ({ listKey }: ListPageProps) => {
   const list = useList(listKey);
 
   const { query } = useRouter();

packages-next/admin-ui/src/pages/NoAccessPage/index.tsx

@@ -5,7 +5,11 @@ import { AlertTriangleIcon } from '@keystone-ui/icons/icons/AlertTriangleIcon';
 import { SignoutButton } from '../../components/SignoutButton';
 import { ErrorContainer } from '../../components/Errors';
 
-export const NoAccessPage = ({ sessionsEnabled }: { sessionsEnabled: boolean }) => {
+type NoAccessPage = { sessionsEnabled: boolean };
+
+export const getNoAccessPage = (props: NoAccessPage) => () => <NoAccessPage {...props} />;
+
+export const NoAccessPage = ({ sessionsEnabled }: NoAccessPage) => {
   return (
     <ErrorContainer>
       <Stack align="center" gap="medium">

packages-next/admin-ui/src/templates/app.ts

@@ -49,42 +49,23 @@ export const appTemplate = (
     return serializePathForImport(viewPath);
   });
   // -- TEMPLATE START
-  return `
-import React from 'react';
+  return `import { getApp } from '@keystone-next/admin-ui/pages/App';
 
-import { KeystoneProvider } from '@keystone-next/admin-ui/context';
-import { ErrorBoundary } from '@keystone-next/admin-ui/components';
-import { Core } from '@keystone-ui/core';
-
-${allViews.map((views, i) => `import * as view${i} from ${views}`).join('\n')}
+${allViews.map((views, i) => `import * as view${i} from ${views};`).join('\n')}
 
 ${
   configFileExists
     ? `import * as adminConfig from "../../../admin/config";`
-    : 'const adminConfig = {};'
+    : 'var adminConfig = {};'
 }
 
-const fieldViews = [${allViews.map((_, i) => `view${i}`)}];
-
-const lazyMetadataQuery = ${JSON.stringify(getLazyMetadataQuery(graphQLSchema, adminMeta))};
-
-export default function App({ Component, pageProps }) {
-  return (
-    <Core>
-      <KeystoneProvider
-        adminConfig={adminConfig}
-        adminMetaHash="${adminMetaQueryResultHash}"
-        fieldViews={fieldViews}
-        lazyMetadataQuery={lazyMetadataQuery}
-      >
-        <ErrorBoundary>
-          <Component {...pageProps} />
-        </ErrorBoundary>
-      </KeystoneProvider>
-    </Core>
-  );
-}
-  `;
+export default getApp({
+  lazyMetadataQuery: ${JSON.stringify(getLazyMetadataQuery(graphQLSchema, adminMeta))},
+  fieldViews: [${allViews.map((_, i) => `view${i}`)}],
+  adminMetaHash: "${adminMetaQueryResultHash}",
+  adminConfig: adminConfig
+});
+`;
   // -- TEMPLATE END
 };
 

packages-next/admin-ui/src/templates/home.ts

@@ -1,30 +1,2 @@
-import type { BaseKeystone } from '@keystone-next/types';
-
-export const homeTemplate = (lists: BaseKeystone['lists']) =>
-  `
-import React from 'react';
-
-import { HomePage } from '@keystone-next/admin-ui/pages/HomePage';
-import { gql } from '@keystone-next/admin-ui/apollo';
-
-export default function Home() {
-  return <HomePage query={gql\`
-    query {
-      keystone {
-        adminMeta {
-          lists {
-            key
-            fields {
-              path
-              createView {
-                fieldMode
-              }
-            }
-          }
-        }
-      }
-      ${Object.entries(lists)
-        .map(([listKey, list]) => `${listKey}: ${list.gqlNames.listQueryMetaName} { count }`)
-        .join('\n')}
-    }\`} />;
-}`;
+export const homeTemplate = `export { HomePage as default } from '@keystone-next/admin-ui/pages/HomePage';
+`;

packages-next/admin-ui/src/templates/index.ts

@@ -28,7 +28,7 @@ export const writeAdminFiles = (
     outputPath: 'pages/_app.js',
     src: appTemplate(config, graphQLSchema, { configFileExists, projectAdminPath }),
   },
-  { mode: 'write', src: homeTemplate(keystone.lists), outputPath: 'pages/index.js' },
+  { mode: 'write', src: homeTemplate, outputPath: 'pages/index.js' },
   ...Object.values(keystone.lists).map(
     ({ adminUILabels: { path }, key }) =>
       ({ mode: 'write', src: listTemplate(key), outputPath: `pages/${path}/index.js` } as const)

packages-next/admin-ui/src/templates/item.tsx

@@ -1,10 +1,5 @@
 export const itemTemplate = (listKey: string) =>
-  `
-import React from 'react';
+  `import { getItemPage } from '@keystone-next/admin-ui/pages/ItemPage';
 
-import { ItemPage } from '@keystone-next/admin-ui/pages/ItemPage';
-
-export default function Item() {
-  return <ItemPage listKey="${listKey}" />;
-}
-  `;
+export default getItemPage(${JSON.stringify({ listKey })})
+`;

packages-next/admin-ui/src/templates/list.tsx

@@ -1,10 +1,5 @@
 export const listTemplate = (listKey: string) =>
-  `
-import React from 'react';
+  `import { getListPage } from '@keystone-next/admin-ui/pages/ListPage';
 
-import { ListPage } from '@keystone-next/admin-ui/pages/ListPage';
-
-export default function List() {
-  return <ListPage listKey="${listKey}" />;
-}
-  `;
+export default getListPage(${JSON.stringify({ listKey })});
+`;

packages-next/admin-ui/src/templates/no-access.ts

@@ -1,12 +1,7 @@
 import type { KeystoneConfig } from '@keystone-next/types';
 
 export const noAccessTemplate = (session: KeystoneConfig['session']) =>
-  `
-import React from 'react';
+  `import { getNoAccessPage } from '@keystone-next/admin-ui/pages/NoAccessPage';
 
-import { NoAccessPage } from '@keystone-next/admin-ui/pages/NoAccessPage';
-
-export default function Home() {
-  return <NoAccessPage sessionsEnabled={${!!session}} />;
-}
-  `;
+export default getNoAccessPage(${JSON.stringify({ sessionsEnabled: !!session })})
+`;

packages-next/auth/src/pages/InitPage.tsx

@@ -144,15 +144,15 @@ const Welcome = ({ value }: { value: any }) => {
   );
 };
 
-export const InitPage = ({
-  fieldPaths,
-  listKey,
-  enableWelcome,
-}: {
+type InitPageProps = {
   listKey: string;
   fieldPaths: string[];
   enableWelcome: boolean;
-}) => {
+};
+
+export const getInitPage = (props: InitPageProps) => () => <InitPage {...props} />;
+
+const InitPage = ({ fieldPaths, listKey, enableWelcome }: InitPageProps) => {
   const { adminMeta } = useKeystone();
   const fields = useMemo(() => {
     const fields: Record<string, FieldMeta> = {};

packages-next/auth/src/pages/SigninPage.tsx

@@ -12,19 +12,23 @@ import { useMutation, gql } from '@keystone-next/admin-ui/apollo';
 import { useRawKeystone, useReinitContext } from '@keystone-next/admin-ui/context';
 import { useRouter } from '@keystone-next/admin-ui/router';
 
+type SigninPageProps = {
+  identityField: string;
+  secretField: string;
+  mutationName: string;
+  successTypename: string;
+  failureTypename: string;
+};
+
+export const getSigninPage = (props: SigninPageProps) => () => <SigninPage {...props} />;
+
 export const SigninPage = ({
   identityField,
   secretField,
   mutationName,
   successTypename,
   failureTypename,
-}: {
-  identityField: string;
-  secretField: string;
-  mutationName: string;
-  successTypename: string;
-  failureTypename: string;
-}) => {
+}: SigninPageProps) => {
   const mutation = gql`
     mutation($identity: String!, $secret: String!) {
       authenticate: ${mutationName}(${identityField}: $identity, ${secretField}: $secret) {

packages-next/auth/src/templates/init.ts

@@ -8,17 +8,15 @@ type InitTemplateArgs = {
 
 export const initTemplate = ({ listKey, initFirstItem }: InitTemplateArgs) => {
   // -- TEMPLATE START
-  return `import { InitPage } from '@keystone-next/auth/pages/InitPage';
-  import React from 'react';
-  import { gql } from '@keystone-next/admin-ui/apollo';
+  return `import { getInitPage } from '@keystone-next/auth/pages/InitPage';
 
-  const fieldPaths = ${JSON.stringify(initFirstItem.fields)};
+const fieldPaths = ${JSON.stringify(initFirstItem.fields)};
 
-  export default function Init() {
-    return <InitPage listKey="${listKey}" fieldPaths={fieldPaths} enableWelcome={${JSON.stringify(
-    !initFirstItem.skipKeystoneWelcome
-  )}} />
-  }
-  `;
+export default getInitPage(${JSON.stringify({
+    listKey,
+    fieldPaths: initFirstItem.fields,
+    enableWelcome: !initFirstItem.skipKeystoneWelcome,
+  })});
+`;
   // -- TEMPLATE END
 };

packages-next/auth/src/templates/signin.ts

@@ -10,20 +10,15 @@ export const signinTemplate = ({
   secretField: string;
 }) => {
   // -- TEMPLATE START
-  return `
-import React from 'react';
-import { gql } from '@keystone-next/admin-ui/apollo';
-import { SigninPage } from '@keystone-next/auth/pages/SigninPage'
+  return `import { getSigninPage } from '@keystone-next/auth/pages/SigninPage'
 
-export default function Signin() {
-  return <SigninPage
-           identityField="${identityField}"
-           secretField="${secretField}"
-           mutationName="${gqlNames.authenticateItemWithPassword}"
-           successTypename="${gqlNames.ItemAuthenticationWithPasswordSuccess}"
-           failureTypename="${gqlNames.ItemAuthenticationWithPasswordFailure}"
-         />
-}
-  `;
+export default getSigninPage(${JSON.stringify({
+    identityField: identityField,
+    secretField: secretField,
+    mutationName: gqlNames.authenticateItemWithPassword,
+    successTypename: gqlNames.ItemAuthenticationWithPasswordSuccess,
+    failureTypename: gqlNames.ItemAuthenticationWithPasswordFailure,
+  })});
+`;
   // -- TEMPLATE END
 };