Merge pull request #131 from break-stuff/add-custom-element-linter

Add custom element linter

demo/lit-app/custom-element-eslint-rules.js

@@ -0,0 +1,140 @@
+import customElement from "eslint-plugin-custom-element";
+import html from "@html-eslint/eslint-plugin";
+import htmlParser from "@html-eslint/parser";
+
+export const rules = {
+  "custom-element/required-attrs": ["error"],
+
+  "custom-element/no-deprecated-attrs": [
+    "warn",
+    {
+      tag: "radio-group",
+      attr: "external",
+    },
+    {
+      tag: "radio-group",
+      attr: "deprecated-attribute",
+    },
+  ],
+
+  "custom-element/constrained-attrs": [
+    "error",
+    {
+      tag: "radio-group",
+      attr: "variants",
+      values: [
+        "default",
+        "primary",
+        "success",
+        "neutral",
+        "warning",
+        "danger",
+        "text",
+      ],
+    },
+    {
+      tag: "radio-group",
+      attr: "external",
+      values: ["value1", "value2", "value3"],
+    },
+    {
+      tag: "radio-group",
+      attr: "deprecated-attribute",
+      values: ["value1", "value2", "value3"],
+    },
+    {
+      tag: "radio-group",
+      attr: "external2",
+      values: ["value4", "value5", "value6", "valueA", "valueB"],
+    },
+    {
+      tag: "radio-group",
+      attr: "external3",
+      values: ["value7", "value8", "value9"],
+    },
+    {
+      tag: "radio-group",
+      attr: "complex",
+      values: ["single", "multi"],
+    },
+    {
+      tag: "radio-group",
+      attr: "complex-union",
+      values: ["small", "medium", "large", "extra-small", "undefined"],
+    },
+    {
+      tag: "radio-button",
+      attr: "target",
+      values: ["_blank", "_self", "_parent", "_top", "undefined"],
+    },
+  ],
+
+  "custom-element/no-deprecated-tags": [
+    "warn",
+    {
+      tag: "deprecated-element",
+    },
+  ],
+
+  "custom-element/no-boolean-attr-values": [
+    "error",
+    {
+      tag: "radio-group",
+      attr: "disabled",
+    },
+    {
+      tag: "radio-button",
+      attr: "disabled",
+    },
+  ],
+
+  "@html-eslint/no-duplicate-attrs": "off",
+  "@html-eslint/no-duplicate-id": "off",
+  "@html-eslint/no-inline-styles": "off",
+  "@html-eslint/no-obsolete-tags": "off",
+  "@html-eslint/no-restricted-attr-values": "off",
+  "@html-eslint/no-restricted-attrs": "off",
+  "@html-eslint/no-script-style-type": "off",
+  "@html-eslint/no-target-blank": "off",
+  "@html-eslint/require-attrs": "off",
+  "@html-eslint/require-button-type": "off",
+  "@html-eslint/require-closing-tags": "off",
+  "@html-eslint/require-doctype": "off",
+  "@html-eslint/require-li-container": "off",
+  "@html-eslint/require-meta-charset": "off",
+  "@html-eslint/no-multiple-h1": "off",
+  "@html-eslint/require-lang": "off",
+  "@html-eslint/require-meta-description": "off",
+  "@html-eslint/require-open-graph-protocol": "off",
+  "@html-eslint/require-title": "off",
+  "@html-eslint/no-abstract-roles": "off",
+  "@html-eslint/no-accesskey-attrs": "off",
+  "@html-eslint/no-aria-hidden-body": "off",
+  "@html-eslint/no-non-scalable-viewport": "off",
+  "@html-eslint/no-positive-tabindex": "off",
+  "@html-eslint/no-skip-heading-levels": "off",
+  "@html-eslint/require-frame-title": "off",
+  "@html-eslint/require-img-alt": "off",
+  "@html-eslint/require-meta-viewport": "off",
+  "@html-eslint/element-newline": "off",
+  "@html-eslint/id-naming-convention": "off",
+  "@html-eslint/indent": "off",
+  "@html-eslint/lowercase": "off",
+  "@html-eslint/no-extra-spacing-attrs": "off",
+  "@html-eslint/no-multiple-empty-lines": "off",
+  "@html-eslint/no-trailing-spaces": "off",
+  "@html-eslint/quotes": "off",
+  "@html-eslint/sort-attrs": "off",
+};
+
+export default {
+  rules,
+  recommendedConfig: {
+    files: ["**/*.html"],
+    languageOptions: {
+      parser: htmlParser,
+    },
+    plugins: { html, "custom-element": customElement },
+    rules,
+  },
+};

demo/lit-app/custom-element-jsx.d.ts

@@ -1,5 +1,7 @@
 import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts";
 import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts";
+import type { DeprecatedElement } from "./dist/deprecated-element/DeprecatedElement.d.ts";
+import type { MyButton } from "./dist/my-button/MyButton.d.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -74,6 +76,8 @@ export type RadioGroupProps = {
   variants?: RadioGroup["variants"];
   /** @deprecated This is a test for external d.ts options */
   external?: RadioGroup["external"];
+  /** @deprecated This is a deprecated attribute */
+  "deprecated-attribute"?: RadioGroup["deprecatedAttribute"];
   /** This is a test for external .ts options */
   external2?: RadioGroup["external2"];
   /** This is a test for external .ts options */
@@ -109,6 +113,10 @@ export type RadioButtonProps = {
   position?: RadioButton["position"];
 };
 
+export type DeprecatedElementProps = {};
+
+export type MyButtonProps = {};
+
 export type CustomElements = {
   /**
    *
@@ -163,4 +171,21 @@ export type CustomElements = {
    *  - _default_ - add text here to label your radio button
    */
   "radio-button": Partial<RadioButtonProps | BaseProps | BaseEvents>;
+
+  /**
+   * @deprecated An example of a deprecated element
+   *
+   *
+   * ---
+   *
+   */
+  "deprecated-element": Partial<DeprecatedElementProps | BaseProps | BaseEvents>;
+
+  /**
+   *
+   * A basic button element
+   * ---
+   *
+   */
+  "my-button": Partial<MyButtonProps | BaseProps | BaseEvents>;
 };

demo/lit-app/custom-element-vuejs.d.ts

@@ -2,6 +2,8 @@ import type { DefineComponent } from "vue";
 
 import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts";
 import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts";
+import type { DeprecatedElement } from "./dist/deprecated-element/DeprecatedElement.d.ts";
+import type { MyButton } from "./dist/my-button/MyButton.d.ts";
 
 type RadioGroupProps = {
   /** The value assigned to the radio button. This will reflect in the radio group when clicked. */
@@ -14,6 +16,8 @@ type RadioGroupProps = {
   variants?: RadioGroup["variants"];
   /** @deprecated This is a test for external d.ts options */
   external?: RadioGroup["external"];
+  /** @deprecated This is a deprecated attribute */
+  "deprecated-attribute"?: RadioGroup["deprecatedAttribute"];
   /** This is a test for external .ts options */
   external2?: RadioGroup["external2"];
   /** This is a test for external .ts options */
@@ -49,6 +53,10 @@ type RadioButtonProps = {
   position?: RadioButton["position"];
 };
 
+type DeprecatedElementProps = {};
+
+type MyButtonProps = {};
+
 export type CustomElements = {
   /**
    *
@@ -103,6 +111,23 @@ export type CustomElements = {
    *  - _default_ - add text here to label your radio button
    */
   "radio-button": DefineComponent<RadioButtonProps>;
+
+  /**
+   * @deprecated An example of a deprecated element
+   *
+   *
+   * ---
+   *
+   */
+  "deprecated-element": DefineComponent<DeprecatedElementProps>;
+
+  /**
+   *
+   * A basic button element
+   * ---
+   *
+   */
+  "my-button": DefineComponent<MyButtonProps>;
 };
 
 declare module "vue" {

demo/lit-app/custom-elements-manifest.config.mjs

@@ -9,6 +9,7 @@ import { customElementLazyLoaderPlugin } from "custom-element-lazy-loader";
 import { customElementSveltePlugin } from "custom-element-svelte-integration";
 import { customJSDocTagsPlugin } from "cem-plugin-custom-jsdoc-tags";
 import { cemDeprecatorPlugin } from "custom-elements-manifest-deprecator";
+import { customEsLintRuleGeneratorPlugin } from "custom-element-eslint-rule-generator";
 
 export default {
   /** Globs to analyze */
@@ -67,9 +68,15 @@ export default {
           isArray: true,
         },
         fancy: {},
-        default: {}
+        default: {},
+        required: {
+          isArray: true
+        }
       }
     }),
-    cemDeprecatorPlugin()
+    cemDeprecatorPlugin(),
+    customEsLintRuleGeneratorPlugin({
+      typesSrc: "expandedType"
+    })
   ],
 };

demo/lit-app/custom-elements-svelte.d.ts

@@ -1,5 +1,7 @@
 import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts";
 import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts";
+import type { DeprecatedElement } from "./dist/deprecated-element/DeprecatedElement.d.ts";
+import type { MyButton } from "./dist/my-button/MyButton.d.ts";
 
 type BaseProps = {
   /** Content added between the opening and closing tags of the element */
@@ -51,6 +53,8 @@ type RadioGroupProps = {
   variants?: RadioGroup["variants"];
   /** @deprecated This is a test for external d.ts options */
   external?: RadioGroup["external"];
+  /** @deprecated This is a deprecated attribute */
+  "deprecated-attribute"?: RadioGroup["deprecatedAttribute"];
   /** This is a test for external .ts options */
   external2?: RadioGroup["external2"];
   /** This is a test for external .ts options */
@@ -86,6 +90,10 @@ type RadioButtonProps = {
   position?: RadioButton["position"];
 };
 
+type DeprecatedElementProps = {};
+
+type MyButtonProps = {};
+
 export type CustomElements = {
   /**
    *
@@ -140,6 +148,23 @@ export type CustomElements = {
    *  - _default_ - add text here to label your radio button
    */
   "radio-button": Partial<RadioButtonProps | BaseProps | BaseEvents>;
+
+  /**
+   * @deprecated An example of a deprecated element
+   *
+   *
+   * ---
+   *
+   */
+  "deprecated-element": Partial<DeprecatedElementProps | BaseProps | BaseEvents>;
+
+  /**
+   *
+   * A basic button element
+   * ---
+   *
+   */
+  "my-button": Partial<MyButtonProps | BaseProps | BaseEvents>;
 };
 
 declare namespace svelteHTML {