init

demo/main.tsx

@@ -0,0 +1,68 @@
+import { value, component, div, h1, p, button, scope } from '../lib/exports';
+
+const counter = value(0);
+
+const child = component<{ count: number }>(({ context, props }) => {
+  const count = context(counter);
+
+  return div`
+    And the count according to the child: ${count.value} which got ${props.count}
+
+    ${button.$({
+      click: () => {
+        count.value -= 1;
+      },
+    })`
+      Decrement
+    `}
+  `;
+});
+
+const root = component(({ context }) => {
+  const count = context(counter);
+
+  return div`
+    ${h1.$({ style: { color: 'red' } })`
+      Hello
+    `}
+
+    The current count is: ${count.value}
+
+    ${div`
+      ${h1`Hello`}
+      
+      ... Something
+
+      ${p`
+        Testing
+      `}
+    `}
+
+    ${button.$({
+      click: () => {
+        count.value += 1;
+      },
+    })`
+      Increment
+    `}
+    
+    ${div`
+      ${h1`With prop`}
+      ${child({ count: count.value })}
+    `}
+
+    ${div`
+      ${h1`Without prop`}
+      ${child}
+    `}
+
+    ${scope(counter)`
+      ${h1`Without scope`}
+      ${child}
+    `}
+
+    So long and thanks for all the fish
+  `;
+});
+
+document.body.appendChild(root.toHtmlElement());

demo/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />