From c421ad92ce5554d2b6b9c0b44f24378759dce5ab Mon Sep 17 00:00:00 2001
From: Chris Sauve <chrismsauve@gmail.com>
Date: Sat, 26 Oct 2024 18:34:07 -0400
Subject: [PATCH] Allow additional entries to be marked as inlined to include
 their content in the browser asset manifest

---
 .changeset/pretty-otters-pay.md               |   7 +
 packages/assets/source/manifest/runtime.ts    |  34 +++--
 packages/assets/source/manifest/types.ts      |   2 +-
 packages/assets/source/types.ts               |   1 +
 .../source/server/components/ScriptAssets.tsx |  22 +--
 .../source/server/components/StyleAssets.tsx  |  25 ++--
 packages/rollup/source/app.ts                 | 129 +++++++++++++++++-
 packages/rollup/source/features/assets.ts     |  56 ++++++--
 packages/rollup/source/features/system-js.ts  |  30 ++--
 9 files changed, 242 insertions(+), 64 deletions(-)
 create mode 100644 .changeset/pretty-otters-pay.md

diff --git a/.changeset/pretty-otters-pay.md b/.changeset/pretty-otters-pay.md
new file mode 100644
index 000000000..b0cad27a2
--- /dev/null
+++ b/.changeset/pretty-otters-pay.md
@@ -0,0 +1,7 @@
+---
+'@quilted/preact-browser': patch
+'@quilted/assets': patch
+'@quilted/rollup': patch
+---
+
+Allow additional entries to be marked as inlined to include their content in the browser asset manifest
diff --git a/packages/assets/source/manifest/runtime.ts b/packages/assets/source/manifest/runtime.ts
index 3da96c160..a11a88822 100644
--- a/packages/assets/source/manifest/runtime.ts
+++ b/packages/assets/source/manifest/runtime.ts
@@ -122,6 +122,8 @@ const NORMALIZED_ASSET_BUILD_MANIFEST_CACHE = new WeakMap<
   NormalizedAssetBuildManifest
 >();
 
+const INTEGRITY_VALUE_REGEXP = /^(sha256|sha384|sha512)-[A-Za-z0-9+/=]{44,}$/;
+
 function normalizeAssetBuildManifest(
   manifest: AssetBuildManifest,
 ): NormalizedAssetBuildManifest {
@@ -141,18 +143,27 @@ function normalizeAssetBuildManifest(
   const scriptAttributes = manifest.attributes?.[2] ?? {};
 
   manifest.assets.forEach((asset, index) => {
-    const [type, source, integrity, attributes] = asset;
+    const [type, source, integrityOrContent, attributes] = asset;
+
+    const resolvedAsset: Asset = {
+      source: base + source,
+      attributes: {},
+    };
+
+    if (integrityOrContent) {
+      if (INTEGRITY_VALUE_REGEXP.test(integrityOrContent)) {
+        resolvedAsset.attributes!.integrity = integrityOrContent;
+      } else {
+        resolvedAsset.content = integrityOrContent;
+      }
+    }
 
     if (type === 1) {
-      assets.styles.set(index, {
-        source: base + source,
-        attributes: {integrity: integrity!, ...styleAttributes, ...attributes},
-      });
+      Object.assign(resolvedAsset.attributes!, styleAttributes, attributes);
+      assets.styles.set(index, resolvedAsset);
     } else if (type === 2) {
-      assets.scripts.set(index, {
-        source: base + source,
-        attributes: {integrity: integrity!, ...scriptAttributes, ...attributes},
-      });
+      Object.assign(resolvedAsset.attributes!, scriptAttributes, attributes);
+      assets.scripts.set(index, resolvedAsset);
     }
   });
 
@@ -187,7 +198,10 @@ function createBrowserAssetsEntryFromManifest(
   const scripts = new Set<Asset>();
 
   if (entry) {
-    const entryModuleID = manifest.entries[entry];
+    // Allow developers to omit the leading ./ from nested entrypoints, so they can pass
+    // either `entry: 'foo/bar'` or `entry: './foo/bar'` and still get the entry assets
+    const entryModuleID =
+      manifest.entries[entry] ?? manifest.entries[`./${entry}`];
     const entryModule = entryModuleID
       ? manifest.modules[entryModuleID]
       : undefined;
diff --git a/packages/assets/source/manifest/types.ts b/packages/assets/source/manifest/types.ts
index 980e05ed0..3419d1179 100644
--- a/packages/assets/source/manifest/types.ts
+++ b/packages/assets/source/manifest/types.ts
@@ -18,6 +18,6 @@ export interface AssetBuildManifest {
 export type AssetBuildAsset = [
   type: AssetBuildAssetType,
   path: string,
-  integrity?: string,
+  integrityOrIntegrity?: string,
   attributes?: {textContent: string; [key: string]: string | boolean | number},
 ];
diff --git a/packages/assets/source/types.ts b/packages/assets/source/types.ts
index 1ec3db51d..d2420485b 100644
--- a/packages/assets/source/types.ts
+++ b/packages/assets/source/types.ts
@@ -1,5 +1,6 @@
 export interface Asset {
   source: string;
+  content?: string;
   attributes?: Record<string, string | boolean | number>;
 }
 
diff --git a/packages/preact-browser/source/server/components/ScriptAssets.tsx b/packages/preact-browser/source/server/components/ScriptAssets.tsx
index e3a8a3a70..e2f0a60e3 100644
--- a/packages/preact-browser/source/server/components/ScriptAssets.tsx
+++ b/packages/preact-browser/source/server/components/ScriptAssets.tsx
@@ -14,15 +14,19 @@ export function ScriptAssets({
 
   return (
     <>
-      {scripts.map((asset) => (
-        <script
-          key={asset.source}
-          {...(scriptAssetAttributes(asset, {
-            baseURL,
-          }) as JSX.HTMLAttributes<HTMLScriptElement>)}
-          {...rest}
-        />
-      ))}
+      {scripts.map((asset) => {
+        const props: JSX.HTMLAttributes<HTMLScriptElement> = {};
+
+        Object.assign(props, scriptAssetAttributes(asset, {baseURL}), rest);
+
+        if (asset.content) {
+          props.dangerouslySetInnerHTML = {__html: asset.content};
+        } else {
+          props.src = asset.source;
+        }
+
+        return <script {...props} />;
+      })}
     </>
   );
 }
diff --git a/packages/preact-browser/source/server/components/StyleAssets.tsx b/packages/preact-browser/source/server/components/StyleAssets.tsx
index ee0baa458..c527ecc5c 100644
--- a/packages/preact-browser/source/server/components/StyleAssets.tsx
+++ b/packages/preact-browser/source/server/components/StyleAssets.tsx
@@ -14,15 +14,22 @@ export function StyleAssets({
 
   return (
     <>
-      {styles.map((asset) => (
-        <link
-          key={asset.source}
-          {...(styleAssetAttributes(asset, {
-            baseURL,
-          }) as JSX.HTMLAttributes<HTMLLinkElement>)}
-          {...rest}
-        />
-      ))}
+      {styles.map((asset) => {
+        const props: JSX.HTMLAttributes<any> = {};
+
+        Object.assign(props, styleAssetAttributes(asset, {baseURL}), rest);
+
+        if (asset.content) {
+          return (
+            <style
+              {...props}
+              dangerouslySetInnerHTML={{__html: asset.content}}
+            />
+          );
+        } else {
+          return <link {...props} href={asset.source} />;
+        }
+      })}
     </>
   );
 }
diff --git a/packages/rollup/source/app.ts b/packages/rollup/source/app.ts
index cea5714ca..c771980f5 100644
--- a/packages/rollup/source/app.ts
+++ b/packages/rollup/source/app.ts
@@ -112,12 +112,79 @@ export interface AppBrowserOptions extends AppBaseOptions {
    * The entry module for this browser. This should be an absolute path, or relative
    * path from the root directory containing your project. This entry should be the
    * browser entrypoint. If you don’t provide a module, Quilt will automatically pick
-   *
+   * a default entry module for you, based on the conventions [described here](TODO).
    *
    * @example './browser.tsx'
    */
   entry?: string;
 
+  /**
+   * Instead of providing a single `entry` module, you can use this option to list multiple
+   * independent entry modules for your browser application. This can be useful if you have
+   * parts of the codebase you want to load separately from one another; for example, as an
+   * inline script or style, or assets loaded inside an iframe rendered by the “main” part of
+   * the application.
+   *
+   * Entries should be defined similarly to how you would define the `exports` field in a Node.js
+   * [`package.json` file](https://nodejs.org/api/packages.html#exports). Keys should be prefixed
+   * with a `./`, and the key names can then be passed to Quilt’s `BrowserAssets` object to retrieve
+   * the built asset names on your server. The values should be relative paths to the source file
+   * that acts as the entrypoint for that asset. Entrypoints can be either JavaScript or CSS files.
+   *
+   * When using this option, you can override the “main” entrypoint by setting one of the keys
+   * of this object to the string: `'.'`. You can do this in addition to providing additional
+   * entry modules, but if you don’t provide the main entrypoint, a default will be used.
+   *
+   * @example
+   * ```js
+   * quiltApp({
+   *   browser: {
+   *     entry: {
+   *       '.': './main.tsx',
+   *       './inline.css': './inline.css',
+   *     },
+   *   },
+   * })
+   * ```
+   *
+   * To inline an asset, you can set the value to an object with a `source` property (for the relative
+   * path) and an `inline` option set to `true`. Note that this option will not inline dependencies of
+   * the entry into the asset manifest, so make sure that the way you load these scripts accounts for
+   * the fact that any dependencies will be loaded as external scripts. Because the whole file’s contents
+   * will be inlined into the asset manifest and server bundles, you should also be careful to only
+   * inline small JavaScript and CSS assets.
+   *
+   * @example
+   * ```js
+   * quiltApp({
+   *   browser: {
+   *     entry: {
+   *       '.': './main.tsx',
+   *       './inline.js': {source: './inline.tsx', inline: true},
+   *     },
+   *   },
+   * })
+   * ```
+   */
+  entries?: Record<
+    string,
+    | string
+    | {
+        /**
+         * The relative path to the source file that acts as the entrypoint for this asset.
+         */
+        source: string;
+
+        /**
+         * Whether to inline the asset into the asset manifest, so that it can be used as an
+         * inline script or style when rendering HTML content on the server.
+         *
+         * @default false
+         */
+        inline?: boolean;
+      }
+  >;
+
   /**
    * Customizes the magic `quilt:module/entry` module, which can be used as a "magic"
    * entry for your application.
@@ -462,6 +529,7 @@ export async function quiltAppBrowserPlugins({
   root = process.cwd(),
   app,
   entry,
+  entries,
   env,
   assets,
   module,
@@ -496,6 +564,7 @@ export async function quiltAppBrowserPlugins({
     {workers},
     {esnext},
     nodePlugins,
+    supportsESM,
     supportsModuleWorkers,
   ] = await Promise.all([
     import('rollup-plugin-visualizer'),
@@ -514,13 +583,13 @@ export async function quiltAppBrowserPlugins({
       bundle: true,
       resolve: {exportConditions: ['browser']},
     }),
+    targetsSupportModules(browserGroup.browsers),
     targetsSupportModuleWebWorkers(browserGroup.browsers),
   ]);
 
   const plugins: InputPluginOption[] = [
-    quiltAppBrowserInput({root: project.root, entry}),
+    quiltAppBrowserInput({root: project.root, entry, entries}),
     ...nodePlugins,
-    systemJS({minify}),
     replaceProcessEnv({mode}),
     magicModuleEnv({...resolveEnvOption(env), mode, root: project.root}),
     magicModuleAppComponent({entry: app, root: project.root}),
@@ -577,6 +646,10 @@ export async function quiltAppBrowserPlugins({
     monorepoPackageAliases({root: project.root}),
   ];
 
+  if (!supportsESM) {
+    plugins.push(systemJS({minify}));
+  }
+
   if (assets?.clean ?? true) {
     plugins.push(
       removeBuildFiles(
@@ -612,12 +685,27 @@ export async function quiltAppBrowserPlugins({
     cacheKey.set('browserGroup', browserGroup.name);
   }
 
+  // Always inline the system.js entry, since we’ll load it as an inline script to avoid
+  // an unnecessary JS network waterfall for loading critical, SystemJS-dependent code.
+  // We’ll also add any additional entry that was passed via the `entries` option that is
+  // marked as being `inline`.
+  const inline = new Set(['system.js']);
+
+  if (entries) {
+    for (const [name, entry] of Object.entries(entries)) {
+      if (typeof entry === 'object' && entry.inline) {
+        inline.add(name.startsWith('./') ? name.slice(2) : name);
+      }
+    }
+  }
+
   plugins.push(
     assetManifest({
       key: cacheKey,
       base: baseURL,
       file: path.join(manifestsDirectory, `assets${targetFilenamePart}.json`),
       priority: assets?.priority,
+      inline,
     }),
     visualizer({
       template: 'treemap',
@@ -636,7 +724,8 @@ export async function quiltAppBrowserPlugins({
 export function quiltAppBrowserInput({
   root,
   entry,
-}: Pick<AppBrowserOptions, 'root' | 'entry'> = {}) {
+  entries,
+}: Pick<AppBrowserOptions, 'root' | 'entry' | 'entries'> = {}) {
   const MODULES_TO_ENTRIES = new Map<string, string>();
 
   return {
@@ -644,13 +733,19 @@ export function quiltAppBrowserInput({
     async options(options) {
       const finalEntry =
         normalizeRollupInput(options.input) ??
-        (await sourceEntryForAppBrowser({entry, root})) ??
+        (await sourceEntryForAppBrowser({
+          entry: entry ?? getSourceFromCustomEntry(entries?.['.']),
+          root,
+        })) ??
         MAGIC_MODULE_ENTRY;
       const finalEntryName =
         typeof finalEntry === 'string' && finalEntry !== MAGIC_MODULE_ENTRY
           ? path.basename(finalEntry).split('.').slice(0, -1).join('.')
           : 'browser';
-      const additionalEntries = await additionalEntriesForAppBrowser({root});
+      const additionalEntries = await additionalEntriesForAppBrowser({
+        root,
+        entries,
+      });
 
       if (typeof finalEntry === 'string') {
         MODULES_TO_ENTRIES.set(finalEntry, '.');
@@ -1399,8 +1494,10 @@ const SERVER_EXPORT_CONDITIONS = new Set([
 ]);
 
 export async function additionalEntriesForAppBrowser({
+  entries,
   root = process.cwd(),
 }: {
+  entries?: AppBrowserOptions['entries'];
   root?: string | URL;
 }) {
   const additionalEntries: Record<string, string> = {};
@@ -1428,6 +1525,20 @@ export async function additionalEntriesForAppBrowser({
     }
   }
 
+  if (entries) {
+    for (const [key, value] of Object.entries(entries)) {
+      if (key === '.') continue;
+
+      const name = key.startsWith('./') ? key.slice(2) : key;
+
+      if (typeof value === 'string') {
+        additionalEntries[name] = project.resolve(value);
+      } else {
+        additionalEntries[name] = project.resolve(value.source);
+      }
+    }
+  }
+
   return additionalEntries;
 }
 
@@ -1611,3 +1722,9 @@ function createManualChunksSorter(): GetManualChunk {
     return `${bundleBaseName}-${relativeId.split(path.sep)[0]?.split('.')[0]}`;
   };
 }
+
+function getSourceFromCustomEntry(
+  entry?: string | {source: string; inline?: boolean},
+) {
+  return typeof entry === 'object' ? entry.source : entry;
+}
diff --git a/packages/rollup/source/features/assets.ts b/packages/rollup/source/features/assets.ts
index 168831afa..ca86876cf 100644
--- a/packages/rollup/source/features/assets.ts
+++ b/packages/rollup/source/features/assets.ts
@@ -19,6 +19,7 @@ export interface AssetManifestOptions {
   key?: URLSearchParams;
   base: string;
   priority?: number;
+  inline?: Set<string>;
   moduleID?(details: {imported: string}): string;
 }
 
@@ -38,6 +39,7 @@ async function writeManifestForBundle(
     file,
     base,
     key,
+    inline,
     priority,
     moduleID: getModuleID = defaultModuleID,
   }: AssetManifestOptions,
@@ -68,7 +70,7 @@ async function writeManifestForBundle(
     let id = assetIdMap.get(file);
 
     if (id == null) {
-      assets.push(loadAsset(file, bundle[file]!));
+      assets.push(loadAsset(file, bundle[file]!, inline));
       id = assets.length - 1;
       assetIdMap.set(file, id);
     }
@@ -87,10 +89,20 @@ async function writeManifestForBundle(
   };
 
   for (const output of outputs) {
-    if (
-      output.type !== 'chunk' ||
-      (!output.isDynamicEntry && !output.isEntry)
-    ) {
+    if (output.type === 'asset') {
+      if (output.name && output.fileName.endsWith('.js')) {
+        manifest.modules[output.name] = createAssetsEntry([output.fileName], {
+          dependencyMap,
+          getAssetId,
+        });
+
+        manifest.entries[`./${output.name}`] = output.name;
+      }
+
+      continue;
+    }
+
+    if (!output.isDynamicEntry && !output.isEntry) {
       continue;
     }
 
@@ -111,9 +123,18 @@ async function writeManifestForBundle(
       manifest.entries[entry] = moduleID;
     }
 
+    const isCSS = moduleID.endsWith('.css');
+    const moduleFiles = [output.fileName, ...output.imports];
+
     manifest.modules[moduleID] = createAssetsEntry(
-      [...output.imports, output.fileName],
-      {dependencyMap, getAssetId},
+      // When an entrypoint is a CSS file, Rollup creates an unnecessary JavaScript file
+      // as the entrypoint of the module. We will exclude the JavaScript file, so only
+      // the CSS file is included in the final manifest.
+      isCSS ? moduleFiles.filter((file) => file.endsWith('.css')) : moduleFiles,
+      {
+        dependencyMap,
+        getAssetId,
+      },
     );
   }
 
@@ -128,17 +149,24 @@ const SRI_ALGORITHM = 'sha384';
 async function loadAsset(
   file: string,
   chunk: OutputChunk | OutputAsset,
+  inline?: Set<string>,
 ): Promise<AssetBuildAsset> {
   const asset: AssetBuildAsset = [file.endsWith('.css') ? 1 : 2, file];
 
-  try {
-    const hash = createHash(SRI_ALGORITHM)
-      .update('code' in chunk ? chunk.code : chunk.source)
-      .digest()
-      .toString('base64');
+  const source = 'code' in chunk ? chunk.code : (chunk.source as string);
 
-    asset[2] = `${SRI_ALGORITHM}-${hash}`;
-  } catch {}
+  if (inline?.has(chunk.name!)) {
+    asset[2] = source;
+  } else {
+    try {
+      const hash = createHash(SRI_ALGORITHM)
+        .update('code' in chunk ? chunk.code : chunk.source)
+        .digest()
+        .toString('base64');
+
+      asset[2] = `${SRI_ALGORITHM}-${hash}`;
+    } catch {}
+  }
 
   return asset;
 }
diff --git a/packages/rollup/source/features/system-js.ts b/packages/rollup/source/features/system-js.ts
index 876a69411..c1942f31c 100644
--- a/packages/rollup/source/features/system-js.ts
+++ b/packages/rollup/source/features/system-js.ts
@@ -9,29 +9,29 @@ import {multiline} from '../shared/strings';
 export function systemJS({minify = false} = {}) {
   return {
     name: '@quilted/system-js',
-    async renderChunk(code, chunk, options) {
-      if (options.format !== 'system' || !chunk.isEntry) return null;
 
+    async buildStart() {
       const require = createRequire(import.meta.url);
       const systemjs = minify
         ? require.resolve('systemjs/dist/s.min.js')
         : require.resolve('systemjs/dist/s.js');
 
-      // We write the systemjs loader to a dedicated file, and we make it the
-      // "first import" of the chunk so that it is the first file listed in
-      // the manifest.
-      const fileHandle = this.emitFile({
+      // We write the systemjs loader to a dedicated file
+      this.emitFile({
         type: 'asset',
-        name: 'loader.js',
-        source: (await readFile(systemjs, {encoding: 'utf8'})).replace(
-          // Remove the source map comment, if it is present, because we don’t upload the
-          // sourcemap for this file.
-          /\n?[/][/]# sourceMappingURL=s.*\.map\n?$/,
-          '',
-        ),
+        name: 'system.js',
+        source: (await readFile(systemjs, {encoding: 'utf8'}))
+          .replace(
+            // Remove the source map comment, if it is present, because we don’t upload the
+            // sourcemap for this file.
+            /\n?[/][/]# sourceMappingURL=s.*\.map\n?$/m,
+            '',
+          )
+          .trim(),
       });
-
-      chunk.imports.unshift(this.getFileName(fileHandle));
+    },
+    async renderChunk(code, chunk, options) {
+      if (options.format !== 'system' || !chunk.isEntry) return null;
 
       const newCode = new MagicString(code);