@nordcraft/runtime 1.0.0

package/src/styles/style.ts

@@ -0,0 +1,254 @@
+import type {
+  Component,
+  ComponentNodeModel,
+  ElementNodeModel,
+  NodeStyleModel,
+} from '@nordcraft/core/dist/component/component.types'
+import {
+  getClassName,
+  toValidClassName,
+} from '@nordcraft/core/dist/styling/className'
+import { kebabCase } from '@nordcraft/core/dist/styling/style.css'
+import { variantSelector } from '@nordcraft/core/dist/styling/variantSelector'
+import { omitKeys } from '@nordcraft/core/dist/utils/collections'
+
+const LEGACY_BREAKPOINTS = {
+  large: 1440,
+  small: 576,
+  medium: 960,
+}
+
+export const SIZE_PROPERTIES = new Set([
+  'width',
+  'min-width',
+  'max-width',
+  'height',
+  'min-height',
+  'max-height',
+  'margin',
+  'margin-top',
+  'margin-left',
+  'margin-bottom',
+  'margin-right',
+  'padding',
+  'padding-top',
+  'padding-left',
+  'padding-bottom',
+  'padding-right',
+  'gap',
+  'gap-x',
+  'gap-y',
+  'border-radius',
+  'border-bottom-left-radius',
+  'border-bottom-right-radius',
+  'border-top-left-radius',
+  'border-top-right-radius',
+  'border-width',
+  'border-top-width',
+  'border-left-width',
+  'border-bottom-width',
+  'border-right-width',
+  'font-size',
+  'left',
+  'right',
+  'top',
+  'bottom',
+  'outline-width',
+])
+
+export const insertStyles = (
+  parent: HTMLElement,
+  root: Component,
+  components: Component[],
+) => {
+  const getNodeStyles = (
+    node: ElementNodeModel | ComponentNodeModel,
+    classHash: string,
+  ) => {
+    const style = omitKeys(node.style ?? {}, [
+      'variants',
+      'breakpoints',
+      'mediaQuery',
+      'shadows',
+    ])
+
+    const styleElem = document.createElement('style')
+    styleElem.setAttribute('data-hash', classHash)
+    styleElem.appendChild(
+      document.createTextNode(`
+    ${renderVariant('.' + classHash, style)}
+
+${
+  node.variants
+    ? node.variants
+        .map((variant) => {
+          const selector = `.${classHash}${variantSelector(variant)}`
+          const renderedVariant = renderVariant(selector, variant.style, {
+            startingStyle: variant.startingStyle,
+          })
+          return variant.mediaQuery
+            ? `
+                @media (${Object.entries(variant.mediaQuery)
+                  .map(([key, value]) => `${key}: ${value}`)
+                  .filter(Boolean)
+                  .join(') and (')}) {
+                ${renderedVariant}
+                }
+                `
+            : variant.breakpoint
+              ? `
+                @media (min-width: ${
+                  LEGACY_BREAKPOINTS[variant.breakpoint]
+                }px) {
+                ${renderedVariant}
+                }
+                `
+              : renderedVariant
+        })
+        .join('\n')
+    : ''
+}
+
+${
+  node.animations
+    ? Object.entries(node.animations)
+        .map(([animationName, keyframes]) => {
+          return `
+          @keyframes ${animationName} {
+            ${Object.values(keyframes)
+              .sort((a, b) => a.position - b.position)
+              .map(({ key, position, value }) => {
+                return `
+                ${position * 100}% {
+                  ${key}: ${value};
+                }
+                `
+              })
+              .join('\n')}
+          }
+          `
+        })
+        .join('\n')
+    : ''
+}
+  `),
+    )
+    return styleElem
+  }
+
+  // Make sure that CSS for dependant components are rendered first so that instance styles will override.
+  const visitedComponents = new Set<string>()
+  const newStyles = new Map<string, Element>()
+  function insertComponentStyles(
+    component: Component,
+    package_name: string | undefined,
+  ): string | undefined {
+    if (visitedComponents.has(component.name)) {
+      return
+    }
+    visitedComponents.add(component.name)
+    if (!component.nodes) {
+      // eslint-disable-next-line no-console
+      console.warn('Unable to find nodes for component', component.name)
+      return
+    }
+    Object.entries(component.nodes).forEach(([id, node]) => {
+      if (node.type === 'component') {
+        const childComponent = components.find(
+          (c) =>
+            c.name ===
+            [node.package ?? package_name, node.name]
+              ?.filter((n) => n)
+              .join('/'),
+        )
+        if (childComponent) {
+          insertComponentStyles(childComponent, node.package ?? package_name)
+
+          const instanceClassHash = toValidClassName(
+            `${component.name}:${id}`,
+            true,
+          )
+          newStyles.set(
+            instanceClassHash,
+            getNodeStyles(node, instanceClassHash),
+          )
+        }
+      } else if (node.type === 'element') {
+        const classHash = getClassName([node.style, node.variants])
+        newStyles.set(classHash, getNodeStyles(node, classHash))
+      }
+    })
+  }
+
+  insertComponentStyles(root, undefined)
+
+  // Remove old styles.
+  // We do not keep track of changes, so must remove all and re-add as order matters.
+  parent.querySelectorAll('[data-hash]').forEach((node) => node.remove())
+
+  // Add new styles
+  const fragment = document.createDocumentFragment()
+  newStyles.forEach((style) => {
+    fragment.appendChild(style)
+  })
+  parent.appendChild(fragment)
+}
+
+const renderVariant = (
+  selector: string,
+  style: NodeStyleModel,
+  options?: {
+    startingStyle?: boolean
+  },
+) => {
+  const scrollbarStyles = Object.entries(style).filter(
+    ([key]) => key === 'scrollbar-width',
+  )
+
+  let styles = styleToCss(style)
+  if (options?.startingStyle) {
+    styles = `@starting-style {
+      ${styles}
+    }`
+  }
+
+  return `
+  ${selector} {
+    ${styles}
+}
+${
+  scrollbarStyles.length > 0
+    ? `
+  ${selector}::-webkit-scrollbar {
+    ${scrollbarStyles
+      .map(([_, value]) => {
+        switch (value) {
+          case 'none':
+            return 'width: 0;'
+          case 'thin':
+            return 'width:4px;'
+          default:
+            return ''
+        }
+      })
+      .join('\n')}
+  }
+`
+    : ''
+}
+`
+}
+
+export const styleToCss = (style: NodeStyleModel) => {
+  return Object.entries(style)
+    .map(([property, value]) => {
+      const propertyName = kebabCase(property)
+      const propertyValue =
+        String(Number(value)) === String(value) &&
+        SIZE_PROPERTIES.has(propertyName)
+          ? `${Number(value) * 4}px`
+          : value
+      return `${propertyName}:${propertyValue};`
+    })
+    .join('\n')
+}

package/src/types.d.ts

@@ -0,0 +1,93 @@
+import type {
+  Component,
+  ComponentData,
+} from '@nordcraft/core/dist/component/component.types'
+import type { ToddleEnv } from '@nordcraft/core/dist/formula/formula'
+import type {
+  Toddle as NewToddle,
+  Toddle,
+  ToddleInternals,
+} from '@nordcraft/core/dist/types'
+import type { Signal } from './signal/signal'
+
+declare global {
+  interface Window {
+    __components: Record<string, Signal<ComponentData>> // used for debugging
+    __toddle: ToddleInternals
+    toddle: NewToddle<LocationSignal, PreviewShowSignal>
+  }
+}
+
+export type LocationSignal = Signal<Location>
+
+export interface Location {
+  route: Component['route']
+  page?: string
+  path: string
+  params: Record<string, string | null>
+  query: Record<string, string | string[] | null>
+  hash?: string
+}
+
+export type PreviewShowSignal = Signal<{
+  displayedNodes: string[]
+  testMode: boolean
+}>
+
+interface ListItem {
+  Item: unknown
+  Index: number
+  Parent?: ListItem
+}
+
+export interface ComponentChild {
+  dataSignal: Signal<ComponentData>
+  id: string
+  path: string
+  ctx: ComponentContext
+}
+
+export interface ComponentContext {
+  component: Component
+  components: Component[]
+  package: string | undefined
+  abortSignal: AbortSignal
+  root: Document | ShadowRoot
+  isRootComponent: boolean
+  dataSignal: Signal<ComponentData>
+  triggerEvent: (event: string, data: unknown) => void
+  apis: Record<string, ContextApi>
+  children: Record<string, Array<ComponentChild>>
+  formulaCache: Record<
+    string,
+    {
+      get: (data: ComponentData) => { hit: true; data: any } | { hit: false }
+      set: (data: ComponentData, result: any) => void
+    }
+  >
+  providers: Record<
+    string,
+    {
+      component: Component
+      formulaDataSignals: Record<string, Signal<ComponentData>>
+      ctx: ComponentContext
+    }
+  >
+  toddle: Toddle<LocationSignal, PreviewShowSignal>
+  env: ToddleEnv
+}
+
+export type ContextApi = {
+  fetch: Function
+  destroy: Function
+  update?: Function // for updating the dataSignal (v2 only)
+  triggerActions?: Function // for triggering actions explicitly. Useful when initializing apis (v2 only)
+}
+
+export type FormulaCache = Record<
+  string,
+  {
+    get: (data: ComponentData) => { hit: true; data: any } | { hit: false }
+    set: (data: ComponentData, result: any) => void
+  }
+>

package/src/utils/BatchQueue.ts

@@ -0,0 +1,24 @@
+/**
+ * A helper class to batch multiple callbacks and process them in a single update step just before the next frame render, but after the current stack.
+ * This is more efficient than processing each callback in a separate requestAnimationFrame due to the overhead.
+ */
+export class BatchQueue {
+  private batchQueue: Array<() => void> = []
+  private isProcessing = false
+  private processBatch() {
+    if (this.isProcessing) return
+    this.isProcessing = true
+
+    requestAnimationFrame(() => {
+      while (this.batchQueue.length > 0) {
+        const callback = this.batchQueue.shift()
+        callback?.()
+      }
+      this.isProcessing = false
+    })
+  }
+  public add(callback: () => void) {
+    this.batchQueue.push(callback)
+    this.processBatch()
+  }
+}

package/src/utils/createFormulaCache.ts

@@ -0,0 +1,96 @@
+import type {
+  Component,
+  ComponentData,
+} from '@nordcraft/core/dist/component/component.types'
+import type {
+  Formula,
+  FunctionOperation,
+} from '@nordcraft/core/dist/formula/formula'
+import { get, mapObject } from '@nordcraft/core/dist/utils/collections'
+import { isDefined } from '@nordcraft/core/dist/utils/util'
+import type { FormulaCache } from '../types'
+
+export function createFormulaCache(component: Component): FormulaCache {
+  if (!isDefined(component.formulas)) {
+    return {}
+  }
+  return mapObject(component.formulas, ([name, f]) => {
+    const { canCache, keys } = f.memoize
+      ? getFormulaCacheConfig(f.formula, component)
+      : { canCache: false, keys: [] }
+    let cacheInput: any
+    let cacheData: any
+
+    return [
+      name,
+      {
+        get: (data: ComponentData) => {
+          if (
+            canCache &&
+            cacheInput &&
+            keys.every((key) => {
+              return get(data, key) === get(cacheInput, key)
+            })
+          ) {
+            return { hit: true, data: cacheData }
+          }
+          return { hit: false }
+        },
+        set: (data: ComponentData, result: any) => {
+          if (canCache) {
+            cacheInput = data
+            cacheData = result
+          }
+        },
+      },
+    ]
+  })
+}
+
+function getFormulaCacheConfig(formula: Formula, component: Component) {
+  const paths: string[][] = []
+  function visitOperation(op: Formula) {
+    if (!op) {
+      return
+    }
+    if (op.type == 'path' && op.path[0] !== 'Args') {
+      paths.push(op.path)
+    }
+    if (Array.isArray((op as any)?.arguments)) {
+      ;(op as FunctionOperation)?.arguments.forEach((arg) =>
+        visitOperation(arg.formula),
+      )
+    }
+    if (op.type === 'record' && Array.isArray(op.entries)) {
+      op.entries.forEach((arg) => visitOperation(arg.formula))
+    }
+
+    if (op.type === 'apply') {
+      if (!component.formulas?.[op.name]?.memoize) {
+        throw new Error('Cannot memoize')
+      }
+      visitOperation(component.formulas?.[op.name]?.formula)
+    }
+  }
+  try {
+    visitOperation(formula)
+  } catch {
+    return {
+      canCache: false,
+      keys: [],
+    }
+  }
+
+  const keys: string[][] = []
+  paths
+    .sort((a, b) => a.length - b.length)
+    .forEach((path) => {
+      if (!keys.some((key) => key.every((k, i) => k === path[i]))) {
+        keys.push(path)
+      }
+    })
+  return {
+    canCache: true,
+    keys,
+  }
+}

package/src/utils/findNearestLine.test.ts

@@ -0,0 +1,65 @@
+import type { Line, Point } from '../editor/types'
+import { findNearestLine } from './findNearestLine'
+
+describe('findNearestLine', () => {
+  test('should find the nearest line to a point', () => {
+    const lines: Line[] = [
+      { x1: 0, y1: 0, x2: 0, y2: 1 },
+      { x1: 1, y1: 0, x2: 1, y2: 1 },
+      { x1: 2, y1: 0, x2: 2, y2: 1 },
+    ]
+    const point: Point = { x: 1.5, y: 0.5 }
+    const nearestLine = findNearestLine(lines, point)?.nearestLine
+    expect(nearestLine).toEqual({ x1: 1, y1: 0, x2: 1, y2: 1 })
+  })
+
+  test('should handle point exactly on a line', () => {
+    const lines: Line[] = [
+      { x1: 0, y1: 0, x2: 2, y2: 0 },
+      { x1: 1, y1: -1, x2: 1, y2: 1 },
+    ]
+    const point: Point = { x: 1, y: 0.5 }
+    const nearestLine = findNearestLine(lines, point)?.nearestLine
+    expect(nearestLine).toEqual({ x1: 1, y1: -1, x2: 1, y2: 1 })
+  })
+
+  test('should handle empty lines array', () => {
+    const lines: Line[] = []
+    const point: Point = { x: 0, y: 0 }
+    expect(findNearestLine(lines, point).nearestLine).toBeNull()
+  })
+
+  test('should handle lines with zero length (points)', () => {
+    const lines: Line[] = [
+      { x1: 1, y1: 1, x2: 1, y2: 1 },
+      { x1: 2, y1: 2, x2: 3, y2: 3 },
+    ]
+    const point: Point = { x: 1, y: 1.5 }
+    const nearestLine = findNearestLine(lines, point)?.nearestLine
+    expect(nearestLine).toEqual({ x1: 1, y1: 1, x2: 1, y2: 1 })
+  })
+
+  test('should handle negative coordinates', () => {
+    const lines: Line[] = [
+      { x1: -2, y1: -2, x2: -2, y2: 2 },
+      { x1: -2, y1: 2, x2: 2, y2: 2 },
+      { x1: 2, y1: 2, x2: 2, y2: -2 },
+      { x1: 2, y1: -2, x2: -2, y2: -2 },
+    ]
+    const point: Point = { x: 0, y: 0 }
+    const nearestLine = findNearestLine(lines, point)?.nearestLine
+    // The point is inside the square; function should return one of the sides
+    expect(nearestLine).toEqual({ x1: -2, y1: -2, x2: -2, y2: 2 })
+  })
+
+  test('should handle when multiple lines are equally close', () => {
+    const lines: Line[] = [
+      { x1: 0, y1: 1, x2: 1, y2: 1 },
+      { x1: 0, y1: -1, x2: 1, y2: -1 },
+    ]
+    const point: Point = { x: 0.5, y: 0 }
+    const nearestLine = findNearestLine(lines, point)?.nearestLine
+    // Both lines are at distance 1; the function should return the first one
+    expect(nearestLine).toEqual({ x1: 0, y1: 1, x2: 1, y2: 1 })
+  })
+})

package/src/utils/findNearestLine.ts

@@ -0,0 +1,92 @@
+import type { Line, Point } from '../editor/types'
+
+/**
+ * Finds the nearest line to a given point from an array of lines.
+ *
+ * @param lines - An array of line segments defined by their endpoints.
+ * @param point - The point to which the nearest line is to be found.
+ * @returns The line segment nearest to the given point.
+ */
+export function findNearestLine(
+  lines: Line[],
+  point: Point,
+): { nearestLine: Line | null; dist: number; projectionPoint: number } {
+  let minDistSquared = Infinity
+  let nearestLine: Line | null = null
+  let nearestProjectionPoint = 0
+
+  for (const line of lines) {
+    const { distSquared, projectionPoint } = distancePointToSegmentSquared(
+      point,
+      line,
+    )
+    if (distSquared < minDistSquared) {
+      minDistSquared = distSquared
+      nearestLine = line
+      nearestProjectionPoint = projectionPoint
+    }
+  }
+
+  return {
+    nearestLine,
+    dist: Math.sqrt(minDistSquared),
+    projectionPoint: nearestProjectionPoint,
+  }
+}
+
+/**
+ * Represents where the perpendicular projection of the point onto the infinite line lies relative to the line segment:
+ *  -	If t is 0, the projection is at (x1, y1).
+ *  -	If t is 1, the projection is at (x2, y2).
+ *  -	If t is between 0 and 1, the projection lies somewhere between the two endpoints.
+ *
+ * (x1, y1) *---o-----------* (x2, y2)
+ *              |          /
+ *              |         /
+ *              |        /
+ *              |       /
+ *              |      /
+ *  MIN_DIST -> |     /
+ *              |    /
+ *              |   /
+ *              |  /
+ *              | /
+ *              |/
+ *            (x, y)
+ *
+ * Where "o" The length along the line segment where the projection point lies.
+ *
+ * Notice that the calculation works for diagonal lines as well as horizontal and vertical lines.
+ */
+function distancePointToSegmentSquared(point: Point, line: Line) {
+  const dx = line.x2 - line.x1
+  const dy = line.y2 - line.y1
+  const l2 = dx * dx + dy * dy
+
+  // If l2 is zero, the line segment is actually a point. We return the squared distance between the point and this single point.
+  if (l2 === 0) {
+    return {
+      distSquared:
+        (point.x - line.x1) * (point.x - line.x1) +
+        (point.y - line.y1) * (point.y - line.y1),
+      projectionPoint: 0.5,
+    }
+  }
+
+  let projectionPoint =
+    ((point.x - line.x1) * dx + (point.y - line.y1) * dy) / l2
+
+  // Clamp t to [0,1] for the projection point to lie within the finite line segment.
+  projectionPoint = Math.max(0, Math.min(1, projectionPoint))
+
+  const projX = line.x1 + projectionPoint * dx
+  const projY = line.y1 + projectionPoint * dy
+
+  // No need to take the square root, since we are only comparing distances and square root is monotonic.
+  return {
+    distSquared:
+      (point.x - projX) * (point.x - projX) +
+      (point.y - projY) * (point.y - projY),
+    projectionPoint,
+  }
+}

package/src/utils/getDragData.ts

@@ -0,0 +1,11 @@
+export function getDragData(event: Event) {
+  if (event instanceof DragEvent) {
+    return Array.from(event.dataTransfer?.items ?? []).reduce<
+      Record<string, any>
+    >((dragData, item) => {
+      dragData[item.type] = event.dataTransfer?.getData(item.type)
+      return dragData
+    }, {})
+  }
+  return
+}

package/src/utils/getElementTagName.ts

@@ -0,0 +1,14 @@
+import type { ElementNodeModel } from '@nordcraft/core/dist/component/component.types'
+import type { ComponentContext } from '../types'
+
+export function getElementTagName(
+  node: ElementNodeModel,
+  ctx: ComponentContext,
+  id: string,
+) {
+  if (ctx.component.version === 2 && id === 'root') {
+    return `${ctx.package ?? ctx.toddle.project}-${node.tag}`
+  }
+
+  return node.tag
+}