@nordcraft/runtime 1.0.74 → 1.0.75

package/package.json

@@ -4,8 +4,8 @@
 "type": "module",
 "homepage": "https://github.com/nordcraftengine/nordcraft",
 "dependencies": {
-"@nordcraft/core": "1.0.74",
-"@nordcraft/std-lib": "1.0.74",
+"@nordcraft/core": "1.0.75",
+"@nordcraft/std-lib": "1.0.75",
 "fast-deep-equal": "3.1.3",
 "path-to-regexp": "6.3.0"
 },
@@ -21,5 +21,5 @@
 "files": ["dist", "src"],
 "main": "dist/page.main.js",
 "types": "dist/page.main.d.ts",
-"version": "1.0.74"
+"version": "1.0.75"
 }

package/src/components/createComponent.ts

@@ -198,7 +198,7 @@ export function createComponent({
             (e) => e.trigger === eventTrigger,
           )
           if (eventHandler) {
-            eventHandler.actions.forEach((action) =>
+            eventHandler.actions?.forEach((action) =>
               handleAction(action, { ...dataSignal.get(), Event: data }, ctx),
             )
           }
@@ -221,7 +221,7 @@ export function createComponent({
               (e) => e.trigger === eventTrigger,
             )
             if (eventHandler) {
-              eventHandler.actions.forEach((action) =>
+              eventHandler.actions?.forEach((action) =>
                 handleAction(action, { ...dataSignal.get(), Event: data }, ctx),
               )
             }
@@ -242,7 +242,7 @@ export function createComponent({
       (e) => e.trigger === eventTrigger,
     )
     if (eventHandler) {
-      eventHandler.actions.forEach((action) =>
+      eventHandler.actions?.forEach((action) =>
         handleAction(action, { ...dataSignal.get(), Event: data }, ctx),
       )
     }

package/src/components/createElement.ts

@@ -310,7 +310,7 @@ const getEventHandler =
     ctx: ComponentContext
   }) =>
   (e: Event) => {
-    event?.actions.forEach((action) => {
+    event?.actions?.forEach((action) => {
       if (e instanceof DragEvent) {
         ;(e as any).data = getDragData(e)
       }

package/src/components/renderComponent.ts

@@ -105,7 +105,7 @@ export function renderComponent({
         .map((data) => data.Attributes)
         .subscribe((props) => {
           if (prev) {
-            component.onAttributeChange?.actions.forEach((action) => {
+            component.onAttributeChange?.actions?.forEach((action) => {
               // eslint-disable-next-line @typescript-eslint/no-floating-promises
               handleAction(
                 action,
@@ -137,7 +137,7 @@ export function renderComponent({
           prev = props
         })
     }
-    component.onLoad?.actions.forEach((action) => {
+    component.onLoad?.actions?.forEach((action) => {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       handleAction(action, dataSignal.get(), ctx)
     })

package/src/editor/types.ts

@@ -102,6 +102,10 @@ export type NordcraftPreviewEvent =
         key: string
         value: Theme
       }
+      resources?: ReadonlyArray<{
+        type: 'link'
+        href: string
+      }>
     }
   | {
       type: 'preview_theme'

package/src/editor-preview.main.ts

@@ -913,24 +913,53 @@ 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
@@ -1003,12 +1032,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;
   }`
@@ -1427,7 +1456,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)
         })