@nordcraft/runtime 1.0.68 → 1.0.70

package/dist/signal/signal.d.ts

@@ -5,6 +5,7 @@ export declare class Signal<T> {
         destroy?: () => void;
     }>;
     subscriptions: Array<() => void>;
+    destroying: boolean;
     constructor(value: T);
     get(): T;
     set(value: T): void;

package/dist/signal/signal.js

@@ -3,6 +3,7 @@ export class Signal {
     value;
     subscribers;
     subscriptions;
+    destroying = false;
     constructor(value) {
         this.value = value;
         this.subscribers = new Set();
@@ -19,7 +20,9 @@ export class Signal {
         }
         if (fastDeepEqual(value, this.value) === false) {
             this.value = value;
-            this.subscribers.forEach(({ notify }) => notify(this.value));
+            for (const subscriber of this.subscribers) {
+                subscriber.notify(this.value);
+            }
         }
     }
     update(f) {
@@ -34,16 +37,25 @@ export class Signal {
         };
     }
     destroy() {
-        this.subscribers.forEach(({ destroy }) => {
-            destroy?.();
-        });
+        // Prevent re-entrancy
+        if (this.destroying) {
+            return;
+        }
+        this.destroying = true;
+        for (const subscriber of this.subscribers) {
+            subscriber.destroy?.();
+        }
         this.subscribers.clear();
-        this.subscriptions?.forEach((f) => f());
+        for (const subscription of this.subscriptions) {
+            subscription();
+        }
+        this.subscriptions.splice(0, this.subscriptions.length);
+        this.destroying = false;
     }
     cleanSubscribers() {
-        this.subscribers.forEach(({ destroy }) => {
-            destroy?.();
-        });
+        for (const subscriber of this.subscribers) {
+            subscriber.destroy?.();
+        }
         this.subscribers.clear();
     }
     map(f) {

package/dist/signal/signal.js.map

@@ -1 +1 @@
-{"version":3,"file":"signal.js","sourceRoot":"","sources":["../../src/signal/signal.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"signal.js","sourceRoot":"","sources":["../../src/signal/signal.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/api/createAPIv2.ts

@@ -957,6 +957,7 @@ export function createAPI({
     | Signal<{
         request: ReturnType<typeof constructRequest>
         api: ReturnType<typeof getApiForComparison>
+        headers: Array<[string, string]>
         // if the evaluated value of autoFetch changes from false -> true, we need to refetch the api
         autoFetch: boolean
         // currently, the proxy setting is always controlled by a "value formula", but in case we later
@@ -966,19 +967,22 @@ export function createAPI({
     | undefined
 
   // eslint-disable-next-line prefer-const
-  payloadSignal = ctx.dataSignal.map((_) => {
-    const payloadContext = getFormulaContext(api, initialComponentData)
+  payloadSignal = ctx.dataSignal.map((data) => {
+    const payloadContext = getFormulaContext(api, data)
+    const request = constructRequest(api, data)
     return {
-      request: constructRequest(api, initialComponentData),
+      request,
       api: getApiForComparison(api),
+      // Serialize the Headers object to be able to compare changes
+      headers: Array.from(request.requestSettings.headers.entries()),
       autoFetch: api.autoFetch
         ? applyFormula(api.autoFetch, payloadContext)
         : false,
       proxy: applyFormula(api.server?.proxy?.enabled.formula, payloadContext),
     }
   })
-  payloadSignal.subscribe(async (_) => {
-    const { url, requestSettings } = constructRequest(api, initialComponentData)
+  payloadSignal.subscribe(async (apiData) => {
+    const { url, requestSettings } = apiData.request
     // Ensure we only use caching if the page is currently loading
     const cacheMatch =
       // We lookup the API from cache as long as autofetch is defined (and not statically falsy)
@@ -1138,14 +1142,17 @@ export function createAPI({
       const autoFetch =
         api.autoFetch && applyFormula(api.autoFetch, updateContext)
       if (autoFetch) {
+        const request = constructRequest(newApi, componentData)
         payloadSignal?.set({
-          request: constructRequest(newApi, componentData),
+          request,
           api: getApiForComparison(newApi),
           autoFetch,
           proxy: applyFormula(
             newApi.server?.proxy?.enabled.formula,
             updateContext,
           ),
+          // Serialize the Headers object to be able to compare changes
+          headers: Array.from(request.requestSettings.headers.entries()),
         })
       }
     },

package/src/components/createElement.ts

@@ -11,8 +11,10 @@ import {
 import { appendUnit } from '@nordcraft/core/dist/styling/customProperty'
 import { getNodeSelector } from '@nordcraft/core/dist/utils/getNodeSelector'
 import { isDefined, toBoolean } from '@nordcraft/core/dist/utils/util'
+import type { ComponentData } from '@nordcraft/core/src/component/component.types'
 import { handleAction } from '../events/handleAction'
 import type { Signal } from '../signal/signal'
+import type { ComponentContext } from '../types'
 import { getDragData } from '../utils/getDragData'
 import { getElementTagName } from '../utils/getElementTagName'
 import { setAttribute } from '../utils/setAttribute'
@@ -210,39 +212,20 @@ export function createElement({
     )
   })
 
-  // TODO: This is a bit heavy on the runtime. Can we optimize this with a static function instead of creating a closure for each event?
+  const eventHandlers: [string, (e: Event) => boolean][] = []
   Object.values(node.events).forEach((event) => {
-    const handler = (e: Event) => {
-      event?.actions.forEach((action) => {
-        if (e instanceof DragEvent) {
-          ;(e as any).data = getDragData(e)
-        }
-        if (e instanceof ClipboardEvent) {
-          try {
-            ;(e as any).data = Array.from(e.clipboardData?.items ?? []).reduce<
-              Record<string, any>
-            >((dragData, item) => {
-              try {
-                dragData[item.type] = JSON.parse(
-                  e.clipboardData?.getData(item.type) as any,
-                )
-              } catch {
-                dragData[item.type] = e.clipboardData?.getData(item.type)
-              }
-              return dragData
-            }, {})
-          } catch (e) {
-            // eslint-disable-next-line no-console
-            console.error('Could not get paste data', e)
-          }
-        }
-        void handleAction(action, { ...dataSignal.get(), Event: e }, ctx, e)
-      })
-      return false
-    }
-    if (event) {
-      elem.addEventListener(event.trigger, handler)
+    if (!event) {
+      return
     }
+
+    eventHandlers.push([
+      event.trigger,
+      getEventHandler({ event, dataSignal, ctx }),
+    ])
+  })
+
+  eventHandlers.forEach(([eventName, handler]) => {
+    elem.addEventListener(eventName, handler)
   })
 
   // for script, style & SVG<text> tags we only render text child.
@@ -290,19 +273,67 @@ export function createElement({
         })
       })
   } else {
+    const childNodes: (Element | Text)[] = []
     node.children.forEach((child, i) => {
-      const childNodes = createNode({
-        parentElement: elem,
-        id: child,
-        path: path + '.' + i,
-        dataSignal,
-        ctx,
-        namespace,
-        instance,
-      })
-      childNodes.forEach((childNode) => elem.appendChild(childNode))
+      childNodes.push(
+        ...createNode({
+          parentElement: elem,
+          id: child,
+          path: path + '.' + i,
+          dataSignal,
+          ctx,
+          namespace,
+          instance,
+        }),
+      )
     })
+    elem.append(...childNodes)
   }
+  dataSignal.subscribe(() => {}, {
+    destroy: () => {
+      // TODO: Clean up event listeners, but after destruction of child signals (Maybe we need a "afterDestroy" hook on signals?)
+      elem.parentNode?.removeChild(elem)
+    },
+  })
 
   return elem
 }
+
+const getEventHandler =
+  ({
+    event,
+    dataSignal,
+    ctx,
+  }: {
+    event: ElementNodeModel['events'][string]
+    dataSignal: Signal<ComponentData>
+    ctx: ComponentContext
+  }) =>
+  (e: Event) => {
+    event?.actions.forEach((action) => {
+      if (e instanceof DragEvent) {
+        ;(e as any).data = getDragData(e)
+      }
+      if (e instanceof ClipboardEvent) {
+        try {
+          ;(e as any).data = Array.from(e.clipboardData?.items ?? []).reduce<
+            Record<string, any>
+          >((dragData, item) => {
+            try {
+              dragData[item.type] = JSON.parse(
+                e.clipboardData?.getData(item.type) as any,
+              )
+            } catch {
+              dragData[item.type] = e.clipboardData?.getData(item.type)
+            }
+            return dragData
+          }, {})
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('Could not get paste data', e)
+        }
+      }
+      void handleAction(action, { ...dataSignal.get(), Event: e }, ctx, e)
+    })
+    return false
+  }

package/src/signal/signal.ts

@@ -7,6 +7,7 @@ export class Signal<T> {
     destroy?: () => void
   }>
   subscriptions: Array<() => void>
+  destroying = false
 
   constructor(value: T) {
     this.value = value
@@ -25,7 +26,9 @@ export class Signal<T> {
 
     if (fastDeepEqual(value, this.value) === false) {
       this.value = value
-      this.subscribers.forEach(({ notify }) => notify(this.value))
+      for (const subscriber of this.subscribers) {
+        subscriber.notify(this.value)
+      }
     }
   }
 
@@ -41,16 +44,26 @@ export class Signal<T> {
     }
   }
   destroy() {
-    this.subscribers.forEach(({ destroy }) => {
-      destroy?.()
-    })
+    // Prevent re-entrancy
+    if (this.destroying) {
+      return
+    }
+
+    this.destroying = true
+    for (const subscriber of this.subscribers) {
+      subscriber.destroy?.()
+    }
     this.subscribers.clear()
-    this.subscriptions?.forEach((f) => f())
+    for (const subscription of this.subscriptions) {
+      subscription()
+    }
+    this.subscriptions.splice(0, this.subscriptions.length)
+    this.destroying = false
   }
   cleanSubscribers() {
-    this.subscribers.forEach(({ destroy }) => {
-      destroy?.()
-    })
+    for (const subscriber of this.subscribers) {
+      subscriber.destroy?.()
+    }
     this.subscribers.clear()
   }
   map<T2>(f: (value: T) => T2): Signal<T2> {