@nordcraft/search 1.0.53 → 1.0.55

package/src/rules/issues/actions/legacyActionRule.fix.ts

@@ -0,0 +1,159 @@
+import type {
+  ActionModel,
+  CustomActionArgument,
+  CustomActionModel,
+} from '@nordcraft/core/dist/component/component.types'
+import { valueFormula } from '@nordcraft/core/dist/formula/formulaUtils'
+import { set } from '@nordcraft/core/dist/utils/collections'
+import type { ActionModelNode, FixFunction } from '../../../types'
+import { renameArguments } from '../../../util/helpers'
+
+export const replaceLegacyAction: FixFunction<
+  ActionModelNode<CustomActionModel>
+> = ({ path, value, files }) => {
+  let newAction: ActionModel | undefined
+  switch (value.name) {
+    case 'If': {
+      const trueActions = value.events?.['true']?.actions ?? []
+      const falseActions = value.events?.['false']?.actions ?? []
+      const trueCondition: CustomActionArgument | undefined =
+        (value.arguments ?? [])[0]
+      newAction = {
+        type: 'Switch',
+        cases: [
+          {
+            condition: trueCondition?.formula ?? null,
+            actions: trueActions,
+          },
+        ],
+        default: { actions: falseActions },
+      }
+      break
+    }
+    case 'PreventDefault': {
+      newAction = {
+        name: '@toddle/preventDefault',
+        arguments: [],
+        label: 'Prevent default',
+      }
+      break
+    }
+    case 'StopPropagation': {
+      newAction = {
+        name: '@toddle/stopPropagation',
+        arguments: [],
+        label: 'Stop propagation',
+      }
+      break
+    }
+    case 'UpdateVariable':
+    case 'Update Variable': {
+      const variableName =
+        value.arguments?.[0]?.formula?.type === 'value'
+          ? value.arguments[0].formula.value
+          : undefined
+      if (typeof variableName !== 'string') {
+        break
+      }
+      const variableValue = value.arguments?.[1]?.formula
+      if (!variableValue) {
+        break
+      }
+      newAction = {
+        type: 'SetVariable',
+        variable: variableName,
+        data: variableValue,
+      }
+      break
+    }
+    case 'SetTimeout': {
+      newAction = {
+        ...value,
+        name: '@toddle/sleep',
+        arguments: value.arguments
+          ? renameArguments(
+              { 'Delay in ms': 'Delay in milliseconds' },
+              value.arguments,
+            )
+          : value.arguments,
+        events: value.events?.['timeout']
+          ? { tick: value.events.timeout }
+          : undefined,
+        label: 'Sleep',
+      }
+      break
+    }
+    case 'SetInterval': {
+      newAction = {
+        ...value,
+        name: '@toddle/interval',
+        arguments: renameArguments(
+          { 'Interval in ms': 'Interval in milliseconds' },
+          value.arguments,
+        ),
+        label: 'Interval',
+      }
+      break
+    }
+    case 'Debug': {
+      newAction = {
+        ...value,
+        name: '@toddle/logToConsole',
+        label: 'Log to console',
+      }
+      break
+    }
+    case 'GoToURL': {
+      newAction = {
+        name: '@toddle/gotToURL', // Yes, the typo is in the action name
+        arguments: renameArguments({ url: 'URL' }, value.arguments),
+        label: 'Go to URL',
+      }
+      break
+    }
+    case 'TriggerEvent': {
+      const eventName =
+        value.arguments?.[0]?.formula?.type === 'value'
+          ? value.arguments[0].formula.value
+          : undefined
+      if (typeof eventName !== 'string') {
+        break
+      }
+      const eventData = value.arguments?.[1]?.formula
+      if (!eventData) {
+        break
+      }
+      newAction = {
+        type: 'TriggerEvent',
+        event: eventName,
+        data: eventData,
+      }
+      break
+    }
+    case 'FocusElement': {
+      newAction = {
+        name: '@toddle/focus',
+        arguments: [
+          {
+            name: 'Element',
+            formula: {
+              type: 'function',
+              name: '@toddle/getElementById',
+              display_name: 'Get element by id',
+              arguments: [
+                {
+                  name: 'Id',
+                  formula: value.arguments?.[0]?.formula ?? valueFormula(null),
+                },
+              ],
+            },
+          },
+        ],
+        label: 'Focus',
+      }
+    }
+  }
+  if (newAction) {
+    return set(files, path, newAction)
+  }
+}

package/src/rules/issues/actions/legacyActionRule.test.ts

@@ -0,0 +1,408 @@
+import type {
+  ActionModel,
+  ElementNodeModel,
+} from '@nordcraft/core/dist/component/component.types'
+import type { ProjectFiles } from '@nordcraft/ssr/dist/ssr.types'
+import { describe, expect, test } from 'bun:test'
+import { fixProject } from '../../../fixProject'
+import { searchProject } from '../../../searchProject'
+import { legacyActionRule } from './legacyActionRule'
+
+describe('find legacyActions', () => {
+  test('should detect legacy actions used in components', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            apiComponent: {
+              name: 'test',
+              nodes: {},
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+              onLoad: {
+                trigger: 'Load',
+                actions: [
+                  {
+                    name: 'If',
+                    events: {
+                      true: {
+                        actions: [],
+                      },
+                      false: {
+                        actions: [],
+                      },
+                    },
+                    arguments: [
+                      {
+                        name: 'Condition',
+                        formula: {
+                          type: 'value',
+                          value: true,
+                        },
+                      },
+                    ],
+                  },
+                ],
+              },
+            },
+          },
+        },
+        rules: [legacyActionRule],
+      }),
+    )
+    expect(problems).toHaveLength(1)
+    expect(problems[0].path).toEqual([
+      'components',
+      'apiComponent',
+      'onLoad',
+      'actions',
+      '0',
+    ])
+  })
+  test('should not detect non-legacy actions used in components', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            apiComponent: {
+              name: 'test',
+              nodes: {},
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+              onLoad: {
+                trigger: 'Load',
+                actions: [
+                  {
+                    type: 'Fetch',
+                    api: 'my-api',
+                    inputs: {},
+                    onSuccess: { actions: [] },
+                    onError: { actions: [] },
+                  },
+                ],
+              },
+            },
+          },
+        },
+        rules: [legacyActionRule],
+      }),
+    )
+    expect(problems).toHaveLength(0)
+  })
+})
+
+describe('fix legacyActions', () => {
+  test('should replace the If action with a Switch action', () => {
+    const legacyIfAction: ActionModel = {
+      name: 'If',
+      events: {
+        true: {
+          actions: [
+            {
+              name: '@toddle/logToConsole',
+              arguments: [
+                {
+                  name: 'Label',
+                  description: 'A label for the message.',
+                  formula: { type: 'value', value: '' },
+                },
+                {
+                  name: 'Data',
+                  type: { type: 'Any' },
+                  description: 'The data you want to log to the console.',
+                  formula: {
+                    type: 'value',
+                    value: '<Data>',
+                  },
+                },
+              ],
+              label: 'Log to console',
+              group: 'debugging',
+              description: 'Log a message to the browser console.',
+            },
+          ],
+        },
+        false: {
+          actions: [
+            {
+              name: '@toddle/logToConsole',
+              arguments: [
+                {
+                  name: 'Label',
+                  description: 'A label for the message.',
+                  formula: { type: 'value', value: '' },
+                },
+                {
+                  name: 'Data',
+                  type: { type: 'Any' },
+                  description: 'The data you want to log to the console.',
+                  formula: {
+                    type: 'value',
+                    value: '<Data>',
+                  },
+                },
+              ],
+              label: 'Log to console',
+              group: 'debugging',
+              description: 'Log a message to the browser console.',
+            },
+          ],
+        },
+      },
+      arguments: [
+        {
+          name: 'Condition',
+          formula: { type: 'value', value: true },
+        },
+      ],
+    }
+    const projectFiles: ProjectFiles = {
+      formulas: {},
+      components: {
+        apiComponent: {
+          name: 'test',
+          nodes: {
+            root: {
+              tag: 'p',
+              type: 'element',
+              attrs: {},
+              style: {},
+              events: {
+                click: {
+                  trigger: 'click',
+                  actions: [legacyIfAction],
+                },
+              },
+              classes: {},
+              children: [],
+            },
+          },
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {},
+        },
+      },
+    }
+    const fixedProject = fixProject({
+      files: projectFiles,
+      rule: legacyActionRule,
+      fixType: 'replace-legacy-action',
+    })
+    const fixedAction = (
+      fixedProject.components['apiComponent']?.nodes['root'] as ElementNodeModel
+    ).events['click']?.actions[0]
+    expect(fixedAction).toMatchInlineSnapshot(`
+      {
+        "cases": [
+          {
+            "actions": [
+              {
+                "arguments": [
+                  {
+                    "description": "A label for the message.",
+                    "formula": {
+                      "type": "value",
+                      "value": "",
+                    },
+                    "name": "Label",
+                  },
+                  {
+                    "description": "The data you want to log to the console.",
+                    "formula": {
+                      "type": "value",
+                      "value": "<Data>",
+                    },
+                    "name": "Data",
+                    "type": {
+                      "type": "Any",
+                    },
+                  },
+                ],
+                "description": "Log a message to the browser console.",
+                "group": "debugging",
+                "label": "Log to console",
+                "name": "@toddle/logToConsole",
+              },
+            ],
+            "condition": {
+              "type": "value",
+              "value": true,
+            },
+          },
+        ],
+        "default": {
+          "actions": [
+            {
+              "arguments": [
+                {
+                  "description": "A label for the message.",
+                  "formula": {
+                    "type": "value",
+                    "value": "",
+                  },
+                  "name": "Label",
+                },
+                {
+                  "description": "The data you want to log to the console.",
+                  "formula": {
+                    "type": "value",
+                    "value": "<Data>",
+                  },
+                  "name": "Data",
+                  "type": {
+                    "type": "Any",
+                  },
+                },
+              ],
+              "description": "Log a message to the browser console.",
+              "group": "debugging",
+              "label": "Log to console",
+              "name": "@toddle/logToConsole",
+            },
+          ],
+        },
+        "type": "Switch",
+      }
+    `)
+  })
+  test('should replace the TriggerEvent action with the builtin action', () => {
+    const legacyAction: ActionModel = {
+      name: 'TriggerEvent',
+      arguments: [
+        {
+          name: 'name',
+          formula: { type: 'value', value: 'sdfsdf' },
+        },
+        {
+          name: 'data',
+          formula: { type: 'value', value: 'test' },
+        },
+      ],
+    }
+    const projectFiles: ProjectFiles = {
+      formulas: {},
+      components: {
+        apiComponent: {
+          name: 'test',
+          nodes: {
+            root: {
+              tag: 'p',
+              type: 'element',
+              attrs: {},
+              style: {},
+              events: {
+                click: {
+                  trigger: 'click',
+                  actions: [legacyAction],
+                },
+              },
+              classes: {},
+              children: [],
+            },
+          },
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {},
+        },
+      },
+    }
+    const fixedProject = fixProject({
+      files: projectFiles,
+      rule: legacyActionRule,
+      fixType: 'replace-legacy-action',
+    })
+    const fixedAction = (
+      fixedProject.components['apiComponent']?.nodes['root'] as ElementNodeModel
+    ).events['click']?.actions[0]
+    expect(fixedAction).toMatchInlineSnapshot(`
+      {
+        "data": {
+          "type": "value",
+          "value": "test",
+        },
+        "event": "sdfsdf",
+        "type": "TriggerEvent",
+      }
+    `)
+  })
+  test('should replace the TriggerEvent action with the builtin action', () => {
+    const legacyAction: ActionModel = {
+      name: 'FocusElement',
+      arguments: [
+        {
+          name: 'elementId',
+          formula: { type: 'value', value: 'my-id' },
+        },
+      ],
+    }
+    const projectFiles: ProjectFiles = {
+      formulas: {},
+      components: {
+        apiComponent: {
+          name: 'test',
+          nodes: {
+            root: {
+              tag: 'p',
+              type: 'element',
+              attrs: {},
+              style: {},
+              events: {
+                click: {
+                  trigger: 'click',
+                  actions: [legacyAction],
+                },
+              },
+              classes: {},
+              children: [],
+            },
+          },
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {},
+        },
+      },
+    }
+    const fixedProject = fixProject({
+      files: projectFiles,
+      rule: legacyActionRule,
+      fixType: 'replace-legacy-action',
+    })
+    const fixedAction = (
+      fixedProject.components['apiComponent']?.nodes['root'] as ElementNodeModel
+    ).events['click']?.actions[0]
+    expect(fixedAction).toMatchInlineSnapshot(`
+      {
+        "arguments": [
+          {
+            "formula": {
+              "arguments": [
+                {
+                  "formula": {
+                    "type": "value",
+                    "value": "my-id",
+                  },
+                  "name": "Id",
+                },
+              ],
+              "display_name": "Get element by id",
+              "name": "@toddle/getElementById",
+              "type": "function",
+            },
+            "name": "Element",
+          },
+        ],
+        "label": "Focus",
+        "name": "@toddle/focus",
+      }
+    `)
+  })
+})

package/src/rules/issues/actions/legacyActionRule.ts

@@ -0,0 +1,57 @@
+import type { Rule } from '../../../types'
+import { isLegacyAction } from '../../../util/helpers'
+import { replaceLegacyAction } from './legacyActionRule.fix'
+
+export const legacyActionRule: Rule<{
+  name: string
+}> = {
+  code: 'legacy action',
+  level: 'warning',
+  category: 'Deprecation',
+  visit: (report, { path, value, nodeType }) => {
+    if (nodeType !== 'action-model') {
+      return
+    }
+    if (isLegacyAction(value)) {
+      let details: { name: string } | undefined
+      if ('name' in value) {
+        details = {
+          name: value.name,
+        }
+      }
+      report(
+        path,
+        details,
+        unfixableLegacyActions.has(value.name)
+          ? undefined
+          : !formulaNamedActions.includes(value.name) ||
+              // Check if the first argument is a value formula with a string value
+              (value.arguments?.[0]?.formula?.type === 'value' &&
+                typeof value.arguments[0].formula.value === 'string')
+            ? ['replace-legacy-action']
+            : undefined,
+      )
+    }
+  },
+  fixes: {
+    'replace-legacy-action': replaceLegacyAction,
+  },
+}
+
+// These actions take a first argument which is a formula as the name
+// of the thing to update/trigger. We can only safely autofix these if
+// the argument is a value operation and a string
+const formulaNamedActions = [
+  'UpdateVariable',
+  'Update Variable',
+  'TriggerEvent',
+]
+
+const unfixableLegacyActions = new Set([
+  'CopyToClipboard', // Previously, this action would JSON stringify non-string inputs
+  'Update URL parameter', // The user will need to pick a history mode (push/replace)
+  'Fetch', // This was mainly used for APIs v1
+  '@toddle/setSessionCookies', // The new 'Set cookie' action takes more arguments
+])
+
+export type LegacyActionRuleFix = 'replace-legacy-action'