chore: add shared signal example

Author: barelyhuman

playground/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@preact/signals": "^1.3.0",
     "preact": "^10.24.2"
   },
   "devDependencies": {

playground/src/api/random-data.js

@@ -0,0 +1,7 @@
+export default function (req, res) {
+  return res.json(
+    Array.from({ length: 3 })
+      .fill(0)
+      .map((d, i) => (i + 1) * Math.random())
+  )
+}

playground/src/components/SharedSignal.tsx

@@ -0,0 +1,34 @@
+import { signal } from '@preact/signals'
+import { useEffect } from 'preact/hooks'
+
+const data$ = signal([])
+
+async function fetchData() {
+  const data = await fetch('/api/random-data').then(d => d.json())
+  data$.value = data
+}
+
+export function Triggerer() {
+  useEffect(() => {
+    fetchData()
+  }, [])
+  return (
+    <div class="p-10 border border-red-400 border-dashed">
+      <h2>Triggerer Island</h2>
+      <button class="px-4 py-2 text-white bg-black rounded-md" onClick={fetchData}>Fetch Again</button>
+    </div>
+  )
+}
+
+export function Renderer() {
+  return (
+    <div class="p-10 border border-blue-400 border-dashed">
+      <h2>Renderer Island</h2>
+      <ul>
+        {data$.value.map(d => (
+          <li>{d}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}

playground/src/pages/shared-signal.tsx

@@ -0,0 +1,10 @@
+import { Renderer, Triggerer } from '../components/SharedSignal.js'
+
+export default function SharedSignal() {
+  return (
+    <div class="flex flex-col gap-2 p-10">
+      <Triggerer />
+      <Renderer />
+    </div>
+  )
+}