@quilted/rollup 0.1.13 → 0.1.15

package/build/typescript/package.d.ts

@@ -4,8 +4,27 @@ export interface PackageOptions {
      * The root directory containing the source code for your application.
      */
     root?: string | URL;
+    /**
+     * Whether to include GraphQL-related code transformations.
+     *
+     * @default true
+     */
+    graphql?: boolean;
 }
-export declare function quiltPackageESModules({ root: rootPath, }?: PackageOptions): Promise<{
+export declare function quiltPackageESModules({ root: rootPath, graphql, }?: PackageOptions): Promise<{
+    input: string[];
+    plugins: Plugin<any>[];
+    onwarn(warning: import("rollup").RollupLog, defaultWarn: import("rollup").LoggingFunction): void;
+    output: {
+        preserveModules: true;
+        preserveModulesRoot: string;
+        format: "esm";
+        dir: string;
+        entryFileNames: string;
+        assetFileNames: string;
+    };
+}>;
+export declare function quiltPackageESNext({ root: rootPath, graphql, }?: PackageOptions): Promise<{
     input: string[];
     plugins: Plugin<any>[];
     onwarn(warning: import("rollup").RollupLog, defaultWarn: import("rollup").LoggingFunction): void;

package/build/typescript/package.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"package.d.ts","sourceRoot":"","sources":["../../source/package.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAqB,MAAM,QAAQ,CAAC;AAOlD,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CACrB;AAED,wBAAsB,qBAAqB,CAAC,EAC1C,IAAI,EAAE,QAAwB,GAC/B,GAAE,cAAmB;;;;;;;;;;;;GA2DrB"}
+{"version":3,"file":"package.d.ts","sourceRoot":"","sources":["../../source/package.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAqB,MAAM,QAAQ,CAAC;AAOlD,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAsB,qBAAqB,CAAC,EAC1C,IAAI,EAAE,QAAwB,EAC9B,OAAc,GACf,GAAE,cAAmB;;;;;;;;;;;;GAgDrB;AAED,wBAAsB,kBAAkB,CAAC,EACvC,IAAI,EAAE,QAAwB,EAC9B,OAAc,GACf,GAAE,cAAmB;;;;;;;;;;;;GAgDrB"}

package/package.json

@@ -6,7 +6,7 @@
     "access": "public",
     "@quilted/registry": "https://registry.npmjs.org"
   },
-  "version": "0.1.13",
+  "version": "0.1.15",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -22,9 +22,23 @@
       "quilt:esnext": "./build/esnext/index.esnext",
       "import": "./build/esm/index.mjs",
       "require": "./build/cjs/index.cjs"
+    },
+    "./features/assets": {
+      "types": "./build/typescript/features/assets.d.ts",
+      "quilt:source": "./source/features/assets.ts",
+      "quilt:esnext": "./build/esnext/features/assets.esnext",
+      "import": "./build/esm/features/assets.mjs",
+      "require": "./build/cjs/features/assets.cjs"
     }
   },
   "types": "./build/typescript/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "features/assets": [
+        "./build/typescript/features/assets.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "dependencies": {
     "@babel/core": "^7.23.0",
@@ -40,7 +54,7 @@
     "@rollup/plugin-commonjs": "^25.0.5",
     "@rollup/plugin-json": "^6.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@quilted/assets": "^0.0.4",
+    "@quilted/assets": "^0.0.5",
     "@quilted/graphql": "^2.0.0",
     "@types/babel__preset-env": "^7.9.0",
     "browserslist": "^4.22.1",
@@ -52,7 +66,7 @@
     "mrmime": "^1.0.1",
     "rollup-plugin-esbuild": "^6.1.0",
     "rollup-plugin-node-externals": "^6.1.2",
-    "rollup-plugin-visualizer": "^5.9.0",
+    "rollup-plugin-visualizer": "^5.9.2",
     "systemjs": "^6.14.2"
   },
   "peerDependencies": {
@@ -64,8 +78,7 @@
     }
   },
   "devDependencies": {
-    "@quilted/testing": "^0.1.0",
-    "rollup": "^4.0.0"
+    "rollup": "^4.1.4"
   },
   "eslintConfig": {
     "extends": [

package/source/app.ts

@@ -151,16 +151,14 @@ export async function quiltAppBrowser({
 
   const [
     {visualizer},
-    {assetManifest},
     {sourceCode},
     {createTSConfigAliasPlugin},
     {css},
-    {rawAssets, staticAssets},
+    {assetManifest, rawAssets, staticAssets},
     {systemJS},
     nodePlugins,
   ] = await Promise.all([
     import('rollup-plugin-visualizer'),
-    import('@quilted/assets/rollup'),
     import('./features/source-code.ts'),
     import('./features/typescript.ts'),
     import('./features/css.ts'),
@@ -235,12 +233,11 @@ export async function quiltAppBrowser({
   const id = targets.name ? targets.name : undefined;
 
   plugins.push(
-    // @ts-expect-error The plugin still depends on Rollup 3
     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({

package/source/features/assets.ts

@@ -1,10 +1,158 @@
 import * as path from 'path';
-import {readFile} from 'fs/promises';
+import * as fs from 'fs/promises';
 import {createHash} from 'crypto';
 
-import type {Plugin} from 'rollup';
+import type {
+  NormalizedOutputOptions,
+  OutputBundle,
+  OutputChunk,
+  Plugin,
+  PluginContext,
+} from 'rollup';
 import * as mime from 'mrmime';
 
+import type {
+  AssetsBuildManifest,
+  AssetsBuildManifestEntry,
+} from '@quilted/assets';
+
+export interface AssetManifestOptions {
+  id?: string;
+  file: string;
+  baseURL: string;
+  priority?: number;
+  cacheKey?: Record<string, any>;
+}
+
+export function assetManifest(manifestOptions: AssetManifestOptions): Plugin {
+  return {
+    name: '@quilted/asset-manifest',
+    async generateBundle(options, bundle) {
+      await writeManifestForBundle.call(this, bundle, manifestOptions, options);
+    },
+  };
+}
+
+async function writeManifestForBundle(
+  this: PluginContext,
+  bundle: OutputBundle,
+  {id, file, baseURL, cacheKey, priority}: AssetManifestOptions,
+  {format}: NormalizedOutputOptions,
+) {
+  const outputs = Object.values(bundle);
+
+  const entries = outputs.filter(
+    (output): output is OutputChunk =>
+      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<string, string[]>();
+
+  for (const output of outputs) {
+    if (output.type !== 'chunk') continue;
+    dependencyMap.set(output.fileName, output.imports);
+  }
+
+  const assets: string[] = [];
+  const assetIdMap = new Map<string, number>();
+
+  function getAssetId(file: string) {
+    let id = assetIdMap.get(file);
+
+    if (id == null) {
+      assets.push(`${baseURL}${file}`);
+      id = assets.length - 1;
+      assetIdMap.set(file, id);
+    }
+
+    return id;
+  }
+
+  const manifest: AssetsBuildManifest<any> = {
+    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: string[],
+  {
+    dependencyMap,
+    getAssetId,
+  }: {
+    dependencyMap: Map<string, string[]>;
+    getAssetId(file: string): number;
+  },
+): AssetsBuildManifestEntry {
+  const styles: number[] = [];
+  const scripts: number[] = [];
+
+  const allFiles = new Set<string>();
+  const addFile = (file: string) => {
+    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(?:&|$)/;
@@ -56,7 +204,7 @@ export function rawAssets(): Plugin {
 
       this.addWatchFile(moduleId);
 
-      const file = await readFile(moduleId, {
+      const file = await fs.readFile(moduleId, {
         encoding: 'utf-8',
       });
 
@@ -103,7 +251,7 @@ export function staticAssets({
       }
 
       const file = cleanModuleIdentifier(id);
-      const content = await readFile(file);
+      const content = await fs.readFile(file);
 
       let url: string;
 

package/source/features/source-code.ts

@@ -1,16 +1,29 @@
 import {createRequire} from 'module';
 
 import babel from '@rollup/plugin-babel';
+import esbuild from 'rollup-plugin-esbuild';
 
 const require = createRequire(import.meta.url);
 
 export function sourceCode({
   mode,
   targets,
+  babel: useBabel = true,
 }: {
   mode?: 'development' | 'production';
   targets?: string[];
+  babel?: boolean;
 }) {
+  if (!useBabel) {
+    return esbuild({
+      // Support very modern features
+      target: 'es2022',
+      jsx: 'automatic',
+      jsxImportSource: 'react',
+      exclude: 'node_modules/**',
+    });
+  }
+
   return babel({
     envName: mode,
     configFile: false,

package/source/index.ts

@@ -5,4 +5,8 @@ export {
   type AppBrowserOptions,
   type AppServerOptions,
 } from './app.ts';
-export {quiltPackageESModules, type PackageOptions} from './package.ts';
+export {
+  quiltPackageESModules,
+  quiltPackageESNext,
+  type PackageOptions,
+} from './package.ts';

package/source/package.ts

@@ -11,10 +11,18 @@ export interface PackageOptions {
    * The root directory containing the source code for your application.
    */
   root?: string | URL;
+
+  /**
+   * Whether to include GraphQL-related code transformations.
+   *
+   * @default true
+   */
+  graphql?: boolean;
 }
 
 export async function quiltPackageESModules({
   root: rootPath = process.cwd(),
+  graphql = true,
 }: PackageOptions = {}) {
   const root =
     typeof rootPath === 'string' ? rootPath : fileURLToPath(rootPath);
@@ -26,32 +34,74 @@ export async function quiltPackageESModules({
     loadPackageJSON(root),
   ]);
 
-  const [entries] = await Promise.all([
-    sourceEntriesForPackage(root, packageJSON),
-  ]);
+  const source = await sourceForPackage(root, packageJSON);
 
-  let sourceRoot = root;
+  const plugins: Plugin[] = [
+    ...nodePlugins,
+    sourceCode({mode: 'production'}),
+    removeBuildFiles(['build/esm'], {root}),
+  ];
 
-  const sourceEntryFiles = Object.values(entries);
+  if (graphql) {
+    const {graphql} = await import('./features/graphql.ts');
+    plugins.push(graphql({manifest: false}));
+  }
 
-  for (const entry of sourceEntryFiles) {
-    if (!entry.startsWith(root)) continue;
+  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;
+      }
 
-    sourceRoot = path.resolve(
-      root,
-      path.relative(root, entry).split(path.sep)[0] ?? '.',
-    );
-    break;
-  }
+      defaultWarn(warning);
+    },
+    output: {
+      preserveModules: true,
+      preserveModulesRoot: source.root,
+      format: 'esm',
+      dir: outputDirectory,
+      entryFileNames: `[name].mjs`,
+      assetFileNames: `[name].[ext]`,
+    },
+  } satisfies RollupOptions;
+}
+
+export async function quiltPackageESNext({
+  root: rootPath = process.cwd(),
+  graphql = true,
+}: PackageOptions = {}) {
+  const root =
+    typeof rootPath === 'string' ? rootPath : fileURLToPath(rootPath);
+  const outputDirectory = path.join(root, 'build/esnext');
+
+  const [{sourceCode}, nodePlugins, packageJSON] = await Promise.all([
+    import('./features/source-code.ts'),
+    getNodePlugins(),
+    loadPackageJSON(root),
+  ]);
+
+  const source = await sourceForPackage(root, packageJSON);
 
   const plugins: Plugin[] = [
     ...nodePlugins,
-    sourceCode({mode: 'production'}),
-    removeBuildFiles(['build/esm'], {root}),
+    sourceCode({mode: 'production', babel: false}),
+    removeBuildFiles(['build/esnext'], {root}),
   ];
 
+  if (graphql) {
+    const {graphql} = await import('./features/graphql.ts');
+    plugins.push(graphql({manifest: false}));
+  }
+
   return {
-    input: sourceEntryFiles,
+    input: source.files,
     plugins,
     onwarn(warning, defaultWarn) {
       // Removes annoying warnings for React-focused libraries that
@@ -67,15 +117,37 @@ export async function quiltPackageESModules({
     },
     output: {
       preserveModules: true,
-      preserveModulesRoot: sourceRoot,
+      preserveModulesRoot: source.root,
       format: 'esm',
       dir: outputDirectory,
-      entryFileNames: `[name].mjs`,
+      entryFileNames: `[name].esnext`,
       assetFileNames: `[name].[ext]`,
     },
   } satisfies RollupOptions;
 }
 
+async function sourceForPackage(root: string, packageJSON: 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: string, packageJSON: PackageJSON) {
   const {main, exports} = packageJSON;