@nordcraft/runtime 1.0.95 → 1.0.96

package/src/components/createElement.ts

@@ -60,6 +60,7 @@ export function createElement({
     package: ctx.package,
     toddle: ctx.toddle,
     env: ctx.env,
+    reportFormulaEvaluation: ctx.reportFormulaEvaluation,
   }
 
   elem.setAttribute('data-node-id', id)
@@ -107,12 +108,19 @@ export function createElement({
       if (value.type === 'value') {
         setAttribute(elem, attr, value?.value)
       } else {
-        o = dataSignal.map((data) =>
-          applyFormula(value, {
-            ...formulaCtx,
-            data,
-          }),
-        )
+        const attrPath = ['nodes', id, 'attrs', attr]
+        o = dataSignal.map((data) => {
+          const val = applyFormula(
+            value,
+            {
+              ...formulaCtx,
+              data,
+            },
+            attrPath,
+          )
+          ctx.reportFormulaEvaluation?.(attrPath, val)
+          return val
+        })
         o.subscribe((val) => {
           setAttribute(elem, attr, val)
         })
@@ -135,13 +143,19 @@ export function createElement({
       setupAttribute()
     }
   })
-  node['style-variables']?.forEach((styleVariable) => {
+  node['style-variables']?.forEach((styleVariable, i) => {
     const { name, formula, unit } = styleVariable
+    const styleVarPath = ['nodes', id, 'style-variables', i, 'formula']
     const signal = dataSignal.map((data) => {
-      const value = applyFormula(formula, {
-        ...formulaCtx,
-        data,
-      })
+      const value = applyFormula(
+        formula,
+        {
+          ...formulaCtx,
+          data,
+        },
+        styleVarPath,
+      )
+      ctx.reportFormulaEvaluation?.(styleVarPath, value)
       return unit ? value + unit : value
     })
 
@@ -151,6 +165,13 @@ export function createElement({
   Object.entries(node.customProperties ?? {})
     .filter(([_, { formula }]) => formulaHasValue(formula))
     .forEach(([customPropertyName, { formula, unit }]) => {
+      const cpPath = [
+        'nodes',
+        id,
+        'customProperties',
+        customPropertyName,
+        'formula',
+      ]
       subscribeCustomProperty({
         customPropertyName,
         selector:
@@ -159,38 +180,53 @@ export function createElement({
           path === '0'
             ? `${getNodeSelector(path)}, :host`
             : getNodeSelector(path),
-        signal: dataSignal.map((data) =>
-          appendUnit(
-            applyFormula(formula, {
+        signal: dataSignal.map((data) => {
+          const val = applyFormula(
+            formula,
+            {
               ...formulaCtx,
               data,
-            }),
-            unit,
-          ),
-        ),
+            },
+            cpPath,
+          )
+          ctx.reportFormulaEvaluation?.(cpPath, val)
+          return appendUnit(val, unit)
+        }),
         root: ctx.root,
       })
     })
 
-  node.variants?.forEach((variant) => {
+  node.variants?.forEach((variant, variantIndex) => {
     Object.entries(variant.customProperties ?? {})
       .filter(([_, { formula }]) => formulaHasValue(formula))
       .forEach(([customPropertyName, { formula, unit }]) => {
+        const variantCpPath = [
+          'nodes',
+          id,
+          'variants',
+          variantIndex,
+          'customProperties',
+          customPropertyName,
+          'formula',
+        ]
         subscribeCustomProperty({
           customPropertyName,
           selector: getNodeSelector(path, {
             variant,
           }),
           variant,
-          signal: dataSignal.map((data) =>
-            appendUnit(
-              applyFormula(formula, {
+          signal: dataSignal.map((data) => {
+            const val = applyFormula(
+              formula,
+              {
                 ...formulaCtx,
                 data,
-              }),
-              unit,
-            ),
-          ),
+              },
+              variantCpPath,
+            )
+            ctx.reportFormulaEvaluation?.(variantCpPath, val)
+            return appendUnit(val, unit)
+          }),
           root: ctx.root,
         })
       })
@@ -260,7 +296,7 @@ export function createElement({
           id: child,
           path: path + '.' + i,
           dataSignal,
-          ctx,
+          ctx: { ...ctx, jsonPath: ['nodes', child] },
           namespace,
           instance,
         }),

package/src/components/createNode.test.ts

@@ -4,7 +4,7 @@ import { describe, expect, test } from 'bun:test'
 import '../happydom'
 import { signal } from '../signal/signal'
 import type { ComponentContext } from '../types'
-import { customPropertiesStylesheet } from '../utils/subscribeCustomProperty'
+import { customPropertiesStylesheets } from '../utils/subscribeCustomProperty'
 import { createNode } from './createNode'
 
 describe('createNode()', () => {
@@ -114,7 +114,7 @@ describe('createNode()', () => {
     })
 
     // Custom properties stylesheet should be created and have the custom property from the node
-    const sheet = customPropertiesStylesheet?.getStyleSheet()
+    const sheet = customPropertiesStylesheets.get(document)?.getStyleSheet()
     expect(sheet).toBeTruthy()
     expect(sheet?.cssRules.length).toBe(3)
     expect(sheet?.cssRules[0].cssText).toBe(
@@ -675,7 +675,7 @@ describe('createNode()', () => {
       instance: {},
     })
 
-    const sheet = customPropertiesStylesheet?.getStyleSheet()
+    const sheet = customPropertiesStylesheets.get(ctx.root)?.getStyleSheet()
     // Test that the order makes sense
     expect(Array.from(sheet?.cssRules ?? []).map((r) => r.cssText)).toEqual([
       `[data-id="0"] { --color: ${innermostColor}; }`,

package/src/components/createNode.ts

@@ -86,19 +86,30 @@ export function createNode({
   }: NodeRenderer<NodeModel>): ReadonlyArray<Element | Text> {
     let firstRun = true
     let childDataSignal: Signal<ComponentData> | null = null
-    const showSignal = dataSignal.map((data) =>
-      toBoolean(
-        applyFormula(node.condition, {
-          data,
-          component: ctx.component,
-          formulaCache: ctx.formulaCache,
-          root: ctx.root,
-          package: ctx.package,
-          toddle: ctx.toddle,
-          env: ctx.env,
-        }),
-      ),
-    )
+    const showSignal = dataSignal.map((data) => {
+      const conditionPath = ['nodes', id, 'condition']
+      const show = toBoolean(
+        applyFormula(
+          node.condition,
+          {
+            data,
+            component: ctx.component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            toddle: ctx.toddle,
+            env: ctx.env,
+            jsonPath: ctx.jsonPath,
+            reportFormulaEvaluation: ctx.reportFormulaEvaluation,
+          },
+          conditionPath,
+        ),
+      )
+
+      ctx.reportFormulaEvaluation?.(conditionPath, show)
+
+      return show
+    })
 
     const elements: Array<Element | Text> = []
     const toggle = (show: boolean) => {
@@ -182,15 +193,23 @@ export function createNode({
       }
     >()
     const repeatSignal = dataSignal.map((data) => {
-      const list = applyFormula(node?.repeat, {
-        data,
-        component: ctx.component,
-        formulaCache: ctx.formulaCache,
-        root: ctx.root,
-        package: ctx.package,
-        toddle: ctx.toddle,
-        env: ctx.env,
-      })
+      const listPath = ['nodes', id, 'repeat']
+      const list = applyFormula(
+        node?.repeat,
+        {
+          data,
+          component: ctx.component,
+          formulaCache: ctx.formulaCache,
+          root: ctx.root,
+          package: ctx.package,
+          toddle: ctx.toddle,
+          env: ctx.env,
+        },
+        listPath,
+      )
+
+      ctx.reportFormulaEvaluation?.(listPath, list)
+
       if (typeof list !== 'object') {
         return []
       }
@@ -216,6 +235,7 @@ export function createNode({
               Key,
             },
           }
+          const repeatKeyPath = ['nodes', id, 'repeatKey']
           let childKey = node?.repeatKey
             ? applyFormula(node.repeatKey, {
                 data: childData,
@@ -228,6 +248,10 @@ export function createNode({
               })
             : Key
 
+          if (node?.repeatKey) {
+            ctx.reportFormulaEvaluation?.(repeatKeyPath, childKey)
+          }
+
           if (seenKeys.has(childKey)) {
             console.warn(
               `Duplicate key "${childKey}" found in repeat. Fallback to index as key. This will cause a re-render of the duplicated children on every change.`,
@@ -380,6 +404,7 @@ export function createNode({
     instance,
   })
 }
+
 export type NodeRenderer<NodeType> = {
   node: NodeType
   dataSignal: Signal<ComponentData>

package/src/components/createSlot.ts

@@ -37,6 +37,7 @@ export function createSlot({
         ctx: {
           ...child.ctx,
           providers: ctx.providers,
+          jsonPath: ['nodes', child.id],
         },
         instance,
         namespace,
@@ -53,7 +54,7 @@ export function createSlot({
         id: child,
         path: path + '.' + i,
         dataSignal,
-        ctx,
+        ctx: { ...ctx, jsonPath: ['nodes', child] },
         parentElement,
         instance,
         namespace,

package/src/components/createText.ts

@@ -48,21 +48,31 @@ export function createText({
   if (value.type !== 'value') {
     const sig = dataSignal.map((data) =>
       String(
-        applyFormula(value, {
-          data,
-          component: ctx.component,
-          formulaCache: ctx.formulaCache,
-          root: ctx.root,
-          package: ctx.package,
-          toddle: ctx.toddle,
-          env: ctx.env,
-        }),
+        applyFormula(
+          value,
+          {
+            data,
+            component: ctx.component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            toddle: ctx.toddle,
+            env: ctx.env,
+            jsonPath: ctx.jsonPath,
+            reportFormulaEvaluation: ctx.reportFormulaEvaluation,
+          },
+          ['value'],
+        ),
       ),
     )
     sig.subscribe((value) => {
       elem.innerText = value
     })
   } else {
+    ctx.reportFormulaEvaluation?.(
+      [...(ctx.jsonPath ?? []), 'value'],
+      value.value,
+    )
     elem.innerText = String(value.value)
   }
   return elem
@@ -82,15 +92,21 @@ export function createTextNS({
   if (value.type !== 'value') {
     const sig = dataSignal.map((data) =>
       String(
-        applyFormula(value, {
-          data,
-          component: ctx.component,
-          formulaCache: ctx.formulaCache,
-          root: ctx.root,
-          package: ctx.package,
-          toddle: ctx.toddle,
-          env: ctx.env,
-        }),
+        applyFormula(
+          value,
+          {
+            data,
+            component: ctx.component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            toddle: ctx.toddle,
+            env: ctx.env,
+            jsonPath: ctx.jsonPath,
+            reportFormulaEvaluation: ctx.reportFormulaEvaluation,
+          },
+          ['value'],
+        ),
       ),
     )
     sig.subscribe((value) => {

package/src/components/renderComponent.ts

@@ -4,6 +4,7 @@ import type {
   SupportedNamespaces,
 } from '@nordcraft/core/dist/component/component.types'
 import type { ToddleEnv } from '@nordcraft/core/dist/formula/formula'
+import type { FormulaEvaluationReporter } from '@nordcraft/core/dist/formula/formulaTypes'
 import type { Toddle } from '@nordcraft/core/dist/types'
 import { measure } from '@nordcraft/core/dist/utils/measure'
 import fastDeepEqual from 'fast-deep-equal'
@@ -49,6 +50,8 @@ interface RenderComponentProps {
   toddle: Toddle<LocationSignal, PreviewShowSignal>
   namespace?: SupportedNamespaces
   env: ToddleEnv
+  jsonPath: Array<string | number> | undefined
+  reportFormulaEvaluation?: FormulaEvaluationReporter
 }
 
 const BATCH_QUEUE = new BatchQueue()
@@ -73,6 +76,8 @@ export function renderComponent({
   toddle,
   namespace,
   env,
+  jsonPath,
+  reportFormulaEvaluation,
 }: RenderComponentProps): ReadonlyArray<Element | Text> {
   const stopMeasure = measure(`Render component: ${component.name}`, {
     component: component.name,
@@ -94,13 +99,15 @@ export function renderComponent({
     package: packageName,
     toddle,
     env,
+    jsonPath,
+    reportFormulaEvaluation,
   }
 
   const rootElem = createNode({
     id: 'root',
     path,
     dataSignal,
-    ctx,
+    ctx: { ...ctx, jsonPath: ['nodes', 'root'] },
     parentElement,
     namespace,
     instance,

package/src/context/subscribeToContext.ts

@@ -83,6 +83,8 @@ export function subscribeToContext(
           package: testProviderPackage ?? ctx?.package,
           toddle: ctx.toddle,
           env: ctx.env,
+          jsonPath: ctx.jsonPath,
+          reportFormulaEvaluation: ctx.reportFormulaEvaluation,
         }
 
         if (testProvider.route) {
@@ -102,7 +104,11 @@ export function subscribeToContext(
           testProvider.variables ?? {},
           ([name, variable]) => [
             name,
-            applyFormula(variable.initialValue, formulaContext),
+            applyFormula(variable.initialValue, {
+              ...formulaContext,
+              // We should not report formula evaluations for test data on context providers
+              reportFormulaEvaluation: undefined,
+            }),
           ],
         )
 
@@ -123,7 +129,11 @@ export function subscribeToContext(
 
                 return [
                   formulaName,
-                  applyFormula(formula.formula, formulaContext),
+                  applyFormula(formula.formula, {
+                    ...formulaContext,
+                    // We should not report formula evaluations for test data on context providers
+                    reportFormulaEvaluation: undefined,
+                  }),
                 ]
               }),
             ),

package/src/custom-element/ToddleComponent.ts

@@ -14,6 +14,7 @@ import {
 import type { Toddle } from '@nordcraft/core/dist/types'
 import { mapObject } from '@nordcraft/core/dist/utils/collections'
 import { isDefined } from '@nordcraft/core/dist/utils/util'
+import type { ComponentAPI } from '@nordcraft/core/src/api/apiTypes'
 import { isContextApiV2 } from '../api/apiUtils'
 import { createLegacyAPI } from '../api/createAPI'
 import { createAPI } from '../api/createAPIv2'
@@ -97,23 +98,32 @@ export class ToddleComponent extends HTMLElement {
       package: undefined,
       toddle,
       env,
+      jsonPath: [],
     }
   }
 
   connectedCallback() {
-    sortApiObjects(Object.entries(this.#component.apis ?? {})).forEach(
-      ([name, api]) => {
-        if (isLegacyApi(api)) {
-          this.#ctx.apis[name] = createLegacyAPI(api, this.#ctx)
-        } else {
-          this.#ctx.apis[name] = createAPI({
-            apiRequest: api,
-            ctx: this.#ctx,
-            componentData: this.#signal.get(),
-          })
-        }
-      },
-    )
+    sortApiObjects(
+      Object.entries(this.#component.apis ?? {}).filter(
+        (entry): entry is [string, ComponentAPI] => isDefined(entry[1]),
+      ),
+    ).forEach(([name, api]) => {
+      if (isLegacyApi(api)) {
+        this.#ctx.apis[name] = createLegacyAPI(api, {
+          ...this.#ctx,
+          jsonPath: ['apis', name],
+        })
+      } else {
+        this.#ctx.apis[name] = createAPI({
+          apiRequest: api,
+          ctx: {
+            ...this.#ctx,
+            jsonPath: ['apis', name],
+          },
+          componentData: this.#signal.get(),
+        })
+      }
+    })
     Object.values(this.#ctx.apis)
       .filter(isContextApiV2)
       .forEach((api) => {
@@ -129,15 +139,20 @@ export class ToddleComponent extends HTMLElement {
           .map(([name, formula]) => [
             name,
             this.#signal.map((data) =>
-              applyFormula(formula.formula, {
-                data,
-                component: this.#component,
-                formulaCache: this.#ctx.formulaCache,
-                root: this.#ctx.root,
-                package: this.#ctx.package,
-                toddle: this.#ctx.toddle,
-                env: this.#ctx.env,
-              }),
+              applyFormula(
+                formula.formula,
+                {
+                  data,
+                  component: this.#component,
+                  formulaCache: this.#ctx.formulaCache,
+                  root: this.#ctx.root,
+                  package: this.#ctx.package,
+                  toddle: this.#ctx.toddle,
+                  env: this.#ctx.env,
+                  jsonPath: [],
+                },
+                ['formulas', name],
+              ),
             ),
           ]),
       )

package/src/editor/editorUtils.ts

@@ -0,0 +1,13 @@
+export const debounce = (func: () => void, wait: number, immediate = false) => {
+  let timeout: ReturnType<typeof setTimeout> | undefined = undefined
+  return () => {
+    const callNow = immediate && !timeout
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      func()
+    }, wait)
+    if (callNow) {
+      func()
+    }
+  }
+}

package/src/editor/types.ts

@@ -189,6 +189,11 @@ export type EditorPostMessageType =
       }
     }
   | { type: 'data'; data: ComponentData }
+  | {
+      type: 'componentFormulaData'
+      data: Record<string, any>
+      component?: string
+    }
   | {
       type: 'selectionRect'
       rect: ReturnType<typeof getRectData>