@quilted/create 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,110 @@
 # @quilted/create
 
+## 0.3.3
+
+### 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.
+
 ## 0.3.2
 
 ### Patch Changes

package/build/esm/_virtual/index7.mjs

@@ -1,3 +1,3 @@
-var dirGlob = {exports: {}};
+var utils = {};
 
-export { dirGlob as __module };
+export { utils as __exports };

package/build/esm/_virtual/index8.mjs

@@ -1,3 +1,3 @@
-var utils = {};
+var dirGlob = {exports: {}};
 
-export { utils as __exports };
+export { dirGlob as __module };

package/build/esm/node_modules/.pnpm/dir-glob@3.0.1/node_modules/dir-glob/index.mjs

@@ -1,4 +1,4 @@
-import { __module as dirGlob } from '../../../../../_virtual/index7.mjs';
+import { __module as dirGlob } from '../../../../../_virtual/index8.mjs';
 import path__default from 'node:path';
 import { __require as requirePathType } from '../../../path-type@4.0.0/node_modules/path-type/index.mjs';
 

package/build/esm/node_modules/.pnpm/fast-glob@3.3.3/node_modules/fast-glob/out/utils/index.mjs

@@ -1,4 +1,4 @@
-import { __exports as utils } from '../../../../../../../_virtual/index8.mjs';
+import { __exports as utils } from '../../../../../../../_virtual/index7.mjs';
 import { __require as requireArray } from './array.mjs';
 import { __require as requireErrno } from './errno.mjs';
 import { __require as requireFs } from './fs.mjs';

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/index.esnext

@@ -1,4 +1,4 @@
-import { __exports as out } from '../../../../../../../_virtual/index10.esnext';
+import { __exports as out } from '../../../../../../../_virtual/index11.esnext';
 import { __require as requireAsync } from './providers/async.esnext';
 import { __require as requireSync } from './providers/sync.esnext';
 import { __require as requireSettings } from './settings.esnext';

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/providers/async.esnext

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async3.esnext';
+import { __exports as async } from '../../../../../../../../_virtual/async4.esnext';
 
 var hasRequiredAsync;
 function requireAsync() {

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/providers/sync.esnext

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync3.esnext';
+import { __exports as sync } from '../../../../../../../../_virtual/sync4.esnext';
 
 var hasRequiredSync;
 function requireSync() {

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/settings.esnext

@@ -1,4 +1,4 @@
-import { __exports as settings } from '../../../../../../../_virtual/settings2.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings3.esnext';
 import { __require as requireFs } from './adapters/fs.esnext';
 
 var hasRequiredSettings;

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/index.esnext

@@ -1,4 +1,4 @@
-import { __exports as out } from '../../../../../../../_virtual/index11.esnext';
+import { __exports as out } from '../../../../../../../_virtual/index10.esnext';
 import { __require as requireAsync } from './providers/async.esnext';
 import { __require as requireStream } from './providers/stream.esnext';
 import { __require as requireSync } from './providers/sync.esnext';

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/providers/async.esnext

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async4.esnext';
+import { __exports as async } from '../../../../../../../../_virtual/async3.esnext';
 import { __require as requireAsync$1 } from '../readers/async.esnext';
 
 var hasRequiredAsync;

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/providers/sync.esnext

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync4.esnext';
+import { __exports as sync } from '../../../../../../../../_virtual/sync3.esnext';
 import { __require as requireSync$1 } from '../readers/sync.esnext';
 
 var hasRequiredSync;

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/settings.esnext

@@ -1,4 +1,4 @@
-import { __exports as settings } from '../../../../../../../_virtual/settings3.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.esnext';
 import path__default from 'node:path';
 import { __require as requireOut } from '../../../../../@nodelib_fs.scandir@2.1.5/node_modules/@nodelib/fs.scandir/out/index.esnext';
 

package/build/esnext/node_modules/.pnpm/fast-glob@3.3.3/node_modules/fast-glob/out/readers/stream.esnext

@@ -1,4 +1,4 @@
-import { __exports as stream } from '../../../../../../../_virtual/stream3.esnext';
+import { __exports as stream } from '../../../../../../../_virtual/stream2.esnext';
 import require$$0 from 'node:stream';
 import { __require as requireOut } from '../../../../../@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/index.esnext';
 import { __require as requireOut$1 } from '../../../../../@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/index.esnext';

package/build/esnext/node_modules/.pnpm/fast-glob@3.3.3/node_modules/fast-glob/out/utils/stream.esnext

@@ -1,4 +1,4 @@
-import { __exports as stream } from '../../../../../../../_virtual/stream2.esnext';
+import { __exports as stream } from '../../../../../../../_virtual/stream3.esnext';
 import { __require as requireMerge2 } from '../../../../../merge2@1.4.1/node_modules/merge2/index.esnext';
 
 var hasRequiredStream;

package/build/esnext/node_modules/.pnpm/prompts@2.4.2/node_modules/prompts/dist/prompts.esnext

@@ -1,4 +1,4 @@
-import { __exports as prompts } from '../../../../../../_virtual/prompts.esnext';
+import { __exports as prompts } from '../../../../../../_virtual/prompts2.esnext';
 import { __require as requireElements } from './elements/index.esnext';
 
 var hasRequiredPrompts;

package/build/esnext/node_modules/.pnpm/prompts@2.4.2/node_modules/prompts/lib/prompts.esnext

@@ -1,4 +1,4 @@
-import { __exports as prompts } from '../../../../../../_virtual/prompts2.esnext';
+import { __exports as prompts } from '../../../../../../_virtual/prompts.esnext';
 import { __require as requireElements } from './elements/index.esnext';
 
 var hasRequiredPrompts;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quilted/create",
   "type": "module",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/app-basic/browser.tsx

@@ -1,45 +1,26 @@
 import './browser.css';
 
-import type {ComponentChild} from 'preact';
-import {hydrate} from '@quilted/quilt/browser';
+import {BrowserApp} from '@quilted/quilt/browser';
 
 import {BrowserAppContext} from '~/context/browser.ts';
 import {App} from './App.tsx';
 
-class BrowserApp {
-  /**
-   * The app’s globally-available context.
-   */
-  readonly context: BrowserAppContext;
-
-  /**
-   * The app’s root JSX element, seeded with the necessary app context.
-   */
-  readonly rendered: ComponentChild;
-
-  constructor() {
-    this.context = new BrowserAppContext();
-    this.rendered = <App context={this.context} />;
-
-    // Makes key parts of the app available in the browser console.
-    //
-    // @example
-    // ```js
-    // // Log the current URL
-    // console.log(globalThis.app.context.router.currentRequest.url);
-    // ```
-    Object.defineProperty(globalThis, 'app', {
-      value: this,
-      enumerable: false,
-      configurable: true,
-      writable: true,
-    });
-  }
-
-  hydrate() {
-    hydrate(this.rendered);
-  }
-}
-
-const app = new BrowserApp();
-app.hydrate();
+const context = new BrowserAppContext();
+
+const app = new BrowserApp(<App context={context} />, {context});
+
+// Makes key parts of the app available in the browser console.
+//
+// @example
+// ```js
+// // Log the current URL
+// console.log(globalThis.app.context.router.currentRequest.url);
+// ```
+Object.defineProperty(globalThis, 'app', {
+  value: app,
+  enumerable: false,
+  configurable: true,
+  writable: true,
+});
+
+await app.hydrate();

package/templates/app-graphql/browser.tsx

@@ -1,46 +1,27 @@
 import './browser.css';
 
-import type {ComponentChild} from 'preact';
-import {hydrate} from '@quilted/quilt/browser';
+import {BrowserApp} from '@quilted/quilt/browser';
 
 import {BrowserAppContext} from '~/context/browser.ts';
 
 import {App} from './App.tsx';
 
-class BrowserApp {
-  /**
-   * The app's globally-available context.
-   */
-  readonly context: BrowserAppContext;
-
-  /**
-   * The app's root JSX element, seeded with the necessary app context.
-   */
-  readonly rendered: ComponentChild;
-
-  constructor() {
-    this.context = new BrowserAppContext();
-    this.rendered = <App context={this.context} />;
-
-    // Makes key parts of the app available in the browser console.
-    //
-    // @example
-    // ```js
-    // // Log the current URL
-    // console.log(globalThis.app.context.navigation.router.currentRequest.url);
-    // ```
-    Object.defineProperty(globalThis, 'app', {
-      value: this,
-      enumerable: false,
-      configurable: true,
-      writable: true,
-    });
-  }
-
-  hydrate() {
-    hydrate(this.rendered);
-  }
-}
-
-const app = new BrowserApp();
-app.hydrate();
+const context = new BrowserAppContext();
+
+const app = new BrowserApp(<App context={context} />, {context});
+
+// Makes key parts of the app available in the browser console.
+//
+// @example
+// ```js
+// // Log the current URL
+// console.log(globalThis.app.context.navigation.router.currentRequest.url);
+// ```
+Object.defineProperty(globalThis, 'app', {
+  value: app,
+  enumerable: false,
+  configurable: true,
+  writable: true,
+});
+
+await app.hydrate();

package/templates/app-trpc/browser.tsx

@@ -1,46 +1,27 @@
 import './browser.css';
 
-import type {ComponentChild} from 'preact';
-import {hydrate} from '@quilted/quilt/browser';
+import {BrowserApp} from '@quilted/quilt/browser';
 
 import {BrowserAppContext} from '~/context/browser.ts';
 
 import {App} from './App.tsx';
 
-class BrowserApp {
-  /**
-   * The app's globally-available context.
-   */
-  readonly context: BrowserAppContext;
-
-  /**
-   * The app's root JSX element, seeded with the necessary app context.
-   */
-  readonly rendered: ComponentChild;
-
-  constructor() {
-    this.context = new BrowserAppContext();
-    this.rendered = <App context={this.context} />;
-
-    // Makes key parts of the app available in the browser console.
-    //
-    // @example
-    // ```js
-    // // Log the current URL
-    // console.log(globalThis.app.context.navigation.router.currentRequest.url);
-    // ```
-    Object.defineProperty(globalThis, 'app', {
-      value: this,
-      enumerable: false,
-      configurable: true,
-      writable: true,
-    });
-  }
-
-  hydrate() {
-    hydrate(this.rendered);
-  }
-}
-
-const app = new BrowserApp();
-app.hydrate();
+const context = new BrowserAppContext();
+
+const app = new BrowserApp(<App context={context} />, {context});
+
+// Makes key parts of the app available in the browser console.
+//
+// @example
+// ```js
+// // Log the current URL
+// console.log(globalThis.app.context.navigation.router.currentRequest.url);
+// ```
+Object.defineProperty(globalThis, 'app', {
+  value: app,
+  enumerable: false,
+  configurable: true,
+  writable: true,
+});
+
+await app.hydrate();