@nordcraft/runtime 1.0.96 → 1.0.97

package/package.json

@@ -9,8 +9,8 @@
 "directory": "packages/runtime"
 },
 "dependencies": {
-"@nordcraft/core": "1.0.96",
-"@nordcraft/std-lib": "1.0.96",
+"@nordcraft/core": "1.0.97",
+"@nordcraft/std-lib": "1.0.97",
 "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.96"
+"version": "1.0.97"
 }

package/src/api/createAPIv2.ts

@@ -291,16 +291,20 @@ export function createAPI({
       },
     })
 
-    ctx.reportFormulaEvaluation?.(['apis', api.name], {
-      isLoading: false,
-      data: data.body,
-      error: null,
-      response: {
-        status: data.status,
-        headers: data.headers,
-        performance,
+    ctx.reportFormulaEvaluation?.(
+      ['apis', api.name],
+      {
+        isLoading: false,
+        data: data.body,
+        error: null,
+        response: {
+          status: data.status,
+          headers: data.headers,
+          performance,
+        },
       },
-    })
+      ctx,
+    )
 
     const appliedRedirectRule = handleRedirectRules(api, componentData)
     if (appliedRedirectRule) {
@@ -366,16 +370,20 @@ export function createAPI({
       },
     })
 
-    ctx.reportFormulaEvaluation?.(['apis', api.name], {
-      isLoading: false,
-      data: null,
-      error: data.body,
-      response: {
-        status: data.status,
-        headers: data.headers,
-        performance,
+    ctx.reportFormulaEvaluation?.(
+      ['apis', api.name],
+      {
+        isLoading: false,
+        data: null,
+        error: data.body,
+        response: {
+          status: data.status,
+          headers: data.headers,
+          performance,
+        },
       },
-    })
+      ctx,
+    )
 
     const appliedRedirectRule = handleRedirectRules(api, componentData)
     if (appliedRedirectRule) {
@@ -433,11 +441,15 @@ export function createAPI({
         },
       })
 
-      ctx.reportFormulaEvaluation?.(['apis', api.name], {
-        isLoading: true,
-        data: ctx.dataSignal.get().Apis?.[api.name]?.data ?? null,
-        error: null,
-      })
+      ctx.reportFormulaEvaluation?.(
+        ['apis', api.name],
+        {
+          isLoading: true,
+          data: ctx.dataSignal.get().Apis?.[api.name]?.data ?? null,
+          error: null,
+        },
+        ctx,
+      )
 
       let response
 
@@ -1030,7 +1042,7 @@ export function createAPI({
     if (ctx.reportFormulaEvaluation) {
       const apiStatus = data.Apis?.[api.name]
       if (apiStatus) {
-        ctx.reportFormulaEvaluation(['apis', api.name], apiStatus)
+        ctx.reportFormulaEvaluation(['apis', api.name], apiStatus, ctx)
       }
     }
     return {

package/src/components/createComponent.ts

@@ -75,10 +75,14 @@ export function createComponent({
     return mapObject(node.attrs, ([attr, value]) => [
       attr,
       value?.type !== 'value'
-        ? applyFormula(value, {
-            ...formulaCtx,
-            data,
-          })
+        ? applyFormula(
+            value,
+            {
+              ...formulaCtx,
+              data,
+            },
+            ['attrs', attr],
+          )
         : value?.value,
     ])
   })
@@ -94,11 +98,15 @@ export function createComponent({
           data: null,
           isLoading:
             api!.autoFetch &&
-            applyFormula(api!.autoFetch, {
-              ...formulaCtx,
-              component,
-              data: dataSignal.get(),
-            })
+            applyFormula(
+              api!.autoFetch,
+              {
+                ...formulaCtx,
+                component,
+                data: dataSignal.get(),
+              },
+              ['apis', name, 'autoFetch'],
+            )
               ? true
               : false,
           error: null,
@@ -125,12 +133,16 @@ export function createComponent({
     ...data,
     Variables: mapObject(component.variables ?? {}, ([name, variable]) => [
       name,
-      applyFormula(variable.initialValue, {
-        // Initial value
-        ...formulaCtx,
-        component,
-        data: componentDataSignal.get(),
-      }),
+      applyFormula(
+        variable.initialValue,
+        {
+          // Initial value
+          ...formulaCtx,
+          component,
+          data: componentDataSignal.get(),
+        },
+        ['variables', name],
+      ),
     ]),
   }))
   registerComponentToLogState(component, componentDataSignal)
@@ -140,7 +152,7 @@ export function createComponent({
   componentDataSignal.subscribe(
     (data) => {
       Object.entries(data.Variables ?? {}).forEach(([name, value]) => {
-        ctx.reportFormulaEvaluation?.(['variables', name], value)
+        ctx.reportFormulaEvaluation?.(['variables', name], value, ctx)
       })
     },
     {
@@ -332,10 +344,14 @@ export function createComponent({
         }),
         signal: dataSignal.map((data) =>
           appendUnit(
-            applyFormula(customProperty.formula, {
-              ...formulaCtx,
-              data,
-            }),
+            applyFormula(
+              customProperty.formula,
+              {
+                ...formulaCtx,
+                data,
+              },
+              ['customProperties', customPropertyName, 'formula'],
+            ),
             customProperty.unit,
           ),
         ),
@@ -355,10 +371,14 @@ export function createComponent({
           }),
           signal: dataSignal.map((data) =>
             appendUnit(
-              applyFormula(customProperty.formula, {
-                ...formulaCtx,
-                data,
-              }),
+              applyFormula(
+                customProperty.formula,
+                {
+                  ...formulaCtx,
+                  data,
+                },
+                ['customProperties', customPropertyName, 'formula'],
+              ),
               customProperty.unit,
             ),
           ),

package/src/components/createElement.ts

@@ -118,7 +118,7 @@ export function createElement({
             },
             attrPath,
           )
-          ctx.reportFormulaEvaluation?.(attrPath, val)
+          ctx.reportFormulaEvaluation?.(attrPath, val, ctx)
           return val
         })
         o.subscribe((val) => {
@@ -155,7 +155,7 @@ export function createElement({
         },
         styleVarPath,
       )
-      ctx.reportFormulaEvaluation?.(styleVarPath, value)
+      ctx.reportFormulaEvaluation?.(styleVarPath, value, ctx)
       return unit ? value + unit : value
     })
 
@@ -189,7 +189,7 @@ export function createElement({
             },
             cpPath,
           )
-          ctx.reportFormulaEvaluation?.(cpPath, val)
+          ctx.reportFormulaEvaluation?.(cpPath, val, ctx)
           return appendUnit(val, unit)
         }),
         root: ctx.root,
@@ -224,7 +224,7 @@ export function createElement({
               },
               variantCpPath,
             )
-            ctx.reportFormulaEvaluation?.(variantCpPath, val)
+            ctx.reportFormulaEvaluation?.(variantCpPath, val, ctx)
             return appendUnit(val, unit)
           }),
           root: ctx.root,

package/src/components/createNode.ts

@@ -63,6 +63,9 @@ export function createNode({
             ...ctx,
             package:
               node.package ?? (isLocalComponent ? undefined : ctx.package),
+            // Skip sub-component formula evaluation for now as editor only needs the scope for the selected component
+            // TODO: Letting the AI get the state of a deep component may be useful in the future, but we need a better way at precising scope for it to not overwhelm it.
+            reportFormulaEvaluation: undefined,
           },
           parentElement,
         })
@@ -106,8 +109,6 @@ export function createNode({
         ),
       )
 
-      ctx.reportFormulaEvaluation?.(conditionPath, show)
-
       return show
     })
 
@@ -208,8 +209,6 @@ export function createNode({
         listPath,
       )
 
-      ctx.reportFormulaEvaluation?.(listPath, list)
-
       if (typeof list !== 'object') {
         return []
       }
@@ -237,21 +236,21 @@ export function createNode({
           }
           const repeatKeyPath = ['nodes', id, 'repeatKey']
           let childKey = node?.repeatKey
-            ? applyFormula(node.repeatKey, {
-                data: childData,
-                component: ctx.component,
-                formulaCache: ctx.formulaCache,
-                root: ctx.root,
-                package: ctx.package,
-                toddle: ctx.toddle,
-                env: ctx.env,
-              })
+            ? applyFormula(
+                node.repeatKey,
+                {
+                  data: childData,
+                  component: ctx.component,
+                  formulaCache: ctx.formulaCache,
+                  root: ctx.root,
+                  package: ctx.package,
+                  toddle: ctx.toddle,
+                  env: ctx.env,
+                },
+                repeatKeyPath,
+              )
             : 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.`,

package/src/components/createText.ts

@@ -72,6 +72,7 @@ export function createText({
     ctx.reportFormulaEvaluation?.(
       [...(ctx.jsonPath ?? []), 'value'],
       value.value,
+      ctx,
     )
     elem.innerText = String(value.value)
   }

package/src/editor/editorUtils.ts

@@ -11,3 +11,18 @@ export const debounce = (func: () => void, wait: number, immediate = false) => {
     }
   }
 }
+
+export const throttleToIdleCallback = (func: () => void) => {
+  let scheduled = false
+  return () => {
+    if (!scheduled) {
+      scheduled = true
+      ;(globalThis.requestIdleCallback ?? globalThis.requestAnimationFrame)(
+        () => {
+          func()
+          scheduled = false
+        },
+      )
+    }
+  }
+}

package/src/editor-preview.main.ts

@@ -64,7 +64,7 @@ import { dragEnded } from './editor/drag-drop/dragEnded'
 import { dragMove } from './editor/drag-drop/dragMove'
 import { dragReorder } from './editor/drag-drop/dragReorder'
 import { dragStarted } from './editor/drag-drop/dragStarted'
-import { debounce } from './editor/editorUtils'
+import { throttleToIdleCallback } from './editor/editorUtils'
 import { introspectApiRequest } from './editor/graphql'
 import { isInputTarget } from './editor/input'
 import { updateComponentLinks } from './editor/links'
@@ -251,22 +251,35 @@ export const createRoot = (
   let component: Component | null = null
   let componentFormulaData: Record<string, any> = {}
 
-  const reportFormulaEvaluation: FormulaEvaluationReporter = (path, data) => {
-    componentFormulaData[path.join('/')] = data
-    reportComponentFormulaData()
+  const reportFormulaEvaluation: FormulaEvaluationReporter = (
+    path,
+    data,
+    ctx,
+  ) => {
+    if (
+      data !== undefined &&
+      path.length > 0 &&
+      // We are currently skipping all children formulas to lower the scope of reporting to what the user can see in the canvas
+      ctx.component?.name === component?.name
+    ) {
+      try {
+        componentFormulaData[path.join('/')] = JSON.parse(JSON.stringify(data))
+      } catch {
+        componentFormulaData[path.join('/')] =
+          `[Unserializable value of type ${typeof data}]`
+      } finally {
+        reportComponentFormulaData()
+      }
+    }
   }
-  const reportComponentFormulaData = debounce(
-    () => {
-      postMessageToEditor({
-        type: 'componentFormulaData',
-        data: componentFormulaData,
-        component: component?.name,
-      })
-      componentFormulaData = {}
-    },
-    5, // 5ms debounce to batch multiple rapid updates
-    true,
-  )
+  const reportComponentFormulaData = throttleToIdleCallback(() => {
+    postMessageToEditor({
+      type: 'componentFormulaData',
+      data: componentFormulaData,
+      component: component?.name,
+    })
+    componentFormulaData = {}
+  })
   let selectedNodeId: string | null = null
   let highlightedNodeId: string | null = null
   let styleVariantSelection: {
@@ -1427,7 +1440,6 @@ body[data-mode="design"] [data-id="${animationState.animatedElementId}"], body[d
                 applyFormula(variable.initialValue, formulaContext, [
                   'variables',
                   name,
-                  'initialValue',
                 ]),
               ],
             )
@@ -1477,7 +1489,7 @@ body[data-mode="design"] [data-id="${animationState.animatedElementId}"], body[d
               jsonPath: ctx?.jsonPath,
               reportFormulaEvaluation,
             },
-            ['variables', name, 'initialValue'],
+            ['variables', name],
           ),
         ],
       )

package/src/events/handleAction.ts

@@ -66,21 +66,17 @@ export function handleAction(
         break
       }
       case 'SetVariable': {
-        const value = applyFormula(
-          action.data,
-          {
-            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,
-          },
-          ['data'],
-        )
+        const value = applyFormula(action.data, {
+          data,
+          component: ctx.component,
+          formulaCache: ctx.formulaCache,
+          root: ctx.root,
+          package: ctx.package,
+          toddle: ctx.toddle,
+          env: ctx.env,
+          jsonPath: ctx.jsonPath,
+        })
+
         ctx.dataSignal.update((data) => {
           return {
             ...data,
@@ -424,19 +420,21 @@ export function handleAction(
               event,
               (callbackName, callbackData) => {
                 const callback = callbacks?.[callbackName]
-                callback?.actions?.forEach((action) =>
-                  handleAction(
-                    action,
-                    {
-                      ...data,
-                      ...ctx.dataSignal.get(),
-                      Parameters: parameters,
-                      Event: callbackData,
-                    },
-                    ctx,
-                    event,
-                    workflowCallback,
-                  ),
+                callback?.actions?.forEach(
+                  (action) =>
+                    action &&
+                    handleAction(
+                      action,
+                      {
+                        ...data,
+                        ...ctx.dataSignal.get(),
+                        Parameters: parameters,
+                        Event: callbackData,
+                      },
+                      ctx,
+                      event,
+                      workflowCallback,
+                    ),
                 )
               },
             ),
@@ -464,19 +462,21 @@ export function handleAction(
             event,
             (callbackName, callbackData) => {
               const callback = callbacks?.[callbackName]
-              callback?.actions?.forEach((action) =>
-                handleAction(
-                  action,
-                  {
-                    ...data,
-                    ...ctx.dataSignal.get(),
-                    Parameters: parameters,
-                    Event: callbackData,
-                  },
-                  ctx,
-                  event,
-                  workflowCallback,
-                ),
+              callback?.actions?.forEach(
+                (action) =>
+                  action &&
+                  handleAction(
+                    action,
+                    {
+                      ...data,
+                      ...ctx.dataSignal.get(),
+                      Parameters: parameters,
+                      Event: callbackData,
+                    },
+                    ctx,
+                    event,
+                    workflowCallback,
+                  ),
               )
             },
           ),