@quilted/rollup 0.1.19 → 0.2.1

package/build/esm/app.mjs

@@ -1,13 +1,66 @@
 import * as path from 'node:path';
 import * as fs from 'node:fs/promises';
 import { glob } from 'glob';
-import { fileURLToPath } from 'node:url';
+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 { createMagicModulePlugin } from './shared/magic-module.mjs';
-import { getBrowserTargetDetails } from './shared/browserslist.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({
+  root: rootPath = process.cwd(),
+  app,
+  env,
+  graphql,
+  assets,
+  browser: browserOptions,
+  server: serverOptions
+} = {}) {
+  const root = resolveRoot(rootPath);
+  const browserGroups = await getBrowserGroups({ root });
+  const browserGroupEntries = Object.entries(browserGroups);
+  const hasMultipleBrowserGroups = browserGroupEntries.length > 1;
+  const optionPromises = [];
+  browserGroupEntries.forEach(([name, browsers], index) => {
+    optionPromises.push(
+      quiltAppBrowser({
+        root,
+        app,
+        graphql,
+        ...browserOptions,
+        env: {
+          ...resolveEnvOption(env),
+          ...resolveEnvOption(browserOptions?.env)
+        },
+        assets: {
+          ...assets,
+          ...browserOptions?.assets,
+          // Only clean on the first build, otherwise each subsequent build removes
+          // assets from the previous ones.
+          clean: index === 0,
+          priority: index,
+          targets: hasMultipleBrowserGroups ? { name, browsers } : browsers
+        }
+      })
+    );
+  });
+  optionPromises.push(
+    quiltAppServer({
+      root,
+      app,
+      graphql,
+      ...serverOptions,
+      env: { ...resolveEnvOption(env), ...resolveEnvOption(serverOptions?.env) },
+      assets: { ...assets, ...serverOptions?.assets }
+    })
+  );
+  return Promise.all(optionPromises);
+}
 async function quiltAppBrowser({
   root: rootPath = process.cwd(),
   app,
@@ -17,231 +70,310 @@ async function quiltAppBrowser({
   module,
   graphql = true
 } = {}) {
-  const root = typeof rootPath === 'string' ? rootPath : fileURLToPath(rootPath);
-  const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
-  const minify = assets?.minify ?? mode === 'production';
-  const baseURL = assets?.baseURL ?? '/assets/';
-  const browserTarget = await getBrowserTargetDetails(assets?.targets, {
+  const root = resolveRoot(rootPath);
+  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
   });
-  const targetFilenamePart = browserTarget.name ? `.${browserTarget.name}` : '';
-  const [{
-    visualizer
-  }, {
-    magicModuleEnv,
-    replaceProcessEnv
-  }, {
-    sourceCode
-  }, {
-    createTSConfigAliasPlugin
-  }, {
-    css
-  }, {
-    assetManifest,
-    rawAssets,
-    staticAssets
-  }, {
-    systemJS
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/env.mjs'), import('./features/source-code.mjs'), import('./features/typescript.mjs'), import('./features/css.mjs'), import('./features/assets.mjs'), import('./features/system-js.mjs'), getNodePlugins()]);
-  const plugins = [...nodePlugins, systemJS({
-    minify
-  }), replaceProcessEnv({
-    mode
-  }), magicModuleEnv({
-    ...env,
-    mode
-  }), sourceCode({
-    mode,
-    targets: browserTarget.browsers
-  }), css({
-    minify,
-    emit: true
-  }), rawAssets(), staticAssets({
-    baseURL,
-    emit: true
-  }), removeBuildFiles(['build/assets', 'build/manifests', 'build/reports'], {
-    root
-  })];
+  const targetFilenamePart = browserGroup.name ? `.${browserGroup.name}` : "";
+  const [
+    { visualizer },
+    { magicModuleEnv, replaceProcessEnv },
+    { sourceCode },
+    { createTSConfigAliasPlugin },
+    { css },
+    { assetManifest, rawAssets, staticAssets },
+    { asyncModules },
+    { systemJS },
+    { workers },
+    { esnext },
+    nodePlugins,
+    packageJSON
+  ] = await Promise.all([
+    import('rollup-plugin-visualizer'),
+    import('./features/env.mjs'),
+    import('./features/source-code.mjs'),
+    import('./features/typescript.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)
+  ]);
+  const plugins = [
+    ...nodePlugins,
+    systemJS({ minify }),
+    replaceProcessEnv({ mode }),
+    magicModuleEnv({ ...resolveEnvOption(env), mode }),
+    sourceCode({
+      mode,
+      targets: browserGroup.browsers,
+      babel: {
+        useBuiltIns: "entry",
+        options(options) {
+          return {
+            ...options,
+            plugins: [
+              ...options?.plugins ?? [],
+              require.resolve("@quilted/babel/async"),
+              require.resolve("@quilted/babel/workers")
+            ]
+          };
+        }
+      }
+    }),
+    esnext({
+      mode,
+      targets: browserGroup.browsers
+    }),
+    css({ minify, emit: true }),
+    rawAssets(),
+    staticAssets({
+      baseURL,
+      emit: true,
+      inlineLimit: assetsInline ? typeof assetsInline === "boolean" ? void 0 : assetsInline?.limit : Number.POSITIVE_INFINITY
+    }),
+    asyncModules({
+      baseURL,
+      preload: true,
+      moduleID: ({ imported }) => path.relative(root, imported)
+    }),
+    workers({
+      baseURL,
+      outputOptions: {
+        format: "iife",
+        inlineDynamicImports: true,
+        dir: path.resolve(root, `build/assets`),
+        entryFileNames: `[name]${targetFilenamePart}.[hash].js`,
+        assetFileNames: `[name]${targetFilenamePart}.[hash].[ext]`,
+        chunkFileNames: `[name]${targetFilenamePart}.[hash].js`
+      }
+    })
+  ];
+  if (assets?.clean ?? true) {
+    plugins.push(
+      removeBuildFiles(["build/assets", "build/manifests", "build/reports"], {
+        root
+      })
+    );
+  }
   const tsconfigAliases = await createTSConfigAliasPlugin();
   if (tsconfigAliases) {
     plugins.push(tsconfigAliases);
   }
-  const appEntry = app ?? (await glob('{App,app,input}.{ts,tsx,mjs,js,jsx}', {
-    cwd: root,
-    nodir: true,
-    absolute: true
-  }).then(files => files[0]));
+  const appEntry = await resolveAppEntry(app, { root, packageJSON });
   if (appEntry) {
-    plugins.push(magicModuleAppComponent({
-      entry: appEntry
-    }));
+    plugins.push(magicModuleAppComponent({ entry: appEntry }));
   }
   plugins.push(magicModuleAppBrowserEntry(module));
   if (graphql) {
-    const {
-      graphql
-    } = await import('./features/graphql.mjs');
-    plugins.push(graphql({
-      manifest: path.resolve(`manifests/graphql${targetFilenamePart}.json`)
-    }));
+    const { graphql: graphql2 } = await import('./features/graphql.mjs');
+    plugins.push(
+      graphql2({
+        manifest: path.resolve(`manifests/graphql${targetFilenamePart}.json`)
+      })
+    );
   }
   if (minify) {
-    const {
-      minify
-    } = await import('rollup-plugin-esbuild');
-    plugins.push(minify());
+    const { minify: minify2 } = await import('rollup-plugin-esbuild');
+    plugins.push(minify2());
+  }
+  const cacheKey = new URLSearchParams();
+  if (browserGroup.name) {
+    cacheKey.set("browserGroup", browserGroup.name);
   }
-  const cacheKey = browserTarget.name ? {
-    browserTarget: browserTarget.name
-  } : undefined;
-  const id = browserTarget.name ? browserTarget.name : undefined;
-  plugins.push(assetManifest({
-    id,
-    cacheKey,
-    baseURL,
-    file: path.resolve(`build/manifests/assets${targetFilenamePart}.json`),
-    priority: assets?.priority
-  }), visualizer({
-    template: 'treemap',
-    open: false,
-    brotliSize: true,
-    filename: path.resolve(`build/reports/bundle-visualizer${targetFilenamePart}.html`)
-  }));
-  const finalEntry = entry ?? (await glob('{browser,client}.{ts,tsx,mjs,js,jsx}', {
+  plugins.push(
+    assetManifest({
+      baseURL,
+      cacheKey,
+      file: path.resolve(`build/manifests/assets${targetFilenamePart}.json`),
+      priority: assets?.priority
+    }),
+    visualizer({
+      template: "treemap",
+      open: false,
+      brotliSize: true,
+      filename: path.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;
+  }).then((files) => files[0]) ?? MAGIC_MODULE_ENTRY;
+  const isESM = await targetsSupportModules(browserGroup.browsers);
   return {
-    input: finalEntry,
+    // 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)) {
+      if (warning.code === "MODULE_LEVEL_DIRECTIVE" && /['"]use client['"]/.test(warning.message)) {
         return;
       }
       defaultWarn(warning);
     },
     output: {
-      // format: isESM ? 'esm' : 'systemjs',
-      format: 'esm',
-      dir: path.resolve(`build/assets`),
-      entryFileNames: `app${targetFilenamePart}.[hash].js`,
+      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()
+      manualChunks: createManualChunksSorter(),
+      generatedCode: await rollupGenerateOptionsForBrowsers(
+        browserGroup.browsers
+      )
     }
   };
 }
 async function quiltAppServer({
+  root: rootPath = process.cwd(),
   app,
   env,
   entry,
+  format = "request-router",
   graphql = true,
-  minify = false
+  assets,
+  output
 } = {}) {
-  const root = process.cwd();
-  const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
-  const [{
-    visualizer
-  }, {
-    magicModuleEnv,
-    replaceProcessEnv
-  }, {
-    sourceCode
-  }, {
-    createTSConfigAliasPlugin
-  }, {
-    css
-  }, {
-    rawAssets,
-    staticAssets
-  }, {
-    magicModuleRequestRouterEntry
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/env.mjs'), import('./features/source-code.mjs'), import('./features/typescript.mjs'), import('./features/css.mjs'), import('./features/assets.mjs'), import('./features/request-router.mjs'), getNodePlugins()]);
-  const plugins = [...nodePlugins, replaceProcessEnv({
-    mode
-  }), magicModuleEnv({
-    ...env,
-    mode
-  }), sourceCode({
-    mode,
-    targets: ['current node']
-  }), css({
-    emit: false,
-    minify
-  }), rawAssets(), staticAssets({
-    emit: false
-  }), removeBuildFiles(['build/server'], {
-    root
-  })];
+  const root = resolveRoot(rootPath);
+  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 },
+    { css },
+    { rawAssets, staticAssets },
+    { asyncModules },
+    { esnext },
+    nodePlugins,
+    packageJSON
+  ] = await Promise.all([
+    import('rollup-plugin-visualizer'),
+    import('./features/env.mjs'),
+    import('./features/source-code.mjs'),
+    import('./features/typescript.mjs'),
+    import('./features/css.mjs'),
+    import('./features/assets.mjs'),
+    import('./features/async.mjs'),
+    import('./features/esnext.mjs'),
+    getNodePlugins({ bundle }),
+    loadPackageJSON(root)
+  ]);
+  const plugins = [
+    ...nodePlugins,
+    replaceProcessEnv({ mode }),
+    magicModuleEnv({ ...resolveEnvOption(env), mode }),
+    sourceCode({
+      mode,
+      targets: ["current node"],
+      babel: {
+        options(options) {
+          return {
+            ...options,
+            plugins: [
+              ...options?.plugins ?? [],
+              require.resolve("@quilted/babel/async"),
+              [require.resolve("@quilted/babel/workers"), { noop: true }]
+            ]
+          };
+        }
+      }
+    }),
+    esnext({
+      mode,
+      targets: ["current node"]
+    }),
+    css({ emit: false, minify }),
+    rawAssets(),
+    staticAssets({
+      emit: false,
+      baseURL,
+      inlineLimit: assetsInline ? typeof assetsInline === "boolean" ? void 0 : assetsInline?.limit : Number.POSITIVE_INFINITY
+    }),
+    asyncModules({
+      baseURL,
+      preload: false,
+      moduleID: ({ imported }) => path.relative(root, imported)
+    }),
+    removeBuildFiles(["build/server"], { root })
+  ];
   const tsconfigAliases = await createTSConfigAliasPlugin();
   if (tsconfigAliases) {
     plugins.push(tsconfigAliases);
   }
-  const appEntry = app ?? (await glob('{App,app,input}.{ts,tsx,mjs,js,jsx}', {
+  const appEntry = await resolveAppEntry(app, { root, packageJSON });
+  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]));
-  if (appEntry) {
-    plugins.push(magicModuleAppComponent({
-      entry: appEntry
-    }));
-  }
-  plugins.push(magicModuleRequestRouterEntry(), magicModuleAppRequestRouter({
-    entry
-  }), magicModuleAppAssetManifests());
+  }).then((files) => files[0]);
+  const finalEntry = format === "request-router" ? MAGIC_MODULE_ENTRY : serverEntry ?? MAGIC_MODULE_ENTRY;
+  plugins.push(
+    magicModuleAppServerEntry({
+      assets: { baseURL }
+    }),
+    magicModuleAppRequestRouter({ entry: serverEntry }),
+    magicModuleAppAssetManifests()
+  );
   if (graphql) {
-    const {
-      graphql
-    } = await import('./features/graphql.mjs');
-    plugins.push(graphql({
-      manifest: false
-    }));
+    const { graphql: graphql2 } = await import('./features/graphql.mjs');
+    plugins.push(graphql2({ manifest: false }));
   }
   if (minify) {
-    const {
-      minify
-    } = await import('rollup-plugin-esbuild');
-    plugins.push(minify());
+    const { minify: minify2 } = await import('rollup-plugin-esbuild');
+    plugins.push(minify2());
   }
-  plugins.push(visualizer({
-    template: 'treemap',
-    open: false,
-    brotliSize: false,
-    filename: path.resolve(`build/reports/bundle-visualizer.server.html`)
-  }));
-  const finalEntry = entry ?? (await glob('{server,service,backend}.{ts,tsx,mjs,js,jsx}', {
-    cwd: root,
-    nodir: true,
-    absolute: true
-  }).then(files => files[0])) ?? MAGIC_MODULE_ENTRY;
+  plugins.push(
+    visualizer({
+      template: "treemap",
+      open: false,
+      brotliSize: false,
+      filename: path.resolve(`build/reports/bundle-visualizer.server.html`)
+    })
+  );
   return {
-    input: finalEntry,
+    // 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)) {
+      if (warning.code === "MODULE_LEVEL_DIRECTIVE" && /['"]use client['"]/.test(warning.message)) {
         return;
       }
       defaultWarn(warning);
     },
     output: {
-      // format: isESM ? 'esm' : 'systemjs',
-      format: 'esm',
+      format: outputFormat === "commonjs" || outputFormat === "cjs" ? "cjs" : "esm",
       dir: path.resolve(`build/server`),
-      entryFileNames: 'server.js'
+      entryFileNames: `[name]${hash === true ? `.[hash]` : ""}.js`,
+      chunkFileNames: `[name]${hash === true || hash === "async-only" ? `.[hash]` : ""}.js`,
+      assetFileNames: `[name]${hash === true ? `.[hash]` : ""}.[ext]`,
+      generatedCode: "es2015"
     }
   };
 }
-function magicModuleAppComponent({
-  entry
-}) {
+function magicModuleAppComponent({ entry }) {
   return createMagicModulePlugin({
-    name: '@quilted/magic-module/app',
+    name: "@quilted/magic-module/app",
     module: MAGIC_MODULE_APP_COMPONENT,
     alias: entry
   });
@@ -250,10 +382,10 @@ function magicModuleAppRequestRouter({
   entry
 } = {}) {
   return createMagicModulePlugin({
-    name: '@quilted/magic-module/app-request-router',
+    name: "@quilted/magic-module/app-request-router",
     module: MAGIC_MODULE_REQUEST_ROUTER,
     alias: entry,
-    source: entry ? undefined : async function source() {
+    source: entry ? void 0 : async function source() {
       return multiline`
             import '@quilted/quilt/globals';
 
@@ -262,7 +394,9 @@ function magicModuleAppRequestRouter({
             import {renderToResponse} from '@quilted/quilt/server';
 
             import App from ${JSON.stringify(MAGIC_MODULE_APP_COMPONENT)};
-            import {BrowserAssets} from ${JSON.stringify(MAGIC_MODULE_BROWSER_ASSETS)};
+            import {BrowserAssets} from ${JSON.stringify(
+        MAGIC_MODULE_BROWSER_ASSETS
+      )};
 
             const router = new RequestRouter();
             const assets = new BrowserAssets();
@@ -284,14 +418,14 @@ function magicModuleAppRequestRouter({
 }
 function magicModuleAppBrowserEntry({
   hydrate = true,
-  selector = '#app'
+  selector = "#app"
 } = {}) {
   return createMagicModulePlugin({
-    name: '@quilted/magic-module/app-browser-entry',
+    name: "@quilted/magic-module/app-browser-entry",
     module: MAGIC_MODULE_ENTRY,
     sideEffects: true,
     async source() {
-      const reactRootFunction = hydrate ? 'hydrateRoot' : 'createRoot';
+      const reactRootFunction = hydrate ? "hydrateRoot" : "createRoot";
       return multiline`
         import '@quilted/quilt/globals';
 
@@ -307,27 +441,86 @@ function magicModuleAppBrowserEntry({
     }
   });
 }
+function magicModuleAppServerEntry({
+  host,
+  port,
+  assets,
+  format = "module"
+} = {}) {
+  const baseURL = typeof assets === "object" ? assets.baseURL : "/assets/";
+  return createMagicModulePlugin({
+    name: "@quilted/request-router/app-server",
+    module: MAGIC_MODULE_ENTRY,
+    sideEffects: true,
+    async source() {
+      const serveAssets = Boolean(assets);
+      return multiline`
+        ${serveAssets ? `import * as path from 'path';` : ""}
+        ${serveAssets && format === "module" ? `import {fileURLToPath} from 'url';` : ""}
+        import {createServer} from 'http';
+
+        import requestRouter from ${JSON.stringify(
+        MAGIC_MODULE_REQUEST_ROUTER
+      )};
+
+        import {createHttpRequestListener${serveAssets ? ", serveStatic" : ""}} from '@quilted/quilt/request-router/node';
+
+        const port = ${port ?? "Number.parseInt(process.env.PORT, 10)"};
+        const host = ${host ? JSON.stringify(host) : "process.env.HOST"};
+
+        ${serveAssets ? `const dirname = ${format === "module" ? "path.dirname(fileURLToPath(import.meta.url))" : "__dirname"};
+const serve = serveStatic(path.resolve(dirname, '../assets'), {
+                baseUrl: ${JSON.stringify(baseURL)},
+              });` : ""}
+        const listener = createHttpRequestListener(requestRouter);
+      
+        createServer(async (request, response) => {
+          ${serveAssets ? `if (request.url.startsWith(${JSON.stringify(
+        baseURL
+      )})) return serve(request, response);` : ""}
+
+          await listener(request, response);
+        }).listen(port, host);
+      `;
+    }
+  });
+}
 function magicModuleAppAssetManifests() {
   return createMagicModulePlugin({
-    name: '@quilted/magic-module/asset-manifests',
+    name: "@quilted/magic-module/asset-manifests",
     module: MAGIC_MODULE_BROWSER_ASSETS,
     async source() {
-      const {
-        glob
-      } = await import('glob');
-      const manifestFiles = await glob('assets*.json', {
+      const { glob: glob2 } = await import('glob');
+      const manifestFiles = await glob2("assets*.json", {
         nodir: true,
         absolute: true,
         cwd: path.resolve(`build/manifests`)
       });
-      const manifests = await Promise.all(manifestFiles.map(async file => JSON.parse(await fs.readFile(file, 'utf8'))));
-      manifests.sort((manifestA, manifestB) => (manifestA.priority ?? 0) - (manifestB.priority ?? 0));
+      const manifests = await Promise.all(
+        manifestFiles.map(
+          async (file) => JSON.parse(await fs.readFile(file, "utf8"))
+        )
+      );
+      manifests.sort(
+        (manifestA, manifestB) => (manifestA.priority ?? 0) - (manifestB.priority ?? 0)
+      );
+      const browserGroupRegexes = await getBrowserGroupRegularExpressions();
       return multiline`
         import {BrowserAssetsFromManifests} from '@quilted/quilt/server';
 
         export class BrowserAssets extends BrowserAssetsFromManifests {
           constructor() {
-            const manifests = JSON.parse(${JSON.stringify(JSON.stringify(manifests))});
+            const manifests = JSON.parse(${JSON.stringify(
+        JSON.stringify(manifests)
+      )});
+
+            const browserGroupTests = [
+              ${Object.entries(browserGroupRegexes).map(
+        ([name, test]) => `[${JSON.stringify(name)}, new RegExp(${JSON.stringify(
+          test.source
+        )})]`
+      ).join(", ")}
+            ];
 
             // The default manifest is the last one, since it has the widest browser support.
             const defaultManifest = manifests.at(-1);
@@ -335,6 +528,14 @@ function magicModuleAppAssetManifests() {
             super(manifests, {
               defaultManifest,
               cacheKey(request) {
+                const userAgent = request.headers.get('User-Agent');
+  
+                if (userAgent) {
+                  for (const [name, test] of browserGroupTests) {
+                    if (test.test(userAgent)) return {browserGroup: name};
+                  }
+                }
+
                 return {};
               },
             });
@@ -344,71 +545,98 @@ function magicModuleAppAssetManifests() {
     }
   });
 }
-const FRAMEWORK_CHUNK_NAME = 'framework';
-const POLYFILLS_CHUNK_NAME = 'polyfills';
-const VENDOR_CHUNK_NAME = 'vendor';
-const INTERNALS_CHUNK_NAME = 'internals';
-const SHARED_CHUNK_NAME = 'shared';
-const PACKAGES_CHUNK_NAME = 'packages';
-const GLOBAL_CHUNK_NAME = 'global';
-const FRAMEWORK_TEST_STRINGS = ['/node_modules/preact/', '/node_modules/react/', '/node_modules/js-cookie/', '/node_modules/@quilted/quilt/', '/node_modules/@preact/signals/', '/node_modules/@preact/signals-core/',
-// TODO I should turn this into an allowlist
-/node_modules[/]@quilted[/](?!react-query|swr)/];
-const POLYFILL_TEST_STRINGS = ['/node_modules/@quilted/polyfills/', '/node_modules/core-js/', '/node_modules/whatwg-fetch/', '/node_modules/regenerator-runtime/', '/node_modules/abort-controller/'];
-const INTERNALS_TEST_STRINGS = ['\x00commonjsHelpers.js', '/node_modules/@babel/runtime/'];
-
-// When building from source, quilt packages are not in node_modules,
-// so we instead add their repo paths to the list of framework test strings.
+const FRAMEWORK_CHUNK_NAME = "framework";
+const POLYFILLS_CHUNK_NAME = "polyfills";
+const VENDOR_CHUNK_NAME = "vendor";
+const INTERNALS_CHUNK_NAME = "internals";
+const SHARED_CHUNK_NAME = "shared";
+const PACKAGES_CHUNK_NAME = "packages";
+const GLOBAL_CHUNK_NAME = "global";
+const FRAMEWORK_TEST_STRINGS = [
+  "/node_modules/preact/",
+  "/node_modules/react/",
+  "/node_modules/js-cookie/",
+  "/node_modules/@quilted/quilt/",
+  "/node_modules/@preact/signals/",
+  "/node_modules/@preact/signals-core/",
+  // TODO I should turn this into an allowlist
+  /node_modules[/]@quilted[/](?!react-query|swr)/
+];
+const POLYFILL_TEST_STRINGS = [
+  "/node_modules/core-js/",
+  "/node_modules/whatwg-fetch/",
+  "/node_modules/regenerator-runtime/",
+  "/node_modules/abort-controller/"
+];
+const INTERNALS_TEST_STRINGS = [
+  "\0commonjsHelpers.js",
+  "/node_modules/@babel/runtime/"
+];
 if (process.env.QUILT_FROM_SOURCE) {
-  FRAMEWORK_TEST_STRINGS.push('/quilt/packages/');
+  FRAMEWORK_TEST_STRINGS.push("/quilt/packages/");
 }
-
-// Inspired by Vite: https://github.com/vitejs/vite/blob/c69f83615292953d40f07b1178d1ed1d72abe695/packages/vite/source/node/build.ts#L567
 function createManualChunksSorter() {
-  // TODO: make this more configurable, and make it so that we bundle more intelligently
-  // for split entries
-  const packagesPath = path.resolve('packages') + path.sep;
-  const globalPath = path.resolve('global') + path.sep;
-  const sharedPath = path.resolve('shared') + path.sep;
-  return (id, {
-    getModuleInfo
-  }) => {
-    if (INTERNALS_TEST_STRINGS.some(test => id.includes(test))) {
+  const packagesPath = path.resolve("packages") + path.sep;
+  const globalPath = path.resolve("global") + path.sep;
+  const sharedPath = path.resolve("shared") + path.sep;
+  return (id, { getModuleInfo }) => {
+    if (INTERNALS_TEST_STRINGS.some((test) => id.includes(test))) {
       return INTERNALS_CHUNK_NAME;
     }
-    if (FRAMEWORK_TEST_STRINGS.some(test => typeof test === 'string' ? id.includes(test) : test.test(id))) {
+    if (FRAMEWORK_TEST_STRINGS.some(
+      (test) => typeof test === "string" ? id.includes(test) : test.test(id)
+    )) {
       return FRAMEWORK_CHUNK_NAME;
     }
-    if (POLYFILL_TEST_STRINGS.some(test => id.includes(test))) {
+    if (POLYFILL_TEST_STRINGS.some((test) => id.includes(test))) {
       return POLYFILLS_CHUNK_NAME;
     }
     let bundleBaseName;
     let relativeId;
-    if (id.includes('/node_modules/')) {
+    if (id.includes("/node_modules/")) {
       const moduleInfo = getModuleInfo(id);
-
-      // If the only dependency is another vendor, let Rollup handle the naming
-      if (moduleInfo == null) return;
-      if (moduleInfo.importers.length > 0 && moduleInfo.importers.every(importer => importer.includes('/node_modules/'))) {
+      if (moduleInfo == null)
+        return;
+      if (moduleInfo.importers.length > 0 && moduleInfo.importers.every(
+        (importer) => importer.includes("/node_modules/")
+      )) {
         return;
       }
       bundleBaseName = VENDOR_CHUNK_NAME;
-      relativeId = id.replace(/^.*[/]node_modules[/]/, '');
+      relativeId = id.replace(/^.*[/]node_modules[/]/, "");
     } else if (id.startsWith(packagesPath)) {
       bundleBaseName = PACKAGES_CHUNK_NAME;
-      relativeId = id.replace(packagesPath, '');
+      relativeId = id.replace(packagesPath, "");
     } else if (id.startsWith(globalPath)) {
       bundleBaseName = GLOBAL_CHUNK_NAME;
-      relativeId = id.replace(globalPath, '');
+      relativeId = id.replace(globalPath, "");
     } else if (id.startsWith(sharedPath)) {
       bundleBaseName = SHARED_CHUNK_NAME;
-      relativeId = id.replace(sharedPath, '');
+      relativeId = id.replace(sharedPath, "");
     }
     if (bundleBaseName == null || relativeId == null) {
       return;
     }
-    return `${bundleBaseName}-${relativeId.split(path.sep)[0]?.split('.')[0]}`;
+    return `${bundleBaseName}-${relativeId.split(path.sep)[0]?.split(".")[0]}`;
   };
 }
+async function resolveAppEntry(entry, { root, packageJSON }) {
+  if (entry) {
+    return path.resolve(root, entry);
+  }
+  if (typeof packageJSON.main === "string") {
+    return path.resolve(root, packageJSON.main);
+  }
+  const rootEntry = packageJSON.exports?.["."];
+  if (typeof rootEntry === "string") {
+    return path.resolve(root, rootEntry);
+  }
+  const globbed = await glob("{App,app,index}.{ts,tsx,mjs,js,jsx}", {
+    cwd: root,
+    nodir: true,
+    absolute: true
+  });
+  return globbed[0];
+}
 
-export { magicModuleAppAssetManifests, magicModuleAppBrowserEntry, magicModuleAppComponent, magicModuleAppRequestRouter, quiltAppBrowser, quiltAppServer };
+export { magicModuleAppAssetManifests, magicModuleAppBrowserEntry, magicModuleAppComponent, magicModuleAppRequestRouter, magicModuleAppServerEntry, quiltApp, quiltAppBrowser, quiltAppServer };