@nordcraft/search 1.0.53 → 1.0.54

package/src/rules/issues/dom/imageWithoutDimensionRule.ts

@@ -0,0 +1,50 @@
+import { isDefined } from '@nordcraft/core/dist/utils/util'
+import type { Rule } from '../../../types'
+
+/**
+ * Lighthouse reports a similar issue:
+ * https://web.dev/articles/optimize-cls?utm_source=lighthouse&utm_medium=devtools#images_without_dimensions
+ */
+export const imageWithoutDimensionRule: Rule = {
+  code: 'image without dimension',
+  level: 'warning',
+  category: 'Performance',
+  visit: (report, { path, nodeType, value }) => {
+    if (
+      nodeType !== 'component-node' ||
+      value.type !== 'element' ||
+      !['img', 'source'].includes(value.tag)
+    ) {
+      return
+    }
+
+    // Aspect ratio can be calculated from width and height attributes
+    if (isDefined(value.attrs.width) && isDefined(value.attrs.height)) {
+      return
+    }
+
+    if (
+      [
+        value.style,
+        // We don't know the circumstances under which the style is applied, so we assume it is Okay if just one of the variants has correct style
+        ...(value.variants?.map((variant) => variant.style) ?? []),
+      ].some((style) => {
+        // Aspect ratio is not required if width and height are fixed
+        if (isDefined(style.width) && isDefined(style.height)) {
+          return true
+        }
+
+        // Aspect ratio is set explicitly
+        if (isDefined(style['aspect-ratio'])) {
+          return true
+        }
+
+        return false
+      })
+    ) {
+      return
+    }
+
+    report(path)
+  },
+}

package/src/rules/issues/dom/nonEmptyVoidElementRule.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, test } from 'bun:test'
+import { searchProject } from '../../../searchProject'
+import { nonEmptyVoidElementRule } from './nonEmptyVoidElementRule'
+
+describe('voidElementRule', () => {
+  test('should detect void elements with children', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'img',
+                  children: ['other'],
+                  style: {},
+                },
+                other: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'p',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [nonEmptyVoidElementRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('non-empty void element')
+    expect(problems[0].details).toEqual({ tag: 'img' })
+    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
+  })
+
+  test('should not detect void elements with no children', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'input',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [nonEmptyVoidElementRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(0)
+  })
+})

package/src/rules/issues/dom/nonEmptyVoidElementRule.ts

@@ -0,0 +1,22 @@
+import { VOID_HTML_ELEMENTS } from '@nordcraft/ssr/dist/const'
+import type { Rule } from '../../../types'
+/**
+ * See full list here
+ * https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+ */
+export const nonEmptyVoidElementRule: Rule<{ tag: string }> = {
+  code: 'non-empty void element',
+  level: 'warning',
+  category: 'Quality',
+  visit: (report, { path, nodeType, value }) => {
+    if (
+      nodeType !== 'component-node' ||
+      value.type !== 'element' ||
+      value.children.length <= 0 ||
+      !VOID_HTML_ELEMENTS.includes(value.tag)
+    ) {
+      return
+    }
+    report(path, { tag: value.tag })
+  },
+}

package/src/rules/issues/events/duplicateEventTriggerRule.test.ts

@@ -0,0 +1,98 @@
+import { describe, expect, test } from 'bun:test'
+import { searchProject } from '../../../searchProject'
+import { duplicateEventTriggerRule } from './duplicateEventTriggerRule'
+
+describe('duplicateEventTriggerRule', () => {
+  test('should detect duplicate event triggers', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                n1: {
+                  type: 'element',
+                  tag: 'button',
+                  events: {
+                    click: {
+                      trigger: 'click',
+                      actions: [],
+                    },
+                    otherEvent: {
+                      trigger: 'click',
+                      actions: [],
+                    },
+                  },
+                  attrs: {},
+                  style: {},
+                  children: [],
+                  classes: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [duplicateEventTriggerRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('duplicate event trigger')
+    expect(problems[0].details).toEqual({ trigger: 'click' })
+    expect(problems[0].path).toEqual([
+      'components',
+      'test',
+      'nodes',
+      'n1',
+      'events',
+      'otherEvent',
+    ])
+  })
+  test('should not detect events that do not have duplicate triggers', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                n1: {
+                  type: 'element',
+                  tag: 'button',
+                  events: {
+                    click: {
+                      trigger: 'click',
+                      actions: [],
+                    },
+                    otherEvent: {
+                      trigger: 'mouseenter',
+                      actions: [],
+                    },
+                  },
+                  attrs: {},
+                  style: {},
+                  children: [],
+                  classes: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [duplicateEventTriggerRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(0)
+  })
+})

package/src/rules/issues/events/duplicateEventTriggerRule.ts

@@ -0,0 +1,24 @@
+import type { Rule } from '../../../types'
+
+export const duplicateEventTriggerRule: Rule<{ trigger: string }> = {
+  code: 'duplicate event trigger',
+  level: 'warning',
+  category: 'Quality',
+  visit: (report, { nodeType, path, value }) => {
+    if (nodeType !== 'component-node' || value.type !== 'element') {
+      return
+    }
+    const eventTriggers = new Set<string>()
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    Object.entries(value.events ?? {}).forEach(([key, event]) => {
+      if (typeof event?.trigger !== 'string') {
+        return
+      }
+      if (eventTriggers.has(event.trigger)) {
+        report([...path, 'events', key], { trigger: event.trigger })
+      }
+      eventTriggers.add(event.trigger)
+    })
+  },
+}

package/src/rules/issues/events/eventRules.index.ts

@@ -0,0 +1,11 @@
+import { duplicateEventTriggerRule } from './duplicateEventTriggerRule'
+import { noReferenceEventRule } from './noReferenceEventRule'
+import { unknownEventRule } from './unknownEventRule'
+import { unknownTriggerEventRule } from './unknownTriggerEventRule'
+
+export default [
+  duplicateEventTriggerRule,
+  noReferenceEventRule,
+  unknownEventRule,
+  unknownTriggerEventRule,
+]

package/src/rules/issues/events/noReferenceEventRule.test.ts

@@ -0,0 +1,206 @@
+import { valueFormula } from '@nordcraft/core/dist/formula/formulaUtils'
+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 { noReferenceEventRule } from './noReferenceEventRule'
+
+describe('find noReferenceEventRule', () => {
+  test('should detect events with no references', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {
+                    click: {
+                      trigger: 'click',
+                      actions: [
+                        {
+                          type: 'TriggerEvent',
+                          event: 'unknown-event',
+                          data: valueFormula(null),
+                        },
+                      ],
+                    },
+                  },
+                  tag: 'div',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+              events: [
+                {
+                  name: 'unused-event',
+                  // eslint-disable-next-line inclusive-language/use-inclusive-words
+                  dummyEvent: {
+                    name: 'Name',
+                  },
+                  '@nordcraft/metadata': {
+                    comments: null,
+                  },
+                },
+              ],
+            },
+          },
+        },
+        rules: [noReferenceEventRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('no-reference event')
+    expect(problems[0].path).toEqual(['components', 'test', 'events', 0])
+    expect(problems[0].details).toEqual({ name: 'unused-event' })
+  })
+
+  test('should not detect events with references', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {
+                    click: {
+                      trigger: 'click',
+                      actions: [
+                        {
+                          type: 'TriggerEvent',
+                          event: 'known-event',
+                          data: valueFormula(null),
+                        },
+                        {
+                          name: 'TriggerEvent',
+                          events: {},
+                          arguments: [
+                            {
+                              name: 'name',
+                              formula: {
+                                type: 'value',
+                                value: 'used-event',
+                              },
+                            },
+                            {
+                              name: 'data',
+                              formula: {
+                                type: 'value',
+                                value: 'TestValue',
+                              },
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  },
+                  tag: 'div',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+              events: [
+                {
+                  name: 'known-event',
+                  // eslint-disable-next-line inclusive-language/use-inclusive-words
+                  dummyEvent: {
+                    name: 'Name',
+                  },
+                  '@nordcraft/metadata': {
+                    comments: null,
+                  },
+                },
+                {
+                  name: 'used-event',
+                  // eslint-disable-next-line inclusive-language/use-inclusive-words
+                  dummyEvent: {
+                    name: 'Name',
+                  },
+                  '@nordcraft/metadata': {
+                    comments: null,
+                  },
+                },
+              ],
+            },
+          },
+        },
+        rules: [noReferenceEventRule],
+      }),
+    )
+    expect(problems).toEqual([])
+  })
+})
+
+describe('fix noReferenceEventRule', () => {
+  test('should remove events with no references', () => {
+    const files: ProjectFiles = {
+      components: {
+        test: {
+          name: 'test',
+          nodes: {
+            root: {
+              type: 'element',
+              attrs: {},
+              classes: {},
+              events: {
+                click: {
+                  trigger: 'click',
+                  actions: [
+                    {
+                      type: 'TriggerEvent',
+                      event: 'unknown-event',
+                      data: valueFormula(null),
+                    },
+                  ],
+                },
+              },
+              tag: 'div',
+              children: [],
+              style: {},
+            },
+          },
+          formulas: {},
+          apis: {},
+          attributes: {},
+          variables: {},
+          events: [
+            {
+              name: 'unused-event',
+              // eslint-disable-next-line inclusive-language/use-inclusive-words
+              dummyEvent: {
+                name: 'Name',
+              },
+              '@nordcraft/metadata': {
+                comments: null,
+              },
+            },
+          ],
+        },
+      },
+    }
+    const fixedFiles = fixProject({
+      files,
+      rule: noReferenceEventRule,
+      fixType: 'delete-event',
+    })
+    expect(fixedFiles.components['test']?.events).toEqual([])
+  })
+})

package/src/rules/issues/events/noReferenceEventRule.ts

@@ -0,0 +1,51 @@
+import type { Rule } from '../../../types'
+import { isLegacyAction } from '../../../util/helpers'
+import { removeFromPathFix } from '../../../util/removeUnused.fix'
+
+export const noReferenceEventRule: Rule<{ name: string }> = {
+  code: 'no-reference event',
+  level: 'warning',
+  category: 'No References',
+  visit: (report, args) => {
+    if (args.nodeType !== 'component-event') {
+      return
+    }
+    const { memo, value } = args
+    const { component, event } = value
+    const events = memo(`${component.name}-events`, () => {
+      const events = new Set<string>()
+      for (const [, action] of component.actionModelsInComponent()) {
+        if (isLegacyAction(action)) {
+          if (
+            'name' in action &&
+            'arguments' in action &&
+            action.name === 'TriggerEvent' &&
+            action.version === undefined
+          ) {
+            const formula = action.arguments?.find(
+              (a) => a?.name === 'name',
+            )?.formula
+            if (
+              formula?.type === 'value' &&
+              typeof formula.value === 'string'
+            ) {
+              events.add(formula.value)
+            }
+          }
+        } else if (action.type === 'TriggerEvent') {
+          events.add(action.event)
+        }
+      }
+      return events
+    })
+    if (events.has(event.name)) {
+      return
+    }
+    report(args.path, { name: args.value.event.name }, ['delete-event'])
+  },
+  fixes: {
+    'delete-event': removeFromPathFix,
+  },
+}
+
+export type NoReferenceEventRuleFix = 'delete-event'