@nordcraft/core 2.0.7 → 2.0.9

package/src/api/ToddleApiV2.ts

@@ -27,7 +27,7 @@ export class ToddleApiV2<Handler> implements ApiRequest {
     this.globalFormulas = globalFormulas
   }
 
-  get apiReferences(): Set<string> {
+  private get apiReferences(): Set<string> {
     if (this._apiReferences) {
       // Only compute apiReferences once
       return this._apiReferences
@@ -174,6 +174,10 @@ export class ToddleApiV2<Handler> implements ApiRequest {
     return this.api['@nordcraft/metadata']
   }
 
+  get dependsOn() {
+    return Array.from(this.apiReferences)
+  }
+
   *formulasInApi(): Generator<{
     path: (string | number)[]
     formula: Formula

package/src/api/api.test.ts

@@ -7,10 +7,13 @@ import {
   getRequestPath,
   getRequestQueryParams,
   getUrl,
+  isLegacyApi,
   toFormData,
 } from './api'
 import type { ApiRequest } from './apiTypes'
 import { ApiMethod } from './apiTypes'
+import { LegacyToddleApi } from './LegacyToddleApi'
+import { ToddleApiV2 } from './ToddleApiV2'
 
 describe('getApiPath()', () => {
   test('it returns a valid url path string', () => {
@@ -486,3 +489,47 @@ describe('toFormData()', () => {
     expect(formData.get('valid')).toBe('working')
   })
 })
+describe('isLegacyApi()', () => {
+  test('it checks if an API is legacy', () => {
+    expect(
+      isLegacyApi({
+        name: 'Legacy API',
+        type: 'REST',
+      }),
+    ).toBe(true)
+    expect(
+      isLegacyApi({
+        name: 'New API',
+        type: 'http',
+        version: 2,
+        inputs: {},
+      }),
+    ).toBe(false)
+    expect(
+      isLegacyApi(
+        new LegacyToddleApi(
+          {
+            name: 'Legacy API',
+            type: 'REST',
+          },
+          'myLegacyApi',
+          {},
+        ),
+      ),
+    ).toBe(true)
+    expect(
+      isLegacyApi(
+        new ToddleApiV2(
+          {
+            name: 'New API',
+            type: 'http',
+            version: 2,
+            inputs: {},
+          },
+          'myNewApi',
+          {},
+        ),
+      ),
+    ).toBe(false)
+  })
+})

package/src/api/api.ts

@@ -14,15 +14,14 @@ import type {
 } from './apiTypes'
 import { ApiMethod } from './apiTypes'
 import { isJsonHeader } from './headers'
-import { LegacyToddleApi } from './LegacyToddleApi'
-import { ToddleApiV2 } from './ToddleApiV2'
+import type { LegacyToddleApi } from './LegacyToddleApi'
+import type { ToddleApiV2 } from './ToddleApiV2'
 
 export const NON_BODY_RESPONSE_CODES = [101, 204, 205, 304]
 
 export const isLegacyApi = <Handler>(
   api: ComponentAPI | LegacyToddleApi<Handler> | ToddleApiV2<Handler>,
-): api is LegacyComponentAPI | LegacyToddleApi<Handler> =>
-  api instanceof LegacyToddleApi ? true : !('version' in api)
+): api is LegacyComponentAPI | LegacyToddleApi<Handler> => !('version' in api)
 
 export const createApiRequest = <Handler>({
   api,
@@ -420,62 +419,3 @@ export const createApiEvent = (
     detail,
   })
 }
-
-const compareApiDependencies = <Handler>(
-  a: LegacyToddleApi<Handler> | ToddleApiV2<Handler>,
-  b: LegacyToddleApi<Handler> | ToddleApiV2<Handler>,
-) => {
-  const isADependentOnB = a.apiReferences.has(b.name)
-  const isBDependentOnA = b.apiReferences.has(a.name)
-  if (isADependentOnB === isBDependentOnA) {
-    return 0
-  }
-  // 1 means A goes last - hence B is evaluated before A
-  return isADependentOnB ? 1 : -1
-}
-
-export const sortApiObjects = <Handler>(
-  apis: Array<[string, ComponentAPI]>,
-) => {
-  const apiMap = new Map<
-    string,
-    LegacyToddleApi<Handler> | ToddleApiV2<Handler>
-  >()
-  const getApi = (apiObj: ComponentAPI, key: string) => {
-    let api = apiMap.get(key)
-    if (!api) {
-      api =
-        apiObj.version === 2
-          ? new ToddleApiV2<Handler>(
-              apiObj,
-              key,
-              // global formulas are not required for sorting
-              {
-                formulas: {},
-                packages: {},
-              },
-            )
-          : new LegacyToddleApi<Handler>(
-              apiObj,
-              key,
-              // global formulas are not required for sorting
-              {
-                formulas: {},
-                packages: {},
-              },
-            )
-      apiMap.set(key, api)
-    }
-    return api
-  }
-
-  return [...apis].sort(([aKey, aObj], [bKey, bObj]) => {
-    const a = getApi(aObj, aKey)
-    const b = getApi(bObj, bKey)
-    return compareApiDependencies(a, b)
-  })
-}
-
-export const sortApiEntries = <Handler>(
-  apis: Array<[string, LegacyToddleApi<Handler> | ToddleApiV2<Handler>]>,
-) => [...apis].sort(([_, a], [__, b]) => compareApiDependencies(a, b))

package/src/api/apiTypes.ts

@@ -23,6 +23,7 @@ export interface LegacyComponentAPI {
   onCompleted?: Nullable<EventModel>
   onFailed?: Nullable<EventModel>
   version?: never
+  dependsOn?: string[]
 }
 
 export interface LegacyApiStatus {
@@ -137,6 +138,7 @@ export interface ApiRequest extends ApiBase {
   isError?: Nullable<{ formula: Formula }>
   // Formula for determining when the request should time out
   timeout?: Nullable<{ formula: Formula }>
+  dependsOn?: string[]
 }
 
 export interface ApiStatus {

package/src/component/ToddleComponent.subComponents.test.ts

@@ -0,0 +1,219 @@
+import { describe, expect, test } from 'bun:test'
+import { ToddleComponent } from './ToddleComponent'
+import type { Component } from './component.types'
+
+describe('ToddleComponent.uniqueSubComponents', () => {
+  test('it should pass down the package name to sub-components', () => {
+    const packagedComp: Component = {
+      name: 'PackagedComp',
+      nodes: {
+        node1: {
+          type: 'component',
+          name: 'InternalComp',
+        },
+      },
+      apis: {},
+      attributes: {},
+      variables: {},
+      workflows: {},
+    }
+
+    const internalComp: Component = {
+      name: 'InternalComp',
+      nodes: {},
+      apis: {},
+      attributes: {},
+      variables: {},
+      workflows: {},
+    }
+
+    const root: Component = {
+      name: 'root',
+      nodes: {
+        node1: {
+          type: 'component',
+          name: 'PackagedComp',
+          package: 'my-package',
+        },
+      },
+      apis: {},
+      attributes: {},
+      variables: {},
+      workflows: {},
+    }
+
+    const componentsMap: Record<string, Component> = {
+      'my-package/PackagedComp': packagedComp,
+      'my-package/InternalComp': internalComp,
+    }
+
+    const getComponent = (name: string, packageName?: string) => {
+      const key = packageName ? `${packageName}/${name}` : name
+      return componentsMap[key]
+    }
+
+    const demo = new ToddleComponent({
+      component: root,
+      getComponent,
+      packageName: undefined,
+      globalFormulas: { formulas: {}, packages: {} },
+    })
+
+    const subComponents = demo.uniqueSubComponents
+    expect(subComponents).toHaveLength(2)
+    expect(subComponents[0].name).toBe('PackagedComp')
+    expect(subComponents[0].packageName).toBe('my-package')
+    expect(subComponents[1].name).toBe('InternalComp')
+    expect(subComponents[1].packageName).toBe('my-package')
+  })
+
+  test('it should handle nested components and avoid duplicates', () => {
+    const compA: Component = {
+      name: 'CompA',
+      nodes: {
+        node1: {
+          type: 'component',
+          name: 'CompB',
+        },
+      },
+      apis: {},
+      attributes: {},
+      variables: {},
+      workflows: {},
+    }
+
+    const compB: Component = {
+      name: 'CompB',
+      nodes: {},
+      apis: {},
+      attributes: {},
+      variables: {},
+      workflows: {},
+    }
+
+    const root: Component = {
+      name: 'root',
+      nodes: {
+        node1: {
+          type: 'component',
+          name: 'CompA',
+        },
+        node2: {
+          type: 'component',
+          name: 'CompB',
+        },
+      },
+      apis: {},
+      attributes: {},
+      variables: {},
+      workflows: {},
+    }
+
+    const componentsMap: Record<string, Component> = {
+      CompA: compA,
+      CompB: compB,
+    }
+
+    const getComponent = (name: string, packageName?: string) => {
+      const key = packageName ? `${packageName}/${name}` : name
+      return componentsMap[key]
+    }
+
+    const demo = new ToddleComponent({
+      component: root,
+      getComponent,
+      packageName: undefined,
+      globalFormulas: { formulas: {}, packages: {} },
+    })
+
+    const subComponents = demo.uniqueSubComponents
+    expect(subComponents).toHaveLength(2)
+    const names = subComponents.map((c) => c.name).sort()
+    expect(names).toEqual(['CompA', 'CompB'])
+  })
+
+  test('it should allow sub-components to override the package name', () => {
+    const pkgAComp: Component = {
+      name: 'PkgAComp',
+      nodes: {
+        node1: {
+          type: 'component',
+          name: 'PkgBComp',
+          package: 'package-b',
+        },
+      },
+      apis: {},
+      attributes: {},
+      variables: {},
+      workflows: {},
+    }
+
+    const pkgBComp: Component = {
+      name: 'PkgBComp',
+      nodes: {
+        node1: {
+          type: 'component',
+          name: 'InternalComp',
+        },
+      },
+      apis: {},
+      attributes: {},
+      variables: {},
+      workflows: {},
+    }
+
+    const internalComp: Component = {
+      name: 'InternalComp',
+      nodes: {},
+      apis: {},
+      attributes: {},
+      variables: {},
+      workflows: {},
+    }
+
+    const root: Component = {
+      name: 'root',
+      nodes: {
+        node1: {
+          type: 'component',
+          name: 'PkgAComp',
+          package: 'package-a',
+        },
+      },
+      apis: {},
+      attributes: {},
+      variables: {},
+      workflows: {},
+    }
+
+    const componentsMap: Record<string, Component> = {
+      'package-a/PkgAComp': pkgAComp,
+      'package-b/PkgBComp': pkgBComp,
+      'package-b/InternalComp': internalComp,
+    }
+
+    const getComponent = (name: string, packageName?: string) => {
+      const key = packageName ? `${packageName}/${name}` : name
+      return componentsMap[key]
+    }
+
+    const demo = new ToddleComponent({
+      component: root,
+      getComponent,
+      packageName: undefined,
+      globalFormulas: { formulas: {}, packages: {} },
+    })
+
+    const subComponents = demo.uniqueSubComponents
+    expect(subComponents).toHaveLength(3)
+
+    const pA = subComponents.find((c) => c.name === 'PkgAComp')
+    expect(pA?.packageName).toBe('package-a')
+
+    const pB = subComponents.find((c) => c.name === 'PkgBComp')
+    expect(pB?.packageName).toBe('package-b')
+
+    const internal = subComponents.find((c) => c.name === 'InternalComp')
+    expect(internal?.packageName).toBe('package-b')
+  })
+})

package/src/component/ToddleComponent.ts

@@ -2,7 +2,7 @@ import { isLegacyApi } from '../api/api'
 import type { ComponentAPI } from '../api/apiTypes'
 import { LegacyToddleApi } from '../api/LegacyToddleApi'
 import { ToddleApiV2 } from '../api/ToddleApiV2'
-import type { Formula, FunctionOperation } from '../formula/formula'
+import type { Formula } from '../formula/formula'
 import type { GlobalFormulas } from '../formula/formulaTypes'
 import {
   getFormulasInAction,
@@ -10,12 +10,7 @@ import {
 } from '../formula/formulaUtils'
 import { isDefined } from '../utils/util'
 import { getActionsInAction } from './actionUtils'
-import type {
-  ActionModel,
-  Component,
-  CustomActionModel,
-  NodeModel,
-} from './component.types'
+import type { ActionModel, Component, NodeModel } from './component.types'
 import { isPageComponent } from './isPageComponent'
 
 export class ToddleComponent<Handler> {
@@ -54,10 +49,8 @@ export class ToddleComponent<Handler> {
       if (components.has(node.name)) {
         return
       }
-      const component = this.getComponent(
-        node.name,
-        node.package ?? packageName,
-      )
+      const componentPackageName = node.package ?? packageName
+      const component = this.getComponent(node.name, componentPackageName)
       if (!component) {
         return
       }
@@ -66,13 +59,17 @@ export class ToddleComponent<Handler> {
         new ToddleComponent({
           component,
           getComponent: this.getComponent,
-          packageName: node.package ?? packageName,
+          packageName: componentPackageName,
           globalFormulas: this.globalFormulas,
         }),
       )
       Object.values(component.nodes ?? {}).forEach((node) => {
         if (isDefined(node)) {
-          visitNode((node as any).package ?? packageName)(node)
+          const nodePackageName =
+            (node.type === 'component' ? node.package : undefined) ??
+            componentPackageName ??
+            packageName
+          visitNode(nodePackageName)(node)
         }
       })
     }
@@ -84,47 +81,6 @@ export class ToddleComponent<Handler> {
     return [...components.values()]
   }
 
-  get formulaReferences() {
-    return new Set(
-      Array.from(this.formulasInComponent())
-        .filter(
-          (
-            entry,
-          ): entry is {
-            path: (string | number)[]
-            formula: FunctionOperation
-            packageName?: string
-          } => entry.formula.type === 'function',
-        )
-        .flatMap((entry) => {
-          const refs = [entry.formula.name]
-          const packageName =
-            entry.formula.package ?? entry.packageName ?? this.packageName
-          if (
-            packageName &&
-            this.globalFormulas.packages?.[packageName]?.formulas?.[
-              entry.formula.name
-            ]
-          ) {
-            refs.push([packageName, entry.formula.name].join('/'))
-          }
-
-          return refs
-        }),
-    )
-  }
-
-  get actionReferences(): Set<string> {
-    return new Set(
-      Array.from(this.actionModelsInComponent())
-        .filter(
-          (entry): entry is [(string | number)[], CustomActionModel] =>
-            entry[1].type === 'Custom' || entry[1].type === undefined,
-        )
-        .map(([, a]) => [a.package, a.name].filter(isDefined).join('/')),
-    )
-  }
-
   /**
    * Traverse all formulas in the component.
    * @returns An iterable that yields the path and formula.

package/src/component/component.types.ts

@@ -206,10 +206,12 @@ export interface Component {
     // Later, we will add information about allowed origins here
     enabled?: Nullable<Formula>
   }>
+  // Used to indicate if a page or any of its child components use custom actions/formulas
+  customCode?: Nullable<boolean>
 }
 
 export interface ComponentFormula extends NordcraftMetadata {
-  name: string
+  name?: string
   arguments?: Nullable<Array<{ name: string; testValue: any }>>
   memoize?: Nullable<boolean>
   exposeInContext?: Nullable<boolean>
@@ -217,7 +219,7 @@ export interface ComponentFormula extends NordcraftMetadata {
 }
 
 export interface ComponentWorkflow extends NordcraftMetadata {
-  name: string
+  name?: string
   parameters: Array<{ name: string; testValue: any }>
   callbacks?: Nullable<Array<{ name: string; testValue: any }>>
   actions: ActionModel[]
@@ -239,7 +241,17 @@ export interface RouteDeclaration {
   query: Record<string, { name: string; testValue: any }>
 }
 
+export interface ResponseHeaders {
+  [key: string]: Nullable<Formula | string>
+}
+
 export interface PageRoute extends RouteDeclaration {
+  response?: Nullable<{
+    // Allow overriding response headers for a page render. For example to set a custom cache-control header for a page
+    // or specify a Location along with a 3xx status code to redirect the user to another page
+    headers?: Nullable<ResponseHeaders>
+    status?: Nullable<Formula>
+  }>
   // Information for the <head> element
   // only relevant for pages - not for regular
   // components
@@ -418,6 +430,9 @@ export interface ComponentEvent extends NordcraftMetadata {
 
 export interface ComponentVariable extends NordcraftMetadata {
   initialValue: Formula
+  // @deprecated - variables should be referenced by their key in component.variables
+  // name is only here to better reflect how variables are stored in legacy components
+  name?: never
 }
 
 export interface ComponentAttribute extends NordcraftMetadata {

package/src/component/schemas/api-schema.ts

@@ -210,6 +210,10 @@ const ApiRequestSchema: z.ZodType<ApiRequest> = z
       .describe(
         'Rules for redirecting based on response data. The key is a unique identifier for the rule.',
       ),
+    dependsOn: z
+      .array(z.string())
+      .optional()
+      .describe('List of APIs that this API depends on.'),
   })
   .describe('Schema defining an API request from a component or a page.')
 
@@ -244,6 +248,7 @@ const LegacyComponentAPISchema: z.ZodType<LegacyComponentAPI> = z
         type: z.enum(['Bearer id_token', 'Bearer access_token']),
       })
       .nullish(),
+    dependsOn: z.array(z.string()).optional(),
   })
   .describe(
     'Legacy API schema for backward compatibility. Never use this for new APIs.',

package/src/styling/className.test.ts

@@ -1,4 +1,5 @@
-import { toValidClassName } from './className'
+import { describe, expect, test } from 'bun:test'
+import { getClassName, toValidClassName } from './className'
 
 describe('toValidClassName()', () => {
   test('it trims leading and trailing whitespace and replace the remaining whitespace with hyphens', () => {
@@ -17,3 +18,17 @@ describe('toValidClassName()', () => {
     expect(toValidClassName('1class')).toBe('_1class')
   })
 })
+
+describe('getClassName()', () => {
+  test('it produces the same classname whether a nullish entry is provided or not', () => {
+    expect(getClassName([null, undefined, { color: 'red' }])).toBe(
+      getClassName([{ color: 'red' }]),
+    )
+  })
+
+  test('it produces the same classname whether an empty object is provided or not', () => {
+    expect(getClassName([{}, { color: 'red' }])).toBe(
+      getClassName([{ color: 'red' }]),
+    )
+  })
+})

package/src/styling/className.ts

@@ -1,9 +1,22 @@
+import type { NodeStyleModel } from '../component/component.types'
+import type { Nullable } from '../types'
 import { generateAlphabeticName, hash } from './hash'
+import type { StyleVariant } from './variantSelector'
 
 // Classnames are reused a lot, and JS hashing is expensive, so there is benefit in caching them in a native hashmap.
 const CLASSNAME_LOOKUP = new Map<string, string>()
-export const getClassName = (object: any) => {
-  const stringified = JSON.stringify(object)
+export const getClassName = (
+  object: [Nullable<NodeStyleModel>, Nullable<StyleVariant[]>],
+) => {
+  const stringified = JSON.stringify(
+    object.filter(
+      (item) =>
+        item !== null && // Skip nullish values
+        item !== undefined &&
+        (Array.isArray(item) ? item.length > 0 : true) && // Skip empty arrays/objects
+        (typeof item === 'object' ? Object.keys(item).length > 0 : true),
+    ),
+  )
   if (CLASSNAME_LOOKUP.has(stringified)) {
     return CLASSNAME_LOOKUP.get(stringified)!
   }

package/src/styling/style.css.ts

@@ -284,11 +284,10 @@ export const createStylesheet = (
         if (childComponent) {
           insertComponentStyles(childComponent, node.package ?? package_name)
           stylesheet += getNodeStyles(
-            node as any,
+            node,
             toValidClassName(`${component.name}:${id}`, true),
             animationHashes,
           )
-
           return
         }
       }
@@ -300,7 +299,7 @@ export const createStylesheet = (
         return ''
       }
       hashes.add(classHash)
-      stylesheet += getNodeStyles(node as any, classHash, animationHashes)
+      stylesheet += getNodeStyles(node, classHash, animationHashes)
     })
   }
   insertComponentStyles(root)