@quilted/rollup 0.1.19 → 0.2.1

package/source/features/assets.ts

@@ -17,11 +17,10 @@ import type {
 } from '@quilted/assets';
 
 export interface AssetManifestOptions {
-  id?: string;
   file: string;
   baseURL: string;
   priority?: number;
-  cacheKey?: Record<string, any>;
+  cacheKey?: URLSearchParams;
 }
 
 export function assetManifest(manifestOptions: AssetManifestOptions): Plugin {
@@ -36,7 +35,7 @@ export function assetManifest(manifestOptions: AssetManifestOptions): Plugin {
 async function writeManifestForBundle(
   this: PluginContext,
   bundle: OutputBundle,
-  {id, file, baseURL, cacheKey, priority}: AssetManifestOptions,
+  {file, baseURL, cacheKey, priority}: AssetManifestOptions,
   {format}: NormalizedOutputOptions,
 ) {
   const outputs = Object.values(bundle);
@@ -77,10 +76,9 @@ async function writeManifestForBundle(
     return id;
   }
 
-  const manifest: AssetsBuildManifest<any> = {
-    id,
+  const manifest: AssetsBuildManifest = {
     priority,
-    cacheKey,
+    cacheKey: cacheKey && cacheKey.size > 0 ? cacheKey.toString() : undefined,
     assets,
     attributes: format === 'es' ? {scripts: {type: 'module'}} : undefined,
     entries: {
@@ -101,7 +99,7 @@ async function writeManifestForBundle(
     if (originalModuleId == null) continue;
 
     // This metadata is added by the rollup plugin for @quilted/async
-    const moduleId = this.getModuleInfo(originalModuleId)?.meta.quilt?.moduleId;
+    const moduleId = this.getModuleInfo(originalModuleId)?.meta.quilt?.moduleID;
 
     if (moduleId == null) continue;
 

package/source/features/async.ts

@@ -0,0 +1,249 @@
+import {createHash} from 'crypto';
+import {posix, sep} from 'path';
+
+import type {Plugin, OutputChunk, OutputBundle} from 'rollup';
+import {multiline} from '../shared/strings.ts';
+import MagicString from 'magic-string';
+
+const MODULE_PREFIX = 'quilt-async-module:';
+const IMPORT_PREFIX = 'quilt-async-import:';
+
+export interface Options {
+  preload?: boolean;
+  baseURL?: string;
+  moduleID?(details: {imported: string}): string;
+}
+
+export function asyncModules({
+  preload = true,
+  baseURL = '/assets/',
+  moduleID: getModuleID = defaultModuleID,
+}: Options = {}): Plugin {
+  return {
+    name: '@quilted/async',
+    async resolveId(id, importer) {
+      if (id.startsWith(IMPORT_PREFIX)) return `\0${id}`;
+      if (!id.startsWith(MODULE_PREFIX)) return null;
+
+      const imported = id.replace(MODULE_PREFIX, '');
+
+      const resolved = await this.resolve(imported, importer, {
+        skipSelf: true,
+      });
+
+      if (resolved == null) return null;
+
+      return `\0${MODULE_PREFIX}${resolved.id}`;
+    },
+    resolveDynamicImport(specifier) {
+      if (
+        typeof specifier === 'string' &&
+        specifier.startsWith(IMPORT_PREFIX)
+      ) {
+        return `\0${specifier}`;
+      }
+
+      return null;
+    },
+    async load(id: string) {
+      if (id.startsWith(`\0${MODULE_PREFIX}`)) {
+        const imported = id.replace(`\0${MODULE_PREFIX}`, '');
+        const moduleID = getModuleID({imported});
+
+        const code = multiline`
+          const id = ${JSON.stringify(moduleID)};
+
+          export default function createAsyncModule(load) {
+            return {
+              id,
+              import: () => import(${JSON.stringify(
+                `${IMPORT_PREFIX}${imported}`,
+              )}).then((module) => module.default),
+            };
+          }
+        `;
+
+        return code;
+      }
+
+      if (id.startsWith(`\0${IMPORT_PREFIX}`)) {
+        const imported = id.replace(`\0${IMPORT_PREFIX}`, '');
+        const moduleID = getModuleID({imported});
+
+        const code = multiline`
+          import * as AsyncModule from ${JSON.stringify(imported)};
+
+          ((globalThis[Symbol.for('quilt')] ??= {}).AsyncModules ??= new Map).set(${JSON.stringify(
+            moduleID,
+          )}, AsyncModule);
+
+          export default AsyncModule;
+        `;
+
+        return {
+          code,
+          meta: {
+            quilt: {moduleID},
+          },
+        };
+      }
+
+      return null;
+    },
+    transform: baseURL
+      ? (code) =>
+          code.replace(/__QUILT_ASSETS_BASE_URL__/g, JSON.stringify(baseURL))
+      : undefined,
+    async generateBundle(options, bundle) {
+      if (preload) {
+        switch (options.format) {
+          case 'es': {
+            await preloadAsyncAssetsInESMBundle(bundle);
+            break;
+          }
+          case 'system': {
+            await preloadAsyncAssetsInSystemJSBundle(bundle);
+            break;
+          }
+        }
+      }
+    },
+  };
+}
+
+function defaultModuleID({imported}: {imported: string}) {
+  const name = imported.split(sep).pop()!.split('.')[0]!;
+
+  const hash = createHash('sha256')
+    .update(imported)
+    .digest('hex')
+    .substring(0, 8);
+
+  return `${name}_${hash}`;
+}
+
+async function preloadAsyncAssetsInESMBundle(bundle: OutputBundle) {
+  const {parse: parseImports} = await import('es-module-lexer');
+
+  for (const chunk of Object.values(bundle)) {
+    if (chunk.type !== 'chunk') continue;
+    if (chunk.dynamicImports.length === 0) continue;
+
+    const {code} = chunk;
+
+    const newCode = new MagicString(code);
+
+    const imports = (await parseImports(code))[0];
+
+    for (const imported of imports) {
+      const {s: start, e: end, ss: importStart, d: dynamicStart} = imported;
+
+      // es-module-lexer only sets `d >= 0` when the import is a dynamic one
+      if (dynamicStart < 0) continue;
+
+      // Get rid of the quotes
+      const importSource = code.slice(start + 1, end - 1);
+
+      const dependencies = getDependenciesForImport(
+        importSource,
+        chunk,
+        bundle,
+      );
+
+      // The only dependency is the file itself, no need to preload
+      if (dependencies.size === 1) continue;
+
+      const originalImport = code.slice(importStart, end + 1);
+      newCode.overwrite(
+        importStart,
+        end + 1,
+        preloadContentForDependencies(dependencies, originalImport),
+      );
+    }
+
+    chunk.code = newCode.toString();
+  }
+}
+
+async function preloadAsyncAssetsInSystemJSBundle(bundle: OutputBundle) {
+  for (const chunk of Object.values(bundle)) {
+    if (chunk.type !== 'chunk') continue;
+    if (chunk.dynamicImports.length === 0) continue;
+
+    const {code} = chunk;
+
+    const newCode = new MagicString(code);
+
+    const systemDynamicImportRegex = /\bmodule\.import\(([^)]*)\)/g;
+
+    let match: RegExpExecArray | null;
+
+    while ((match = systemDynamicImportRegex.exec(code))) {
+      const [originalImport, imported] = match;
+
+      // Get rid of surrounding space and quotes
+      const importSource = imported!.trim().slice(1, imported!.length - 1);
+
+      const dependencies = getDependenciesForImport(
+        importSource,
+        chunk,
+        bundle,
+      );
+
+      if (dependencies.size === 1) continue;
+
+      newCode.overwrite(
+        match.index,
+        match.index + originalImport!.length,
+        preloadContentForDependencies(dependencies, originalImport!),
+      );
+    }
+
+    chunk.code = newCode.toString();
+  }
+}
+
+function preloadContentForDependencies(
+  dependencies: Iterable<string>,
+  originalExpression: string,
+) {
+  return `Promise.resolve().then(() => globalThis[Symbol.for('quilt')]?.AsyncModules?.preload?.(${Array.from(
+    dependencies,
+  )
+    .map((dependency) => JSON.stringify(dependency))
+    .join(',')})).then(function(){return ${originalExpression}})`;
+}
+
+function getDependenciesForImport(
+  imported: string,
+  chunk: OutputChunk,
+  bundle: OutputBundle,
+) {
+  const originalFilename = chunk.fileName;
+  const dependencies = new Set<string>();
+  const analyzed = new Set<string>();
+
+  const normalizedFile = posix.join(posix.dirname(originalFilename), imported);
+
+  const addDependencies = (filename: string) => {
+    if (filename === originalFilename) return;
+    if (analyzed.has(filename)) return;
+
+    analyzed.add(filename);
+    const chunk = bundle[filename];
+
+    if (chunk == null) return;
+
+    dependencies.add(chunk.fileName);
+
+    if (chunk.type !== 'chunk') return;
+
+    for (const imported of chunk.imports) {
+      addDependencies(imported);
+    }
+  };
+
+  addDependencies(normalizedFile);
+
+  return dependencies;
+}

package/source/features/css.ts

@@ -3,12 +3,13 @@ import type {Plugin} from 'rollup';
 export interface Options {
   minify?: boolean;
   emit?: boolean;
+  targets?: string[];
 }
 
 const CSS_REGEX = /\.css$/;
 const CSS_MODULE_REGEX = /\.module\.css$/;
 
-export function css({minify = true, emit = true}: Options) {
+export function css({minify = true, emit = true, targets}: Options) {
   const styles = new Map<string, string>();
 
   return {
@@ -16,13 +17,14 @@ export function css({minify = true, emit = true}: Options) {
     async transform(code, id) {
       if (!CSS_REGEX.test(id)) return;
 
-      const {transform} = await import('lightningcss');
+      const {transform, browserslistToTargets} = await import('lightningcss');
 
       const transformed = transform({
         filename: id,
         code: new TextEncoder().encode(code),
         cssModules: CSS_MODULE_REGEX.test(id),
         minify: emit && minify,
+        targets: targets ? browserslistToTargets(targets) : undefined,
       });
 
       styles.set(id, new TextDecoder().decode(transformed.code));

package/source/features/env.ts

@@ -69,6 +69,12 @@ export interface MagicModuleEnvOptions {
     | {roots?: never; files?: string[]};
 }
 
+export function resolveEnvOption(
+  option?: MagicModuleEnvOptions['mode'] | MagicModuleEnvOptions,
+) {
+  return typeof option === 'string' ? {mode: option} : option ?? {};
+}
+
 export function magicModuleEnv({
   mode,
   dotenv = {roots: ['.', 'configuration']},

package/source/features/esnext.ts

@@ -0,0 +1,70 @@
+import {createRequire} from 'module';
+
+import babel, {type RollupBabelInputPluginOptions} from '@rollup/plugin-babel';
+import esbuild from 'rollup-plugin-esbuild';
+
+const require = createRequire(import.meta.url);
+
+export function esnext({
+  mode,
+  targets,
+  babel: useBabel = true,
+}: {
+  mode?: 'development' | 'production';
+  targets?: readonly string[];
+  babel?:
+    | boolean
+    | {
+        options?(
+          options: RollupBabelInputPluginOptions,
+        ): RollupBabelInputPluginOptions | void;
+      };
+}) {
+  if (!useBabel) {
+    return esbuild({
+      // Support very modern features
+      include: /\.esnext$/,
+      target: 'es2022',
+      loaders: {
+        '.esnext': 'js',
+      },
+    });
+  }
+
+  let babelOptions: RollupBabelInputPluginOptions = {
+    envName: mode,
+    configFile: false,
+    babelrc: false,
+    presets: [
+      [
+        require.resolve('@babel/preset-env'),
+        {
+          useBuiltIns: false,
+          bugfixes: true,
+          shippedProposals: true,
+          // I thought I wanted this, but it seems to break the `targets` option
+          // passed as a root argument.
+          // ignoreBrowserslistConfig: targets != null,
+        } satisfies import('@babel/preset-env').Options,
+      ],
+    ],
+    plugins: [
+      [
+        require.resolve('@babel/plugin-proposal-decorators'),
+        {version: '2023-01'},
+      ],
+    ],
+    include: /\.esnext$/,
+    extensions: ['.esnext'],
+    babelHelpers: 'bundled',
+    skipPreflightCheck: true,
+    // Babel doesn’t like this option being set to `undefined`.
+    ...(targets ? {targets: targets as string[]} : {}),
+  };
+
+  if (typeof useBabel === 'object') {
+    babelOptions = useBabel.options?.(babelOptions) ?? babelOptions;
+  }
+
+  return babel(babelOptions);
+}

package/source/features/graphql.ts

@@ -10,11 +10,11 @@ import {
   extractGraphQLImports,
 } from './graphql/transform.ts';
 
-export interface Options {
+export interface GraphQLOptions {
   manifest?: string | boolean;
 }
 
-export function graphql({manifest}: Options = {}): Plugin {
+export function graphql({manifest}: GraphQLOptions = {}): Plugin {
   const shouldWriteManifest = Boolean(manifest);
   const manifestPath =
     typeof manifest === 'string' ? manifest : `manifests/graphql.json`;
@@ -75,6 +75,8 @@ export function graphql({manifest}: Options = {}): Plugin {
         }
       }
 
+      if (Object.keys(operations).length === 0) return;
+
       await mkdir(dirname(manifestPath), {recursive: true});
       await writeFile(manifestPath, JSON.stringify(operations, null, 2));
     },

package/source/features/source-code.ts

@@ -1,30 +1,43 @@
 import {createRequire} from 'module';
 
-import babel from '@rollup/plugin-babel';
+import babel, {type RollupBabelInputPluginOptions} from '@rollup/plugin-babel';
 import esbuild from 'rollup-plugin-esbuild';
+import type {Options as PresetEnvOptions} from '@babel/preset-env';
 
 const require = createRequire(import.meta.url);
 
 export function sourceCode({
   mode,
   targets,
+  react = true,
   babel: useBabel = true,
 }: {
   mode?: 'development' | 'production';
-  targets?: string[];
-  babel?: boolean;
+  react?: boolean | 'react' | 'preact';
+  targets?: readonly string[];
+  babel?:
+    | boolean
+    | {
+        useBuiltIns?: PresetEnvOptions['useBuiltIns'];
+        options?(
+          options: RollupBabelInputPluginOptions,
+        ): RollupBabelInputPluginOptions | void;
+      };
 }) {
   if (!useBabel) {
     return esbuild({
       // Support very modern features
       target: 'es2022',
       jsx: 'automatic',
-      jsxImportSource: 'react',
+      jsxImportSource: typeof react === 'string' ? react : 'react',
       exclude: 'node_modules/**',
     });
   }
 
-  return babel({
+  const babelOverride = typeof useBabel === 'boolean' ? {} : useBabel;
+  const useBuiltIns = babelOverride.useBuiltIns;
+
+  let babelOptions: RollupBabelInputPluginOptions = {
     envName: mode,
     configFile: false,
     babelrc: false,
@@ -34,16 +47,17 @@ export function sourceCode({
         require.resolve('@babel/preset-react'),
         {
           runtime: 'automatic',
-          importSource: 'react',
+          importSource: typeof react === 'string' ? react : 'react',
           development: mode === 'development',
         },
       ],
       [
         require.resolve('@babel/preset-env'),
         {
-          useBuiltIns: false,
           bugfixes: true,
           shippedProposals: true,
+          useBuiltIns,
+          corejs: useBuiltIns ? 3 : undefined,
           // I thought I wanted this, but it seems to break the `targets` option
           // passed as a root argument.
           // ignoreBrowserslistConfig: targets != null,
@@ -71,6 +85,10 @@ export function sourceCode({
     babelHelpers: 'bundled',
     skipPreflightCheck: true,
     // Babel doesn’t like this option being set to `undefined`.
-    ...(targets ? {targets} : {}),
-  });
+    ...(targets ? {targets: targets as string[]} : {}),
+  };
+
+  babelOptions = babelOverride.options?.(babelOptions) ?? babelOptions;
+
+  return babel(babelOptions);
 }

package/source/features/system-js.ts

@@ -2,11 +2,14 @@ import {readFile} from 'fs/promises';
 import {createRequire} from 'module';
 
 import type {Plugin} from 'rollup';
+import MagicString from 'magic-string';
+
+import {multiline} from '../shared/strings';
 
 export function systemJS({minify = false} = {}) {
   return {
     name: '@quilted/system-js',
-    async renderChunk(_, chunk, options) {
+    async renderChunk(code, chunk, options) {
       if (options.format !== 'system' || !chunk.isEntry) return null;
 
       const require = createRequire(import.meta.url);
@@ -30,7 +33,27 @@ export function systemJS({minify = false} = {}) {
 
       chunk.imports.unshift(this.getFileName(fileHandle));
 
-      return null;
+      const newCode = new MagicString(code);
+
+      // We force the systemjs loader to immediately load the entrypoint. This allows the
+      // scripts to be marked as `defer`; systemjs automatically runs an entrypoint when it
+      // is the last script on the page, but only when scripts run in the `loading` document
+      // ready state.
+      //
+      // @see https://github.com/systemjs/systemjs/pull/2216
+      newCode.append(multiline`
+        if (document.currentScript) {
+          System.import(document.currentScript.src);
+        } else {
+          var scripts = document.getElementsByTagName('script');
+          System.import(scripts[scripts.length - 1].src);
+        }
+      `);
+
+      return {
+        code: newCode.toString(),
+        map: newCode.generateMap({hires: true}),
+      };
     },
   } satisfies Plugin;
 }