@nordcraft/runtime 1.0.76 → 1.0.77

package/package.json

@@ -4,8 +4,8 @@
 "type": "module",
 "homepage": "https://github.com/nordcraftengine/nordcraft",
 "dependencies": {
-"@nordcraft/core": "1.0.76",
-"@nordcraft/std-lib": "1.0.76",
+"@nordcraft/core": "1.0.77",
+"@nordcraft/std-lib": "1.0.77",
 "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.76"
+"version": "1.0.77"
 }

package/src/components/createElement.ts

@@ -225,7 +225,7 @@ export function createElement({
   })
 
   eventHandlers.forEach(([eventName, handler]) => {
-    elem.addEventListener(eventName, handler)
+    elem.addEventListener(eventName, handler, { signal: ctx.abortSignal })
   })
 
   // for script, style & SVG<text> tags we only render text child.

package/src/editor/types.ts

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

package/src/editor-preview.main.ts

@@ -913,38 +913,9 @@ export const createRoot = (
           })
           break
         case 'preview_style':
-          const { styles: previewStyleStyles, theme, resources } = message.data
+          const { styles: previewStyleStyles, theme } = 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 styleElement = document.head.querySelector(
               '[data-id="selected-node-styles"]',
@@ -1047,6 +1018,37 @@ export const createRoot = (
             }
           })
           break
+        case 'preview_resources': {
+          const { resources } = message.data
+          // 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.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)
+            })
+          break
+        }
         case 'preview_theme': {
           const { theme } = message.data
           if (theme) {