fix: Don't pass children to leaf nodes

Fixes #25 Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
bfanger · Apr 27, 2023 · 783b108 · 783b108
1 parent e42f6bd
commit 783b108
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/bfanger/svelte-preprocess-react.git"
   },
-  "version": "0.14.1",
+  "version": "0.15.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -52,13 +52,14 @@
     "@sveltejs/package": "1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/svelte": "^3.2.2",
-    "@types/react-dom": "^18.2.1",
     "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
     "@vitejs/plugin-react": "3",
     "autoprefixer": "^10.4.14",
     "concurrently": "^8.0.1",
+    "eslint": "^8.39.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.8.0",
@@ -68,22 +69,21 @@
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-svelte3": "^4.0.0",
-    "eslint": "^8.39.0",
     "husky": "^8.0.3",
     "jsdom": "^21.1.1",
     "lint-staged": "^13.2.2",
     "postcss": "^8.4.23",
-    "prettier-plugin-svelte": "^2.10.0",
     "prettier": "^2.8.8",
-    "react-dom": "^18.2.0",
+    "prettier-plugin-svelte": "^2.10.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.62.1",
-    "svelte-check": "^3.2.0",
     "svelte": "^3.58.0",
+    "svelte-check": "^3.2.0",
     "svelte2tsx": "^0.6.11",
     "typescript": "^5.0.4",
-    "vite-tsconfig-paths": "^4.2.0",
     "vite": "^4.3.3",
+    "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.30.1"
   },
   "dependencies": {

diff --git a/src/lib/internal/Bridge.ts b/src/lib/internal/Bridge.ts
@@ -21,33 +21,46 @@ const Bridge: React.FC<BridgeProps> = ({ createPortal, node }) => {
   if (!target) {
     return null;
   }
-  const children: React.ReactElement[] = node.nodes.map((subnode) => {
-    return React.createElement(Bridge, {
-      key: `bridge${subnode.key}`,
-      createPortal,
-      node: subnode,
+  let children: React.ReactElement[] | undefined;
+  if (node.nodes.length === 0 && slot === undefined && hooks.length === 0) {
+    if (props.children) {
+      children = props.children;
+      props = { ...props };
+      delete props.children;
+    }
+  } else {
+    children = node.nodes.map((subnode) => {
+      return React.createElement(Bridge, {
+        key: `bridge${subnode.key}`,
+        createPortal,
+        node: subnode,
+      });
     });
-  });
-  if (props.children) {
-    children.push(props.children);
-    props = { ...props };
-    delete props.children;
-  }
-  if (slot) {
-    children.push(React.createElement(Child, { key: "svelte-slot", el: slot }));
-  }
-  if (hooks.length >= 0) {
-    children.push(
-      ...hooks.map(({ Hook, key }) =>
-        React.createElement(Hook, { key: `hook${key}` })
-      )
-    );
+    if (props.children) {
+      children.push(props.children);
+      props = { ...props };
+      delete props.children;
+    }
+    if (slot) {
+      children.push(
+        React.createElement(Child, { key: "svelte-slot", el: slot })
+      );
+    }
+    if (hooks.length >= 0) {
+      children.push(
+        ...hooks.map(({ Hook, key }) =>
+          React.createElement(Hook, { key: `hook${key}` })
+        )
+      );
+    }
   }
   return createPortal(
     React.createElement(
       SvelteToReactContext.Provider,
       { value: node.contexts },
-      React.createElement(node.reactComponent, props, children)
+      children === undefined
+        ? React.createElement(node.reactComponent, props)
+        : React.createElement(node.reactComponent, props, children)
     ),
     target
   );

diff --git a/src/routes/input/+page.svelte b/src/routes/input/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  let value = "";
+  function onChange(e: { target: { value: string } }) {
+    value = e.target.value;
+  }
+</script>
+
+<react:input {value} on:change={onChange} />
+
+{value}