Merge pull request #135 from break-stuff/react-wrappers-fix-base-types

React wrappers fix base types
break-stuff · Jun 25, 2024 · d67d172 · d67d172
2 parents 67701e5 + dc1e26e
commit d67d172
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 9 deletions.
diff --git a/demo/lit-app/custom-elements-manifest.config.mjs b/demo/lit-app/custom-elements-manifest.config.mjs
@@ -46,8 +46,7 @@ export default {
     }),
     customElementReactWrapperPlugin({
       outdir: "./dist/react",
-      modulePath: (className, tagName) => `../${tagName}/${tagName}.js`,
-      reactProps: true,
+      modulePath: (className, tagName) => `../${tagName}/${className}.js`,
       scopedTags: true,
       ssrSafe: true
     }),

diff --git a/demo/lit-app/package.json b/demo/lit-app/package.json
@@ -33,6 +33,8 @@
     "custom-elements-manifest-deprecator": "*",
     "eslint": "^9.3.0",
     "eslint-plugin-custom-element": "*",
+    "react": "^18.3.1",
+    "react-dom": "18.3.1",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-wrappers/CHANGELOG.md b/packages/react-wrappers/CHANGELOG.md
@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## 1.6.2
+
+- Fix redundant base types
+- Add docs to `ScopeProvider` component
+
 ## 1.6.1
 
 - Fixed null scope error

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.6.1",
+  "version": "1.6.2",
   "description": "A tool for generating react-compatible wrappers for custom elements",
   "main": "index.js",
   "module": "index.js",

diff --git a/packages/react-wrappers/src/global.ts b/packages/react-wrappers/src/global.ts
@@ -89,3 +89,5 @@ export const BASE_PROPS = [
   "onFocus",
   "onBlur",
 ];
+
+export const NON_ATTR_BASE_PROPS = ["exportparts", "key", "part", "ref"];
diff --git a/packages/react-wrappers/src/utils.ts b/packages/react-wrappers/src/utils.ts
@@ -159,8 +159,18 @@ export function ScopeProvider({ prefix, suffix, children }) {
 `;
 
   const scopeProviderTypes = `
-export type ScopeProps = { prefix?: string, suffix?: string, children?: ReactNode }
-
+export type ScopeProps = { 
+  /** Adds a prefix to the custom element tag name */
+  prefix?: string, 
+  /** Adds a prefix to the custom element tag name */
+  suffix?: string, 
+  children?: ReactNode 
+};
+
+/** 
+ * Provides a mechanism to add a custom prefix or suffix to to child components. 
+ * This prevents tag name collisions with components from different versions of the same library. 
+ */
 export function ScopeProvider(props: ScopeProps): JSX.Element;
 `;
 

diff --git a/packages/react-wrappers/src/wrapper-generator.ts b/packages/react-wrappers/src/wrapper-generator.ts
@@ -1,4 +1,4 @@
-import { BASE_PROPS, MAPPED_PROPS } from "./global.js";
+import { BASE_PROPS, MAPPED_PROPS, NON_ATTR_BASE_PROPS } from "./global.js";
 import {
   EventName,
   MappedAttribute,
@@ -440,7 +440,7 @@ function getExtendedProps() {
   return config.reactProps === true
     ? "extends React.AllHTMLAttributes<HTMLElement>"
     : `extends Pick<React.AllHTMLAttributes<HTMLElement>, ${[
-        ...BASE_PROPS,
+        ...BASE_PROPS.filter(x => !NON_ATTR_BASE_PROPS.includes(x)),
         ...(config.reactProps || []),
       ]
         .map((x) => `'${x}'`)