@quilted/rollup 0.1.1 → 0.1.3

package/package.json

@@ -6,7 +6,7 @@
     "access": "public",
     "@quilted/registry": "https://registry.npmjs.org"
   },
-  "version": "0.1.1",
+  "version": "0.1.3",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -27,8 +27,17 @@
   "types": "./build/typescript/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@rollup/plugin-replace": "^5.0.0",
-    "dotenv": "^16.0.0"
+    "@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",
+    "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"
   },
   "peerDependencies": {
     "rollup": "^4.0.0"

package/source/app.ts

@@ -1,4 +1,6 @@
-import type {Plugin} from 'rollup';
+import * as path from 'path';
+
+import type {GetManualChunk, Plugin} from 'rollup';
 
 import {
   MAGIC_MODULE_ENTRY,
@@ -9,6 +11,7 @@ import {
 import type {MagicModuleEnvOptions} from './env.ts';
 
 import {multiline} from './shared/strings.ts';
+import {getNodePlugins, rollupPluginsToArray} from './shared/rollup.ts';
 import {createMagicModulePlugin} from './shared/magic-module.ts';
 
 export interface AppOptions {
@@ -24,7 +27,7 @@ export interface AppOptions {
    *
    * @example './App.tsx'
    */
-  entry?: string;
+  app?: string;
 
   /**
    * Whether to include GraphQL-related code transformations.
@@ -41,20 +44,63 @@ export interface AppOptions {
   env?: MagicModuleEnvOptions;
 }
 
-export function quiltApp({env, entry}: AppOptions = {}) {
+export interface AppBrowserOptions extends AppOptions {
+  /**
+   * Customizes the magic `quilt:module/browser` entry module.
+   */
+  module?: AppBrowserModuleOptions;
+
+  /**
+   * Customizes the assets created for your application.
+   */
+  assets?: AppBrowserAssetsOptions;
+}
+
+export interface AppBrowserModuleOptions {
+  /**
+   * Whether the app should use hydration or client-side rendering.
+   *
+   * @default true
+   */
+  hydrate?: boolean;
+
+  /**
+   * The CSS selector to render or hydrate the application into.
+   *
+   * @default '#app'
+   */
+  selector?: string;
+}
+
+export interface AppBrowserAssetsOptions {
+  /**
+   * Whether to minify assets created by Quilt.
+   *
+   * @default true
+   */
+  minify?: boolean;
+}
+
+export function quiltAppBrowser({
+  app,
+  env,
+  assets,
+  module,
+  graphql = true,
+}: AppBrowserOptions = {}) {
   return {
-    name: '@quilted/app',
+    name: '@quilted/app/browser',
     async options(originalOptions) {
-      const newPlugins = [
-        ...(Array.isArray(originalOptions.plugins)
-          ? originalOptions.plugins
-          : originalOptions.plugins
-          ? [originalOptions.plugins]
-          : []),
-      ];
-
+      const newPlugins = rollupPluginsToArray(originalOptions.plugins);
       const newOptions = {...originalOptions, plugins: newPlugins};
 
+      const [{visualizer}, nodePlugins] = await Promise.all([
+        import('rollup-plugin-visualizer'),
+        getNodePlugins(),
+      ]);
+
+      newPlugins.push(...nodePlugins);
+
       if (env) {
         const {magicModuleEnv, replaceProcessEnv} = await import('./env.ts');
 
@@ -67,49 +113,53 @@ export function quiltApp({env, entry}: AppOptions = {}) {
         }
       }
 
-      if (entry) {
-        newPlugins.push(magicModuleAppComponent({entry}));
+      if (app) {
+        newPlugins.push(magicModuleAppComponent({entry: app}));
       }
 
-      return newOptions;
-    },
-  } satisfies Plugin;
-}
+      newPlugins.push(magicModuleAppBrowserEntry(module));
 
-export interface AppBrowserOptions {
-  /**
-   * Whether the app should use hydration or client-side rendering.
-   */
-  hydrate?: boolean;
-
-  /**
-   * The CSS selector to render or hydrate the application into.
-   */
-  selector?: string;
-}
+      if (graphql) {
+        const {graphql} = await import('./graphql.ts');
+        newPlugins.push(
+          graphql({manifest: path.resolve(`manifests/graphql.json`)}),
+        );
+      }
 
-export function quiltAppBrowser(options: AppBrowserOptions = {}) {
-  return {
-    name: '@quilted/app/browser',
-    options(originalOptions) {
-      const newPlugins = [
-        ...(Array.isArray(originalOptions.plugins)
-          ? originalOptions.plugins
-          : originalOptions.plugins
-          ? [originalOptions.plugins]
-          : []),
-      ];
+      const minify = assets?.minify ?? true;
 
-      const newOptions = {...originalOptions, plugins: newPlugins};
+      if (minify) {
+        const {minify} = await import('rollup-plugin-esbuild');
+        newPlugins.push(minify());
+      }
 
-      newPlugins.push(magicModuleAppBrowserEntry(options));
+      newPlugins.push(
+        visualizer({
+          template: 'treemap',
+          open: false,
+          brotliSize: true,
+          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
@@ -118,29 +168,60 @@ export interface AppServerOptions {
   entry?: string;
 }
 
-export function quiltAppServer(options: AppServerOptions = {}) {
+export function quiltAppServer({
+  app,
+  env,
+  graphql,
+  entry,
+}: AppServerOptions = {}) {
   return {
     name: '@quilted/app/server',
     async options(originalOptions) {
-      const newPlugins = [
-        ...(Array.isArray(originalOptions.plugins)
-          ? originalOptions.plugins
-          : originalOptions.plugins
-          ? [originalOptions.plugins]
-          : []),
-      ];
-
-      const [{magicModuleRequestRouterEntry}] = await Promise.all([
+      const newPlugins = rollupPluginsToArray(originalOptions.plugins);
+      const newOptions = {...originalOptions, plugins: newPlugins};
+
+      const [{magicModuleRequestRouterEntry}, nodePlugins] = await Promise.all([
         import('./request-router.ts'),
+        getNodePlugins(),
       ]);
 
-      const newOptions = {...originalOptions, plugins: newPlugins};
+      newPlugins.push(...nodePlugins);
+
+      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(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;
 }
 
@@ -196,7 +277,7 @@ export function magicModuleAppRequestRouter({
 export function magicModuleAppBrowserEntry({
   hydrate = true,
   selector = '#app',
-}: AppBrowserOptions = {}) {
+}: AppBrowserModuleOptions = {}) {
   return createMagicModulePlugin({
     name: '@quilted/magic-module/app-browser-entry',
     module: MAGIC_MODULE_ENTRY,
@@ -223,3 +304,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');
+}