@opncanvas/engine

The core of the design system - pure updater functions for immutable schema mutations. Framework-agnostic and easily testable.

Installation

npm install @opncanvas/engine @opncanvas/schema

Philosophy

The engine uses pure functions that return new schema objects instead of mutating existing ones. This makes it:

• Predictable: Same input always produces same output
• Testable: No side effects to mock
• Framework-agnostic: Works with React, Vue, Svelte, or vanilla JS
• Performance-friendly: Immutable updates enable efficient change detection

Usage

With React

import { useState } from 'react'
import { FormSchema } from '@opncanvas/schema'
import { updateNodeProperty, addNode } from '@opncanvas/engine'

function Editor() {
  const [schema, setSchema] = useState<FormSchema>(initialSchema)

  // Update a single property
  const handleLabelChange = (nodeId: string, newLabel: string) => {
    setSchema(updateNodeProperty(nodeId, 'label', newLabel))
  }

  // Add a new node
  const handleAddButton = () => {
    const newButton = {
      id: `button_${Date.now()}`,
      type: 'button' as const,
      action: 'submit' as const,
      label: 'New Button'
    }
    setSchema(addNode(newButton))
  }

  return <div>...</div>
}

With Vanilla JS

import { updateNodeProperty } from '@opncanvas/engine'

let schema = { /* ... */ }

// Apply update
schema = updateNodeProperty('button_1', 'label', 'Click Me')(schema)

API

Core Functions

• updateNodeProperty(nodeId, property, value) - Update a single property
• updateNodeProperties(nodeId, updates) - Update multiple properties at once
• addNode(node, index?) - Add a new node
• removeNode(nodeId) - Remove a node
• reorderNodes(startIndex, endIndex) - Reorder nodes (for drag & drop)
• duplicateNode(nodeId) - Duplicate a node
• findNodeById(schema, nodeId) - Find a node by ID

Legacy Functions

These are provided for backward compatibility:

• createLabelUpdater(nodeId, newLabel)
• createTextUpdater(nodeId, newText)
• createPlaceholderUpdater(nodeId, newPlaceholder)
• createButtonPropertyUpdater(nodeId, propertyName, value)
• createTextPropertyUpdater(nodeId, propertyName, value)
• createInputPropertyUpdater(nodeId, propertyName, value)
• createBackgroundPropertyUpdater(nodeId, propertyName, value)

Examples

Updating Multiple Properties

import { updateNodeProperties } from '@opncanvas/engine'

setSchema(updateNodeProperties('button_1', {
  label: 'Submit',
  color: '#000000',
  font_size: 16
}))

Drag and Drop

import { reorderNodes } from '@opncanvas/engine'

const handleDragEnd = (result) => {
  if (!result.destination) return
  
  setSchema(reorderNodes(
    result.source.index,
    result.destination.index
  ))
}

License

Apache 2.0