Merge pull request #109 from emiljohansson/feature/signals

install preact signals and create a example page

apps/next/package.json

@@ -17,6 +17,8 @@
 	"dependencies": {
 		"@emiljohansson/random-string": "1.1.2",
 		"@faker-js/faker": "7.4.0",
+		"@preact/signals-core": "1.5.0",
+		"@preact/signals-react": "1.3.7",
 		"@radix-ui/react-accessible-icon": "1.0.2",
 		"@radix-ui/react-label": "1.0.0",
 		"@radix-ui/react-progress": "1.0.0",
@@ -41,6 +43,7 @@
 	"devDependencies": {
 		"@types/crypto-js": "4.1.1",
 		"@types/jsonwebtoken": "9.0.1",
+		"@types/use-sync-external-store": "0.0.6",
 		"config": "workspace:*",
 		"next-transpile-modules": "9.0.0",
 		"tsconfig": "workspace:*"

apps/next/src/app/signals/Content.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { signal, computed } from '@preact/signals-core'
+import './initSignals'
+
+const count = signal(0)
+const double = computed(() => count.value * 2)
+
+export default function Content() {
+	return (
+		<>
+			<h2>Counter</h2>
+			<p>Count: {count}</p>
+			<p>Double: {double}</p>
+			<div className="flex">
+				<button className="btn-secondary" onClick={() => count.value++}>
+					Increment
+				</button>
+				<button className="btn-secondary" onClick={() => count.value--}>
+					Decrement
+				</button>
+				<button
+					className="btn-secondary"
+					onClick={() => {
+						count.value = 0
+					}}
+				>
+					Reset
+				</button>
+				<button
+					className="btn-secondary"
+					onClick={() => {
+						count.value = 5
+					}}
+				>
+					Set 5
+				</button>
+			</div>
+		</>
+	)
+}

apps/next/src/app/signals/initSignals.ts

@@ -0,0 +1,32 @@
+import type { Signal } from '@preact/signals-react'
+
+import { Signal as SignalBase, effect } from '@preact/signals-core'
+import { useEffect, useState } from 'react'
+
+export function useSignalState<T>(signal: Signal<T>) {
+	const [state, setState] = useState<T>(signal.value)
+
+	useEffect(() => {
+		return effect(() => setState(signal.value))
+	}, [signal])
+
+	return state
+}
+
+const ReactElemType = Symbol.for('react.element') // https://github.com/facebook/react/blob/346c7d4c43a0717302d446da9e7423a8e28d8996/packages/shared/ReactSymbols.js#L15
+
+function SignalValue({ data }: { data: Signal }) {
+	return useSignalState(data)
+}
+
+Object.defineProperties(SignalBase.prototype, {
+	$$typeof: { configurable: true, value: ReactElemType },
+	type: { configurable: true, value: SignalValue },
+	props: {
+		configurable: true,
+		get() {
+			return { data: this }
+		},
+	},
+	ref: { configurable: true, value: null },
+})

apps/next/src/app/signals/page.tsx

@@ -0,0 +1,5 @@
+import Content from './Content'
+
+export default function Page() {
+	return <Content />
+}