@drupal-canvas/eslint-config 0.2.1 → 0.4.0

package/README.md

@@ -33,11 +33,13 @@ 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-prop-example-value-image-url`       | Validates that `canvas.module/image` prop examples use fully qualified image URLs.                      |
+| `component-prop-example-value-no-empty-string` | Validates that string prop examples do not contain empty string values.                                 |
+| `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 rule10 = createRule(pattern, this._ignoreCase);
           this._added = true;
-          this._rules.push(rule8);
+          this._rules.push(rule10);
         }
       }
       // @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((rule10) => {
+          const { negative } = rule10;
           if (unignored === negative && ignored !== unignored || negative && !ignored && !unignored && !checkUnignored) {
             return;
           }
-          const matched = rule8[mode].test(path2);
+          const matched = rule10[mode].test(path2);
           if (!matched) {
             return;
           }
           ignored = !negative;
           unignored = negative;
-          matchedRule = negative ? UNDEFINED : rule8;
+          matchedRule = negative ? UNDEFINED : rule10;
         });
         const ret = {
           ignored,
@@ -577,6 +577,15 @@ function getYAMLStringValue(node) {
   }
   return null;
 }
+function isYAMLMapping(node) {
+  return node?.type === "YAMLMapping";
+}
+function isYAMLSequence(node) {
+  return node?.type === "YAMLSequence";
+}
+function getYAMLMappingPair(mapping, key) {
+  return mapping.pairs.find((pair) => getYAMLStringValue(pair.key) === key);
+}
 
 // src/rules/component-dir-name.ts
 var NAMED_SUFFIX2 = ".component.yml";
@@ -4599,31 +4608,217 @@ var rule3 = {
   }
 };
 var component_imports_default = rule3;
-function extractProps(propsNode) {
-  if (!propsNode.value || propsNode.value.type !== "YAMLMapping") {
+
+// src/rules/component-prop-example-value-image-url.ts
+var IMAGE_REF = "json-schema-definitions://canvas.module/image";
+function hasImageRef(propMapping) {
+  const ref = getYAMLStringValue(
+    getYAMLMappingPair(propMapping, "$ref")?.value ?? null
+  );
+  if (ref === IMAGE_REF) {
+    return true;
+  }
+  const itemsValue = getYAMLMappingPair(propMapping, "items")?.value;
+  if (!isYAMLMapping(itemsValue)) {
+    return false;
+  }
+  return getYAMLStringValue(
+    getYAMLMappingPair(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 propsMapping = propsNode.value;
-  const propertiesPair = propsMapping.pairs.find(
-    (p) => getYAMLStringValue(p.key) === "properties"
+  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 = getYAMLMappingPair(imageEntry, "src")?.value;
+      if (srcNode?.type === "YAMLScalar" && typeof srcNode.value === "string" && !isFullyQualifiedUrl(srcNode.value)) {
+        invalidNodes.push(srcNode);
+      }
+    }
+  }
+  return invalidNodes;
+}
+var rule4 = {
+  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 = getYAMLMappingPair(
+          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 = getYAMLMappingPair(
+            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_prop_example_value_image_url_default = rule4;
+
+// src/rules/component-prop-example-value-no-empty-string.ts
+function isEmptyStringScalar(node) {
+  return node?.type === "YAMLScalar" && node.value === "";
+}
+function getStringExampleMode(propMapping) {
+  const type2 = getYAMLStringValue(
+    getYAMLMappingPair(propMapping, "type")?.value ?? null
   );
-  if (!propertiesPair || !propertiesPair.value || propertiesPair.value.type !== "YAMLMapping") {
+  if (type2 === "string") {
+    return "string";
+  }
+  if (type2 !== "array") {
+    return null;
+  }
+  const itemsValue = getYAMLMappingPair(propMapping, "items")?.value;
+  if (!isYAMLMapping(itemsValue)) {
+    return null;
+  }
+  return getYAMLStringValue(
+    getYAMLMappingPair(itemsValue, "type")?.value ?? null
+  ) === "string" ? "string-array" : null;
+}
+function getInvalidExampleNodes(examplesValue, mode) {
+  if (!isYAMLSequence(examplesValue)) {
+    return [];
+  }
+  if (mode === "string") {
+    const invalidNodes2 = [];
+    for (const example of examplesValue.entries) {
+      if (isEmptyStringScalar(example)) {
+        invalidNodes2.push(example);
+      }
+    }
+    return invalidNodes2;
+  }
+  const invalidNodes = [];
+  for (const example of examplesValue.entries) {
+    if (!isYAMLSequence(example)) {
+      continue;
+    }
+    for (const item of example.entries) {
+      if (isEmptyStringScalar(item)) {
+        invalidNodes.push(item);
+      }
+    }
+  }
+  return invalidNodes;
+}
+var rule5 = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Validates that string prop examples do not contain empty string values"
+    }
+  },
+  create(context) {
+    if (!isComponentYmlFile(context.filename)) {
+      return {};
+    }
+    return {
+      YAMLPair(node) {
+        const keyName = getYAMLStringValue(node.key);
+        if (keyName !== "props" || !isYAMLMapping(node.value)) {
+          return;
+        }
+        const propertiesValue = getYAMLMappingPair(
+          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;
+          }
+          const mode = getStringExampleMode(propPair.value);
+          if (!mode) {
+            continue;
+          }
+          const examplesValue = getYAMLMappingPair(
+            propPair.value,
+            "examples"
+          )?.value;
+          const invalidNodes = getInvalidExampleNodes(examplesValue, mode);
+          for (const invalidNode of invalidNodes) {
+            context.report({
+              node: invalidNode,
+              message: `Prop "${propId}" example values must not be empty strings. Remove the empty example or use a non-empty placeholder value.`
+            });
+          }
+        }
+      }
+    };
+  }
+};
+var component_prop_example_value_no_empty_string_default = rule5;
+function extractProps(propsNode) {
+  if (!isYAMLMapping(propsNode.value)) {
+    return [];
+  }
+  const propertiesValue = getYAMLMappingPair(
+    propsNode.value,
+    "properties"
+  )?.value;
+  if (!isYAMLMapping(propertiesValue)) {
     return [];
   }
-  const propertiesMapping = propertiesPair.value;
   const props = [];
-  for (const pair of propertiesMapping.pairs) {
+  for (const pair of propertiesValue.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"
-    );
+    if (!isYAMLMapping(pair.value)) continue;
     let title = null;
-    if (titlePair) {
-      title = getYAMLStringValue(titlePair.value);
-    }
+    title = getYAMLStringValue(getYAMLMappingPair(pair.value, "title")?.value);
     props.push({
       id: propId,
       title,
@@ -4632,7 +4827,7 @@ function extractProps(propsNode) {
   }
   return props;
 }
-var rule4 = {
+var rule6 = {
   meta: {
     type: "problem",
     docs: {
@@ -4673,7 +4868,7 @@ var rule4 = {
     };
   }
 };
-var component_prop_names_default = rule4;
+var component_prop_names_default = rule6;
 
 // src/configs/required.ts
 var required = defineConfig([
@@ -4697,6 +4892,8 @@ var required = defineConfig([
     plugins: {
       "drupal-canvas": {
         rules: {
+          "component-prop-example-value-image-url": component_prop_example_value_image_url_default,
+          "component-prop-example-value-no-empty-string": component_prop_example_value_no_empty_string_default,
           "component-dir-name": component_dir_name_default,
           "component-exports": component_exports_default,
           "component-imports": component_imports_default,
@@ -4705,6 +4902,8 @@ var required = defineConfig([
       }
     },
     rules: {
+      "drupal-canvas/component-prop-example-value-image-url": "error",
+      "drupal-canvas/component-prop-example-value-no-empty-string": "error",
       "drupal-canvas/component-dir-name": "error",
       "drupal-canvas/component-exports": "error",
       "drupal-canvas/component-imports": "error",
@@ -4754,7 +4953,7 @@ var IGNORED_FILES = [
 function isFileAllowed(fileName, allowedFiles) {
   return allowedFiles.some((allowedFile) => allowedFile === fileName);
 }
-var rule5 = {
+var rule7 = {
   meta: {
     type: "problem",
     docs: {
@@ -4793,7 +4992,7 @@ var rule5 = {
     };
   }
 };
-var component_files_default = rule5;
+var component_files_default = rule7;
 function checkImportSource2(context, node, source) {
   if (source.startsWith("./") || source.startsWith("../")) {
     context.report({
@@ -4922,7 +5121,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 rule8 = {
   meta: {
     type: "problem",
     docs: {
@@ -4949,7 +5148,7 @@ var rule6 = {
     };
   }
 };
-var component_imports_deprecated_default = rule6;
+var component_imports_deprecated_default = rule8;
 function findTopmostComponentsParentDir(currentParentDir, rootDir) {
   if (currentParentDir === rootDir) {
     return currentParentDir;
@@ -4970,7 +5169,7 @@ function hasComponentSubdirectories(dirPath) {
   }
   return false;
 }
-var rule7 = {
+var rule9 = {
   meta: {
     type: "problem",
     docs: {
@@ -5005,7 +5204,7 @@ var rule7 = {
     };
   }
 };
-var component_no_hierarchy_default = rule7;
+var component_no_hierarchy_default = rule9;
 
 // 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.4.0",
   "description": "ESLint config for validating Drupal Canvas Code Components",
   "license": "MIT",
   "repository": {