@nordcraft/runtime 1.0.0

package/src/components/createComponent.ts

@@ -0,0 +1,280 @@
+import { isLegacyApi, sortApiObjects } from '@nordcraft/core/dist/api/api'
+import type {
+  ComponentData,
+  ComponentNodeModel,
+  SupportedNamespaces,
+} from '@nordcraft/core/dist/component/component.types'
+import { applyFormula } from '@nordcraft/core/dist/formula/formula'
+import type { RequireFields } from '@nordcraft/core/dist/types'
+import { mapObject } from '@nordcraft/core/dist/utils/collections'
+import { isDefined } from '@nordcraft/core/dist/utils/util'
+import { createLegacyAPI } from '../api/createAPI'
+import { createAPI } from '../api/createAPIv2'
+import { isContextProvider } from '../context/isContextProvider'
+import { subscribeToContext } from '../context/subscribeToContext'
+import { registerComponentToLogState } from '../debug/logState'
+import { handleAction } from '../events/handleAction'
+import type { Signal } from '../signal/signal'
+import { signal } from '../signal/signal'
+import type { ComponentChild, ComponentContext, ContextApi } from '../types'
+import { createFormulaCache } from '../utils/createFormulaCache'
+import { renderComponent } from './renderComponent'
+
+export type RenderComponentNodeProps = {
+  path: string
+  node: ComponentNodeModel
+  dataSignal: Signal<ComponentData>
+  ctx: ComponentContext
+  parentElement: Element | ShadowRoot
+  instance: Record<string, string>
+  namespace?: SupportedNamespaces
+}
+
+export function createComponent({
+  node,
+  path,
+  dataSignal,
+  ctx,
+  parentElement,
+  instance,
+  namespace,
+}: RenderComponentNodeProps): ReadonlyArray<Element | Text> {
+  const nodeLookupKey = [ctx.package, node.name].filter(isDefined).join('/')
+  const component = ctx.components?.find((comp) => comp.name === nodeLookupKey)
+  if (!component) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Could not find component "${nodeLookupKey}" for component "${
+        ctx.component.name
+      }". Available components are: ["${ctx.components
+        .map((c) => c.name)
+        .join('", "')}"]`,
+    )
+    return []
+  }
+  const attributesSignal = dataSignal.map((data) => {
+    return mapObject(node.attrs, ([attr, value]) => [
+      attr,
+      value?.type !== 'value'
+        ? applyFormula(value, {
+            data,
+            component: ctx.component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            toddle: ctx.toddle,
+            env: ctx.env,
+          })
+        : value?.value,
+    ])
+  })
+
+  const componentDataSignal = signal<ComponentData>({
+    Location: dataSignal.get().Location,
+    Attributes: attributesSignal.get(),
+    Apis: mapObject(component.apis, ([name, api]) => [
+      name,
+      {
+        data: null,
+        isLoading:
+          api.autoFetch &&
+          applyFormula(api.autoFetch, {
+            data: dataSignal.get(),
+            component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            toddle: ctx.toddle,
+            env: ctx.env,
+          })
+            ? true
+            : false,
+        error: null,
+      },
+    ]),
+  })
+  // Subscribe context before calculating variable initial values to ensure they can reference context values
+  subscribeToContext(componentDataSignal, component, ctx)
+  componentDataSignal.update((data) => ({
+    ...data,
+    Variables: mapObject(component.variables, ([name, variable]) => [
+      name,
+      applyFormula(variable.initialValue, {
+        // Initial value
+        data: componentDataSignal.get(),
+        component,
+        formulaCache: ctx.formulaCache,
+        root: ctx.root,
+        package: ctx.package,
+        toddle: ctx.toddle,
+        env: ctx.env,
+      }),
+    ]),
+  }))
+  registerComponentToLogState(component, componentDataSignal)
+
+  // Call the abort signal if the component's datasignal is destroyed (component unmounted) to cancel any pending requests
+  const abortController = new AbortController()
+  componentDataSignal.subscribe(() => {}, {
+    destroy: () =>
+      abortController.abort(`Component ${component.name} unmounted`),
+  })
+  const formulaCache = createFormulaCache(component)
+
+  // Note: this function must run procedurally to ensure apis (which are in correct order) can reference each other
+  const apis: Record<string, ContextApi> = {}
+  sortApiObjects(Object.entries(component.apis)).forEach(([name, api]) => {
+    if (isLegacyApi(api)) {
+      apis[name] = createLegacyAPI(api, {
+        ...ctx,
+        apis,
+        component,
+        dataSignal: componentDataSignal,
+        abortSignal: abortController.signal,
+        isRootComponent: false,
+        formulaCache,
+        package: node.package ?? ctx.package,
+        triggerEvent: (eventTrigger, data) => {
+          const eventHandler = Object.values(node.events).find(
+            (e) => e.trigger === eventTrigger,
+          )
+          if (eventHandler) {
+            eventHandler.actions.forEach((action) =>
+              handleAction(action, { ...dataSignal.get(), Event: data }, ctx),
+            )
+          }
+        },
+      })
+    } else {
+      apis[name] = createAPI(api, {
+        ...ctx,
+        apis,
+        component,
+        dataSignal: componentDataSignal,
+        abortSignal: abortController.signal,
+        isRootComponent: false,
+        formulaCache,
+        package: node.package ?? ctx.package,
+        triggerEvent: (eventTrigger, data) => {
+          const eventHandler = Object.values(node.events).find(
+            (e) => e.trigger === eventTrigger,
+          )
+          if (eventHandler) {
+            eventHandler.actions.forEach((action) =>
+              handleAction(action, { ...dataSignal.get(), Event: data }, ctx),
+            )
+          }
+        },
+      })
+    }
+  })
+  Object.values(apis)
+    .filter(
+      (api): api is RequireFields<ContextApi, 'triggerActions'> =>
+        api.triggerActions !== undefined,
+    )
+    .forEach((api) => {
+      api.triggerActions()
+    })
+
+  const onEvent = (eventTrigger: string, data: any) => {
+    const eventHandler = Object.values(node.events).find(
+      (e) => e.trigger === eventTrigger,
+    )
+    if (eventHandler) {
+      eventHandler.actions.forEach((action) =>
+        handleAction(action, { ...dataSignal.get(), Event: data }, ctx),
+      )
+    }
+  }
+
+  let providers = ctx.providers
+  if (isContextProvider(component)) {
+    // Subscribe to exposed formulas and update the component's data signal
+    const formulaDataSignals = Object.fromEntries(
+      Object.entries(component.formulas ?? {})
+        .filter(([, formula]) => formula.exposeInContext)
+        .map(([name, formula]) => [
+          name,
+          componentDataSignal.map((data) =>
+            applyFormula(formula.formula, {
+              data,
+              component,
+              formulaCache: ctx.formulaCache,
+              root: ctx.root,
+              package: ctx.package,
+              toddle: ctx.toddle,
+              env: ctx.env,
+            }),
+          ),
+        ]),
+    )
+
+    providers = {
+      ...providers,
+      [component.name]: {
+        component,
+        formulaDataSignals,
+        ctx: {
+          ...ctx,
+          apis,
+          component,
+          dataSignal: componentDataSignal,
+          abortSignal: abortController.signal,
+          triggerEvent: onEvent,
+        },
+      },
+    }
+  }
+
+  const children: Record<string, Array<ComponentChild>> = {}
+  for (let i = 0; i < node.children.length; i++) {
+    const childId = node.children[i]
+    const childNode = ctx.component.nodes[childId]
+    const slotName = childNode.slot ?? 'default'
+    children[slotName] = children[slotName] ?? []
+    children[slotName].push({
+      id: childId,
+      path: `${path}.${i}[${slotName}]`,
+      dataSignal,
+      ctx: {
+        ...ctx,
+        package: node.package ?? ctx.package,
+      },
+    })
+  }
+
+  attributesSignal.subscribe(
+    (Attributes) =>
+      componentDataSignal.update((data) => ({
+        ...data,
+        Attributes,
+      })),
+    { destroy: () => componentDataSignal.destroy() },
+  )
+
+  return renderComponent({
+    dataSignal: componentDataSignal,
+    component,
+    components: ctx.components,
+    path,
+    root: ctx.root,
+    isRootComponent: false,
+    children,
+    formulaCache,
+    providers,
+    apis,
+    abortSignal: abortController.signal,
+    package: node.package ?? ctx.package,
+    parentElement,
+    onEvent,
+    toddle: ctx.toddle,
+    env: ctx.env,
+    namespace,
+    // If the root node is another component, then append and forward previous instance
+    instance:
+      node.id === 'root'
+        ? { ...instance, [ctx.component.name]: 'root' }
+        : { [ctx.component.name]: node.id ?? '' },
+  })
+}

package/src/components/createElement.ts

@@ -0,0 +1,240 @@
+import type {
+  ElementNodeModel,
+  NodeModel,
+  SupportedNamespaces,
+} from '@nordcraft/core/dist/component/component.types'
+import { applyFormula } from '@nordcraft/core/dist/formula/formula'
+import {
+  getClassName,
+  toValidClassName,
+} from '@nordcraft/core/dist/styling/className'
+import { isDefined, toBoolean } from '@nordcraft/core/dist/utils/util'
+import { handleAction } from '../events/handleAction'
+import type { Signal } from '../signal/signal'
+import { getDragData } from '../utils/getDragData'
+import { getElementTagName } from '../utils/getElementTagName'
+import { setAttribute } from '../utils/setAttribute'
+import type { NodeRenderer } from './createNode'
+import { createNode } from './createNode'
+
+export function createElement({
+  node,
+  dataSignal,
+  id,
+  path,
+  ctx,
+  namespace,
+  instance,
+}: NodeRenderer<ElementNodeModel>): Element {
+  const tag = getElementTagName(node, ctx, id)
+  switch (tag) {
+    case 'svg': {
+      namespace = 'http://www.w3.org/2000/svg'
+      break
+    }
+    case 'math': {
+      namespace = 'http://www.w3.org/1998/Math/MathML'
+      break
+    }
+  }
+
+  // Explicitly setting a namespace has precedence over inferring it from the tag
+  if (node.attrs['xmlns'] && node.attrs['xmlns'].type === 'value') {
+    namespace = String(node.attrs['xmlns'].value) as SupportedNamespaces
+  }
+
+  const elem = namespace
+    ? (document.createElementNS(namespace, tag) as SVGElement | MathMLElement)
+    : document.createElement(tag)
+
+  elem.setAttribute('data-node-id', id)
+  if (path) {
+    elem.setAttribute('data-id', path)
+  }
+  if (ctx.isRootComponent === false && id !== 'root') {
+    elem.setAttribute('data-component', ctx.component.name)
+  }
+  const classHash = getClassName([node.style, node.variants])
+  elem.classList.add(classHash)
+  if (instance && id === 'root') {
+    Object.entries(instance).forEach(([key, value]) => {
+      elem.classList.add(toValidClassName(`${key}:${value}`))
+    })
+  }
+  if (node.classes) {
+    Object.entries(node.classes)?.forEach(([className, { formula }]) => {
+      if (formula) {
+        const classSignal = dataSignal.map((data) =>
+          toBoolean(
+            applyFormula(formula, {
+              data,
+              component: ctx.component,
+              formulaCache: ctx.formulaCache,
+              root: ctx.root,
+              package: ctx.package,
+              toddle: ctx.toddle,
+              env: ctx.env,
+            }),
+          ),
+        )
+        classSignal.subscribe((show) =>
+          show
+            ? elem.classList.add(className)
+            : elem.classList.remove(className),
+        )
+      } else {
+        elem.classList.add(className)
+      }
+    })
+  }
+
+  Object.entries(node.attrs).forEach(([attr, value]) => {
+    if (!isDefined(value)) {
+      return
+    }
+    let o: Signal<any> | undefined
+    const setupAttribute = () => {
+      if (value.type === 'value') {
+        setAttribute(elem, attr, value?.value)
+      } else {
+        o = dataSignal.map((data) =>
+          applyFormula(value, {
+            data,
+            component: ctx.component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            toddle: ctx.toddle,
+            env: ctx.env,
+          }),
+        )
+        o.subscribe((val) => {
+          setAttribute(elem, attr, val)
+        })
+      }
+    }
+    if (
+      attr === 'autofocus' &&
+      ctx.env.runtime === 'preview' &&
+      ctx.toddle._preview
+    ) {
+      ctx.toddle._preview.showSignal.subscribe(({ testMode }) => {
+        if (testMode) {
+          setupAttribute()
+        } else {
+          o?.destroy()
+          elem.removeAttribute(attr)
+        }
+      })
+    } else {
+      setupAttribute()
+    }
+  })
+  node['style-variables']?.forEach(({ formula, name, unit }) => {
+    const sig = dataSignal.map((data) => {
+      const value = applyFormula(formula, {
+        data,
+        component: ctx.component,
+        formulaCache: ctx.formulaCache,
+        root: ctx.root,
+        package: ctx.package,
+        toddle: ctx.toddle,
+        env: ctx.env,
+      })
+      return unit ? value + unit : value
+    })
+    sig.subscribe((value) => elem.style.setProperty(`--${name}`, value))
+  })
+  Object.values(node.events).forEach((event) => {
+    const handler = (e: Event) => {
+      event.actions.forEach((action) => {
+        if (e instanceof DragEvent) {
+          ;(e as any).data = getDragData(e)
+        }
+        if (e instanceof ClipboardEvent) {
+          try {
+            ;(e as any).data = Array.from(e.clipboardData?.items ?? []).reduce<
+              Record<string, any>
+            >((dragData, item) => {
+              try {
+                dragData[item.type] = JSON.parse(
+                  e.clipboardData?.getData(item.type) as any,
+                )
+              } catch {
+                dragData[item.type] = e.clipboardData?.getData(item.type)
+              }
+              return dragData
+            }, {})
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.error('Could not get paste data', e)
+          }
+        }
+        void handleAction(action, { ...dataSignal.get(), Event: e }, ctx, e)
+      })
+      return false
+    }
+    elem.addEventListener(event.trigger, handler)
+  })
+
+  // for script, style & SVG<text> tags we only render text child.
+  // this can be removed once we fix the editor to handle raw text nodes without wrapping <span>
+  const nodeTag = node.tag.toLocaleLowerCase()
+  if (nodeTag === 'script' || nodeTag === 'style') {
+    const textValues: Array<Signal<string> | string> = []
+    node.children
+      .map<NodeModel | undefined>((child) => ctx.component.nodes[child])
+      .filter((node) => node?.type === 'text')
+      .forEach((node) => {
+        if (node.value.type === 'value') {
+          textValues.push(String(node.value.value))
+        } else {
+          const textSignal = dataSignal.map((data) => {
+            return String(
+              applyFormula(node.value, {
+                data,
+                component: ctx.component,
+                formulaCache: ctx.formulaCache,
+                root: ctx.root,
+                package: ctx.package,
+                toddle: ctx.toddle,
+                env: ctx.env,
+              }),
+            )
+          })
+          textValues.push(textSignal)
+        }
+      })
+
+    // if all values are string, we can directly set textContent
+    if (textValues.every((value) => typeof value === 'string')) {
+      elem.textContent = textValues.join('')
+    }
+
+    // for each signal, we subscribe and rewrite the entire textContent from all text nodes
+    textValues
+      .filter((value) => typeof value !== 'string')
+      .forEach((valueSignal) => {
+        valueSignal.subscribe(() => {
+          elem.textContent = textValues
+            .map((value) => (typeof value === 'string' ? value : value.get()))
+            .join('')
+        })
+      })
+  } else {
+    node.children.forEach((child, i) => {
+      const childNodes = createNode({
+        parentElement: elem,
+        id: child,
+        path: path + '.' + i,
+        dataSignal,
+        ctx,
+        namespace,
+        instance,
+      })
+      childNodes.forEach((childNode) => elem.appendChild(childNode))
+    })
+  }
+
+  return elem
+}