@quilted/rollup 0.1.14 → 0.1.15

package/package.json

@@ -6,7 +6,7 @@
     "access": "public",
     "@quilted/registry": "https://registry.npmjs.org"
   },
-  "version": "0.1.14",
+  "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

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

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);
@@ -34,6 +42,11 @@ export async function quiltPackageESModules({
     removeBuildFiles(['build/esm'], {root}),
   ];
 
+  if (graphql) {
+    const {graphql} = await import('./features/graphql.ts');
+    plugins.push(graphql({manifest: false}));
+  }
+
   return {
     input: source.files,
     plugins,
@@ -62,6 +75,7 @@ export async function quiltPackageESModules({
 
 export async function quiltPackageESNext({
   root: rootPath = process.cwd(),
+  graphql = true,
 }: PackageOptions = {}) {
   const root =
     typeof rootPath === 'string' ? rootPath : fileURLToPath(rootPath);
@@ -81,6 +95,11 @@ export async function quiltPackageESNext({
     removeBuildFiles(['build/esnext'], {root}),
   ];
 
+  if (graphql) {
+    const {graphql} = await import('./features/graphql.ts');
+    plugins.push(graphql({manifest: false}));
+  }
+
   return {
     input: source.files,
     plugins,