@drupal-canvas/eslint-config 0.2.1 → 0.3.0

package/README.md

@@ -33,11 +33,12 @@ 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.                          |
+| 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-image-example-urls` | Validates that `canvas.module/image` prop examples use fully qualified image URLs.                      |
+| `component-prop-names`         | Validates that component prop IDs match the camelCase version of their titles.                          |
 
 ### Deprecated rules
 

package/dist/index.js

@@ -320,9 +320,9 @@ var require_ignore = __commonJS({
           };
         }
         if (checkPattern(pattern.pattern)) {
-          const rule8 = createRule(pattern, this._ignoreCase);
+          const rule9 = createRule(pattern, this._ignoreCase);
           this._added = true;
-          this._rules.push(rule8);
+          this._rules.push(rule9);
         }
       }
       // @param {Array<string> | string | Ignore} pattern
@@ -344,18 +344,18 @@ var require_ignore = __commonJS({
         let ignored = false;
         let unignored = false;
         let matchedRule;
-        this._rules.forEach((rule8) => {
-          const { negative } = rule8;
+        this._rules.forEach((rule9) => {
+          const { negative } = rule9;
           if (unignored === negative && ignored !== unignored || negative && !ignored && !unignored && !checkUnignored) {
             return;
           }
-          const matched = rule8[mode].test(path2);
+          const matched = rule9[mode].test(path2);
           if (!matched) {
             return;
           }
           ignored = !negative;
           unignored = negative;
-          matchedRule = negative ? UNDEFINED : rule8;
+          matchedRule = negative ? UNDEFINED : rule9;
         });
         const ret = {
           ignored,
@@ -668,6 +668,104 @@ var rule2 = {
   }
 };
 var component_exports_default = rule2;
+
+// src/rules/component-image-example-urls.ts
+var IMAGE_REF = "json-schema-definitions://canvas.module/image";
+function getMappingPair(mapping, key) {
+  return mapping.pairs.find((pair) => getYAMLStringValue(pair.key) === key);
+}
+function isYamlMapping(node) {
+  return node?.type === "YAMLMapping";
+}
+function isYamlSequence(node) {
+  return node?.type === "YAMLSequence";
+}
+function hasImageRef(propMapping) {
+  const ref = getYAMLStringValue(
+    getMappingPair(propMapping, "$ref")?.value ?? null
+  );
+  if (ref === IMAGE_REF) {
+    return true;
+  }
+  const itemsValue = getMappingPair(propMapping, "items")?.value;
+  if (!isYamlMapping(itemsValue)) {
+    return false;
+  }
+  return getYAMLStringValue(getMappingPair(itemsValue, "$ref")?.value ?? null) === IMAGE_REF;
+}
+function isFullyQualifiedUrl(value) {
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol.length > 0 && parsed.hostname.length > 0;
+  } catch {
+    return false;
+  }
+}
+function getInvalidImageExampleNodes(examplesValue) {
+  if (!isYamlSequence(examplesValue)) {
+    return [];
+  }
+  const invalidNodes = [];
+  for (const example of examplesValue.entries) {
+    const imageEntries = isYamlSequence(example) ? example.entries : [example];
+    for (const imageEntry of imageEntries) {
+      if (!isYamlMapping(imageEntry)) {
+        continue;
+      }
+      const srcNode = getMappingPair(imageEntry, "src")?.value;
+      if (srcNode?.type === "YAMLScalar" && typeof srcNode.value === "string" && !isFullyQualifiedUrl(srcNode.value)) {
+        invalidNodes.push(srcNode);
+      }
+    }
+  }
+  return invalidNodes;
+}
+var rule3 = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Validates that default examples for image props use fully-qualified URLs"
+    }
+  },
+  create(context) {
+    if (!isComponentYmlFile(context.filename)) {
+      return {};
+    }
+    return {
+      YAMLPair(node) {
+        const keyName = getYAMLStringValue(node.key);
+        if (keyName !== "props" || !isYamlMapping(node.value)) {
+          return;
+        }
+        const propertiesValue = getMappingPair(node.value, "properties")?.value;
+        if (!isYamlMapping(propertiesValue)) {
+          return;
+        }
+        for (const propPair of propertiesValue.pairs) {
+          const propId = getYAMLStringValue(propPair.key);
+          if (!propId || !isYamlMapping(propPair.value)) {
+            continue;
+          }
+          if (!hasImageRef(propPair.value)) {
+            continue;
+          }
+          const examplesValue = getMappingPair(
+            propPair.value,
+            "examples"
+          )?.value;
+          const invalidNodes = getInvalidImageExampleNodes(examplesValue);
+          for (const invalidNode of invalidNodes) {
+            context.report({
+              node: invalidNode,
+              message: `Image prop "${propId}" example src must be a fully-qualified URL with both scheme and host. Use a placeholder URL such as https://placehold.co/600x400.`
+            });
+          }
+        }
+      }
+    };
+  }
+};
+var component_image_example_urls_default = rule3;
 var Gt = (n7, t, e) => {
   let s = n7 instanceof RegExp ? ce(n7, e) : n7, i = t instanceof RegExp ? ce(t, e) : t, r = s !== null && i != null && ss(s, i, e);
   return r && { start: r[0], end: r[1], pre: e.slice(0, r[0]), body: e.slice(r[0] + s.length, r[1]), post: e.slice(r[1] + i.length) };
@@ -4572,7 +4670,7 @@ function checkImportSource(context, node, source) {
     return;
   }
 }
-var rule3 = {
+var rule4 = {
   meta: {
     type: "problem",
     docs: {
@@ -4598,7 +4696,7 @@ var rule3 = {
     };
   }
 };
-var component_imports_default = rule3;
+var component_imports_default = rule4;
 function extractProps(propsNode) {
   if (!propsNode.value || propsNode.value.type !== "YAMLMapping") {
     return [];
@@ -4632,7 +4730,7 @@ function extractProps(propsNode) {
   }
   return props;
 }
-var rule4 = {
+var rule5 = {
   meta: {
     type: "problem",
     docs: {
@@ -4673,7 +4771,7 @@ var rule4 = {
     };
   }
 };
-var component_prop_names_default = rule4;
+var component_prop_names_default = rule5;
 
 // src/configs/required.ts
 var required = defineConfig([
@@ -4699,6 +4797,7 @@ var required = defineConfig([
         rules: {
           "component-dir-name": component_dir_name_default,
           "component-exports": component_exports_default,
+          "component-image-example-urls": component_image_example_urls_default,
           "component-imports": component_imports_default,
           "component-prop-names": component_prop_names_default
         }
@@ -4707,6 +4806,7 @@ var required = defineConfig([
     rules: {
       "drupal-canvas/component-dir-name": "error",
       "drupal-canvas/component-exports": "error",
+      "drupal-canvas/component-image-example-urls": "error",
       "drupal-canvas/component-imports": "error",
       "drupal-canvas/component-prop-names": "error"
     }
@@ -4754,7 +4854,7 @@ var IGNORED_FILES = [
 function isFileAllowed(fileName, allowedFiles) {
   return allowedFiles.some((allowedFile) => allowedFile === fileName);
 }
-var rule5 = {
+var rule6 = {
   meta: {
     type: "problem",
     docs: {
@@ -4793,7 +4893,7 @@ var rule5 = {
     };
   }
 };
-var component_files_default = rule5;
+var component_files_default = rule6;
 function checkImportSource2(context, node, source) {
   if (source.startsWith("./") || source.startsWith("../")) {
     context.report({
@@ -4922,7 +5022,7 @@ function checkImportSource2(context, node, source) {
     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 rule6 = {
+var rule7 = {
   meta: {
     type: "problem",
     docs: {
@@ -4949,7 +5049,7 @@ var rule6 = {
     };
   }
 };
-var component_imports_deprecated_default = rule6;
+var component_imports_deprecated_default = rule7;
 function findTopmostComponentsParentDir(currentParentDir, rootDir) {
   if (currentParentDir === rootDir) {
     return currentParentDir;
@@ -4970,7 +5070,7 @@ function hasComponentSubdirectories(dirPath) {
   }
   return false;
 }
-var rule7 = {
+var rule8 = {
   meta: {
     type: "problem",
     docs: {
@@ -5005,7 +5105,7 @@ var rule7 = {
     };
   }
 };
-var component_no_hierarchy_default = rule7;
+var component_no_hierarchy_default = rule8;
 
 // src/configs/requiredDeprecated.ts
 var required2 = defineConfig([

package/package.json

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