From fe2fa87cb519952437a5c2db399a954c93c796ce Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Mon, 17 Mar 2025 13:46:38 +1100
Subject: [PATCH] feat: add ReactAdaptor.svelte

---
 package.json                                  |  2 ++
 .../components/utils/ReactAdapter.svelte      | 27 +++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 src/interface/components/utils/ReactAdapter.svelte

diff --git a/package.json b/package.json
index 08e34ad9..f8225af7 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,8 @@
     "@bedframe/cli": "^0.0.91",
     "@crxjs/vite-plugin": "2.0.0-beta.25",
     "@types/mime-types": "^2.1.4",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "cross-env": "^7.0.3",
     "dependency-cruiser": "^16.10.0",
     "eslint": "9.22.0",
diff --git a/src/interface/components/utils/ReactAdapter.svelte b/src/interface/components/utils/ReactAdapter.svelte
new file mode 100644
index 00000000..2a7de2fc
--- /dev/null
+++ b/src/interface/components/utils/ReactAdapter.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import React from "react";
+  import ReactDOM from "react-dom";
+  import { onDestroy, onMount } from "svelte";
+
+  const e = React.createElement;
+  let container: HTMLDivElement;
+
+  onMount(() => {
+    const { el, children, class: _, ...props } = $$props;
+    try {
+      ReactDOM.render(e(el, props, children), container);
+    } catch (err) {
+      console.warn(`react-adapter failed to mount.`, { err });
+    }
+  });
+
+  onDestroy(() => {
+    try {
+      ReactDOM.unmountComponentAtNode(container);
+    } catch (err) {
+      console.warn(`react-adapter failed to unmount.`, { err });
+    }
+  });
+</script>
+
+<div bind:this={container} class={$$props.class}></div>
\ No newline at end of file