@quilted/rollup 0.4.4 → 0.4.6

package/CHANGELOG.md

@@ -1,5 +1,119 @@
 # @quilted/rollup
 
+## 0.4.6
+
+### Patch Changes
+
+- [#890](https://github.com/lemonmade/quilt/pull/890) [`b0f2334`](https://github.com/lemonmade/quilt/commit/b0f23340945280c951998bf77b3be8b8df13338c) Thanks [@lemonmade](https://github.com/lemonmade)! - Redesign asset loading APIs for better performance and clearer structure.
+
+  ## Breaking changes
+
+  ### `@quilted/assets`: `BrowserAssetsEntry` redesigned
+
+  The `BrowserAssetsEntry` type has been completely restructured. The previous flat `scripts` and `styles` arrays have been replaced with structured `script` and `style` objects that separate the entry asset from its dependencies:
+
+  ```ts
+  // Before
+  interface BrowserAssetsEntry {
+    scripts: Asset[];
+    styles: Asset[];
+  }
+
+  // After
+  interface BrowserAssetsEntry {
+    script?: {
+      asset: Asset;
+      syncDependencies: readonly Asset[];
+      asyncDependencies: readonly Asset[];
+    };
+    style?: {
+      asset: Asset;
+      syncDependencies: readonly Asset[];
+      asyncDependencies: readonly Asset[];
+    };
+  }
+  ```
+
+  This separation enables the renderer to treat the entry script, its preloadable sync dependencies, and its async dependencies differently in the HTML output.
+
+  ### `@quilted/assets`: `BrowserAssets.modules()` return type changed
+
+  `modules()` now returns `readonly BrowserAssetsEntry[]` (one entry per module ID) instead of a single merged `BrowserAssetsEntry`:
+
+  ```ts
+  // Before
+  modules(modules: Iterable<...>, options?): BrowserAssetsEntry;
+
+  // After
+  modules(modules: Iterable<string>, options?): readonly BrowserAssetsEntry[];
+  ```
+
+  ### `@quilted/assets`: `BrowserAssetModuleSelector` removed
+
+  The `BrowserAssetModuleSelector` interface and the `modules` field on `BrowserAssetSelector` have been removed. If you want to get the asset details for modules in addition to the entrypoints, use `BrowserAssets.modules()` instead.
+
+  ### `@quilted/assets`: `AssetBuildManifest` module entry format changed
+
+  `AssetBuildManifest.modules` values changed from `number[]` to the new `AssetBuildModuleEntry` tuple type. The tuple uses positional slots for each asset category and is serialized in JSON as an object with numeric string keys (omitting empty positions):
+
+  ```ts
+  type AssetBuildModuleEntry = [
+    script?: number, // [0] entry JS chunk
+    style?: number, // [1] entry CSS file
+    scriptSync?: number[], // [2] sync JS dependency indices
+    styleSync?: number[], // [3] CSS from sync JS dependencies
+    scriptAsync?: number[], // [4] dynamic JS dependency indices
+    styleAsync?: number[], // [5] CSS from dynamic JS dependencies
+  ];
+  ```
+
+  ### `@quilted/browser`: `BrowserResponseAssets.get()` return type changed
+
+  `get()` now returns `string[]` (module IDs) instead of `BrowserAssetModuleSelector[]`.
+
+  ## New features
+
+  ### `@quilted/preact-browser`: `BrowserApp` class
+
+  A new `BrowserApp` class simplifies constructing and running a browser app. It handles waiting for the `#app` DOM element via `MutationObserver`, which is necessary now that the entry script runs with the `async` attribute:
+
+  ```ts
+  import {BrowserApp} from '@quilted/quilt/browser';
+  import {BrowserAppContext} from '~/context/browser.ts';
+  import {App} from './App.tsx';
+
+  const context = new BrowserAppContext();
+  const app = new BrowserApp(<App context={context} />, {context});
+  await app.hydrate();
+  ```
+
+  ## Render behavior changes
+
+  ### Entry script rendered as `async` module
+
+  The browser entry script is now rendered as `<script type="module" async>` instead of a blocking `<script type="module">`. This means the script no longer blocks HTML parsing, and does not wait for DOMContentLoaded. This change is meant to allow streaming HTML responses to begin executing JavaScript earlier.
+
+  ### Sync dependencies rendered as `modulepreload` links
+
+  Sync JS dependencies (previously rendered as additional `<script type="module">` tags) are now rendered as `<link rel="modulepreload">` hints. This tells the browser to fetch them eagerly without executing them, since the entry script will import them when it runs.
+
+  ### Stylesheets rendered after all script references
+
+  Entry and async stylesheets are now emitted from the `<HTMLTemplate.Assets async />` placeholder, after all script and modulepreload tags. This ensures the stylesheet `<link>` elements appear after all JS references in the HTML.
+
+  ### Asset deduplication across streamed chunks
+
+  Asset deduplication (preventing the same `src`/`href` from appearing more than once) now works across all streamed HTML chunks within a single response, not just within a single placeholder.
+
+- Updated dependencies [[`b0f2334`](https://github.com/lemonmade/quilt/commit/b0f23340945280c951998bf77b3be8b8df13338c)]:
+  - @quilted/assets@0.1.10
+
+## 0.4.5
+
+### Patch Changes
+
+- [`3c4a5ac`](https://github.com/lemonmade/quilt/commit/3c4a5ac934e1648be6843f8cd880a53f7c29aeb4) Thanks [@lemonmade](https://github.com/lemonmade)! - Improve asset output for Cloudflare plugin
+
 ## 0.4.4
 
 ### Patch Changes

package/build/esm/app.mjs

@@ -88,6 +88,7 @@ async function quiltApp({
 async function quiltAppBrowser(options = {}) {
   const { root = process.cwd(), assets, runtime } = options;
   const project = Project.load(root);
+  const baseURL = assets?.baseURL ?? "/assets/";
   const [plugins, browserGroup] = await Promise.all([
     quiltAppBrowserPlugins(options),
     getBrowserGroupTargetDetails(assets?.targets, {
@@ -99,13 +100,12 @@ async function quiltAppBrowser(options = {}) {
     targetsSupportModules(browserGroup.browsers),
     rollupGenerateOptionsForBrowsers(browserGroup.browsers)
   ]);
+  const outputDirectory = assets?.directory ? assets.directory : runtime?.assets?.directory ? typeof runtime.assets.directory === "function" ? runtime.assets.directory({ baseURL }) : runtime.assets.directory : `build/assets`;
   const rollupOptions = {
     plugins,
     output: {
       format: isESM ? "esm" : "systemjs",
-      dir: project.resolve(
-        assets?.directory ?? runtime?.assets?.directory ?? `build/assets`
-      ),
+      dir: project.resolve(outputDirectory),
       entryFileNames: `[name]${targetFilenamePart}.[hash].js`,
       assetFileNames: `[name]${targetFilenamePart}.[hash].[ext]`,
       chunkFileNames: `[name]${targetFilenamePart}.[hash].js`,
@@ -118,7 +118,9 @@ async function quiltAppBrowser(options = {}) {
     preserveEntrySignatures: false
   };
   if (runtime?.browser?.rollup) {
-    rollupOptions.plugins.push(runtime.browser.rollup(rollupOptions));
+    rollupOptions.plugins.push(
+      runtime.browser.rollup(rollupOptions, { assets: { baseURL, ...assets } })
+    );
   }
   return rollupOptions;
 }

package/build/esm/features/assets.mjs

@@ -31,6 +31,12 @@ async function writeManifestForBundle(bundle, {
     if (output.type !== "chunk") continue;
     dependencyMap.set(output.fileName, output.imports);
   }
+  const facadeToChunk = /* @__PURE__ */ new Map();
+  for (const output of outputs) {
+    if (output.type === "chunk" && output.facadeModuleId) {
+      facadeToChunk.set(output.facadeModuleId, output.fileName);
+    }
+  }
   const assets = [];
   const assetIdMap = /* @__PURE__ */ new Map();
   function getAssetId(file2) {
@@ -54,9 +60,8 @@ async function writeManifestForBundle(bundle, {
   for (const output of outputs) {
     if (output.type === "asset") {
       if (output.name && output.fileName.endsWith(".js")) {
-        manifest.modules[output.name] = createAssetsEntry([output.fileName], {
-          dependencyMap,
-          getAssetId
+        manifest.modules[output.name] = makeEntry({
+          script: getAssetId(output.fileName)
         });
         manifest.entries[`./${output.name}`] = output.name;
       }
@@ -77,17 +82,23 @@ async function writeManifestForBundle(bundle, {
       manifest.entries[entry] = moduleID;
     }
     const isCSS = moduleID.endsWith(".css");
-    const moduleFiles = [output.fileName, ...output.imports];
-    manifest.modules[moduleID] = createAssetsEntry(
-      // 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((file2) => file2.endsWith(".css")) : moduleFiles,
-      {
-        dependencyMap,
-        getAssetId
-      }
-    );
+    if (isCSS) {
+      const cssFiles = [output.fileName, ...output.imports].filter(
+        (f) => f.endsWith(".css")
+      );
+      manifest.modules[moduleID] = makeEntry({
+        style: cssFiles[0] != null ? getAssetId(cssFiles[0]) : void 0,
+        styleSync: cssFiles.length > 1 ? cssFiles.slice(1).map(getAssetId) : void 0
+      });
+    } else {
+      const asyncFileNames = (output.dynamicImports ?? []).map((mid) => facadeToChunk.get(mid)).filter((f) => f != null);
+      manifest.modules[moduleID] = buildModuleEntry(
+        output.fileName,
+        output.imports,
+        asyncFileNames,
+        { dependencyMap, getAssetId }
+      );
+    }
   }
   manifest.assets = await Promise.all(assets);
   await fs.mkdir(path.dirname(file), { recursive: true });
@@ -141,26 +152,61 @@ async function normalizeInlineSource({
 function defaultModuleID({ imported }) {
   return imported.startsWith("/") ? path.relative(process.cwd(), imported) : imported.startsWith("\0") ? imported.replace("\0", "") : imported;
 }
-function createAssetsEntry(files, {
+function makeEntry({
+  script,
+  style,
+  scriptSync,
+  styleSync,
+  scriptAsync,
+  styleAsync
+}) {
+  const entry = {};
+  if (script != null) entry[0] = script;
+  if (style != null) entry[1] = style;
+  if (scriptSync?.length) entry[2] = scriptSync;
+  if (styleSync?.length) entry[3] = styleSync;
+  if (scriptAsync?.length) entry[4] = scriptAsync;
+  if (styleAsync?.length) entry[5] = styleAsync;
+  return entry;
+}
+function buildModuleEntry(entryFileName, syncImports, asyncFileNames, {
   dependencyMap,
   getAssetId
 }) {
-  const assets = [];
-  const allFiles = /* @__PURE__ */ new Set();
-  const addFile = (file) => {
-    if (allFiles.has(file)) return;
-    allFiles.add(file);
-    for (const dependency of dependencyMap.get(file) ?? []) {
-      addFile(dependency);
+  const syncJsFiles = /* @__PURE__ */ new Set();
+  const entryStyleFiles = [];
+  const syncStyleFiles = /* @__PURE__ */ new Set();
+  for (const file of syncImports) {
+    if (file.endsWith(".css")) {
+      entryStyleFiles.push(file);
+    } else {
+      visitJsDep(file, syncJsFiles, syncStyleFiles, dependencyMap);
     }
-  };
-  for (const file of files) {
-    addFile(file);
   }
-  for (const file of allFiles) {
-    assets.push(getAssetId(file));
+  const asyncStyleFiles = /* @__PURE__ */ new Set();
+  const visitedAsync = /* @__PURE__ */ new Set();
+  for (const asyncFileName of asyncFileNames) {
+    visitJsDep(asyncFileName, visitedAsync, asyncStyleFiles, dependencyMap);
+  }
+  return makeEntry({
+    script: getAssetId(entryFileName),
+    style: entryStyleFiles[0] != null ? getAssetId(entryStyleFiles[0]) : void 0,
+    scriptSync: syncJsFiles.size > 0 ? [...syncJsFiles].map(getAssetId) : void 0,
+    styleSync: syncStyleFiles.size > 0 ? [...syncStyleFiles].map(getAssetId) : void 0,
+    scriptAsync: asyncFileNames.length > 0 ? asyncFileNames.map(getAssetId) : void 0,
+    styleAsync: asyncStyleFiles.size > 0 ? [...asyncStyleFiles].map(getAssetId) : void 0
+  });
+}
+function visitJsDep(file, visitedJs, styleFiles, dependencyMap) {
+  if (visitedJs.has(file)) return;
+  visitedJs.add(file);
+  for (const dep of dependencyMap.get(file) ?? []) {
+    if (dep.endsWith(".css")) {
+      styleFiles.add(dep);
+    } else {
+      visitJsDep(dep, visitedJs, styleFiles, dependencyMap);
+    }
   }
-  return assets;
 }
 const QUERY_PATTERN = /\?.*$/s;
 const HASH_PATTERN = /#.*$/s;