npm - @async/framework - Versions diffs - 0.10.2 → 0.11.0 - Mend

@async/framework 0.10.2 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/CHANGELOG.md +20 -0
package/README.md +23 -7
package/browser.d.ts +4 -7
package/browser.js +17 -66
package/browser.min.js +1 -1
package/browser.ts +17 -66
package/browser.umd.js +17 -66
package/browser.umd.min.js +1 -1
package/{server.d.ts → framework.d.ts} +4 -7
package/framework.ts +5946 -0
package/package.json +25 -17
package/server.js +5945 -0
package/examples/cache/index.html +0 -16
package/examples/cache/main.js +0 -47
package/examples/components/index.html +0 -11
package/examples/components/main.js +0 -26
package/examples/counter/index.html +0 -15
package/examples/counter/main.js +0 -17
package/examples/partials/index.html +0 -15
package/examples/partials/main.js +0 -43
package/examples/product/index.html +0 -32
package/examples/product/main.js +0 -24
package/examples/router/index.html +0 -18
package/examples/router/main.js +0 -52
package/examples/server-call/index.html +0 -21
package/examples/server-call/main.js +0 -22
package/examples/ssr/index.html +0 -12
package/examples/ssr/main.js +0 -89
package/examples/streaming/index.html +0 -16
package/examples/streaming/main.js +0 -30
package/src/app.js +0 -802
package/src/async-signal.js +0 -277
package/src/attributes.js +0 -52
package/src/boundary-receiver.js +0 -302
package/src/browser.js +0 -18
package/src/cache.js +0 -193
package/src/component.js +0 -373
package/src/delay.js +0 -30
package/src/elements.js +0 -63
package/src/handlers.js +0 -219
package/src/html.js +0 -158
package/src/index.js +0 -20
package/src/lazy-registry.js +0 -218
package/src/loader.js +0 -772
package/src/partials.js +0 -133
package/src/registry-store.js +0 -267
package/src/request-context.js +0 -40
package/src/router.js +0 -617
package/src/scheduler.js +0 -300
package/src/server-entry.js +0 -20
package/src/server-registry.js +0 -97
package/src/server.js +0 -362
package/src/signals.js +0 -592

package/examples/cache/index.html DELETED Viewed

@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Async Loader Cache</title>
-  </head>
-  <body>
-    <main async:container>
-      <button type="button" on:click="cacheDemo.loadProduct">Load product</button>
-      <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>
-</html>

package/examples/cache/main.js DELETED Viewed

@@ -1,47 +0,0 @@
-import {
-  Async,
-  createSignal,
-  defineCache
-} from "../../src/index.js";
-Async.use({
-  signal: {
-    cacheDemo: createSignal({
-      productId: "sku-1",
-      title: "",
-      calls: 0
-    })
-  },
-  cache: {
-    browser: {
-      "cacheDemo.product": defineCache({ ttl: 60_000 })
-    },
-    server: {
-      "cacheDemo.products.get": defineCache({ ttl: 30_000 })
-    }
-  },
-  server: {
-    async "cacheDemo.products.get"(id) {
-      return this.cache.getOrSet(`cacheDemo.products:${id}`, () => {
-        return {
-          id,
-          title: "Cached Keyboard",
-          calls: this.signals.get("cacheDemo.calls") + 1
-        };
-      }, { cache: "cacheDemo.products.get" });
-    }
-  },
-  handler: {
-    async "cacheDemo.loadProduct"() {
-      const id = this.signals.get("cacheDemo.productId");
-      const product = await this.cache.getOrSet(`cacheDemo.product:${id}`, () => {
-        return this.server.cacheDemo.products.get(id);
-      }, { cache: "cacheDemo.product" });
-      this.signals.set("cacheDemo.title", product.title);
-      this.signals.set("cacheDemo.calls", product.calls);
-    }
-  }
-});
-Async.start({ root: document, router: false });

package/examples/components/index.html DELETED Viewed

@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Async Loader Components</title>
-  </head>
-  <body>
-    <main id="app"></main>
-    <script type="module" src="./main.js"></script>
-  </body>
-</html>

package/examples/components/main.js DELETED Viewed

@@ -1,26 +0,0 @@
-import { Loader, defineComponent, html } from "../../src/index.js";
-const Toggle = defineComponent(function Toggle() {
-  const selected = this.signal(false);
-  const attach = this.handler("attach", function ({ element }) {
-    element.dataset.attached = "true";
-  });
-  return html`
-    <button
-      type="button"
-      on:attach="${attach}"
-      on:click="${this.handler(function () {
-        selected.update((value) => !value);
-      })}"
-      class:selected="${selected}"
-      signal:class="${["toggle", { active: selected }]}"
-      signal:attr:aria-pressed="${selected}"
-    >
-      Toggle
-    </button>
-  `;
-});
-const loader = Loader({ root: document });
-loader.mount(document.querySelector("#app"), Toggle);

package/examples/counter/index.html DELETED Viewed

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Async Loader Counter</title>
-  </head>
-  <body async:container>
-    <main>
-      <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>
-    <script type="module" src="./main.js"></script>
-  </body>
-</html>

package/examples/counter/main.js DELETED Viewed

@@ -1,17 +0,0 @@
-import { Async, createSignal } from "../../src/index.js";
-Async.use({
-  signal: {
-    counter: createSignal({ count: 0 })
-  },
-  handler: {
-    "counter.increment"() {
-      this.signals.update("counter.count", (count) => count + 1);
-    },
-    "counter.decrement"() {
-      this.signals.update("counter.count", (count) => count - 1);
-    }
-  }
-});
-Async.start({ root: document.body, router: false });

package/examples/partials/index.html DELETED Viewed

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Async Loader Partials</title>
-  </head>
-  <body>
-    <main async:container>
-      <button type="button" on:click="partialsDemo.loadProduct">Load product</button>
-      <section async:boundary="product"></section>
-    </main>
-    <script type="module" src="./main.js"></script>
-  </body>
-</html>

package/examples/partials/main.js DELETED Viewed

@@ -1,43 +0,0 @@
-import {
-  Async,
-  html
-} from "../../src/index.js";
-let runtime;
-Async.use({
-  server: {
-    "partialsDemo.products.get"(id) {
-      return {
-        value: {
-          id,
-          title: "Keyboard"
-        }
-      };
-    }
-  },
-  partial: {
-    "partialsDemo.product.card": async function ({ id }) {
-      const product = await this.server.partialsDemo.products.get(id);
-      return html`
-        <article>
-          <h1>${product.title}</h1>
-          <p>${product.id}</p>
-        </article>
-      `;
-    }
-  },
-  handler: {
-    async "partialsDemo.loadProduct"() {
-      const result = await runtime.partials.render("partialsDemo.product.card", { id: "sku-1" }, {
-        cache: this.cache,
-        loader: this.loader,
-        server: this.server,
-        signals: this.signals
-      });
-      this.loader.swap("product", result.html);
-    }
-  }
-});
-runtime = Async.start({ root: document, router: false });

package/examples/product/index.html DELETED Viewed

@@ -1,32 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Async Loader Product</title>
-  </head>
-  <body async:container>
-    <main>
-      <label>
-        Product
-        <select signal:value="productId">
-          <option value="sku-1">Mechanical Keyboard</option>
-          <option value="sku-2">Studio Headphones</option>
-        </select>
-      </label>
-      <section async:boundary="product">
-        <template async:loading="product">
-          <p>Loading product...</p>
-        </template>
-        <template async:ready="product">
-          <h1 signal:text="product.title"></h1>
-          <p signal:text="product.description"></p>
-        </template>
-        <template async:error="product">
-          <p signal:text="product.$error.message"></p>
-        </template>
-      </section>
-    </main>
-    <script type="module" src="./main.js"></script>
-  </body>
-</html>

package/examples/product/main.js DELETED Viewed

@@ -1,24 +0,0 @@
-import { Loader, createSignal, createSignalRegistry, delay } from "../../src/index.js";
-const products = {
-  "sku-1": {
-    title: "Mechanical Keyboard",
-    description: "A compact keyboard loaded through an async signal."
-  },
-  "sku-2": {
-    title: "Studio Headphones",
-    description: "Closed-back headphones loaded through the same boundary."
-  }
-};
-const signals = createSignalRegistry({
-  productId: createSignal("sku-1")
-});
-signals.asyncSignal("product", async function () {
-  const id = this.signals.get("productId");
-  await delay(150, this.abort);
-  return products[id];
-});
-Loader({ root: document.body, signals }).start();

package/examples/router/index.html DELETED Viewed

@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Async Loader CSR Router</title>
-  </head>
-  <body>
-    <main async:container>
-      <nav>
-        <a href="/">Home</a>
-        <a href="/products/sku-1">Product</a>
-      </nav>
-      <section async:boundary="route"></section>
-    </main>
-    <script type="module" src="./main.js"></script>
-  </body>
-</html>

package/examples/router/main.js DELETED Viewed

@@ -1,52 +0,0 @@
-import {
-  Async,
-  createSignal,
-  defineRoute,
-  html
-} from "../../src/index.js";
-Async.use({
-  signal: {
-    routerDemo: createSignal({
-      productId: "sku-1",
-      cartCount: 0
-    })
-  },
-  server: {
-    "routerDemo.cart.add"(productId) {
-      return {
-        value: { productId },
-        signals: {
-          "routerDemo.cartCount": 1
-        }
-      };
-    }
-  },
-  partial: {
-    "routerDemo.home"() {
-      return html`
-        <h1>Home</h1>
-        <p>Cart: <strong signal:text="routerDemo.cartCount"></strong></p>
-      `;
-    },
-    "routerDemo.product.page"({ id }) {
-      return html`
-        <article>
-          <h1>Product ${id}</h1>
-          <p>Cart: <strong signal:text="routerDemo.cartCount"></strong></p>
-          <button type="button" on:click="server.routerDemo.cart.add(routerDemo.productId)">Add</button>
-        </article>
-      `;
-    }
-  },
-  route: {
-    "/": defineRoute("routerDemo.home"),
-    "/products/:id": defineRoute("routerDemo.product.page")
-  }
-});
-Async.start({
-  mode: "csr",
-  root: document,
-  boundary: "route"
-});

package/examples/server-call/index.html DELETED Viewed

@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Async Loader Server Call</title>
-  </head>
-  <body>
-    <main async:container>
-      <form on:submit="preventDefault; server.serverCall.products.save(serverCall.productId, $form)">
-        <label>
-          Title
-          <input name="title" value="Keyboard">
-        </label>
-        <button type="submit">Save</button>
-      </form>
-      <p>Saved: <strong signal:text="serverCall.savedTitle"></strong></p>
-    </main>
-    <script type="module" src="./main.js"></script>
-  </body>
-</html>

package/examples/server-call/main.js DELETED Viewed

@@ -1,22 +0,0 @@
-import { Async, createSignal } from "../../src/index.js";
-Async.use({
-  signal: {
-    serverCall: createSignal({
-      productId: "sku-1",
-      savedTitle: ""
-    })
-  },
-  server: {
-    "serverCall.products.save"(productId, form) {
-      return {
-        value: { id: productId, ...form },
-        signals: {
-          "serverCall.savedTitle": form.title
-        }
-      };
-    }
-  }
-});
-Async.start({ root: document, router: false });

package/examples/ssr/index.html DELETED Viewed

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Async Loader SSR Activation</title>
-  </head>
-  <body>
-    <main id="app" async:container></main>
-    <script type="module" src="./main.js"></script>
-  </body>
-</html>

package/examples/ssr/main.js DELETED Viewed

@@ -1,89 +0,0 @@
-import {
-  createApp,
-  createSignal,
-  defineApp,
-  defineCache,
-  defineRoute,
-  html
-} from "../../src/index.js";
-function sharedDefinition() {
-  return {
-    signal: {
-      ssrDemo: createSignal({
-        productId: null,
-        selected: false
-      })
-    },
-    cache: {
-      browser: {
-        "ssrDemo.product": defineCache({ ttl: 60_000 })
-      }
-    },
-    handler: {
-      "ssrDemo.selectProduct"() {
-        this.signals.set("ssrDemo.selected", true);
-      }
-    },
-    route: {
-      "/ssr/:id": defineRoute("ssrDemo.product.page")
-    }
-  };
-}
-const serverApp = defineApp(sharedDefinition());
-serverApp.use({
-  cache: {
-    server: {
-      "ssrDemo.products.get": defineCache({ ttl: 30_000 })
-    }
-  },
-  server: {
-    async "ssrDemo.products.get"(id) {
-      return this.cache.getOrSet(`ssrDemo.products:${id}`, () => {
-        return {
-          id,
-          title: "SSR Keyboard"
-        };
-      }, { cache: "ssrDemo.products.get" });
-    }
-  },
-  partial: {
-    async "ssrDemo.product.page"({ id }) {
-      const product = await this.server.ssrDemo.products.get(id);
-      return {
-        html: html`
-          <article>
-            <h1>${product.title}</h1>
-            <p>${product.id}</p>
-            <button type="button" on:click="ssrDemo.selectProduct" class:selected="ssrDemo.selected">
-              Select
-            </button>
-          </article>
-        `,
-        signals: {
-          "ssrDemo.productId": id
-        },
-        cache: {
-          browser: {
-            [`ssrDemo.product:${id}`]: product
-          }
-        }
-      };
-    }
-  }
-});
-const serverRuntime = createApp(serverApp, { target: "server" });
-const response = await serverRuntime.render("/ssr/sku-1");
-serverRuntime.destroy();
-document.querySelector("#app").innerHTML = response.html;
-const snapshot = JSON.parse(document.querySelector("[async\\:snapshot]").textContent);
-const browserApp = defineApp(sharedDefinition());
-createApp(browserApp, {
-  root: document,
-  router: false,
-  snapshot
-}).start();

package/examples/streaming/index.html DELETED Viewed

@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Async Loader Streaming</title>
-  </head>
-  <body async:container>
-    <main>
-      <button type="button" on:click="streamingDemo.streamProduct">Stream product</button>
-      <section async:boundary="product">
-        <p>Waiting for streamed HTML...</p>
-      </section>
-    </main>
-    <script type="module" src="./main.js"></script>
-  </body>
-</html>

package/examples/streaming/main.js DELETED Viewed

@@ -1,30 +0,0 @@
-import { Async, createSignal } from "../../src/index.js";
-Async.use({
-  signal: {
-    streamingDemo: createSignal({
-      title: "Streamed Keyboard",
-      selected: false
-    })
-  },
-  handler: {
-    "streamingDemo.streamProduct"() {
-      this.loader.swap(
-        "product",
-        `
-          <article>
-            <h1 signal:text="streamingDemo.title"></h1>
-            <button type="button" on:click="streamingDemo.select" class:selected="streamingDemo.selected">
-              Select
-            </button>
-          </article>
-        `
-      );
-    },
-    "streamingDemo.select"() {
-      this.signals.set("streamingDemo.selected", true);
-    }
-  }
-});
-Async.start({ root: document.body, router: false });