@quilted/rollup 0.1.5 → 0.1.7

package/source/app.ts

@@ -1,6 +1,8 @@
 import * as path from 'path';
+import * as fs from 'fs/promises';
 
 import type {Plugin, RollupOptions, GetManualChunk} from 'rollup';
+import type {AssetsBuildManifest} from '@quilted/assets';
 
 import {
   MAGIC_MODULE_ENTRY,
@@ -91,6 +93,8 @@ export interface AppBrowserAssetsOptions {
    * @default true
    */
   minify?: boolean;
+
+  baseURL?: string;
 }
 
 export async function quiltAppBrowser({
@@ -103,17 +107,22 @@ export async function quiltAppBrowser({
 }: AppBrowserOptions = {}) {
   const mode =
     (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
-  const minify = assets?.minify ?? true;
+  const minify = assets?.minify ?? mode === 'production';
+  const baseURL = assets?.baseURL ?? '/assets/';
 
   const [
     {visualizer},
+    {assetManifest},
     {sourceCode},
+    {css},
     {rawAssets, staticAssets},
     {systemJS},
     nodePlugins,
   ] = await Promise.all([
     import('rollup-plugin-visualizer'),
+    import('@quilted/assets/rollup'),
     import('./features/source-code.ts'),
+    import('./features/css.ts'),
     import('./features/assets.ts'),
     import('./features/system-js.ts'),
     getNodePlugins(),
@@ -121,10 +130,11 @@ export async function quiltAppBrowser({
 
   const plugins: Plugin[] = [
     ...nodePlugins,
-    systemJS(),
+    systemJS({minify}),
     sourceCode({mode}),
+    css({minify, emit: true}),
     rawAssets(),
-    staticAssets(),
+    staticAssets({baseURL, emit: true}),
   ];
 
   if (env) {
@@ -158,17 +168,34 @@ export async function quiltAppBrowser({
   }
 
   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,
     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',
@@ -200,7 +227,7 @@ export interface AppServerOptions extends AppOptions {
 export async function quiltAppServer({
   app,
   env,
-  graphql,
+  graphql = true,
   entry = MAGIC_MODULE_ENTRY,
   minify = false,
 }: AppServerOptions = {}) {
@@ -210,12 +237,14 @@ export async function quiltAppServer({
   const [
     {visualizer},
     {sourceCode},
+    {css},
     {rawAssets, staticAssets},
     {magicModuleRequestRouterEntry},
     nodePlugins,
   ] = await Promise.all([
     import('rollup-plugin-visualizer'),
     import('./features/source-code.ts'),
+    import('./features/css.ts'),
     import('./features/assets.ts'),
     import('./features/request-router.ts'),
     getNodePlugins(),
@@ -224,6 +253,7 @@ export async function quiltAppServer({
   const plugins: Plugin[] = [
     ...nodePlugins,
     sourceCode({mode}),
+    css({emit: false, minify}),
     rawAssets(),
     staticAssets({emit: false}),
   ];
@@ -264,7 +294,7 @@ export async function quiltAppServer({
       template: 'treemap',
       open: false,
       brotliSize: true,
-      filename: path.resolve(`reports/bundle-visualizer.html`),
+      filename: path.resolve(`build/reports/bundle-visualizer.html`),
     }),
   );
 
@@ -360,6 +390,55 @@ export function magicModuleAppBrowserEntry({
   });
 }
 
+export 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,
+        cwd: path.resolve(`build/manifests`),
+      });
+
+      const manifests = await Promise.all(
+        manifestFiles.map(
+          async (file) =>
+            JSON.parse(await fs.readFile(file, 'utf8')) as AssetsBuildManifest,
+        ),
+      );
+
+      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';

package/source/features/css.ts

@@ -2,13 +2,13 @@ import type {Plugin} from 'rollup';
 
 export interface Options {
   minify?: boolean;
-  extract?: boolean;
+  emit?: boolean;
 }
 
 const CSS_REGEX = /\.css$/;
 const CSS_MODULE_REGEX = /\.module\.css$/;
 
-export function cssRollupPlugin({minify = true, extract = true}: Options) {
+export function css({minify = true, emit = true}: Options) {
   const styles = new Map<string, string>();
 
   return {
@@ -22,7 +22,7 @@ export function cssRollupPlugin({minify = true, extract = true}: Options) {
         filename: id,
         code: new TextEncoder().encode(code),
         cssModules: CSS_MODULE_REGEX.test(id),
-        minify,
+        minify: emit && minify,
       });
 
       styles.set(id, new TextDecoder().decode(transformed.code));
@@ -47,7 +47,7 @@ export function cssRollupPlugin({minify = true, extract = true}: Options) {
       };
     },
     async renderChunk(_, chunk) {
-      if (!extract) return null;
+      if (!emit) return null;
 
       let chunkCss = '';
 

package/source/features/source-code.ts

@@ -12,6 +12,7 @@ export function sourceCode({
   targets?: string[];
 }) {
   return babel({
+    envName: mode,
     configFile: false,
     babelrc: false,
     presets: [
@@ -45,7 +46,6 @@ export function sourceCode({
         {version: '2023-01'},
       ],
     ],
-    targets,
     extensions: [
       '.ts',
       '.tsx',
@@ -60,5 +60,7 @@ export function sourceCode({
     exclude: 'node_modules/**',
     babelHelpers: 'bundled',
     skipPreflightCheck: true,
+    // Babel doesn’t like this option being set to `undefined`.
+    ...(targets ? {targets} : {}),
   });
 }

package/tsconfig.json

@@ -6,5 +6,5 @@
   },
   "include": ["source"],
   "exclude": ["quilt.project.ts", "**/*.test.ts", "**/*.test.tsx"],
-  "references": []
+  "references": [{"path": "../assets"}, {"path": "../graphql"}]
 }