@quilted/rollup 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @quilted/rollup
 
+## 0.1.4
+
+### Patch Changes
+
+- [`2a36d5b8`](https://github.com/lemonmade/quilt/commit/2a36d5b8cb5178c3a51d441f754526f0b3b58571) Thanks [@lemonmade](https://github.com/lemonmade)! - Add source code plugin
+
+## 0.1.3
+
+### Patch Changes
+
+- [`4841dca5`](https://github.com/lemonmade/quilt/commit/4841dca5fb9817c8873b06c1790b3f4a05bc62d6) Thanks [@lemonmade](https://github.com/lemonmade)! - Add GraphQL plugins
+
+- [`34b06933`](https://github.com/lemonmade/quilt/commit/34b06933ea46eedace0caef682ae6aadea3f4ea8) Thanks [@lemonmade](https://github.com/lemonmade)! - Add output options
+
 ## 0.1.2
 
 ### Patch Changes

package/build/cjs/app.cjs

@@ -25,18 +25,31 @@ function _interopNamespaceDefault(e) {
 
 var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
 
-function quiltApp({
+function quiltAppBrowser({
+  app,
   env,
-  entry
+  assets,
+  module,
+  graphql = true
 } = {}) {
+  const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
   return {
-    name: '@quilted/app',
+    name: '@quilted/app/browser',
     async options(originalOptions) {
       const newPlugins = rollup.rollupPluginsToArray(originalOptions.plugins);
       const newOptions = {
         ...originalOptions,
         plugins: newPlugins
       };
+      const [{
+        visualizer
+      }, {
+        sourceCode
+      }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), Promise.resolve().then(function () { return require('./shared/source-code.cjs'); }), rollup.getNodePlugins()]);
+      newPlugins.push(...nodePlugins);
+      newPlugins.push(sourceCode({
+        mode
+      }));
       if (env) {
         const {
           magicModuleEnv,
@@ -59,40 +72,20 @@ function quiltApp({
           }));
         }
       }
-      if (entry) {
+      if (app) {
         newPlugins.push(magicModuleAppComponent({
-          entry
+          entry: app
         }));
       }
-      return newOptions;
-    }
-  };
-}
-function quiltAppBrowser({
-  entry,
-  env,
-  graphql,
-  assets,
-  module
-} = {}) {
-  return {
-    name: '@quilted/app/browser',
-    async options(originalOptions) {
-      const newPlugins = rollup.rollupPluginsToArray(originalOptions.plugins);
-      const newOptions = {
-        ...originalOptions,
-        plugins: newPlugins
-      };
-      const [{
-        visualizer
-      }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), rollup.getNodePlugins()]);
-      newPlugins.push(quiltApp({
-        env,
-        entry,
-        graphql
-      }));
-      newPlugins.push(...nodePlugins);
       newPlugins.push(magicModuleAppBrowserEntry(module));
+      if (graphql) {
+        const {
+          graphql
+        } = await Promise.resolve().then(function () { return require('./graphql.cjs'); });
+        newPlugins.push(graphql({
+          manifest: path__namespace.resolve(`manifests/graphql.json`)
+        }));
+      }
       const minify = assets?.minify ?? true;
       if (minify) {
         const {
@@ -104,13 +97,31 @@ function quiltAppBrowser({
         template: 'treemap',
         open: false,
         brotliSize: true,
-        filename: path__namespace.resolve('reports', `bundle-visualizer.html`)
+        filename: path__namespace.resolve(`reports/bundle-visualizer.html`)
       }));
       return newOptions;
+    },
+    outputOptions(originalOptions) {
+      return {
+        ...originalOptions,
+        // format: isESM ? 'esm' : 'systemjs',
+        format: 'esm',
+        dir: path__namespace.resolve(`build/assets`),
+        entryFileNames: `app.[hash].js`,
+        assetFileNames: `[name].[hash].[ext]`,
+        chunkFileNames: `[name].[hash].js`,
+        manualChunks: createManualChunksSorter()
+      };
     }
   };
 }
-function quiltAppServer(options = {}) {
+function quiltAppServer({
+  app,
+  env,
+  graphql,
+  entry
+} = {}) {
+  const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
   return {
     name: '@quilted/app/server',
     async options(originalOptions) {
@@ -121,10 +132,62 @@ function quiltAppServer(options = {}) {
       };
       const [{
         magicModuleRequestRouterEntry
-      }] = await Promise.all([Promise.resolve().then(function () { return require('./request-router.cjs'); })]);
+      }, {
+        sourceCode
+      }, nodePlugins] = await Promise.all([Promise.resolve().then(function () { return require('./request-router.cjs'); }), Promise.resolve().then(function () { return require('./shared/source-code.cjs'); }), rollup.getNodePlugins()]);
+      newPlugins.push(...nodePlugins);
+      newPlugins.push(sourceCode({
+        mode
+      }));
+      if (env) {
+        const {
+          magicModuleEnv,
+          replaceProcessEnv
+        } = await Promise.resolve().then(function () { return require('./env.cjs'); });
+        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 Promise.resolve().then(function () { return require('./graphql.cjs'); });
+        newPlugins.push(graphql({
+          manifest: false
+        }));
+      }
       return newOptions;
+    },
+    outputOptions(originalOptions) {
+      return {
+        ...originalOptions,
+        // format,
+        format: 'esm',
+        dir: path__namespace.resolve(`build/server`),
+        entryFileNames: 'server.js'
+      };
     }
   };
 }
@@ -198,10 +261,75 @@ 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 = ['/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() {
+  // TODO: make this more configurable, and make it so that we bundle more intelligently
+  // for split entries
+  const packagesPath = path__namespace.resolve('packages') + path__namespace.sep;
+  const globalPath = path__namespace.resolve('global') + path__namespace.sep;
+  const sharedPath = path__namespace.resolve('shared') + path__namespace.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;
+    let relativeId;
+    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__namespace.sep)[0]?.split('.')[0]}`;
+  };
+}
 
 exports.magicModuleAppBrowserEntry = magicModuleAppBrowserEntry;
 exports.magicModuleAppComponent = magicModuleAppComponent;
 exports.magicModuleAppRequestRouter = magicModuleAppRequestRouter;
-exports.quiltApp = quiltApp;
 exports.quiltAppBrowser = quiltAppBrowser;
 exports.quiltAppServer = quiltAppServer;

package/build/cjs/graphql/transform.cjs

@@ -0,0 +1,186 @@
+'use strict';
+
+var node_crypto = require('node:crypto');
+var graphql = require('graphql');
+
+const IMPORT_REGEX = /^#import\s+['"]([^'"]*)['"];?[\s\n]*/gm;
+const DEFAULT_NAME = 'Operation';
+function cleanGraphQLDocument(document, {
+  removeUnused = true
+} = {}) {
+  if (removeUnused) {
+    removeUnusedDefinitions(document, {
+      exclude: removeUnused === true ? new Set() : removeUnused.exclude
+    });
+  }
+  for (const definition of document.definitions) {
+    addTypename(definition);
+  }
+  const normalizedSource = minifyGraphQLSource(graphql.print(document));
+  const normalizedDocument = graphql.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 = node_crypto.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;
+}
+function extractGraphQLImports(rawSource) {
+  const imports = new Set();
+  const source = rawSource.replace(IMPORT_REGEX, (_, imported) => {
+    imports.add(imported);
+    return '';
+  });
+  return {
+    imports: [...imports],
+    source
+  };
+}
+function toGraphQLOperation(documentOrSource) {
+  const document = typeof documentOrSource === 'string' ? cleanGraphQLDocument(graphql.parse(documentOrSource)) : documentOrSource;
+  return {
+    id: document.id,
+    name: operationNameForDocument(document),
+    source: document.loc.source.body
+  };
+}
+function operationNameForDocument(document) {
+  return document.definitions.find(definition => definition.kind === 'OperationDefinition')?.name?.value;
+}
+function removeUnusedDefinitions(document, {
+  exclude
+}) {
+  const usedDefinitions = new Set();
+  const dependencies = definitionDependencies(document.definitions);
+  const markAsUsed = definition => {
+    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.definitions = [...usedDefinitions];
+}
+function definitionDependencies(definitions) {
+  const executableDefinitions = definitions.filter(definition => definition.kind === 'OperationDefinition' || definition.kind === 'FragmentDefinition');
+  const definitionsByName = new Map(executableDefinitions.map(definition => [definition.name ? definition.name.value : DEFAULT_NAME, definition]));
+  return new Map(executableDefinitions.map(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) {
+  for (const {
+    selections
+  } of selectionSetsForDefinition(definition)) {
+    const hasTypename = selections.some(selection => selection.kind === 'Field' && selection.name.value === '__typename');
+    if (!hasTypename) {
+      selections.push(TYPENAME_FIELD);
+    }
+  }
+}
+function collectUsedFragmentSpreads(definition, usedSpreads) {
+  for (const selection of selectionsForDefinition(definition)) {
+    if (selection.kind === 'FragmentSpread') {
+      usedSpreads.add(selection.name.value);
+    }
+  }
+  return usedSpreads;
+}
+function selectionsForDefinition(definition) {
+  if (!('selectionSet' in definition) || definition.selectionSet == null) {
+    return [][Symbol.iterator]();
+  }
+  return selectionsForSelectionSet(definition.selectionSet);
+}
+function* selectionSetsForDefinition(definition) {
+  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
+}) {
+  for (const selection of selections) {
+    yield selection;
+    if ('selectionSet' in selection && selection.selectionSet != null) {
+      yield* selectionsForSelectionSet(selection.selectionSet);
+    }
+  }
+}
+function stripDocumentLoc(loc) {
+  const normalizedLoc = {
+    ...loc
+  };
+  delete normalizedLoc.endToken;
+  delete normalizedLoc.startToken;
+  return normalizedLoc;
+}
+function stripLoc(value) {
+  if (Array.isArray(value)) {
+    value.forEach(stripLoc);
+  } else if (typeof value === 'object') {
+    if (value == null) {
+      return;
+    }
+    if ('loc' in value) {
+      delete value.loc;
+    }
+    for (const key of Object.keys(value)) {
+      stripLoc(value[key]);
+    }
+  }
+}
+function minifyGraphQLSource(source) {
+  return source.replace(/#.*/g, '').replace(/\\n/g, ' ').replace(/\s\s+/g, ' ').replace(/\s*({|}|\(|\)|\.|:|,)\s*/g, '$1');
+}
+
+exports.cleanGraphQLDocument = cleanGraphQLDocument;
+exports.extractGraphQLImports = extractGraphQLImports;
+exports.minifyGraphQLSource = minifyGraphQLSource;
+exports.toGraphQLOperation = toGraphQLOperation;

package/build/cjs/graphql.cjs

@@ -0,0 +1,86 @@
+'use strict';
+
+var path = require('node:path');
+var promises = require('node:fs/promises');
+var graphql$1 = require('graphql');
+var transform = require('./graphql/transform.cjs');
+
+function graphql({
+  manifest
+} = {}) {
+  const shouldWriteManifest = Boolean(manifest);
+  const manifestPath = typeof manifest === 'string' ? manifest : `manifests/graphql.json`;
+  return {
+    name: '@quilted/graphql',
+    async transform(code, id) {
+      if (!id.endsWith('.graphql') && !id.endsWith('.gql')) return null;
+      const topLevelDefinitions = new Set();
+      const loadedDocument = await loadDocument(code, id, this, (document, level) => {
+        if (level !== 0) return;
+        for (const definition of document.definitions) {
+          if ('name' in definition && definition.name != null) {
+            topLevelDefinitions.add(definition.name.value);
+          }
+        }
+      });
+      const document = transform.toGraphQLOperation(transform.cleanGraphQLDocument(loadedDocument, {
+        removeUnused: {
+          exclude: topLevelDefinitions
+        }
+      }));
+      return {
+        code: `export default JSON.parse(${JSON.stringify(JSON.stringify(document))})`,
+        meta: shouldWriteManifest ? {
+          quilt: {
+            graphql: document
+          }
+        } : undefined
+      };
+    },
+    async generateBundle() {
+      if (!shouldWriteManifest) return;
+      const operations = {};
+      for (const moduleId of this.getModuleIds()) {
+        const operation = this.getModuleInfo(moduleId)?.meta?.quilt?.graphql;
+        if (operation != null && typeof operation.id === 'string' && typeof operation.source === 'string') {
+          operations[operation.id] = operation.source;
+        }
+      }
+      await promises.mkdir(path.dirname(manifestPath), {
+        recursive: true
+      });
+      await promises.writeFile(manifestPath, JSON.stringify(operations, null, 2));
+    }
+  };
+}
+async function loadDocument(code, file, plugin, add, level = 0, seen = new Set()) {
+  const {
+    imports,
+    source
+  } = transform.extractGraphQLImports(code);
+  const document = graphql$1.parse(source);
+  add?.(document, level);
+  if (imports.length === 0) {
+    return document;
+  }
+  const resolvedImports = await Promise.all(imports.map(async imported => {
+    if (seen.has(imported)) return;
+    seen.add(imported);
+    const resolvedId = await plugin.resolve(imported, file);
+    if (resolvedId == null) {
+      throw new Error(`Could not find ${JSON.stringify(imported)} from ${JSON.stringify(file)}`);
+    }
+    plugin.addWatchFile(resolvedId.id);
+    const contents = await promises.readFile(resolvedId.id, {
+      encoding: 'utf8'
+    });
+    return loadDocument(contents, resolvedId.id, plugin, add, level + 1, seen);
+  }));
+  for (const importedDocument of resolvedImports) {
+    if (importedDocument == null) continue;
+    document.definitions.push(...importedDocument.definitions);
+  }
+  return document;
+}
+
+exports.graphql = graphql;

package/build/cjs/index.cjs

@@ -10,7 +10,6 @@ exports.magicModuleEnv = env.magicModuleEnv;
 exports.magicModuleAppBrowserEntry = app.magicModuleAppBrowserEntry;
 exports.magicModuleAppComponent = app.magicModuleAppComponent;
 exports.magicModuleAppRequestRouter = app.magicModuleAppRequestRouter;
-exports.quiltApp = app.quiltApp;
 exports.quiltAppBrowser = app.quiltAppBrowser;
 exports.quiltAppServer = app.quiltAppServer;
 exports.magicModuleRequestRouterEntry = requestRouter.magicModuleRequestRouterEntry;

package/build/cjs/shared/source-code.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var node_module = require('node:module');
+var babel = require('@rollup/plugin-babel');
+
+const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('shared/source-code.cjs', document.baseURI).href)));
+function sourceCode({
+  mode,
+  targets
+}) {
+  return babel({
+    configFile: false,
+    babelrc: false,
+    presets: [require$1.resolve('@babel/preset-typescript'), [require$1.resolve('@babel/preset-react'), {
+      runtime: 'automatic',
+      importSource: 'react',
+      development: mode === 'development'
+    }], [require$1.resolve('@babel/preset-env'), {
+      // @ts-expect-error This is a valid option
+      corejs: '3.15',
+      useBuiltIns: 'usage',
+      bugfixes: true,
+      shippedProposals: true,
+      // I thought I wanted this on, but if you do this, Babel
+      // stops respecting the top-level `targets` option and tries
+      // to use the targets passed to the preset directly instead.
+      ignoreBrowserslistConfig: true
+    }]],
+    plugins: [[require$1.resolve('@babel/plugin-proposal-decorators'), {
+      version: '2023-01'
+    }]],
+    targets,
+    extensions: ['.ts', '.tsx', '.mts', '.mtsx', '.js', '.jsx', '.es6', '.es', '.mjs'],
+    exclude: 'node_modules/**',
+    babelHelpers: 'bundled',
+    skipPreflightCheck: true
+  });
+}
+
+exports.sourceCode = sourceCode;