@quilted/rollup 0.1.2 → 0.1.4

package/package.json

@@ -6,7 +6,7 @@
     "access": "public",
     "@quilted/registry": "https://registry.npmjs.org"
   },
-  "version": "0.1.2",
+  "version": "0.1.4",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -27,12 +27,24 @@
   "types": "./build/typescript/index.d.ts",
   "sideEffects": false,
   "dependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/plugin-transform-runtime": "^7.23.0",
+    "@babel/plugin-proposal-decorators": "^7.23.0",
+    "@babel/plugin-syntax-typescript": "^7.22.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.22.0",
+    "@babel/preset-typescript": "^7.23.0",
+    "@rollup/plugin-alias": "^5.0.1",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-replace": "^5.0.3",
     "@rollup/plugin-commonjs": "^25.0.5",
     "@rollup/plugin-json": "^6.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@quilted/graphql": "^2.0.0",
+    "@types/babel__preset-env": "^7.9.0",
     "dotenv": "^16.0.0",
     "esbuild": "^0.19.4",
+    "graphql": "^16.8.0",
     "rollup-plugin-esbuild": "^6.1.0",
     "rollup-plugin-node-externals": "^6.1.2",
     "rollup-plugin-visualizer": "^5.9.0"

package/source/app.ts

@@ -1,6 +1,6 @@
 import * as path from 'path';
 
-import type {Plugin} from 'rollup';
+import type {GetManualChunk, Plugin} from 'rollup';
 
 import {
   MAGIC_MODULE_ENTRY,
@@ -27,7 +27,7 @@ export interface AppOptions {
    *
    * @example './App.tsx'
    */
-  entry?: string;
+  app?: string;
 
   /**
    * Whether to include GraphQL-related code transformations.
@@ -44,34 +44,6 @@ export interface AppOptions {
   env?: MagicModuleEnvOptions;
 }
 
-export function quiltApp({env, entry}: AppOptions = {}) {
-  return {
-    name: '@quilted/app',
-    async options(originalOptions) {
-      const newPlugins = rollupPluginsToArray(originalOptions.plugins);
-      const newOptions = {...originalOptions, plugins: newPlugins};
-
-      if (env) {
-        const {magicModuleEnv, replaceProcessEnv} = await import('./env.ts');
-
-        if (typeof env === 'boolean') {
-          newPlugins.push(replaceProcessEnv({mode: 'production'}));
-          newPlugins.push(magicModuleEnv({mode: 'production'}));
-        } else {
-          newPlugins.push(replaceProcessEnv({mode: env.mode ?? 'production'}));
-          newPlugins.push(magicModuleEnv({mode: 'production', ...env}));
-        }
-      }
-
-      if (entry) {
-        newPlugins.push(magicModuleAppComponent({entry}));
-      }
-
-      return newOptions;
-    },
-  } satisfies Plugin;
-}
-
 export interface AppBrowserOptions extends AppOptions {
   /**
    * Customizes the magic `quilt:module/browser` entry module.
@@ -110,27 +82,55 @@ export interface AppBrowserAssetsOptions {
 }
 
 export function quiltAppBrowser({
-  entry,
+  app,
   env,
-  graphql,
   assets,
   module,
+  graphql = true,
 }: AppBrowserOptions = {}) {
+  const mode =
+    (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
+
   return {
     name: '@quilted/app/browser',
     async options(originalOptions) {
       const newPlugins = rollupPluginsToArray(originalOptions.plugins);
       const newOptions = {...originalOptions, plugins: newPlugins};
 
-      const [{visualizer}, nodePlugins] = await Promise.all([
+      const [{visualizer}, {sourceCode}, nodePlugins] = await Promise.all([
         import('rollup-plugin-visualizer'),
+        import('./shared/source-code.ts'),
         getNodePlugins(),
       ]);
 
-      newPlugins.push(quiltApp({env, entry, graphql}));
       newPlugins.push(...nodePlugins);
+      newPlugins.push(sourceCode({mode}));
+
+      if (env) {
+        const {magicModuleEnv, replaceProcessEnv} = await import('./env.ts');
+
+        if (typeof env === 'boolean') {
+          newPlugins.push(replaceProcessEnv({mode: 'production'}));
+          newPlugins.push(magicModuleEnv({mode: 'production'}));
+        } else {
+          newPlugins.push(replaceProcessEnv({mode: env.mode ?? 'production'}));
+          newPlugins.push(magicModuleEnv({mode: 'production', ...env}));
+        }
+      }
+
+      if (app) {
+        newPlugins.push(magicModuleAppComponent({entry: app}));
+      }
+
       newPlugins.push(magicModuleAppBrowserEntry(module));
 
+      if (graphql) {
+        const {graphql} = await import('./graphql.ts');
+        newPlugins.push(
+          graphql({manifest: path.resolve(`manifests/graphql.json`)}),
+        );
+      }
+
       const minify = assets?.minify ?? true;
 
       if (minify) {
@@ -143,16 +143,28 @@ export function quiltAppBrowser({
           template: 'treemap',
           open: false,
           brotliSize: true,
-          filename: path.resolve('reports', `bundle-visualizer.html`),
+          filename: path.resolve(`reports/bundle-visualizer.html`),
         }),
       );
 
       return newOptions;
     },
+    outputOptions(originalOptions) {
+      return {
+        ...originalOptions,
+        // format: isESM ? 'esm' : 'systemjs',
+        format: 'esm',
+        dir: path.resolve(`build/assets`),
+        entryFileNames: `app.[hash].js`,
+        assetFileNames: `[name].[hash].[ext]`,
+        chunkFileNames: `[name].[hash].js`,
+        manualChunks: createManualChunksSorter(),
+      };
+    },
   } satisfies Plugin;
 }
 
-export interface AppServerOptions {
+export interface AppServerOptions extends AppOptions {
   /**
    * The entry module for the server of this app. This module must export a
    * `RequestRouter` object as its default export, which will be wrapped in
@@ -161,22 +173,66 @@ export interface AppServerOptions {
   entry?: string;
 }
 
-export function quiltAppServer(options: AppServerOptions = {}) {
+export function quiltAppServer({
+  app,
+  env,
+  graphql,
+  entry,
+}: AppServerOptions = {}) {
+  const mode =
+    (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
+
   return {
     name: '@quilted/app/server',
     async options(originalOptions) {
       const newPlugins = rollupPluginsToArray(originalOptions.plugins);
       const newOptions = {...originalOptions, plugins: newPlugins};
 
-      const [{magicModuleRequestRouterEntry}] = await Promise.all([
-        import('./request-router.ts'),
-      ]);
+      const [{magicModuleRequestRouterEntry}, {sourceCode}, nodePlugins] =
+        await Promise.all([
+          import('./request-router.ts'),
+          import('./shared/source-code.ts'),
+          getNodePlugins(),
+        ]);
+
+      newPlugins.push(...nodePlugins);
+      newPlugins.push(sourceCode({mode}));
+
+      if (env) {
+        const {magicModuleEnv, replaceProcessEnv} = await import('./env.ts');
+
+        if (typeof env === 'boolean') {
+          newPlugins.push(replaceProcessEnv({mode}));
+          newPlugins.push(magicModuleEnv({mode}));
+        } else {
+          newPlugins.push(replaceProcessEnv({mode}));
+          newPlugins.push(magicModuleEnv({mode, ...env}));
+        }
+      }
+
+      if (app) {
+        newPlugins.push(magicModuleAppComponent({entry: app}));
+      }
 
       newPlugins.push(magicModuleRequestRouterEntry());
-      newPlugins.push(magicModuleAppRequestRouter(options));
+      newPlugins.push(magicModuleAppRequestRouter({entry}));
+
+      if (graphql) {
+        const {graphql} = await import('./graphql.ts');
+        newPlugins.push(graphql({manifest: false}));
+      }
 
       return newOptions;
     },
+    outputOptions(originalOptions) {
+      return {
+        ...originalOptions,
+        // format,
+        format: 'esm',
+        dir: path.resolve(`build/server`),
+        entryFileNames: 'server.js',
+      };
+    },
   } satisfies Plugin;
 }
 
@@ -259,3 +315,103 @@ export function magicModuleAppBrowserEntry({
     },
   });
 }
+
+const FRAMEWORK_CHUNK_NAME = 'framework';
+const POLYFILLS_CHUNK_NAME = 'polyfills';
+const VENDOR_CHUNK_NAME = 'vendor';
+const INTERNALS_CHUNK_NAME = 'internals';
+const SHARED_CHUNK_NAME = 'shared';
+const PACKAGES_CHUNK_NAME = 'packages';
+const GLOBAL_CHUNK_NAME = 'global';
+const FRAMEWORK_TEST_STRINGS: (string | RegExp)[] = [
+  '/node_modules/preact/',
+  '/node_modules/react/',
+  '/node_modules/js-cookie/',
+  '/node_modules/@quilted/quilt/',
+  '/node_modules/@preact/signals/',
+  '/node_modules/@preact/signals-core/',
+  // TODO I should turn this into an allowlist
+  /node_modules[/]@quilted[/](?!react-query|swr)/,
+];
+
+const POLYFILL_TEST_STRINGS = [
+  '/node_modules/@quilted/polyfills/',
+  '/node_modules/core-js/',
+  '/node_modules/whatwg-fetch/',
+  '/node_modules/regenerator-runtime/',
+  '/node_modules/abort-controller/',
+];
+
+const INTERNALS_TEST_STRINGS = [
+  '\x00commonjsHelpers.js',
+  '/node_modules/@babel/runtime/',
+];
+
+// When building from source, quilt packages are not in node_modules,
+// so we instead add their repo paths to the list of framework test strings.
+if (process.env.QUILT_FROM_SOURCE) {
+  FRAMEWORK_TEST_STRINGS.push('/quilt/packages/');
+}
+
+// Inspired by Vite: https://github.com/vitejs/vite/blob/c69f83615292953d40f07b1178d1ed1d72abe695/packages/vite/source/node/build.ts#L567
+function createManualChunksSorter(): GetManualChunk {
+  // TODO: make this more configurable, and make it so that we bundle more intelligently
+  // for split entries
+  const packagesPath = path.resolve('packages') + path.sep;
+  const globalPath = path.resolve('global') + path.sep;
+  const sharedPath = path.resolve('shared') + path.sep;
+
+  return (id, {getModuleInfo}) => {
+    if (INTERNALS_TEST_STRINGS.some((test) => id.includes(test))) {
+      return INTERNALS_CHUNK_NAME;
+    }
+
+    if (
+      FRAMEWORK_TEST_STRINGS.some((test) =>
+        typeof test === 'string' ? id.includes(test) : test.test(id),
+      )
+    ) {
+      return FRAMEWORK_CHUNK_NAME;
+    }
+
+    if (POLYFILL_TEST_STRINGS.some((test) => id.includes(test))) {
+      return POLYFILLS_CHUNK_NAME;
+    }
+
+    let bundleBaseName: string | undefined;
+    let relativeId: string | undefined;
+
+    if (id.includes('/node_modules/')) {
+      const moduleInfo = getModuleInfo(id);
+
+      // If the only dependency is another vendor, let Rollup handle the naming
+      if (moduleInfo == null) return;
+      if (
+        moduleInfo.importers.length > 0 &&
+        moduleInfo.importers.every((importer) =>
+          importer.includes('/node_modules/'),
+        )
+      ) {
+        return;
+      }
+
+      bundleBaseName = VENDOR_CHUNK_NAME;
+      relativeId = id.replace(/^.*[/]node_modules[/]/, '');
+    } else if (id.startsWith(packagesPath)) {
+      bundleBaseName = PACKAGES_CHUNK_NAME;
+      relativeId = id.replace(packagesPath, '');
+    } else if (id.startsWith(globalPath)) {
+      bundleBaseName = GLOBAL_CHUNK_NAME;
+      relativeId = id.replace(globalPath, '');
+    } else if (id.startsWith(sharedPath)) {
+      bundleBaseName = SHARED_CHUNK_NAME;
+      relativeId = id.replace(sharedPath, '');
+    }
+
+    if (bundleBaseName == null || relativeId == null) {
+      return;
+    }
+
+    return `${bundleBaseName}-${relativeId.split(path.sep)[0]?.split('.')[0]}`;
+  };
+}

package/source/graphql/transform.ts

@@ -0,0 +1,283 @@
+import {createHash} from 'crypto';
+
+import {print, parse} from 'graphql';
+import type {
+  DocumentNode,
+  TypedQueryDocumentNode,
+  DefinitionNode,
+  SelectionSetNode,
+  ExecutableDefinitionNode,
+  OperationDefinitionNode,
+  SelectionNode,
+  Location,
+} from 'graphql';
+import type {GraphQLOperation} from '@quilted/graphql';
+
+const IMPORT_REGEX = /^#import\s+['"]([^'"]*)['"];?[\s\n]*/gm;
+const DEFAULT_NAME = 'Operation';
+
+export interface EnhancedDocumentNode<
+  Data = Record<string, any>,
+  Variables = Record<string, any>,
+> extends TypedQueryDocumentNode<Data, Variables> {
+  readonly id: string;
+}
+
+export function cleanGraphQLDocument<
+  Data = Record<string, any>,
+  Variables = Record<string, any>,
+>(
+  document: DocumentNode | TypedQueryDocumentNode<Data, Variables>,
+  {removeUnused = true}: {removeUnused?: boolean | {exclude: Set<string>}} = {},
+): EnhancedDocumentNode<Data, Variables> {
+  if (removeUnused) {
+    removeUnusedDefinitions(document, {
+      exclude: removeUnused === true ? new Set() : removeUnused.exclude,
+    });
+  }
+
+  for (const definition of document.definitions) {
+    addTypename(definition);
+  }
+
+  const normalizedSource = minifyGraphQLSource(print(document));
+  const normalizedDocument = parse(normalizedSource);
+
+  for (const definition of normalizedDocument.definitions) {
+    stripLoc(definition);
+  }
+
+  // This ID is a hash of the full file contents that are part of the document,
+  // including other documents that are injected in, but excluding any unused
+  // fragments. This is useful for things like persisted queries.
+  const id = createHash('sha256').update(normalizedSource).digest('hex');
+
+  Reflect.defineProperty(normalizedDocument, 'id', {
+    value: id,
+    enumerable: true,
+    writable: false,
+    configurable: false,
+  });
+
+  Reflect.defineProperty(normalizedDocument, 'loc', {
+    value: stripDocumentLoc(normalizedDocument.loc),
+    enumerable: true,
+    writable: false,
+    configurable: false,
+  });
+
+  return normalizedDocument as any;
+}
+
+export function extractGraphQLImports(rawSource: string) {
+  const imports = new Set<string>();
+
+  const source = rawSource.replace(IMPORT_REGEX, (_, imported) => {
+    imports.add(imported);
+    return '';
+  });
+
+  return {imports: [...imports], source};
+}
+
+export function toGraphQLOperation<Data = unknown, Variables = unknown>(
+  documentOrSource: EnhancedDocumentNode<Data, Variables> | string,
+): GraphQLOperation<Data, Variables> {
+  const document =
+    typeof documentOrSource === 'string'
+      ? cleanGraphQLDocument(parse(documentOrSource))
+      : documentOrSource;
+
+  return {
+    id: document.id,
+    name: operationNameForDocument(document),
+    source: document.loc!.source.body,
+  };
+}
+
+function operationNameForDocument(document: DocumentNode) {
+  return document.definitions.find(
+    (definition): definition is OperationDefinitionNode =>
+      definition.kind === 'OperationDefinition',
+  )?.name?.value;
+}
+
+function removeUnusedDefinitions(
+  document: DocumentNode,
+  {exclude}: {exclude: Set<string>},
+) {
+  const usedDefinitions = new Set<DefinitionNode>();
+  const dependencies = definitionDependencies(document.definitions);
+
+  const markAsUsed = (definition: DefinitionNode) => {
+    if (usedDefinitions.has(definition)) {
+      return;
+    }
+
+    usedDefinitions.add(definition);
+
+    for (const dependency of dependencies.get(definition) || []) {
+      markAsUsed(dependency);
+    }
+  };
+
+  for (const definition of document.definitions) {
+    if (definition.kind === 'FragmentDefinition') {
+      if (exclude.has(definition.name.value)) {
+        markAsUsed(definition);
+      }
+    } else {
+      markAsUsed(definition);
+    }
+  }
+
+  (document as any).definitions = [...usedDefinitions];
+}
+
+function definitionDependencies(definitions: readonly DefinitionNode[]) {
+  const executableDefinitions: ExecutableDefinitionNode[] = definitions.filter(
+    (definition) =>
+      definition.kind === 'OperationDefinition' ||
+      definition.kind === 'FragmentDefinition',
+  ) as any[];
+
+  const definitionsByName = new Map(
+    executableDefinitions.map<[string, DefinitionNode]>((definition) => [
+      definition.name ? definition.name.value : DEFAULT_NAME,
+      definition,
+    ]),
+  );
+
+  return new Map(
+    executableDefinitions.map<[DefinitionNode, DefinitionNode[]]>(
+      (executableNode) => [
+        executableNode,
+        [...collectUsedFragmentSpreads(executableNode, new Set())].map(
+          (usedFragment) => {
+            const definition = definitionsByName.get(usedFragment);
+
+            if (definition == null) {
+              throw new Error(
+                `You attempted to use the fragment '${usedFragment}' (in '${
+                  executableNode.name ? executableNode.name.value : DEFAULT_NAME
+                }'), but it does not exist. Maybe you forgot to import it from another document?`,
+              );
+            }
+
+            return definition;
+          },
+        ),
+      ],
+    ),
+  );
+}
+
+const TYPENAME_FIELD = {
+  kind: 'Field',
+  alias: null,
+  name: {kind: 'Name', value: '__typename'},
+};
+
+function addTypename(definition: DefinitionNode) {
+  for (const {selections} of selectionSetsForDefinition(definition)) {
+    const hasTypename = selections.some(
+      (selection) =>
+        selection.kind === 'Field' && selection.name.value === '__typename',
+    );
+
+    if (!hasTypename) {
+      (selections as any[]).push(TYPENAME_FIELD);
+    }
+  }
+}
+
+function collectUsedFragmentSpreads(
+  definition: DefinitionNode,
+  usedSpreads: Set<string>,
+) {
+  for (const selection of selectionsForDefinition(definition)) {
+    if (selection.kind === 'FragmentSpread') {
+      usedSpreads.add(selection.name.value);
+    }
+  }
+
+  return usedSpreads;
+}
+
+function selectionsForDefinition(
+  definition: DefinitionNode,
+): IterableIterator<SelectionNode> {
+  if (!('selectionSet' in definition) || definition.selectionSet == null) {
+    return [][Symbol.iterator]();
+  }
+
+  return selectionsForSelectionSet(definition.selectionSet);
+}
+
+function* selectionSetsForDefinition(
+  definition: DefinitionNode,
+): IterableIterator<SelectionSetNode> {
+  if (!('selectionSet' in definition) || definition.selectionSet == null) {
+    return [][Symbol.iterator]();
+  }
+
+  if (definition.kind !== 'OperationDefinition') {
+    yield definition.selectionSet;
+  }
+
+  for (const nestedSelection of selectionsForDefinition(definition)) {
+    if (
+      'selectionSet' in nestedSelection &&
+      nestedSelection.selectionSet != null
+    ) {
+      yield nestedSelection.selectionSet;
+    }
+  }
+}
+
+function* selectionsForSelectionSet({
+  selections,
+}: SelectionSetNode): IterableIterator<SelectionNode> {
+  for (const selection of selections) {
+    yield selection;
+
+    if ('selectionSet' in selection && selection.selectionSet != null) {
+      yield* selectionsForSelectionSet(selection.selectionSet);
+    }
+  }
+}
+
+type Writable<T> = {-readonly [K in keyof T]: T[K]};
+
+function stripDocumentLoc(loc?: Location) {
+  const normalizedLoc: Partial<Writable<Location>> = {...loc};
+  delete normalizedLoc.endToken;
+  delete normalizedLoc.startToken;
+  return normalizedLoc;
+}
+
+function stripLoc(value: unknown) {
+  if (Array.isArray(value)) {
+    value.forEach(stripLoc);
+  } else if (typeof value === 'object') {
+    if (value == null) {
+      return;
+    }
+
+    if ('loc' in value) {
+      delete (value as {loc: unknown}).loc;
+    }
+
+    for (const key of Object.keys(value)) {
+      stripLoc((value as any)[key]);
+    }
+  }
+}
+
+export function minifyGraphQLSource(source: string) {
+  return source
+    .replace(/#.*/g, '')
+    .replace(/\\n/g, ' ')
+    .replace(/\s\s+/g, ' ')
+    .replace(/\s*({|}|\(|\)|\.|:|,)\s*/g, '$1');
+}