chore: React 19 support

index.d.ts

@@ -1,8 +1,9 @@
 import { HtmrOptions as Options } from './src/types';
+import { ReactNode } from 'react';
 
 export default function htmr(
   html: string,
   options?: Partial<Options>
-): JSX.Element;
+): ReactNode;
 
 export type HtmrOptions = Partial<Options>;

package.json

@@ -23,7 +23,7 @@
     "test": "npm-run-all clean build && npm-run-all -p test:coverage test:size typecheck bench",
     "test:coverage": "jest --coverage --no-cache --ci --runInBand",
     "test:watch": "jest --watch --no-cache",
-    "test:size": "bundlesize",
+    "test:size": "size-limit",
     "typecheck": "tsc --noEmit"
   },
   "repository": {
@@ -61,10 +61,11 @@
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@testing-library/react": "^11.2.5",
-    "@types/react": "^17.0.2",
+    "@size-limit/preset-small-lib": "^11.2.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.0.0",
     "benchmark": "^2.1.4",
-    "bundlesize": "^0.17.1",
     "common-tags": "^1.8.0",
     "domhandler": "^4.0.0",
     "husky": "^5.0.9",
@@ -73,20 +74,21 @@
     "pinst": "^2.1.4",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^2.6.1",
     "rollup": "^1.10.1",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-terser": "^5.0.0",
     "rollup-plugin-typescript2": "^0.21.0",
-    "typescript": "^4.7.4"
+    "size-limit": "^11.2.0",
+    "typescript": "^5"
   },
-  "bundlesize": [
+  "size-limit": [
     {
       "path": "./lib/htmr.browser.js",
-      "maxSize": "2 kB"
+      "limit": "2 kB"
     }
-  ]
+  ],
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/index.browser.ts

@@ -174,7 +174,7 @@ function reactCreateElement(
   transform: HtmrOptions['transform'],
   children: any = null
 ) {
-  const customElement = transform[tag];
+  const customElement = transform[tag as keyof typeof transform];
   const defaultTransform = transform._;
 
   return customElement

src/index.ts

@@ -91,7 +91,23 @@ function toReactNode(
         .filter(Boolean);
 
       // self closing component doesn't have children
-      const children = childNodes.length === 0 ? null : childNodes;
+      let children: ReactNode | null =
+        childNodes.length === 0 ? null : childNodes;
+
+      // React requires script and style elements to have a single string child
+      // instead of an array of children
+      if (
+        (name === 'script' || name === 'style') &&
+        children &&
+        Array.isArray(children)
+      ) {
+        // Join all text content into a single string
+        const textContent = node.children
+          .filter((child: any) => child.type === 'text')
+          .map((child: any) => child.data)
+          .join('');
+        children = textContent || null;
+      }
 
       if (customElement) {
         return React.createElement(customElement as any, props, children);

src/types.ts

@@ -1,15 +1,14 @@
 import {
-  ReactHTML,
-  ReactSVG,
   ReactNode,
   ComponentType,
   ComponentProps,
   AllHTMLAttributes,
+  JSX,
 } from 'react';
 
-export type HTMLTags = keyof ReactHTML;
-export type SVGTags = keyof ReactSVG;
-type AllTags = HTMLTags | SVGTags;
+export type HTMLTags = keyof JSX.IntrinsicElements;
+export type SVGTags = keyof JSX.IntrinsicElements;
+type AllTags = keyof JSX.IntrinsicElements;
 
 type HTMLTransform = {
   [tag in AllTags]: AllTags | ComponentType<Omit<ComponentProps<tag>, 'ref'>>;