chore: cleanup playground

index.html

@@ -7,8 +7,9 @@
     <script type="importmap">
       {
         "imports": {
+          "@std/assert/": "https://esm.sh/jsr/@std/assert/",
           "@f-stack/functorial": "./build/packages/functorial/src/reactive.js",
-          "@f-stack/reflow": "./packages/reflow/src/html.js"
+          "@f-stack/reflow": "./build/packages/reflow/src/mod.js"
         }
       }
     </script>

playground/components/Article.ts

@@ -1,5 +1,5 @@
 import { html } from "@f-stack/reflow";
-import { Counter } from "../pages/reactivity/1-state-and-derived/Counter.ts";
+import { Counter } from "./Counter.ts";
 
 export const Article = (props: { title: string }) => {
   return html`

playground/pages/reactivity/3-shared-state/SharedState.ts → playground/pages/reactivity/SharedState.ts

@@ -1,14 +1,14 @@
-import { derived, reactive } from "@f-stack/functorial";
+import { reactive } from "@f-stack/functorial";
 import { html, on } from "@f-stack/reflow";
 
-const state = reactive({
-  count: 0,
+const count = reactive({
+  value: 0,
 });
 
 export const Counter = () => {
   return html`
-    <button ${on({ click: () => state.count++ })}>
-      Click ${derived(() => state.count)}
+    <button ${on({ click: () => count.value++ })}>
+      Click ${count}
     </button>
   `;
 };

playground/pages/sinks/Attach.ts

@@ -1,65 +1,48 @@
-import { listen, reactive } from "@f-stack/functorial";
-import { attach, attr, html, on, show } from "@f-stack/reflow";
+import { reactive } from "@f-stack/functorial";
+import { attach, attr, component, html, on, show } from "@f-stack/reflow";
 
 export const AttachPage = () => {
-  const form = reactive({ value: "Bob" });
-  const color = reactive({ value: "#40E0D0" });
-  const display = reactive({ value: true });
+  const state = reactive({ color: "#40E0D0", show: true });
 
   return html`
-    <form>
-      <label>username:
-        <input type="text" ${attach((i: HTMLInputElement) => {
-          i.defaultValue = form.value;
-        })} ${on<HTMLInputElement>({
-          input: function () {
-            form.value = this.value;
-          },
-        })}>
-      </label>
-      <button type="reset">Reset</button>
-    </form>
-
     <div>
       <input type="color" ${attr({
-        get value() {
-          return color.value;
-        },
+        value: state.color,
       })} ${on<HTMLInputElement>({
         input: function () {
-          color.value = this.value;
+          state.color = this.value;
         },
       })}>
-      <button ${on({
-        click: () => {
-          display.value = !display.value;
-        },
-      })}>Show</button>
+      <button ${on({ click: () => state.show = !state.show })}>Toggle</button>
     </div>
 
-    ${show(() => display.value, () =>
-      html`
-        <canvas width="300" height="300" ${attach(
-          (canvas: HTMLCanvasElement) => {
-            const context = canvas.getContext("2d");
+    ${show(
+      () => state.show,
+      component(function () {
+        return html`
+          <canvas width="300" height="300" ${attach(
+            (canvas: HTMLCanvasElement) => {
+              const context = canvas.getContext("2d");
 
-            if (context) {
-              const draw = (color: string) => {
-                context.fillStyle = color;
-                context.fillRect(0, 0, 200, 200);
-              };
+              if (context) {
+                const draw = (color: string) => {
+                  context.fillStyle = color;
+                  context.fillRect(0, 0, 200, 200);
+                };
 
-              draw(color.value);
+                draw(state.color);
 
-              listen(color, (e) => {
-                console.log(e);
-                if (e.type !== "update") return;
-                draw(e.newValue);
-              });
-            }
-          },
-        )}>Enable JS</canvas>
-      `)}
+                this.listen(state, (e) => {
+                  console.log(e);
+                  if (e.type !== "update") return;
+                  draw(e.newValue);
+                });
+              }
+            },
+          )}>Enable JS</canvas>
+        `;
+      }),
+    )}
 
     <style>
     html { scrollbar-gutter: stable; }

playground/pages/sinks/Attr.ts

@@ -11,7 +11,7 @@ export const Attr = () => {
       return disabled.value;
     },
   });
-  const input = reactive({ text: "hello", number: 10 });
+  const user = reactive({ name: "Bob" });
 
   return html`
     <p>
@@ -48,26 +48,18 @@ export const Attr = () => {
         },
       })}>Remove disabled attribute</button>
     </p>
-    <h2>Two-way bindings</h2>
-    <div>
-      <input type="text" ${attr({
-        get value() {
-          return input.text;
-        },
-      })} ${on<HTMLInputElement>({
-        input: function () {
-          input.text = this.value;
-        },
-      })}>
-      <input type="number" ${attr({
-        get value() {
-          return input.number;
-        },
-      })} ${on<HTMLInputElement>({
-        input: function () {
-          input.number = this.valueAsNumber;
-        },
-      })}>
-    </div>
+    <h2>Reset values</h2>
+    <form>
+      <label>username:
+        <input type="text" ${attr({
+          value: user.name,
+        })} ${on<HTMLInputElement>({
+          input: function () {
+            user.name = this.value;
+          },
+        })}>
+      </label>
+      <button type="reset">Reset</button>
+    </form>
   `;
 };

playground/pages/templating/bases/hello.css → playground/pages/templating/hello.css

@@ -1,4 +1,4 @@
-@scope ([scope="1"]) to ([scope]) {
+@scope ([scope]) to ([scope]) {
   p {
     color: goldenrod;
     font-family: "Comic Sans MS", cursive;

playground/pages/templating/bases/Hello.ts → playground/pages/templating/html.ts

@@ -1,6 +1,6 @@
 import { attr, html } from "@f-stack/reflow";
 // @ts-ignore works in Chrome
-// import styles from "./hello.css" with { type: "css" };
+import styles from "./hello.css" with { type: "css" };
 
 document.adoptedStyleSheets.push(styles);
 
@@ -11,10 +11,9 @@ const Nested = () => {
 };
 
 /**
- * Showcase simple interpolation
+ * Primitive interpolation
  */
-export const Hello = () => {
-  // Add data
+export const HtmlPage = () => {
   const name = "World";
   const src =
     "https://images.dog.ceo/breeds/terrier-patterdale/dog-1268559_640.jpg";

playground/render.ts

@@ -1,3 +1,3 @@
-import { Counter } from "./pages/reactivity/1-state-and-derived/Counter.ts";
+import { Counter } from "./components/Counter.ts";
 
 document.body.replaceChildren(Counter().fragment);