@nordcraft/runtime 1.0.95 → 1.0.96

package/src/api/createAPI.ts

@@ -2,9 +2,13 @@
 import type { LegacyComponentAPI } from '@nordcraft/core/dist/api/apiTypes'
 import { mapHeadersToObject } from '@nordcraft/core/dist/api/headers'
 import type { ComponentData } from '@nordcraft/core/dist/component/component.types'
-import { applyFormula, isFormula } from '@nordcraft/core/dist/formula/formula'
+import {
+  applyFormula,
+  isFormula,
+  type FormulaContext,
+} from '@nordcraft/core/dist/formula/formula'
 import type { Nullable } from '@nordcraft/core/dist/types'
-import { mapValues } from '@nordcraft/core/dist/utils/collections'
+import { mapObject } from '@nordcraft/core/dist/utils/collections'
 import { parseJSONWithDate } from '@nordcraft/core/dist/utils/json'
 import { handleAction } from '../events/handleAction'
 import type { Signal } from '../signal/signal'
@@ -35,7 +39,7 @@ export function createLegacyAPI(
     api: LegacyComponentAPI,
     data: ComponentData,
   ): ApiRequest {
-    const formulaContext = {
+    const formulaContext: FormulaContext = {
       data,
       component: ctx.component,
       formulaCache: ctx.formulaCache,
@@ -43,14 +47,20 @@ export function createLegacyAPI(
       package: ctx.package,
       toddle: ctx.toddle,
       env: ctx.env,
+      jsonPath: ctx.jsonPath,
+      reportFormulaEvaluation: ctx.reportFormulaEvaluation,
     }
 
     // construct the url
-    const baseUrl = applyFormula(api.url, formulaContext) ?? ''
+    const baseUrl = applyFormula(api.url, formulaContext, ['url']) ?? ''
     const urlPath =
       api.path && api.path.length > 0
         ? '/' +
-          api.path.map((p) => applyFormula(p.formula, formulaContext)).join('/')
+          api.path
+            .map((p, i) =>
+              applyFormula(p.formula, formulaContext, ['path', i, 'formula']),
+            )
+            .join('/')
         : ''
 
     // build querystring
@@ -60,25 +70,21 @@ export function createLegacyAPI(
         ? '?' +
           queryParams
             .map(
-              (param) =>
+              (param, i) =>
                 `${param.name}=${encodeURIComponent(
-                  applyFormula(param.formula, formulaContext),
+                  applyFormula(param.formula, formulaContext, [
+                    'queryParams',
+                    i,
+                    'formula',
+                  ]),
                 )}`,
             )
             .join('&')
         : ''
     const headers = isFormula(api.headers) // this is supporting a few legacy cases where the whole header object was set as a formula. This is no longer possible
-      ? applyFormula(api.headers, {
-          data,
-          component: ctx.component,
-          formulaCache: ctx.formulaCache,
-          root: ctx.root,
-          package: ctx.package,
-          toddle: ctx.toddle,
-          env: ctx.env,
-        })
-      : mapValues(api.headers ?? {}, (value) =>
-          applyFormula(value, {
+      ? applyFormula(
+          api.headers,
+          {
             data,
             component: ctx.component,
             formulaCache: ctx.formulaCache,
@@ -86,7 +92,27 @@ export function createLegacyAPI(
             package: ctx.package,
             toddle: ctx.toddle,
             env: ctx.env,
-          }),
+            jsonPath: ctx.jsonPath,
+            reportFormulaEvaluation: ctx.reportFormulaEvaluation,
+          },
+          ['headers'],
+        )
+      : mapObject(api.headers ?? {}, ([key, value]) =>
+          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,
+            },
+            ['headers', key],
+          ),
         )
     const contentType = String(
       Object.entries(headers).find(
@@ -97,15 +123,21 @@ export function createLegacyAPI(
     const body =
       api.body && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)
         ? encodeBody(
-            applyFormula(api.body, {
-              data,
-              component: ctx.component,
-              formulaCache: ctx.formulaCache,
-              root: ctx.root,
-              package: ctx.package,
-              toddle: ctx.toddle,
-              env: ctx.env,
-            }),
+            applyFormula(
+              api.body,
+              {
+                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,
+              },
+              ['body'],
+            ),
             contentType,
           )
         : undefined
@@ -286,15 +318,21 @@ export function createLegacyAPI(
           data: null,
           isLoading:
             api.autoFetch &&
-            applyFormula(api.autoFetch, {
-              data: ctx.dataSignal.get(),
-              component: ctx.component,
-              formulaCache: ctx.formulaCache,
-              root: ctx.root,
-              package: ctx.package,
-              toddle: ctx.toddle,
-              env: ctx.env,
-            })
+            applyFormula(
+              api.autoFetch,
+              {
+                data: ctx.dataSignal.get(),
+                component: ctx.component,
+                formulaCache: ctx.formulaCache,
+                root: ctx.root,
+                package: ctx.package,
+                toddle: ctx.toddle,
+                env: ctx.env,
+                jsonPath: ctx.jsonPath,
+                reportFormulaEvaluation: ctx.reportFormulaEvaluation,
+              },
+              ['autoFetch'],
+            )
               ? true
               : false,
           error: null,
@@ -308,15 +346,21 @@ export function createLegacyAPI(
     payloadSignal.subscribe((body) => {
       if (
         api.autoFetch &&
-        applyFormula(api.autoFetch, {
-          data: ctx.dataSignal.get(),
-          component: ctx.component,
-          formulaCache: ctx.formulaCache,
-          root: ctx.root,
-          package: ctx.package,
-          toddle: ctx.toddle,
-          env: ctx.env,
-        })
+        applyFormula(
+          api.autoFetch,
+          {
+            data: ctx.dataSignal.get(),
+            component: ctx.component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            toddle: ctx.toddle,
+            env: ctx.env,
+            jsonPath: ctx.jsonPath,
+            reportFormulaEvaluation: ctx.reportFormulaEvaluation,
+          },
+          ['autoFetch'],
+        )
       ) {
         // We should only lookup cached data for pages since
         // we don't fetch data for component APIs during SSR

package/src/api/createAPIv2.ts

@@ -97,7 +97,7 @@ export function createAPI({
     componentData: ComponentData | undefined,
   ): FormulaContext {
     // Use the general formula context to evaluate the arguments of the api
-    const formulaContext = {
+    const formulaContext: FormulaContext = {
       data: ctx.dataSignal.get(),
       component: ctx.component,
       formulaCache: ctx.formulaCache,
@@ -105,13 +105,15 @@ export function createAPI({
       package: ctx.package,
       toddle: ctx.toddle,
       env: ctx.env,
+      jsonPath: ctx.jsonPath,
+      reportFormulaEvaluation: ctx.reportFormulaEvaluation,
     }
 
     // Make sure inputs are also available in the formula context
     const evaluatedInputs = Object.entries(api.inputs).reduce<
       Record<string, unknown>
     >((acc, [key, value]) => {
-      acc[key] = applyFormula(value.formula, formulaContext)
+      acc[key] = applyFormula(value.formula, formulaContext, ['inputs', key])
       return acc
     }, {})
 
@@ -131,6 +133,8 @@ export function createAPI({
       data,
       toddle: ctx.toddle,
       env: ctx.env,
+      jsonPath: ctx.jsonPath,
+      reportFormulaEvaluation: ctx.reportFormulaEvaluation,
     }
   }
 
@@ -140,15 +144,19 @@ export function createAPI({
       ([_, rule]) => rule.index,
     )) {
       const formulaContext = getFormulaContext(api, componentData)
-      const location = applyFormula(rule.formula, {
-        ...formulaContext,
-        data: {
-          ...formulaContext.data,
-          Apis: {
-            [api.name]: ctx.dataSignal.get().Apis?.[api.name] as ApiStatus,
+      const location = applyFormula(
+        rule.formula,
+        {
+          ...formulaContext,
+          data: {
+            ...formulaContext.data,
+            Apis: {
+              [api.name]: ctx.dataSignal.get().Apis?.[api.name] as ApiStatus,
+            },
           },
         },
-      })
+        ['redirectRules', ruleName],
+      )
       if (typeof location === 'string') {
         const url = validateUrl({
           path: location,
@@ -282,6 +290,18 @@ export function createAPI({
         },
       },
     })
+
+    ctx.reportFormulaEvaluation?.(['apis', api.name], {
+      isLoading: false,
+      data: data.body,
+      error: null,
+      response: {
+        status: data.status,
+        headers: data.headers,
+        performance,
+      },
+    })
+
     const appliedRedirectRule = handleRedirectRules(api, componentData)
     if (appliedRedirectRule) {
       ctx.dataSignal.set({
@@ -345,6 +365,18 @@ export function createAPI({
         },
       },
     })
+
+    ctx.reportFormulaEvaluation?.(['apis', api.name], {
+      isLoading: false,
+      data: null,
+      error: data.body,
+      response: {
+        status: data.status,
+        headers: data.headers,
+        performance,
+      },
+    })
+
     const appliedRedirectRule = handleRedirectRules(api, componentData)
     if (appliedRedirectRule) {
       ctx.dataSignal.set({
@@ -400,6 +432,13 @@ export function createAPI({
           },
         },
       })
+
+      ctx.reportFormulaEvaluation?.(['apis', api.name], {
+        isLoading: true,
+        data: ctx.dataSignal.get().Apis?.[api.name]?.data ?? null,
+        error: null,
+      })
+
       let response
 
       try {
@@ -407,6 +446,7 @@ export function createAPI({
           ? (applyFormula(
               api.server.proxy.enabled.formula,
               getFormulaContext(api, componentData),
+              ['server', 'proxy', 'enabled'],
             ) ?? false)
           : false
 
@@ -429,6 +469,7 @@ export function createAPI({
             applyFormula(
               api.server?.proxy?.useTemplatesInBody?.formula,
               getFormulaContext(api, componentData),
+              ['server', 'proxy', 'useTemplatesInBody'],
             ),
           )
           if (allowBodyTemplateValues) {
@@ -490,6 +531,7 @@ export function createAPI({
           applyFormula(
             api.client?.debounce?.formula,
             getFormulaContext(api, componentData),
+            ['client', 'debounce'],
           ),
         )
       })
@@ -984,15 +1026,24 @@ export function createAPI({
   payloadSignal = ctx.dataSignal.map((data) => {
     const payloadContext = getFormulaContext(api, data)
     const request = constructRequest(api, data)
+
+    if (ctx.reportFormulaEvaluation) {
+      const apiStatus = data.Apis?.[api.name]
+      if (apiStatus) {
+        ctx.reportFormulaEvaluation(['apis', api.name], apiStatus)
+      }
+    }
     return {
       request,
       api: getApiForComparison(api),
       // Serialize the Headers object to be able to compare changes
       headers: Array.from(request.requestSettings.headers.entries()),
       autoFetch: api.autoFetch
-        ? applyFormula(api.autoFetch, payloadContext)
+        ? applyFormula(api.autoFetch, payloadContext, ['autoFetch'])
         : false,
-      proxy: applyFormula(api.server?.proxy?.enabled.formula, payloadContext),
+      proxy: applyFormula(api.server?.proxy?.enabled.formula, payloadContext, [
+        'proxy',
+      ]),
     }
   })
   payloadSignal.subscribe(async (apiData) => {
@@ -1050,6 +1101,7 @@ export function createAPI({
         applyFormula(
           api.autoFetch,
           getFormulaContext(api, initialComponentData),
+          ['autoFetch'],
         )
       ) {
         // Execute will set the initial status of the api in the dataSignal
@@ -1155,7 +1207,8 @@ export function createAPI({
       api = newApi
       const updateContext = getFormulaContext(api, componentData)
       const autoFetch =
-        api.autoFetch && applyFormula(api.autoFetch, updateContext)
+        api.autoFetch &&
+        applyFormula(api.autoFetch, updateContext, ['autoFetch'])
       if (autoFetch) {
         const request = constructRequest(newApi, componentData)
         payloadSignal?.set({
@@ -1165,6 +1218,7 @@ export function createAPI({
           proxy: applyFormula(
             newApi.server?.proxy?.enabled.formula,
             updateContext,
+            ['proxy'],
           ),
           // Serialize the Headers object to be able to compare changes
           headers: Array.from(request.requestSettings.headers.entries()),
@@ -1174,7 +1228,7 @@ export function createAPI({
     triggerActions: (componentData) => {
       const apiData = ctx.dataSignal.get().Apis?.[api.name]
       if (
-        apiData === undefined ||
+        !isDefined(apiData) ||
         (apiData.data === null && apiData.error === null)
       ) {
         return

package/src/components/createComponent.ts

@@ -6,9 +6,10 @@ import type {
 } from '@nordcraft/core/dist/component/component.types'
 import { applyFormula } from '@nordcraft/core/dist/formula/formula'
 import { appendUnit } from '@nordcraft/core/dist/styling/customProperty'
-import { mapObject } from '@nordcraft/core/dist/utils/collections'
+import { filterObject, mapObject } from '@nordcraft/core/dist/utils/collections'
 import { getNodeSelector } from '@nordcraft/core/dist/utils/getNodeSelector'
 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'
@@ -68,6 +69,7 @@ export function createComponent({
     package: ctx.package,
     toddle: ctx.toddle,
     env: ctx.env,
+    reportFormulaEvaluation: ctx.reportFormulaEvaluation,
   }
   const attributesSignal = dataSignal.map((data) => {
     return mapObject(node.attrs, ([attr, value]) => [
@@ -84,22 +86,25 @@ export function createComponent({
   const componentDataSignal = signal<ComponentData>({
     Location: dataSignal.get().Location,
     Attributes: attributesSignal.get(),
-    Apis: mapObject(component.apis ?? {}, ([name, api]) => [
-      name,
-      {
-        data: null,
-        isLoading:
-          api.autoFetch &&
-          applyFormula(api.autoFetch, {
-            ...formulaCtx,
-            component,
-            data: dataSignal.get(),
-          })
-            ? true
-            : false,
-        error: null,
-      },
-    ]),
+    Apis: mapObject(
+      filterObject(component.apis ?? {}, ([_, api]) => isDefined(api)),
+      ([name, api]) => [
+        name,
+        {
+          data: null,
+          isLoading:
+            api!.autoFetch &&
+            applyFormula(api!.autoFetch, {
+              ...formulaCtx,
+              component,
+              data: dataSignal.get(),
+            })
+              ? true
+              : false,
+          error: null,
+        },
+      ],
+    ),
   })
 
   // Subscribe to global stores (currently only theme)
@@ -132,18 +137,51 @@ export function createComponent({
 
   // Call the abort signal if the component's datasignal is destroyed (component unmounted) to cancel any pending requests
   const abortController = new AbortController()
-  componentDataSignal.subscribe(() => {}, {
-    destroy: () =>
-      abortController.abort(`Component ${component.name} unmounted`),
-  })
+  componentDataSignal.subscribe(
+    (data) => {
+      Object.entries(data.Variables ?? {}).forEach(([name, value]) => {
+        ctx.reportFormulaEvaluation?.(['variables', name], value)
+      })
+    },
+    {
+      destroy: () =>
+        abortController.abort(`Component ${component.name} unmounted`),
+    },
+  )
   const formulaCache = createFormulaCache(component)
 
   // Note: this function must run procedurally to ensure apis (which are in correct order) can reference each other
   const apis: Record<string, ContextApi> = {}
-  sortApiObjects(Object.entries(component.apis ?? {})).forEach(
-    ([name, api]) => {
-      if (isLegacyApi(api)) {
-        apis[name] = createLegacyAPI(api, {
+  sortApiObjects(
+    Object.entries(component.apis ?? {}).filter(
+      (entry): entry is [string, ComponentAPI] => isDefined(entry[1]),
+    ),
+  ).forEach(([name, api]) => {
+    if (isLegacyApi(api)) {
+      apis[name] = createLegacyAPI(api, {
+        ...ctx,
+        apis,
+        component,
+        dataSignal: componentDataSignal,
+        abortSignal: abortController.signal,
+        isRootComponent: false,
+        formulaCache,
+        package: node.package ?? ctx.package,
+        triggerEvent: (eventTrigger, data) => {
+          const eventHandler = Object.values(node.events).find(
+            (e) => e.trigger === eventTrigger,
+          )
+          if (eventHandler) {
+            eventHandler.actions?.forEach((action) =>
+              handleAction(action, { ...dataSignal.get(), Event: data }, ctx),
+            )
+          }
+        },
+      })
+    } else {
+      apis[name] = createAPI({
+        apiRequest: api,
+        ctx: {
           ...ctx,
           apis,
           component,
@@ -162,39 +200,11 @@ export function createComponent({
               )
             }
           },
-        })
-      } else {
-        apis[name] = createAPI({
-          apiRequest: api,
-          ctx: {
-            ...ctx,
-            apis,
-            component,
-            dataSignal: componentDataSignal,
-            abortSignal: abortController.signal,
-            isRootComponent: false,
-            formulaCache,
-            package: node.package ?? ctx.package,
-            triggerEvent: (eventTrigger, data) => {
-              const eventHandler = Object.values(node.events).find(
-                (e) => e.trigger === eventTrigger,
-              )
-              if (eventHandler) {
-                eventHandler.actions?.forEach((action) =>
-                  handleAction(
-                    action,
-                    { ...dataSignal.get(), Event: data },
-                    ctx,
-                  ),
-                )
-              }
-            },
-          },
-          componentData: componentDataSignal.get(),
-        })
-      }
-    },
-  )
+        },
+        componentData: componentDataSignal.get(),
+      })
+    }
+  })
   Object.values(apis)
     .filter(isContextApiV2)
     .forEach((api) => {
@@ -221,15 +231,21 @@ export function createComponent({
         .map(([name, formula]) => [
           name,
           componentDataSignal.map((data) =>
-            applyFormula(formula.formula, {
-              data,
-              component,
-              formulaCache: ctx.formulaCache,
-              root: ctx.root,
-              package: ctx.package,
-              toddle: ctx.toddle,
-              env: ctx.env,
-            }),
+            applyFormula(
+              formula.formula,
+              {
+                data,
+                component,
+                formulaCache: ctx.formulaCache,
+                root: ctx.root,
+                package: ctx.package,
+                toddle: ctx.toddle,
+                env: ctx.env,
+                jsonPath: ctx.jsonPath,
+                reportFormulaEvaluation: ctx.reportFormulaEvaluation,
+              },
+              ['formulas', name],
+            ),
           ),
         ]),
     )
@@ -301,6 +317,8 @@ export function createComponent({
       node.id === 'root'
         ? { ...instance, [ctx.component.name]: 'root' }
         : { [ctx.component.name]: node.id ?? '' },
+    jsonPath: ctx.jsonPath,
+    reportFormulaEvaluation: ctx.reportFormulaEvaluation,
   })
 
   // Custom properties instance overrides are added after the child tree is rendered to ensure correct order