feat(sfcc): add no-e4x-syntax rule

recommended config now reports JSX/E4X-like tag syntax in JavaScript files as errors via sfcc/no-e4x-syntax.

Author: jenssimon

README.md

@@ -13,6 +13,7 @@ Shareable ESLint flat config for Salesforce Commerce Cloud (SFCC) projects.
 
 - Modern language features not supported on SFCC/Rhino (e.g. optional chaining, nullish coalescing, async/await, object spread, many ES2015+ builtins)
 - Top-level `await`, dynamic `import()`, class fields, new builtins like `Map`, `Set`, `Promise`, `Symbol`, etc.
+- JSX/E4X-like tag syntax (e.g. `<a/>`) that may be misparsed in JavaScript linting workflows
 - Features that would cause runtime or syntax errors on SFCC
 - Many ES2015+ Array/String/Object methods missing in Rhino
 - ECMAScript modules (`import`/`export`), as SFCC only supports CommonJS
@@ -85,6 +86,7 @@ The new `sfcc` plugin contains the general Rhino/SFCC runtime rules:
 
 | Rule                        | Description                                                                                                                                             | Default |
 | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `sfcc/no-e4x-syntax`        | Disallows JSX/E4X-like tag syntax (e.g. `<a/>`) in SFCC JavaScript to avoid parser ambiguity and unsupported runtime patterns.                          | `error` |
 | `sfcc/prefer-const`         | Requires `const` for `let` declarations that are never reassigned, excluding Rhino-sensitive nested/loop contexts.                                      | `error` |
 | `sfcc/rhino-const-compat`   | Enforces `let` instead of `const` in Rhino loop-critical contexts (loop headers and declarations inside loop bodies) and supports auto-fix.             | `error` |
 | `sfcc/rhino-const-conflict` | Detects same-name `const` declarations in nested blocks within the same function (Rhino treats them as function-scoped) and supports auto-fix to `let`. | `error` |
@@ -199,6 +201,14 @@ if (foo === "baz") {
 
 A: Not safe for Rhino. Both declarations are treated as function-scoped const bindings with the same name. `sfcc/rhino-const-conflict` reports this and auto-fixes to `let`.
 
+Q: Are `XML` and `XMLList` identifiers allowed?
+
+A: Yes. Constructor-style usage such as `const xmlCtor = XML` and `const xmlListCtor = XMLList` is allowed. `sfcc/no-e4x-syntax` only targets JSX/E4X-like tag syntax (for example `<a/>`).
+
+Q: Does `sfcc/no-e4x-syntax` report `default xml namespace = "..."`?
+
+A: No. That construct fails during parsing before rules run, so ESLint reports a fatal parsing error first. The rule cannot execute on code that does not parse.
+
 ---
 
 ## Migrating from v4

src/plugins/sfcc/index.ts

@@ -1,10 +1,12 @@
+import noE4xSyntax from "./no-e4x-syntax.js"
 import preferConst from "./prefer-const.js"
 import rhinoConstCompat from "./rhino-const-compat.js"
 import rhinoConstConflict from "./rhino-const-conflict.js"
 import validRequirePath from "./valid-require-path.js"
 
 const sfcc = {
   rules: {
+    "no-e4x-syntax": noE4xSyntax,
     "prefer-const": preferConst,
     "rhino-const-compat": rhinoConstCompat,
     "rhino-const-conflict": rhinoConstConflict,

src/plugins/sfcc/no-e4x-syntax.ts

@@ -0,0 +1,31 @@
+import type { Rule } from "eslint"
+
+import { withSfccSettings } from "../_utils/sfcc-settings.js"
+
+const noE4xSyntax: Rule.RuleModule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow JSX/E4X-like syntax in SFCC JavaScript to avoid parser ambiguity and unsupported runtime patterns.",
+      recommended: true,
+    },
+    schema: [],
+    messages: {
+      forbiddenSyntax:
+        "JSX/E4X-like syntax is not allowed in SFCC JavaScript. Use plain JavaScript and SFCC XML APIs instead.",
+    },
+  },
+  create: withSfccSettings((context) => {
+    return {
+      JSXElement(node: Rule.Node) {
+        context.report({ node, messageId: "forbiddenSyntax" })
+      },
+      JSXFragment(node: Rule.Node) {
+        context.report({ node, messageId: "forbiddenSyntax" })
+      },
+    }
+  }),
+}
+
+export default noE4xSyntax

src/rules/sfcc.ts

@@ -1,6 +1,7 @@
 import type { Linter } from "eslint"
 
 const sfcc: Linter.RulesRecord = {
+  "sfcc/no-e4x-syntax": "error",
   "sfcc/prefer-const": "error",
   "sfcc/rhino-const-compat": "error",
   "sfcc/rhino-const-conflict": "error",

tests/sfcc-no-e4x-syntax.test.ts

@@ -0,0 +1,64 @@
+import tseslint from "@typescript-eslint/eslint-plugin"
+import { ESLint, type Linter } from "eslint"
+import { describe, expect, test } from "vite-plus/test"
+
+import { createRecommendedConfig } from "../src/index.js"
+
+const tsRecommended = tseslint.configs["flat/recommended"] as unknown as
+  | Linter.Config
+  | Linter.Config[]
+
+const config: Linter.Config[] = [
+  ...(Array.isArray(tsRecommended) ? tsRecommended : [tsRecommended]),
+  ...createRecommendedConfig({
+    files: ["**/*.js"],
+    ignores: [],
+  }),
+]
+
+async function lint(code: string, filename = "cartridges/app_sfra/cartridge/controllers/Home.js") {
+  const eslint = new ESLint({
+    overrideConfigFile: true,
+    overrideConfig: config,
+  })
+
+  const results = await eslint.lintText(code, { filePath: filename })
+  return results[0]?.messages || []
+}
+
+describe("sfcc/no-e4x-syntax", () => {
+  test("reports JSX/E4X-like syntax in JS files", async () => {
+    const messages = await lint("const x = <a/>; module.exports = x")
+
+    expect(messages.some((m) => m.ruleId === "sfcc/no-e4x-syntax")).toBe(true)
+  })
+
+  test("allows XML and XMLList constructor-style usage", async () => {
+    const messages = await lint(`
+      const xmlCtor = XML
+      const xmlListCtor = XMLList
+      module.exports = { xmlCtor, xmlListCtor }
+    `)
+
+    expect(messages.some((m) => m.ruleId === "sfcc/no-e4x-syntax")).toBe(false)
+  })
+
+  test("shows parsing error for default xml namespace declaration", async () => {
+    const messages = await lint('default xml namespace = "urn:test"')
+
+    expect(messages.some((m) => m.fatal === true)).toBe(true)
+    expect(messages.some((m) => m.ruleId === "sfcc/no-e4x-syntax")).toBe(false)
+  })
+
+  test("keeps JSDoc-based typing flow in JS files", async () => {
+    const messages = await lint(`
+      /** @param {{ productID: string }} body */
+      function buildContext(body) {
+        return { productID: body.productID }
+      }
+      module.exports = buildContext({ productID: "123" })
+    `)
+
+    expect(messages.some((m) => m.ruleId === "sfcc/no-e4x-syntax")).toBe(false)
+  })
+})