@quilted/rollup 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @quilted/rollup
 
+## 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

@@ -5,14 +5,14 @@ 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';
 
 const require = createRequire(import.meta.url);
-async function quiltApp({
+async function quiltAppOptions({
   root: rootPath = process.cwd(),
   app,
   env,
@@ -28,7 +28,7 @@ async function quiltApp({
   const optionPromises = [];
   browserGroupEntries.forEach(([name, browsers], index) => {
     optionPromises.push(
-      quiltAppBrowser({
+      quiltAppBrowserOptions({
         root,
         app,
         graphql,
@@ -50,17 +50,47 @@ 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 }
     })
   );
   return Promise.all(optionPromises);
 }
+async function quiltAppBrowserOptions(options = {}) {
+  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
+    }
+  };
+}
 async function quiltAppBrowser({
   root: rootPath = process.cwd(),
   app,
@@ -83,7 +113,8 @@ async function quiltAppBrowser({
     { visualizer },
     { magicModuleEnv, replaceProcessEnv },
     { sourceCode },
-    { createTSConfigAliasPlugin },
+    { tsconfigAliases },
+    { react },
     { css },
     { assetManifest, rawAssets, staticAssets },
     { asyncModules },
@@ -97,6 +128,7 @@ async function quiltAppBrowser({
     import('./features/env.mjs'),
     import('./features/source-code.mjs'),
     import('./features/typescript.mjs'),
+    import('./features/react.mjs'),
     import('./features/css.mjs'),
     import('./features/assets.mjs'),
     import('./features/async.mjs'),
@@ -107,6 +139,7 @@ async function quiltAppBrowser({
     loadPackageJSON(root)
   ]);
   const plugins = [
+    quiltAppBrowserInput({ root, entry }),
     ...nodePlugins,
     systemJS({ minify }),
     replaceProcessEnv({ mode }),
@@ -128,11 +161,12 @@ async function quiltAppBrowser({
         }
       }
     }),
+    react(),
+    css({ minify, emit: true }),
     esnext({
       mode,
       targets: browserGroup.browsers
     }),
-    css({ minify, emit: true }),
     rawAssets(),
     staticAssets({
       baseURL,
@@ -154,7 +188,8 @@ async function quiltAppBrowser({
         assetFileNames: `[name]${targetFilenamePart}.[hash].[ext]`,
         chunkFileNames: `[name]${targetFilenamePart}.[hash].js`
       }
-    })
+    }),
+    tsconfigAliases({ root })
   ];
   if (assets?.clean ?? true) {
     plugins.push(
@@ -163,10 +198,6 @@ async function quiltAppBrowser({
       })
     );
   }
-  const tsconfigAliases = await createTSConfigAliasPlugin();
-  if (tsconfigAliases) {
-    plugins.push(tsconfigAliases);
-  }
   const appEntry = await resolveAppEntry(app, { root, packageJSON });
   if (appEntry) {
     plugins.push(magicModuleAppComponent({ entry: appEntry }));
@@ -211,33 +242,45 @@ 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;
-  const isESM = await targetsSupportModules(browserGroup.browsers);
+  return plugins;
+}
+function quiltAppBrowserInput({
+  root: rootPath = process.cwd(),
+  entry
+} = {}) {
+  const root = resolveRoot(rootPath);
+  return {
+    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
+      };
+    }
+  };
+}
+async function quiltAppServerOptions(options = {}) {
+  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 {
-    // 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: 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"
     }
   };
 }
@@ -257,13 +300,12 @@ async function quiltAppServer({
   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 },
     { css },
     { rawAssets, staticAssets },
     { asyncModules },
@@ -274,6 +316,7 @@ async function quiltAppServer({
     import('rollup-plugin-visualizer'),
     import('./features/env.mjs'),
     import('./features/source-code.mjs'),
+    import('./features/react.mjs'),
     import('./features/typescript.mjs'),
     import('./features/css.mjs'),
     import('./features/assets.mjs'),
@@ -283,6 +326,7 @@ async function quiltAppServer({
     loadPackageJSON(root)
   ]);
   const plugins = [
+    quiltAppServerInput({ root, entry, format }),
     ...nodePlugins,
     replaceProcessEnv({ mode }),
     magicModuleEnv({ ...resolveEnvOption(env), mode }),
@@ -302,6 +346,7 @@ async function quiltAppServer({
         }
       }
     }),
+    react(),
     esnext({
       mode,
       targets: ["current node"]
@@ -318,12 +363,9 @@ async function quiltAppServer({
       preload: false,
       moduleID: ({ imported }) => path.relative(root, imported)
     }),
-    removeBuildFiles(["build/server"], { root })
+    removeBuildFiles(["build/server"], { root }),
+    tsconfigAliases({ root })
   ];
-  const tsconfigAliases = await createTSConfigAliasPlugin();
-  if (tsconfigAliases) {
-    plugins.push(tsconfigAliases);
-  }
   const appEntry = await resolveAppEntry(app, { root, packageJSON });
   if (appEntry) {
     plugins.push(magicModuleAppComponent({ entry: appEntry }));
@@ -333,7 +375,6 @@ async function quiltAppServer({
     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 }
@@ -360,24 +401,32 @@ async function quiltAppServer({
       )
     })
   );
+  return plugins;
+}
+function quiltAppServerInput({
+  root: rootPath = process.cwd(),
+  entry,
+  format = "request-router"
+} = {}) {
+  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) {
-      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
+      };
     }
   };
 }
@@ -649,4 +698,4 @@ async function resolveAppEntry(entry, { root, packageJSON }) {
   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/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';

package/build/esm/module.mjs

@@ -27,6 +27,8 @@ async function quiltModule({
     { visualizer },
     { magicModuleEnv, replaceProcessEnv },
     { sourceCode },
+    { tsconfigAliases },
+    { react },
     { esnext },
     nodePlugins,
     packageJSON
@@ -34,6 +36,8 @@ async function quiltModule({
     import('rollup-plugin-visualizer'),
     import('./features/env.mjs'),
     import('./features/source-code.mjs'),
+    import('./features/typescript.mjs'),
+    import('./features/react.mjs'),
     import('./features/esnext.mjs'),
     getNodePlugins({ bundle }),
     loadPackageJSON(root)
@@ -44,7 +48,9 @@ async function quiltModule({
     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 })
   ];
   if (graphql) {
@@ -69,12 +75,6 @@ async function quiltModule({
   return {
     input: finalEntry,
     plugins,
-    onwarn(warning, defaultWarn) {
-      if (warning.code === "MODULE_LEVEL_DIRECTIVE" && /['"]use client['"]/.test(warning.message)) {
-        return;
-      }
-      defaultWarn(warning);
-    },
     output: {
       format: "esm",
       dir: outputDirectory,

package/build/esm/server.mjs

@@ -29,6 +29,8 @@ async function quiltServer({
     { visualizer },
     { magicModuleEnv, replaceProcessEnv },
     { sourceCode },
+    { tsconfigAliases },
+    { react },
     { esnext },
     nodePlugins,
     packageJSON
@@ -36,6 +38,8 @@ async function quiltServer({
     import('rollup-plugin-visualizer'),
     import('./features/env.mjs'),
     import('./features/source-code.mjs'),
+    import('./features/typescript.mjs'),
+    import('./features/react.mjs'),
     import('./features/esnext.mjs'),
     getNodePlugins({ bundle }),
     loadPackageJSON(root)
@@ -47,6 +51,8 @@ async function quiltServer({
     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 })
   ];
@@ -115,4 +121,4 @@ async function sourceForServer(root, packageJSON) {
   return possibleSourceFiles[0];
 }
 
-export { quiltServer };
+export { MAGIC_MODULE_ENTRY, MAGIC_MODULE_REQUEST_ROUTER, quiltServer };

package/build/esm/shared/browserslist.mjs

@@ -8,7 +8,8 @@ async function getBrowserGroupTargetDetails(targetSelection = {}, { root } = {})
     const targetName = targets.name ?? "default";
     return config[targetName] ?? ["defaults"];
   })();
-  return { name: targets.name, browsers: browserslist(targetBrowsers) };
+  const browsers = browserslist(targetBrowsers);
+  return { name: targets.name, browsers };
 }
 async function getBrowserGroups({
   root = process.cwd()

package/build/esm/shared/rollup.mjs

@@ -28,6 +28,9 @@ function removeBuildFiles(patterns, { root = process.cwd() } = {}) {
     }
   };
 }
+function normalizeRollupInput(input) {
+  return Array.isArray(input) && input.length === 0 ? void 0 : input;
+}
 async function getNodePlugins({
   bundle = {}
 } = {}) {
@@ -100,4 +103,4 @@ async function getNodePlugins({
   ];
 }
 
-export { getNodePlugins, removeBuildFiles, smartReplace };
+export { getNodePlugins, normalizeRollupInput, removeBuildFiles, smartReplace };