@nordcraft/runtime 1.0.88 → 1.0.90

package/src/components/createComponent.ts

@@ -21,6 +21,7 @@ import { signal } from '../signal/signal'
 import type { ComponentChild, ComponentContext, ContextApi } from '../types'
 import { createFormulaCache } from '../utils/createFormulaCache'
 import { formulaHasValue } from '../utils/formulaHasValue'
+import { getComponent } from '../utils/getComponent'
 import { subscribeCustomProperty } from '../utils/subscribeCustomProperty'
 import { renderComponent } from './renderComponent'
 
@@ -44,7 +45,11 @@ export function createComponent({
   namespace,
 }: RenderComponentNodeProps): ReadonlyArray<Element | Text> {
   const nodeLookupKey = [ctx.package, node.name].filter(isDefined).join('/')
-  const component = ctx.components?.find((comp) => comp.name === nodeLookupKey)
+  const component = getComponent(
+    nodeLookupKey,
+    ctx.components,
+    ctx.env.runtime !== 'preview',
+  )
   if (!component) {
     // eslint-disable-next-line no-console
     console.warn(
@@ -76,55 +81,6 @@ export function createComponent({
     ])
   })
 
-  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,
-        runtime: ctx.env.runtime,
-      }),
-    )
-  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,
-          runtime: ctx.env.runtime,
-        }),
-      )
-  })
-
   const componentDataSignal = signal<ComponentData>({
     Location: dataSignal.get().Location,
     Attributes: attributesSignal.get(),
@@ -321,7 +277,7 @@ export function createComponent({
     { destroy: () => componentDataSignal.destroy() },
   )
 
-  return renderComponent({
+  const renderedComponent = renderComponent({
     dataSignal: componentDataSignal,
     component,
     components: ctx.components,
@@ -346,4 +302,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

@@ -169,7 +169,6 @@ export function createElement({
           ),
         ),
         root: ctx.root,
-        runtime: ctx.env.runtime,
       })
     })
 
@@ -193,7 +192,6 @@ export function createElement({
             ),
           ),
           root: ctx.root,
-          runtime: ctx.env.runtime,
         })
       })
   })