@quilted/rollup 0.2.3 → 0.2.5

package/source/app.ts

@@ -1,9 +1,13 @@
 import * as path from 'path';
 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 +22,7 @@ import {multiline} from './shared/strings.ts';
 import {
   getNodePlugins,
   removeBuildFiles,
+  normalizeRollupInput,
   type RollupNodePluginOptions,
 } from './shared/rollup.ts';
 import {createMagicModulePlugin} from './shared/magic-module.ts';
@@ -29,8 +34,7 @@ import {
   rollupGenerateOptionsForBrowsers,
   type BrowserGroupTargetSelection,
 } from './shared/browserslist.ts';
-import {loadPackageJSON, type PackageJSON} from './shared/package-json.ts';
-import {resolveRoot} from './shared/path.ts';
+import {Project} from './shared/project.ts';
 
 export interface AppBaseOptions {
   /**
@@ -218,10 +222,17 @@ 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({
-  root: rootPath = process.cwd(),
+export async function quiltAppOptions({
+  root = process.cwd(),
   app,
   env,
   graphql,
@@ -229,9 +240,9 @@ export async function quiltApp({
   browser: browserOptions,
   server: serverOptions,
 }: AppOptions = {}) {
-  const root = resolveRoot(rootPath);
+  const project = Project.load(root);
 
-  const browserGroups = await getBrowserGroups({root});
+  const browserGroups = await getBrowserGroups({root: project.root});
   const browserGroupEntries = Object.entries(browserGroups);
   const hasMultipleBrowserGroups = browserGroupEntries.length > 1;
 
@@ -239,8 +250,8 @@ export async function quiltApp({
 
   browserGroupEntries.forEach(([name, browsers], index) => {
     optionPromises.push(
-      quiltAppBrowser({
-        root,
+      quiltAppBrowserOptions({
+        root: project.root,
         app,
         graphql,
         ...browserOptions,
@@ -262,12 +273,15 @@ export async function quiltApp({
   });
 
   optionPromises.push(
-    quiltAppServer({
-      root,
+    quiltAppServerOptions({
+      root: project.root,
       app,
       graphql,
       ...serverOptions,
-      env: {...resolveEnvOption(env), ...resolveEnvOption(serverOptions?.env)},
+      env: {
+        ...resolveEnvOption(env),
+        ...resolveEnvOption(serverOptions?.env),
+      },
       assets: {...assets, ...serverOptions?.assets},
     }),
   );
@@ -275,8 +289,39 @@ export async function quiltApp({
   return Promise.all(optionPromises);
 }
 
+export async function quiltAppBrowserOptions(options: AppBrowserOptions = {}) {
+  const {root = process.cwd(), assets} = options;
+  const project = Project.load(root);
+
+  const [plugins, browserGroup] = await Promise.all([
+    quiltAppBrowser(options),
+    getBrowserGroupTargetDetails(assets?.targets, {
+      root: project.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: project.resolve(`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(),
+  root = process.cwd(),
   app,
   entry,
   env,
@@ -284,14 +329,14 @@ export async function quiltAppBrowser({
   module,
   graphql = true,
 }: AppBrowserOptions = {}) {
-  const root = resolveRoot(rootPath);
+  const project = Project.load(root);
   const mode = (typeof env === 'object' ? env?.mode : env) ?? 'production';
   const minify = assets?.minify ?? mode === 'production';
   const baseURL = assets?.baseURL ?? '/assets/';
   const assetsInline = assets?.inline ?? true;
 
   const browserGroup = await getBrowserGroupTargetDetails(assets?.targets, {
-    root,
+    root: project.root,
   });
   const targetFilenamePart = browserGroup.name ? `.${browserGroup.name}` : '';
 
@@ -299,7 +344,9 @@ export async function quiltAppBrowser({
     {visualizer},
     {magicModuleEnv, replaceProcessEnv},
     {sourceCode},
-    {createTSConfigAliasPlugin},
+    {tsconfigAliases},
+    {monorepoPackageAliases},
+    {react},
     {css},
     {assetManifest, rawAssets, staticAssets},
     {asyncModules},
@@ -307,12 +354,13 @@ export async function quiltAppBrowser({
     {workers},
     {esnext},
     nodePlugins,
-    packageJSON,
   ] = await Promise.all([
     import('rollup-plugin-visualizer'),
     import('./features/env.ts'),
     import('./features/source-code.ts'),
     import('./features/typescript.ts'),
+    import('./features/node.ts'),
+    import('./features/react.ts'),
     import('./features/css.ts'),
     import('./features/assets.ts'),
     import('./features/async.ts'),
@@ -320,10 +368,10 @@ export async function quiltAppBrowser({
     import('./features/workers.ts'),
     import('./features/esnext.ts'),
     getNodePlugins({bundle: true}),
-    loadPackageJSON(root),
   ]);
 
-  const plugins: Plugin[] = [
+  const plugins: InputPluginOption[] = [
+    quiltAppBrowserInput({root: project.root, entry}),
     ...nodePlugins,
     systemJS({minify}),
     replaceProcessEnv({mode}),
@@ -345,11 +393,12 @@ export async function quiltAppBrowser({
         },
       },
     }),
+    react(),
+    css({minify, emit: true}),
     esnext({
       mode,
       targets: browserGroup.browsers,
     }),
-    css({minify, emit: true}),
     rawAssets(),
     staticAssets({
       baseURL,
@@ -363,36 +412,32 @@ export async function quiltAppBrowser({
     asyncModules({
       baseURL,
       preload: true,
-      moduleID: ({imported}) => path.relative(root, imported),
+      moduleID: ({imported}) => path.relative(project.root, imported),
     }),
     workers({
       baseURL,
       outputOptions: {
         format: 'iife',
         inlineDynamicImports: true,
-        dir: path.resolve(root, `build/assets`),
+        dir: project.resolve(`build/assets`),
         entryFileNames: `[name]${targetFilenamePart}.[hash].js`,
         assetFileNames: `[name]${targetFilenamePart}.[hash].[ext]`,
         chunkFileNames: `[name]${targetFilenamePart}.[hash].js`,
       },
     }),
+    tsconfigAliases({root: project.root}),
+    monorepoPackageAliases({root: project.root}),
   ];
 
   if (assets?.clean ?? true) {
     plugins.push(
       removeBuildFiles(['build/assets', 'build/manifests', 'build/reports'], {
-        root,
+        root: project.root,
       }),
     );
   }
 
-  const tsconfigAliases = await createTSConfigAliasPlugin();
-
-  if (tsconfigAliases) {
-    plugins.push(tsconfigAliases);
-  }
-
-  const appEntry = await resolveAppEntry(app, {root, packageJSON});
+  const appEntry = await resolveAppEntry(app, project);
 
   if (appEntry) {
     plugins.push(magicModuleAppComponent({entry: appEntry}));
@@ -405,8 +450,7 @@ export async function quiltAppBrowser({
 
     plugins.push(
       graphql({
-        manifest: path.resolve(
-          root,
+        manifest: project.resolve(
           `build/manifests/graphql${targetFilenamePart}.json`,
         ),
       }),
@@ -428,67 +472,83 @@ export async function quiltAppBrowser({
     assetManifest({
       baseURL,
       cacheKey,
-      file: path.resolve(
-        root,
-        `build/manifests/assets${targetFilenamePart}.json`,
-      ),
+      file: project.resolve(`build/manifests/assets${targetFilenamePart}.json`),
       priority: assets?.priority,
     }),
     visualizer({
       template: 'treemap',
       open: false,
       brotliSize: true,
-      filename: path.resolve(
-        root,
+      filename: project.resolve(
         `build/reports/bundle-visualizer${targetFilenamePart}.html`,
       ),
     }),
   );
 
-  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 = process.cwd(),
+  entry,
+}: Pick<AppBrowserOptions, 'root' | 'entry'> = {}) {
+  const project = Project.load(root);
 
   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
+          ? project.resolve(entry)
+          : await project
+              .glob('{browser,client,web}.{ts,tsx,mjs,js,jsx}', {
+                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 = process.cwd(), output} = options;
+
+  const project = Project.load(root);
+  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: project.resolve(`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;
 }
 
 export async function quiltAppServer({
-  root: rootPath = process.cwd(),
+  root = process.cwd(),
   app,
   env,
   entry,
@@ -497,7 +557,7 @@ export async function quiltAppServer({
   assets,
   output,
 }: AppServerOptions = {}) {
-  const root = resolveRoot(rootPath);
+  const project = Project.load(root);
   const mode = (typeof env === 'object' ? env?.mode : env) ?? 'production';
 
   const baseURL = assets?.baseURL ?? '/assets/';
@@ -505,34 +565,35 @@ 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},
+    {monorepoPackageAliases},
     {css},
     {rawAssets, staticAssets},
     {asyncModules},
     {esnext},
     nodePlugins,
-    packageJSON,
   ] = await Promise.all([
     import('rollup-plugin-visualizer'),
     import('./features/env.ts'),
     import('./features/source-code.ts'),
+    import('./features/react.ts'),
     import('./features/typescript.ts'),
+    import('./features/node.ts'),
     import('./features/css.ts'),
     import('./features/assets.ts'),
     import('./features/async.ts'),
     import('./features/esnext.ts'),
     getNodePlugins({bundle}),
-    loadPackageJSON(root),
   ]);
 
-  const plugins: Plugin[] = [
+  const plugins: InputPluginOption[] = [
+    quiltAppServerInput({root: project.root, entry, format}),
     ...nodePlugins,
     replaceProcessEnv({mode}),
     magicModuleEnv({...resolveEnvOption(env), mode}),
@@ -552,6 +613,7 @@ export async function quiltAppServer({
         },
       },
     }),
+    react(),
     esnext({
       mode,
       targets: ['current node'],
@@ -570,35 +632,27 @@ export async function quiltAppServer({
     asyncModules({
       baseURL,
       preload: false,
-      moduleID: ({imported}) => path.relative(root, imported),
+      moduleID: ({imported}) => path.relative(project.root, imported),
     }),
-    removeBuildFiles(['build/server'], {root}),
+    removeBuildFiles(['build/server'], {root: project.root}),
+    tsconfigAliases({root: project.root}),
+    monorepoPackageAliases({root: project.root}),
   ];
 
-  const tsconfigAliases = await createTSConfigAliasPlugin();
-
-  if (tsconfigAliases) {
-    plugins.push(tsconfigAliases);
-  }
-
-  const appEntry = await resolveAppEntry(app, {root, packageJSON});
+  const appEntry = await resolveAppEntry(app, project);
 
   if (appEntry) {
     plugins.push(magicModuleAppComponent({entry: appEntry}));
   }
 
   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]);
-
-  const finalEntry =
-    format === 'request-router'
-      ? MAGIC_MODULE_ENTRY
-      : serverEntry ?? MAGIC_MODULE_ENTRY;
+    ? project.resolve(entry)
+    : await project
+        .glob('{server,service,backend}.{ts,tsx,mjs,js,jsx}', {
+          nodir: true,
+          absolute: true,
+        })
+        .then((files) => files[0]);
 
   plugins.push(
     magicModuleAppServerEntry({
@@ -623,43 +677,50 @@ export async function quiltAppServer({
       template: 'treemap',
       open: false,
       brotliSize: false,
-      filename: path.resolve(
-        root,
-        `build/reports/bundle-visualizer.server.html`,
-      ),
+      filename: project.resolve(`build/reports/bundle-visualizer.server.html`),
     }),
   );
 
+  return plugins;
+}
+
+export function quiltAppServerInput({
+  root = process.cwd(),
+  entry,
+  format = 'request-router',
+}: Pick<AppServerOptions, 'root' | 'entry' | 'format'> = {}) {
+  const project = Project.load(root);
+
   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
+          ? project.resolve(entry)
+          : await project
+              .glob('{server,service,backend}.{ts,tsx,mjs,js,jsx}', {
+                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}) {
@@ -981,26 +1042,24 @@ function createManualChunksSorter(): GetManualChunk {
   };
 }
 
-async function resolveAppEntry(
-  entry: string | undefined,
-  {root, packageJSON}: {root: string; packageJSON: PackageJSON},
-) {
+async function resolveAppEntry(entry: string | undefined, project: Project) {
   if (entry) {
-    return path.resolve(root, entry);
+    return project.resolve(entry);
   }
 
-  if (typeof packageJSON.main === 'string') {
-    return path.resolve(root, packageJSON.main);
+  const {packageJSON} = project;
+
+  if (typeof packageJSON.raw.main === 'string') {
+    return project.resolve(packageJSON.raw.main);
   }
 
-  const rootEntry = (packageJSON.exports as any)?.['.'];
+  const rootEntry = (packageJSON.raw.exports as any)?.['.'];
 
   if (typeof rootEntry === 'string') {
-    return path.resolve(root, rootEntry);
+    return project.resolve(rootEntry);
   }
 
-  const globbed = await glob('{App,app,index}.{ts,tsx,mjs,js,jsx}', {
-    cwd: root,
+  const globbed = await project.glob('{App,app,index}.{ts,tsx,mjs,js,jsx}', {
     nodir: true,
     absolute: true,
   });

package/source/features/node.ts

@@ -0,0 +1,74 @@
+import {realpathSync} from 'fs';
+
+import {Project, sourceEntriesForProject} from '../shared/project.ts';
+
+export async function monorepoPackageAliases({
+  root = process.cwd(),
+}: {root?: string} = {}) {
+  const project = Project.load(root);
+  const seenDependencies = new Set<string>();
+  const seenProjects = new Set<Project>();
+
+  function processProject(project: Project) {
+    const {dependencies, devDependencies} = project.packageJSON.raw;
+
+    for (const pkg of Object.keys({...dependencies, ...devDependencies})) {
+      if (seenDependencies.has(pkg)) continue;
+
+      seenDependencies.add(pkg);
+
+      let packageRoot: string | undefined;
+
+      try {
+        packageRoot = realpathSync(project.resolve('node_modules', pkg));
+      } catch {
+        // intentional noop
+      }
+
+      if (
+        packageRoot == null ||
+        packageRoot.includes('node_modules') ||
+        packageRoot === root
+      ) {
+        continue;
+      }
+
+      const packageProject = Project.load(packageRoot);
+      if (seenProjects.has(packageProject)) continue;
+
+      seenProjects.add(packageProject);
+      processProject(packageProject);
+    }
+  }
+
+  processProject(project);
+
+  const [{default: alias}, projectsWithEntries] = await Promise.all([
+    import('@rollup/plugin-alias'),
+    Promise.all(
+      Array.from(seenProjects, async (project) => {
+        const entries = await sourceEntriesForProject(project);
+        return {project, entries};
+      }),
+    ),
+  ]);
+
+  const aliases: import('@rollup/plugin-alias').Alias[] = [];
+
+  for (const {project, entries} of projectsWithEntries) {
+    const {name} = project;
+
+    for (const [entry, source] of Object.entries(entries)) {
+      const entryName = entry === '.' ? name : `${name}/${entry}`;
+
+      aliases.push({
+        find: new RegExp(`^${entryName}$`),
+        replacement: source,
+      });
+    }
+  }
+
+  return alias({
+    entries: aliases,
+  });
+}