@solidrt/core 0.0.1-exp.1

package/jsx-runtime.d.ts

@@ -0,0 +1,34 @@
+import type {
+  WindowProps,
+  CircleProps,
+  RectProps,
+  OvalProps,
+  PathProps,
+  ViewProps,
+  TextProps,
+  TextureProps,
+  AudioProps,
+  LayoutProps
+} from "./src/types"
+import type { JSX as SolidJSX } from "@solidjs/signals"
+
+export namespace JSX {
+  type Element = SolidJSX.Element
+  type ElementChildrenAttribute = SolidJSX.ElementChildrenAttribute
+
+  interface IntrinsicElements {
+    window: WindowProps
+    view: ViewProps
+    text: TextProps & LayoutProps
+    rect: RectProps & LayoutProps
+    oval: OvalProps & LayoutProps
+    path: PathProps & LayoutProps
+    texture: TextureProps & LayoutProps
+    audio: AudioProps
+    "d-rect": RectProps
+    "d-oval": OvalProps
+    "d-path": PathProps
+    "d-texture": TextureProps
+    "d-text": TextProps
+  }
+}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@solidrt/core",
+  "version": "0.0.1-exp.1",
+  "type": "module",
+  "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./jsx-runtime": "./jsx-runtime.d.ts",
+    "./jsx-runtime-dev": "./jsx-runtime.d.ts"
+  },
+  "files": [
+    "src/",
+    "jsx-runtime.d.ts"
+  ],
+  "peerDependencies": {
+    "@solidjs/signals": "2.0.0-beta.7",
+    "@solidjs/universal": "2.0.0-beta.7"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./renderer"

package/src/renderer.ts

@@ -0,0 +1,143 @@
+import { createRoot, createEffect } from "@solidjs/signals"
+import { createRenderer } from "@solidjs/universal"
+import { attachWindow } from "./window"
+
+export let nodes = new Map()
+
+// export { registerPropHandler, registerNodeCleanup } from "./hooks"
+
+type ElementType = string
+
+// ProxyNode: Lightweight proxy for Rust-side nodes
+// Caches parent/child references to avoid FFI calls for tree queries
+interface ProxyNode {
+  readonly id: number
+  readonly elementType: ElementType
+  parent?: ProxyNode
+  children: ProxyNode[]
+}
+
+let id = 1
+function createProxyNode(elementType: ElementType): ProxyNode {
+  let node = { id, elementType, children: [] }
+  nodes.set(id, node)
+  id += 1
+  return node
+}
+
+export let {
+  effect,
+  memo,
+  createComponent,
+  createElement,
+  createTextNode,
+  insertNode,
+  insert,
+  spread,
+  setProp,
+  mergeProps,
+  applyRef,
+  ref,
+} = createRenderer<ProxyNode>({
+  createElement: (elementType: string): ProxyNode => {
+    let proxy = createProxyNode(elementType)
+
+    console.log("createElement", proxy.id, elementType)
+
+    if (elementType === "window") ffi.createRoot(proxy.id)
+    else ffi.createNode(proxy.id, elementType)
+
+    return proxy
+  },
+
+  createTextNode: (value: string): ProxyNode => {
+    let proxy = createProxyNode("span")
+    console.log("createTextNode", proxy.id, value)
+    ffi.createNode(proxy.id, "span")
+    ffi.setProperty(proxy.id, "text", "" + value)
+    return proxy
+  },
+
+  replaceText: (node: ProxyNode, value: string): void => {
+    console.log("replaceText", node.id, value)
+    ffi.setProperty(node.id, "text", "" + value)
+  },
+
+  isTextNode: (node: ProxyNode): boolean => node?.elementType === "span",
+  setProperty: <T>(node: ProxyNode, name: string, value: T, prev?: T): void => {
+    if (!node) return
+
+    console.log("setProperty", node.id, name, value)
+    // if (runPropHandlers(node.id, name, value, prev)) return
+
+    ffi.setProperty(node.id, name, value)
+  },
+
+  insertNode: (parent: ProxyNode, node: ProxyNode, anchor?: ProxyNode): void => {
+    if (!node) return
+
+    if (parent) {
+      node.parent = parent
+
+      if (!anchor) {
+        parent.children.push(node)
+      } else {
+        let index = parent.children.indexOf(anchor)
+        if (index === -1) {
+          parent.children.push(node)
+        } else {
+          parent.children.splice(index, 0, node)
+        }
+      }
+
+      console.log("insertNode", parent.id, node.id, anchor?.id ?? "")
+
+      if (anchor) ffi.insertNode(parent.id, node.id, anchor.id)
+      else ffi.insertNode(parent.id, node.id)
+    }
+  },
+
+  removeNode: (parent: ProxyNode, node: ProxyNode): void => {
+    if (!node || !parent) return
+
+    console.log("removeNode", parent.id, node.id)
+
+    // Update JS tree references
+    let index = parent.children.indexOf(node)
+    if (index !== -1) {
+      parent.children.splice(index, 1)
+    }
+    node.parent = undefined
+
+    ffi.deleteNode(parent.id, node.id)
+
+    // Recursively clean up node and all descendants
+    // let cleanup = (n: ProxyNode) => {
+    //   for (let child of n.children) cleanup(child)
+    //   nodes.delete(n.id)
+    //   runNodeCleanup(n.id)
+    // }
+    // cleanup(node)
+  },
+
+  getParentNode: (node: ProxyNode) => node?.parent,
+  getFirstChild: (node: ProxyNode) => node?.children[0],
+  getNextSibling: (node: ProxyNode) => {
+    let parent = node?.parent
+    if (!parent) return undefined
+    let index = parent.children.indexOf(node)
+    if (index === -1) return undefined
+    return parent.children[index + 1]
+  },
+})
+
+export function render(code: () => any) {
+  createRoot(() => {
+    let root = code()
+    if (!root || root.elementType !== "window") {
+      throw new Error("render() root must be a <window> element")
+    }
+    attachWindow(root.id)
+    insert(null, root)
+  })
+}

package/src/types.d.ts

@@ -0,0 +1,172 @@
+import type { Accessor, JSX as SolidJSX } from "@solidjs/signals"
+
+declare global {
+  let ffi: {
+    createRoot(id: number): void
+    createNode(id: number, kind: string): void
+    insertNode(parentId: number, nodeId: number, anchorId?: number): void
+    deleteNode(parentId: number, nodeId: number): void
+    setProperty(nodeId: number, name: string, value: unknown): void
+  }
+}
+
+type Children = SolidJSX.Element
+
+type OA<T> = T | Accessor<T>
+
+interface FlexboxProps {
+  gap?: number
+  rowGap?: number
+  columnGap?: number
+  flexGrow?: number
+  flexShrink?: number
+  flexBasis?: number
+
+  flexDirection?: "row" | "column" | "row-reverse" | "column-reverse"
+  flexWrap?: "nowrap" | "wrap" | "wrap-reverse"
+  alignSelf?: "start" | "end" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch"
+  alignItems?: "start" | "end" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch"
+  alignContent?: "start" | "end" | "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-evenly" | "space-around"
+  justifyContent?: "start" | "end" | "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-evenly" | "space-around"
+}
+
+interface GridProps {
+  gridAutoFlow?: "row" | "column" | "row-dense" | "column-dense"
+  gridAutoColumns?: number
+  gridAutoRows?: number
+  gridColumnStart?: number
+  gridColumnEnd?: number
+  gridRowStart?: number
+  gridRowEnd?: number
+  gridTemplateColumns?: string
+  gridTemplateRows?: string
+}
+
+type Dimension = number | "auto" | `${number}%`
+
+export interface LayoutProps extends FlexboxProps, GridProps {
+  display?: "block" | "flex" | "grid" | "none"
+  position?: "relative" | "absolute"
+
+  top?: Dimension
+  right?: Dimension
+  bottom?: Dimension
+  left?: Dimension
+
+  width?: Dimension
+  height?: Dimension
+  minWidth?: Dimension
+  minHeight?: Dimension
+  maxWidth?: Dimension
+  maxHeight?: Dimension
+
+  padding?: Dimension
+  paddingTop?: Dimension
+  paddingRight?: Dimension
+  paddingBottom?: Dimension
+  paddingLeft?: Dimension
+
+  margin?: Dimension
+  marginTop?: Dimension
+  marginRight?: Dimension
+  marginBottom?: Dimension
+  marginLeft?: Dimension
+
+  overflow?: "visible" | "clip" | "hidden" | "scroll"
+}
+
+import type { LCH } from "./color"
+export type Color = string | LCH
+
+export interface PaintProps {
+  color?: Color
+  blendMode?: "clear" | "source" | "destination" | "source-over" | "destination-over" | "source-in" | "destination-in" | "source-out" | "destination-out" | "source-atop" | "destination-atop" | "xor" | "plus" | "modulate" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "multiply" | "hue" | "saturation" | "color" | "luminosity"
+  drawStyle?: "fill" | "stroke" | "stroke-and-fill"
+  strokeCap?: "butt" | "round" | "square"
+  strokeJoin?: "miter" | "round" | "bevel"
+  strokeMiter?: number
+  strokeWidth?: number
+}
+
+export interface TransformProps {
+  rotate?: OA<number>
+  scale?: OA<number>
+  x?: OA<number>
+  y?: OA<number>
+}
+
+export interface PointerProps {
+  onPointerDown?: Function
+  onPointerUp?: Function
+  onPointerMove?: Function
+  onPointerEnter?: Function
+  onPointerLeave?: Function
+  onWheel?: Function
+  onFocus?: Function
+  onBlur?: Function
+  onKeyDown?: Function
+  onKeyUp?: Function
+  onTextInput?: Function
+  pointerEvents?: "auto" | "none" | "all"
+}
+
+interface Position {
+  x?: number
+  y?: number
+}
+
+// Primitives
+
+export interface WindowProps extends LayoutProps {
+  children?: Children
+  title?: string
+  vsync?: boolean
+  fps?: boolean
+}
+
+export interface ViewProps extends LayoutProps, TransformProps, PointerProps {
+  children?: Children
+  trace?: boolean
+}
+
+export interface AudioProps {
+  src?: Uint8Array
+  play?: number
+}
+
+// draw primitives
+
+export interface RectProps extends Position, PaintProps, PointerProps {
+  w?: number
+  h?: number
+  r?: number
+}
+
+export interface OvalProps extends Position, PaintProps, PointerProps {
+  w?: number
+  h?: number
+}
+
+export interface PathProps extends Position, PaintProps, PointerProps {
+  d?: string
+  fillRule?: "nonZero" | "evenOdd"
+}
+
+export interface TextProps extends PaintProps {
+  children: Children
+  fontSize?: number
+  fontStyle?: "normal" | "italic"
+  textAlign?: "left" | "right" | "center" | "justify"
+  maxLines?: number
+}
+
+export interface TextureProps extends Position {
+  src?: number
+  imageWidth?: number
+  imageHeight?: number
+  srcX?: number
+  srcY?: number
+  srcW?: number
+  srcH?: number
+  params?: Record<string, number>
+}

package/src/window.ts

@@ -0,0 +1,55 @@
+import { onCleanup, onSettled } from "@solidjs/signals"
+
+// ------ Animation frames ----------------
+
+let nextFrameId = 1
+let animationFrames = new Map<number, Function>()
+
+export let requestAnimationFrame = (fn: (tick: number) => void) => {
+  let id = nextFrameId++
+  animationFrames.set(id, fn)
+  return id
+}
+
+export let cancelAnimationFrame = (id: number) => {
+  animationFrames.delete(id)
+}
+
+export function onRender(fn: (tick: number) => void) {
+  let frameId: number = null!
+
+  let extendedFn = (tick: number) => {
+    fn(tick)
+    frameId = requestAnimationFrame(extendedFn)
+  }
+
+  frameId = requestAnimationFrame(extendedFn)
+  onCleanup(() => cancelAnimationFrame(frameId))
+}
+
+// ------ Window ----------------
+
+export function attachWindow(_nodeId: number) {
+  let unsubscribe: () => void = null!
+
+  onSettled(() => {
+    unsubscribe = Flux.on("render", (time: number) => {
+      if (animationFrames.size > 0) {
+        let frames = animationFrames
+        animationFrames = new Map()
+
+        let t = (time * 1000) | 0
+        for (let fn of frames.values()) fn(t)
+      }
+
+      draw()
+    })
+
+    // trigger first draw
+    draw()
+  })
+
+  onCleanup(() => {
+    if (unsubscribe) unsubscribe()
+  })
+}