refactor: drop lit/react in favor of React built-in support

vaadin · Dec 24, 2024 · 91d8250 · 91d8250
1 parent 97a3f5e
commit 91d8250
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 104 deletions.
diff --git a/dev/kitchen-sink/Row1.tsx b/dev/kitchen-sink/Row1.tsx
@@ -25,7 +25,7 @@ export default function Row1() {
           <div>Accordion content 2</div>
         </AccordionPanel>
       </Accordion>
-      <AvatarGroup prefix="Users: " items={[{ name: 'Jane Roe', abbr: 'JD' }]}></AvatarGroup>
+      <AvatarGroup items={[{ name: 'Jane Roe', abbr: 'JD' }]}></AvatarGroup>
       <Chart title="Chart" style={{ height: '300px' }}>
         <ChartSeries title="Items" type="bar" values={[10, 20, 30]}></ChartSeries>
       </Chart>

diff --git a/dev/pages/Select.tsx b/dev/pages/Select.tsx
@@ -0,0 +1,17 @@
+import { Select } from '../../packages/react-components/src/Select.js';
+
+export default function () {
+  return (
+    <>
+      <Select
+        opened
+        items={[
+          { value: '1', label: 'Option 1' },
+          { value: '2', label: 'Option 2' },
+          { value: '3', label: 'Option 3' },
+        ]}
+        onValueChanged={(e) => console.log(e.detail)}
+      ></Select>
+    </>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "@types/karma-chrome-launcher": "^3.1.4",
     "@types/karma-mocha": "^1.3.4",
     "@types/mocha": "^10.0.10",
-    "@types/react-dom": "^18.3.3",
+    "@types/react-dom": "^19",
     "@types/sinon": "^17.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "chai-as-promised": "^8.0.1",

diff --git a/packages/react-components-pro/package.json b/packages/react-components-pro/package.json
@@ -25,7 +25,6 @@
     "version": "tsx ../../scripts/package-json-version.ts"
   },
   "dependencies": {
-    "@lit/react": "^1.0.6",
     "@vaadin/board": "24.7.0-alpha2",
     "@vaadin/charts": "24.7.0-alpha2",
     "@vaadin/cookie-consent": "24.7.0-alpha2",
@@ -39,10 +38,10 @@
   "author": "Vaadin Ltd.",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {
-    "@types/react": "^18.2.37 || ^19",
-    "@types/react-dom": "^18.2.15 || ^19",
-    "react": "^18.2.0 || ^19",
-    "react-dom": "^18.2.0 || ^19"
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "^19",
+    "react-dom": "^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -26,7 +26,6 @@
     "version": "tsx ../../scripts/package-json-version.ts"
   },
   "dependencies": {
-    "@lit/react": "^1.0.6",
     "@vaadin/a11y-base": "24.7.0-alpha2",
     "@vaadin/accordion": "24.7.0-alpha2",
     "@vaadin/app-layout": "24.7.0-alpha2",
@@ -90,10 +89,10 @@
   "author": "Vaadin Ltd.",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@types/react": "^18.2.37 || ^19",
-    "@types/react-dom": "^18.2.15 || ^19",
-    "react": "^18.2.0 || ^19",
-    "react-dom": "^18.2.0 || ^19"
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "^19",
+    "react-dom": "^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -501,6 +500,10 @@
     "./utils/createComponentWithOrderedProps.d.ts.map": "./utils/createComponentWithOrderedProps.d.ts.map",
     "./utils/createComponentWithOrderedProps.js": "./utils/createComponentWithOrderedProps.js",
     "./utils/createComponentWithOrderedProps.js.map": "./utils/createComponentWithOrderedProps.js.map",
+    "./utils/flushInMicrotask.d.ts": "./utils/flushInMicrotask.d.ts",
+    "./utils/flushInMicrotask.d.ts.map": "./utils/flushInMicrotask.d.ts.map",
+    "./utils/flushInMicrotask.js": "./utils/flushInMicrotask.js",
+    "./utils/flushInMicrotask.js.map": "./utils/flushInMicrotask.js.map",
     "./utils/flushMicrotask.d.ts": "./utils/flushMicrotask.d.ts",
     "./utils/flushMicrotask.d.ts.map": "./utils/flushMicrotask.d.ts.map",
     "./utils/flushMicrotask.js": "./utils/flushMicrotask.js",

diff --git a/packages/react-components/src/Select.tsx b/packages/react-components/src/Select.tsx
@@ -2,6 +2,7 @@ import {
   type ComponentType,
   type ForwardedRef,
   forwardRef,
+  type HTMLAttributes,
   isValidElement,
   type ReactElement,
   type ReactNode,
@@ -31,7 +32,7 @@ function Select(props: SelectProps, ref: ForwardedRef<SelectElement>): ReactElem
 
   // Components with slot attribute should stay in light DOM.
   const slottedChildren = children.filter((child): child is ReactNode => {
-    return isValidElement(child) && child.props.slot;
+    return isValidElement<HTMLAttributes<unknown>>(child) && !!child.props.slot;
   });
 
   // Component without slot attribute should go to the overlay.

diff --git a/packages/react-components/src/renderers/useRenderer.ts b/packages/react-components/src/renderers/useRenderer.ts
@@ -45,7 +45,7 @@ export function useRenderer<P extends {}, W extends WebComponentRenderer>(
   convert?: (props: Slice<Parameters<W>, 1>) => PropsWithChildren<P>,
   config?: RendererConfig<W>,
 ): UseRendererResult<W> {
-  const [map, update] = useReducer<typeof rendererReducer<W>>(rendererReducer, initialState);
+  const [map, update] = useReducer(rendererReducer, initialState);
   const renderer = useCallback(
     ((...args: Parameters<W>) => {
       if (config?.renderMode === 'microtask') {