@async/framework 0.2.2 → 0.4.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 (29) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/README.md +324 -48
  3. package/examples/cache/index.html +3 -3
  4. package/examples/components/main.js +10 -10
  5. package/examples/counter/index.html +2 -2
  6. package/examples/partials/index.html +2 -2
  7. package/examples/product/index.html +9 -9
  8. package/examples/router/index.html +2 -2
  9. package/examples/router/main.js +2 -2
  10. package/examples/server-call/index.html +2 -2
  11. package/examples/ssr/index.html +1 -1
  12. package/examples/ssr/main.js +2 -2
  13. package/examples/streaming/index.html +2 -2
  14. package/examples/streaming/main.js +2 -2
  15. package/framework.js +3912 -0
  16. package/package.json +14 -3
  17. package/src/app.js +73 -53
  18. package/src/attributes.js +52 -0
  19. package/src/cache.js +31 -16
  20. package/src/component.js +94 -19
  21. package/src/handlers.js +24 -5
  22. package/src/html.js +99 -6
  23. package/src/index.js +2 -0
  24. package/src/loader.js +291 -54
  25. package/src/partials.js +26 -11
  26. package/src/registry-store.js +257 -0
  27. package/src/router.js +42 -3
  28. package/src/server.js +12 -4
  29. package/src/signals.js +32 -10
package/examples/router/main.js CHANGED
@@ -26,14 +26,14 @@ Async.use({
26
26
  "routerDemo.home"() {
27
27
  return html`
28
28
  <h1>Home</h1>
29
- <p>Cart: <strong data-async-text="routerDemo.cartCount"></strong></p>
29
+ <p>Cart: <strong signal:text="routerDemo.cartCount"></strong></p>
30
30
  `;
31
31
  },
32
32
  "routerDemo.product.page"({ id }) {
33
33
  return html`
34
34
  <article>
35
35
  <h1>Product ${id}</h1>
36
- <p>Cart: <strong data-async-text="routerDemo.cartCount"></strong></p>
36
+ <p>Cart: <strong signal:text="routerDemo.cartCount"></strong></p>
37
37
  <button type="button" on:click="server.routerDemo.cart.add(routerDemo.productId)">Add</button>
38
38
  </article>
39
39
  `;
package/examples/server-call/index.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>AsyncLoader Server Call</title>
7
7
  </head>
8
8
  <body>
9
- <main data-async-container>
9
+ <main async:container>
10
10
  <form on:submit="preventDefault; server.serverCall.products.save(serverCall.productId, $form)">
11
11
  <label>
12
12
  Title
@@ -14,7 +14,7 @@
14
14
  </label>
15
15
  <button type="submit">Save</button>
16
16
  </form>
17
- <p>Saved: <strong data-async-text="serverCall.savedTitle"></strong></p>
17
+ <p>Saved: <strong signal:text="serverCall.savedTitle"></strong></p>
18
18
  </main>
19
19
  <script type="module" src="./main.js"></script>
20
20
  </body>
package/examples/ssr/index.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>AsyncLoader SSR Activation</title>
7
7
  </head>
8
8
  <body>
9
- <main id="app" data-async-container></main>
9
+ <main id="app" async:container></main>
10
10
  <script type="module" src="./main.js"></script>
11
11
  </body>
12
12
  </html>
package/examples/ssr/main.js CHANGED
@@ -56,7 +56,7 @@ serverApp.use({
56
56
  <article>
57
57
  <h1>${product.title}</h1>
58
58
  <p>${product.id}</p>
59
- <button type="button" on:click="ssrDemo.selectProduct" data-async-class:selected="ssrDemo.selected">
59
+ <button type="button" on:click="ssrDemo.selectProduct" class:selected="ssrDemo.selected">
60
60
  Select
61
61
  </button>
62
62
  </article>
@@ -80,7 +80,7 @@ serverRuntime.destroy();
80
80
 
81
81
  document.querySelector("#app").innerHTML = response.html;
82
82
 
83
- const snapshot = JSON.parse(document.querySelector("[data-async-snapshot]").textContent);
83
+ const snapshot = JSON.parse(document.querySelector("[async\\:snapshot]").textContent);
84
84
  const browserApp = defineApp(sharedDefinition());
85
85
  createApp(browserApp, {
86
86
  root: document,
package/examples/streaming/index.html CHANGED
@@ -4,10 +4,10 @@
4
4
  <meta charset="utf-8">
5
5
  <title>AsyncLoader Streaming</title>
6
6
  </head>
7
- <body data-async-container>
7
+ <body async:container>
8
8
  <main>
9
9
  <button type="button" on:click="streamingDemo.streamProduct">Stream product</button>
10
- <section data-async-boundary="product">
10
+ <section async:boundary="product">
11
11
  <p>Waiting for streamed HTML...</p>
12
12
  </section>
13
13
  </main>
package/examples/streaming/main.js CHANGED
@@ -13,8 +13,8 @@ Async.use({
13
13
  "product",
14
14
  `
15
15
  <article>
16
- <h1 data-async-text="streamingDemo.title"></h1>
17
- <button type="button" on:click="streamingDemo.select" data-async-class:selected="streamingDemo.selected">
16
+ <h1 signal:text="streamingDemo.title"></h1>
17
+ <button type="button" on:click="streamingDemo.select" class:selected="streamingDemo.selected">
18
18
  Select
19
19
  </button>
20
20
  </article>