@quilted/rollup 0.1.13 → 0.1.15

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @quilted/rollup
 
+## 0.1.15
+
+### Patch Changes
+
+- [`750dd6b9`](https://github.com/lemonmade/quilt/commit/750dd6b9cb6a18648cc793f57579fb0b64cb23bc) Thanks [@lemonmade](https://github.com/lemonmade)! - Update Rollup dependencies
+
+- [`750dd6b9`](https://github.com/lemonmade/quilt/commit/750dd6b9cb6a18648cc793f57579fb0b64cb23bc) Thanks [@lemonmade](https://github.com/lemonmade)! - Add GraphQL transforms to package rollup helpers
+
+- [`750dd6b9`](https://github.com/lemonmade/quilt/commit/750dd6b9cb6a18648cc793f57579fb0b64cb23bc) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix invalid `esbuild` target
+
+- Updated dependencies [[`750dd6b9`](https://github.com/lemonmade/quilt/commit/750dd6b9cb6a18648cc793f57579fb0b64cb23bc)]:
+  - @quilted/assets@0.0.5
+
+## 0.1.14
+
+### Patch Changes
+
+- [`3c223309`](https://github.com/lemonmade/quilt/commit/3c22330964279610b544a26c5a30b9e2fc8c1272) Thanks [@lemonmade](https://github.com/lemonmade)! - Add ESNext plugin
+
 ## 0.1.13
 
 ### Patch Changes

package/build/cjs/app.cjs

@@ -59,8 +59,6 @@ async function quiltAppBrowser({
   const targetFilenamePart = normalizedTargetName ? `.${normalizedTargetName}` : '';
   const [{
     visualizer
-  }, {
-    assetManifest
   }, {
     sourceCode
   }, {
@@ -68,11 +66,12 @@ async function quiltAppBrowser({
   }, {
     css
   }, {
+    assetManifest,
     rawAssets,
     staticAssets
   }, {
     systemJS
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('@quilted/assets/rollup'), Promise.resolve().then(function () { return require('./features/source-code.cjs'); }), Promise.resolve().then(function () { return require('./features/typescript.cjs'); }), Promise.resolve().then(function () { return require('./features/css.cjs'); }), Promise.resolve().then(function () { return require('./features/assets.cjs'); }), Promise.resolve().then(function () { return require('./features/system-js.cjs'); }), rollup.getNodePlugins()]);
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), Promise.resolve().then(function () { return require('./features/source-code.cjs'); }), Promise.resolve().then(function () { return require('./features/typescript.cjs'); }), Promise.resolve().then(function () { return require('./features/css.cjs'); }), Promise.resolve().then(function () { return require('./features/assets.cjs'); }), Promise.resolve().then(function () { return require('./features/system-js.cjs'); }), rollup.getNodePlugins()]);
   const plugins = [...nodePlugins, systemJS({
     minify
   }), sourceCode({
@@ -141,13 +140,11 @@ async function quiltAppBrowser({
     browserTarget: targets.name
   } : undefined;
   const id = targets.name ? targets.name : undefined;
-  plugins.push(
-  // @ts-expect-error The plugin still depends on Rollup 3
-  assetManifest({
+  plugins.push(assetManifest({
     id,
     cacheKey,
-    baseUrl: baseURL,
-    path: path__namespace.resolve(`build/manifests/assets${targetFilenamePart}.json`),
+    baseURL,
+    file: path__namespace.resolve(`build/manifests/assets${targetFilenamePart}.json`),
     priority: assets?.priority
   }), visualizer({
     template: 'treemap',

package/build/cjs/features/assets.cjs

@@ -23,8 +23,117 @@ function _interopNamespaceDefault(e) {
 }
 
 var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
+var fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
 var mime__namespace = /*#__PURE__*/_interopNamespaceDefault(mime);
 
+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__namespace.mkdir(path__namespace.dirname(file), {
+    recursive: true
+  });
+  await fs__namespace.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(?:&|$)/;
@@ -48,7 +157,7 @@ function rawAssets() {
       }
       const moduleId = cleanModuleIdentifier(id);
       this.addWatchFile(moduleId);
-      const file = await fs.readFile(moduleId, {
+      const file = await fs__namespace.readFile(moduleId, {
         encoding: 'utf-8'
       });
       return `export default ${JSON.stringify(file)}`;
@@ -75,7 +184,7 @@ function staticAssets({
         return cached;
       }
       const file = cleanModuleIdentifier(id);
-      const content = await fs.readFile(file);
+      const content = await fs__namespace.readFile(file);
       let url;
       if (!file.endsWith('.svg') && content.length < inlineLimit) {
         // base64 inlined as a string
@@ -126,5 +235,6 @@ function cleanModuleIdentifier(url) {
   return url.replace(HASH_PATTERN, '').replace(QUERY_PATTERN, '');
 }
 
+exports.assetManifest = assetManifest;
 exports.rawAssets = rawAssets;
 exports.staticAssets = staticAssets;

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

@@ -2,12 +2,24 @@
 
 var node_module = require('node:module');
 var babel = require('@rollup/plugin-babel');
+var esbuild = require('rollup-plugin-esbuild');
 
-const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('features/source-code.cjs', document.baseURI).href)));
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('features/source-code.cjs', document.baseURI).href)));
 function sourceCode({
   mode,
-  targets
+  targets,
+  babel: useBabel = true
 }) {
+  if (!useBabel) {
+    return esbuild({
+      // Support very modern features
+      target: 'es2022',
+      jsx: 'automatic',
+      jsxImportSource: 'react',
+      exclude: 'node_modules/**'
+    });
+  }
   return babel({
     envName: mode,
     configFile: false,

package/build/cjs/features/system-js.cjs

@@ -3,6 +3,7 @@
 var fs = require('node:fs/promises');
 var node_module = require('node:module');
 
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function systemJS({
   minify = false
 } = {}) {
@@ -10,7 +11,7 @@ function systemJS({
     name: '@quilted/system-js',
     async renderChunk(_, chunk, options) {
       if (options.format !== 'system' || !chunk.isEntry) return null;
-      const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('features/system-js.cjs', document.baseURI).href)));
+      const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('features/system-js.cjs', document.baseURI).href)));
       const systemjs = minify ? require$1.resolve('systemjs/dist/s.min.js') : require$1.resolve('systemjs/dist/s.js');
 
       // We write the systemjs loader to a dedicated file, and we make it the

package/build/cjs/index.cjs

@@ -8,3 +8,4 @@ var _package = require('./package.cjs');
 exports.quiltAppBrowser = app.quiltAppBrowser;
 exports.quiltAppServer = app.quiltAppServer;
 exports.quiltPackageESModules = _package.quiltPackageESModules;
+exports.quiltPackageESNext = _package.quiltPackageESNext;

package/build/cjs/package.cjs

@@ -26,28 +26,30 @@ function _interopNamespaceDefault(e) {
 var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
 
 async function quiltPackageESModules({
-  root: rootPath = process.cwd()
+  root: rootPath = process.cwd(),
+  graphql = true
 } = {}) {
   const root = typeof rootPath === 'string' ? rootPath : node_url.fileURLToPath(rootPath);
   const outputDirectory = path__namespace.join(root, 'build/esm');
   const [{
     sourceCode
   }, nodePlugins, packageJSON] = await Promise.all([Promise.resolve().then(function () { return require('./features/source-code.cjs'); }), rollup.getNodePlugins(), packageJson.loadPackageJSON(root)]);
-  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__namespace.resolve(root, path__namespace.relative(root, entry).split(path__namespace.sep)[0] ?? '.');
-    break;
-  }
+  const source = await sourceForPackage(root, packageJSON);
   const plugins = [...nodePlugins, sourceCode({
     mode: 'production'
   }), rollup.removeBuildFiles(['build/esm'], {
     root
   })];
+  if (graphql) {
+    const {
+      graphql
+    } = await Promise.resolve().then(function () { return require('./features/graphql.cjs'); });
+    plugins.push(graphql({
+      manifest: false
+    }));
+  }
   return {
-    input: sourceEntryFiles,
+    input: source.files,
     plugins,
     onwarn(warning, defaultWarn) {
       // Removes annoying warnings for React-focused libraries that
@@ -59,7 +61,7 @@ async function quiltPackageESModules({
     },
     output: {
       preserveModules: true,
-      preserveModulesRoot: sourceRoot,
+      preserveModulesRoot: source.root,
       format: 'esm',
       dir: outputDirectory,
       entryFileNames: `[name].mjs`,
@@ -67,6 +69,65 @@ async function quiltPackageESModules({
     }
   };
 }
+async function quiltPackageESNext({
+  root: rootPath = process.cwd(),
+  graphql = true
+} = {}) {
+  const root = typeof rootPath === 'string' ? rootPath : node_url.fileURLToPath(rootPath);
+  const outputDirectory = path__namespace.join(root, 'build/esnext');
+  const [{
+    sourceCode
+  }, nodePlugins, packageJSON] = await Promise.all([Promise.resolve().then(function () { return require('./features/source-code.cjs'); }), rollup.getNodePlugins(), packageJson.loadPackageJSON(root)]);
+  const source = await sourceForPackage(root, packageJSON);
+  const plugins = [...nodePlugins, sourceCode({
+    mode: 'production',
+    babel: false
+  }), rollup.removeBuildFiles(['build/esnext'], {
+    root
+  })];
+  if (graphql) {
+    const {
+      graphql
+    } = await Promise.resolve().then(function () { return require('./features/graphql.cjs'); });
+    plugins.push(graphql({
+      manifest: false
+    }));
+  }
+  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: {
+      preserveModules: true,
+      preserveModulesRoot: source.root,
+      format: 'esm',
+      dir: outputDirectory,
+      entryFileNames: `[name].esnext`,
+      assetFileNames: `[name].[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__namespace.resolve(root, path__namespace.relative(root, entry).split(path__namespace.sep)[0] ?? '.');
+    break;
+  }
+  return {
+    root: sourceRoot,
+    files: sourceEntryFiles
+  };
+}
 async function sourceEntriesForPackage(root, packageJSON) {
   const {
     main,
@@ -106,3 +167,4 @@ async function resolveTargetFileAsSource(file, root) {
 }
 
 exports.quiltPackageESModules = quiltPackageESModules;
+exports.quiltPackageESNext = quiltPackageESNext;

package/build/esm/app.mjs

@@ -37,8 +37,6 @@ async function quiltAppBrowser({
   const targetFilenamePart = normalizedTargetName ? `.${normalizedTargetName}` : '';
   const [{
     visualizer
-  }, {
-    assetManifest
   }, {
     sourceCode
   }, {
@@ -46,11 +44,12 @@ async function quiltAppBrowser({
   }, {
     css
   }, {
+    assetManifest,
     rawAssets,
     staticAssets
   }, {
     systemJS
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('@quilted/assets/rollup'), import('./features/source-code.mjs'), import('./features/typescript.mjs'), import('./features/css.mjs'), import('./features/assets.mjs'), import('./features/system-js.mjs'), getNodePlugins()]);
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/source-code.mjs'), import('./features/typescript.mjs'), import('./features/css.mjs'), import('./features/assets.mjs'), import('./features/system-js.mjs'), getNodePlugins()]);
   const plugins = [...nodePlugins, systemJS({
     minify
   }), sourceCode({
@@ -119,13 +118,11 @@ async function quiltAppBrowser({
     browserTarget: targets.name
   } : undefined;
   const id = targets.name ? targets.name : undefined;
-  plugins.push(
-  // @ts-expect-error The plugin still depends on Rollup 3
-  assetManifest({
+  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/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

@@ -1,11 +1,22 @@
 import { createRequire } from 'node:module';
 import babel from '@rollup/plugin-babel';
+import esbuild from 'rollup-plugin-esbuild';
 
 const require = createRequire(import.meta.url);
 function sourceCode({
   mode,
-  targets
+  targets,
+  babel: useBabel = true
 }) {
+  if (!useBabel) {
+    return esbuild({
+      // Support very modern features
+      target: 'es2022',
+      jsx: 'automatic',
+      jsxImportSource: 'react',
+      exclude: 'node_modules/**'
+    });
+  }
   return babel({
     envName: mode,
     configFile: false,

package/build/esm/index.mjs

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