@quilted/rollup 0.1.4 → 0.1.6

package/source/app.ts

@@ -1,6 +1,6 @@
 import * as path from 'path';
 
-import type {GetManualChunk, Plugin} from 'rollup';
+import type {Plugin, RollupOptions, GetManualChunk} from 'rollup';
 
 import {
   MAGIC_MODULE_ENTRY,
@@ -8,10 +8,10 @@ import {
   MAGIC_MODULE_BROWSER_ASSETS,
   MAGIC_MODULE_REQUEST_ROUTER,
 } from './constants.ts';
-import type {MagicModuleEnvOptions} from './env.ts';
+import type {MagicModuleEnvOptions} from './features/env.ts';
 
 import {multiline} from './shared/strings.ts';
-import {getNodePlugins, rollupPluginsToArray} from './shared/rollup.ts';
+import {getNodePlugins} from './shared/rollup.ts';
 import {createMagicModulePlugin} from './shared/magic-module.ts';
 
 export interface AppOptions {
@@ -22,8 +22,9 @@ export interface AppOptions {
    * to create browser and server-side entries for your project.
    *
    * If you only want to use a custom entry module for the browser build, use the
-   * `browser.entry` option instead. If you only want to use a custom entry module
-   * for the server-side build, use the `server.entry` option instead.
+   * `entry` option of the `quiltAppBrowser()` instead. If you only want to use a
+   * custom entry module for the server-side build, use the `server.entry` option
+   * instead.
    *
    * @example './App.tsx'
    */
@@ -46,7 +47,18 @@ export interface AppOptions {
 
 export interface AppBrowserOptions extends AppOptions {
   /**
-   * Customizes the magic `quilt:module/browser` entry module.
+   * The entry module for this browser. This should be an absolute path, or relative
+   * path from the root directory containing your project. This entry should be the
+   * browser entrypoint.
+   *
+   * @example './browser.tsx'
+   * @default 'quilt:module/entry'
+   */
+  entry?: string;
+
+  /**
+   * Customizes the magic `quilt:module/entry` module, which can be used as a "magic"
+   * entry for your application.
    */
   module?: AppBrowserModuleOptions;
 
@@ -81,8 +93,9 @@ export interface AppBrowserAssetsOptions {
   minify?: boolean;
 }
 
-export function quiltAppBrowser({
+export async function quiltAppBrowser({
   app,
+  entry = MAGIC_MODULE_ENTRY,
   env,
   assets,
   module,
@@ -90,78 +103,97 @@ export function quiltAppBrowser({
 }: AppBrowserOptions = {}) {
   const mode =
     (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
+  const minify = assets?.minify ?? mode === 'production';
+
+  const [
+    {visualizer},
+    {sourceCode},
+    {css},
+    {rawAssets, staticAssets},
+    {systemJS},
+    nodePlugins,
+  ] = await Promise.all([
+    import('rollup-plugin-visualizer'),
+    import('./features/source-code.ts'),
+    import('./features/css.ts'),
+    import('./features/assets.ts'),
+    import('./features/system-js.ts'),
+    getNodePlugins(),
+  ]);
+
+  const plugins: Plugin[] = [
+    ...nodePlugins,
+    systemJS(),
+    sourceCode({mode}),
+    css({minify}),
+    rawAssets(),
+    staticAssets(),
+  ];
+
+  if (env) {
+    const {magicModuleEnv, replaceProcessEnv} = await import(
+      './features/env.ts'
+    );
+
+    if (typeof env === 'boolean') {
+      plugins.push(replaceProcessEnv({mode}));
+      plugins.push(magicModuleEnv({mode}));
+    } else {
+      plugins.push(replaceProcessEnv({mode}));
+      plugins.push(magicModuleEnv({mode}));
+    }
+  }
 
-  return {
-    name: '@quilted/app/browser',
-    async options(originalOptions) {
-      const newPlugins = rollupPluginsToArray(originalOptions.plugins);
-      const newOptions = {...originalOptions, plugins: newPlugins};
-
-      const [{visualizer}, {sourceCode}, nodePlugins] = await Promise.all([
-        import('rollup-plugin-visualizer'),
-        import('./shared/source-code.ts'),
-        getNodePlugins(),
-      ]);
-
-      newPlugins.push(...nodePlugins);
-      newPlugins.push(sourceCode({mode}));
-
-      if (env) {
-        const {magicModuleEnv, replaceProcessEnv} = await import('./env.ts');
-
-        if (typeof env === 'boolean') {
-          newPlugins.push(replaceProcessEnv({mode: 'production'}));
-          newPlugins.push(magicModuleEnv({mode: 'production'}));
-        } else {
-          newPlugins.push(replaceProcessEnv({mode: env.mode ?? 'production'}));
-          newPlugins.push(magicModuleEnv({mode: 'production', ...env}));
-        }
-      }
+  if (app) {
+    plugins.push(magicModuleAppComponent({entry: app}));
+  }
 
-      if (app) {
-        newPlugins.push(magicModuleAppComponent({entry: app}));
-      }
+  plugins.push(magicModuleAppBrowserEntry(module));
 
-      newPlugins.push(magicModuleAppBrowserEntry(module));
+  if (graphql) {
+    const {graphql} = await import('./features/graphql.ts');
+    plugins.push(graphql({manifest: path.resolve(`manifests/graphql.json`)}));
+  }
 
-      if (graphql) {
-        const {graphql} = await import('./graphql.ts');
-        newPlugins.push(
-          graphql({manifest: path.resolve(`manifests/graphql.json`)}),
-        );
-      }
+  if (minify) {
+    const {minify} = await import('rollup-plugin-esbuild');
+    plugins.push(minify());
+  }
 
-      const minify = assets?.minify ?? true;
+  plugins.push(
+    visualizer({
+      template: 'treemap',
+      open: false,
+      brotliSize: true,
+      filename: path.resolve(`reports/bundle-visualizer.html`),
+    }),
+  );
 
-      if (minify) {
-        const {minify} = await import('rollup-plugin-esbuild');
-        newPlugins.push(minify());
+  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;
       }
 
-      newPlugins.push(
-        visualizer({
-          template: 'treemap',
-          open: false,
-          brotliSize: true,
-          filename: path.resolve(`reports/bundle-visualizer.html`),
-        }),
-      );
-
-      return newOptions;
+      defaultWarn(warning);
     },
-    outputOptions(originalOptions) {
-      return {
-        ...originalOptions,
-        // format: isESM ? 'esm' : 'systemjs',
-        format: 'esm',
-        dir: path.resolve(`build/assets`),
-        entryFileNames: `app.[hash].js`,
-        assetFileNames: `[name].[hash].[ext]`,
-        chunkFileNames: `[name].[hash].js`,
-        manualChunks: createManualChunksSorter(),
-      };
+    output: {
+      // format: isESM ? 'esm' : 'systemjs',
+      format: 'esm',
+      dir: path.resolve(`build/assets`),
+      entryFileNames: `app.[hash].js`,
+      assetFileNames: `[name].[hash].[ext]`,
+      chunkFileNames: `[name].[hash].js`,
+      manualChunks: createManualChunksSorter(),
     },
-  } satisfies Plugin;
+  } satisfies RollupOptions;
 }
 
 export interface AppServerOptions extends AppOptions {
@@ -171,69 +203,99 @@ export interface AppServerOptions extends AppOptions {
    * the specific server runtime you configure.
    */
   entry?: string;
+
+  /**
+   * Whether to minify the JavaScript outputs for your server.
+   *
+   * @default false
+   */
+  minify?: boolean;
 }
 
-export function quiltAppServer({
+export async function quiltAppServer({
   app,
   env,
-  graphql,
-  entry,
+  graphql = true,
+  entry = MAGIC_MODULE_ENTRY,
+  minify = false,
 }: AppServerOptions = {}) {
   const mode =
     (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
 
-  return {
-    name: '@quilted/app/server',
-    async options(originalOptions) {
-      const newPlugins = rollupPluginsToArray(originalOptions.plugins);
-      const newOptions = {...originalOptions, plugins: newPlugins};
-
-      const [{magicModuleRequestRouterEntry}, {sourceCode}, nodePlugins] =
-        await Promise.all([
-          import('./request-router.ts'),
-          import('./shared/source-code.ts'),
-          getNodePlugins(),
-        ]);
-
-      newPlugins.push(...nodePlugins);
-      newPlugins.push(sourceCode({mode}));
-
-      if (env) {
-        const {magicModuleEnv, replaceProcessEnv} = await import('./env.ts');
-
-        if (typeof env === 'boolean') {
-          newPlugins.push(replaceProcessEnv({mode}));
-          newPlugins.push(magicModuleEnv({mode}));
-        } else {
-          newPlugins.push(replaceProcessEnv({mode}));
-          newPlugins.push(magicModuleEnv({mode, ...env}));
-        }
-      }
-
-      if (app) {
-        newPlugins.push(magicModuleAppComponent({entry: app}));
-      }
-
-      newPlugins.push(magicModuleRequestRouterEntry());
-      newPlugins.push(magicModuleAppRequestRouter({entry}));
-
-      if (graphql) {
-        const {graphql} = await import('./graphql.ts');
-        newPlugins.push(graphql({manifest: false}));
-      }
+  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(),
+  ]);
+
+  const plugins: Plugin[] = [
+    ...nodePlugins,
+    sourceCode({mode}),
+    css({emit: false}),
+    rawAssets(),
+    staticAssets({emit: false}),
+  ];
+
+  if (env) {
+    const {magicModuleEnv, replaceProcessEnv} = await import(
+      './features/env.ts'
+    );
+
+    if (typeof env === 'boolean') {
+      plugins.push(replaceProcessEnv({mode}));
+      plugins.push(magicModuleEnv({mode}));
+    } else {
+      plugins.push(replaceProcessEnv({mode}));
+      plugins.push(magicModuleEnv({mode}));
+    }
+  }
+
+  if (app) {
+    plugins.push(magicModuleAppComponent({entry: app}));
+  }
+
+  plugins.push(magicModuleRequestRouterEntry());
+  plugins.push(magicModuleAppRequestRouter({entry}));
+
+  if (graphql) {
+    const {graphql} = await import('./features/graphql.ts');
+    plugins.push(graphql({manifest: false}));
+  }
+
+  if (minify) {
+    const {minify} = await import('rollup-plugin-esbuild');
+    plugins.push(minify());
+  }
+
+  plugins.push(
+    visualizer({
+      template: 'treemap',
+      open: false,
+      brotliSize: true,
+      filename: path.resolve(`reports/bundle-visualizer.html`),
+    }),
+  );
 
-      return newOptions;
-    },
-    outputOptions(originalOptions) {
-      return {
-        ...originalOptions,
-        // format,
-        format: 'esm',
-        dir: path.resolve(`build/server`),
-        entryFileNames: 'server.js',
-      };
+  return {
+    input: entry,
+    plugins,
+    output: {
+      // format: isESM ? 'esm' : 'systemjs',
+      format: 'esm',
+      dir: path.resolve(`build/server`),
+      entryFileNames: 'server.js',
     },
-  } satisfies Plugin;
+  } satisfies RollupOptions;
 }
 
 export function magicModuleAppComponent({entry}: {entry: string}) {

package/source/features/assets.ts

@@ -0,0 +1,183 @@
+import * as path from 'path';
+import {readFile} from 'fs/promises';
+import {createHash} from 'crypto';
+
+import type {Plugin} from 'rollup';
+import * as mime from 'mrmime';
+
+const QUERY_PATTERN = /\?.*$/s;
+const HASH_PATTERN = /#.*$/s;
+const RAW_PATTERN = /(\?|&)raw(?:&|$)/;
+
+const DEFAULT_INLINE_LIMIT = 4096;
+const DEFAULT_OUTPUT_PATTERN = '[name].[hash].[ext]';
+const DEFAULT_STATIC_ASSET_EXTENSIONS = [
+  // images
+  '.png',
+  '.jpg',
+  '.jpeg',
+  '.gif',
+  '.svg',
+  '.ico',
+  '.webp',
+  '.avif',
+
+  // media
+  '.mp4',
+  '.webm',
+  '.ogg',
+  '.mp3',
+  '.wav',
+  '.flac',
+  '.aac',
+
+  // fonts
+  '.woff',
+  '.woff2',
+  '.eot',
+  '.ttf',
+  '.otf',
+
+  // other
+  '.webmanifest',
+  '.pdf',
+  '.txt',
+];
+
+export function rawAssets(): Plugin {
+  return {
+    name: '@quilted/raw-assets',
+    async load(id) {
+      if (id.startsWith('\0') || !RAW_PATTERN.test(id)) {
+        return null;
+      }
+
+      const moduleId = cleanModuleIdentifier(id);
+
+      this.addWatchFile(moduleId);
+
+      const file = await readFile(moduleId, {
+        encoding: 'utf-8',
+      });
+
+      return `export default ${JSON.stringify(file)}`;
+    },
+  };
+}
+
+export function staticAssets({
+  emit = true,
+  baseURL = '/',
+  extensions = DEFAULT_STATIC_ASSET_EXTENSIONS,
+  inlineLimit = DEFAULT_INLINE_LIMIT,
+  outputPattern = DEFAULT_OUTPUT_PATTERN,
+}: {
+  emit?: boolean;
+  baseURL?: string;
+  extensions?: readonly string[];
+  inlineLimit?: number;
+  outputPattern?: string;
+} = {}) {
+  const assetCache = new Map<string, string>();
+  const assetMatcher = new RegExp(
+    `\\.(` +
+      extensions
+        .map((extension) =>
+          extension.startsWith('.') ? extension.slice(1) : extension,
+        )
+        .join('|') +
+      `)(\\?.*)?$`,
+  );
+
+  return {
+    name: '@quilted/static-assets',
+    async load(id) {
+      if (id.startsWith('\0') || !assetMatcher.test(id)) {
+        return null;
+      }
+
+      const cached = assetCache.get(id);
+
+      if (cached) {
+        return cached;
+      }
+
+      const file = cleanModuleIdentifier(id);
+      const content = await readFile(file);
+
+      let url: string;
+
+      if (!file.endsWith('.svg') && content.length < inlineLimit) {
+        // base64 inlined as a string
+        url = `data:${mime.lookup(file)};base64,${content.toString('base64')}`;
+      } else {
+        const contentHash = getHash(content);
+
+        const filename = assetFileNamesToFileName(
+          outputPattern,
+          file,
+          contentHash,
+        );
+
+        url = `${
+          baseURL.endsWith('/') ? baseURL.slice(0, -1) : baseURL
+        }/${filename}`;
+
+        if (emit) {
+          this.emitFile({
+            name: file,
+            type: 'asset',
+            fileName: filename,
+            source: content,
+          });
+        }
+      }
+
+      const source = `export default ${JSON.stringify(url)};`;
+
+      assetCache.set(id, source);
+
+      return source;
+    },
+  } satisfies Plugin;
+}
+
+function assetFileNamesToFileName(
+  pattern: string,
+  file: string,
+  contentHash: string,
+): string {
+  const basename = path.basename(file);
+
+  const extname = path.extname(basename);
+  const ext = extname.substring(1);
+  const name = basename.slice(0, -extname.length);
+  const hash = contentHash;
+
+  return pattern.replace(/\[\w+\]/g, (placeholder) => {
+    switch (placeholder) {
+      case '[ext]':
+        return ext;
+
+      case '[extname]':
+        return extname;
+
+      case '[hash]':
+        return hash;
+
+      case '[name]':
+        return name;
+    }
+    throw new Error(
+      `invalid placeholder ${placeholder} in assetFileNames "${pattern}"`,
+    );
+  });
+}
+
+function getHash(text: Buffer | string): string {
+  return createHash('sha256').update(text).digest('hex').substring(0, 8);
+}
+
+function cleanModuleIdentifier(url: string) {
+  return url.replace(HASH_PATTERN, '').replace(QUERY_PATTERN, '');
+}

package/source/features/css.ts

@@ -0,0 +1,91 @@
+import type {Plugin} from 'rollup';
+
+export interface Options {
+  minify?: boolean;
+  emit?: boolean;
+}
+
+const CSS_REGEX = /\.css$/;
+const CSS_MODULE_REGEX = /\.module\.css$/;
+
+export function css({minify = true, emit = true}: Options) {
+  const styles = new Map<string, string>();
+
+  return {
+    name: '@quilted/css',
+    async transform(code, id) {
+      if (!CSS_REGEX.test(id)) return;
+
+      const {transform} = await import('lightningcss');
+
+      const transformed = transform({
+        filename: id,
+        code: new TextEncoder().encode(code),
+        cssModules: CSS_MODULE_REGEX.test(id),
+        minify: emit && minify,
+      });
+
+      styles.set(id, new TextDecoder().decode(transformed.code));
+
+      const exports = transformed.exports
+        ? Object.fromEntries(
+            Object.entries(transformed.exports).map(([key, exported]) => [
+              key,
+              exported.name,
+            ]),
+          )
+        : undefined;
+
+      return {
+        code: exports
+          ? `export default JSON.parse(${JSON.stringify(
+              JSON.stringify(exports),
+            )})`
+          : `export default undefined;`,
+        map: {mappings: ''},
+        moduleSideEffects: 'no-treeshake',
+      };
+    },
+    async renderChunk(_, chunk) {
+      if (!emit) return null;
+
+      let chunkCss = '';
+
+      for (const id of Object.keys(chunk.modules)) {
+        if (CSS_REGEX.test(id) && styles.has(id)) {
+          chunkCss += styles.get(id);
+        }
+      }
+
+      if (chunkCss.length === 0) return null;
+
+      const code = chunkCss;
+
+      // if (minify) {
+      //   const {default: CleanCSS} = await import('clean-css');
+
+      //   const cleaner = new CleanCSS({
+      //     rebase: false,
+      //   });
+
+      //   const minified = cleaner.minify(chunkCss);
+
+      //   if (minified.errors.length > 0) {
+      //     throw minified.errors[0];
+      //   }
+
+      //   code = minified.styles;
+      // }
+
+      const fileHandle = this.emitFile({
+        type: 'asset',
+        name: `${chunk.fileName.split('.')[0]}.css`,
+        source: code,
+      });
+
+      chunk.imports.push(this.getFileName(fileHandle));
+
+      return null;
+    },
+  } satisfies Plugin;
+}

package/source/{env.ts → features/env.ts}

@@ -3,10 +3,10 @@ import * as fs from 'fs';
 
 import type {PluginContext} from 'rollup';
 
-import {MAGIC_MODULE_ENV} from './constants.ts';
-import {multiline} from './shared/strings.ts';
-import {smartReplace} from './shared/rollup.ts';
-import {createMagicModulePlugin} from './shared/magic-module.ts';
+import {MAGIC_MODULE_ENV} from '../constants.ts';
+import {multiline} from '../shared/strings.ts';
+import {smartReplace} from '../shared/rollup.ts';
+import {createMagicModulePlugin} from '../shared/magic-module.ts';
 
 const EMPTY_PROCESS_ENV_OBJECT = {
   'globalThis.process.env.': `({}).`,

package/source/{request-router.ts → features/request-router.ts}

@@ -1,7 +1,7 @@
-import {MAGIC_MODULE_ENTRY, MAGIC_MODULE_REQUEST_ROUTER} from './constants.ts';
+import {MAGIC_MODULE_ENTRY, MAGIC_MODULE_REQUEST_ROUTER} from '../constants.ts';
 
-import {createMagicModulePlugin} from './shared/magic-module.ts';
-import {multiline} from './shared/strings.ts';
+import {createMagicModulePlugin} from '../shared/magic-module.ts';
+import {multiline} from '../shared/strings.ts';
 
 export function magicModuleRequestRouterEntry({
   host,

package/source/{shared → features}/source-code.ts

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