@nordcraft/runtime 1.0.14 → 1.0.16

package/src/components/createComponent.ts

@@ -5,9 +5,9 @@ import type {
   SupportedNamespaces,
 } from '@nordcraft/core/dist/component/component.types'
 import { applyFormula } from '@nordcraft/core/dist/formula/formula'
-import type { RequireFields } from '@nordcraft/core/dist/types'
 import { mapObject } from '@nordcraft/core/dist/utils/collections'
 import { isDefined } from '@nordcraft/core/dist/utils/util'
+import { isContextApiV2 } from '../api/apiUtils'
 import { createLegacyAPI } from '../api/createAPI'
 import { createAPI } from '../api/createAPIv2'
 import { isContextProvider } from '../context/isContextProvider'
@@ -146,35 +146,36 @@ export function createComponent({
         },
       })
     } else {
-      apis[name] = createAPI(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),
+      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(),
       })
     }
   })
   Object.values(apis)
-    .filter(
-      (api): api is RequireFields<ContextApi, 'triggerActions'> =>
-        api.triggerActions !== undefined,
-    )
+    .filter(isContextApiV2)
     .forEach((api) => {
-      api.triggerActions()
+      api.triggerActions(componentDataSignal.get())
     })
 
   const onEvent = (eventTrigger: string, data: any) => {

package/src/components/renderComponent.ts

@@ -11,6 +11,7 @@ import type { Signal } from '../signal/signal'
 import type {
   ComponentChild,
   ComponentContext,
+  ContextApi,
   FormulaCache,
   LocationSignal,
   PreviewShowSignal,
@@ -22,7 +23,7 @@ interface RenderComponentProps {
   component: Component
   components: Component[]
   dataSignal: Signal<ComponentData>
-  apis: Record<string, { fetch: Function; destroy: Function }>
+  apis: Record<string, ContextApi>
   abortSignal: AbortSignal
   onEvent: (event: string, data: unknown) => void
   isRootComponent: boolean

package/src/custom-element/ToddleComponent.ts

@@ -8,15 +8,16 @@ import { applyFormula } from '@nordcraft/core/dist/formula/formula'
 import { createStylesheet } from '@nordcraft/core/dist/styling/style.css'
 import type { Theme } from '@nordcraft/core/dist/styling/theme'
 import { theme as defaultTheme } from '@nordcraft/core/dist/styling/theme.const'
-import type { RequireFields, Toddle } from '@nordcraft/core/dist/types'
+import type { Toddle } from '@nordcraft/core/dist/types'
 import { mapObject } from '@nordcraft/core/dist/utils/collections'
+import { isContextApiV2 } from '../api/apiUtils'
 import { createLegacyAPI } from '../api/createAPI'
 import { createAPI } from '../api/createAPIv2'
 import { renderComponent } from '../components/renderComponent'
 import { isContextProvider } from '../context/isContextProvider'
 import type { Signal } from '../signal/signal'
 import { signal } from '../signal/signal'
-import type { ComponentContext, ContextApi, LocationSignal } from '../types'
+import type { ComponentContext, LocationSignal } from '../types'
 
 /**
  * Base class for all toddle components
@@ -97,17 +98,18 @@ export class ToddleComponent extends HTMLElement {
         if (isLegacyApi(api)) {
           this.#ctx.apis[name] = createLegacyAPI(api, this.#ctx)
         } else {
-          this.#ctx.apis[name] = createAPI(api, this.#ctx)
+          this.#ctx.apis[name] = createAPI({
+            apiRequest: api,
+            ctx: this.#ctx,
+            componentData: this.#signal.get(),
+          })
         }
       },
     )
     Object.values(this.#ctx.apis)
-      .filter(
-        (api): api is RequireFields<ContextApi, 'triggerActions'> =>
-          api.triggerActions !== undefined,
-      )
+      .filter(isContextApiV2)
       .forEach((api) => {
-        api.triggerActions()
+        api.triggerActions(this.#signal.get())
       })
 
     let providers = this.#ctx.providers

package/src/editor-preview.main.ts

@@ -48,6 +48,7 @@ import { signal } from './signal/signal'
 import { insertStyles, styleToCss } from './styles/style'
 import type {
   ComponentContext,
+  ContextApiV2,
   LocationSignal,
   PreviewShowSignal,
 } from './types'
@@ -724,7 +725,7 @@ export const createRoot = (
               },
             },
           }))
-          ctx?.apis[apiKey]?.fetch({})
+          void ctx?.apis[apiKey]?.fetch({} as any)
           break
         case 'drag-started':
           const draggedElement = getDOMNodeFromNodeId(selectedNodeId)
@@ -1319,11 +1320,16 @@ export const createRoot = (
           newCtx.apis[api] = createLegacyAPI(apiInstance, newCtx)
         }
       } else {
-        if (!newCtx.apis[api]) {
-          newCtx.apis[api] = createAPI(apiInstance, newCtx)
+        const existingApi = newCtx.apis[api] as ContextApiV2 | undefined
+        if (!existingApi) {
+          newCtx.apis[api] = createAPI({
+            apiRequest: apiInstance,
+            ctx: newCtx,
+            componentData: dataSignal.get(),
+          })
         } else {
-          // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-          newCtx.apis[api].update && newCtx.apis[api].update(apiInstance)
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          existingApi?.update(apiInstance, dataSignal.get())
         }
       }
     }

package/src/events/handleAction.ts

@@ -9,6 +9,7 @@ import { applyFormula } from '@nordcraft/core/dist/formula/formula'
 import { mapValues, 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'
 import type { ComponentContext, Location } from '../types'
 import { getLocationUrl } from '../utils/url'
 
@@ -233,61 +234,56 @@ export function handleAction(
       }
       case 'Fetch': {
         const api = ctx.apis[action.api]
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!api) {
           console.error('The api ', action.api, 'does not exist')
           return
         }
 
-        const isv2 = ctx.component.apis?.[action.api]?.version === 2
-
-        // 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 = isv2
-          ? 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,
-              }),
-            )
-          : undefined
-
-        const actionModels = isv2
-          ? {
-              onCompleted: action.onSuccess?.actions,
-              onFailed: action.onError?.actions,
-              onMessage: action.onMessage?.actions,
-            }
-          : undefined
-
-        const triggerActions = (actions: ActionModel[]) => {
-          // Actions from the fetch action is handled by the api itself
-          if (isv2) {
-            return
+        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 actionModels = {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            onCompleted: action.onSuccess?.actions ?? [],
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            onFailed: action.onError?.actions ?? [],
+            onMessage: action.onMessage?.actions ?? [],
           }
-          for (const subAction of actions) {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            handleAction(
-              subAction,
-              { ...data, ...ctx.dataSignal.get() },
-              ctx,
-              event,
-            )
+          void api.fetch({ actionInputs, actionModels, componentData: data })
+        } else {
+          const triggerActions = (actions: ActionModel[]) => {
+            for (const subAction of actions) {
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              handleAction(
+                subAction,
+                { ...data, ...ctx.dataSignal.get() },
+                ctx,
+                event,
+              )
+            }
           }
+          api.fetch().then(
+            () => {
+              triggerActions(action.onSuccess.actions)
+            },
+            () => {
+              triggerActions(action.onError.actions)
+            },
+          )
         }
 
-        api.fetch({ actionInputs, actionModels }).then(
-          () => {
-            triggerActions(action.onSuccess.actions)
-          },
-          () => {
-            triggerActions(action.onError.actions)
-          },
-        )
         break
       }
       case 'TriggerWorkflow': {

package/src/page.main.ts

@@ -12,7 +12,6 @@ import type {
   FormulaHandler,
   FormulaHandlerV2,
   PluginActionV2,
-  RequireFields,
   Toddle,
 } from '@nordcraft/core/dist/types'
 import { mapObject } from '@nordcraft/core/dist/utils/collections'
@@ -21,13 +20,14 @@ import * as libActions from '@nordcraft/std-lib/dist/actions'
 import * as libFormulas from '@nordcraft/std-lib/dist/formulas'
 import fastDeepEqual from 'fast-deep-equal'
 import { match } from 'path-to-regexp'
+import { isContextApiV2 } from './api/apiUtils'
 import { createLegacyAPI } from './api/createAPI'
 import { createAPI } from './api/createAPIv2'
 import { renderComponent } from './components/renderComponent'
 import { isContextProvider } from './context/isContextProvider'
 import { initLogState, registerComponentToLogState } from './debug/logState'
 import { signal } from './signal/signal'
-import type { ComponentContext, ContextApi, LocationSignal } from './types'
+import type { ComponentContext, LocationSignal } from './types'
 
 initLogState()
 
@@ -377,17 +377,18 @@ export const createRoot = (domNode: HTMLElement) => {
     if (isLegacyApi(api)) {
       ctx.apis[name] = createLegacyAPI(api, ctx)
     } else {
-      ctx.apis[name] = createAPI(api, ctx)
+      ctx.apis[name] = createAPI({
+        apiRequest: api,
+        ctx,
+        componentData: dataSignal.get(),
+      })
     }
   })
   // Trigger actions for all APIs after all of them are created.
   Object.values(ctx.apis)
-    .filter(
-      (api): api is RequireFields<ContextApi, 'triggerActions'> =>
-        api.triggerActions !== undefined,
-    )
+    .filter(isContextApiV2)
     .forEach((api) => {
-      api.triggerActions()
+      api.triggerActions(dataSignal.get())
     })
 
   let providers = ctx.providers

package/src/types.d.ts

@@ -1,13 +1,20 @@
+import type { ApiRequest as CoreApiRequest } from '@nordcraft/core/dist/api/apiTypes'
 import type {
+  ActionModel,
   Component,
   ComponentData,
 } from '@nordcraft/core/dist/component/component.types'
-import type { ToddleEnv } from '@nordcraft/core/dist/formula/formula'
+import type {
+  Formula,
+  ToddleEnv,
+  ValueOperationValue,
+} from '@nordcraft/core/dist/formula/formula'
 import type {
   Toddle as NewToddle,
   Toddle,
   ToddleInternals,
 } from '@nordcraft/core/dist/types'
+import type { ApiRequest } from './api/createAPI'
 import type { Signal } from './signal/signal'
 
 declare global {
@@ -77,11 +84,33 @@ export interface ComponentContext {
   env: ToddleEnv
 }
 
-export type ContextApi = {
-  fetch: Function
+export type ContextApi = ContextApiV1 | ContextApiV2
+
+export interface ContextApiV1 {
+  fetch: (api?: ApiRequest) => Promise<unknown>
+  destroy: Function
+}
+
+export interface ContextApiV2 {
+  fetch: (args: {
+    actionInputs?: Record<
+      string,
+      | ValueOperationValue
+      | {
+          name: string
+          formula?: Formula
+        }
+    >
+    actionModels?: {
+      onCompleted: ActionModel[]
+      onFailed: ActionModel[]
+      onMessage: ActionModel[]
+    }
+    componentData: ComponentData
+  }) => Promise<unknown>
   destroy: Function
-  update?: Function // for updating the dataSignal (v2 only)
-  triggerActions?: Function // for triggering actions explicitly. Useful when initializing apis (v2 only)
+  update: (newApi: CoreApiRequest, componentData: ComponentData) => void // for updating the dataSignal
+  triggerActions: (componentData: ComponentData) => void // for triggering actions explicitly. Useful when initializing apis
 }
 
 export type FormulaCache = Record<