@barefootjs/xyflow 0.1.0

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@barefootjs/xyflow",
+  "version": "0.1.0",
+  "description": "Signal-based xyflow wrapper for BarefootJS",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/xyflow.browser.min.js",
+  "jsdelivr": "./dist/xyflow.browser.min.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "umd": "./dist/xyflow.browser.min.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "bun run build:js && bun run build:browser && bun run build:types",
+    "build:js": "bun build ./src/index.ts --outdir ./dist --format esm --external '@barefootjs/client' --external '@barefootjs/client/runtime' --external '@barefootjs/client/reactive'",
+    "build:browser": "bun build ./src/index.ts --outdir ./dist --entry-naming 'xyflow.browser.min.[ext]' --format esm --minify --sourcemap --external '@barefootjs/client' --external '@barefootjs/client/runtime' --external '@barefootjs/client/reactive'",
+    "build:types": "tsgo --emitDeclarationOnly --outDir ./dist",
+    "test": "bun test src/ && bun run typecheck:tests",
+    "typecheck:tests": "tsgo --noEmit -p src/__tests__/tsconfig.json",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "xyflow",
+    "react-flow",
+    "graph",
+    "node-editor",
+    "signals",
+    "reactive",
+    "barefoot"
+  ],
+  "author": "kobaken <kentafly88@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/piconic-ai/barefootjs",
+    "directory": "packages/xyflow"
+  },
+  "peerDependencies": {
+    "@barefootjs/client": ">=0.0.1",
+    "@barefootjs/jsx": ">=0.0.1"
+  },
+  "dependencies": {
+    "@xyflow/system": "^0.0.76"
+  },
+  "devDependencies": {
+    "@barefootjs/jsx": "workspace:*",
+    "@barefootjs/test": "workspace:*",
+    "typescript": "^5.0.0"
+  }
+}

package/src/__tests__/clamp-drag-position.test.ts

@@ -0,0 +1,111 @@
+import { describe, expect, test } from 'bun:test'
+import type { InternalNodeBase, NodeLookup } from '@xyflow/system'
+import { clampDragPositionToParent } from '../flow-subsystems'
+import type { NodeBase } from '../types'
+
+// Build a minimal NodeLookup that satisfies the bits clampDragPositionToParent
+// reads (`internal.measured.width/height`, `internal.internals.userNode`).
+// adoptUserNodes-produced internals carry many more fields, but the clamp
+// helper is intentionally narrow: anything outside its read set goes
+// untouched at runtime.
+function makeLookup(
+  nodes: Array<Partial<NodeBase> & { id: string; measured?: { width: number; height: number } }>,
+): NodeLookup<InternalNodeBase<NodeBase>> {
+  const m = new Map<string, InternalNodeBase<NodeBase>>()
+  for (const n of nodes) {
+    const userNode = { position: { x: 0, y: 0 }, data: {}, ...n } as NodeBase
+    const internal = {
+      ...userNode,
+      measured: n.measured,
+      internals: {
+        positionAbsolute: { x: 0, y: 0 },
+        z: 0,
+        userNode,
+      },
+    } as unknown as InternalNodeBase<NodeBase>
+    m.set(n.id, internal)
+  }
+  return m as NodeLookup<InternalNodeBase<NodeBase>>
+}
+
+describe("clampDragPositionToParent — extent: 'parent'", () => {
+  const parent = {
+    id: 'p',
+    position: { x: 0, y: 0 },
+    measured: { width: 200, height: 100 },
+  }
+
+  test('clamps a child whose proposed relative position would overflow on +x', () => {
+    const lookup = makeLookup([
+      parent,
+      { id: 'c', parentId: 'p', extent: 'parent', measured: { width: 40, height: 30 } },
+    ])
+    // parent 200×100, child 40×30 → max relative x = 160, max y = 70
+    const clamped = clampDragPositionToParent({ x: 500, y: 500 }, 'c', lookup)
+    expect(clamped).toEqual({ x: 160, y: 70 })
+  })
+
+  test('clamps to 0 on the negative side', () => {
+    const lookup = makeLookup([
+      parent,
+      { id: 'c', parentId: 'p', extent: 'parent', measured: { width: 40, height: 30 } },
+    ])
+    const clamped = clampDragPositionToParent({ x: -50, y: -10 }, 'c', lookup)
+    expect(clamped).toEqual({ x: 0, y: 0 })
+  })
+
+  test('passes through when child fits and is inside the rect', () => {
+    const lookup = makeLookup([
+      parent,
+      { id: 'c', parentId: 'p', extent: 'parent', measured: { width: 40, height: 30 } },
+    ])
+    const clamped = clampDragPositionToParent({ x: 80, y: 40 }, 'c', lookup)
+    expect(clamped).toEqual({ x: 80, y: 40 })
+  })
+
+  test('returns the input unchanged for nodes without parentId', () => {
+    const lookup = makeLookup([{ id: 'c', measured: { width: 40, height: 30 } }])
+    const proposed = { x: 1234, y: -5 }
+    expect(clampDragPositionToParent(proposed, 'c', lookup)).toEqual(proposed)
+  })
+
+  test('returns the input unchanged when the node has parentId but extent is not "parent"', () => {
+    const lookup = makeLookup([
+      parent,
+      // No extent set → drag should NOT be clamped (xyflow contract).
+      { id: 'c', parentId: 'p', measured: { width: 40, height: 30 } },
+    ])
+    const proposed = { x: 999, y: 999 }
+    expect(clampDragPositionToParent(proposed, 'c', lookup)).toEqual(proposed)
+  })
+
+  test('returns the input unchanged when the parent is missing from the lookup', () => {
+    const lookup = makeLookup([
+      // Parent intentionally absent — drag handler must not throw.
+      { id: 'c', parentId: 'missing', extent: 'parent', measured: { width: 40, height: 30 } },
+    ])
+    const proposed = { x: 999, y: 999 }
+    expect(clampDragPositionToParent(proposed, 'c', lookup)).toEqual(proposed)
+  })
+
+  test('returns the input unchanged when measurements are still pending', () => {
+    const lookup = makeLookup([
+      // No `measured` on the parent. Drag begins before ResizeObserver
+      // has fired — clamp would otherwise pin to 0/0 and prevent any
+      // drag motion.
+      { id: 'p', position: { x: 0, y: 0 } },
+      { id: 'c', parentId: 'p', extent: 'parent', measured: { width: 40, height: 30 } },
+    ])
+    const proposed = { x: 999, y: 999 }
+    expect(clampDragPositionToParent(proposed, 'c', lookup)).toEqual(proposed)
+  })
+
+  test('clamps to 0 on each axis when the child is bigger than the parent', () => {
+    const lookup = makeLookup([
+      parent,
+      { id: 'c', parentId: 'p', extent: 'parent', measured: { width: 999, height: 999 } },
+    ])
+    // pw - myW < 0 → max{0, …} = 0; same for y.
+    expect(clampDragPositionToParent({ x: 50, y: 50 }, 'c', lookup)).toEqual({ x: 0, y: 0 })
+  })
+})

package/src/__tests__/compat.test.ts

@@ -0,0 +1,157 @@
+import { describe, test, expect } from 'bun:test'
+import { createRoot } from '@barefootjs/client'
+import { createFlowStore } from '../store'
+
+/**
+ * Tests for applyNodeChanges / applyEdgeChanges logic
+ * used inside compat.ts (useNodesState, useEdgesState).
+ *
+ * We test the store actions directly since compat hooks require
+ * context which needs DOM.
+ */
+describe('Store actions (compat foundation)', () => {
+  test('addEdge creates a new edge', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        nodes: [
+          { id: '1', position: { x: 0, y: 0 }, data: {} },
+          { id: '2', position: { x: 100, y: 0 }, data: {} },
+        ],
+      })
+
+      store.addEdge({ id: 'e1-2', source: '1', target: '2' })
+      expect(store.edges()).toHaveLength(1)
+      expect(store.edges()[0]).toEqual({ id: 'e1-2', source: '1', target: '2' })
+    })
+  })
+
+  test('addEdge appends to existing edges', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        edges: [{ id: 'e1', source: '1', target: '2' }],
+      })
+
+      store.addEdge({ id: 'e2', source: '2', target: '3' })
+      expect(store.edges()).toHaveLength(2)
+      expect(store.edges().map(e => e.id)).toEqual(['e1', 'e2'])
+    })
+  })
+
+  test('deleteElements removes specific edges only', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        edges: [
+          { id: 'e1', source: '1', target: '2' },
+          { id: 'e2', source: '2', target: '3' },
+          { id: 'e3', source: '3', target: '4' },
+        ],
+      })
+
+      store.deleteElements({ edges: [{ id: 'e2', source: '2', target: '3' }] })
+      expect(store.edges()).toHaveLength(2)
+      expect(store.edges().map(e => e.id)).toEqual(['e1', 'e3'])
+    })
+  })
+
+  test('deleteElements removes nodes and their connected edges', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        nodes: [
+          { id: 'a', position: { x: 0, y: 0 }, data: {} },
+          { id: 'b', position: { x: 100, y: 0 }, data: {} },
+          { id: 'c', position: { x: 200, y: 0 }, data: {} },
+        ],
+        edges: [
+          { id: 'ab', source: 'a', target: 'b' },
+          { id: 'bc', source: 'b', target: 'c' },
+          { id: 'ac', source: 'a', target: 'c' },
+        ],
+      })
+
+      // Remove node b
+      store.deleteElements({ nodes: [{ id: 'b', position: { x: 100, y: 0 }, data: {} }] })
+
+      expect(store.nodes().map(n => n.id)).toEqual(['a', 'c'])
+      // ab and bc are connected to b, should be removed. ac survives.
+      expect(store.edges().map(e => e.id)).toEqual(['ac'])
+    })
+  })
+
+  test('unselectNodesAndEdges clears all selection', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        nodes: [
+          { id: '1', position: { x: 0, y: 0 }, data: {}, selected: true },
+          { id: '2', position: { x: 100, y: 0 }, data: {}, selected: false },
+          { id: '3', position: { x: 200, y: 0 }, data: {}, selected: true },
+        ],
+        edges: [
+          { id: 'e1', source: '1', target: '2', selected: true },
+        ],
+      })
+
+      store.unselectNodesAndEdges()
+
+      expect(store.nodes().filter(n => n.selected)).toHaveLength(0)
+      expect(store.edges().filter(e => e.selected)).toHaveLength(0)
+    })
+  })
+
+  test('unselectNodesAndEdges with specific nodes', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        nodes: [
+          { id: '1', position: { x: 0, y: 0 }, data: {}, selected: true },
+          { id: '2', position: { x: 100, y: 0 }, data: {}, selected: true },
+        ],
+      })
+
+      // Only deselect node 1
+      store.unselectNodesAndEdges({
+        nodes: [{ id: '1', position: { x: 0, y: 0 }, data: {}, selected: true }],
+      })
+
+      expect(store.nodes().find(n => n.id === '1')?.selected).toBeFalsy()
+      expect(store.nodes().find(n => n.id === '2')?.selected).toBeTruthy()
+    })
+  })
+
+  test('setNodes with updater function', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        nodes: [
+          { id: '1', position: { x: 0, y: 0 }, data: { label: 'A' } },
+        ],
+      })
+
+      store.setNodes(prev => [
+        ...prev,
+        { id: '2', position: { x: 100, y: 0 }, data: { label: 'B' } },
+      ])
+
+      expect(store.nodes()).toHaveLength(2)
+      expect(store.nodes()[1].id).toBe('2')
+    })
+  })
+
+  test('setEdges with updater function', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        edges: [{ id: 'e1', source: '1', target: '2' }],
+      })
+
+      store.setEdges(prev => prev.filter(e => e.id !== 'e1'))
+      expect(store.edges()).toHaveLength(0)
+    })
+  })
+
+  test('viewport can be updated', () => {
+    createRoot(() => {
+      const store = createFlowStore()
+
+      store.setViewport({ x: 100, y: 200, zoom: 2.5 })
+      expect(store.viewport()).toEqual({ x: 100, y: 200, zoom: 2.5 })
+      expect(store.getTransform()).toEqual([100, 200, 2.5])
+    })
+  })
+})

package/src/__tests__/host-element-store.test.ts

@@ -0,0 +1,33 @@
+/**
+ * `<Flow renderNode={Fn}>` hydrates the rendered bridge as a top-level
+ * scope outside Flow's `FlowContext.Provider`, so consumers that look up
+ * the store via `useFlow()` get back `undefined`. As an escape hatch,
+ * `attachFlowSubsystems` stamps the host `<div class="bf-flow">` with
+ * `__bfFlowStore` so children can walk up the DOM and read the store
+ * without going through the context system.
+ */
+import { beforeAll, describe, expect, test } from 'bun:test'
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
+
+beforeAll(() => {
+  if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register()
+})
+
+describe('attachFlowSubsystems exposes the store on the host element', () => {
+  test('sets `__bfFlowStore` on the element it attaches to', async () => {
+    // Lazy import so happy-dom globals are in place before xyflow loads.
+    const { attachFlowSubsystems } = await import('../flow-subsystems')
+    const { createFlowStore } = await import('../store')
+
+    const el = document.createElement('div')
+    el.className = 'bf-flow'
+    document.body.appendChild(el)
+
+    // biome-ignore lint/suspicious/noExplicitAny: minimal props for unit test
+    const store = createFlowStore({} as any)
+    // biome-ignore lint/suspicious/noExplicitAny: minimal props for unit test
+    attachFlowSubsystems(el, store as any, {} as any)
+
+    expect((el as HTMLElement & { __bfFlowStore?: unknown }).__bfFlowStore).toBe(store)
+  })
+})

package/src/__tests__/jsx-smoke.test.ts

@@ -0,0 +1,33 @@
+import { describe, test, expect } from 'bun:test'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { renderToTest } from '@barefootjs/test'
+
+// Smoke test for #1081 step 1: JSX infra wired into @barefootjs/xyflow.
+// We feed `jsx-smoke.tsx` (a real JSX file living inside this package's
+// source tree) through the JSX → IR pipeline and assert the analyzer
+// accepts it. If the package's tsconfig or `@barefootjs/jsx` JSX runtime
+// resolution regresses, this test fails.
+const smokeSource = readFileSync(resolve(__dirname, 'jsx-smoke.tsx'), 'utf-8')
+
+describe('JSX infra smoke (#1081 step 1)', () => {
+  const result = renderToTest(smokeSource, 'jsx-smoke.tsx', 'JsxSmoke')
+
+  test('JSX → IR pipeline reports no compiler errors', () => {
+    expect(result.errors).toEqual([])
+  })
+
+  test('component is recognized as a client component', () => {
+    expect(result.isClient).toBe(true)
+  })
+
+  test('createSignal is tracked as a reactive signal', () => {
+    expect(result.signals).toContain('count')
+  })
+
+  test('IR exposes the rendered <button>', () => {
+    const button = result.find({ tag: 'button' })
+    expect(button).not.toBeNull()
+    expect(button!.props['type']).toBe('button')
+  })
+})

package/src/__tests__/jsx-smoke.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+// JSX infra smoke component for the @barefootjs/xyflow package.
+//
+// This file is the proof that the package's tsconfig accepts JSX with
+// `@barefootjs/jsx` as the JSX import source — see #1081 step 1.
+// It is not exported from `src/index.ts`; it exists only so `jsx-smoke.test.ts`
+// can feed it through `renderToTest()` and assert the JSX → IR pipeline
+// accepts a "use client" component declared inside this package.
+//
+// Real renderer migrations (Flow, Background, MiniMap, Controls, Handle,
+// Edge, NodeWrapper) land in subsequent steps of #1081.
+
+import { createSignal } from '@barefootjs/client'
+
+export function JsxSmoke() {
+  const [count, setCount] = createSignal(0)
+  return (
+    <button type="button" onClick={() => setCount(count() + 1)}>
+      count: {count()}
+    </button>
+  )
+}

package/src/__tests__/node-type-dispatch.test.ts

@@ -0,0 +1,104 @@
+/**
+ * Boundary contract tests for `dispatchNodeType` — the helper that
+ * `FlowNodeTypeBridge` funnels imperative and JSX-component shim
+ * `nodeTypes` entries through. Without these tests, the IR test in
+ * `ui/components/ui/xyflow/index.test.tsx` only verifies the bridge's
+ * structural shape (signals, memos, effect count) — the `instanceof Node`
+ * branch lives inside the effect body where IR analysis can't see it.
+ *
+ * Regression guard for piconic-ai/barefootjs#1236 (xyflow: nodeTypes
+ * map can't accept 'use client' JSX components).
+ */
+
+import { beforeAll, describe, expect, test } from 'bun:test'
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
+
+beforeAll(() => {
+  if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register()
+})
+
+describe('dispatchNodeType', () => {
+  test('imperative entry: mutates the host via `this`, returns void', async () => {
+    const { dispatchNodeType } = await import('../node-type-dispatch')
+
+    const host = document.createElement('div')
+
+    const imperative: (this: HTMLElement, props: { id: string }) => void = function (props) {
+      const child = document.createElement('span')
+      child.textContent = `imperative:${props.id}`
+      this.appendChild(child)
+    }
+
+    dispatchNodeType(host, imperative as never, { id: 'a' } as never)
+
+    expect(host.children).toHaveLength(1)
+    expect(host.firstChild?.textContent).toBe('imperative:a')
+  })
+
+  test("JSX-component shim entry: returned Node is appended to the host (the #1236 contract)", async () => {
+    const { dispatchNodeType } = await import('../node-type-dispatch')
+
+    const host = document.createElement('div')
+
+    // Mirrors the bundler-emitted shim shape for a `'use client'` `.tsx`
+    // component: ignores `this`, returns a DOM `Node`.
+    const jsxShim: (this: HTMLElement, props: { id: string }) => Node = (props) => {
+      const node = document.createElement('div')
+      node.textContent = `jsx:${props.id}`
+      return node
+    }
+
+    dispatchNodeType(host, jsxShim as never, { id: 'b' } as never)
+
+    expect(host.children).toHaveLength(1)
+    expect(host.firstChild?.textContent).toBe('jsx:b')
+  })
+
+  test('JSX-component shim returning a DocumentFragment unwraps into the host', async () => {
+    const { dispatchNodeType } = await import('../node-type-dispatch')
+
+    const host = document.createElement('div')
+
+    // `createComponent` shims that produce multiple top-level nodes
+    // wrap them in a DocumentFragment. `appendChild` of a fragment
+    // unwraps its children into the host — this exercise pins that
+    // behaviour so a future "only HTMLElement" tightening of the
+    // guard is caught.
+    const fragmentShim: () => Node = () => {
+      const frag = document.createDocumentFragment()
+      const a = document.createElement('span')
+      a.textContent = 'one'
+      const b = document.createElement('span')
+      b.textContent = 'two'
+      frag.appendChild(a)
+      frag.appendChild(b)
+      return frag
+    }
+
+    dispatchNodeType(host, fragmentShim as never, {} as never)
+
+    expect(host.children).toHaveLength(2)
+    expect(host.children[0]?.textContent).toBe('one')
+    expect(host.children[1]?.textContent).toBe('two')
+  })
+
+  test('non-Node return value is ignored (imperative entries that accidentally return a primitive)', async () => {
+    const { dispatchNodeType } = await import('../node-type-dispatch')
+
+    const host = document.createElement('div')
+
+    // Defensive: an imperative entry that accidentally returns a
+    // non-Node value (e.g. a number from a `.forEach` chain) MUST NOT
+    // trigger an `appendChild` — the `instanceof Node` guard is the
+    // only thing keeping the imperative path safe.
+    const stray: (this: HTMLElement) => unknown = function () {
+      this.dataset.touched = '1'
+      return 42
+    }
+
+    dispatchNodeType(host, stray as never, {} as never)
+
+    expect(host.dataset.touched).toBe('1')
+    expect(host.children).toHaveLength(0)
+  })
+})