Use our own rules too

Author: valadas

packages/stencil-library/eslint-plugin/src/configs/recommended.ts

@@ -12,12 +12,6 @@ const prefixedRules: Linter.RulesRecord = Object.fromEntries(
   ])
 );
 
-// ✅ Classic config (extends-based)
-export const recommended: Linter.Config = {
-  plugins: [pluginName],
-  rules: prefixedRules,
-};
-
 // ✅ Flat config (for modern eslint.config.js)
 export const flatRecommended: FlatConfig.Config[] = [
   {

packages/stencil-library/eslint-plugin/src/index.ts

@@ -1,5 +1,5 @@
 import { rules } from "./rules/index.js";
-import { recommended, flatRecommended } from "./configs/recommended.js";
+import { flatRecommended } from "./configs/recommended.js";
 import type { Plugin } from "./types/plugin.js";
 const { name, version } = require("../../package.json") as {
     name: string;
@@ -10,7 +10,6 @@ const plugin: Plugin = {
   meta: { name, version },
   rules,
   configs: {
-    recommended,
     flat: {
       recommended: flatRecommended,
     },

packages/stencil-library/eslint-plugin/src/rules/no-label-slot-in-checkbox.test.ts

@@ -24,6 +24,19 @@ ruleTester.run("no-label-slot-in-checkbox", rule, {
             code: "<dnn-checkbox></dnn-checkbox>",
             languageOptions: jsxParserOptions,
         },
+        {
+            code: '<dnn-checkbox><div slot="uncheckedicon">Test</div></dnn-checkbox>',
+            languageOptions: jsxParserOptions,
+        },
+        {
+            code: [
+                "<dnn-checkbox>",
+                "  <div slot=\"uncheckedicon\">unchecked</div>",
+                "  <div slot=\"checkedicon\">checked</div>",
+                "</dnn-checkbox>",
+            ].join("\n"),
+            languageOptions: jsxParserOptions,
+        }
     ],
     invalid: [
         {
@@ -33,13 +46,27 @@ ruleTester.run("no-label-slot-in-checkbox", rule, {
                 "</dnn-checkbox>",
             ].join("\n"),
             languageOptions: jsxParserOptions,
-            errors: [{ messageId: "noLabelSlotInCheckbox" }],
-            output: [
-                "<label>",
-                "  <dnn-checkbox onClick={e => console.log(e)} />",
+            errors: [{ messageId: "noDefaultSlotInCheckbox" }],
+        },
+        {
+            code: [
+                "<dnn-checkbox onClick={e => console.log(e)}>",
+                "  <div slot=\"uncheckedicon\">unchecked</div>",
                 "  Something",
-                "</label>",
+                "</dnn-checkbox>",
+            ].join("\n"),
+            languageOptions: jsxParserOptions,
+            errors: [{ messageId: "noDefaultSlotInCheckbox" }],
+        },
+        {
+            code: [
+                "<dnn-checkbox onClick={e => console.log(e)}>",
+                "  <div slot=\"uncheckedicon\">unchecked</div>",
+                "  <p>Something</p>",
+                "</dnn-checkbox>",
             ].join("\n"),
+            languageOptions: jsxParserOptions,
+            errors: [{ messageId: "noDefaultSlotInCheckbox" }],
         },
     ],
 });

packages/stencil-library/eslint-plugin/src/rules/no-label-slot-in-checkbox.ts

@@ -5,16 +5,15 @@ export const rule = createRule({
     defaultOptions: [],
     meta: {
         docs: {
-            description: "Disallow label slot in checkbox",
+            description: "Disallow default slot in dnn-checkbox; all children must have a named slot",
             recommended: true,
             url: "https://github.com/DNNCommunity/dnn-elements/releases/tag/v0.24.0",
         },
         type: "problem",
         messages: {
-            noLabelSlotInCheckbox: "Label slot is not allowed in dnn-checkbox, wrap dnn-checkbox with a label instead."
+            noDefaultSlotInCheckbox: "All children of dnn-checkbox must have a named slot. Default slot is not allowed."
         },
-        fixable: "code",
-        schema: [], // Ensure schema is defined as an empty array or with the appropriate schema definition
+        schema: [],
     },
     create(context) {
         return {
@@ -23,29 +22,25 @@ export const rule = createRule({
                     node.openingElement.name.type === "JSXIdentifier" &&
                     node.openingElement.name.name === "dnn-checkbox"
                 ) {
-                    const innerContent = node.children
-                        .map(child => context.sourceCode.getText(child))
-                        .join("")
-                        .trim();
-    
-                    if (innerContent) {
-                        context.report({
-                            node,
-                            messageId: "noLabelSlotInCheckbox",
-                            fix: fixer => {
-                                const sourceCode = context.sourceCode;
-                                const checkboxText = sourceCode.getText(node.openingElement);
-                                const selfClosing = checkboxText.replace(/>$/, " />");
-                                const innerContent = node.children.map(child => sourceCode.getText(child)).join("").trim();
-
-                                return [
-                                    fixer.insertTextBefore(node, `<label>\n`),
-                                    fixer.replaceText(node, `  ${selfClosing}\n`),
-                                    fixer.insertTextAfter(node, `  ${innerContent}\n`),
-                                    fixer.insertTextAfter(node, `</label>`),
-                                ];
-                            }
-                        });
+                    for (const child of node.children) {
+                        if (
+                            child.type === "JSXText" && child.value.trim() !== ""
+                        ) {
+                            context.report({
+                                node: child,
+                                messageId: "noDefaultSlotInCheckbox",
+                            });
+                        } else if (
+                            child.type === "JSXElement" &&
+                            child.openingElement.attributes.every(attr =>
+                                !(attr.type === "JSXAttribute" && attr.name.name === "slot")
+                            )
+                        ) {
+                            context.report({
+                                node: child,
+                                messageId: "noDefaultSlotInCheckbox",
+                            });
+                        }
                     }
                 }
             }

packages/stencil-library/eslint-plugin/src/types/plugin.ts

@@ -11,7 +11,6 @@ export type Plugin = {
   };
   rules: RulesRecord;
   configs: {
-    recommended: Linter.Config;
     flat: {
       recommended: FlatConfig.Config[];
     }

packages/stencil-library/src/components.d.ts

@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /* tslint:disable */
 /**
  * This is an autogenerated file created by the Stencil compiler.

packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.tsx

@@ -335,7 +335,7 @@ export class DnnAutocomplete {
     }
   }
 
-  handleBlur(): void {
+  private handleBlur(): void {
     var validity = this.inputField.checkValidity();
     this.valid = validity;
     this.fieldset.setValidity(validity, this.inputField.validationMessage);

packages/stencil-library/src/components/dnn-input/dnn-input.tsx

@@ -228,7 +228,7 @@ export class DnnInput {
     return "text";
   }
 
-  handleBlur(): void {
+  private handleBlur(): void {
     this.focused = false
     var validity = this.inputField.checkValidity();
     this.valid = validity;

packages/stencil-library/src/components/dnn-modal/dnn-modal.tsx

@@ -77,7 +77,7 @@ export class DnnModal {
   private mouseY: number;
   private w: number;
   private h: number;
-  northDrag: HTMLDivElement;
+  private northDrag: HTMLDivElement;
   private handleDismiss(){
     this.visible = false;
     this.dismissed.emit();

packages/stencil-library/src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx

@@ -144,7 +144,6 @@ export class DnnVerticalSplitview {
             }}>
             <slot name="left"></slot>
           </div>
-          <dnn-checkbox>Testing</dnn-checkbox>
           <button
             onMouseDown={e => this.handleMouseDown(e)}
             onTouchStart={e => this.handleMouseDown(e)}