@quilted/rollup 0.1.14 → 0.1.16

package/build/esm/features/assets.mjs

@@ -1,8 +1,116 @@
 import * as path from 'node:path';
-import { readFile } from 'node:fs/promises';
+import * as fs from 'node:fs/promises';
 import { createHash } from 'node:crypto';
 import * as mime from 'mrmime';
 
+function assetManifest(manifestOptions) {
+  return {
+    name: '@quilted/asset-manifest',
+    async generateBundle(options, bundle) {
+      await writeManifestForBundle.call(this, bundle, manifestOptions, options);
+    }
+  };
+}
+async function writeManifestForBundle(bundle, {
+  id,
+  file,
+  baseURL,
+  cacheKey,
+  priority
+}, {
+  format
+}) {
+  const outputs = Object.values(bundle);
+  const entries = outputs.filter(output => output.type === 'chunk' && output.isEntry);
+  if (entries.length === 0) {
+    throw new Error(`Could not find any entries in your rollup bundle...`);
+  }
+
+  // We assume the first entry is the "main" one. There can be
+  // more than one because each worker script is also listed as an
+  // entry (though, from a separate build).
+  const entryChunk = entries[0];
+  const dependencyMap = new Map();
+  for (const output of outputs) {
+    if (output.type !== 'chunk') continue;
+    dependencyMap.set(output.fileName, output.imports);
+  }
+  const assets = [];
+  const assetIdMap = new Map();
+  function getAssetId(file) {
+    let id = assetIdMap.get(file);
+    if (id == null) {
+      assets.push(`${baseURL}${file}`);
+      id = assets.length - 1;
+      assetIdMap.set(file, id);
+    }
+    return id;
+  }
+  const manifest = {
+    id,
+    priority,
+    cacheKey,
+    assets,
+    attributes: format === 'es' ? {
+      scripts: {
+        type: 'module'
+      }
+    } : undefined,
+    entries: {
+      default: createAssetsEntry([...entryChunk.imports, entryChunk.fileName], {
+        dependencyMap,
+        getAssetId
+      })
+    },
+    modules: {}
+  };
+  for (const output of outputs) {
+    if (output.type !== 'chunk') continue;
+    const originalModuleId = output.facadeModuleId ?? output.moduleIds[output.moduleIds.length - 1];
+    if (originalModuleId == null) continue;
+
+    // This metadata is added by the rollup plugin for @quilted/async
+    const moduleId = this.getModuleInfo(originalModuleId)?.meta.quilt?.moduleId;
+    if (moduleId == null) continue;
+    manifest.modules[moduleId] = createAssetsEntry([...output.imports, output.fileName], {
+      dependencyMap,
+      getAssetId
+    });
+  }
+  await fs.mkdir(path.dirname(file), {
+    recursive: true
+  });
+  await fs.writeFile(file, JSON.stringify(manifest, null, 2));
+}
+function createAssetsEntry(files, {
+  dependencyMap,
+  getAssetId
+}) {
+  const styles = [];
+  const scripts = [];
+  const allFiles = new Set();
+  const addFile = file => {
+    if (allFiles.has(file)) return;
+    allFiles.add(file);
+    for (const dependency of dependencyMap.get(file) ?? []) {
+      addFile(dependency);
+    }
+  };
+  for (const file of files) {
+    addFile(file);
+  }
+  for (const file of allFiles) {
+    if (file.endsWith('.css')) {
+      styles.push(getAssetId(file));
+    } else {
+      scripts.push(getAssetId(file));
+    }
+  }
+  return {
+    scripts,
+    styles
+  };
+}
 const QUERY_PATTERN = /\?.*$/s;
 const HASH_PATTERN = /#.*$/s;
 const RAW_PATTERN = /(\?|&)raw(?:&|$)/;
@@ -26,7 +134,7 @@ function rawAssets() {
       }
       const moduleId = cleanModuleIdentifier(id);
       this.addWatchFile(moduleId);
-      const file = await readFile(moduleId, {
+      const file = await fs.readFile(moduleId, {
         encoding: 'utf-8'
       });
       return `export default ${JSON.stringify(file)}`;
@@ -53,7 +161,7 @@ function staticAssets({
         return cached;
       }
       const file = cleanModuleIdentifier(id);
-      const content = await readFile(file);
+      const content = await fs.readFile(file);
       let url;
       if (!file.endsWith('.svg') && content.length < inlineLimit) {
         // base64 inlined as a string
@@ -104,4 +212,4 @@ function cleanModuleIdentifier(url) {
   return url.replace(HASH_PATTERN, '').replace(QUERY_PATTERN, '');
 }
 
-export { rawAssets, staticAssets };
+export { assetManifest, rawAssets, staticAssets };

package/build/esm/features/source-code.mjs

@@ -11,7 +11,7 @@ function sourceCode({
   if (!useBabel) {
     return esbuild({
       // Support very modern features
-      target: 'es2023',
+      target: 'es2022',
       jsx: 'automatic',
       jsxImportSource: 'react',
       exclude: 'node_modules/**'

package/build/esm/index.mjs

@@ -1,2 +1,3 @@
 export { quiltAppBrowser, quiltAppServer } from './app.mjs';
+export { quiltModule } from './module.mjs';
 export { quiltPackageESModules, quiltPackageESNext } from './package.mjs';

package/build/esm/module.mjs

@@ -0,0 +1,134 @@
+import * as path from 'node:path';
+import { glob } from 'glob';
+import { fileURLToPath } from 'node:url';
+import { getNodePlugins, removeBuildFiles } from './shared/rollup.mjs';
+import { loadPackageJSON } from './shared/package-json.mjs';
+import { getBrowserTargetDetails } from './shared/browserslist.mjs';
+
+async function quiltModule({
+  root: rootPath = process.cwd(),
+  env,
+  assets,
+  graphql = true
+} = {}) {
+  const root = typeof rootPath === 'string' ? rootPath : fileURLToPath(rootPath);
+  const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
+  const outputDirectory = path.join(root, 'build/assets');
+  const minify = assets?.minify ?? true;
+  const hash = assets?.hash ?? true;
+  const hashFilenamePart = hash ? '.[hash]' : '';
+  const browserTarget = await getBrowserTargetDetails(assets?.targets, {
+    root
+  });
+  const targetFilenamePart = browserTarget.name ? `.${browserTarget.name}` : '';
+  const [{
+    visualizer
+  }, {
+    magicModuleEnv,
+    replaceProcessEnv
+  }, {
+    sourceCode
+  }, nodePlugins, packageJSON] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/env.mjs'), import('./features/source-code.mjs'), getNodePlugins(), loadPackageJSON(root)]);
+  const source = await sourceForPackage(root, packageJSON);
+  const plugins = [...nodePlugins, replaceProcessEnv({
+    mode
+  }), magicModuleEnv({
+    ...env,
+    mode
+  }), sourceCode({
+    mode: 'production'
+  }), removeBuildFiles(['build/assets', 'build/reports'], {
+    root
+  })];
+  if (graphql) {
+    const {
+      graphql
+    } = await import('./features/graphql.mjs');
+    plugins.push(graphql({
+      manifest: false
+    }));
+  }
+  if (minify) {
+    const {
+      minify
+    } = await import('rollup-plugin-esbuild');
+    plugins.push(minify());
+  }
+  plugins.push(visualizer({
+    template: 'treemap',
+    open: false,
+    brotliSize: true,
+    filename: path.resolve(root, `build/reports/bundle-visualizer${targetFilenamePart}.html`)
+  }));
+  return {
+    input: source.files,
+    plugins,
+    onwarn(warning, defaultWarn) {
+      // Removes annoying warnings for React-focused libraries that
+      // include 'use client' directives.
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && /['"]use client['"]/.test(warning.message)) {
+        return;
+      }
+      defaultWarn(warning);
+    },
+    output: {
+      format: 'esm',
+      dir: outputDirectory,
+      entryFileNames: `[name]${targetFilenamePart}${hashFilenamePart}.js`,
+      assetFileNames: `[name]${targetFilenamePart}${hashFilenamePart}.[ext]`
+    }
+  };
+}
+async function sourceForPackage(root, packageJSON) {
+  const [entries] = await Promise.all([sourceEntriesForPackage(root, packageJSON)]);
+  let sourceRoot = root;
+  const sourceEntryFiles = Object.values(entries);
+  for (const entry of sourceEntryFiles) {
+    if (!entry.startsWith(root)) continue;
+    sourceRoot = path.resolve(root, path.relative(root, entry).split(path.sep)[0] ?? '.');
+    break;
+  }
+  return {
+    root: sourceRoot,
+    files: sourceEntryFiles
+  };
+}
+async function sourceEntriesForPackage(root, packageJSON) {
+  const {
+    main,
+    exports
+  } = packageJSON;
+  const entries = {};
+  if (typeof main === 'string') {
+    entries['.'] = await resolveTargetFileAsSource(main, root);
+  }
+  if (typeof exports === 'string') {
+    entries['.'] = await resolveTargetFileAsSource(exports, root);
+    return entries;
+  } else if (exports == null || typeof exports !== 'object') {
+    return entries;
+  }
+  for (const [exportPath, exportCondition] of Object.entries(exports)) {
+    let targetFile = null;
+    if (exportCondition == null) continue;
+    if (typeof exportCondition === 'string') {
+      targetFile = exportCondition;
+    } else {
+      targetFile ?? (targetFile = exportCondition['source'] ?? exportCondition['quilt:source'] ?? exportCondition['quilt:esnext'] ?? Object.values(exportCondition).find(condition => typeof condition === 'string' && condition.startsWith('./build/')));
+    }
+    if (targetFile == null) continue;
+    const sourceFile = await resolveTargetFileAsSource(targetFile, root);
+    entries[exportPath] = sourceFile;
+  }
+  return entries;
+}
+async function resolveTargetFileAsSource(file, root) {
+  const sourceFile = file.includes('/build/') ? (await glob(file.replace(/[/]build[/][^/]+[/]/, '/*/').replace(/(\.d\.ts|\.[\w]+)$/, '.*'), {
+    cwd: root,
+    absolute: true,
+    ignore: [path.resolve(root, file)]
+  }))[0] : path.resolve(root, file);
+  return sourceFile;
+}
+
+export { quiltModule };

package/build/esm/package.mjs

@@ -5,7 +5,8 @@ import { getNodePlugins, removeBuildFiles } from './shared/rollup.mjs';
 import { loadPackageJSON } from './shared/package-json.mjs';
 
 async function quiltPackageESModules({
-  root: rootPath = process.cwd()
+  root: rootPath = process.cwd(),
+  graphql = true
 } = {}) {
   const root = typeof rootPath === 'string' ? rootPath : fileURLToPath(rootPath);
   const outputDirectory = path.join(root, 'build/esm');
@@ -18,6 +19,14 @@ async function quiltPackageESModules({
   }), removeBuildFiles(['build/esm'], {
     root
   })];
+  if (graphql) {
+    const {
+      graphql
+    } = await import('./features/graphql.mjs');
+    plugins.push(graphql({
+      manifest: false
+    }));
+  }
   return {
     input: source.files,
     plugins,
@@ -40,7 +49,8 @@ async function quiltPackageESModules({
   };
 }
 async function quiltPackageESNext({
-  root: rootPath = process.cwd()
+  root: rootPath = process.cwd(),
+  graphql = true
 } = {}) {
   const root = typeof rootPath === 'string' ? rootPath : fileURLToPath(rootPath);
   const outputDirectory = path.join(root, 'build/esnext');
@@ -54,6 +64,14 @@ async function quiltPackageESNext({
   }), removeBuildFiles(['build/esnext'], {
     root
   })];
+  if (graphql) {
+    const {
+      graphql
+    } = await import('./features/graphql.mjs');
+    plugins.push(graphql({
+      manifest: false
+    }));
+  }
   return {
     input: source.files,
     plugins,

package/build/esm/shared/browserslist.mjs

@@ -0,0 +1,23 @@
+async function getBrowserTargetDetails(targetSelection = {}, {
+  root
+} = {}) {
+  const targets = Array.isArray(targetSelection) ? {
+    browsers: targetSelection
+  } : targetSelection;
+  const targetBrowsers = targets.browsers ?? (await (async () => {
+    const {
+      default: browserslist
+    } = await import('browserslist');
+    const config = browserslist.findConfig(root);
+    if (config == null) return ['defaults'];
+    const targetName = targets.name ?? 'defaults';
+    return config[targetName] ?? ['defaults'];
+  })());
+  const name = targets.name === 'defaults' ? 'default' : targets.name;
+  return {
+    name,
+    browsers: targetBrowsers
+  };
+}
+
+export { getBrowserTargetDetails };

package/build/esnext/app.esnext

@@ -6,6 +6,7 @@ import { MAGIC_MODULE_ENTRY, MAGIC_MODULE_APP_COMPONENT, MAGIC_MODULE_REQUEST_RO
 import { multiline } from './shared/strings.esnext';
 import { getNodePlugins, removeBuildFiles } from './shared/rollup.esnext';
 import { createMagicModulePlugin } from './shared/magic-module.esnext';
+import { getBrowserTargetDetails } from './shared/browserslist.esnext';
 
 async function quiltAppBrowser({
   root: rootPath = process.cwd(),
@@ -20,25 +21,15 @@ async function quiltAppBrowser({
   const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
   const minify = assets?.minify ?? mode === 'production';
   const baseURL = assets?.baseURL ?? '/assets/';
-  const assetTargets = assets?.targets ?? {};
-  const targets = Array.isArray(assetTargets) ? {
-    browsers: assetTargets
-  } : assetTargets;
-  const targetBrowsers = targets.browsers ?? (await (async () => {
-    const {
-      default: browserslist
-    } = await import('browserslist');
-    const config = browserslist.findConfig(root);
-    if (config == null) return ['defaults'];
-    const targetName = targets.name ?? 'defaults';
-    return config[targetName] ?? ['defaults'];
-  })());
-  const normalizedTargetName = targets.name === 'defaults' ? 'default' : targets.name;
-  const targetFilenamePart = normalizedTargetName ? `.${normalizedTargetName}` : '';
+  const browserTarget = await getBrowserTargetDetails(assets?.targets, {
+    root
+  });
+  const targetFilenamePart = browserTarget.name ? `.${browserTarget.name}` : '';
   const [{
     visualizer
   }, {
-    assetManifest
+    magicModuleEnv,
+    replaceProcessEnv
   }, {
     sourceCode
   }, {
@@ -46,16 +37,22 @@ async function quiltAppBrowser({
   }, {
     css
   }, {
+    assetManifest,
     rawAssets,
     staticAssets
   }, {
     systemJS
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('@quilted/assets/rollup'), import('./features/source-code.esnext'), import('./features/typescript.esnext'), import('./features/css.esnext'), import('./features/assets.esnext'), import('./features/system-js.esnext'), getNodePlugins()]);
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/env.esnext'), import('./features/source-code.esnext'), import('./features/typescript.esnext'), import('./features/css.esnext'), import('./features/assets.esnext'), import('./features/system-js.esnext'), getNodePlugins()]);
   const plugins = [...nodePlugins, systemJS({
     minify
+  }), replaceProcessEnv({
+    mode
+  }), magicModuleEnv({
+    ...env,
+    mode
   }), sourceCode({
     mode,
-    targets: targetBrowsers
+    targets: browserTarget.browsers
   }), css({
     minify,
     emit: true
@@ -69,27 +66,6 @@ async function quiltAppBrowser({
   if (tsconfigAliases) {
     plugins.push(tsconfigAliases);
   }
-  if (env) {
-    const {
-      magicModuleEnv,
-      replaceProcessEnv
-    } = await import('./features/env.esnext');
-    if (typeof env === 'boolean') {
-      plugins.push(replaceProcessEnv({
-        mode
-      }));
-      plugins.push(magicModuleEnv({
-        mode
-      }));
-    } else {
-      plugins.push(replaceProcessEnv({
-        mode
-      }));
-      plugins.push(magicModuleEnv({
-        mode
-      }));
-    }
-  }
   const appEntry = app ?? (await glob('{App,app,input}.{ts,tsx,mjs,js,jsx}', {
     cwd: root,
     nodir: true,
@@ -115,17 +91,15 @@ async function quiltAppBrowser({
     } = await import('rollup-plugin-esbuild');
     plugins.push(minify());
   }
-  const cacheKey = targets.name ? {
-    browserTarget: targets.name
+  const cacheKey = browserTarget.name ? {
+    browserTarget: browserTarget.name
   } : undefined;
-  const id = targets.name ? targets.name : undefined;
-  plugins.push(
-  // @ts-expect-error The plugin still depends on Rollup 3
-  assetManifest({
+  const id = browserTarget.name ? browserTarget.name : undefined;
+  plugins.push(assetManifest({
     id,
     cacheKey,
-    baseUrl: baseURL,
-    path: path.resolve(`build/manifests/assets${targetFilenamePart}.json`),
+    baseURL,
+    file: path.resolve(`build/manifests/assets${targetFilenamePart}.json`),
     priority: assets?.priority
   }), visualizer({
     template: 'treemap',

package/build/esnext/features/assets.esnext

@@ -1,8 +1,116 @@
 import * as path from 'node:path';
-import { readFile } from 'node:fs/promises';
+import * as fs from 'node:fs/promises';
 import { createHash } from 'node:crypto';
 import * as mime from 'mrmime';
 
+function assetManifest(manifestOptions) {
+  return {
+    name: '@quilted/asset-manifest',
+    async generateBundle(options, bundle) {
+      await writeManifestForBundle.call(this, bundle, manifestOptions, options);
+    }
+  };
+}
+async function writeManifestForBundle(bundle, {
+  id,
+  file,
+  baseURL,
+  cacheKey,
+  priority
+}, {
+  format
+}) {
+  const outputs = Object.values(bundle);
+  const entries = outputs.filter(output => output.type === 'chunk' && output.isEntry);
+  if (entries.length === 0) {
+    throw new Error(`Could not find any entries in your rollup bundle...`);
+  }
+
+  // We assume the first entry is the "main" one. There can be
+  // more than one because each worker script is also listed as an
+  // entry (though, from a separate build).
+  const entryChunk = entries[0];
+  const dependencyMap = new Map();
+  for (const output of outputs) {
+    if (output.type !== 'chunk') continue;
+    dependencyMap.set(output.fileName, output.imports);
+  }
+  const assets = [];
+  const assetIdMap = new Map();
+  function getAssetId(file) {
+    let id = assetIdMap.get(file);
+    if (id == null) {
+      assets.push(`${baseURL}${file}`);
+      id = assets.length - 1;
+      assetIdMap.set(file, id);
+    }
+    return id;
+  }
+  const manifest = {
+    id,
+    priority,
+    cacheKey,
+    assets,
+    attributes: format === 'es' ? {
+      scripts: {
+        type: 'module'
+      }
+    } : undefined,
+    entries: {
+      default: createAssetsEntry([...entryChunk.imports, entryChunk.fileName], {
+        dependencyMap,
+        getAssetId
+      })
+    },
+    modules: {}
+  };
+  for (const output of outputs) {
+    if (output.type !== 'chunk') continue;
+    const originalModuleId = output.facadeModuleId ?? output.moduleIds[output.moduleIds.length - 1];
+    if (originalModuleId == null) continue;
+
+    // This metadata is added by the rollup plugin for @quilted/async
+    const moduleId = this.getModuleInfo(originalModuleId)?.meta.quilt?.moduleId;
+    if (moduleId == null) continue;
+    manifest.modules[moduleId] = createAssetsEntry([...output.imports, output.fileName], {
+      dependencyMap,
+      getAssetId
+    });
+  }
+  await fs.mkdir(path.dirname(file), {
+    recursive: true
+  });
+  await fs.writeFile(file, JSON.stringify(manifest, null, 2));
+}
+function createAssetsEntry(files, {
+  dependencyMap,
+  getAssetId
+}) {
+  const styles = [];
+  const scripts = [];
+  const allFiles = new Set();
+  const addFile = file => {
+    if (allFiles.has(file)) return;
+    allFiles.add(file);
+    for (const dependency of dependencyMap.get(file) ?? []) {
+      addFile(dependency);
+    }
+  };
+  for (const file of files) {
+    addFile(file);
+  }
+  for (const file of allFiles) {
+    if (file.endsWith('.css')) {
+      styles.push(getAssetId(file));
+    } else {
+      scripts.push(getAssetId(file));
+    }
+  }
+  return {
+    scripts,
+    styles
+  };
+}
 const QUERY_PATTERN = /\?.*$/s;
 const HASH_PATTERN = /#.*$/s;
 const RAW_PATTERN = /(\?|&)raw(?:&|$)/;
@@ -26,7 +134,7 @@ function rawAssets() {
       }
       const moduleId = cleanModuleIdentifier(id);
       this.addWatchFile(moduleId);
-      const file = await readFile(moduleId, {
+      const file = await fs.readFile(moduleId, {
         encoding: 'utf-8'
       });
       return `export default ${JSON.stringify(file)}`;
@@ -53,7 +161,7 @@ function staticAssets({
         return cached;
       }
       const file = cleanModuleIdentifier(id);
-      const content = await readFile(file);
+      const content = await fs.readFile(file);
       let url;
       if (!file.endsWith('.svg') && content.length < inlineLimit) {
         // base64 inlined as a string
@@ -104,4 +212,4 @@ function cleanModuleIdentifier(url) {
   return url.replace(HASH_PATTERN, '').replace(QUERY_PATTERN, '');
 }
 
-export { rawAssets, staticAssets };
+export { assetManifest, rawAssets, staticAssets };

package/build/esnext/features/source-code.esnext

@@ -11,7 +11,7 @@ function sourceCode({
   if (!useBabel) {
     return esbuild({
       // Support very modern features
-      target: 'es2023',
+      target: 'es2022',
       jsx: 'automatic',
       jsxImportSource: 'react',
       exclude: 'node_modules/**'

package/build/esnext/index.esnext

@@ -1,2 +1,3 @@
 export { quiltAppBrowser, quiltAppServer } from './app.esnext';
+export { quiltModule } from './module.esnext';
 export { quiltPackageESModules, quiltPackageESNext } from './package.esnext';