@nordcraft/runtime 1.0.0

package/src/utils/nodes.ts

@@ -0,0 +1,125 @@
+import type {
+  Component,
+  NodeModel,
+} from '@nordcraft/core/dist/component/component.types'
+
+type NodeWithNodeId = NodeModel & { nodeId: string }
+
+interface NodeAndAncestorLookup {
+  node: NodeWithNodeId
+  ancestors: NodeWithNodeId[]
+}
+
+export const getNodeAndAncestors = (
+  component: Component,
+  root: NodeModel,
+  id: unknown,
+): NodeAndAncestorLookup | undefined => {
+  if (typeof id !== 'string' || id.length === 0) {
+    return undefined
+  }
+  const path = id.split('.')
+  const pathParsed = path.map((n) => parseInt(n))
+  const ancestors: NodeWithNodeId[] = []
+  // nodePath skips the root element as it's selected as the initial
+  // value in the reduce below
+  const nodePath = pathParsed.slice(1)
+  const node = nodePath.reduce((node: NodeModel | undefined, childIndex, i) => {
+    switch (node?.type) {
+      // 'text' elements don't have any children
+      case 'element':
+      case 'component':
+      case 'slot':
+        // Ancestors are elements before the target node
+        if (i <= nodePath.length - 1) {
+          ancestors.push({
+            ...node,
+            // Use the original path as origin to get correct nodeIds
+            nodeId: path.slice(0, i + 1).join('.'),
+          })
+        }
+        return component.nodes[node.children[childIndex]]
+      default:
+        return undefined
+    }
+  }, root)
+  if (node === undefined) {
+    return undefined
+  }
+  return { node: { ...node, nodeId: id }, ancestors }
+}
+
+export const isNodeOrAncestorConditional = (
+  nodeLookup?: NodeAndAncestorLookup,
+): nodeLookup is NodeAndAncestorLookup =>
+  nodeLookup?.node?.condition !== undefined ||
+  nodeLookup?.ancestors.some((a) => a.condition !== undefined) === true
+
+/**
+ * @returns The next toddle sibling element or null if this is the last element. A toddle sibling is a sibling with a higher index or a the index, but a higher repeat index.
+ */
+export const getNextSiblingElement = (
+  path: string,
+  parentElement: Element | ShadowRoot,
+) => {
+  const pathParts = path.split('.')
+  const lastPathPart = pathParts.slice(-1)[0]
+  const index = parseInt(lastPathPart)
+  const repeatIndex = parseInt(String(lastPathPart.split('(')[1]))
+
+  // Find the first child that either has a higher index or a similar index, but higher repeat index
+  for (const child of parentElement.children) {
+    const childPath = child.getAttribute('data-id')
+    const lastChildPathPart = childPath?.split('.').slice(-1)[0]
+    const childIndex = parseInt(String(lastChildPathPart))
+    if (
+      childIndex === index &&
+      parseInt(String(lastChildPathPart?.split('(')[1])) > repeatIndex
+    ) {
+      return child
+    }
+
+    if (childIndex > index) {
+      return child
+    }
+  }
+
+  return null
+}
+
+/**
+ * This function efficiently ensures that:
+ * 1. New items are added in the correct position.
+ * 2. Existing items are not moved if they are already in the correct order.
+ */
+export function ensureEfficientOrdering(
+  parentElement: Element | ShadowRoot,
+  items: ReadonlyArray<Element | Text>,
+  nextElement: Element | Text | null = null,
+) {
+  // Identify the starting point for comparisons.
+  let insertBeforeElement = nextElement // If insertBeforeElement is null, items will be appended at the end.
+
+  // To track the current position in the DOM, we'll use a marker that advances through the sibling elements.
+  let currentMarker = insertBeforeElement
+    ? insertBeforeElement.previousSibling
+    : parentElement.lastChild
+
+  // We'll process the items array in reverse order to minimize the number of DOM operations.
+  for (let i = items.length - 1; i >= 0; i--) {
+    const item = items[i]
+
+    // Check if the item is already in the correct position by comparing it with the currentMarker.
+    if (item === currentMarker) {
+      // The item is in the correct position, move the marker to the previous sibling.
+      currentMarker = item.previousSibling
+    } else {
+      // The item is either not in the DOM or not in the correct position.
+      // Insert the item before the insertBeforeElement (or append it if insertBeforeElement is null).
+      parentElement.insertBefore(item, insertBeforeElement)
+    }
+
+    // Update insertBeforeElement to the current item for the next iteration, as we need to insert subsequent items before this one.
+    insertBeforeElement = item
+  }
+}

package/src/utils/omitStyle.ts

@@ -0,0 +1,19 @@
+import type { Component } from '@nordcraft/core/dist/component/component.types'
+
+export function omitSubnodeStyleForComponent<T extends Component | undefined>(
+  component: T,
+): T {
+  const clone = structuredClone(component)
+  Object.entries(clone?.nodes ?? {}).forEach(([nodeId, node]) => {
+    if (
+      (node.type === 'element' || node.type === 'component') &&
+      nodeId !== 'root'
+    ) {
+      delete node.style
+      delete node.variants
+      delete node.animations
+    }
+  })
+
+  return clone
+}

package/src/utils/rectHasPoint.ts

@@ -0,0 +1,5 @@
+import type { Point } from '../editor/types'
+
+export function rectHasPoint(rect: DOMRect, { x, y }: Point) {
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+}

package/src/utils/setAttribute.ts

@@ -0,0 +1,56 @@
+import { isDefined, toBoolean } from '@nordcraft/core/dist/utils/util'
+
+/**
+ * Some attributes need special handling.
+ */
+export function setAttribute(
+  elem: HTMLElement | SVGElement | MathMLElement,
+  attr: string,
+  value: any,
+) {
+  switch (attr) {
+    case 'srcObject':
+    case 'src':
+      if (elem instanceof HTMLMediaElement) {
+        ;(elem as any)[attr] = value
+      } else {
+        elem.setAttribute(attr, String(value))
+      }
+      break
+    case 'value':
+    case 'type': {
+      let val = value
+      if (elem instanceof HTMLProgressElement) {
+        // An HTMLProgressElement will break other elements in our editor if the value is not a (finite) number
+        // See docs here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value
+        // and original issue here https://discord.com/channels/972416966683926538/1317827591230722048
+        if (!isDefined(value) || !Number.isFinite(Number(value))) {
+          val = 0
+        }
+      }
+      ;(elem as any)[attr] = toBoolean(val) ? String(val) : undefined
+      break
+    }
+    case 'muted':
+    case 'autoplay':
+      if (elem instanceof HTMLMediaElement) {
+        ;(elem as any)[attr] = toBoolean(value)
+      } else {
+        elem.setAttribute(attr, String(value))
+      }
+      break
+    default:
+      if (toBoolean(value)) {
+        elem.setAttribute(attr, String(value))
+        if (
+          // autofocus often does not work in the editor
+          attr === 'autofocus' &&
+          document.body.getAttribute('data-mode') !== 'design'
+        ) {
+          setTimeout(() => elem.focus(), 100)
+        }
+      } else {
+        elem.removeAttribute(attr)
+      }
+  }
+}

package/src/utils/tryStartViewTransition.ts

@@ -0,0 +1,32 @@
+interface DocumentWithViewTransition {
+  startViewTransition?: (callback: () => void) => {
+    finished: Promise<void>
+    ready: Promise<void>
+    updateCallbackDone: Promise<void>
+  }
+}
+
+export function tryStartViewTransition(
+  updateCallback: () => void,
+  options?: {
+    skipPrefersReducedMotionCheck?: boolean
+  },
+): {
+  finished: Promise<void>
+} {
+  const startViewTransition = (document as DocumentWithViewTransition)
+    .startViewTransition
+
+  if (
+    !startViewTransition ||
+    (options?.skipPrefersReducedMotionCheck !== true &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+  ) {
+    updateCallback()
+    return {
+      finished: Promise.resolve(),
+    }
+  }
+
+  return startViewTransition.call(document, updateCallback)
+}

package/src/utils/url.ts

@@ -0,0 +1,45 @@
+import { isDefined } from '@nordcraft/core/dist/utils/util'
+import { compile } from 'path-to-regexp'
+import type { Location } from '../types'
+
+export const getLocationUrl = ({
+  query,
+  page,
+  route,
+  params,
+  hash,
+}: Location) => {
+  let path: string
+  if (route) {
+    const pathSegments: string[] = []
+    for (const segment of route.path) {
+      if (segment.type === 'static') {
+        pathSegments.push(segment.name)
+      } else {
+        const segmentValue = params[segment.name]
+        if (isDefined(segmentValue)) {
+          pathSegments.push(segmentValue)
+        } else {
+          // If a param is missing, we can't build the rest of the path
+          break
+        }
+      }
+    }
+    path = '/' + pathSegments.join('/')
+  } else {
+    path = compile(page as string, { encode: encodeURIComponent })(params)
+  }
+  const hashString = hash === undefined || hash === '' ? '' : '#' + hash
+  const queryString = Object.entries(query)
+    .filter(([_, q]) => q !== null)
+    .map(([key, value]) => {
+      return `${encodeURIComponent(
+        route?.query[key]?.name ?? key,
+      )}=${encodeURIComponent(String(value))}`
+    })
+    .join('&')
+
+  return `${path}${hashString}${
+    queryString.length > 0 ? '?' + queryString : ''
+  }`
+}