@nordcraft/runtime 1.0.74 → 1.0.76

package/src/editor-preview.main.ts

@@ -453,7 +453,7 @@ export const createRoot = (
 
             const node = getDOMNodeFromNodeId(selectedNodeId)
             const element =
-              component?.nodes[node?.getAttribute('data-node-id') ?? '']
+              component?.nodes?.[node?.getAttribute('data-node-id') ?? '']
             if (
               node &&
               element &&
@@ -544,7 +544,7 @@ export const createRoot = (
               return false
             }
             const nodeId = getNodeId(component, id.split('.').slice(1))
-            const node = nodeId ? component?.nodes[nodeId] : undefined
+            const node = nodeId ? component?.nodes?.[nodeId] : undefined
             if (!node) {
               return false
             }
@@ -562,7 +562,7 @@ export const createRoot = (
             if (message.data.metaKey) {
               // Figure out if the clicked element is a text element
               // or if one of its descendants is a text element
-              const root = component.nodes.root
+              const root = component.nodes?.root
               if (root && id) {
                 const nodeLookup = getNodeAndAncestors(component, root, id)
                 if (nodeLookup?.node.type === 'text') {
@@ -574,7 +574,7 @@ export const createRoot = (
                   const firstTextChild =
                     nodeLookup?.node.type === 'element'
                       ? nodeLookup.node.children.find(
-                          (c) => component?.nodes[c]?.type === 'text',
+                          (c) => component?.nodes?.[c]?.type === 'text',
                         )
                       : undefined
                   if (firstTextChild) {
@@ -603,7 +603,7 @@ export const createRoot = (
             mode === 'design'
           ) {
             // Figure out if the clicked element is a component
-            const root = component.nodes.root
+            const root = component.nodes?.root
             if (root) {
               const nodeLookup = getNodeAndAncestors(component, root, id)
               if (
@@ -659,7 +659,7 @@ export const createRoot = (
         }
         case 'introspect_qraphql_api': {
           const { apiKey } = message.data
-          const api = component?.apis[apiKey]
+          const api = component?.apis?.[apiKey]
           if (api && !isLegacyApi(api) && component) {
             const formulaContext: FormulaContext = {
               component,
@@ -737,7 +737,7 @@ export const createRoot = (
                     parent: parentDataId,
                     index: !isNaN(nextSiblingId)
                       ? nextSiblingId
-                      : component?.nodes[parentNodeId]?.children?.length,
+                      : component?.nodes?.[parentNodeId]?.children?.length,
                   })
                   dragState = null
                 })
@@ -913,43 +913,75 @@ export const createRoot = (
           })
           break
         case 'preview_style':
-          const { styles: previewStyleStyles, theme } = message.data
+          const { styles: previewStyleStyles, theme, resources } = message.data
           cancelAnimationFrame(previewStyleAnimationFrame)
           previewStyleAnimationFrame = requestAnimationFrame(() => {
+            // Allow for temporarily adding preview resources (e.g. fonts).
+            const resourceElements = Array.from(
+              document.head.querySelectorAll('[data-id="preview-resource"]'),
+            )
+            // Remove any resources that are no longer needed
+            resourceElements.forEach((el) => {
+              if (
+                !resources ||
+                resources.length === 0 ||
+                !resources.some((res) => res.href === el.getAttribute('href'))
+              ) {
+                el.remove()
+              }
+            })
+            resources
+              ?.filter(
+                (resource) =>
+                  !resourceElements.some(
+                    (el) => el.getAttribute('href') === resource.href,
+                  ),
+              )
+              .forEach((resource) => {
+                const resourceElement = document.createElement('link')
+                resourceElement.setAttribute('data-id', 'preview-resource')
+                resourceElement.rel = 'stylesheet'
+                resourceElement.href = resource.href
+                document.head.appendChild(resourceElement)
+              })
+
             // Update or create a new style tag and set the given styles with important priority
-            let styleTag = document.head.querySelector(
+            let styleElement = document.head.querySelector(
               '[data-id="selected-node-styles"]',
             )
 
             // Cleanup when null styles are sent
             if (!previewStyleStyles) {
-              styleTag?.remove()
+              styleElement?.remove()
               return
             }
 
-            if (!styleTag) {
-              styleTag = document.createElement('style')
-              styleTag.setAttribute('data-id', 'selected-node-styles')
-              document.head.appendChild(styleTag)
+            if (!styleElement) {
+              styleElement = document.createElement('style')
+              styleElement.setAttribute('data-id', 'selected-node-styles')
+              document.head.appendChild(styleElement)
             }
 
             // If style variant targets a pseudo-element, apply styles to it instead
             let pseudoElement = ''
             if (component && styleVariantSelection) {
-              const nodeLookup = getNodeAndAncestors(
-                component,
-                component.nodes.root,
-                styleVariantSelection.nodeId,
-              )
+              const rootNode = component.nodes?.root
+              if (rootNode) {
+                const nodeLookup = getNodeAndAncestors(
+                  component,
+                  rootNode,
+                  styleVariantSelection.nodeId,
+                )
 
-              if (
-                (nodeLookup?.node.type === 'element' ||
-                  nodeLookup?.node.type === 'component') &&
-                nodeLookup.node.variants?.[
-                  styleVariantSelection.styleVariantIndex
-                ].pseudoElement
-              ) {
-                pseudoElement = `::${nodeLookup.node.variants[styleVariantSelection.styleVariantIndex].pseudoElement}`
+                if (
+                  (nodeLookup?.node.type === 'element' ||
+                    nodeLookup?.node.type === 'component') &&
+                  nodeLookup.node.variants?.[
+                    styleVariantSelection.styleVariantIndex
+                  ].pseudoElement
+                ) {
+                  pseudoElement = `::${nodeLookup.node.variants[styleVariantSelection.styleVariantIndex].pseudoElement}`
+                }
               }
             }
 
@@ -1003,12 +1035,12 @@ export const createRoot = (
                   getThemeEntries(theme.value, theme.key),
                 ),
               )
-              styleTag.innerHTML = cssBlocks.join('\n')
+              styleElement.innerHTML = cssBlocks.join('\n')
             } else {
               const previewStyles = Object.entries(previewStyleStyles)
                 .map(([key, value]) => `${key}: ${value} !important;`)
                 .join('\n')
-              styleTag.innerHTML = `[data-id="${selectedNodeId}"]${pseudoElement}, [data-id="${selectedNodeId}"] ~ [data-id^="${selectedNodeId}("]${pseudoElement} {
+              styleElement.innerHTML = `[data-id="${selectedNodeId}"]${pseudoElement}, [data-id="${selectedNodeId}"] ~ [data-id^="${selectedNodeId}("]${pseudoElement} {
     ${previewStyles}
     transition: none !important;
   }`
@@ -1049,7 +1081,7 @@ export const createRoot = (
     }
     if (mode === 'design') {
       if (selectedNodeId !== null) {
-        const root = _component?.nodes.root
+        const root = _component?.nodes?.root
         if (root) {
           const nodeLookup = getNodeAndAncestors(
             _component,
@@ -1077,7 +1109,7 @@ export const createRoot = (
         nodeId: selectedNodeId,
         styleVariantIndex: variantIndex,
       }
-      const root = component?.nodes.root
+      const root = component?.nodes?.root
       if (root && component) {
         const nodeLookup = getNodeAndAncestors(component, root, selectedNodeId)
         if (nodeLookup) {
@@ -1158,10 +1190,10 @@ export const createRoot = (
     if (
       fastDeepEqual(ctx?.component.attributes, _component.attributes) === false
     ) {
-      Attributes = mapObject(_component.attributes, ([name, { testValue }]) => [
-        name,
-        testValue,
-      ])
+      Attributes = mapObject(
+        _component.attributes ?? {},
+        ([name, { testValue }]) => [name, testValue],
+      )
     }
     if (
       _component.route &&
@@ -1205,10 +1237,10 @@ export const createRoot = (
         )
       }
 
-      Attributes = mapObject(_component.attributes, ([name, { testValue }]) => [
-        name,
-        testValue,
-      ])
+      Attributes = mapObject(
+        _component.attributes ?? {},
+        ([name, { testValue }]) => [name, testValue],
+      )
     }
     if (
       fastDeepEqual(
@@ -1253,7 +1285,7 @@ export const createRoot = (
             const formulaContext: FormulaContext = {
               data: {
                 Attributes: mapObject(
-                  providerComponent.attributes,
+                  providerComponent.attributes ?? {},
                   ([name, attr]) => [name, attr.testValue],
                 ),
                 // Recursively resolve contexts providers before their children to build up the fake context tree in preview mode
@@ -1287,7 +1319,7 @@ export const createRoot = (
               }
             }
             formulaContext.data.Variables = mapObject(
-              providerComponent.variables,
+              providerComponent.variables ?? {},
               ([name, variable]) => [
                 name,
                 applyFormula(variable.initialValue, formulaContext),
@@ -1321,7 +1353,7 @@ export const createRoot = (
       fastDeepEqual(_component.variables, ctx?.component.variables) === false
     ) {
       Variables = mapObject(
-        _component.variables,
+        _component.variables ?? {},
         ([name, { initialValue }]) => [
           name,
           applyFormula(initialValue, {
@@ -1359,7 +1391,7 @@ export const createRoot = (
     for (const api in newCtx.component.apis) {
       // check if the api has changed (ignoring onCompleted and onFailed).
       const apiInstance = newCtx.component.apis[api]
-      const previousApiInstance = ctx?.component.apis[api]
+      const previousApiInstance = ctx?.component.apis?.[api]
       if (isLegacyApi(apiInstance)) {
         if (
           fastDeepEqual(
@@ -1376,7 +1408,7 @@ export const createRoot = (
               Apis: omitKeys(data.Apis ?? {}, [
                 ...Object.keys(data.Apis ?? {}).filter(
                   // remove any data from an api that is not part of the component
-                  (key) => !newCtx.component.apis[key],
+                  (key) => !newCtx.component.apis?.[key],
                 ),
                 api,
               ]),
@@ -1427,7 +1459,7 @@ export const createRoot = (
           parentElement: domNode,
           instance: { [newCtx.component.name]: 'root' },
         })
-        newCtx.component.onLoad?.actions.forEach((action) => {
+        newCtx.component.onLoad?.actions?.forEach((action) => {
           // eslint-disable-next-line @typescript-eslint/no-floating-promises
           handleAction(action, dataSignal.get(), newCtx)
         })
@@ -1576,7 +1608,7 @@ export const createRoot = (
   const updateConditionalElements = () => {
     const displayedNodes: string[] = []
     if (selectedNodeId && component) {
-      const root = component.nodes.root
+      const root = component.nodes?.root
       if (root) {
         const nodeLookup = getNodeAndAncestors(component, root, selectedNodeId)
         if (isNodeOrAncestorConditional(nodeLookup)) {
@@ -1692,7 +1724,7 @@ function getNodeId(component: Component, path: string[]) {
     if (nextChild === undefined || currentId === undefined) {
       return currentId ?? null
     }
-    const currentNode = component.nodes[currentId]
+    const currentNode = component.nodes?.[currentId]
     if (!currentNode?.children) {
       return null
     }

package/src/page.main.ts

@@ -162,7 +162,7 @@ export const createRoot = (domNode: HTMLElement) => {
     ...window.toddle.pageState,
     // Re-initialize variables since some of them might rely on client-side
     // state (e.g. localStorage, sensors etc.)
-    Variables: mapObject(component.variables, ([name, variable]) => [
+    Variables: mapObject(component.variables ?? {}, ([name, variable]) => [
       name,
       applyFormula(variable.initialValue, {
         data: window.toddle.pageState,
@@ -213,17 +213,19 @@ export const createRoot = (domNode: HTMLElement) => {
   }
 
   // Note: this function must run procedurally to ensure apis (which are in correct order) can reference each other
-  sortApiObjects(Object.entries(component.apis)).forEach(([name, api]) => {
-    if (isLegacyApi(api)) {
-      ctx.apis[name] = createLegacyAPI(api, ctx)
-    } else {
-      ctx.apis[name] = createAPI({
-        apiRequest: api,
-        ctx,
-        componentData: dataSignal.get(),
-      })
-    }
-  })
+  sortApiObjects(Object.entries(component.apis ?? {})).forEach(
+    ([name, api]) => {
+      if (isLegacyApi(api)) {
+        ctx.apis[name] = createLegacyAPI(api, ctx)
+      } else {
+        ctx.apis[name] = createAPI({
+          apiRequest: api,
+          ctx,
+          componentData: dataSignal.get(),
+        })
+      }
+    },
+  )
   // Trigger actions for all APIs after all of them are created.
   Object.values(ctx.apis)
     .filter(isContextApiV2)

package/src/styles/CustomPropertyStyleSheet.ts

@@ -1,4 +1,5 @@
 import type { MediaQuery } from '@nordcraft/core/dist/component/component.types'
+import type { Nullable } from '@nordcraft/core/dist/types'
 
 /**
  * CustomPropertyStyleSheet is a utility class that manages CSS custom properties
@@ -15,7 +16,10 @@ export class CustomPropertyStyleSheet {
   // Selector to rule index mapping
   private ruleMap: Map<string, CSSStyleRule | CSSNestedDeclarations> | undefined
 
-  constructor(root: Document | ShadowRoot, styleSheet?: CSSStyleSheet | null) {
+  constructor(
+    root: Document | ShadowRoot,
+    styleSheet?: Nullable<CSSStyleSheet>,
+  ) {
     if (styleSheet) {
       this.styleSheet = styleSheet
     } else {
@@ -30,10 +34,10 @@ export class CustomPropertyStyleSheet {
   public registerProperty(
     selector: string,
     name: string,
-    options?: {
-      mediaQuery?: MediaQuery
-      startingStyle?: boolean
-    },
+    options?: Nullable<{
+      mediaQuery?: Nullable<MediaQuery>
+      startingStyle?: Nullable<boolean>
+    }>,
   ): (newValue: string) => void {
     this.ruleMap ??= this.hydrateFromBase()
     const fullSelector = CustomPropertyStyleSheet.getFullSelector(
@@ -69,11 +73,11 @@ export class CustomPropertyStyleSheet {
   public unregisterProperty(
     selector: string,
     name: string,
-    options?: {
-      mediaQuery?: MediaQuery
-      startingStyle?: boolean
-      deepClean?: boolean
-    },
+    options?: Nullable<{
+      mediaQuery?: Nullable<MediaQuery>
+      startingStyle?: Nullable<boolean>
+      deepClean?: Nullable<boolean>
+    }>,
   ): void {
     if (!this.ruleMap) {
       return
@@ -161,10 +165,10 @@ export class CustomPropertyStyleSheet {
 
   private static getFullSelector(
     selector: string,
-    options?: {
-      mediaQuery?: MediaQuery
-      startingStyle?: boolean
-    },
+    options?: Nullable<{
+      mediaQuery?: Nullable<MediaQuery>
+      startingStyle?: Nullable<boolean>
+    }>,
   ) {
     let result =
       selector + (options?.startingStyle ? ' { @starting-style { }}' : ' { }')

package/src/utils/nodes.ts

@@ -38,7 +38,7 @@ export const getNodeAndAncestors = (
             nodeId: path.slice(0, i + 1).join('.'),
           })
         }
-        return component.nodes[node.children[childIndex]]
+        return component.nodes?.[node.children[childIndex]]
       default:
         return undefined
     }