@quilted/rollup 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @quilted/rollup
 
+## 0.2.5
+
+### Patch Changes
+
+- [`465883e1`](https://github.com/lemonmade/quilt/commit/465883e12571bee9d6e8c8d517ebf6da384687b2) Thanks [@lemonmade](https://github.com/lemonmade)! - Add support for automatic in-repo source aliases
+
+## 0.2.4
+
+### Patch Changes
+
+- [`533e7d76`](https://github.com/lemonmade/quilt/commit/533e7d766fb1a0d023c3aabf60cadb59cadecd73) Thanks [@lemonmade](https://github.com/lemonmade)! - Improve Vite and Rollup plugins
+
 ## 0.2.3
 
 ### Patch Changes

package/build/esm/app.mjs

@@ -1,19 +1,17 @@
 import * as path from 'node:path';
 import * as fs from 'node:fs/promises';
-import { glob } from 'glob';
 import { createRequire } from 'node:module';
 import { MAGIC_MODULE_ENTRY, MAGIC_MODULE_APP_COMPONENT, MAGIC_MODULE_REQUEST_ROUTER, MAGIC_MODULE_BROWSER_ASSETS } from './constants.mjs';
 import { resolveEnvOption } from './features/env.mjs';
 import { multiline } from './shared/strings.mjs';
-import { getNodePlugins, removeBuildFiles } from './shared/rollup.mjs';
+import { getNodePlugins, removeBuildFiles, normalizeRollupInput } from './shared/rollup.mjs';
 import { createMagicModulePlugin } from './shared/magic-module.mjs';
 import { getBrowserGroups, getBrowserGroupTargetDetails, targetsSupportModules, rollupGenerateOptionsForBrowsers, getBrowserGroupRegularExpressions } from './shared/browserslist.mjs';
-import { loadPackageJSON } from './shared/package-json.mjs';
-import { resolveRoot } from './shared/path.mjs';
+import { Project } from './shared/project.mjs';
 
 const require = createRequire(import.meta.url);
-async function quiltApp({
-  root: rootPath = process.cwd(),
+async function quiltAppOptions({
+  root = process.cwd(),
   app,
   env,
   graphql,
@@ -21,15 +19,15 @@ async function quiltApp({
   browser: browserOptions,
   server: serverOptions
 } = {}) {
-  const root = resolveRoot(rootPath);
-  const browserGroups = await getBrowserGroups({ root });
+  const project = Project.load(root);
+  const browserGroups = await getBrowserGroups({ root: project.root });
   const browserGroupEntries = Object.entries(browserGroups);
   const hasMultipleBrowserGroups = browserGroupEntries.length > 1;
   const optionPromises = [];
   browserGroupEntries.forEach(([name, browsers], index) => {
     optionPromises.push(
-      quiltAppBrowser({
-        root,
+      quiltAppBrowserOptions({
+        root: project.root,
         app,
         graphql,
         ...browserOptions,
@@ -50,19 +48,49 @@ 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 }
     })
   );
   return Promise.all(optionPromises);
 }
+async function quiltAppBrowserOptions(options = {}) {
+  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
+    }
+  };
+}
 async function quiltAppBrowser({
-  root: rootPath = process.cwd(),
+  root = process.cwd(),
   app,
   entry,
   env,
@@ -70,43 +98,46 @@ async function quiltAppBrowser({
   module,
   graphql = true
 } = {}) {
-  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}` : "";
   const [
     { visualizer },
     { magicModuleEnv, replaceProcessEnv },
     { sourceCode },
-    { createTSConfigAliasPlugin },
+    { tsconfigAliases },
+    { monorepoPackageAliases },
+    { react },
     { css },
     { assetManifest, rawAssets, staticAssets },
     { asyncModules },
     { systemJS },
     { workers },
     { esnext },
-    nodePlugins,
-    packageJSON
+    nodePlugins
   ] = await Promise.all([
     import('rollup-plugin-visualizer'),
     import('./features/env.mjs'),
     import('./features/source-code.mjs'),
     import('./features/typescript.mjs'),
+    import('./features/node.mjs'),
+    import('./features/react.mjs'),
     import('./features/css.mjs'),
     import('./features/assets.mjs'),
     import('./features/async.mjs'),
     import('./features/system-js.mjs'),
     import('./features/workers.mjs'),
     import('./features/esnext.mjs'),
-    getNodePlugins({ bundle: true }),
-    loadPackageJSON(root)
+    getNodePlugins({ bundle: true })
   ]);
   const plugins = [
+    quiltAppBrowserInput({ root: project.root, entry }),
     ...nodePlugins,
     systemJS({ minify }),
     replaceProcessEnv({ mode }),
@@ -128,11 +159,12 @@ async function quiltAppBrowser({
         }
       }
     }),
+    react(),
+    css({ minify, emit: true }),
     esnext({
       mode,
       targets: browserGroup.browsers
     }),
-    css({ minify, emit: true }),
     rawAssets(),
     staticAssets({
       baseURL,
@@ -142,32 +174,30 @@ 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 }));
   }
@@ -176,8 +206,7 @@ async function quiltAppBrowser({
     const { graphql: graphql2 } = await import('./features/graphql.mjs');
     plugins.push(
       graphql2({
-        manifest: path.resolve(
-          root,
+        manifest: project.resolve(
           `build/manifests/graphql${targetFilenamePart}.json`
         )
       })
@@ -195,54 +224,61 @@ 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;
-  const isESM = await targetsSupportModules(browserGroup.browsers);
+  return plugins;
+}
+function quiltAppBrowserInput({
+  root = process.cwd(),
+  entry
+} = {}) {
+  const project = Project.load(root);
+  return {
+    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
+      };
+    }
+  };
+}
+async function quiltAppServerOptions(options = {}) {
+  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 {
-    // 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) {
-      if (warning.code === "MODULE_LEVEL_DIRECTIVE" && /['"]use client['"]/.test(warning.message)) {
-        return;
-      }
-      defaultWarn(warning);
-    },
     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"
     }
   };
 }
 async function quiltAppServer({
-  root: rootPath = process.cwd(),
+  root = process.cwd(),
   app,
   env,
   entry,
@@ -251,38 +287,39 @@ async function quiltAppServer({
   assets,
   output
 } = {}) {
-  const root = resolveRoot(rootPath);
+  const project = Project.load(root);
   const mode = (typeof env === "object" ? env?.mode : env) ?? "production";
   const baseURL = assets?.baseURL ?? "/assets/";
   const assetsInline = assets?.inline ?? true;
   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
+    nodePlugins
   ] = await Promise.all([
     import('rollup-plugin-visualizer'),
     import('./features/env.mjs'),
     import('./features/source-code.mjs'),
+    import('./features/react.mjs'),
     import('./features/typescript.mjs'),
+    import('./features/node.mjs'),
     import('./features/css.mjs'),
     import('./features/assets.mjs'),
     import('./features/async.mjs'),
     import('./features/esnext.mjs'),
-    getNodePlugins({ bundle }),
-    loadPackageJSON(root)
+    getNodePlugins({ bundle })
   ]);
   const plugins = [
+    quiltAppServerInput({ root: project.root, entry, format }),
     ...nodePlugins,
     replaceProcessEnv({ mode }),
     magicModuleEnv({ ...resolveEnvOption(env), mode }),
@@ -302,6 +339,7 @@ async function quiltAppServer({
         }
       }
     }),
+    react(),
     esnext({
       mode,
       targets: ["current node"]
@@ -316,24 +354,20 @@ 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,
+  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]);
-  const finalEntry = format === "request-router" ? MAGIC_MODULE_ENTRY : serverEntry ?? MAGIC_MODULE_ENTRY;
   plugins.push(
     magicModuleAppServerEntry({
       assets: { baseURL }
@@ -354,30 +388,34 @@ 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;
+}
+function quiltAppServerInput({
+  root = process.cwd(),
+  entry,
+  format = "request-router"
+} = {}) {
+  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) {
-      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
+      };
     }
   };
 }
@@ -500,8 +538,8 @@ function magicModuleAppAssetManifests() {
     name: "@quilted/magic-module/asset-manifests",
     module: MAGIC_MODULE_BROWSER_ASSETS,
     async source() {
-      const { glob: glob2 } = await import('glob');
-      const manifestFiles = await glob2("assets*.json", {
+      const { glob } = await import('glob');
+      const manifestFiles = await glob("assets*.json", {
         nodir: true,
         absolute: true,
         cwd: path.resolve(`build/manifests`)
@@ -630,23 +668,23 @@ function createManualChunksSorter() {
     return `${bundleBaseName}-${relativeId.split(path.sep)[0]?.split(".")[0]}`;
   };
 }
-async function resolveAppEntry(entry, { root, packageJSON }) {
+async function resolveAppEntry(entry, 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?.["."];
+  const rootEntry = packageJSON.raw.exports?.["."];
   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
   });
   return globbed[0];
 }
 
-export { magicModuleAppAssetManifests, magicModuleAppBrowserEntry, magicModuleAppComponent, magicModuleAppRequestRouter, magicModuleAppServerEntry, quiltApp, quiltAppBrowser, quiltAppServer };
+export { MAGIC_MODULE_APP_COMPONENT, MAGIC_MODULE_BROWSER_ASSETS, MAGIC_MODULE_ENTRY, MAGIC_MODULE_REQUEST_ROUTER, magicModuleAppAssetManifests, magicModuleAppBrowserEntry, magicModuleAppComponent, magicModuleAppRequestRouter, magicModuleAppServerEntry, quiltAppBrowser, quiltAppBrowserInput, quiltAppBrowserOptions, quiltAppOptions, quiltAppServer, quiltAppServerInput, quiltAppServerOptions };

package/build/esm/features/node.mjs

@@ -0,0 +1,57 @@
+import { realpathSync } from 'node:fs';
+import { Project, sourceEntriesForProject } from '../shared/project.mjs';
+
+async function monorepoPackageAliases({
+  root = process.cwd()
+} = {}) {
+  const project = Project.load(root);
+  const seenDependencies = /* @__PURE__ */ new Set();
+  const seenProjects = /* @__PURE__ */ new Set();
+  function processProject(project2) {
+    const { dependencies, devDependencies } = project2.packageJSON.raw;
+    for (const pkg of Object.keys({ ...dependencies, ...devDependencies })) {
+      if (seenDependencies.has(pkg))
+        continue;
+      seenDependencies.add(pkg);
+      let packageRoot;
+      try {
+        packageRoot = realpathSync(project2.resolve("node_modules", pkg));
+      } catch {
+      }
+      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 (project2) => {
+        const entries = await sourceEntriesForProject(project2);
+        return { project: project2, entries };
+      })
+    )
+  ]);
+  const aliases = [];
+  for (const { project: project2, entries } of projectsWithEntries) {
+    const { name } = project2;
+    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
+  });
+}
+
+export { monorepoPackageAliases };

package/build/esm/features/react.mjs

@@ -0,0 +1,22 @@
+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);
+          }
+        }
+      };
+    }
+  };
+}
+
+export { react };

package/build/esm/features/typescript.mjs

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

package/build/esm/index.mjs

@@ -1,4 +1,4 @@
-export { quiltApp, quiltAppBrowser, quiltAppServer } from './app.mjs';
+export { quiltAppBrowser, quiltAppBrowserOptions, quiltAppOptions, quiltAppServer, quiltAppServerOptions } from './app.mjs';
 export { quiltModule } from './module.mjs';
 export { quiltPackage, quiltPackageESModules, quiltPackageESNext } from './package.mjs';
 export { quiltServer } from './server.mjs';