@nordcraft/runtime 1.0.87 → 1.0.89

package/dist/src/utils/BatchQueue.js

@@ -3,13 +3,14 @@
  * This is more efficient than processing each callback in a separate requestAnimationFrame due to the overhead.
  */
 export class BatchQueue {
+    constructor() { }
     batchQueue = [];
     isProcessing = false;
     processBatch() {
         if (this.isProcessing)
             return;
         this.isProcessing = true;
-        requestAnimationFrame(() => {
+        queueMicrotask(() => {
             while (this.batchQueue.length > 0) {
                 const callback = this.batchQueue.shift();
                 callback?.();

package/dist/src/utils/BatchQueue.js.map

@@ -1 +1 @@
-{"version":3,"file":"BatchQueue.js","sourceRoot":"","sources":["../../../src/utils/BatchQueue.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,OAAO,UAAU;IACb,UAAU,GAAsB,EAAE,CAAA;IAClC,YAAY,GAAG,KAAK,CAAA;IACpB,YAAY,GAAG;QACrB,IAAI,IAAI,CAAC,YAAY;YAAE,OAAM;QAC7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QAExB,qBAAqB,CAAC,GAAG,EAAE,CAAC;YAC1B,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;gBACxC,QAAQ,EAAE,EAAE,CAAA;YACd,CAAC;YACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;QAAA,CAC1B,CAAC,CAAA;IAAA,CACH;IACM,GAAG,CAAC,QAAoB,EAAE;QAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC9B,IAAI,CAAC,YAAY,EAAE,CAAA;IAAA,CACpB;CACF"}
+{"version":3,"file":"BatchQueue.js","sourceRoot":"","sources":["../../../src/utils/BatchQueue.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,OAAO,UAAU;IACrB,cAAc,EAAC,CAAC;IACR,UAAU,GAAsB,EAAE,CAAA;IAClC,YAAY,GAAG,KAAK,CAAA;IACpB,YAAY,GAAG;QACrB,IAAI,IAAI,CAAC,YAAY;YAAE,OAAM;QAC7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QACxB,cAAc,CAAC,GAAG,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;gBACxC,QAAQ,EAAE,EAAE,CAAA;YACd,CAAC;YACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;QAAA,CAC1B,CAAC,CAAA;IAAA,CACH;IACM,GAAG,CAAC,QAAoB,EAAE;QAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC9B,IAAI,CAAC,YAAY,EAAE,CAAA;IAAA,CACpB;CACF"}

package/dist/src/utils/formulaHasValue.d.ts

@@ -0,0 +1,2 @@
+import type { Formula } from '@nordcraft/core/dist/formula/formula';
+export declare const formulaHasValue: (formula: Formula | undefined) => formula is Formula;

package/dist/src/utils/formulaHasValue.js

@@ -0,0 +1,3 @@
+import { isDefined } from '@nordcraft/core/dist/utils/util';
+export const formulaHasValue = (formula) => isDefined(formula) && !(formula.type === 'value' && !isDefined(formula.value));
+//# sourceMappingURL=formulaHasValue.js.map

package/dist/src/utils/formulaHasValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formulaHasValue.js","sourceRoot":"","sources":["../../../src/utils/formulaHasValue.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAA;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,OAA4B,EACR,EAAE,CACtB,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAA"}

package/dist/src/utils/subscribeCustomProperty.d.ts

@@ -1,11 +1,11 @@
 import type { Signal } from '../signal/signal';
 import type { StyleVariant } from '@nordcraft/core/dist/styling/variantSelector';
-import type { Runtime } from '@nordcraft/core/dist/types';
-export declare function subscribeCustomProperty({ selector, customPropertyName, signal, variant, root, runtime }: {
+import { CustomPropertyStyleSheet } from '../styles/CustomPropertyStyleSheet';
+export declare let customPropertiesStylesheet: CustomPropertyStyleSheet | undefined;
+export declare function subscribeCustomProperty({ selector, customPropertyName, signal, variant, root }: {
     selector: string;
     customPropertyName: string;
     signal: Signal<string>;
     variant?: StyleVariant;
     root: Document | ShadowRoot;
-    runtime: Runtime;
 }): void;

package/dist/src/utils/subscribeCustomProperty.js

@@ -1,12 +1,11 @@
 import { CUSTOM_PROPERTIES_STYLESHEET_ID } from '@nordcraft/core/dist/styling/theme.const';
 import { CustomPropertyStyleSheet } from '../styles/CustomPropertyStyleSheet';
-let customPropertiesStylesheet;
-export function subscribeCustomProperty({ selector, customPropertyName, signal, variant, root, runtime, }) {
+export let customPropertiesStylesheet;
+export function subscribeCustomProperty({ selector, customPropertyName, signal, variant, root, }) {
     customPropertiesStylesheet ??= new CustomPropertyStyleSheet(root, root.getElementById(CUSTOM_PROPERTIES_STYLESHEET_ID)?.sheet);
     signal.subscribe(customPropertiesStylesheet.registerProperty(selector, customPropertyName, variant), {
         destroy: () => {
             customPropertiesStylesheet?.unregisterProperty(selector, customPropertyName, {
-                deepClean: runtime === 'preview',
                 mediaQuery: variant?.mediaQuery,
                 startingStyle: variant?.startingStyle,
             });

package/dist/src/utils/subscribeCustomProperty.js.map

@@ -1 +1 @@
-{"version":3,"file":"subscribeCustomProperty.js","sourceRoot":"","sources":["../../../src/utils/subscribeCustomProperty.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAA;AAG1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAA;AAE7E,IAAI,0BAAgE,CAAA;AAEpE,MAAM,UAAU,uBAAuB,CAAC,EACtC,QAAQ,EACR,kBAAkB,EAClB,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,GAQR,EAAE;IACD,0BAA0B,KAAK,IAAI,wBAAwB,CACzD,IAAI,EAEF,IAAI,CAAC,cAAc,CAAC,+BAA+B,CAGpD,EAAE,KAAK,CACT,CAAA;IAED,MAAM,CAAC,SAAS,CACd,0BAA0B,CAAC,gBAAgB,CACzC,QAAQ,EACR,kBAAkB,EAClB,OAAO,CACR,EACD;QACE,OAAO,EAAE,GAAG,EAAE,CAAC;YACb,0BAA0B,EAAE,kBAAkB,CAC5C,QAAQ,EACR,kBAAkB,EAClB;gBACE,SAAS,EAAE,OAAO,KAAK,SAAS;gBAChC,UAAU,EAAE,OAAO,EAAE,UAAU;gBAC/B,aAAa,EAAE,OAAO,EAAE,aAAa;aACtC,CACF,CAAA;QAAA,CACF;KACF,CACF,CAAA;AAAA,CACF"}
+{"version":3,"file":"subscribeCustomProperty.js","sourceRoot":"","sources":["../../../src/utils/subscribeCustomProperty.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAA;AAE1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAA;AAE7E,MAAM,CAAC,IAAI,0BAAgE,CAAA;AAE3E,MAAM,UAAU,uBAAuB,CAAC,EACtC,QAAQ,EACR,kBAAkB,EAClB,MAAM,EACN,OAAO,EACP,IAAI,GAOL,EAAE;IACD,0BAA0B,KAAK,IAAI,wBAAwB,CACzD,IAAI,EAEF,IAAI,CAAC,cAAc,CAAC,+BAA+B,CAGpD,EAAE,KAAK,CACT,CAAA;IAED,MAAM,CAAC,SAAS,CACd,0BAA0B,CAAC,gBAAgB,CACzC,QAAQ,EACR,kBAAkB,EAClB,OAAO,CACR,EACD;QACE,OAAO,EAAE,GAAG,EAAE,CAAC;YACb,0BAA0B,EAAE,kBAAkB,CAC5C,QAAQ,EACR,kBAAkB,EAClB;gBACE,UAAU,EAAE,OAAO,EAAE,UAAU;gBAC/B,aAAa,EAAE,OAAO,EAAE,aAAa;aACtC,CACF,CAAA;QAAA,CACF;KACF,CACF,CAAA;AAAA,CACF"}

package/package.json

@@ -9,8 +9,8 @@
 "directory": "packages/runtime"
 },
 "dependencies": {
-"@nordcraft/core": "1.0.87",
-"@nordcraft/std-lib": "1.0.87",
+"@nordcraft/core": "1.0.89",
+"@nordcraft/std-lib": "1.0.89",
 "fast-deep-equal": "3.1.3",
 "path-to-regexp": "6.3.0"
 },
@@ -23,5 +23,5 @@
 "files": ["dist", "src"],
 "main": "dist/page.main.js",
 "types": "dist/page.main.d.ts",
-"version": "1.0.87"
+"version": "1.0.89"
 }

package/src/components/createComponent.ts

@@ -20,6 +20,7 @@ import type { Signal } from '../signal/signal'
 import { signal } from '../signal/signal'
 import type { ComponentChild, ComponentContext, ContextApi } from '../types'
 import { createFormulaCache } from '../utils/createFormulaCache'
+import { formulaHasValue } from '../utils/formulaHasValue'
 import { subscribeCustomProperty } from '../utils/subscribeCustomProperty'
 import { renderComponent } from './renderComponent'
 
@@ -55,78 +56,25 @@ export function createComponent({
     )
     return []
   }
+  const formulaCtx = {
+    component: ctx.component,
+    formulaCache: ctx.formulaCache,
+    root: ctx.root,
+    package: ctx.package,
+    toddle: ctx.toddle,
+    env: ctx.env,
+  }
   const attributesSignal = dataSignal.map((data) => {
     return mapObject(node.attrs, ([attr, value]) => [
       attr,
       value?.type !== 'value'
         ? applyFormula(value, {
+            ...formulaCtx,
             data,
-            component: ctx.component,
-            formulaCache: ctx.formulaCache,
-            root: ctx.root,
-            package: ctx.package,
-            toddle: ctx.toddle,
-            env: ctx.env,
           })
         : value?.value,
     ])
   })
-  Object.entries(node.customProperties ?? {}).forEach(
-    ([customPropertyName, customProperty]) =>
-      subscribeCustomProperty({
-        selector: getNodeSelector(path, {
-          componentName: ctx.component.name,
-          nodeId: node.id,
-        }),
-        signal: dataSignal.map((data) =>
-          appendUnit(
-            applyFormula(customProperty.formula, {
-              data,
-              component: ctx.component,
-              formulaCache: ctx.formulaCache,
-              root: ctx.root,
-              package: ctx.package,
-              toddle: ctx.toddle,
-              env: ctx.env,
-            }),
-            customProperty.unit,
-          ),
-        ),
-        customPropertyName,
-        root: ctx.root,
-        runtime: ctx.env.runtime,
-      }),
-  )
-  node.variants?.forEach((variant) => {
-    Object.entries(variant.customProperties ?? {}).forEach(
-      ([customPropertyName, customProperty]) =>
-        subscribeCustomProperty({
-          selector: getNodeSelector(path, {
-            componentName: ctx.component.name,
-            nodeId: node.id,
-            variant,
-          }),
-          signal: dataSignal.map((data) =>
-            appendUnit(
-              applyFormula(customProperty.formula, {
-                data,
-                component: ctx.component,
-                formulaCache: ctx.formulaCache,
-                root: ctx.root,
-                package: ctx.package,
-                toddle: ctx.toddle,
-                env: ctx.env,
-              }),
-              customProperty.unit,
-            ),
-          ),
-          customPropertyName,
-          variant,
-          root: ctx.root,
-          runtime: ctx.env.runtime,
-        }),
-    )
-  })
 
   const componentDataSignal = signal<ComponentData>({
     Location: dataSignal.get().Location,
@@ -138,13 +86,9 @@ export function createComponent({
         isLoading:
           api.autoFetch &&
           applyFormula(api.autoFetch, {
-            data: dataSignal.get(),
+            ...formulaCtx,
             component,
-            formulaCache: ctx.formulaCache,
-            root: ctx.root,
-            package: ctx.package,
-            toddle: ctx.toddle,
-            env: ctx.env,
+            data: dataSignal.get(),
           })
             ? true
             : false,
@@ -152,6 +96,19 @@ export function createComponent({
       },
     ]),
   })
+
+  // Subscribe to global stores (currently only theme)
+  // We subscribe before calculating variable initial values to ensure they can reference global store values
+  ctx.stores.theme.subscribe((newTheme) => {
+    componentDataSignal.update((data) => ({
+      ...data,
+      Page: {
+        ...data.Page,
+        Theme: newTheme,
+      },
+    }))
+  })
+
   // Subscribe context before calculating variable initial values to ensure they can reference context values
   subscribeToContext(componentDataSignal, component, ctx)
   componentDataSignal.update((data) => ({
@@ -160,13 +117,9 @@ export function createComponent({
       name,
       applyFormula(variable.initialValue, {
         // Initial value
-        data: componentDataSignal.get(),
+        ...formulaCtx,
         component,
-        formulaCache: ctx.formulaCache,
-        root: ctx.root,
-        package: ctx.package,
-        toddle: ctx.toddle,
-        env: ctx.env,
+        data: componentDataSignal.get(),
       }),
     ]),
   }))
@@ -310,17 +263,6 @@ export function createComponent({
     })
   }
 
-  // Subscribe to global stores (currently only theme)
-  ctx.stores.theme.subscribe((newTheme) => {
-    componentDataSignal.update((data) => ({
-      ...data,
-      Page: {
-        ...data.Page,
-        Theme: newTheme,
-      },
-    }))
-  })
-
   attributesSignal.subscribe(
     (Attributes) =>
       componentDataSignal.update((data) => ({
@@ -330,7 +272,7 @@ export function createComponent({
     { destroy: () => componentDataSignal.destroy() },
   )
 
-  return renderComponent({
+  const renderedComponent = renderComponent({
     dataSignal: componentDataSignal,
     component,
     components: ctx.components,
@@ -355,4 +297,54 @@ export function createComponent({
         ? { ...instance, [ctx.component.name]: 'root' }
         : { [ctx.component.name]: node.id ?? '' },
   })
+
+  // Custom properties instance overrides are added after the child tree is rendered to ensure correct order
+  Object.entries(node.customProperties ?? {})
+    .filter(([_, { formula }]) => formulaHasValue(formula))
+    .forEach(([customPropertyName, customProperty]) =>
+      subscribeCustomProperty({
+        selector: getNodeSelector(path, {
+          componentName: ctx.component.name,
+          nodeId: node.id,
+        }),
+        signal: dataSignal.map((data) =>
+          appendUnit(
+            applyFormula(customProperty.formula, {
+              ...formulaCtx,
+              data,
+            }),
+            customProperty.unit,
+          ),
+        ),
+        customPropertyName,
+        root: ctx.root,
+      }),
+    )
+  node.variants?.forEach((variant) => {
+    Object.entries(variant.customProperties ?? {})
+      .filter(([_, { formula }]) => formulaHasValue(formula))
+      .forEach(([customPropertyName, customProperty]) =>
+        subscribeCustomProperty({
+          selector: getNodeSelector(path, {
+            componentName: ctx.component.name,
+            nodeId: node.id,
+            variant,
+          }),
+          signal: dataSignal.map((data) =>
+            appendUnit(
+              applyFormula(customProperty.formula, {
+                ...formulaCtx,
+                data,
+              }),
+              customProperty.unit,
+            ),
+          ),
+          customPropertyName,
+          variant,
+          root: ctx.root,
+        }),
+      )
+  })
+
+  return renderedComponent
 }

package/src/components/createElement.ts

@@ -15,6 +15,7 @@ import type { ComponentData } from '@nordcraft/core/src/component/component.type
 import { handleAction } from '../events/handleAction'
 import type { Signal } from '../signal/signal'
 import type { ComponentContext } from '../types'
+import { formulaHasValue } from '../utils/formulaHasValue'
 import { getDragData } from '../utils/getDragData'
 import { getElementTagName } from '../utils/getElementTagName'
 import { setAttribute } from '../utils/setAttribute'
@@ -52,6 +53,15 @@ export function createElement({
     ? (document.createElementNS(namespace, tag) as SVGElement | MathMLElement)
     : document.createElement(tag)
 
+  const formulaCtx = {
+    component: ctx.component,
+    formulaCache: ctx.formulaCache,
+    root: ctx.root,
+    package: ctx.package,
+    toddle: ctx.toddle,
+    env: ctx.env,
+  }
+
   elem.setAttribute('data-node-id', id)
   if (path) {
     elem.setAttribute('data-id', path)
@@ -72,13 +82,8 @@ export function createElement({
         const classSignal = dataSignal.map((data) =>
           toBoolean(
             applyFormula(formula, {
+              ...formulaCtx,
               data,
-              component: ctx.component,
-              formulaCache: ctx.formulaCache,
-              root: ctx.root,
-              package: ctx.package,
-              toddle: ctx.toddle,
-              env: ctx.env,
             }),
           ),
         )
@@ -104,13 +109,8 @@ export function createElement({
       } else {
         o = dataSignal.map((data) =>
           applyFormula(value, {
+            ...formulaCtx,
             data,
-            component: ctx.component,
-            formulaCache: ctx.formulaCache,
-            root: ctx.root,
-            package: ctx.package,
-            toddle: ctx.toddle,
-            env: ctx.env,
           }),
         )
         o.subscribe((val) => {
@@ -139,13 +139,8 @@ export function createElement({
     const { name, formula, unit } = styleVariable
     const signal = dataSignal.map((data) => {
       const value = applyFormula(formula, {
+        ...formulaCtx,
         data,
-        component: ctx.component,
-        formulaCache: ctx.formulaCache,
-        root: ctx.root,
-        package: ctx.package,
-        toddle: ctx.toddle,
-        env: ctx.env,
       })
       return unit ? value + unit : value
     })
@@ -153,8 +148,9 @@ export function createElement({
     signal.subscribe((value) => elem.style.setProperty(`--${name}`, value))
   })
 
-  Object.entries(node.customProperties ?? {}).forEach(
-    ([customPropertyName, { formula, unit }]) =>
+  Object.entries(node.customProperties ?? {})
+    .filter(([_, { formula }]) => formulaHasValue(formula))
+    .forEach(([customPropertyName, { formula, unit }]) => {
       subscribeCustomProperty({
         customPropertyName,
         selector:
@@ -166,25 +162,20 @@ export function createElement({
         signal: dataSignal.map((data) =>
           appendUnit(
             applyFormula(formula, {
+              ...formulaCtx,
               data,
-              component: ctx.component,
-              formulaCache: ctx.formulaCache,
-              root: ctx.root,
-              package: ctx.package,
-              toddle: ctx.toddle,
-              env: ctx.env,
             }),
             unit,
           ),
         ),
         root: ctx.root,
-        runtime: ctx.env.runtime,
-      }),
-  )
+      })
+    })
 
   node.variants?.forEach((variant) => {
-    Object.entries(variant.customProperties ?? {}).forEach(
-      ([customPropertyName, { formula, unit }]) => {
+    Object.entries(variant.customProperties ?? {})
+      .filter(([_, { formula }]) => formulaHasValue(formula))
+      .forEach(([customPropertyName, { formula, unit }]) => {
         subscribeCustomProperty({
           customPropertyName,
           selector: getNodeSelector(path, {
@@ -194,22 +185,15 @@ export function createElement({
           signal: dataSignal.map((data) =>
             appendUnit(
               applyFormula(formula, {
+                ...formulaCtx,
                 data,
-                component: ctx.component,
-                formulaCache: ctx.formulaCache,
-                root: ctx.root,
-                package: ctx.package,
-                toddle: ctx.toddle,
-                env: ctx.env,
               }),
               unit,
             ),
           ),
           root: ctx.root,
-          runtime: ctx.env.runtime,
         })
-      },
-    )
+      })
   })
 
   const eventHandlers: [string, (e: Event) => boolean][] = []
@@ -243,13 +227,8 @@ export function createElement({
           const textSignal = dataSignal.map((data) => {
             return String(
               applyFormula(node.value, {
+                ...formulaCtx,
                 data,
-                component: ctx.component,
-                formulaCache: ctx.formulaCache,
-                root: ctx.root,
-                package: ctx.package,
-                toddle: ctx.toddle,
-                env: ctx.env,
               }),
             )
           })