@async/framework 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.3.0 - 2026-06-17
+
+- Added a shared registry store behind `Async`, app runtimes, and concrete
+  registries so apps can inspect signals, handlers, server ids, routes,
+  partials, components, and split cache state from one place.
+- Added configurable HTML attribute prefixes, with `async:*`, `signal:*`, and
+  `on:*` as the defaults plus explicit support for `data-async-*`,
+  `data-signal-*`, and `data-on-*`.
+- Declared the UNPKG package entry explicitly so the package root can be used as
+  a no-build browser ESM CDN import.
+- Documented the UNPKG import-map setup for importing `@async/framework` by
+  package name in no-build browser apps.
+
 ## 0.2.2 - 2026-06-17
 
 - Fixed release doctor validation to accept the pipeline-generated GitHub

package/README.md

@@ -10,9 +10,9 @@ pnpm add @async/framework
 ```
 
 ```html
-<main data-async-container>
+<main async:container>
   <button type="button" on:click="decrement">-</button>
-  <strong data-async-text="count"></strong>
+  <strong signal:text="count"></strong>
   <button type="button" on:click="increment">+</button>
 </main>
 <script type="module" src="./main.js"></script>
@@ -69,12 +69,78 @@ pnpm add @async/framework
 The package is ESM-only and supports Node.js 24 and newer for tests, examples,
 and package lifecycle tooling. Browser consumers import ESM directly.
 
+## CDN
+
+The package is browser-ready ESM and can be loaded from UNPKG without a build
+step. Use `@latest` for quick prototypes, and pin an exact version in
+production:
+
+```html
+<main async:container>
+  <button type="button" on:click="increment">+</button>
+  <strong signal:text="count"></strong>
+</main>
+
+<script type="module">
+  import {
+    Async,
+    createSignal
+  } from "https://unpkg.com/@async/framework@latest";
+
+  Async.use({
+    signal: {
+      count: createSignal(0)
+    },
+    handler: {
+      increment() {
+        this.signals.update("count", (count) => count + 1);
+      }
+    }
+  });
+
+  Async.start({ root: document });
+</script>
+```
+
+You can also use an import map so app code imports `@async/framework` by name:
+
+```html
+<script type="importmap">
+{
+  "imports": {
+    "@async/framework": "https://unpkg.com/@async/framework@latest"
+  }
+}
+</script>
+
+<script type="module">
+  import {
+    Async,
+    createSignal
+  } from "@async/framework";
+
+  Async.use({
+    signal: {
+      count: createSignal(0)
+    },
+    handler: {
+      increment() {
+        this.signals.update("count", (count) => count + 1);
+      }
+    }
+  });
+
+  Async.start({ root: document });
+</script>
+```
+
 ## Core API
 
 ```js
 import {
   AsyncLoader,
   Async,
+  attributeName,
   asyncSignal,
   createApp,
   createCacheRegistry,
@@ -84,11 +150,13 @@ import {
   createSignal,
   createHandlerRegistry,
   createPartialRegistry,
+  createRegistryStore,
   createRouteRegistry,
   createRouter,
   createServerProxy,
   createServerRegistry,
   createSignalRegistry,
+  defineAttributeConfig,
   defineApp,
   defineCache,
   defineComponent,
@@ -170,6 +238,50 @@ Naming rules:
 Singular registry keys are canonical: `signal`, `handler`, `server`,
 `partial`, `route`, `component`, and nested `cache.browser` / `cache.server`.
 
+### Registry Inspection
+
+`Async.registry` is the global inspection surface for registered app pieces.
+Every runtime and concrete registry also points at the same backing store:
+
+```js
+Async.registry.keys("signal");
+Async.registry.entries("route");
+Async.registry.snapshot();
+
+const runtime = Async.start({ root: document });
+
+runtime.registry.keys("handler");
+runtime.signals.registry === runtime.registry;
+runtime.browser.cache.registry === runtime.registry;
+```
+
+Supported inspection types:
+
+```txt
+signal
+handler
+server
+partial
+route
+component
+cache.browser
+cache.server
+cache.browser.entries
+cache.server.entries
+```
+
+Browser runtime inspection exposes server ids as descriptors, not executable
+server functions, and does not expose server cache contents:
+
+```js
+runtime.registry.keys("server");
+runtime.registry.get("server", "products.get");
+// { id: "products.get", kind: "server" }
+
+runtime.registry.snapshot().entries.server;
+// {}
+```
+
 ### Signals
 
 ```js
@@ -249,33 +361,50 @@ AsyncLoader scans regular HTML attributes:
 
 | Attribute | Behavior |
 | --- | --- |
-| `data-async-container` | Marks a scannable app root |
+| `async:container` | Marks a scannable app root |
 | `on:click="selectProduct"` | Delegated command event |
 | `on:submit="preventDefault; save"` | Sequential command chain |
 | `on:click="server.cart.add(productId)"` | Server command with signal args |
-| `data-async-text="product.title"` | Text binding |
-| `data-async-value="productId"` | Form value binding with writeback |
-| `data-async-attr:disabled="product.$loading"` | Attribute binding |
-| `data-async-class:selected="selected"` | Class toggle |
-| `data-async-boundary="product"` | Async or streamed replacement boundary |
-| `data-async-loading="product"` | Boundary loading template |
-| `data-async-ready="product"` | Boundary ready template |
-| `data-async-error="product"` | Boundary error template |
+| `signal:text="product.title"` | Text binding |
+| `signal:value="productId"` | Form value binding with writeback |
+| `signal:attr:disabled="product.$loading"` | Attribute binding |
+| `signal:class:selected="selected"` | Class toggle |
+| `async:boundary="product"` | Async or streamed replacement boundary |
+| `async:loading="product"` | Boundary loading template |
+| `async:ready="product"` | Boundary ready template |
+| `async:error="product"` | Boundary error template |
 
 ```html
-<section data-async-boundary="product">
-  <template data-async-loading="product">
+<section async:boundary="product">
+  <template async:loading="product">
     <p>Loading...</p>
   </template>
-  <template data-async-ready="product">
-    <h1 data-async-text="product.title"></h1>
+  <template async:ready="product">
+    <h1 signal:text="product.title"></h1>
   </template>
-  <template data-async-error="product">
-    <p data-async-text="product.$error.message"></p>
+  <template async:error="product">
+    <p signal:text="product.$error.message"></p>
   </template>
 </section>
 ```
 
+The default prefixes are `async:`, `signal:`, and `on:`. You can switch to
+data attributes when a host needs that shape:
+
+```js
+Async.start({
+  root: document,
+  attributes: {
+    async: "data-async-",
+    signal: "data-signal-",
+    on: "data-on-"
+  }
+});
+```
+
+That maps to `data-async-container`, `data-on-click="save"`, and
+`data-signal-text="product.title"`.
+
 ### Command Events
 
 `on:*` works with any native DOM event name. `on:mount` and `on:visible` are
@@ -417,13 +546,13 @@ Router modes:
 CSR startup can use an empty route boundary:
 
 ```html
-<main data-async-container>
+<main async:container>
   <nav>
     <a href="/">Home</a>
     <a href="/products/sku-1">Product</a>
   </nav>
 
-  <section data-async-boundary="route"></section>
+  <section async:boundary="route"></section>
 </main>
 ```
 
@@ -520,10 +649,10 @@ const response = await serverRuntime.render("/products/123");
 The returned HTML includes a route boundary plus a JSON snapshot:
 
 ```html
-<section data-async-boundary="route">
+<section async:boundary="route">
   <!-- server-rendered route partial -->
 </section>
-<script type="application/json" data-async-snapshot>{}</script>
+<script type="application/json" async:snapshot>{}</script>
 ```
 
 Browser activation scans the existing HTML and attaches events. It does not
@@ -558,8 +687,8 @@ const Toggle = defineComponent(function Toggle() {
     <button
       type="button"
       on:click="${toggle}"
-      data-async-class:selected="${selected.id}"
-      data-async-attr:aria-pressed="${selected.id}"
+      signal:class:selected="${selected.id}"
+      signal:attr:aria-pressed="${selected.id}"
     >
       Toggle
     </button>
@@ -597,7 +726,7 @@ loader.swap(
   "product",
   `
     <article>
-      <h1 data-async-text="product.title"></h1>
+      <h1 signal:text="product.title"></h1>
       <button type="button" on:click="selectProduct">Select</button>
     </article>
   `

package/examples/cache/index.html

@@ -6,10 +6,10 @@
     <title>AsyncLoader Cache</title>
   </head>
   <body>
-    <main data-async-container>
+    <main async:container>
       <button type="button" on:click="cacheDemo.loadProduct">Load product</button>
-      <p>Product: <strong data-async-text="cacheDemo.title"></strong></p>
-      <p>Server calls: <strong data-async-text="cacheDemo.calls"></strong></p>
+      <p>Product: <strong signal:text="cacheDemo.title"></strong></p>
+      <p>Server calls: <strong signal:text="cacheDemo.calls"></strong></p>
     </main>
     <script type="module" src="./main.js"></script>
   </body>

package/examples/components/main.js

@@ -14,8 +14,8 @@ const Toggle = defineComponent(function Toggle() {
     <button
       type="button"
       on:click="${toggle}"
-      data-async-class:selected="${selected.id}"
-      data-async-attr:aria-pressed="${selected.id}"
+      signal:class:selected="${selected.id}"
+      signal:attr:aria-pressed="${selected.id}"
     >
       Toggle
     </button>

package/examples/counter/index.html

@@ -4,9 +4,9 @@
     <meta charset="utf-8">
     <title>AsyncLoader Counter</title>
   </head>
-  <body data-async-container>
+  <body async:container>
     <main>
-      <p>Count: <strong data-async-text="counter.count"></strong></p>
+      <p>Count: <strong signal:text="counter.count"></strong></p>
       <button type="button" on:click="counter.decrement">-</button>
       <button type="button" on:click="counter.increment">+</button>
     </main>

package/examples/partials/index.html

@@ -6,9 +6,9 @@
     <title>AsyncLoader Partials</title>
   </head>
   <body>
-    <main data-async-container>
+    <main async:container>
       <button type="button" on:click="partialsDemo.loadProduct">Load product</button>
-      <section data-async-boundary="product"></section>
+      <section async:boundary="product"></section>
     </main>
     <script type="module" src="./main.js"></script>
   </body>

package/examples/product/index.html

@@ -4,26 +4,26 @@
     <meta charset="utf-8">
     <title>AsyncLoader Product</title>
   </head>
-  <body data-async-container>
+  <body async:container>
     <main>
       <label>
         Product
-        <select data-async-value="productId">
+        <select signal:value="productId">
           <option value="sku-1">Mechanical Keyboard</option>
           <option value="sku-2">Studio Headphones</option>
         </select>
       </label>
 
-      <section data-async-boundary="product">
-        <template data-async-loading="product">
+      <section async:boundary="product">
+        <template async:loading="product">
           <p>Loading product...</p>
         </template>
-        <template data-async-ready="product">
-          <h1 data-async-text="product.title"></h1>
-          <p data-async-text="product.description"></p>
+        <template async:ready="product">
+          <h1 signal:text="product.title"></h1>
+          <p signal:text="product.description"></p>
         </template>
-        <template data-async-error="product">
-          <p data-async-text="product.$error.message"></p>
+        <template async:error="product">
+          <p signal:text="product.$error.message"></p>
         </template>
       </section>
     </main>

package/examples/router/index.html

@@ -6,12 +6,12 @@
     <title>AsyncLoader CSR Router</title>
   </head>
   <body>
-    <main data-async-container>
+    <main async:container>
       <nav>
         <a href="/">Home</a>
         <a href="/products/sku-1">Product</a>
       </nav>
-      <section data-async-boundary="route"></section>
+      <section async:boundary="route"></section>
     </main>
     <script type="module" src="./main.js"></script>
   </body>

package/examples/router/main.js

@@ -26,14 +26,14 @@ Async.use({
     "routerDemo.home"() {
       return html`
         <h1>Home</h1>
-        <p>Cart: <strong data-async-text="routerDemo.cartCount"></strong></p>
+        <p>Cart: <strong signal:text="routerDemo.cartCount"></strong></p>
       `;
     },
     "routerDemo.product.page"({ id }) {
       return html`
         <article>
           <h1>Product ${id}</h1>
-          <p>Cart: <strong data-async-text="routerDemo.cartCount"></strong></p>
+          <p>Cart: <strong signal:text="routerDemo.cartCount"></strong></p>
           <button type="button" on:click="server.routerDemo.cart.add(routerDemo.productId)">Add</button>
         </article>
       `;

package/examples/server-call/index.html

@@ -6,7 +6,7 @@
     <title>AsyncLoader Server Call</title>
   </head>
   <body>
-    <main data-async-container>
+    <main async:container>
       <form on:submit="preventDefault; server.serverCall.products.save(serverCall.productId, $form)">
         <label>
           Title
@@ -14,7 +14,7 @@
         </label>
         <button type="submit">Save</button>
       </form>
-      <p>Saved: <strong data-async-text="serverCall.savedTitle"></strong></p>
+      <p>Saved: <strong signal:text="serverCall.savedTitle"></strong></p>
     </main>
     <script type="module" src="./main.js"></script>
   </body>

package/examples/ssr/index.html

@@ -6,7 +6,7 @@
     <title>AsyncLoader SSR Activation</title>
   </head>
   <body>
-    <main id="app" data-async-container></main>
+    <main id="app" async:container></main>
     <script type="module" src="./main.js"></script>
   </body>
 </html>

package/examples/ssr/main.js

@@ -56,7 +56,7 @@ serverApp.use({
           <article>
             <h1>${product.title}</h1>
             <p>${product.id}</p>
-            <button type="button" on:click="ssrDemo.selectProduct" data-async-class:selected="ssrDemo.selected">
+            <button type="button" on:click="ssrDemo.selectProduct" signal:class:selected="ssrDemo.selected">
               Select
             </button>
           </article>
@@ -80,7 +80,7 @@ serverRuntime.destroy();
 
 document.querySelector("#app").innerHTML = response.html;
 
-const snapshot = JSON.parse(document.querySelector("[data-async-snapshot]").textContent);
+const snapshot = JSON.parse(document.querySelector("[async\\:snapshot]").textContent);
 const browserApp = defineApp(sharedDefinition());
 createApp(browserApp, {
   root: document,

package/examples/streaming/index.html

@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <title>AsyncLoader Streaming</title>
   </head>
-  <body data-async-container>
+  <body async:container>
     <main>
       <button type="button" on:click="streamingDemo.streamProduct">Stream product</button>
-      <section data-async-boundary="product">
+      <section async:boundary="product">
         <p>Waiting for streamed HTML...</p>
       </section>
     </main>

package/examples/streaming/main.js

@@ -13,8 +13,8 @@ Async.use({
         "product",
         `
           <article>
-            <h1 data-async-text="streamingDemo.title"></h1>
-            <button type="button" on:click="streamingDemo.select" data-async-class:selected="streamingDemo.selected">
+            <h1 signal:text="streamingDemo.title"></h1>
+            <button type="button" on:click="streamingDemo.select" signal:class:selected="streamingDemo.selected">
               Select
             </button>
           </article>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@async/framework",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "No-build AsyncLoader app runtime with signals, command events, server calls, route partials, cache split, SSR activation, and streaming boundaries.",
   "type": "module",
   "packageManager": "pnpm@11.1.0",
@@ -28,8 +28,15 @@
     "web-framework"
   ],
   "license": "MIT",
+  "unpkg": "./src/index.js",
   "exports": {
-    ".": "./src/index.js"
+    ".": {
+      "unpkg": "./src/index.js",
+      "browser": "./src/index.js",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "CHANGELOG.md",