Proof of concept of a web component running inside of a react app

Author: jakedahn

typescript/packages/jumble/package.json

@@ -7,8 +7,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "npx vite build",
-    "dev": "npx vite",
+    "build": "vite build",
+    "dev": "vite",
     "test": "vitest",
     "check": "tsc --build"
   },
@@ -21,6 +21,7 @@
   },
   "homepage": "https://github.com/commontoolsinc/labs#readme",
   "dependencies": {
+    "@commontools/ui": "workspace:*",
     "@codemirror/lang-markdown": "^6.3.2",
     "@react-spring/web": "^9.7.5",
     "@tailwindcss/typography": "^0.5.16",

typescript/packages/jumble/src/main.tsx

@@ -6,12 +6,16 @@ import Home from "@/views/Home.tsx";
 import PhotoFlowIndex from "@/views/experiments/photoflow/Index.tsx";
 import PhotoSetView from "@/views/experiments/photoflow/PhotoSetView.tsx";
 import NewSpell from "@/views/experiments/photoflow/NewSpell.tsx";
+import Shell from "@/views/Shell.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Router>
       <Routes>
         <Route path="/" element={<Home />} />
+
+        <Route path="/shell" element={<Shell />} />
+
         <Route path="/experiments/photoflow" element={<PhotoFlowIndex />} />
         <Route path="/experiments/photoflow/:photosetName" element={<PhotoSetView />} />
         <Route path="/experiments/photoflow/:photosetName/spells/new" element={<NewSpell />} />

typescript/packages/jumble/src/react-app-env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react-scripts" />
+
+import { JSX } from "react";
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elementName: string]: React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & {
+        class?: string;
+      };
+    }
+  }
+}

typescript/packages/jumble/src/views/Shell.tsx

@@ -0,0 +1,17 @@
+// This is all you need to import/register the @commontools/ui web components
+import "@commontools/ui";
+
+const handleClick = () => {
+  console.log("clicked");
+};
+
+export default function Shell() {
+  return (
+    <div className="h-full relative">
+      {/* You still use class="foo" with web components. */}
+      <common-button class="wat" onClick={handleClick}>
+        click me
+      </common-button>
+    </div>
+  );
+}

typescript/packages/jumble/vite.config.ts

@@ -5,11 +5,12 @@ import tailwindcss from "@tailwindcss/vite";
 
 // https://vite.dev/config/
 export default defineConfig({
-  // @ts-ignore
   plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
+      // NOTE: We need to import local modules from the pnpm workspace.
+      "@commontools/ui": path.resolve(__dirname, "../common-ui/src/index.ts"),
     },
   },
 });