@drupal-canvas/eslint-config 0.1.3 → 0.1.4

package/dist/index.js

@@ -0,0 +1,617 @@
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import eslintPluginYml from 'eslint-plugin-yml';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import tseslint from 'typescript-eslint';
+import js from '@eslint/js';
+import globals from 'globals';
+import { dirname, basename } from 'path';
+import { existsSync, readdirSync } from 'fs';
+import { camelCase } from 'lodash-es';
+
+// src/configs/recommended.ts
+var JS_EXTENSIONS = ["ts", "tsx", "js", "jsx"];
+var NAMED_SUFFIX = ".component.yml";
+function isComponentEntrypoint(context) {
+  if (!isInComponentDir(context)) {
+    return false;
+  }
+  const componentDir = dirname(context.filename);
+  const files = getFilesInDirectory(componentDir);
+  const namedMetadataFile = files.find((file) => file.endsWith(NAMED_SUFFIX));
+  const componentBaseName = namedMetadataFile ? namedMetadataFile.slice(0, -NAMED_SUFFIX.length) : "index";
+  return JS_EXTENSIONS.some(
+    (ext) => basename(context.filename) === componentBaseName + "." + ext
+  );
+}
+function isInComponentDir(context) {
+  try {
+    const componentDir = dirname(context.filename);
+    const files = getFilesInDirectory(componentDir);
+    return files.filter(
+      (file) => basename(file) === "component.yml" || file.endsWith(NAMED_SUFFIX)
+    ).length > 0;
+  } catch {
+    return false;
+  }
+}
+function isComponentYmlFile(context) {
+  try {
+    const fileName = basename(context.filename);
+    return fileName === "component.yml" || fileName.endsWith(NAMED_SUFFIX);
+  } 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 NAMED_SUFFIX2 = ".component.yml";
+function getExpectedMachineName(filename) {
+  const fileName = basename(filename);
+  if (fileName !== "component.yml" && fileName.endsWith(NAMED_SUFFIX2)) {
+    return {
+      name: fileName.slice(0, -NAMED_SUFFIX2.length),
+      source: `metadata filename "${fileName}"`
+    };
+  }
+  const dirName = basename(dirname(filename));
+  return { name: dirName, source: `directory name "${dirName}"` };
+}
+var rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Validates that the machineName in component metadata matches the component directory name (index-style) or filename prefix (named-style)"
+    }
+  },
+  create(context) {
+    if (!isComponentYmlFile(context)) {
+      return {};
+    }
+    let hasMachineName = false;
+    const { name: expectedName, source: expectedSource } = getExpectedMachineName(context.filename);
+    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;
+        }
+        if (expectedName !== machineName) {
+          context.report({
+            node: node.value,
+            message: `${expectedSource[0].toUpperCase()}${expectedSource.slice(1)} does not match machineName "${machineName}".`
+          });
+        }
+      },
+      "Program:exit"() {
+        if (!hasMachineName) {
+          context.report({
+            loc: { line: 1, column: 0 },
+            message: `machineName key is missing. Its value should be "${expectedName}" based on ${expectedSource.toLowerCase()}.`
+          });
+        }
+      }
+    };
+  }
+};
+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 (!isComponentEntrypoint(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;
+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 rule3 = {
+  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 = rule3;
+
+// src/configs/required.ts
+var required = defineConfig([
+  globalIgnores(["**/dist/**"]),
+  {
+    files: ["**/*.{ts,tsx,js,jsx}"],
+    languageOptions: {
+      parser: tseslint.parser,
+      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-prop-names": component_prop_names_default
+        }
+      }
+    },
+    rules: {
+      "drupal-canvas/component-dir-name": "error",
+      "drupal-canvas/component-exports": "error",
+      "drupal-canvas/component-prop-names": "error"
+    }
+  }
+]);
+var required_default = required;
+
+// src/configs/recommended.ts
+var recommended = defineConfig([
+  required_default,
+  {
+    files: ["**/*.{ts,tsx,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"
+    }
+  },
+  ...tseslint.configs.recommended,
+  ...eslintPluginYml.configs["flat/recommended"]
+]);
+var recommended_default = recommended;
+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 rule4 = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Validates that component directory contains only allowed files"
+    },
+    deprecated: true
+  },
+  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 = rule4;
+
+// 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 rule5 = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Validates that component imports only from supported import sources and patterns"
+    },
+    fixable: "code",
+    deprecated: true
+  },
+  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 = rule5;
+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 rule6 = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Validates that all component directories are at the same level with no nesting hierarchy"
+    },
+    deprecated: true
+  },
+  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 = rule6;
+
+// src/configs/requiredDeprecated.ts
+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 requiredDeprecated_default = required2;
+var strict = defineConfig([
+  recommended_default,
+  {
+    files: ["**/*.{ts,tsx,js,jsx}"],
+    rules: {
+      ...jsxA11y.flatConfigs.strict.rules
+    }
+  },
+  ...tseslint.configs.strict
+]);
+var strict_default = strict;
+
+export { recommended_default as recommended, required_default as required, requiredDeprecated_default as requiredDeprecated, strict_default as strict };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drupal-canvas/eslint-config",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "ESLint config for validating Drupal Canvas Code Components",
   "license": "MIT",
   "repository": {