@quilted/rollup 0.2.3 → 0.2.4

package/source/app.ts

@@ -3,7 +3,12 @@ import * as fs from 'fs/promises';
 import {glob} from 'glob';
 import {createRequire} from 'module';
 
-import type {Plugin, RollupOptions, GetManualChunk} from 'rollup';
+import type {
+  Plugin,
+  RollupOptions,
+  InputPluginOption,
+  GetManualChunk,
+} from 'rollup';
 import type {AssetsBuildManifest} from '@quilted/assets';
 
 import {
@@ -18,6 +23,7 @@ import {multiline} from './shared/strings.ts';
 import {
   getNodePlugins,
   removeBuildFiles,
+  normalizeRollupInput,
   type RollupNodePluginOptions,
 } from './shared/rollup.ts';
 import {createMagicModulePlugin} from './shared/magic-module.ts';
@@ -218,9 +224,16 @@ export interface AppServerOutputOptions
   format?: 'esmodules' | 'esm' | 'es' | 'commonjs' | 'cjs';
 }
 
+export {
+  MAGIC_MODULE_ENTRY,
+  MAGIC_MODULE_APP_COMPONENT,
+  MAGIC_MODULE_BROWSER_ASSETS,
+  MAGIC_MODULE_REQUEST_ROUTER,
+};
+
 const require = createRequire(import.meta.url);
 
-export async function quiltApp({
+export async function quiltAppOptions({
   root: rootPath = process.cwd(),
   app,
   env,
@@ -239,7 +252,7 @@ export async function quiltApp({
 
   browserGroupEntries.forEach(([name, browsers], index) => {
     optionPromises.push(
-      quiltAppBrowser({
+      quiltAppBrowserOptions({
         root,
         app,
         graphql,
@@ -262,12 +275,15 @@ export async function quiltApp({
   });
 
   optionPromises.push(
-    quiltAppServer({
+    quiltAppServerOptions({
       root,
       app,
       graphql,
       ...serverOptions,
-      env: {...resolveEnvOption(env), ...resolveEnvOption(serverOptions?.env)},
+      env: {
+        ...resolveEnvOption(env),
+        ...resolveEnvOption(serverOptions?.env),
+      },
       assets: {...assets, ...serverOptions?.assets},
     }),
   );
@@ -275,6 +291,37 @@ export async function quiltApp({
   return Promise.all(optionPromises);
 }
 
+export async function quiltAppBrowserOptions(options: AppBrowserOptions = {}) {
+  const {root: rootPath = process.cwd(), assets} = options;
+  const root = resolveRoot(rootPath);
+
+  const [plugins, browserGroup] = await Promise.all([
+    quiltAppBrowser(options),
+    getBrowserGroupTargetDetails(assets?.targets, {
+      root,
+    }),
+  ]);
+
+  const targetFilenamePart = browserGroup.name ? `.${browserGroup.name}` : '';
+  const [isESM, generatedCode] = await Promise.all([
+    targetsSupportModules(browserGroup.browsers),
+    rollupGenerateOptionsForBrowsers(browserGroup.browsers),
+  ]);
+
+  return {
+    plugins,
+    output: {
+      format: isESM ? 'esm' : 'systemjs',
+      dir: path.resolve(root, `build/assets`),
+      entryFileNames: `[name]${targetFilenamePart}.[hash].js`,
+      assetFileNames: `[name]${targetFilenamePart}.[hash].[ext]`,
+      chunkFileNames: `[name]${targetFilenamePart}.[hash].js`,
+      manualChunks: createManualChunksSorter(),
+      generatedCode,
+    },
+  } satisfies RollupOptions;
+}
+
 export async function quiltAppBrowser({
   root: rootPath = process.cwd(),
   app,
@@ -299,7 +346,8 @@ export async function quiltAppBrowser({
     {visualizer},
     {magicModuleEnv, replaceProcessEnv},
     {sourceCode},
-    {createTSConfigAliasPlugin},
+    {tsconfigAliases},
+    {react},
     {css},
     {assetManifest, rawAssets, staticAssets},
     {asyncModules},
@@ -313,6 +361,7 @@ export async function quiltAppBrowser({
     import('./features/env.ts'),
     import('./features/source-code.ts'),
     import('./features/typescript.ts'),
+    import('./features/react.ts'),
     import('./features/css.ts'),
     import('./features/assets.ts'),
     import('./features/async.ts'),
@@ -323,7 +372,8 @@ export async function quiltAppBrowser({
     loadPackageJSON(root),
   ]);
 
-  const plugins: Plugin[] = [
+  const plugins: InputPluginOption[] = [
+    quiltAppBrowserInput({root, entry}),
     ...nodePlugins,
     systemJS({minify}),
     replaceProcessEnv({mode}),
@@ -345,11 +395,12 @@ export async function quiltAppBrowser({
         },
       },
     }),
+    react(),
+    css({minify, emit: true}),
     esnext({
       mode,
       targets: browserGroup.browsers,
     }),
-    css({minify, emit: true}),
     rawAssets(),
     staticAssets({
       baseURL,
@@ -376,6 +427,7 @@ export async function quiltAppBrowser({
         chunkFileNames: `[name]${targetFilenamePart}.[hash].js`,
       },
     }),
+    tsconfigAliases({root}),
   ];
 
   if (assets?.clean ?? true) {
@@ -386,12 +438,6 @@ export async function quiltAppBrowser({
     );
   }
 
-  const tsconfigAliases = await createTSConfigAliasPlugin();
-
-  if (tsconfigAliases) {
-    plugins.push(tsconfigAliases);
-  }
-
   const appEntry = await resolveAppEntry(app, {root, packageJSON});
 
   if (appEntry) {
@@ -445,44 +491,63 @@ export async function quiltAppBrowser({
     }),
   );
 
-  const finalEntry = entry
-    ? path.resolve(root, entry)
-    : (await glob('{browser,client,web}.{ts,tsx,mjs,js,jsx}', {
-        cwd: root,
-        nodir: true,
-        absolute: true,
-      }).then((files) => files[0])) ?? MAGIC_MODULE_ENTRY;
+  return plugins;
+}
 
-  const isESM = await targetsSupportModules(browserGroup.browsers);
+export function quiltAppBrowserInput({
+  root: rootPath = process.cwd(),
+  entry,
+}: Pick<AppBrowserOptions, 'root' | 'entry'> = {}) {
+  const root = resolveRoot(rootPath);
 
   return {
-    // If we are using the "magic entry", give it an explicit name of `browser`.
-    // Otherwise, Rollup will use the file name as the output name.
-    input:
-      finalEntry === MAGIC_MODULE_ENTRY ? {browser: finalEntry} : finalEntry,
-    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);
+    name: '@quilted/app-browser/input',
+    async options(options) {
+      const finalEntry =
+        normalizeRollupInput(options.input) ??
+        (entry
+          ? path.resolve(root, entry)
+          : await glob('{browser,client,web}.{ts,tsx,mjs,js,jsx}', {
+              cwd: root,
+              nodir: true,
+              absolute: true,
+            }).then((files) => files[0])) ??
+        MAGIC_MODULE_ENTRY;
+
+      return {
+        ...options,
+        // If we are using the "magic entry", give it an explicit name of `browser`.
+        // Otherwise, Rollup will use the file name as the output name.
+        input:
+          finalEntry === MAGIC_MODULE_ENTRY
+            ? {browser: finalEntry}
+            : finalEntry,
+      };
     },
+  } satisfies Plugin;
+}
+
+export async function quiltAppServerOptions(options: AppServerOptions = {}) {
+  const {root: rootPath = process.cwd(), output} = options;
+
+  const root = resolveRoot(rootPath);
+  const hash = output?.hash ?? 'async-only';
+  const outputFormat = output?.format ?? 'esmodules';
+
+  const plugins = await quiltAppServer(options);
+
+  return {
+    plugins,
     output: {
-      format: isESM ? 'esm' : 'systemjs',
-      dir: path.resolve(root, `build/assets`),
-      entryFileNames: `[name]${targetFilenamePart}.[hash].js`,
-      assetFileNames: `[name]${targetFilenamePart}.[hash].[ext]`,
-      chunkFileNames: `[name]${targetFilenamePart}.[hash].js`,
-      manualChunks: createManualChunksSorter(),
-      generatedCode: await rollupGenerateOptionsForBrowsers(
-        browserGroup.browsers,
-      ),
+      format:
+        outputFormat === 'commonjs' || outputFormat === 'cjs' ? 'cjs' : 'esm',
+      dir: path.resolve(root, `build/server`),
+      entryFileNames: `[name]${hash === true ? `.[hash]` : ''}.js`,
+      chunkFileNames: `[name]${
+        hash === true || hash === 'async-only' ? `.[hash]` : ''
+      }.js`,
+      assetFileNames: `[name]${hash === true ? `.[hash]` : ''}.[ext]`,
+      generatedCode: 'es2015',
     },
   } satisfies RollupOptions;
 }
@@ -505,14 +570,13 @@ export async function quiltAppServer({
 
   const bundle = output?.bundle;
   const minify = output?.minify ?? false;
-  const hash = output?.hash ?? 'async-only';
-  const outputFormat = output?.format ?? 'esmodules';
 
   const [
     {visualizer},
     {magicModuleEnv, replaceProcessEnv},
     {sourceCode},
-    {createTSConfigAliasPlugin},
+    {react},
+    {tsconfigAliases},
     {css},
     {rawAssets, staticAssets},
     {asyncModules},
@@ -523,6 +587,7 @@ export async function quiltAppServer({
     import('rollup-plugin-visualizer'),
     import('./features/env.ts'),
     import('./features/source-code.ts'),
+    import('./features/react.ts'),
     import('./features/typescript.ts'),
     import('./features/css.ts'),
     import('./features/assets.ts'),
@@ -532,7 +597,8 @@ export async function quiltAppServer({
     loadPackageJSON(root),
   ]);
 
-  const plugins: Plugin[] = [
+  const plugins: InputPluginOption[] = [
+    quiltAppServerInput({root, entry, format}),
     ...nodePlugins,
     replaceProcessEnv({mode}),
     magicModuleEnv({...resolveEnvOption(env), mode}),
@@ -552,6 +618,7 @@ export async function quiltAppServer({
         },
       },
     }),
+    react(),
     esnext({
       mode,
       targets: ['current node'],
@@ -573,14 +640,9 @@ export async function quiltAppServer({
       moduleID: ({imported}) => path.relative(root, imported),
     }),
     removeBuildFiles(['build/server'], {root}),
+    tsconfigAliases({root}),
   ];
 
-  const tsconfigAliases = await createTSConfigAliasPlugin();
-
-  if (tsconfigAliases) {
-    plugins.push(tsconfigAliases);
-  }
-
   const appEntry = await resolveAppEntry(app, {root, packageJSON});
 
   if (appEntry) {
@@ -595,11 +657,6 @@ export async function quiltAppServer({
         absolute: true,
       }).then((files) => files[0]);
 
-  const finalEntry =
-    format === 'request-router'
-      ? MAGIC_MODULE_ENTRY
-      : serverEntry ?? MAGIC_MODULE_ENTRY;
-
   plugins.push(
     magicModuleAppServerEntry({
       assets: {baseURL},
@@ -630,36 +687,45 @@ export async function quiltAppServer({
     }),
   );
 
+  return plugins;
+}
+
+export function quiltAppServerInput({
+  root: rootPath = process.cwd(),
+  entry,
+  format = 'request-router',
+}: Pick<AppServerOptions, 'root' | 'entry' | 'format'> = {}) {
+  const root = resolveRoot(rootPath);
+
   return {
-    // If we are using the "magic entry", give it an explicit name of `server`.
-    // Otherwise, Rollup will use the file name as the output name.
-    input:
-      finalEntry === MAGIC_MODULE_ENTRY ? {server: finalEntry} : finalEntry,
-    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;
+    name: '@quilted/app-server/input',
+    async options(options) {
+      let finalEntry = normalizeRollupInput(options.input);
+
+      if (!finalEntry) {
+        const serverEntry = entry
+          ? path.resolve(root, entry)
+          : await glob('{server,service,backend}.{ts,tsx,mjs,js,jsx}', {
+              cwd: root,
+              nodir: true,
+              absolute: true,
+            }).then((files) => files[0]);
+
+        finalEntry =
+          format === 'request-router'
+            ? MAGIC_MODULE_ENTRY
+            : serverEntry ?? MAGIC_MODULE_ENTRY;
       }
 
-      defaultWarn(warning);
-    },
-    output: {
-      format:
-        outputFormat === 'commonjs' || outputFormat === 'cjs' ? 'cjs' : 'esm',
-      dir: path.resolve(root, `build/server`),
-      entryFileNames: `[name]${hash === true ? `.[hash]` : ''}.js`,
-      chunkFileNames: `[name]${
-        hash === true || hash === 'async-only' ? `.[hash]` : ''
-      }.js`,
-      assetFileNames: `[name]${hash === true ? `.[hash]` : ''}.[ext]`,
-      generatedCode: 'es2015',
+      return {
+        ...options,
+        // If we are using the "magic entry", give it an explicit name of `server`.
+        // Otherwise, Rollup will use the file name as the output name.
+        input:
+          finalEntry === MAGIC_MODULE_ENTRY ? {server: finalEntry} : finalEntry,
+      };
     },
-  } satisfies RollupOptions;
+  } satisfies Plugin;
 }
 
 export function magicModuleAppComponent({entry}: {entry: string}) {

package/source/features/react.ts

@@ -0,0 +1,26 @@
+import type {Plugin} from 'rollup';
+
+export function react() {
+  return {
+    name: '@quilted/react',
+    options(options) {
+      return {
+        ...options,
+        onLog(level, log, handler) {
+          if (
+            log.code === 'MODULE_LEVEL_DIRECTIVE' &&
+            /['"]use client['"]/.test(log.message)
+          ) {
+            return;
+          }
+
+          if (options.onLog) {
+            options.onLog(level, log, handler);
+          } else {
+            handler(level, log);
+          }
+        },
+      };
+    },
+  } satisfies Plugin;
+}

package/source/features/typescript.ts

@@ -1,7 +1,7 @@
 import * as path from 'path';
 import * as fs from 'fs';
 
-export async function createTSConfigAliasPlugin({
+export async function tsconfigAliases({
   root = process.cwd(),
 }: {root?: string} = {}) {
   const [{default: alias}, tsconfig] = await Promise.all([

package/source/index.ts

@@ -1,7 +1,9 @@
 export {
-  quiltApp,
+  quiltAppOptions,
   quiltAppBrowser,
+  quiltAppBrowserOptions,
   quiltAppServer,
+  quiltAppServerOptions,
   type AppOptions,
   type AppBaseOptions,
   type AppBrowserOptions,

package/source/module.ts

@@ -1,5 +1,5 @@
 import * as path from 'path';
-import {Plugin, type RollupOptions} from 'rollup';
+import {type InputPluginOption, type RollupOptions} from 'rollup';
 import {glob} from 'glob';
 
 import {resolveRoot} from './shared/path.ts';
@@ -86,6 +86,8 @@ export async function quiltModule({
     {visualizer},
     {magicModuleEnv, replaceProcessEnv},
     {sourceCode},
+    {tsconfigAliases},
+    {react},
     {esnext},
     nodePlugins,
     packageJSON,
@@ -93,6 +95,8 @@ export async function quiltModule({
     import('rollup-plugin-visualizer'),
     import('./features/env.ts'),
     import('./features/source-code.ts'),
+    import('./features/typescript.ts'),
+    import('./features/react.ts'),
     import('./features/esnext.ts'),
     getNodePlugins({bundle}),
     loadPackageJSON(root),
@@ -102,12 +106,14 @@ export async function quiltModule({
     ? path.resolve(root, entry)
     : await sourceForModule(root, packageJSON);
 
-  const plugins: Plugin[] = [
+  const plugins: InputPluginOption[] = [
     ...nodePlugins,
     replaceProcessEnv({mode}),
     magicModuleEnv({...resolveEnvOption(env), mode}),
     sourceCode({mode, targets: browserGroup.browsers}),
+    tsconfigAliases({root}),
     esnext({mode, targets: browserGroup.browsers}),
+    react(),
     removeBuildFiles(['build/assets', 'build/reports'], {root}),
   ];
 
@@ -136,18 +142,6 @@ export async function quiltModule({
   return {
     input: finalEntry,
     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: 'esm',
       dir: outputDirectory,

package/source/server.ts

@@ -1,5 +1,5 @@
 import * as path from 'path';
-import {Plugin, type RollupOptions} from 'rollup';
+import {type InputPluginOption, type RollupOptions} from 'rollup';
 import {glob} from 'glob';
 
 import {
@@ -107,6 +107,8 @@ export interface ServerOutputOptions
   format?: 'esmodules' | 'esm' | 'es' | 'commonjs' | 'cjs';
 }
 
+export {MAGIC_MODULE_ENTRY, MAGIC_MODULE_REQUEST_ROUTER};
+
 export async function quiltServer({
   root: rootPath = process.cwd(),
   entry,
@@ -131,6 +133,8 @@ export async function quiltServer({
     {visualizer},
     {magicModuleEnv, replaceProcessEnv},
     {sourceCode},
+    {tsconfigAliases},
+    {react},
     {esnext},
     nodePlugins,
     packageJSON,
@@ -138,6 +142,8 @@ export async function quiltServer({
     import('rollup-plugin-visualizer'),
     import('./features/env.ts'),
     import('./features/source-code.ts'),
+    import('./features/typescript.ts'),
+    import('./features/react.ts'),
     import('./features/esnext.ts'),
     getNodePlugins({bundle}),
     loadPackageJSON(root),
@@ -152,11 +158,13 @@ export async function quiltServer({
       ? MAGIC_MODULE_ENTRY
       : serverEntry ?? MAGIC_MODULE_ENTRY;
 
-  const plugins: Plugin[] = [
+  const plugins: InputPluginOption[] = [
     ...nodePlugins,
     replaceProcessEnv({mode}),
     magicModuleEnv({...resolveEnvOption(env), mode}),
     sourceCode({mode, targets: ['current node']}),
+    tsconfigAliases({root}),
+    react(),
     esnext({mode, targets: ['current node']}),
     removeBuildFiles(['build/server', 'build/reports'], {root}),
   ];

package/source/shared/browserslist.ts

@@ -30,7 +30,9 @@ export async function getBrowserGroupTargetDetails(
       return config[targetName] ?? ['defaults'];
     })());
 
-  return {name: targets.name, browsers: browserslist(targetBrowsers)};
+  const browsers = browserslist(targetBrowsers);
+
+  return {name: targets.name, browsers};
 }
 
 export interface BrowserGroups {

package/source/shared/rollup.ts

@@ -1,7 +1,7 @@
 import * as fs from 'fs/promises';
 import {glob} from 'glob';
 
-import type {Plugin, InputOptions} from 'rollup';
+import type {Plugin, InputOption, InputOptions} from 'rollup';
 import replace, {type RollupReplaceOptions} from '@rollup/plugin-replace';
 
 export function smartReplace(
@@ -39,6 +39,10 @@ export function removeBuildFiles(
   } satisfies Plugin;
 }
 
+export function normalizeRollupInput(input?: InputOption) {
+  return Array.isArray(input) && input.length === 0 ? undefined : input;
+}
+
 export interface RollupNodeBundle {
   readonly builtins?: boolean;
   readonly dependencies?: boolean;