@nordcraft/runtime 1.0.95 → 1.0.96

package/src/events/handleAction.ts

@@ -5,8 +5,11 @@ import type {
   SetMultiUrlParameterAction,
   SetURLParameterAction,
 } from '@nordcraft/core/dist/component/component.types'
-import { applyFormula } from '@nordcraft/core/dist/formula/formula'
-import { mapValues, omitKeys } from '@nordcraft/core/dist/utils/collections'
+import {
+  applyFormula,
+  type FormulaContext,
+} from '@nordcraft/core/dist/formula/formula'
+import { mapObject, omitKeys } from '@nordcraft/core/dist/utils/collections'
 import { isDefined, toBoolean } from '@nordcraft/core/dist/utils/util'
 import fastDeepEqual from 'fast-deep-equal'
 import { isContextApiV2 } from '../api/apiUtils'
@@ -32,15 +35,21 @@ export function handleAction(
         const actionList =
           action.cases?.find(({ condition }) =>
             toBoolean(
-              applyFormula(condition, {
-                data,
-                component: ctx.component,
-                formulaCache: ctx.formulaCache,
-                root: ctx.root,
-                package: ctx.package,
-                toddle: ctx.toddle,
-                env: ctx.env,
-              }),
+              applyFormula(
+                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,
+                },
+                ['cases', 'condition'],
+              ),
             ),
           ) ?? action.default
         // handle all actions for the case
@@ -57,15 +66,21 @@ 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,
-        })
+        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'],
+        )
         ctx.dataSignal.update((data) => {
           return {
             ...data,
@@ -78,34 +93,28 @@ export function handleAction(
         break
       }
       case 'TriggerEvent': {
-        const payload = applyFormula(action.data, {
-          data,
-          component: ctx.component,
-          formulaCache: ctx.formulaCache,
-          root: ctx.root,
-          package: ctx.package,
-          toddle: ctx.toddle,
-          env: ctx.env,
-        })
+        const payload = 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'],
+        )
         ctx.triggerEvent(action.event, payload)
         break
       }
       case 'TriggerWorkflowCallback': {
-        const payload = applyFormula(action.data, {
-          data,
-          component: ctx.component,
-          formulaCache: ctx.formulaCache,
-          root: ctx.root,
-          package: ctx.package,
-          toddle: ctx.toddle,
-          env: ctx.env,
-        })
-        workflowCallback?.(action.event, payload)
-        break
-      }
-      case 'SetURLParameter': {
-        ctx.toddle.locationSignal.update((current) => {
-          const value = applyFormula(action.data, {
+        const payload = applyFormula(
+          action.data,
+          {
             data,
             component: ctx.component,
             formulaCache: ctx.formulaCache,
@@ -113,7 +122,31 @@ export function handleAction(
             package: ctx.package,
             toddle: ctx.toddle,
             env: ctx.env,
-          })
+            jsonPath: ctx.jsonPath,
+            reportFormulaEvaluation: ctx.reportFormulaEvaluation,
+          },
+          ['data'],
+        )
+        workflowCallback?.(action.event, payload)
+        break
+      }
+      case 'SetURLParameter': {
+        ctx.toddle.locationSignal.update((current) => {
+          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'],
+          )
           // historyMode was previously not declared explicitly, and we default
           // to push for state changes and replace for query changes
           let historyMode: SetURLParameterAction['historyMode'] | undefined
@@ -179,7 +212,7 @@ export function handleAction(
           let historyMode: SetMultiUrlParameterAction['historyMode'] = 'replace'
           const queryUpdates: Record<string, string> = {}
           const pathUpdates: Record<string, string> = {}
-          const urlParameterCtx = {
+          const urlParameterCtx: FormulaContext = {
             data,
             component: ctx.component,
             formulaCache: ctx.formulaCache,
@@ -187,6 +220,8 @@ export function handleAction(
             package: ctx.package,
             toddle: ctx.toddle,
             env: ctx.env,
+            jsonPath: ctx.jsonPath,
+            reportFormulaEvaluation: ctx.reportFormulaEvaluation,
           }
           // Only match on p.type === 'param'
           const isValidPathParameter = (param: string) =>
@@ -199,7 +234,11 @@ export function handleAction(
             )
 
           for (const [parameter, formula] of parameters) {
-            const value = applyFormula(formula, urlParameterCtx) ?? null
+            const value =
+              applyFormula(formula, urlParameterCtx, [
+                'parameters',
+                parameter,
+              ]) ?? null
             if (isValidPathParameter(parameter)) {
               historyMode = 'push'
               pathUpdates[parameter] = value as string
@@ -260,16 +299,26 @@ export function handleAction(
         if (isContextApiV2(api)) {
           // Evaluate potential inputs here to make sure the api have the right values
           // This is needed if the inputs are formulas referencing workflow parameters
-          const actionInputs = mapValues(action.inputs ?? {}, (input) =>
-            applyFormula(input.formula, {
-              data,
-              component: ctx.component,
-              formulaCache: ctx.formulaCache,
-              root: ctx.root,
-              package: ctx.package,
-              toddle: ctx.toddle,
-              env: ctx.env,
-            }),
+          const actionInputs = mapObject(
+            action.inputs ?? {},
+            ([key, input]) => [
+              key,
+              applyFormula(
+                input.formula,
+                {
+                  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,
+                },
+                ['inputs', key, 'formula'],
+              ),
+            ],
           )
           const actionModels = {
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -326,16 +375,26 @@ export function handleAction(
         break
       }
       case 'TriggerWorkflow': {
-        const parameters = mapValues(action.parameters ?? {}, (parameter) =>
-          applyFormula(parameter.formula, {
-            data,
-            component: ctx.component,
-            formulaCache: ctx.formulaCache,
-            root: ctx.root,
-            package: ctx.package,
-            toddle: ctx.toddle,
-            env: ctx.env,
-          }),
+        const parameters = mapObject(
+          action.parameters ?? {},
+          ([key, parameter]) => [
+            key,
+            applyFormula(
+              parameter.formula,
+              {
+                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,
+              },
+              ['parameters', key, 'formula'],
+            ),
+          ],
         )
         const callbacks = action.callbacks
         if (action.contextProvider) {
@@ -455,19 +514,25 @@ export function handleAction(
             const args = (action.arguments ?? []).reduce<
               Record<string, unknown>
             >(
-              (args, arg) =>
+              (args, arg, i) =>
                 arg
                   ? {
                       ...args,
-                      [arg.name]: applyFormula(arg.formula, {
-                        data,
-                        component: ctx.component,
-                        formulaCache: ctx.formulaCache,
-                        root: ctx.root,
-                        package: ctx.package,
-                        toddle: ctx.toddle,
-                        env: ctx.env,
-                      }),
+                      [arg.name]: applyFormula(
+                        arg.formula,
+                        {
+                          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,
+                        },
+                        ['arguments', i, 'formula'],
+                      ),
                     }
                   : args,
               {},
@@ -511,26 +576,38 @@ export function handleAction(
               return
             }
             // First evaluate any arguments (input) to the action
-            const args = action.arguments?.map((arg) =>
-              applyFormula(arg?.formula, {
-                data,
-                component: ctx.component,
-                formulaCache: ctx.formulaCache,
-                root: ctx.root,
-                package: ctx.package,
-                toddle: ctx.toddle,
-                env: ctx.env,
-              }),
+            const args = action.arguments?.map((arg, i) =>
+              applyFormula(
+                arg?.formula,
+                {
+                  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,
+                },
+                ['arguments', i, 'formula'],
+              ),
             ) ?? [
-              applyFormula(action.data, {
-                data,
-                component: ctx.component,
-                formulaCache: ctx.formulaCache,
-                root: ctx.root,
-                package: ctx.package,
-                toddle: ctx.toddle,
-                env: ctx.env,
-              }),
+              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,
+                },
+                ['arguments', 'data'],
+              ),
             ] // action.data is a fallback to handle an older version of the action spec.
             return legacyHandler(args, { ...ctx, triggerActionEvent }, event)
           }

package/src/page.main.ts

@@ -1,4 +1,5 @@
 import { isLegacyApi, sortApiObjects } from '@nordcraft/core/dist/api/api'
+import type { ComponentAPI } from '@nordcraft/core/dist/api/apiTypes'
 import type {
   Component,
   ComponentData,
@@ -168,15 +169,20 @@ export const createRoot = (domNode: HTMLElement) => {
     // state (e.g. localStorage, sensors etc.)
     Variables: mapObject(component.variables ?? {}, ([name, variable]) => [
       name,
-      applyFormula(variable.initialValue, {
-        data: window.toddle.pageState,
-        component,
-        formulaCache: {},
-        root: document,
-        package: undefined,
-        toddle: window.toddle,
-        env,
-      }),
+      applyFormula(
+        variable.initialValue,
+        {
+          data: window.toddle.pageState,
+          component,
+          formulaCache: {},
+          root: document,
+          package: undefined,
+          toddle: window.toddle,
+          env,
+          jsonPath: [],
+        },
+        ['variables', name],
+      ),
     ]),
   })
 
@@ -217,22 +223,31 @@ export const createRoot = (domNode: HTMLElement) => {
       console.info('EVENT FIRED', event, data),
     package: undefined,
     env,
+    jsonPath: [],
   }
 
   // Note: this function must run procedurally to ensure apis (which are in correct order) can reference each other
-  sortApiObjects(Object.entries(component.apis ?? {})).forEach(
-    ([name, api]) => {
-      if (isLegacyApi(api)) {
-        ctx.apis[name] = createLegacyAPI(api, ctx)
-      } else {
-        ctx.apis[name] = createAPI({
-          apiRequest: api,
-          ctx,
-          componentData: dataSignal.get(),
-        })
-      }
-    },
-  )
+  sortApiObjects(
+    Object.entries(component.apis ?? {}).filter(
+      (entry): entry is [string, ComponentAPI] => isDefined(entry[1]),
+    ),
+  ).forEach(([name, api]) => {
+    if (isLegacyApi(api)) {
+      ctx.apis[name] = createLegacyAPI(api, {
+        ...ctx,
+        jsonPath: ['apis', name],
+      })
+    } else {
+      ctx.apis[name] = createAPI({
+        apiRequest: api,
+        ctx: {
+          ...ctx,
+          jsonPath: ['apis', name],
+        },
+        componentData: dataSignal.get(),
+      })
+    }
+  })
   // Trigger actions for all APIs after all of them are created.
   Object.values(ctx.apis)
     .filter(isContextApiV2)
@@ -375,7 +390,13 @@ const setupMetaUpdates = (
   if (dynamicLang) {
     dataSignal
       .map((data) =>
-        component ? applyFormula(langFormula, getFormulaContext(data)) : null,
+        component
+          ? applyFormula(langFormula, getFormulaContext(data), [
+              'route',
+              'info',
+              'language',
+            ])
+          : null,
       )
       .subscribe((newLang) => {
         if (isDefined(newLang) && document.documentElement.lang !== newLang) {
@@ -390,7 +411,13 @@ const setupMetaUpdates = (
   if (dynamicTitle) {
     dataSignal
       .map((data) =>
-        component ? applyFormula(titleFormula, getFormulaContext(data)) : null,
+        component
+          ? applyFormula(titleFormula, getFormulaContext(data), [
+              'route',
+              'info',
+              'title',
+            ])
+          : null,
       )
       .subscribe((newTitle) => {
         if (isDefined(newTitle) && document.title !== newTitle) {
@@ -455,7 +482,11 @@ const setupMetaUpdates = (
       dataSignal
         .map((data) =>
           component
-            ? applyFormula(descriptionFormula, getFormulaContext(data))
+            ? applyFormula(descriptionFormula, getFormulaContext(data), [
+                'route',
+                'info',
+                'description',
+              ])
             : null,
         )
         .subscribe((newDescription) => {
@@ -511,7 +542,14 @@ const setupMetaUpdates = (
                   component
                     ? {
                         ...agg,
-                        [key]: applyFormula(formula, context),
+                        [key]: applyFormula(formula, context, [
+                          'route',
+                          'info',
+                          'meta',
+                          id,
+                          'attrs',
+                          key,
+                        ]),
                       }
                     : agg,
                 {},

package/src/types.d.ts

@@ -9,6 +9,7 @@ import type {
   ToddleEnv,
   ValueOperationValue,
 } from '@nordcraft/core/dist/formula/formula'
+import type { FormulaEvaluationReporter } from '@nordcraft/core/dist/formula/formulaTypes'
 import type {
   Toddle as NewToddle,
   Toddle,
@@ -84,6 +85,8 @@ export interface ComponentContext {
     theme: Signal<string | null>
   }
   toddle: Toddle<LocationSignal, PreviewShowSignal>
+  jsonPath: Array<string | number> | undefined
+  reportFormulaEvaluation?: FormulaEvaluationReporter | undefined
   env: ToddleEnv
 }
 

package/src/utils/createFormulaCache.ts

@@ -48,7 +48,7 @@ export function createFormulaCache(component: Component): FormulaCache {
 }
 
 function getFormulaCacheConfig(formula: Formula, component: Component) {
-  const paths: string[][] = []
+  const paths: Array<string | number>[] = []
   function visitOperation(op: Formula) {
     if (!op) {
       return
@@ -81,7 +81,7 @@ function getFormulaCacheConfig(formula: Formula, component: Component) {
     }
   }
 
-  const keys: string[][] = []
+  const keys: Array<string | number>[] = []
   paths
     .sort((a, b) => a.length - b.length)
     .forEach((path) => {