fixed prop name mapping for react wrapper types

.prettierrc.mjs

@@ -3,6 +3,7 @@
  * @type {import("prettier").Config}
  */
 const config = {
+  trailingComma: "all",
   tabWidth: 2,
   semi: true,
   singleQuote: false,

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

@@ -86,6 +86,10 @@ export const rules = {
       tag: "radio-button",
       attr: "disabled",
     },
+    {
+      tag: "my-button",
+      attr: "formnovalidate",
+    },
   ],
 
   "@html-eslint/no-duplicate-attrs": "off",

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

@@ -121,7 +121,14 @@ export type RadioButtonProps = {
 
 export type DeprecatedElementProps = {};
 
-export type MyButtonProps = {};
+export type MyButtonProps = {
+  /** Used to override the form owner's `action` attribute. */
+  formaction?: MyButton["formAction"];
+  /** Used to override the form owner's `method` attribute. */
+  formmethod?: MyButton["formMethod"];
+  /** Used to override the form owner's `novalidate` attribute. */
+  formnovalidate?: MyButton["formNoValidate"];
+};
 
 export type CustomElements = {
   /**

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

@@ -58,7 +58,14 @@ type RadioButtonProps = {
 
 type DeprecatedElementProps = {};
 
-type MyButtonProps = {};
+type MyButtonProps = {
+  /** Used to override the form owner's `action` attribute. */
+  formaction?: MyButton["formAction"];
+  /** Used to override the form owner's `method` attribute. */
+  formmethod?: MyButton["formMethod"];
+  /** Used to override the form owner's `novalidate` attribute. */
+  formnovalidate?: MyButton["formNoValidate"];
+};
 
 export type CustomElements = {
   /**

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

@@ -95,7 +95,14 @@ type RadioButtonProps = {
 
 type DeprecatedElementProps = {};
 
-type MyButtonProps = {};
+type MyButtonProps = {
+  /** Used to override the form owner's `action` attribute. */
+  formaction?: MyButton["formAction"];
+  /** Used to override the form owner's `method` attribute. */
+  formmethod?: MyButton["formMethod"];
+  /** Used to override the form owner's `novalidate` attribute. */
+  formnovalidate?: MyButton["formNoValidate"];
+};
 
 export type CustomElements = {
   /**

demo/lit-app/custom-elements.json

@@ -708,7 +708,65 @@
           "kind": "class",
           "description": "\nA basic button element",
           "name": "MyButton",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "formAction",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Used to override the form owner's `action` attribute.",
+              "attribute": "formaction"
+            },
+            {
+              "kind": "field",
+              "name": "formMethod",
+              "type": {
+                "text": "\"post\" | \"get\" | undefined"
+              },
+              "description": "Used to override the form owner's `method` attribute.",
+              "attribute": "formmethod"
+            },
+            {
+              "kind": "field",
+              "name": "formNoValidate",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Used to override the form owner's `novalidate` attribute.",
+              "attribute": "formnovalidate",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "formaction",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Used to override the form owner's `action` attribute.",
+              "fieldName": "formAction",
+              "propName": "formaction"
+            },
+            {
+              "name": "formmethod",
+              "type": {
+                "text": "\"post\" | \"get\" | undefined"
+              },
+              "description": "Used to override the form owner's `method` attribute.",
+              "fieldName": "formMethod",
+              "propName": "formmethod"
+            },
+            {
+              "name": "formnovalidate",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Used to override the form owner's `novalidate` attribute.",
+              "fieldName": "formNoValidate",
+              "propName": "formnovalidate"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"

demo/lit-app/solid-js.d.ts

@@ -121,7 +121,14 @@ type RadioButtonProps = {
 
 type DeprecatedElementProps = {};
 
-type MyButtonProps = {};
+type MyButtonProps = {
+  /** Used to override the form owner's `action` attribute. */
+  formaction?: MyButton["formAction"];
+  /** Used to override the form owner's `method` attribute. */
+  formmethod?: MyButton["formMethod"];
+  /** Used to override the form owner's `novalidate` attribute. */
+  formnovalidate?: MyButton["formNoValidate"];
+};
 
 export type CustomElements = {
   /**

demo/lit-app/src/my-button/MyButton.ts

@@ -1,4 +1,5 @@
 import { html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
 
 /**
  *
@@ -12,6 +13,16 @@ import { html, LitElement } from "lit";
  * @required type
  */
 export class MyButton extends LitElement {
+  /** Used to override the form owner's `action` attribute. */
+  @property({ attribute: "formaction" }) formAction?: string;
+
+  /** Used to override the form owner's `method` attribute. */
+  @property({ attribute: "formmethod" }) formMethod?: "post" | "get";
+
+  /** Used to override the form owner's `novalidate` attribute. */
+  @property({ attribute: "formnovalidate", type: Boolean, reflect: true })
+  formNoValidate?: boolean;
+
   render() {
     return html` <div>Deprecated Element</div> `;
   }

demo/lit-app/vscode.html-custom-data.json

@@ -140,7 +140,23 @@
     {
       "name": "my-button",
       "description": "\nA basic button element\n---\n",
-      "attributes": [],
+      "attributes": [
+        {
+          "name": "formaction",
+          "description": "Used to override the form owner's `action` attribute.",
+          "values": []
+        },
+        {
+          "name": "formmethod",
+          "description": "Used to override the form owner's `method` attribute.",
+          "values": [{ "name": "post" }, { "name": "get" }]
+        },
+        {
+          "name": "formnovalidate",
+          "description": "Used to override the form owner's `novalidate` attribute.",
+          "values": []
+        }
+      ],
       "references": []
     }
   ]

demo/lit-app/web-types.json

@@ -271,9 +271,44 @@
           "name": "my-button",
           "description": "\nA basic button element\n---\n",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            {
+              "name": "formaction",
+              "description": "Used to override the form owner's `action` attribute.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "formmethod",
+              "description": "Used to override the form owner's `method` attribute.",
+              "value": { "type": "\"post\" | \"get\" | undefined" }
+            },
+            {
+              "name": "formnovalidate",
+              "description": "Used to override the form owner's `novalidate` attribute.",
+              "value": { "type": "boolean | undefined" }
+            }
+          ],
           "events": [],
-          "js": { "properties": [], "events": [] }
+          "js": {
+            "properties": [
+              {
+                "name": "formAction",
+                "description": "Used to override the form owner's `action` attribute.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "formMethod",
+                "description": "Used to override the form owner's `method` attribute.",
+                "type": "\"post\" | \"get\" | undefined"
+              },
+              {
+                "name": "formNoValidate",
+                "description": "Used to override the form owner's `novalidate` attribute.",
+                "type": "boolean | undefined"
+              }
+            ],
+            "events": []
+          }
         }
       ]
     },

packages/react-wrappers/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 1.6.4
+
+- Fixed prop name mapping in types
+
 ## 1.6.3
 
 - Remove conflicting types

packages/react-wrappers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "custom-element-react-wrappers",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "A tool for generating react-compatible wrappers for custom elements",
   "main": "index.js",
   "module": "index.js",

packages/react-wrappers/src/global.ts

@@ -4,6 +4,7 @@ export const MAPPED_PROPS: MappedAttribute[] = [
   {
     name: "className",
     propName: "className",
+    fieldName: "className",
     originalName: "class",
     description:
       "A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`.",
@@ -12,12 +13,14 @@ export const MAPPED_PROPS: MappedAttribute[] = [
   {
     name: "exportparts",
     propName: "exportparts",
+    fieldName: "exportparts",
     description:
       "Contains a space-separated list of the part names of the element that should be exposed on the host element.",
   },
   {
     name: "for",
     propName: "htmlFor",
+    fieldName: "htmlFor",
     description:
       "Used for labels to link them with their inputs (using input id).",
     type: {
@@ -27,6 +30,7 @@ export const MAPPED_PROPS: MappedAttribute[] = [
   {
     name: "key",
     propName: "key",
+    fieldName: "key",
     description:
       "Used to help React identify which items have changed, are added, or are removed within a list.",
     type: {
@@ -36,12 +40,14 @@ export const MAPPED_PROPS: MappedAttribute[] = [
   {
     name: "part",
     propName: "part",
+    fieldName: "part",
     description:
       "Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element.",
   },
   {
     name: "ref",
     propName: "ref",
+    fieldName: "ref",
     description:
       "A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component.",
     type: {
@@ -51,6 +57,7 @@ export const MAPPED_PROPS: MappedAttribute[] = [
   {
     name: "tabindex",
     propName: "tabIndex",
+    fieldName: "tabIndex",
     description:
       "Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation.",
     type: {
@@ -81,4 +88,12 @@ export const BASE_PROPS = [
   "onBlur",
 ];
 
-export const NON_ATTR_BASE_PROPS = ["exportparts", "key", "part", "ref"];
+export const NON_ATTR_BASE_PROPS = [
+  "className",
+  "exportparts",
+  "htmlFor",
+  "key",
+  "part",
+  "ref",
+  "tabIndex",
+];

packages/react-wrappers/src/utils.ts

@@ -164,7 +164,7 @@ export type ScopeProps = {
   prefix?: string, 
   /** Adds a prefix to the custom element tag name */
   suffix?: string, 
-  children?: ReactNode 
+  children?: React.ReactNode 
 };
 
 /**