Deep signal optimisations

examples/card/src/App.tsx

@@ -61,6 +61,7 @@ export function CardPage() {
     <Root flexDirection="column" pixelSize={0.01} sizeX={4.4}>
       <Defaults>
         <Container
+          style={{ backgroundColor: 'transparent' }}
           backgroundColor={0xffffff}
           dark={{ backgroundColor: 0x0 }}
           borderRadius={20}

examples/dashboard/package.json

@@ -4,6 +4,7 @@
     "@preact/signals-core": "^1.5.1",
     "@react-three/uikit": "workspace:^",
     "@react-three/uikit-lucide": "workspace:^",
+    "deepsignal": "^1.6.0",
     "vite-plugin-mkcert": "^1.17.4",
     "zustand": "^4.4.7"
   },

package.json

@@ -44,5 +44,7 @@
       "core-js",
       "sharp"
     ]
-  }
+  },
+  "workspaces": ["packages/*"],
+  "packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b"
 }

packages/react/package.json

@@ -44,6 +44,7 @@
     "@preact/signals-core": "^1.5.1",
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
+    "deepsignal": "^1.6.0",
     "ora": "^8.0.1",
     "prettier": "^3.2.5",
     "prompts": "^2.4.2",

packages/react/src/container.tsx

@@ -44,6 +44,7 @@ export const Container: (props: ContainerProperties & RefAttributes<ContainerRef
       }
       const abortController = new AbortController()
       setupContainer<R3FEventMap>(
+        // @ts-expect-error
         internals,
         parent,
         propertySignals.style,
@@ -55,12 +56,14 @@ export const Container: (props: ContainerProperties & RefAttributes<ContainerRef
       return () => abortController.abort()
     }, [parent, propertySignals, internals])
 
+    // @ts-expect-error
     useComponentInternals(ref, parent.root, propertySignals.style, internals, internals.interactionPanel)
 
     return (
       <AddHandlers handlers={internals.handlers} ref={outerRef}>
         <primitive object={internals.interactionPanel} />
         <object3D matrixAutoUpdate={false} ref={innerRef}>
+          {/* @ts-expect-error */}
           <DefaultProperties {...internals.defaultProperties}>
             <ParentProvider value={internals}>{properties.children}</ParentProvider>
           </DefaultProperties>

packages/react/src/content.tsx

@@ -38,6 +38,7 @@ export const Content: (props: ContentProperties & RefAttributes<ContentRef>) =>
       }
       const abortController = new AbortController()
       setupContent<R3FEventMap>(
+        // @ts-expect-error
         internals,
         parent,
         propertySignals.style,
@@ -49,6 +50,7 @@ export const Content: (props: ContentProperties & RefAttributes<ContentRef>) =>
       return () => abortController.abort()
     }, [internals, parent, propertySignals])
 
+    // @ts-expect-error
     useComponentInternals(ref, parent.root, propertySignals.style, internals, internals.interactionPanel)
 
     return (

packages/react/src/custom.tsx

@@ -41,6 +41,7 @@ export const CustomContainer: (props: CustomContainerProperties & RefAttributes<
       }
       const abortController = new AbortController()
       setupCustomContainer<R3FEventMap>(
+        // @ts-expect-error
         internals,
         parent,
         propertySignals.style,
@@ -52,6 +53,7 @@ export const CustomContainer: (props: CustomContainerProperties & RefAttributes<
       return () => abortController.abort()
     }, [internals, parent, propertySignals])
 
+    // @ts-expect-error
     useComponentInternals(ref, parent.root, propertySignals.style, internals, innerRef)
 
     useEffect(() => {

packages/react/src/default.tsx

@@ -1,5 +1,6 @@
 import { AllOptionalProperties } from '@pmndrs/uikit'
-import { ReactNode, createContext, useContext } from 'react'
+import { Signal } from '@preact/signals-core'
+import { ReactNode, createContext, useContext, useMemo } from 'react'
 
 const DefaultPropertiesContext = createContext<AllOptionalProperties | undefined>(undefined)
 
@@ -9,19 +10,64 @@ export function useDefaultProperties(): AllOptionalProperties | undefined {
 
 export type DefaultPropertiesProperties = { children?: ReactNode } & AllOptionalProperties
 
-export function DefaultProperties(properties: DefaultPropertiesProperties) {
+const createDefaultPropertiesHash = (properties: AllOptionalProperties | undefined) => {
+  if (properties === undefined) {
+    return ''
+  }
+  return Array.from(Object.entries(properties))
+    .sort(([ka], [kb]) => (ka > kb ? 1 : ka < kb ? -1 : 0))
+    .map(([k, v]) => {
+      switch (typeof v) {
+        case 'function':
+          console.warn('no function in default props please', k)
+          return ''
+        case 'object':
+          if (Array.isArray(v)) {
+            return v.join(',')
+          }
+          if (v instanceof Signal) {
+            return `${k}=${v.peek()}`
+          }
+          for (let nk of Object.keys(v)) {
+            if (typeof v[nk] === 'object') {
+              console.warn('no deeply nested objects in default props please', k, v)
+              return ''
+            }
+            if (typeof v[nk] === 'function') {
+              console.warn('no functions nested in objects in default props please', k, v)
+              return ''
+            }
+          }
+          return `${k}=${JSON.stringify(v)}`
+        default:
+          if (v === undefined) return ''
+          return `${k}=${v}`
+      }
+    })
+    .join('&')
+}
+
+export function DefaultProperties({ children, ...properties }: DefaultPropertiesProperties) {
   const existingDefaultProperties = useContext(DefaultPropertiesContext)
-  const result: any = { ...existingDefaultProperties }
-  for (const key in properties) {
-    if (key === 'children') {
-      continue
-    }
-    //TODO: this is not correctly merged but rather overwritten
-    const value = properties[key as keyof AllOptionalProperties]
-    if (value == null) {
-      continue
+  const existingDefaultPropertiesHash = createDefaultPropertiesHash(existingDefaultProperties)
+  const propertiesHash = createDefaultPropertiesHash(properties)
+
+  const result: any = useMemo(() => {
+    const result: any = { ...existingDefaultProperties }
+    for (const key in properties) {
+      if (key === 'children') {
+        continue
+      }
+      //TODO: this is not correctly merged but rather overwritten
+      const value = properties[key as keyof AllOptionalProperties]
+      if (value == null) {
+        continue
+      }
+      result[key] = value as any
     }
-    result[key] = value as any
-  }
-  return <DefaultPropertiesContext.Provider value={result}>{properties.children}</DefaultPropertiesContext.Provider>
+    return result
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [existingDefaultPropertiesHash, propertiesHash])
+
+  return <DefaultPropertiesContext.Provider value={result}>{children}</DefaultPropertiesContext.Provider>
 }

packages/react/src/font.tsx

@@ -41,6 +41,7 @@ export function useMeasureText(fontFamily?: string, fontWeight?: FontWeight) {
   const fontFamilies = useMemo(() => signal<FontFamilies | undefined>(undefined as any), [])
   fontFamilies.value = useFontFamilies()
   const font = useMemo(
+    // @ts-expect-error
     () => computedFont(propertiesSignal, fontFamilies, renderer),
     [fontFamilies, propertiesSignal, renderer],
   )

packages/react/src/fullscreen.tsx

@@ -52,6 +52,7 @@ export const Fullscreen: (props: FullscreenProperties & RefAttributes<Fullscreen
     )
     return createPortal(
       <group position-z={-distanceToCamera}>
+        {/* @ts-expect-error */}
         <Root ref={ref} {...properties} sizeX={sizeX} sizeY={sizeY} pixelSize={pixelSize}>
           {properties.children}
         </Root>

packages/react/src/icon.tsx

@@ -41,6 +41,7 @@ export const Icon: (props: IconProperties & RefAttributes<IconRef>) => ReactNode
     }
     const abortController = new AbortController()
     setupIcon<R3FEventMap>(
+      // @ts-expect-error
       internals,
       parent,
       propertySignals.style,
@@ -51,6 +52,7 @@ export const Icon: (props: IconProperties & RefAttributes<IconRef>) => ReactNode
     return () => abortController.abort()
   }, [parent, propertySignals, internals])
 
+  // @ts-expect-error
   useComponentInternals(ref, parent.root, propertySignals.style, internals, internals.interactionPanel)
 
   return (

packages/react/src/image.tsx

@@ -38,6 +38,7 @@ export const Image: (props: ImageProperties & RefAttributes<ImageRef>) => ReactN
     }
     const abortController = new AbortController()
     setupImage<R3FEventMap>(
+      // @ts-expect-error
       internals,
       parent,
       propertySignals.style,
@@ -49,12 +50,14 @@ export const Image: (props: ImageProperties & RefAttributes<ImageRef>) => ReactN
     return () => abortController.abort()
   }, [parent, propertySignals, internals])
 
+  // @ts-expect-error
   useComponentInternals(ref, parent.root, propertySignals.style, internals, internals.interactionPanel)
 
   return (
     <AddHandlers ref={outerRef} handlers={internals.handlers}>
       <primitive object={internals.interactionPanel} />
       <object3D matrixAutoUpdate={false} ref={innerRef}>
+        {/* @ts-expect-error */}
         <DefaultProperties {...internals.defaultProperties}>
           <ParentProvider value={internals}>{properties.children}</ParentProvider>
         </DefaultProperties>

packages/react/src/input.tsx

@@ -2,6 +2,7 @@ import { forwardRef, ReactNode, RefAttributes, useEffect, useMemo, useRef } from
 import { Object3D, Vector2Tuple } from 'three'
 import { useParent } from './context.js'
 import { AddHandlers, R3FEventMap, usePropertySignals } from './utils.js'
+
 import {
   FontFamilies,
   InputProperties as BaseInputProperties,
@@ -58,6 +59,7 @@ export const Input: (props: InputProperties & RefAttributes<InputRef>) => ReactN
     }
     const abortController = new AbortController()
     setupInput<R3FEventMap>(
+      // @ts-expect-error
       internals,
       parent,
       propertySignals.style,
@@ -73,6 +75,7 @@ export const Input: (props: InputProperties & RefAttributes<InputRef>) => ReactN
     ref,
     parent.root,
     propertySignals.style,
+    // @ts-expect-error
     internals,
     internals.interactionPanel,
     useMemo(

packages/react/src/portal.tsx

@@ -175,6 +175,7 @@ export const Portal: (props: PortalProperties & RefAttributes<PortalRef>) => Rea
           usePortalStore,
           null,
         )}
+        {/* @ts-expect-error */}
         <Image src={texture} objectFit="fill" keepAspectRatio={false} {...props} ref={imageRef} />
       </>
     )

packages/react/src/ref.ts

@@ -13,6 +13,7 @@ import {
   createInputState,
   createContentState,
   RootContext,
+  ReadonlyDeepSignalObject,
 } from '@pmndrs/uikit/internals'
 import { ForwardedRef, RefObject, useImperativeHandle } from 'react'
 import { Vector2Tuple, Mesh, Matrix4 } from 'three'
@@ -84,7 +85,7 @@ export type ComponentInternals<T = ContainerProperties> = {
   getComputedProperty<K extends keyof T>(key: K): T[K] | undefined
 }
 
-export function useComponentInternals<T, O = {}>(
+export function useComponentInternals<T extends object, O = {}>(
   ref: ForwardedRef<ComponentInternals<T> & O>,
   root: RootContext,
   styleSignal: Signal<T | undefined>,
@@ -101,7 +102,7 @@ export function useComponentInternals<T, O = {}>(
   > & {
     isClipped?: Signal<boolean>
     scrollPosition?: Signal<Vector2Tuple>
-    mergedProperties: Signal<MergedProperties>
+    mergedProperties: ReadonlyDeepSignalObject<T>
   },
   interactionPanel: Mesh | RefObject<Mesh | null>,
   additional?: O,
@@ -111,11 +112,10 @@ export function useComponentInternals<T, O = {}>(
       internals
     return {
       isVisible: internals.isVisible,
-      setStyle: (style: T | undefined, replace?: boolean) =>
-        (styleSignal.value = replace ? style : ({ ...styleSignal.value, ...style } as T)),
+      setStyle: (style, replace) => (styleSignal.value = replace ? style : ({ ...styleSignal.value, ...style } as T)),
       getStyle: () => styleSignal.peek(),
-      getComputedProperty: <K extends keyof T>(key: K) =>
-        untracked(() => internals.mergedProperties.value.read<T[K] | undefined>(key as string, undefined)),
+      // @ts-expect-error
+      getComputedProperty: (key) => internals.mergedProperties['$' + key]!.peek(),
       pixelSize: root.pixelSize,
       root,
       borderInset,

packages/react/src/root.tsx

@@ -69,6 +69,7 @@ export const Root: (props: RootProperties & RefAttributes<RootRef>) => ReactNode
     }
     const abortController = new AbortController()
     setupRoot<R3FEventMap>(
+      // @ts-expect-error
       internals,
       propertySignals.style,
       propertySignals.properties,
@@ -88,12 +89,14 @@ export const Root: (props: RootProperties & RefAttributes<RootRef>) => ReactNode
     whileOnFrameRef.current = false
   })
 
+  // @ts-expect-error
   useComponentInternals(ref, internals.root, propertySignals.style, internals, internals.interactionPanel)
 
   return (
     <AddHandlers handlers={internals.handlers} ref={outerRef}>
       <primitive object={internals.interactionPanel} />
       <object3D matrixAutoUpdate={false} ref={innerRef}>
+        {/* @ts-expect-error */}
         <DefaultProperties {...internals.defaultProperties}>
           <ParentProvider value={internals}>{properties.children}</ParentProvider>
         </DefaultProperties>

packages/react/src/svg.tsx

@@ -38,6 +38,7 @@ export const Svg: (props: SvgProperties & RefAttributes<SvgRef>) => ReactNode =
     }
     const abortController = new AbortController()
     setupSvg<R3FEventMap>(
+      // @ts-expect-error
       internals,
       parent,
       propertySignals.style,
@@ -49,13 +50,15 @@ export const Svg: (props: SvgProperties & RefAttributes<SvgRef>) => ReactNode =
     return () => abortController.abort()
   }, [parent, propertySignals, internals])
 
+  // @ts-expect-error
   useComponentInternals(ref, parent.root, propertySignals.style, internals, internals.interactionPanel)
 
   return (
     <AddHandlers ref={outerRef} handlers={internals.handlers}>
       <primitive object={internals.interactionPanel} />
       <primitive object={internals.centerGroup} />
       <object3D matrixAutoUpdate={false} ref={innerRef}>
+        {/* @ts-expect-error */}
         <DefaultProperties {...internals.defaultProperties}>
           <ParentProvider value={internals}>{properties.children}</ParentProvider>
         </DefaultProperties>

packages/react/src/text.tsx

@@ -46,6 +46,7 @@ export const Text: (props: TextProperties & RefAttributes<TextRef>) => ReactNode
     }
     const abortController = new AbortController()
     setupText<R3FEventMap>(
+      // @ts-expect-error
       internals,
       parent,
       propertySignals.style,
@@ -56,6 +57,7 @@ export const Text: (props: TextProperties & RefAttributes<TextRef>) => ReactNode
     return () => abortController.abort()
   }, [parent, propertySignals, internals])
 
+  // @ts-expect-error
   useComponentInternals(ref, parent.root, propertySignals.style, internals, internals.interactionPanel)
 
   return (