Feature/signals updates (#124)

* change from framer-motion to motion * impl preact signals * fix motion imports
emiljohansson · Dec 23, 2024 · 25a1170 · 25a1170
1 parent d9d01f8
commit 25a1170
Show file tree

Hide file tree

Showing 17 changed files with 492 additions and 435 deletions.
diff --git a/apps/design/app/page.tsx b/apps/design/app/page.tsx
@@ -8,7 +8,7 @@ import { useState } from 'react'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { BorderSolidIcon } from '@radix-ui/react-icons'
 import { Label } from '@radix-ui/react-label'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import {
 	Select,
 	SelectGroup,

diff --git a/apps/design/package.json b/apps/design/package.json
@@ -13,8 +13,8 @@
 		"@radix-ui/react-label": "2.1.1",
 		"@radix-ui/react-progress": "1.1.1",
 		"@radix-ui/react-radio-group": "^1.2.2",
-		"framer-motion": "6.2.3",
 		"lib": "workspace:*",
+		"motion": "11.15.0",
 		"next": "15.1.2",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",

diff --git a/apps/games/package.json b/apps/games/package.json
@@ -11,11 +11,11 @@
 	"dependencies": {
 		"@faker-js/faker": "7.4.0",
 		"@nanostores/react": "0.7.1",
-		"framer-motion": "6.2.3",
 		"just-shuffle": "4.1.1",
 		"lib": "workspace:*",
 		"lz-string": "1.5.0",
 		"million": "2.6.4",
+		"motion": "11.15.0",
 		"nanostores": "0.9.5",
 		"next": "15.1.2",
 		"react": "19.0.0",

diff --git a/apps/games/src/app/wordle/Game.tsx b/apps/games/src/app/wordle/Game.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { Header } from 'ui'
 
 enum Color {

diff --git a/apps/next/package.json b/apps/next/package.json
@@ -18,6 +18,8 @@
 		"@emiljohansson/random-string": "1.1.2",
 		"@faker-js/faker": "7.4.0",
 		"@nanostores/react": "0.7.1",
+		"@preact/signals-core": "1.8.0",
+		"@preact/signals-react": "2.3.0",
 		"@radix-ui/react-accessible-icon": "1.1.1",
 		"@radix-ui/react-label": "2.1.1",
 		"@radix-ui/react-progress": "1.1.1",
@@ -27,11 +29,11 @@
 		"@vercel/analytics": "1.1.1",
 		"@vercel/kv": "1.0.0",
 		"crypto-js": "4.2.0",
-		"framer-motion": "6.2.3",
 		"jsonwebtoken": "9.0.2",
 		"just-range": "4.1.1",
 		"lib": "workspace:*",
 		"lucide-react": "0.323.0",
+		"motion": "11.15.0",
 		"nanostores": "0.9.5",
 		"next": "15.1.2",
 		"react": "19.0.0",

diff --git a/apps/next/src/app/signals/Content.tsx b/apps/next/src/app/signals/Content.tsx
diff --git a/apps/next/src/app/signals/GlobalContent.tsx b/apps/next/src/app/signals/GlobalContent.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { signal, computed, effect } from '@preact/signals-react'
+
+const gLcount = signal(0)
+const gLdouble = computed(() => gLcount.value * 2)
+
+effect(() => {
+	console.log('Count:', gLcount.value)
+	console.log('Double:', gLdouble.value)
+})
+
+export default function GlobalContent() {
+	console.log('Render')
+
+	return (
+		<>
+			<p>Count: {gLcount}</p>
+			<p>Double: {gLdouble}</p>
+			<div className="flex">
+				<button
+					className="btn-secondary"
+					onClick={() => {
+						gLcount.value++
+					}}
+				>
+					Increment
+				</button>
+				<button
+					className="btn-secondary"
+					onClick={() => {
+						gLcount.value--
+					}}
+				>
+					Decrement
+				</button>
+				<button
+					className="btn-secondary"
+					onClick={() => {
+						gLcount.value = 0
+					}}
+				>
+					Reset
+				</button>
+				<button
+					className="btn-secondary"
+					onClick={() => {
+						gLcount.value = 5
+					}}
+				>
+					Set 5
+				</button>
+			</div>
+		</>
+	)
+}
diff --git a/apps/next/src/app/signals/LocalContent.tsx b/apps/next/src/app/signals/LocalContent.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+// import { signal, computed, effect } from 'lib/hooks/signals'
+// import { useSignals } from '@preact/signals-react/runtime'
+import { useSignal, useComputed, useSignalEffect } from '@preact/signals-react'
+// import { signal, computed, effect } from '@preact/signals-core'
+
+export default function LocalContent() {
+	const count = useSignal(0)
+	const double = useComputed(() => count.value * 2)
+	console.log('Render')
+
+	useSignalEffect(() => {
+		console.log('Count:', count.value)
+		console.log('Double:', double.value)
+	})
+
+	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>
+		</>
+	)
+}
diff --git a/apps/next/src/app/signals/layout.tsx b/apps/next/src/app/signals/layout.tsx
@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from 'react'
+
+export const metadata = {
+	title: 'Signals',
+	description: 'Preact Signals in Next.js',
+}
+
+export default function Layout({ children }: PropsWithChildren<unknown>) {
+	return children
+}
diff --git a/apps/next/src/app/signals/page.tsx b/apps/next/src/app/signals/page.tsx
@@ -1,5 +1,39 @@
-import Content from './Content'
+import Section from '@/components/Section'
+import Content from '@/components/Content'
+import GlobalContent from './GlobalContent'
+import LocalContent from './LocalContent'
 
 export default function Page() {
-	return <Content />
+	return (
+		<Content>
+			<Section size="normal">
+				<h1 className="sr-only">Signals</h1>
+				<div className="grid gap-8">
+					<div>
+						<h2 className="heading2">Local</h2>
+						<div className="grid gap-3">
+							<div>
+								<LocalContent />
+							</div>
+							<div>
+								<LocalContent />
+							</div>
+						</div>
+					</div>
+
+					<div>
+						<h2 className="heading2">Global 1</h2>
+						<div className="grid gap-3">
+							<div>
+								<GlobalContent />
+							</div>
+							<div>
+								<GlobalContent />
+							</div>
+						</div>
+					</div>
+				</div>
+			</Section>
+		</Content>
+	)
 }
diff --git a/apps/next/src/app/two-way-auth/generate/TwoWayAuthGenerate.tsx b/apps/next/src/app/two-way-auth/generate/TwoWayAuthGenerate.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { Factor } from '@/app/two-way-auth/api/types'
 
 function TwoWayAuthGenerate({ initFactor }: { initFactor: Factor }) {

diff --git a/apps/next/src/components/ConfirmButton.tsx b/apps/next/src/components/ConfirmButton.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 
 interface Props {
 	duration?: number

diff --git a/packages/lib/hooks/signals.ts b/packages/lib/hooks/signals.ts
@@ -1,7 +1,6 @@
 // temporary solution from https://github.com/JonAbrams/signals-react-safe/tree/main
 
-import {} from 'react'
-import { type ReactElement, useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import {
 	Signal,
 	signal,
@@ -10,7 +9,7 @@ import {
 	batch,
 	type ReadonlySignal,
 	untracked,
-} from '@preact/signals-core'
+} from '@preact/signals-react'
 
 export {
 	signal,
@@ -62,24 +61,20 @@ export function useSignalEffect(cb: () => void | (() => void)): void {
 	}, [])
 }
 
-const ReactElemType = Symbol.for('react.element') // https://github.com/facebook/react/blob/346c7d4c43a0717302d446da9e7423a8e28d8996/packages/shared/ReactSymbols.js#L15
+// const ReactElemType = Symbol.for('react.element') // https://github.com/facebook/react/blob/346c7d4c43a0717302d446da9e7423a8e28d8996/packages/shared/ReactSymbols.js#L15
 
-function SignalValue({ data }: { data: Signal }) {
-	return useSignalValue(data)
-}
-
-Object.defineProperties(Signal.prototype, {
-	$$typeof: { configurable: true, value: ReactElemType },
-	type: { configurable: true, value: SignalValue },
-	props: {
-		configurable: true,
-		get() {
-			return { data: this }
-		},
-	},
-	ref: { configurable: true, value: null },
-})
+// function SignalValue({ data }: { data: Signal }) {
+// 	return useSignalValue(data)
+// }
 
-declare module '@preact/signals-core' {
-	interface Signal extends ReactElement {}
-}
+// Object.defineProperties(Signal.prototype, {
+// 	$$typeof: { configurable: true, value: ReactElemType },
+// 	type: { configurable: true, value: SignalValue },
+// 	props: {
+// 		configurable: true,
+// 		get() {
+// 			return { data: this }
+// 		},
+// 	},
+// 	ref: { configurable: true, value: null },
+// })
diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -9,8 +9,8 @@
 		"test:ci": "npm run test"
 	},
 	"dependencies": {
-		"@preact/signals-core": "1.5.0",
-		"@preact/signals-react": "1.3.7",
+		"@preact/signals-core": "1.8.0",
+		"@preact/signals-react": "2.3.0",
 		"next": "15.1.2",
 		"react": "19.0.0",
 		"react-dom": "19.0.0"

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -28,8 +28,8 @@
 		"@radix-ui/react-progress": "1.1.1",
 		"@radix-ui/react-select": "2.1.4",
 		"@radix-ui/react-slider": "1.2.2",
-		"framer-motion": "6.2.3",
 		"lib": "workspace:*",
+		"motion": "11.15.0",
 		"next": "15.1.2",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",

diff --git a/packages/ui/src/Progress.tsx b/packages/ui/src/Progress.tsx
@@ -1,5 +1,5 @@
 import { Root, Indicator } from '@radix-ui/react-progress'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { classNames } from 'lib/utils/string'
 
 export const Progress = ({ progress }: { progress: number }) => {