remove extra react component wrapper, upgrade to v2 of @lit-labs/react (#1531)

* remove extra react wrapper, upgrade to v2 of @lit-labs/react, call define in module. * add changelog entry * prettier
2026-01-12 04:09:12 +00:00 · 2023-08-22 11:26:54 -04:00
parent 5d72bbd162
commit 87837df35c
4 changed files with 24 additions and 46 deletions
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -20,6 +20,8 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a regression that caused `<sl-radio-button>` to render incorrectly with gaps [#1523]
 - Improved expand/collapse behavior of `<sl-tree>` to work more like users expect [#1521]
 - Improved `<sl-menu-item>` so labels truncate properly instead of getting chopped and overflowing
+- Removed the extra `React.Component` around `@lit-labs/react` wrapper. [#1531]
+- Upgrade `@lit-labs/react` to v2.0.1. [#1531]

 ## 2.7.0

--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
      "dependencies": {
        "@ctrl/tinycolor": "^3.5.0",
        "@floating-ui/dom": "^1.2.1",
-        "@lit-labs/react": "^1.2.1",
+        "@lit-labs/react": "^2.0.1",
        "@shoelace-style/animations": "^1.1.0",
        "@shoelace-style/localize": "^3.1.1",
        "composed-offset-position": "^0.0.4",
@@ -1474,9 +1474,12 @@
      }
    },
    "node_modules/@lit-labs/react": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
-      "integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.1.tgz",
+      "integrity": "sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==",
+      "peerDependencies": {
+        "@types/react": "17 || 18"
+      }
    },
    "node_modules/@lit-labs/ssr-dom-shim": {
      "version": "1.1.1",
@@ -2270,8 +2273,7 @@
    "node_modules/@types/prop-types": {
      "version": "15.7.4",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
-      "dev": true
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
    },
    "node_modules/@types/qs": {
      "version": "6.9.7",
@@ -2289,7 +2291,6 @@
      "version": "18.0.26",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
      "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
-      "dev": true,
      "dependencies": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@@ -2317,8 +2318,7 @@
    "node_modules/@types/scheduler": {
      "version": "0.16.2",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
    },
    "node_modules/@types/semver": {
      "version": "7.5.0",
@@ -5685,8 +5685,7 @@
    "node_modules/csstype": {
      "version": "3.0.10",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-      "dev": true
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
    },
    "node_modules/custom-element-jet-brains-integration": {
      "version": "1.1.0",
@@ -18291,9 +18290,10 @@
      }
    },
    "@lit-labs/react": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
-      "integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.1.tgz",
+      "integrity": "sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==",
+      "requires": {}
    },
    "@lit-labs/ssr-dom-shim": {
      "version": "1.1.1",
@@ -18998,8 +18998,7 @@
    "@types/prop-types": {
      "version": "15.7.4",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
-      "dev": true
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
    },
    "@types/qs": {
      "version": "6.9.7",
@@ -19017,7 +19016,6 @@
      "version": "18.0.26",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
      "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
-      "dev": true,
      "requires": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@@ -19045,8 +19043,7 @@
    "@types/scheduler": {
      "version": "0.16.2",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
    },
    "@types/semver": {
      "version": "7.5.0",
@@ -21514,8 +21511,7 @@
    "csstype": {
      "version": "3.0.10",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-      "dev": true
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
    },
    "custom-element-jet-brains-integration": {
      "version": "1.1.0",
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
  "dependencies": {
    "@ctrl/tinycolor": "^3.5.0",
    "@floating-ui/dom": "^1.2.1",
-    "@lit-labs/react": "^1.2.1",
+    "@lit-labs/react": "^2.0.1",
    "@shoelace-style/animations": "^1.1.0",
    "@shoelace-style/localize": "^3.1.1",
    "composed-offset-position": "^0.0.4",
--- a/scripts/make-react.js
+++ b/scripts/make-react.js
@@ -51,18 +51,11 @@ components.map(component => {
      ${eventImports}
      ${eventExports}

-      export type ForwardComponent<
-        Element extends HTMLElement,
-        ReactComponent extends React.ElementType
-      > = React.JSXElementConstructor<
-        React.ComponentPropsWithoutRef<ReactComponent> & {
-          ref?: React.ForwardedRef<Element>;
-        }
-      > & { displayName?: string }
-
      const tagName = '${component.tagName}'
+      Component.define('${component.tagName}')

-      const component = createComponent({
+      ${jsDoc}
+      const reactWrapper = createComponent({
        tagName,
        elementClass: Component,
        react: React,
@@ -72,20 +65,7 @@ components.map(component => {
        displayName: "${component.name}"
      })

-      ${jsDoc}
-      class SlComponent extends React.Component<Parameters<typeof component>[0]> {
-        constructor (...args: Parameters<typeof component>) {
-          super(...args)
-          Component.define(tagName)
-        }
-
-        render () {
-          const { children, ...props } = this.props
-          return React.createElement(component, props, children)
-        }
-      }
-
-      export default SlComponent as ForwardComponent<Component, typeof SlComponent>;
+      export default reactWrapper
    `,
    Object.assign(prettierConfig, {
      parser: 'babel-ts'