@nordcraft/core 1.0.0

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

@@ -0,0 +1,234 @@
+import { functionFormula, valueFormula } from '../formula/formulaUtils'
+import { ToddleComponent } from './ToddleComponent'
+
+describe('ToddleComponent.formulasInComponent', () => {
+  test('it return formulas used in parameters of TriggerWorkflow actions', () => {
+    const demo = new ToddleComponent({
+      component: {
+        name: 'demo',
+        apis: {},
+        attributes: {},
+        nodes: {},
+        variables: {},
+        workflows: {
+          '7XLoA3': {
+            name: 'my-workflow',
+            actions: [
+              {
+                type: 'TriggerWorkflow',
+                workflow: 'jm3yUN',
+                parameters: {
+                  'param-1': {
+                    formula: {
+                      name: 'scrollPosition',
+                      type: 'function',
+                      arguments: [],
+                    },
+                  },
+                },
+              },
+            ],
+            parameters: [],
+          },
+        },
+      },
+      getComponent: () => undefined,
+      packageName: 'demo',
+      globalFormulas: { formulas: {}, packages: {} },
+    })
+    const formulas = Array.from(demo.formulasInComponent()).map(
+      ([, formula]) => formula,
+    )
+    expect(formulas).toContainEqual({
+      name: 'scrollPosition',
+      type: 'function',
+      arguments: [],
+    })
+  })
+  test('it returns formulas used in APIs', () => {
+    const demo = new ToddleComponent({
+      component: {
+        name: 'demo',
+        apis: {
+          legacyApi: {
+            name: 'legacyAPI',
+            type: 'REST',
+            url: valueFormula('https://api.example.com'),
+            autoFetch: {
+              type: 'function',
+              name: 'customFunction',
+              arguments: [],
+            },
+            onCompleted: null,
+            onFailed: null,
+          },
+          v2Api: {
+            name: 'v2API',
+            type: 'http',
+            version: 2,
+            url: valueFormula('https://api.example.com'),
+            autoFetch: {
+              type: 'function',
+              name: 'otherFunction',
+              arguments: [],
+            },
+            client: {
+              parserMode: 'auto',
+              onCompleted: null,
+              onFailed: null,
+            },
+            inputs: {},
+          },
+        },
+        attributes: {},
+        nodes: {},
+        variables: {},
+        workflows: {},
+      },
+      getComponent: () => undefined,
+      packageName: undefined,
+      globalFormulas: { formulas: {}, packages: {} },
+    })
+    const formulas = Array.from(demo.formulasInComponent()).map(
+      ([, formula]) => formula,
+    )
+    expect(formulas).toContainEqual({
+      name: 'customFunction',
+      type: 'function',
+      arguments: [],
+    })
+    expect(formulas).toContainEqual({
+      name: 'otherFunction',
+      type: 'function',
+      arguments: [],
+    })
+  })
+  test('it returns global formulas', () => {
+    const demo = new ToddleComponent({
+      component: {
+        name: 'demo',
+        apis: {},
+        attributes: {},
+        nodes: {},
+        variables: {
+          x: {
+            initialValue: functionFormula('globalFunction'),
+          },
+        },
+        workflows: {},
+      },
+      getComponent: () => undefined,
+      packageName: undefined,
+      globalFormulas: {
+        formulas: {
+          globalFunction: {
+            name: 'globalFunction',
+            arguments: [],
+            formula: valueFormula(4),
+          },
+        },
+        packages: {},
+      },
+    })
+    const formulas = Array.from(demo.formulasInComponent()).map(
+      ([, formula]) => formula,
+    )
+    expect(formulas).toContainEqual({
+      name: 'globalFunction',
+      type: 'function',
+      arguments: [],
+    })
+  })
+  test('it returns global formulas that are referenced through global formulas', () => {
+    const demo = new ToddleComponent({
+      component: {
+        name: 'demo',
+        apis: {},
+        attributes: {},
+        nodes: {},
+        variables: {
+          x: {
+            initialValue: functionFormula('globalFunction'),
+          },
+        },
+        workflows: {},
+      },
+      getComponent: () => undefined,
+      packageName: undefined,
+      globalFormulas: {
+        formulas: {
+          globalFunction: {
+            name: 'globalFunction',
+            arguments: [],
+            formula: functionFormula('otherGlobalFunction'),
+          },
+          otherGlobalFunction: {
+            name: 'otherGlobalFunction',
+            arguments: [],
+            formula: valueFormula(4),
+          },
+        },
+        packages: {},
+      },
+    })
+    const formulas = Array.from(demo.formulasInComponent()).map(
+      ([, formula]) => formula,
+    )
+    expect(formulas).toContainEqual({
+      name: 'globalFunction',
+      type: 'function',
+      arguments: [],
+    })
+    expect(formulas).toContainEqual({
+      name: 'otherGlobalFunction',
+      type: 'function',
+      arguments: [],
+    })
+  })
+  test("it stops following function refs after they've been visited once (no infinite loops)", () => {
+    const demo = new ToddleComponent({
+      component: {
+        name: 'demo',
+        apis: {},
+        attributes: {},
+        nodes: {},
+        variables: {
+          x: {
+            initialValue: functionFormula('globalFunction'),
+          },
+        },
+        workflows: {},
+      },
+      getComponent: () => undefined,
+      packageName: undefined,
+      globalFormulas: {
+        formulas: {
+          globalFunction: {
+            name: 'globalFunction',
+            arguments: [],
+            formula: functionFormula('otherGlobalFunction'),
+          },
+          otherGlobalFunction: {
+            name: 'otherGlobalFunction',
+            arguments: [],
+            formula: functionFormula('globalFunction'),
+          },
+        },
+        packages: {},
+      },
+    })
+    const formulas = Array.from(demo.formulasInComponent()).map(
+      ([, formula]) => formula,
+    )
+    expect(formulas).toContainEqual({
+      name: 'globalFunction',
+      type: 'function',
+      arguments: [],
+    })
+    expect(formulas).toContainEqual({
+      name: 'otherGlobalFunction',
+      type: 'function',
+      arguments: [],
+    })
+  })
+})

package/src/component/ToddleComponent.ts

@@ -0,0 +1,470 @@
+import { isLegacyApi } from '../api/api'
+import { LegacyToddleApi } from '../api/LegacyToddleApi'
+import { ToddleApiV2 } from '../api/ToddleApiV2'
+import type { Formula, FunctionOperation } from '../formula/formula'
+import type { GlobalFormulas } from '../formula/formulaTypes'
+import {
+  getFormulasInAction,
+  getFormulasInFormula,
+} from '../formula/formulaUtils'
+import { isDefined } from '../utils/util'
+import { getActionsInAction } from './actionUtils'
+import type {
+  ActionModel,
+  Component,
+  CustomActionModel,
+  NodeModel,
+} from './component.types'
+import { isPageComponent } from './isPageComponent'
+
+export class ToddleComponent<Handler> {
+  private component: Component
+  private globalFormulas: GlobalFormulas<Handler>
+  private getComponent: (
+    name: string,
+    packageName?: string,
+  ) => Component | undefined
+  public packageName?: string
+
+  constructor({
+    component,
+    getComponent,
+    packageName,
+    globalFormulas,
+  }: {
+    component: Component
+    getComponent: (name: string, packageName?: string) => Component | undefined
+    packageName: string | undefined
+    globalFormulas: GlobalFormulas<Handler>
+  }) {
+    this.component = component
+    this.getComponent = getComponent
+    this.packageName = packageName
+    this.globalFormulas = globalFormulas
+  }
+
+  get uniqueSubComponents(): ToddleComponent<Handler>[] {
+    const components = new Map<string, ToddleComponent<Handler>>()
+
+    const visitNode = (packageName?: string) => (node: NodeModel) => {
+      if (node.type !== 'component') {
+        return
+      }
+      if (components.has(node.name)) {
+        return
+      }
+      const component = this.getComponent(
+        node.name,
+        node.package ?? packageName,
+      )
+      if (!component) {
+        return
+      }
+      components.set(
+        component.name,
+        new ToddleComponent({
+          component,
+          getComponent: this.getComponent,
+          packageName: node.package ?? packageName,
+          globalFormulas: this.globalFormulas,
+        }),
+      )
+      Object.values(component.nodes).forEach(
+        visitNode(node.package ?? packageName),
+      )
+    }
+    Object.values(this.nodes).forEach(visitNode())
+    return [...components.values()]
+  }
+
+  get formulaReferences() {
+    return new Set(
+      Array.from(this.formulasInComponent())
+        .filter(
+          (entry): entry is [(string | number)[], FunctionOperation] =>
+            entry[1].type === 'function',
+        )
+        .map(([, f]) => [f.package, f.name].filter(isDefined).join('/')),
+    )
+  }
+
+  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.
+   */
+  *formulasInComponent(): Generator<[(string | number)[], Formula]> {
+    const globalFormulas = this.globalFormulas
+    function* visitNode(
+      node: NodeModel,
+      path: (string | number)[] = [],
+    ): Generator<[(string | number)[], Formula]> {
+      switch (node.type) {
+        case 'text':
+          yield* getFormulasInFormula({
+            formula: node.condition,
+            globalFormulas,
+            path: [...path, 'condition'],
+          })
+          yield* getFormulasInFormula({
+            formula: node.repeat,
+            globalFormulas,
+            path: [...path, 'repeat'],
+          })
+          yield* getFormulasInFormula({
+            formula: node.repeatKey,
+            globalFormulas,
+            path: [...path, 'repeatKey'],
+          })
+          yield* getFormulasInFormula({
+            formula: node.value,
+            globalFormulas,
+            path: [...path, 'value'],
+          })
+          break
+        case 'slot':
+          yield* getFormulasInFormula({
+            formula: node.condition,
+            globalFormulas,
+            path: [...path, 'condition'],
+          })
+          break
+        case 'component':
+          yield* getFormulasInFormula({
+            formula: node.condition,
+            globalFormulas,
+            path: [...path, 'condition'],
+          })
+          yield* getFormulasInFormula({
+            formula: node.repeat,
+            globalFormulas,
+            path: [...path, 'repeat'],
+          })
+          yield* getFormulasInFormula({
+            formula: node.repeatKey,
+            globalFormulas,
+            path: [...path, 'repeatKey'],
+          })
+          for (const [attrKey, attr] of Object.entries(node.attrs ?? {})) {
+            yield* getFormulasInFormula({
+              formula: attr,
+              globalFormulas,
+              path: [...path, 'attrs', attrKey],
+            })
+          }
+          for (const [eventKey, event] of Object.entries(node.events ?? {})) {
+            for (const [actionKey, action] of Object.entries(
+              event?.actions ?? {},
+            )) {
+              yield* getFormulasInAction({
+                action,
+                globalFormulas,
+                path: [...path, 'events', eventKey, 'actions', actionKey],
+              })
+            }
+          }
+          break
+        case 'element':
+          yield* getFormulasInFormula({
+            formula: node.condition,
+            globalFormulas,
+            path: [...path, 'condition'],
+          })
+          yield* getFormulasInFormula({
+            formula: node.repeat,
+            globalFormulas,
+            path: [...path, 'repeat'],
+          })
+          yield* getFormulasInFormula({
+            formula: node.repeatKey,
+            globalFormulas,
+            path: [...path, 'repeatKey'],
+          })
+          for (const [attrKey, attr] of Object.entries(node.attrs ?? {})) {
+            yield* getFormulasInFormula({
+              formula: attr,
+              globalFormulas,
+              path: [...path, 'attrs', attrKey],
+            })
+          }
+          for (const [eventKey, event] of Object.entries(node.events ?? {})) {
+            for (const [actionKey, a] of Object.entries(event?.actions ?? {})) {
+              yield* getFormulasInAction({
+                action: a,
+                globalFormulas,
+                path: [...path, 'events', eventKey, 'actions', actionKey],
+              })
+            }
+          }
+          for (const [classKey, c] of Object.entries(node.classes ?? {})) {
+            yield* getFormulasInFormula({
+              formula: c.formula,
+              globalFormulas,
+              path: [...path, 'classes', classKey, 'formula'],
+            })
+          }
+
+          for (const [styleVariableKey, styleVariable] of Object.entries(
+            node['style-variables'] ?? {},
+          )) {
+            yield* getFormulasInFormula({
+              formula: styleVariable.formula,
+              globalFormulas,
+              path: [...path, 'style-variables', styleVariableKey, 'formula'],
+            })
+          }
+          break
+      }
+    }
+
+    yield* getFormulasInFormula({
+      formula: this.route?.info?.language?.formula,
+      globalFormulas,
+      path: ['route', 'info', 'language', 'formula'],
+    })
+    yield* getFormulasInFormula({
+      formula: this.route?.info?.title?.formula,
+      globalFormulas,
+      path: ['route', 'info', 'title', 'formula'],
+    })
+    yield* getFormulasInFormula({
+      formula: this.route?.info?.description?.formula,
+      globalFormulas,
+      path: ['route', 'info', 'description', 'formula'],
+    })
+    yield* getFormulasInFormula({
+      formula: this.route?.info?.icon?.formula,
+      globalFormulas,
+      path: ['route', 'info', 'icon', 'formula'],
+    })
+    yield* getFormulasInFormula({
+      formula: this.route?.info?.charset?.formula,
+      globalFormulas,
+      path: ['route', 'info', 'charset', 'formula'],
+    })
+    for (const [metaKey, meta] of Object.entries(
+      this.route?.info?.meta ?? {},
+    )) {
+      yield* getFormulasInFormula({
+        formula: meta.content,
+        globalFormulas,
+        path: ['route', 'info', 'meta', metaKey, 'content'],
+      })
+      for (const [attrKey, a] of Object.entries(meta.attrs)) {
+        yield* getFormulasInFormula({
+          formula: a,
+          globalFormulas,
+          path: ['route', 'info', 'meta', metaKey, 'attrs', attrKey],
+        })
+      }
+    }
+    for (const [formulaKey, formula] of Object.entries(this.formulas ?? {})) {
+      yield* getFormulasInFormula({
+        formula: formula.formula,
+        globalFormulas,
+        path: ['formulas', formulaKey, 'formula'],
+      })
+    }
+    for (const [variableKey, variable] of Object.entries(
+      this.variables ?? {},
+    )) {
+      yield* getFormulasInFormula({
+        formula: variable.initialValue,
+        globalFormulas,
+        path: ['variables', variableKey, 'initialValue'],
+      })
+    }
+    for (const [workflowKey, workflow] of Object.entries(
+      this.workflows ?? {},
+    )) {
+      for (const [actionKey, action] of workflow.actions.entries()) {
+        yield* getFormulasInAction({
+          action,
+          globalFormulas,
+          path: ['workflows', workflowKey, 'actions', actionKey],
+        })
+      }
+    }
+    for (const [, api] of Object.entries(this.apis)) {
+      yield* api.formulasInApi()
+    }
+    for (const [actionKey, action] of Object.entries(
+      this.component.onLoad?.actions ?? {},
+    )) {
+      yield* getFormulasInAction({
+        action,
+        globalFormulas,
+        path: ['onLoad', 'actions', actionKey],
+      })
+    }
+    for (const [actionKey, action] of Object.entries(
+      this.component.onAttributeChange?.actions ?? {},
+    )) {
+      yield* getFormulasInAction({
+        action,
+        globalFormulas,
+        path: ['onAttributeChange', 'actions', actionKey],
+      })
+    }
+    for (const [nodeKey, node] of Object.entries(this.nodes ?? {})) {
+      yield* visitNode(node, ['nodes', nodeKey])
+    }
+  }
+
+  /**
+   * Traverse all actions in the component.
+   * @returns An iterable that yields the path and action.
+   */
+  *actionModelsInComponent(): Generator<[(string | number)[], ActionModel]> {
+    function* visitNode(
+      node: NodeModel,
+      path: (string | number)[] = [],
+    ): Generator<[(string | number)[], ActionModel]> {
+      switch (node.type) {
+        case 'text':
+        case 'slot':
+          break
+        case 'component':
+        case 'element':
+          for (const [eventKey, event] of Object.entries(node.events ?? {})) {
+            for (const [actionKey, a] of Object.entries(event?.actions ?? {})) {
+              yield* getActionsInAction(a, [
+                ...path,
+                'events',
+                eventKey,
+                'actions',
+                actionKey,
+              ])
+            }
+          }
+          break
+      }
+    }
+
+    for (const [workflowKey, workflow] of Object.entries(
+      this.workflows ?? {},
+    )) {
+      for (const [key, a] of Object.entries(workflow?.actions ?? {})) {
+        yield* getActionsInAction(a, ['workflows', workflowKey, 'actions', key])
+      }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    for (const [apiKey, api] of Object.entries(this.apis ?? {})) {
+      if (!isLegacyApi(api)) {
+        yield* api.actionModelsInApi()
+        continue
+      }
+
+      // Legacy API
+      for (const [actionKey, a] of Object.entries(
+        api.onCompleted?.actions ?? {},
+      )) {
+        yield* getActionsInAction(a, [
+          'apis',
+          apiKey,
+          'onCompleted',
+          'actions',
+          actionKey,
+        ])
+      }
+      for (const [actionKey, a] of Object.entries(
+        api.onFailed?.actions ?? {},
+      )) {
+        yield* getActionsInAction(a, [
+          'apis',
+          apiKey,
+          'onFailed',
+          'actions',
+          actionKey,
+        ])
+      }
+    }
+    for (const [actionKey, action] of Object.entries(
+      this.component.onLoad?.actions ?? {},
+    )) {
+      yield* getActionsInAction(action, ['onLoad', 'actions', actionKey])
+    }
+    for (const [actionKey, action] of Object.entries(
+      this.component.onAttributeChange?.actions ?? {},
+    )) {
+      yield* getActionsInAction(action, [
+        'onAttributeChange',
+        'actions',
+        actionKey,
+      ])
+    }
+    for (const [nodeKey, node] of Object.entries(this.nodes ?? {})) {
+      yield* visitNode(node, ['nodes', nodeKey])
+    }
+  }
+
+  get formulas() {
+    return this.component.formulas
+  }
+
+  get name() {
+    return this.component.name
+  }
+
+  get route() {
+    return this.component.route
+  }
+
+  get attributes() {
+    return this.component.attributes
+  }
+
+  get variables() {
+    return this.component.variables
+  }
+
+  get workflows() {
+    return this.component.workflows
+  }
+
+  get apis() {
+    return Object.fromEntries(
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      Object.entries(this.component.apis ?? {}).map(([key, api]) => [
+        key,
+        isLegacyApi(api)
+          ? new LegacyToddleApi(api, key, this.globalFormulas)
+          : new ToddleApiV2(api, key, this.globalFormulas),
+      ]),
+    )
+  }
+
+  get nodes() {
+    return this.component.nodes
+  }
+
+  get events() {
+    return this.component.events
+  }
+
+  get onLoad() {
+    return this.component.onLoad
+  }
+
+  get onAttributeChange() {
+    return this.component.onAttributeChange
+  }
+
+  get isPage() {
+    return isPageComponent(this.component)
+  }
+
+  get contexts() {
+    return this.component.contexts
+  }
+}