Sample with react components

package.json

@@ -59,6 +59,8 @@
     "postinstall-postinstall": "^2.1.0",
     "qunit": "^2.19.3",
     "qunit-dom": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "route-recognizer": "^0.3.4",
     "router_js": "^8.0.3",
     "tailwindcss": "^3.2.4",

src/components/HelloWorld/index.ts

@@ -6,6 +6,7 @@ import type DateService from '../../services/date';
 import TemplateOnlyComponent from '@/components/OnlyTemplate/component.hbs';
 import './style.css';
 import Select from '@/components/Select';
+import Hello from '@/components/React/HelloWorld';
 import type IntlService from 'ember-intl/addon/services/intl';
 const calculateSummary = (a: number, b: number) => `${a}+${b}=${a + b}`;
 export default class HelloWorld extends Component {
@@ -18,7 +19,7 @@ export default class HelloWorld extends Component {
 
   static template = precompileTemplate(
     `
-      <h1 class="hello-world">{{t 'hello.world'}}</h1>
+      <Hello @name={{t 'hello.world'}} />
       <pre class="font-mono">{{format-date this.dateService._date}} {{this.dateService.date}}</pre>
 
       {{if (eq "a" "a") "equal" "not equal"}}
@@ -41,6 +42,7 @@ export default class HelloWorld extends Component {
       isStrictMode: true,
       scope: () => ({
         Local,
+        Hello,
         Select,
         calculateSummary,
         TemplateOnlyComponent

src/components/React/HelloWorld/index.tsx

@@ -0,0 +1,6 @@
+import { r } from '@/components/React';
+import React from 'react';
+const Hello = ({name}) => {
+    return <h1 className="hello-world">{name}</h1>;
+}
+export default r(Hello);

src/components/React/index.tsx

@@ -0,0 +1,76 @@
+import Component from '@glimmer/component';
+import Ember from 'ember';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { precompileTemplate } from '@ember/template-compilation';
+import { ARGS_SET } from '@glimmer/component';
+import { setComponentTemplate } from '@glimmer/manager';
+import { DEBUG } from '@glimmer/env';
+
+class ReactComponent extends Component {
+  constructor(owner: any, args: any, app: any) {
+    super(owner, args);
+    this.app = app;
+  }
+  id = `r-${Math.random().toString(36).substr(2, 9)}`;
+  root: any;
+  app: any;
+  get node() {
+    return document.querySelector(`div[data-id="${this.id}"]`);
+  }
+  renderReact = () => {
+    if (this.root) {
+        this.root.unmount();
+        this.root = null;
+    }
+    const root = this.root || createRoot(this.node);
+    root.render(
+      React.createElement(React.Fragment, {}, wrapper(this.args.named, this.app))
+    );
+    this.root = root;
+  };
+  willDestroy(): void {
+    this.root.unmount();
+  }
+}
+const seenComponents = new WeakSet();
+
+export function r(component: any) {
+    if (seenComponents.has(component)) {
+        return component;
+    }
+    if (!seenComponents.has(component)) {
+        seenComponents.add(component);
+    }
+
+    Ember._setComponentManager((owner: any) => {
+        return {
+          capabilities: Ember._componentManagerCapabilities('3.13'),
+          createComponent(factory: any, args: any) {
+            if (DEBUG) {
+                ARGS_SET.set(args, true);
+            }
+            return new ReactComponent(owner, args, factory);
+          },
+          getContext(component: any) {
+            return component;
+          },
+        };
+      }, component);
+
+  return setComponentTemplate(
+    precompileTemplate(`
+        <div data-id={{this.id}}></div>
+        {{this.renderReact}}
+    `),
+    component
+  );
+}
+
+export const wrapper = (props, App) => {
+    return (
+        <App {...props} />
+    );
+}
+
+

vite.config.ts

@@ -230,7 +230,7 @@ export default defineConfig(({ mode }) => {
       // babel config for app code
       babel({
         // regexp to match files in src folder
-        filter: /^.*src\/.*\.(ts|js|hbs)$/,
+        filter: /^.*src\/.*\.(ts|js|hbs|tsx)$/,
         babelConfig: {
           babelrc: false,
           configFile: false,

yarn.lock

@@ -5979,7 +5979,7 @@ lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6950,6 +6950,21 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -7302,6 +7317,13 @@ safer-buffer@^2.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"