@nordcraft/search 1.0.39 → 1.0.41

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

@@ -1,8 +1,14 @@
+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('legacyAction', () => {
+describe('find legacyActions', () => {
   test('should detect legacy actions used in components', () => {
     const problems = Array.from(
       searchProject({
@@ -90,3 +96,312 @@ describe('legacyAction', () => {
     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",
+                },
+              ],
+              "name": "@toddle/getElementById",
+              "type": "function",
+            },
+            "name": "Element",
+          },
+        ],
+        "label": "Focus",
+        "name": "@toddle/focus",
+      }
+    `)
+  })
+})

package/src/rules/actions/legacyActionRule.ts

@@ -1,5 +1,11 @@
+import type {
+  ActionModel,
+  CustomActionArgument,
+} 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 { Rule } from '../../types'
-import { isLegacyAction } from '../../util/helpers'
+import { isLegacyAction, renameArguments } from '../../util/helpers'
 
 export const legacyActionRule: Rule<{
   name: string
@@ -11,7 +17,6 @@ export const legacyActionRule: Rule<{
     if (nodeType !== 'action-model') {
       return
     }
-
     if (isLegacyAction(value)) {
       let details: { name: string } | undefined
       if ('name' in value) {
@@ -19,8 +24,190 @@ export const legacyActionRule: Rule<{
           name: value.name,
         }
       }
-
-      report(path, details)
+      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': ({ path, value, nodeType, files }) => {
+      if (nodeType !== 'action-model') {
+        return
+      }
+      if (!isLegacyAction(value)) {
+        return
+      }
+
+      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: renameArguments(
+              { 'Delay in ms': 'Delay in milliseconds' },
+              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',
+                  arguments: [
+                    {
+                      name: 'Id',
+                      formula:
+                        value.arguments?.[0]?.formula ?? valueFormula(null),
+                    },
+                  ],
+                },
+              },
+            ],
+            label: 'Focus',
+          }
+        }
+      }
+      if (newAction) {
+        return set(files, path, newAction)
+      }
+    },
+  },
 }
+
+// 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'

package/src/rules/formulas/legacyFormulaRule.ts

@@ -1,7 +1,6 @@
 import type {
   AndOperation,
   ArrayOperation,
-  FunctionArgument,
   FunctionOperation,
   OrOperation,
   SwitchOperation,
@@ -11,6 +10,11 @@ import { omitKeys, set } from '@nordcraft/core/dist/utils/collections'
 import { isDefined } from '@nordcraft/core/dist/utils/util'
 import type { ProjectFiles } from '@nordcraft/ssr/dist/ssr.types'
 import type { FormulaNode, NodeType, Rule } from '../../types'
+import {
+  ARRAY_ARGUMENT_MAPPINGS,
+  PREDICATE_ARGUMENT_MAPPINGS,
+  renameArguments,
+} from '../../util/helpers'
 
 export const legacyFormulaRule: Rule<{
   name: string
@@ -25,8 +29,10 @@ export const legacyFormulaRule: Rule<{
     report(
       data.path,
       { name: data.value.name },
-      // The TYPE formula cannot be autofixed since the types have changed between the 2 implementations
-      data.value.name !== 'TYPE' ? ['replace-legacy-formula'] : undefined,
+      // The TYPE and BOOLEAN formulas cannot be autofixed since the logic has changed between the 2 implementations
+      data.value.name !== 'TYPE' && data.value.name !== 'BOOLEAN'
+        ? ['replace-legacy-formula']
+        : undefined,
     )
   },
   fixes: {
@@ -372,14 +378,6 @@ export const legacyFormulaRule: Rule<{
           }
           return set(data.files, data.path, newAppendFormula)
         }
-        case 'BOOLEAN': {
-          const newBooleanFormula: FunctionOperation = {
-            ...data.value,
-            name: '@toddle/boolean',
-            display_name: 'Boolean',
-          }
-          return set(data.files, data.path, newBooleanFormula)
-        }
         case 'CLAMP': {
           const newClampFormula: FunctionOperation = {
             ...data.value,
@@ -845,23 +843,3 @@ const builtInFormulas = new Set([
   'uppercase',
 ])
 // cSpell: enable
-
-const ARRAY_ARGUMENT_MAPPINGS = { List: 'Array' }
-const PREDICATE_ARGUMENT_MAPPINGS = {
-  ...ARRAY_ARGUMENT_MAPPINGS,
-  'Predicate fx': 'Formula',
-}
-
-const renameArguments = (
-  mappings: Record<string, string>,
-  args: FunctionArgument[] | undefined,
-): FunctionArgument[] =>
-  args?.map((arg) => ({
-    ...arg,
-    // Let's adjust the names
-    name:
-      typeof arg.name === 'string'
-        ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          (mappings[arg.name] ?? arg.name)
-        : arg.name,
-  })) ?? []

package/src/rules/formulas/noReferenceProjectFormulaRule.test.ts

@@ -1,8 +1,10 @@
+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 { noReferenceProjectFormulaRule } from './noReferenceProjectFormulaRule'
 
-describe('noReferenceFormulaRule', () => {
+describe('find noReferenceFormulaRule', () => {
   test('should detect unused global formulas', () => {
     const problems = Array.from(
       searchProject({
@@ -289,3 +291,36 @@ describe('noReferenceFormulaRule', () => {
     expect(problems).toHaveLength(0)
   })
 })
+
+describe('fix noReferenceFormulaRule', () => {
+  test('should remove unused global formulas', () => {
+    const projectFiles: ProjectFiles = {
+      formulas: {
+        'my-formula': {
+          name: 'my-formula',
+          arguments: [],
+          formula: {
+            type: 'value',
+            value: 'value',
+          },
+        },
+      },
+      components: {
+        test: {
+          name: 'test',
+          nodes: {},
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {},
+        },
+      },
+    }
+    const fixedProject = fixProject({
+      files: projectFiles,
+      rule: noReferenceProjectFormulaRule,
+      fixType: 'delete-project-formula',
+    })
+    expect(fixedProject.formulas).toEqual({})
+  })
+})