;
+ children: Node[];
+ };
diff --git a/src/components/counter.tsx b/src/components/counter.tsx
new file mode 100644
index 0000000..912f575
--- /dev/null
+++ b/src/components/counter.tsx
@@ -0,0 +1,58 @@
+import { createEffect, createMemo, createRenderEffect, For } from "solid-js";
+import { useCounter } from "~/lib/counter";
+import { Node } from "../../socket/renderer";
+
+function renderNode(node: Node) {
+ if (typeof node !== "string") {
+ const el = document.createElement(node.type);
+ node.children.forEach((child) => {
+ const el2 = renderNode(child);
+ el.append(el2);
+ });
+ if (node.style)
+ Object.keys(node.style).forEach((style) => {
+ el.style[style] = node.style[style];
+ });
+
+ if (node.onClick) {
+ el.onclick = () => node.onClick();
+ }
+ return el;
+ }
+ return node;
+}
+
+export function Counter() {
+ const counter = useCounter();
+
+ const ui = createMemo(() => {
+ const uiData = counter.ui();
+ console.log(`uiData`, uiData);
+ if (uiData) {
+ return renderNode(uiData);
+ }
+ });
+
+ createEffect(() => console.log(`ui`, ui()));
+
+ return (
+ <>
+
+
Counter
+ counter.increment()}
+ >
+ Count {counter.count()}
+
+
+ {JSON.stringify(counter.ui())}
+ {ui()}
+
+ );
+}
diff --git a/src/components/todos.tsx b/src/components/todos.tsx
index 8ed3567..09cf8d8 100644
--- a/src/components/todos.tsx
+++ b/src/components/todos.tsx
@@ -1,9 +1,9 @@
-import { createSignal, createMemo, Show, For } from "solid-js";
+import { createMemo, createSignal, For, Show } from "solid-js";
import { useServerTodos } from "~/lib/todos";
import {
createClientEventLog,
- createEventProjection,
createEventComputed,
+ createEventProjection,
} from "../../socket/events";
import { createSocketMemo } from "../../socket/lib/shared";
import { CompleteIcon, IncompleteIcon } from "./icons";
diff --git a/src/lib/counter.ts b/src/lib/counter.ts
index 3310993..47d48d3 100644
--- a/src/lib/counter.ts
+++ b/src/lib/counter.ts
@@ -1,14 +1,41 @@
"use socket";
-import { createSocketMemo } from "../../socket/lib/shared";
+import { createSignal } from "solid-js";
+import { createSocketMemo, createSocketRef } from "../../socket/lib/shared";
import { createPersistedSignal } from "../../socket/persisted";
+import { Node } from "../../socket/renderer";
import { storage } from "./db";
-const [count, setCount] = createPersistedSignal(storage, `count`, 0);
-
export const useCounter = () => {
+ const [count, setCount] = createSignal(0);
+
const increment = () => setCount(count() + 1);
const decrement = () => setCount(count() - 1);
- return { count: createSocketMemo(count), increment, decrement };
+ return {
+ count: createSocketMemo(count),
+ increment: createSocketRef(increment),
+ decrement: createSocketRef(decrement),
+ ui: createSocketMemo((): Node => {
+ return {
+ type: "div",
+ children: [
+ {
+ type: "h1",
+ children: ["Counter"],
+ },
+ {
+ type: "button",
+ style: {
+ "background-color": "yellow",
+ padding: "5px 10px",
+ border: "1px solid grey",
+ "border-radius": "5px",
+ },
+ children: [`Count ${count()}`],
+ },
+ ],
+ };
+ }),
+ };
};
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index a4a99aa..164b64f 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,21 +1,28 @@
import { createAsync, type RouteSectionProps } from "@solidjs/router";
import { Show } from "solid-js";
import { Login, Logout } from "~/components/auth";
+import { Counter } from "~/components/counter";
import { Invites } from "~/components/invites";
import { PresenceHost } from "~/components/presence";
import { TodoApp, TodosFilter } from "~/components/todos";
import { getUserId } from "~/lib/auth";
+import { useCounter } from "~/lib/counter";
export default function TodoAppPage(props: RouteSectionProps) {
const userId = createAsync(() => getUserId());
+ const counter = useCounter();
return (
<>
+ counter.increment()}>
+ Count {counter.count()}
+
<>
- Welcome to Solid Socket
+ Welcome to Solid Socket
The easiest and most powerful way to build realtime applications
on top of SolidStart.
@@ -38,7 +45,7 @@ export default function TodoAppPage(props: RouteSectionProps) {
Just open multiple windows using different browsers or devices and
login using a different username.
-