@drupal-canvas/eslint-config 0.1.2 → 0.1.3

package/README.md

@@ -4,11 +4,12 @@ ESLint config for validating Drupal Canvas Code Components.
 
 ## Config variants
 
-| Config        | Description                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `required`    | Base settings for parsing JS/JSX files, YAML parsing for `component.yml` files, and custom rules for Drupal Canvas Code Component validation. Automatically used by [`@drupal-canvas/cli`](https://www.npmjs.com/package/@drupal-canvas/cli) when validating, building, or uploading components.                                                                                                                                |
-| `recommended` | `required` + recommended rules from [`@eslint/js`](https://www.npmjs.com/package/@eslint/js), [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react), [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), [`eslint-plugin-jsx-a11y`](https://www.npmjs.com/package/eslint-plugin-jsx-a11y), and [`eslint-plugin-yml`](https://www.npmjs.com/package/eslint-plugin-yml). |
-| `strict`      | `recommended` + strict rules from [`eslint-plugin-jsx-a11y`](https://www.npmjs.com/package/eslint-plugin-jsx-a11y).                                                                                                                                                                                                                                                                                                             |
+| Config               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `required`           | Base settings for parsing JavaScript and TypeScript files, YAML parsing for component metadata files, and custom rules for Drupal Canvas Code Component validation. Automatically used by [`@drupal-canvas/cli`](https://www.npmjs.com/package/@drupal-canvas/cli) when validating, building, or uploading components.                                                                                                                                                                                 |
+| `requiredDeprecated` | @deprecated Legacy version of the `required` config used by `build-d` command of [`@drupal-canvas/cli`](https://www.npmjs.com/package/@drupal-canvas/cli#deprecated-build-d).                                                                                                                                                                                                                                                                                                                          |
+| `recommended`        | `required` + recommended rules from [`@eslint/js`](https://www.npmjs.com/package/@eslint/js), [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react), [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), [`eslint-plugin-jsx-a11y`](https://www.npmjs.com/package/eslint-plugin-jsx-a11y), [`eslint-plugin-yml`](https://www.npmjs.com/package/eslint-plugin-yml) and [`typescript-eslint`](https://www.npmjs.com/package/typescript-eslint). |
+| `strict`             | `recommended` + strict rules from [`eslint-plugin-jsx-a11y`](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) and [`typescript-eslint`](https://www.npmjs.com/package/typescript-eslint).                                                                                                                                                                                                                                                                                                         |
 
 ## Usage
 
@@ -32,14 +33,22 @@ export default defineConfig([
 The following custom rules are part of the `required` config and validate Drupal
 Canvas Code Components:
 
+| Rule                   | Description                                                                                             |
+| ---------------------- | ------------------------------------------------------------------------------------------------------- |
+| `component-dir-name`   | Validates that `machineName` matches the directory name (index-style) or filename prefix (named-style). |
+| `component-exports`    | Validates that component has a default export.                                                          |
+| `component-prop-names` | Validates that component prop IDs match the camelCase version of their titles.                          |
+
+### Deprecated rules
+
+The following rules are deprecated and only used in the `requiredDeprecated`
+config:
+
 | Rule                     | Description                                                                               |
 | ------------------------ | ----------------------------------------------------------------------------------------- |
-| `component-dir-name`     | Validates that component directory name matches the `machineName` in component.yml.       |
-| `component-exports`      | Validates that component has a default export.                                            |
 | `component-files`        | Validates that component directory contains only allowed files.                           |
 | `component-imports`      | Validates that component imports only from supported import sources and patterns.         |
 | `component-no-hierarchy` | Validates that all component directories are at the same level with no nesting hierarchy. |
-| `component-prop-names`   | Validates that component prop IDs match the camelCase version of their titles.            |
 
 ## Development
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drupal-canvas/eslint-config",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "ESLint config for validating Drupal Canvas Code Components",
   "license": "MIT",
   "repository": {
@@ -32,7 +32,8 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-yml": "^1.19.0",
     "globals": "^16.5.0",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.21",
+    "typescript-eslint": "^8.56.1"
   },
   "devDependencies": {
     "@types/eslint-plugin-jsx-a11y": "^6.5.6",

package/dist/index.js

@@ -1,592 +0,0 @@
-import eslintPluginYml from 'eslint-plugin-yml';
-import { defineConfig, globalIgnores } from 'eslint/config';
-import globals from 'globals';
-import { dirname, basename } from 'path';
-import { existsSync, readdirSync } from 'fs';
-import { camelCase } from 'lodash-es';
-import jsxA11y from 'eslint-plugin-jsx-a11y';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-import js from '@eslint/js';
-
-// src/configs/next.ts
-function isInComponentDir(context) {
-  try {
-    const componentDir = dirname(context.filename);
-    const files = getFilesInDirectory(componentDir);
-    return files.includes("component.yml");
-  } catch {
-    return false;
-  }
-}
-function isComponentYmlFile(context) {
-  try {
-    const fileName = basename(context.filename);
-    return fileName === "component.yml";
-  } catch {
-    return false;
-  }
-}
-function getFilesInDirectory(dirPath) {
-  if (!existsSync(dirPath)) {
-    return [];
-  }
-  try {
-    return readdirSync(dirPath);
-  } catch {
-    return [];
-  }
-}
-
-// src/utils/yaml.ts
-function getYAMLStringValue(node) {
-  if (node && node.type === "YAMLScalar" && typeof node.value === "string") {
-    return node.value;
-  }
-  return null;
-}
-
-// src/rules/component-dir-name.ts
-var rule = {
-  meta: {
-    type: "problem",
-    docs: {
-      description: "Validates that component directory name matches the machineName in component.yml"
-    }
-  },
-  create(context) {
-    if (!isComponentYmlFile(context)) {
-      return {};
-    }
-    let hasMachineName = false;
-    return {
-      YAMLPair(node) {
-        const keyName = getYAMLStringValue(node.key);
-        if (keyName !== "machineName") {
-          return;
-        }
-        hasMachineName = true;
-        const machineName = getYAMLStringValue(node.value);
-        if (!node.value || !machineName) {
-          context.report({
-            node,
-            message: "machineName must be a string."
-          });
-          return;
-        }
-        const componentDir = dirname(context.filename);
-        const componentDirName = basename(componentDir);
-        if (componentDirName !== machineName) {
-          context.report({
-            node: node.value,
-            message: `Component directory name "${componentDirName}" does not match machineName "${machineName}" from component.yml.`
-          });
-        }
-      },
-      "Program:exit"() {
-        if (!hasMachineName) {
-          const componentDir = dirname(context.filename);
-          const componentDirName = basename(componentDir);
-          context.report({
-            loc: { line: 1, column: 0 },
-            message: `machineName key is missing. Its value should match the directory name: "${componentDirName}".`
-          });
-        }
-      }
-    };
-  }
-};
-var component_dir_name_default = rule;
-
-// src/rules/component-exports.ts
-var rule2 = {
-  meta: {
-    type: "problem",
-    docs: {
-      description: "Validates that component has a default export"
-    }
-  },
-  create(context) {
-    if (!context.filename.endsWith(".jsx") && !context.filename.endsWith(".js")) {
-      return {};
-    }
-    if (!isInComponentDir(context)) {
-      return {};
-    }
-    let hasDefaultExport = false;
-    return {
-      ExportDefaultDeclaration() {
-        hasDefaultExport = true;
-      },
-      "Program:exit"(node) {
-        if (!hasDefaultExport) {
-          context.report({
-            node,
-            message: "Component must have a default export"
-          });
-        }
-      }
-    };
-  }
-};
-var component_exports_default = rule2;
-var REQUIRED_FILES = ["component.yml", "index.jsx"];
-var ALLOWED_FILES = ["component.yml", "index.jsx", "index.css"];
-var IGNORED_FILES = [
-  "dist"
-  // 'dist' dir is automatically generated by the canvas build command.
-];
-function isFileAllowed(fileName, allowedFiles) {
-  return allowedFiles.some((allowedFile) => allowedFile === fileName);
-}
-var rule3 = {
-  meta: {
-    type: "problem",
-    docs: {
-      description: "Validates that component directory contains only allowed files"
-    }
-  },
-  create(context) {
-    if (!isComponentYmlFile(context)) {
-      return {};
-    }
-    return {
-      Program: function(node) {
-        const componentDir = dirname(context.filename);
-        const filesInDirectory = getFilesInDirectory(componentDir).filter(
-          (file) => !IGNORED_FILES.includes(file)
-        );
-        REQUIRED_FILES.filter(
-          (file) => !filesInDirectory.includes(file)
-        ).forEach((file) => {
-          context.report({
-            node,
-            message: `Missing required component file: ${file}.`
-          });
-        });
-        const disallowedFiles = filesInDirectory.filter(
-          (file) => !isFileAllowed(file, ALLOWED_FILES)
-        );
-        if (disallowedFiles.length > 0) {
-          context.report({
-            node,
-            message: `Component directory contains disallowed files: ${disallowedFiles.join(", ")}. Only the following files are allowed: ${ALLOWED_FILES.join(", ")}. Other files will be overwritten by the "canvas download" command.`
-          });
-        }
-      }
-    };
-  }
-};
-var component_files_default = rule3;
-
-// src/rules/component-imports.ts
-function checkImportSource(context, node, source) {
-  if (source.startsWith("./") || source.startsWith("../")) {
-    context.report({
-      node,
-      message: `Relative component imports are not supported. Use '@/components/[component-name]' instead of '${source}'.`
-    });
-    return;
-  }
-  if ([
-    "preact",
-    "preact/hooks",
-    "react/jsx-runtime",
-    "react",
-    "react-dom",
-    "react-dom/client",
-    "clsx",
-    "class-variance-authority",
-    "tailwind-merge",
-    "@/components/",
-    "drupal-jsonapi-params",
-    "swr",
-    "drupal-canvas"
-  ].includes(source)) {
-    return;
-  }
-  if (source === "@/lib/drupal-utils") {
-    context.report({
-      node,
-      message: "Drupal utilities were moved into the `drupal-canvas` package.",
-      fix(fixer) {
-        const importsSortMenu = node.type === "ImportDeclaration" && node.specifiers.some(
-          (specifier) => specifier.local.name === "sortMenu" || specifier.type === "ImportSpecifier" && specifier.imported.type === "Identifier" && specifier.imported.name === "sortMenu"
-        );
-        if (!importsSortMenu) {
-          return fixer.replaceText(node.source, "'drupal-canvas'");
-        }
-        return null;
-      }
-    });
-    return;
-  }
-  if (source === "@/lib/utils") {
-    context.report({
-      node,
-      message: "Utilities were moved into the `drupal-canvas` package.",
-      fix(fixer) {
-        return fixer.replaceText(node.source, "'drupal-canvas'");
-      }
-    });
-    return;
-  }
-  if (source === "@/lib/jsonapi-utils") {
-    context.report({
-      node,
-      message: "JSON:API utilities were moved into the `drupal-canvas` package.",
-      fix(fixer) {
-        return fixer.replaceText(node.source, "'drupal-canvas'");
-      }
-    });
-    return;
-  }
-  if (source === "next-image-standalone") {
-    context.report({
-      node,
-      message: "Using `next-image-standalone` directly is deprecated. Use the `Image` component from the `drupal-canvas` package instead.",
-      fix(fixer) {
-        if (node.type === "ImportDeclaration" && node.specifiers.length === 1 && node.specifiers[0].local.name === "Image") {
-          return fixer.replaceText(
-            node,
-            "import { Image } from 'drupal-canvas';"
-          );
-        }
-        return null;
-      }
-    });
-    return;
-  }
-  if (source === "@drupal-api-client/json-api-client") {
-    if (node.type === "ImportDeclaration") {
-      for (const specifier of node.specifiers) {
-        if (specifier.local.name === "JsonApiClient") {
-          context.report({
-            node: specifier.local,
-            message: "The preconfigured `JsonApiClient` was moved into the `drupal-canvas` package.",
-            fix(fixer) {
-              return fixer.replaceText(node.source, "'drupal-canvas'");
-            }
-          });
-          return;
-        }
-      }
-    }
-    return;
-  }
-  if (source === "@/lib/FormattedText") {
-    context.report({
-      node,
-      message: "The `FormattedText` component was moved into the `drupal-canvas` package.",
-      fix(fixer) {
-        if (node.type === "ImportDeclaration" && node.specifiers.length === 1 && node.specifiers[0].local.name === "FormattedText") {
-          return fixer.replaceText(
-            node,
-            "import { FormattedText } from 'drupal-canvas';"
-          );
-        }
-        return null;
-      }
-    });
-    return;
-  }
-  if (source.startsWith("@/components/")) {
-    if (source.replace("@/components/", "").includes("/")) {
-      context.report({
-        node,
-        message: `Components must be imported from top-level directories under "@/components/". The path "${source}" suggests a nested structure.`
-      });
-      return;
-    }
-    return;
-  }
-  if (source.startsWith("http://") || source.startsWith("https://")) {
-    return;
-  }
-  context.report({
-    node,
-    message: `Importing "${source}" is not supported. If this is a local import via a path alias, use the "@/components/" alias instead. If you are importing a third-party package, see the list of supported packages at https://project.pages.drupalcode.org/canvas/code-components/packages. (The status of supporting any third-party package can be tracked at https://drupal.org/i/3560197.)`
-  });
-}
-var rule4 = {
-  meta: {
-    type: "problem",
-    docs: {
-      description: "Validates that component imports only from supported import sources and patterns"
-    },
-    fixable: "code"
-  },
-  create(context) {
-    if (!isInComponentDir(context)) {
-      return {};
-    }
-    return {
-      ImportDeclaration(node) {
-        if (node.source && typeof node.source.value === "string") {
-          checkImportSource(context, node, node.source.value);
-        }
-      },
-      ImportExpression(node) {
-        if (node.source.type === "Literal" && typeof node.source.value === "string") {
-          checkImportSource(context, node, node.source.value);
-        }
-      }
-    };
-  }
-};
-var component_imports_default = rule4;
-function findTopmostComponentsParentDir(currentParentDir, rootDir) {
-  if (currentParentDir === rootDir) {
-    return currentParentDir;
-  }
-  const parentDir = dirname(currentParentDir);
-  if (hasComponentSubdirectories(parentDir)) {
-    return findTopmostComponentsParentDir(parentDir, rootDir);
-  }
-  return currentParentDir;
-}
-function hasComponentSubdirectories(dirPath) {
-  const files = getFilesInDirectory(dirPath);
-  for (const file of files) {
-    const subdirFiles = getFilesInDirectory(dirPath + "/" + file);
-    if (subdirFiles.includes("component.yml")) {
-      return true;
-    }
-  }
-  return false;
-}
-var rule5 = {
-  meta: {
-    type: "problem",
-    docs: {
-      description: "Validates that all component directories are at the same level with no nesting hierarchy"
-    }
-  },
-  create(context) {
-    if (!isComponentYmlFile(context)) {
-      return {};
-    }
-    return {
-      Program: function(node) {
-        const currentComponentDir = dirname(context.filename);
-        const componentsDir = dirname(currentComponentDir);
-        const topmostComponentsDir = findTopmostComponentsParentDir(
-          componentsDir,
-          context.cwd
-        );
-        if (topmostComponentsDir !== componentsDir) {
-          const nestedComponent = basename(currentComponentDir);
-          let parentComponentPath = componentsDir.replace(context.cwd, "");
-          if (!parentComponentPath.startsWith("/")) {
-            parentComponentPath = "/" + parentComponentPath;
-          }
-          context.report({
-            node,
-            message: `All component directories must be at the same level with no nesting hierarchy. Found "${nestedComponent}" component inside the "${parentComponentPath}" directory.`
-          });
-        }
-      }
-    };
-  }
-};
-var component_no_hierarchy_default = rule5;
-function extractProps(propsNode) {
-  if (!propsNode.value || propsNode.value.type !== "YAMLMapping") {
-    return [];
-  }
-  const propsMapping = propsNode.value;
-  const propertiesPair = propsMapping.pairs.find(
-    (p) => getYAMLStringValue(p.key) === "properties"
-  );
-  if (!propertiesPair || !propertiesPair.value || propertiesPair.value.type !== "YAMLMapping") {
-    return [];
-  }
-  const propertiesMapping = propertiesPair.value;
-  const props = [];
-  for (const pair of propertiesMapping.pairs) {
-    const propId = getYAMLStringValue(pair.key);
-    if (!propId) continue;
-    if (!pair.value || pair.value.type !== "YAMLMapping") continue;
-    const propMapping = pair.value;
-    const titlePair = propMapping.pairs.find(
-      (p) => getYAMLStringValue(p.key) === "title"
-    );
-    let title = null;
-    if (titlePair) {
-      title = getYAMLStringValue(titlePair.value);
-    }
-    props.push({
-      id: propId,
-      title,
-      node: pair
-    });
-  }
-  return props;
-}
-var rule6 = {
-  meta: {
-    type: "problem",
-    docs: {
-      description: "Validates that component prop IDs match the camelCase version of their titles"
-    }
-  },
-  create(context) {
-    if (!isComponentYmlFile(context)) {
-      return {};
-    }
-    return {
-      YAMLPair(node) {
-        const keyName = getYAMLStringValue(node.key);
-        if (keyName !== "props") {
-          return;
-        }
-        const props = extractProps(node);
-        if (props.length === 0) {
-          return;
-        }
-        for (const prop of props) {
-          if (!prop.title) {
-            context.report({
-              node: prop.node,
-              message: `Prop "${prop.id}" is missing a title.`
-            });
-            continue;
-          }
-          const expectedId = camelCase(prop.title);
-          if (prop.id !== expectedId) {
-            context.report({
-              node: prop.node,
-              message: `Prop machine name "${prop.id}" should be the camelCase version of its title. Expected: "${expectedId}". https://drupal.org/i/3524675`
-            });
-          }
-        }
-      }
-    };
-  }
-};
-var component_prop_names_default = rule6;
-
-// src/configs/next.ts
-var required = defineConfig([
-  globalIgnores(["**/dist/**"]),
-  {
-    files: ["**/*.{js,jsx}"],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: "latest",
-        ecmaFeatures: { jsx: true },
-        sourceType: "module"
-      }
-    },
-    settings: { react: { version: "19.0" } }
-  },
-  eslintPluginYml.configs["flat/base"],
-  {
-    plugins: {
-      "drupal-canvas": {
-        rules: {
-          "component-dir-name": component_dir_name_default,
-          "component-exports": component_exports_default,
-          "component-files": component_files_default,
-          "component-imports": component_imports_default,
-          "component-no-hierarchy": component_no_hierarchy_default,
-          "component-prop-names": component_prop_names_default
-        }
-      }
-    },
-    rules: {
-      "drupal-canvas/component-dir-name": "error",
-      // 'drupal-canvas/component-exports': 'error',
-      // 'drupal-canvas/component-files': 'error',
-      // 'drupal-canvas/component-imports': 'error',
-      // 'drupal-canvas/component-no-hierarchy': 'error',
-      "drupal-canvas/component-prop-names": "error"
-    }
-  }
-]);
-var next_default = required;
-var required2 = defineConfig([
-  globalIgnores(["**/dist/**"]),
-  {
-    files: ["**/*.{js,jsx}"],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: "latest",
-        ecmaFeatures: { jsx: true },
-        sourceType: "module"
-      }
-    },
-    settings: { react: { version: "19.0" } }
-  },
-  eslintPluginYml.configs["flat/base"],
-  {
-    plugins: {
-      "drupal-canvas": {
-        rules: {
-          "component-dir-name": component_dir_name_default,
-          "component-exports": component_exports_default,
-          "component-files": component_files_default,
-          "component-imports": component_imports_default,
-          "component-no-hierarchy": component_no_hierarchy_default,
-          "component-prop-names": component_prop_names_default
-        }
-      }
-    },
-    rules: {
-      "drupal-canvas/component-dir-name": "error",
-      "drupal-canvas/component-exports": "error",
-      "drupal-canvas/component-files": "error",
-      "drupal-canvas/component-imports": "error",
-      "drupal-canvas/component-no-hierarchy": "error",
-      "drupal-canvas/component-prop-names": "error"
-    }
-  }
-]);
-var required_default = required2;
-
-// src/configs/recommended.ts
-var recommended = defineConfig([
-  required_default,
-  {
-    files: ["**/*.{js,jsx}"],
-    plugins: {
-      react,
-      "react-hooks": reactHooks,
-      "jsx-a11y": jsxA11y
-    },
-    settings: {
-      "jsx-a11y": {
-        components: {
-          Image: "img"
-        }
-      }
-    },
-    rules: {
-      ...js.configs.recommended.rules,
-      ...react.configs.recommended.rules,
-      ...react.configs["jsx-runtime"].rules,
-      ...reactHooks.configs.recommended.rules,
-      ...jsxA11y.flatConfigs.recommended.rules,
-      "react/jsx-no-target-blank": "off",
-      "react/prop-types": "off"
-    }
-  },
-  ...eslintPluginYml.configs["flat/recommended"]
-]);
-var recommended_default = recommended;
-var strict = defineConfig([
-  recommended_default,
-  {
-    files: ["**/*.{js,jsx}"],
-    rules: {
-      ...jsxA11y.flatConfigs.strict.rules
-    }
-  }
-]);
-var strict_default = strict;
-
-export { next_default as next, recommended_default as recommended, required_default as required, strict_default as strict };