Merge pull request #45 from break-stuff/react-wrappers-attribute-mapping

React wrappers attribute mapping
break-stuff · Dec 16, 2023 · 76a283b · 76a283b
2 parents 108bd02 + da353eb
commit 76a283b
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 2 deletions.
diff --git a/demo/lit-app/custom-element-jsx.d.ts b/demo/lit-app/custom-element-jsx.d.ts
@@ -81,6 +81,8 @@ type RadioButtonProps = {
   disabled?: RadioButton["disabled"];
   /** A lookup type for example */
   target?: RadioButton["target"];
+  /** A mapped attribute for react wrapper example */
+  for?: RadioButton["for"];
 };
 
 export type CustomElements = {

diff --git a/demo/lit-app/custom-element-vuejs.d.ts b/demo/lit-app/custom-element-vuejs.d.ts
@@ -43,6 +43,8 @@ type RadioButtonProps = {
   disabled?: RadioButton["disabled"];
   /** A lookup type for example */
   target?: RadioButton["target"];
+  /** A mapped attribute for react wrapper example */
+  for?: RadioButton["for"];
 };
 
 export type CustomElements = {

diff --git a/demo/lit-app/custom-elements-manifest.config.mjs b/demo/lit-app/custom-elements-manifest.config.mjs
@@ -61,6 +61,9 @@ export default {
           type: "React.FocusEventHandler",
         },
       ],
+      attributeMapping: {
+        "for": "_for",
+      }
     }),
     customElementVuejsPlugin({
       componentTypePath: (name, tag) => `./dist/${tag}/${name}.d.ts`,

diff --git a/demo/lit-app/custom-elements.json b/demo/lit-app/custom-elements.json
@@ -427,6 +427,15 @@
               "expandedType": {
                 "text": "'_blank' | '_self' | '_parent' | '_top' | undefined"
               }
+            },
+            {
+              "kind": "field",
+              "name": "for",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "A mapped attribute for react wrapper example",
+              "attribute": "for"
             }
           ],
           "attributes": [
@@ -460,6 +469,14 @@
                 "text": "'_blank' | '_self' | '_parent' | '_top' | undefined"
               },
               "propName": "target"
+            },
+            {
+              "name": "for",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "A mapped attribute for react wrapper example",
+              "fieldName": "for"
             }
           ],
           "superclass": {

diff --git a/demo/lit-app/solid-js.d.ts b/demo/lit-app/solid-js.d.ts
@@ -81,6 +81,8 @@ type RadioButtonProps = {
   disabled?: RadioButton["disabled"];
   /** A lookup type for example */
   target?: RadioButton["target"];
+  /** A mapped attribute for react wrapper example */
+  for?: RadioButton["for"];
 };
 
 export type CustomElements = {

diff --git a/demo/lit-app/src/radio-button/RadioButton.ts b/demo/lit-app/src/radio-button/RadioButton.ts
@@ -23,6 +23,9 @@ export class RadioButton extends LitElement {
   /** A lookup type for example */
   @property() target?: Target;
 
+  /** A mapped attribute for react wrapper example */
+  @property() for?: string;
+
   render() {
     return html`
       <h2>Hello world!</h2>

diff --git a/demo/lit-app/vscode.html-custom-data.json b/demo/lit-app/vscode.html-custom-data.json
@@ -112,6 +112,11 @@
             { "name": "_parent" },
             { "name": "_top" }
           ]
+        },
+        {
+          "name": "for",
+          "description": "A mapped attribute for react wrapper example",
+          "values": []
         }
       ],
       "references": []

diff --git a/demo/lit-app/web-types.json b/demo/lit-app/web-types.json
@@ -197,6 +197,11 @@
               "value": {
                 "type": "'_blank' | '_self' | '_parent' | '_top' | undefined"
               }
+            },
+            {
+              "name": "for",
+              "description": "A mapped attribute for react wrapper example",
+              "value": { "type": "string | undefined" }
             }
           ],
           "slots": [
@@ -224,6 +229,11 @@
                 "value": {
                   "type": "'_blank' | '_self' | '_parent' | '_top' | undefined"
                 }
+              },
+              {
+                "name": "for",
+                "description": "A mapped attribute for react wrapper example",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []

diff --git a/packages/react-wrappers/CHANGELOG.md b/packages/react-wrappers/CHANGELOG.md
@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## 1.1.0
+
+- Changed attribute binding to add attributes before rendering
+- Fixed attribute mapping error
+
 ## 1.0.6
 
 - Fixed missing details in component description

diff --git a/packages/react-wrappers/package.json b/packages/react-wrappers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "custom-element-react-wrappers",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "A tool for generating react-compatible wrappers for custom elements",
   "main": "index.js",
   "module": "index.js",

diff --git a/packages/react-wrappers/src/utils.ts b/packages/react-wrappers/src/utils.ts
@@ -108,7 +108,7 @@ export function saveReactUtils(outdir: string) {
 import { useEffect, useLayoutEffect } from "react";
 
 export function useAttribute(targetElement, attrName, value) {
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (value !== undefined && attrName !== 'style' && targetElement.current?.getAttribute(attrName) !== String(value)) {
       targetElement.current?.setAttribute(attrName, String(value));
     }

diff --git a/packages/react-wrappers/src/wrapper-generator.ts b/packages/react-wrappers/src/wrapper-generator.ts
@@ -80,6 +80,7 @@ function updateConfig(options: Options) {
   config.exclude = options.exclude || [];
   config.typesSrc = options.typesSrc || "types";
   config.modulePath = options.modulePath;
+  config.attributeMapping = options.attributeMapping || {};
   globalEvents = [...baseEvents, ...(options.globalEvents || [])];
 }