@quilted/rollup 0.1.6 → 0.1.8

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @quilted/rollup
 
+## 0.1.8
+
+### Patch Changes
+
+- [`86430876`](https://github.com/lemonmade/quilt/commit/864308760c9105cfe4b403ea54916c314af0e50b) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix asset manifest plugins
+
+- [`e2038611`](https://github.com/lemonmade/quilt/commit/e203861184c39bc008ed7358f541944aa7db1cdd) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix 'use client' directive in server builds
+
+## 0.1.7
+
+### Patch Changes
+
+- [`f450b0e4`](https://github.com/lemonmade/quilt/commit/f450b0e4ff5026dfd98f8fa044fb1fa26c0861bf) Thanks [@lemonmade](https://github.com/lemonmade)! - Actually fix Babel `target` option
+
+- [`29564cdc`](https://github.com/lemonmade/quilt/commit/29564cdcd0f82cb5bb2eee6d76ad9314db28d14c) Thanks [@lemonmade](https://github.com/lemonmade)! - Add asset plugins
+
 ## 0.1.6
 
 ### Patch Changes

package/build/cjs/app.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var path = require('node:path');
+var fs = require('node:fs/promises');
 var constants = require('./constants.cjs');
 var strings = require('./shared/strings.cjs');
 var rollup = require('./shared/rollup.cjs');
@@ -24,6 +25,7 @@ function _interopNamespaceDefault(e) {
 }
 
 var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
+var fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
 
 async function quiltAppBrowser({
   app,
@@ -35,8 +37,11 @@ async function quiltAppBrowser({
 } = {}) {
   const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
   const minify = assets?.minify ?? mode === 'production';
+  const baseURL = assets?.baseURL ?? '/assets/';
   const [{
     visualizer
+  }, {
+    assetManifest
   }, {
     sourceCode
   }, {
@@ -46,12 +51,18 @@ async function quiltAppBrowser({
     staticAssets
   }, {
     systemJS
-  }, 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/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(), sourceCode({
+  }, 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/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({
     mode
   }), css({
-    minify
-  }), rawAssets(), staticAssets()];
+    minify,
+    emit: true
+  }), rawAssets(), staticAssets({
+    baseURL,
+    emit: true
+  })];
   if (env) {
     const {
       magicModuleEnv,
@@ -93,11 +104,16 @@ async function quiltAppBrowser({
     } = await import('rollup-plugin-esbuild');
     plugins.push(minify());
   }
-  plugins.push(visualizer({
+  plugins.push(
+  // @ts-expect-error The plugin still depends on Rollup 3
+  assetManifest({
+    baseUrl: baseURL,
+    path: path__namespace.resolve(`build/manifests/assets.json`)
+  }), visualizer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path__namespace.resolve(`reports/bundle-visualizer.html`)
+    filename: path__namespace.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,
@@ -144,7 +160,8 @@ async function quiltAppServer({
   const plugins = [...nodePlugins, sourceCode({
     mode
   }), css({
-    emit: false
+    emit: false,
+    minify
   }), rawAssets(), staticAssets({
     emit: false
   })];
@@ -178,6 +195,7 @@ async function quiltAppServer({
   plugins.push(magicModuleAppRequestRouter({
     entry
   }));
+  plugins.push(magicModuleAppAssetManifests());
   if (graphql) {
     const {
       graphql
@@ -196,11 +214,19 @@ async function quiltAppServer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path__namespace.resolve(`reports/bundle-visualizer.html`)
+    filename: path__namespace.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,
     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: isESM ? 'esm' : 'systemjs',
       format: 'esm',
@@ -279,6 +305,43 @@ function magicModuleAppBrowserEntry({
     }
   });
 }
+function magicModuleAppAssetManifests() {
+  return magicModule.createMagicModulePlugin({
+    name: '@quilted/magic-module/asset-manifests',
+    module: constants.MAGIC_MODULE_BROWSER_ASSETS,
+    async source() {
+      const {
+        glob
+      } = await import('glob');
+      const manifestFiles = await glob('assets*.json', {
+        nodir: true,
+        absolute: true,
+        cwd: path__namespace.resolve(`build/manifests`)
+      });
+      const manifests = await Promise.all(manifestFiles.map(async file => JSON.parse(await fs__namespace.readFile(file, 'utf8'))));
+      manifests.sort((manifestA, manifestB) => (manifestA.priority ?? 0) - (manifestB.priority ?? 0));
+      return strings.multiline`
+        import {BrowserAssetsFromManifests} from '@quilted/quilt/server';
+
+        export class BrowserAssets extends BrowserAssetsFromManifests {
+          constructor() {
+            const manifests = JSON.parse(${JSON.stringify(JSON.stringify(manifests))});
+
+            // The default manifest is the last one, since it has the widest browser support.
+            const defaultManifest = manifests.at(-1);
+
+            super(manifests, {
+              defaultManifest,
+              cacheKey(request) {
+                return {};
+              },
+            });
+          }
+        }
+      `;
+    }
+  });
+}
 const FRAMEWORK_CHUNK_NAME = 'framework';
 const POLYFILLS_CHUNK_NAME = 'polyfills';
 const VENDOR_CHUNK_NAME = 'vendor';
@@ -346,6 +409,7 @@ function createManualChunksSorter() {
   };
 }
 
+exports.magicModuleAppAssetManifests = magicModuleAppAssetManifests;
 exports.magicModuleAppBrowserEntry = magicModuleAppBrowserEntry;
 exports.magicModuleAppComponent = magicModuleAppComponent;
 exports.magicModuleAppRequestRouter = magicModuleAppRequestRouter;

package/build/cjs/features/assets.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var path = require('node:path');
-var promises = require('node:fs/promises');
+var fs = require('node:fs/promises');
 var node_crypto = require('node:crypto');
 var mime = require('mrmime');
 
@@ -48,7 +48,7 @@ function rawAssets() {
       }
       const moduleId = cleanModuleIdentifier(id);
       this.addWatchFile(moduleId);
-      const file = await promises.readFile(moduleId, {
+      const file = await fs.readFile(moduleId, {
         encoding: 'utf-8'
       });
       return `export default ${JSON.stringify(file)}`;
@@ -75,7 +75,7 @@ function staticAssets({
         return cached;
       }
       const file = cleanModuleIdentifier(id);
-      const content = await promises.readFile(file);
+      const content = await fs.readFile(file);
       let url;
       if (!file.endsWith('.svg') && content.length < inlineLimit) {
         // base64 inlined as a string

package/build/cjs/features/graphql.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var path = require('node:path');
-var promises = require('node:fs/promises');
+var fs = require('node:fs/promises');
 var graphql$1 = require('graphql');
 var transform = require('./graphql/transform.cjs');
 
@@ -46,10 +46,10 @@ function graphql({
           operations[operation.id] = operation.source;
         }
       }
-      await promises.mkdir(path.dirname(manifestPath), {
+      await fs.mkdir(path.dirname(manifestPath), {
         recursive: true
       });
-      await promises.writeFile(manifestPath, JSON.stringify(operations, null, 2));
+      await fs.writeFile(manifestPath, JSON.stringify(operations, null, 2));
     }
   };
 }
@@ -71,7 +71,7 @@ async function loadDocument(code, file, plugin, add, level = 0, seen = new Set()
       throw new Error(`Could not find ${JSON.stringify(imported)} from ${JSON.stringify(file)}`);
     }
     plugin.addWatchFile(resolvedId.id);
-    const contents = await promises.readFile(resolvedId.id, {
+    const contents = await fs.readFile(resolvedId.id, {
       encoding: 'utf8'
     });
     return loadDocument(contents, resolvedId.id, plugin, add, level + 1, seen);

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

@@ -30,7 +30,6 @@ function sourceCode({
     plugins: [[require$1.resolve('@babel/plugin-proposal-decorators'), {
       version: '2023-01'
     }]],
-    targets,
     extensions: ['.ts', '.tsx', '.mts', '.mtsx', '.js', '.jsx', '.es6', '.es', '.mjs'],
     exclude: 'node_modules/**',
     babelHelpers: 'bundled',

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var promises = require('node:fs/promises');
+var fs = require('node:fs/promises');
 var node_module = require('node:module');
 
 function systemJS({
@@ -19,7 +19,7 @@ function systemJS({
       const fileHandle = this.emitFile({
         type: 'asset',
         name: 'loader.js',
-        source: (await promises.readFile(systemjs, {
+        source: (await fs.readFile(systemjs, {
           encoding: 'utf8'
         })).replace(
         // Remove the source map comment, if it is present, because we don’t upload the

package/build/esm/app.mjs

@@ -1,4 +1,5 @@
 import * as path from 'node:path';
+import * as fs from 'node:fs/promises';
 import { MAGIC_MODULE_ENTRY, MAGIC_MODULE_APP_COMPONENT, MAGIC_MODULE_REQUEST_ROUTER, MAGIC_MODULE_BROWSER_ASSETS } from './constants.mjs';
 import { multiline } from './shared/strings.mjs';
 import { getNodePlugins } from './shared/rollup.mjs';
@@ -14,8 +15,11 @@ async function quiltAppBrowser({
 } = {}) {
   const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
   const minify = assets?.minify ?? mode === 'production';
+  const baseURL = assets?.baseURL ?? '/assets/';
   const [{
     visualizer
+  }, {
+    assetManifest
   }, {
     sourceCode
   }, {
@@ -25,12 +29,18 @@ async function quiltAppBrowser({
     staticAssets
   }, {
     systemJS
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/source-code.mjs'), import('./features/css.mjs'), import('./features/assets.mjs'), import('./features/system-js.mjs'), getNodePlugins()]);
-  const plugins = [...nodePlugins, systemJS(), sourceCode({
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('@quilted/assets/rollup'), import('./features/source-code.mjs'), import('./features/css.mjs'), import('./features/assets.mjs'), import('./features/system-js.mjs'), getNodePlugins()]);
+  const plugins = [...nodePlugins, systemJS({
+    minify
+  }), sourceCode({
     mode
   }), css({
-    minify
-  }), rawAssets(), staticAssets()];
+    minify,
+    emit: true
+  }), rawAssets(), staticAssets({
+    baseURL,
+    emit: true
+  })];
   if (env) {
     const {
       magicModuleEnv,
@@ -72,11 +82,16 @@ async function quiltAppBrowser({
     } = await import('rollup-plugin-esbuild');
     plugins.push(minify());
   }
-  plugins.push(visualizer({
+  plugins.push(
+  // @ts-expect-error The plugin still depends on Rollup 3
+  assetManifest({
+    baseUrl: baseURL,
+    path: path.resolve(`build/manifests/assets.json`)
+  }), visualizer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path.resolve(`reports/bundle-visualizer.html`)
+    filename: path.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,
@@ -123,7 +138,8 @@ async function quiltAppServer({
   const plugins = [...nodePlugins, sourceCode({
     mode
   }), css({
-    emit: false
+    emit: false,
+    minify
   }), rawAssets(), staticAssets({
     emit: false
   })];
@@ -157,6 +173,7 @@ async function quiltAppServer({
   plugins.push(magicModuleAppRequestRouter({
     entry
   }));
+  plugins.push(magicModuleAppAssetManifests());
   if (graphql) {
     const {
       graphql
@@ -175,11 +192,19 @@ async function quiltAppServer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path.resolve(`reports/bundle-visualizer.html`)
+    filename: path.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,
     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: isESM ? 'esm' : 'systemjs',
       format: 'esm',
@@ -258,6 +283,43 @@ function magicModuleAppBrowserEntry({
     }
   });
 }
+function magicModuleAppAssetManifests() {
+  return createMagicModulePlugin({
+    name: '@quilted/magic-module/asset-manifests',
+    module: MAGIC_MODULE_BROWSER_ASSETS,
+    async source() {
+      const {
+        glob
+      } = await import('glob');
+      const manifestFiles = await glob('assets*.json', {
+        nodir: true,
+        absolute: true,
+        cwd: path.resolve(`build/manifests`)
+      });
+      const manifests = await Promise.all(manifestFiles.map(async file => JSON.parse(await fs.readFile(file, 'utf8'))));
+      manifests.sort((manifestA, manifestB) => (manifestA.priority ?? 0) - (manifestB.priority ?? 0));
+      return multiline`
+        import {BrowserAssetsFromManifests} from '@quilted/quilt/server';
+
+        export class BrowserAssets extends BrowserAssetsFromManifests {
+          constructor() {
+            const manifests = JSON.parse(${JSON.stringify(JSON.stringify(manifests))});
+
+            // The default manifest is the last one, since it has the widest browser support.
+            const defaultManifest = manifests.at(-1);
+
+            super(manifests, {
+              defaultManifest,
+              cacheKey(request) {
+                return {};
+              },
+            });
+          }
+        }
+      `;
+    }
+  });
+}
 const FRAMEWORK_CHUNK_NAME = 'framework';
 const POLYFILLS_CHUNK_NAME = 'polyfills';
 const VENDOR_CHUNK_NAME = 'vendor';
@@ -325,4 +387,4 @@ function createManualChunksSorter() {
   };
 }
 
-export { magicModuleAppBrowserEntry, magicModuleAppComponent, magicModuleAppRequestRouter, quiltAppBrowser, quiltAppServer };
+export { magicModuleAppAssetManifests, magicModuleAppBrowserEntry, magicModuleAppComponent, magicModuleAppRequestRouter, quiltAppBrowser, quiltAppServer };

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

@@ -28,7 +28,6 @@ function sourceCode({
     plugins: [[require.resolve('@babel/plugin-proposal-decorators'), {
       version: '2023-01'
     }]],
-    targets,
     extensions: ['.ts', '.tsx', '.mts', '.mtsx', '.js', '.jsx', '.es6', '.es', '.mjs'],
     exclude: 'node_modules/**',
     babelHelpers: 'bundled',

package/build/esnext/app.esnext

@@ -1,4 +1,5 @@
 import * as path from 'node:path';
+import * as fs from 'node:fs/promises';
 import { MAGIC_MODULE_ENTRY, MAGIC_MODULE_APP_COMPONENT, MAGIC_MODULE_REQUEST_ROUTER, MAGIC_MODULE_BROWSER_ASSETS } from './constants.esnext';
 import { multiline } from './shared/strings.esnext';
 import { getNodePlugins } from './shared/rollup.esnext';
@@ -14,8 +15,11 @@ async function quiltAppBrowser({
 } = {}) {
   const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
   const minify = assets?.minify ?? mode === 'production';
+  const baseURL = assets?.baseURL ?? '/assets/';
   const [{
     visualizer
+  }, {
+    assetManifest
   }, {
     sourceCode
   }, {
@@ -25,12 +29,18 @@ async function quiltAppBrowser({
     staticAssets
   }, {
     systemJS
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/source-code.esnext'), import('./features/css.esnext'), import('./features/assets.esnext'), import('./features/system-js.esnext'), getNodePlugins()]);
-  const plugins = [...nodePlugins, systemJS(), sourceCode({
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('@quilted/assets/rollup'), import('./features/source-code.esnext'), import('./features/css.esnext'), import('./features/assets.esnext'), import('./features/system-js.esnext'), getNodePlugins()]);
+  const plugins = [...nodePlugins, systemJS({
+    minify
+  }), sourceCode({
     mode
   }), css({
-    minify
-  }), rawAssets(), staticAssets()];
+    minify,
+    emit: true
+  }), rawAssets(), staticAssets({
+    baseURL,
+    emit: true
+  })];
   if (env) {
     const {
       magicModuleEnv,
@@ -72,11 +82,16 @@ async function quiltAppBrowser({
     } = await import('rollup-plugin-esbuild');
     plugins.push(minify());
   }
-  plugins.push(visualizer({
+  plugins.push(
+  // @ts-expect-error The plugin still depends on Rollup 3
+  assetManifest({
+    baseUrl: baseURL,
+    path: path.resolve(`build/manifests/assets.json`)
+  }), visualizer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path.resolve(`reports/bundle-visualizer.html`)
+    filename: path.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,
@@ -123,7 +138,8 @@ async function quiltAppServer({
   const plugins = [...nodePlugins, sourceCode({
     mode
   }), css({
-    emit: false
+    emit: false,
+    minify
   }), rawAssets(), staticAssets({
     emit: false
   })];
@@ -157,6 +173,7 @@ async function quiltAppServer({
   plugins.push(magicModuleAppRequestRouter({
     entry
   }));
+  plugins.push(magicModuleAppAssetManifests());
   if (graphql) {
     const {
       graphql
@@ -175,11 +192,19 @@ async function quiltAppServer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path.resolve(`reports/bundle-visualizer.html`)
+    filename: path.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,
     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: isESM ? 'esm' : 'systemjs',
       format: 'esm',
@@ -258,6 +283,43 @@ function magicModuleAppBrowserEntry({
     }
   });
 }
+function magicModuleAppAssetManifests() {
+  return createMagicModulePlugin({
+    name: '@quilted/magic-module/asset-manifests',
+    module: MAGIC_MODULE_BROWSER_ASSETS,
+    async source() {
+      const {
+        glob
+      } = await import('glob');
+      const manifestFiles = await glob('assets*.json', {
+        nodir: true,
+        absolute: true,
+        cwd: path.resolve(`build/manifests`)
+      });
+      const manifests = await Promise.all(manifestFiles.map(async file => JSON.parse(await fs.readFile(file, 'utf8'))));
+      manifests.sort((manifestA, manifestB) => (manifestA.priority ?? 0) - (manifestB.priority ?? 0));
+      return multiline`
+        import {BrowserAssetsFromManifests} from '@quilted/quilt/server';
+
+        export class BrowserAssets extends BrowserAssetsFromManifests {
+          constructor() {
+            const manifests = JSON.parse(${JSON.stringify(JSON.stringify(manifests))});
+
+            // The default manifest is the last one, since it has the widest browser support.
+            const defaultManifest = manifests.at(-1);
+
+            super(manifests, {
+              defaultManifest,
+              cacheKey(request) {
+                return {};
+              },
+            });
+          }
+        }
+      `;
+    }
+  });
+}
 const FRAMEWORK_CHUNK_NAME = 'framework';
 const POLYFILLS_CHUNK_NAME = 'polyfills';
 const VENDOR_CHUNK_NAME = 'vendor';
@@ -325,4 +387,4 @@ function createManualChunksSorter() {
   };
 }
 
-export { magicModuleAppBrowserEntry, magicModuleAppComponent, magicModuleAppRequestRouter, quiltAppBrowser, quiltAppServer };
+export { magicModuleAppAssetManifests, magicModuleAppBrowserEntry, magicModuleAppComponent, magicModuleAppRequestRouter, quiltAppBrowser, quiltAppServer };

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

@@ -28,7 +28,6 @@ function sourceCode({
     plugins: [[require.resolve('@babel/plugin-proposal-decorators'), {
       version: '2023-01'
     }]],
-    targets,
     extensions: ['.ts', '.tsx', '.mts', '.mtsx', '.js', '.jsx', '.es6', '.es', '.mjs'],
     exclude: 'node_modules/**',
     babelHelpers: 'bundled',