@nordcraft/runtime 1.0.0

package/src/components/createNode.ts

@@ -0,0 +1,381 @@
+/* eslint-disable no-console */
+import type {
+  ComponentData,
+  NodeModel,
+  SupportedNamespaces,
+} from '@nordcraft/core/dist/component/component.types'
+import { applyFormula } from '@nordcraft/core/dist/formula/formula'
+import { toBoolean } from '@nordcraft/core/dist/utils/util'
+import type { Signal } from '../signal/signal'
+import { signal } from '../signal/signal'
+import type { ComponentContext } from '../types'
+import { ensureEfficientOrdering, getNextSiblingElement } from '../utils/nodes'
+import { createComponent } from './createComponent'
+import { createElement } from './createElement'
+import { createSlot } from './createSlot'
+import { createText } from './createText'
+
+export function createNode({
+  id,
+  dataSignal,
+  path,
+  ctx,
+  namespace,
+  parentElement,
+  instance,
+}: {
+  id: string
+  dataSignal: Signal<ComponentData>
+  path: string
+  ctx: ComponentContext
+  namespace?: SupportedNamespaces
+  parentElement: Element | ShadowRoot
+  instance: Record<string, string>
+}): ReadonlyArray<Element | Text> {
+  const node = ctx.component.nodes[id]
+  if (!node) {
+    return []
+  }
+  const create = ({
+    node,
+    ...props
+  }: NodeRenderer<NodeModel>): ReadonlyArray<Element | Text> => {
+    switch (node.type) {
+      case 'element':
+        return [
+          createElement({
+            node,
+            ...props,
+          }),
+        ]
+      case 'component':
+        // eslint-disable-next-line no-case-declarations
+        const isLocalComponent = ctx.components.some(
+          (c) => c.name === node.name,
+        )
+        return createComponent({
+          node: { ...node, id }, // we need the node id for instance classes
+          ...props,
+          ctx: {
+            ...ctx,
+            package:
+              node.package ?? (isLocalComponent ? undefined : ctx.package),
+          },
+          parentElement,
+        })
+      case 'text':
+        return [createText({ ...props, node })]
+      case 'slot':
+        return createSlot({ ...props, node })
+    }
+  }
+
+  function conditional({
+    node,
+    dataSignal,
+    id,
+    path,
+    ctx,
+    namespace,
+    parentElement,
+    instance,
+  }: NodeRenderer<NodeModel>): ReadonlyArray<Element | Text> {
+    let firstRun = true
+    let childDataSignal: Signal<ComponentData> | null = null
+    const showSignal = dataSignal.map((data) =>
+      toBoolean(
+        applyFormula(node.condition, {
+          data,
+          component: ctx.component,
+          formulaCache: ctx.formulaCache,
+          root: ctx.root,
+          package: ctx.package,
+          toddle: ctx.toddle,
+          env: ctx.env,
+        }),
+      ),
+    )
+
+    const elements: Array<Element | Text> = []
+    const toggle = (show: boolean) => {
+      if (show && elements.length === 0) {
+        childDataSignal?.destroy()
+        childDataSignal = dataSignal.map((data) => data)
+        elements.push(
+          ...create({
+            node,
+            dataSignal: childDataSignal,
+            path,
+            id,
+            ctx,
+            namespace,
+            parentElement,
+            instance,
+          }),
+        )
+
+        // No reason to continue if we are on first run, as the render phase has not yet been reached
+        if (firstRun) {
+          return
+        }
+
+        if (!parentElement || ctx.root.contains(parentElement) === false) {
+          console.error(
+            `Conditional: Parent element does not exist for "${path}" This is likely due to the DOM being modified outside of toddle.`,
+          )
+          return
+        }
+
+        if (parentElement.querySelector(`[data-id="${path}"]`)) {
+          console.warn(
+            `Conditional: Element with data-id="${path}" already exists. This is likely due to the DOM being modified outside of toddle`,
+          )
+          return
+        }
+
+        const nextPathElement = getNextSiblingElement(path, parentElement)
+        for (const element of elements) {
+          parentElement.insertBefore(element, nextPathElement)
+        }
+      } else if (!show) {
+        childDataSignal?.destroy()
+        elements.forEach((elem) => elem.remove())
+        elements.splice(0, elements.length)
+      }
+    }
+
+    showSignal.subscribe(toggle, {
+      destroy: () => {
+        childDataSignal?.destroy()
+      },
+    })
+    if (ctx.env.runtime === 'preview' && ctx.toddle._preview) {
+      ctx.toddle._preview.showSignal.subscribe(
+        ({ displayedNodes, testMode }) => {
+          if (displayedNodes.includes(path) && !testMode) {
+            // only override the default show if we are in design mode (not test mode)
+            toggle(true)
+          } else {
+            toggle(showSignal.get())
+          }
+        },
+      )
+    }
+
+    firstRun = false
+    return elements
+  }
+
+  function repeat(): ReadonlyArray<Element | Text> {
+    let firstRun = true
+    let repeatItems = new Map<
+      string | number,
+      {
+        dataSignal: Signal<ComponentData>
+        cleanup: () => void
+        elements: ReadonlyArray<Element | Text>
+      }
+    >()
+    const repeatSignal = dataSignal.map((data) => {
+      const list = applyFormula(node.repeat, {
+        data,
+        component: ctx.component,
+        formulaCache: ctx.formulaCache,
+        root: ctx.root,
+        package: ctx.package,
+        toddle: ctx.toddle,
+        env: ctx.env,
+      })
+      if (typeof list !== 'object') {
+        return []
+      }
+      return Object.entries(list ?? {})
+    })
+
+    repeatSignal.subscribe(
+      (list) => {
+        const newRepeatItems = new Map<
+          string | number,
+          {
+            dataSignal: Signal<ComponentData>
+            cleanup: () => void
+            elements: ReadonlyArray<Element | Text>
+          }
+        >()
+
+        for (let i = 0; i < list.length; i++) {
+          const [Key, Item] = list[i]
+          const childData = {
+            ...dataSignal.get(),
+            ListItem: {
+              ...(dataSignal.get().ListItem
+                ? { Parent: dataSignal.get().ListItem }
+                : {}),
+              Item,
+              Index: Number(i),
+              Key,
+            },
+          }
+
+          let childKey = node.repeatKey
+            ? applyFormula(node.repeatKey, {
+                data: childData,
+                component: ctx.component,
+                formulaCache: ctx.formulaCache,
+                root: ctx.root,
+                package: ctx.package,
+                toddle: ctx.toddle,
+                env: ctx.env,
+              })
+            : Key
+
+          // Can't we just use the Item reference as key as we have fine-grained reactivity at this point?
+          // That way we won't need repeatKey at all as everything will be optimized by reference?!?
+          // https://github.com/solidjs/solid/discussions/366#discussioncomment-1220239
+          // childKey = Item
+          // Do fallback to Key(index) if repeatKey has duplicate values.
+          // This will essentially disable the optimization for repeatKey and will always re-render the children on every change.
+          if (newRepeatItems.has(childKey)) {
+            console.warn(
+              `Duplicate key "${childKey}" found in repeat. Fallback to index as key. This will cause a re-render of the duplicated children on every change.`,
+            )
+            childKey = Key
+          }
+
+          const existingItem = repeatItems.get(childKey)
+          if (existingItem) {
+            newRepeatItems.set(childKey, existingItem)
+            existingItem.dataSignal.update((data) => {
+              return {
+                ...data,
+                ListItem: {
+                  ...(dataSignal.get().ListItem
+                    ? { Parent: dataSignal.get().ListItem }
+                    : {}),
+                  Item,
+                  Index: Number(i),
+                  Key,
+                },
+              }
+            })
+          } else {
+            const childDataSignal = signal<ComponentData>(childData)
+            const cleanup = dataSignal.subscribe(
+              (data) => {
+                if (firstRun) {
+                  return
+                }
+
+                childDataSignal.update(({ ListItem }) => {
+                  return {
+                    ...data,
+                    ListItem,
+                  }
+                })
+              },
+              {
+                destroy: () => childDataSignal.destroy(),
+              },
+            )
+
+            const args = {
+              node,
+              id,
+              dataSignal: childDataSignal,
+              path: Key === '0' ? path : `${path}(${Key})`,
+              ctx,
+              namespace,
+              parentElement,
+              instance,
+            }
+            const elements = node.condition ? conditional(args) : create(args)
+            newRepeatItems.set(childKey, {
+              dataSignal: childDataSignal,
+              cleanup,
+              elements,
+            })
+          }
+        }
+
+        // Cleanup removed items' data
+        Array.from(repeatItems.entries()).forEach(([key, item]) => {
+          if (!newRepeatItems.has(key)) {
+            item.cleanup()
+            item.dataSignal.destroy()
+            item.elements.forEach((e) => e.remove())
+          }
+        })
+        repeatItems = newRepeatItems
+
+        // No reason to continue if we are on first run, as the render-phase for the parent
+        // has not yet been reached, or if there are no items to render
+        if (firstRun || repeatItems.size === 0) {
+          return
+        }
+
+        if (!parentElement || ctx.root.contains(parentElement) === false) {
+          console.error(
+            `Repeat: Parent element does not exist for ${path}. This is likely due to the DOM being modified outside of toddle.`,
+          )
+          return
+        }
+
+        ensureEfficientOrdering(
+          parentElement,
+          Array.from(repeatItems.values()).flatMap((e) => e.elements),
+          getNextSiblingElement(path, parentElement),
+        )
+      },
+      {
+        destroy: () =>
+          Array.from(repeatItems.values()).forEach((e) => {
+            e.cleanup()
+            e.dataSignal.destroy()
+            e.elements.forEach((e) => e.remove())
+          }),
+      },
+    )
+
+    // We utilize that the signal subscription runs synchronously above,
+    // so we already have a populated repeatItems map to return initially.
+    // Note: `repeatItems.values()` is okay here, as maps' iterator is ordered by insertion.
+    firstRun = false
+    return Array.from(repeatItems.values()).flatMap((e) => e.elements)
+  }
+
+  if (node.repeat) {
+    return repeat()
+  }
+  if (node.condition) {
+    return conditional({
+      node,
+      dataSignal,
+      ctx,
+      id,
+      path,
+      namespace,
+      parentElement,
+      instance,
+    })
+  }
+  return create({
+    node,
+    dataSignal,
+    ctx,
+    id,
+    path,
+    namespace,
+    parentElement,
+    instance,
+  })
+}
+export type NodeRenderer<NodeType> = {
+  node: NodeType
+  dataSignal: Signal<ComponentData>
+  id: string
+  path: string
+  ctx: ComponentContext
+  namespace?: SupportedNamespaces
+  parentElement: Element | ShadowRoot
+  instance: Record<string, string>
+}

package/src/components/createSlot.ts

@@ -0,0 +1,61 @@
+import type { SlotNodeModel } from '@nordcraft/core/dist/component/component.types'
+import type { NodeRenderer } from './createNode'
+import { createNode } from './createNode'
+
+export function createSlot({
+  path,
+  node,
+  dataSignal,
+  ctx,
+  parentElement,
+  instance,
+  namespace,
+}: NodeRenderer<SlotNodeModel>): ReadonlyArray<Element | Text> {
+  const slotName = node.name ?? 'default'
+  let children: Array<Element | Text> = []
+  // Is slotted content provided?
+  if (ctx.children[slotName]) {
+    children = ctx.children[slotName].flatMap((child) => {
+      const childDataSignal = child.dataSignal.map((data) => data)
+      dataSignal.subscribe((data) => data, {
+        destroy: () => childDataSignal.destroy(),
+      })
+      return createNode({
+        ...child,
+        dataSignal: childDataSignal,
+        parentElement,
+        ctx: {
+          ...child.ctx,
+          providers: ctx.providers,
+        },
+        instance,
+        namespace,
+      })
+    })
+  } else {
+    // Otherwise, return placeholder content
+    children = node.children.flatMap((child, i) => {
+      return createNode({
+        id: child,
+        path: path + '.' + i,
+        dataSignal,
+        ctx,
+        parentElement,
+        instance,
+        namespace,
+      })
+    })
+  }
+
+  if (ctx.env.runtime === 'custom-element' && ctx.isRootComponent) {
+    const webComponentSlot = document.createElement('slot')
+    webComponentSlot.setAttribute('name', slotName)
+    children.forEach((child) => {
+      webComponentSlot.appendChild(child)
+    })
+
+    return [webComponentSlot]
+  }
+
+  return children
+}

package/src/components/createText.test.ts

@@ -0,0 +1,117 @@
+import { describe, expect, test } from '@jest/globals'
+import type { ComponentData } from '@nordcraft/core/dist/component/component.types'
+import { valueFormula } from '@nordcraft/core/dist/formula/formulaUtils'
+import { Signal } from '../signal/signal'
+import type { ComponentContext } from '../types'
+import { createText } from './createText'
+
+describe('createText()', () => {
+  test('it returns a span element with text in it while in default namespace', () => {
+    let textElement = createText({
+      ctx: {
+        isRootComponent: false,
+        component: { name: 'My Component' },
+      } as Partial<ComponentContext> as any,
+      namespace: 'http://www.w3.org/1999/xhtml',
+      dataSignal: undefined as any,
+      path: 'test-text-element',
+      id: 'test-text-element-id',
+      node: {
+        type: 'text',
+        value: valueFormula('Hello world'),
+      },
+    })
+    expect(textElement instanceof HTMLSpanElement).toBe(true)
+    textElement = textElement as HTMLSpanElement
+    expect(textElement.tagName).toBe('SPAN')
+    expect(textElement.getAttribute('data-node-id')).toBe(
+      'test-text-element-id',
+    )
+    expect(textElement.getAttribute('data-id')).toBe('test-text-element')
+    expect(textElement.getAttribute('data-component')).toBe('My Component')
+    expect(textElement.children.length).toBe(0)
+    expect(textElement.innerText).toBe('Hello world')
+  })
+  test('it returns a text node while not in the default namespace', () => {
+    const textElement = createText({
+      ctx: {
+        isRootComponent: false,
+        component: { name: 'My Component' },
+      } as Partial<ComponentContext> as any,
+      namespace: 'http://www.w3.org/2000/svg',
+      dataSignal: undefined as any,
+      path: 'test-text-element',
+      id: 'test-text-element-id',
+      node: {
+        type: 'text',
+        value: valueFormula('Hello world'),
+      },
+    }) as Text
+    expect(textElement instanceof Text).toBe(true)
+    expect(textElement.textContent).toBe('Hello world')
+  })
+  test('it does not add a data-component attribute for root elements', () => {
+    const textElement = createText({
+      ctx: {
+        isRootComponent: true,
+      } as Partial<ComponentContext> as any,
+      dataSignal: undefined as any,
+      path: 'test-text-element',
+      id: 'test-text-element-id',
+      node: {
+        type: 'text',
+        value: valueFormula('Hello world'),
+      },
+    }) as HTMLSpanElement
+    expect(textElement.getAttribute('data-component')).toBeNull()
+  })
+  test('Signal changes update the text element', () => {
+    const dataSignal = new Signal<ComponentData>({
+      Attributes: { text: 'Hello world' },
+    })
+    const textElement = createText({
+      ctx: { dataSignal } as Partial<ComponentContext> as any,
+      dataSignal,
+      path: '',
+      id: '',
+      node: {
+        type: 'text',
+        value: {
+          type: 'path',
+          path: ['Attributes', 'text'],
+        },
+      },
+    })
+    expect(textElement.textContent).toBe('Hello world')
+    dataSignal.set({ Attributes: { text: 'Goodbye world' } })
+    expect(textElement.textContent).toBe('Goodbye world')
+  })
+  test('Show formulas are not respected for text elements', () => {
+    const textElement = createText({
+      ctx: {} as Partial<ComponentContext> as any,
+      dataSignal: undefined as any,
+      path: '',
+      id: '',
+      node: {
+        type: 'text',
+        value: valueFormula('Hello world'),
+        condition: valueFormula(false),
+      },
+    })
+    expect(textElement.textContent).toBe('Hello world')
+  })
+  test('Repeat formulas are not respected for text elements', () => {
+    const textElement = createText({
+      ctx: {} as Partial<ComponentContext> as any,
+      dataSignal: undefined as any,
+      path: '',
+      id: '',
+      node: {
+        type: 'text',
+        value: valueFormula('Hello world'),
+        repeat: valueFormula(['1', '2', '3']),
+      },
+    })
+    expect(textElement.textContent).toBe('Hello world')
+  })
+})

package/src/components/createText.ts

@@ -0,0 +1,104 @@
+import type {
+  ComponentData,
+  SupportedNamespaces,
+  TextNodeModel,
+} from '@nordcraft/core/dist/component/component.types'
+import { applyFormula } from '@nordcraft/core/dist/formula/formula'
+import type { Signal } from '../signal/signal'
+import type { ComponentContext } from '../types'
+
+export type RenderTextProps = {
+  node: TextNodeModel
+  dataSignal: Signal<ComponentData>
+  id: string
+  path: string
+  namespace?: SupportedNamespaces
+  ctx: ComponentContext
+}
+
+/**
+ * Create a text node
+ *
+ * Note: We wrap the text in a <span> to make it easier to select/highlight the text node in the preview.
+ * We should find a better way to do this without wrapping the node, and instead use `createTextNode`.
+ */
+export function createText({
+  node,
+  id,
+  path,
+  dataSignal,
+  namespace,
+  ctx,
+}: RenderTextProps): HTMLSpanElement | Text {
+  // Span element is not valid outside of the default namespace
+  if (namespace && namespace !== 'http://www.w3.org/1999/xhtml') {
+    return createTextNS({ node, dataSignal, ctx })
+  }
+
+  const { value } = node
+  const elem = document.createElement('span')
+  elem.setAttribute('data-node-id', id)
+  if (typeof id === 'string') {
+    elem.setAttribute('data-id', path)
+  }
+  if (ctx.isRootComponent === false) {
+    elem.setAttribute('data-component', ctx.component.name)
+  }
+  elem.setAttribute('data-node-type', 'text')
+  if (value.type !== 'value') {
+    const sig = dataSignal.map((data) =>
+      String(
+        applyFormula(value, {
+          data,
+          component: ctx.component,
+          formulaCache: ctx.formulaCache,
+          root: ctx.root,
+          package: ctx.package,
+          toddle: ctx.toddle,
+          env: ctx.env,
+        }),
+      ),
+    )
+    sig.subscribe((value) => {
+      elem.innerText = value
+    })
+  } else {
+    elem.innerText = String(value.value)
+  }
+  return elem
+}
+
+/**
+ * This function is technically more performant than `createText` because it doesn't create a wrapping <span> element.
+ * We would like to use this everywhere eventually, but we need to handle raw text selection in the editor (possibly by utilizing text ranges).
+ */
+export function createTextNS({
+  node,
+  dataSignal,
+  ctx,
+}: Pick<RenderTextProps, 'node' | 'dataSignal' | 'ctx'>): Text {
+  const { value } = node
+  const textNode = document.createTextNode('')
+  if (value.type !== 'value') {
+    const sig = dataSignal.map((data) =>
+      String(
+        applyFormula(value, {
+          data,
+          component: ctx.component,
+          formulaCache: ctx.formulaCache,
+          root: ctx.root,
+          package: ctx.package,
+          toddle: ctx.toddle,
+          env: ctx.env,
+        }),
+      ),
+    )
+    sig.subscribe((value) => {
+      textNode.nodeValue = value
+    })
+  } else {
+    textNode.nodeValue = String(value.value)
+  }
+
+  return textNode
+}