diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 0342e603b..207fc9c7d 100644 --- 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 `` to render incorrectly with gaps [#1523] - Improved expand/collapse behavior of `` to work more like users expect [#1521] - Improved `` 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 diff --git a/package-lock.json b/package-lock.json index acf21a85a..ba19f7079 100644 --- 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", diff --git a/package.json b/package.json index 9b1e2b809..e1694838b 100644 --- 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", diff --git a/scripts/make-react.js b/scripts/make-react.js index 6169dd341..a5e0f99ad 100644 --- 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 & { - ref?: React.ForwardedRef; - } - > & { 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[0]> { - constructor (...args: Parameters) { - super(...args) - Component.define(tagName) - } - - render () { - const { children, ...props } = this.props - return React.createElement(component, props, children) - } - } - - export default SlComponent as ForwardComponent; + export default reactWrapper `, Object.assign(prettierConfig, { parser: 'babel-ts'