Make sure lib is only one file

relative imports wont work with anywidget

Author: saulshanabrook

package.json

@@ -1,6 +1,6 @@
 {
   "name": "egraph-visualizer",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/saulshanabrook/egraph-visualizer.git"
@@ -13,6 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@anywidget/types": "0.2.0",
     "@headlessui/react": "2.1.3",
     "@heroicons/react": "2.1.5",
     "@xyflow/react": "12.1.1",
@@ -26,7 +27,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
-    "@jupyter-widgets/base": "6.0.10",
     "@types/node": "22.5.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -45,6 +45,6 @@
   "files": [
     "dist"
   ],
-  "main": "dist/dom.js",
+  "main": "dist/index.js",
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/App.tsx

@@ -1,7 +1,7 @@
 import { use, useState } from "react";
 import "./App.css";
 import Monaco from "./Monaco";
-import Visualizer from "./Visualizer";
+import { Visualizer } from "./Visualizer";
 import DefaultCode from "/examples/manual/homepage.json?raw";
 
 function App() {

src/Visualizer.tsx

@@ -30,6 +30,8 @@ import {
 } from "@xyflow/react";
 
 import "@xyflow/react/dist/style.css";
+import { AnyModel } from "@anywidget/types";
+import { createRoot } from "react-dom/client";
 // Elk has a *huge* amount of options to configure. To see everything you can
 // tweak check out:
 //
@@ -701,7 +703,7 @@ function LayoutFlow({
   );
 }
 
-function Visualizer({ egraph, height = null, resize = false }: { egraph: string; height?: string | null; resize?: boolean }) {
+export function Visualizer({ egraph, height = null, resize = false }: { egraph: string; height?: string | null; resize?: boolean }) {
   const [outerElem, setOuterElem] = useState<HTMLDivElement | null>(null);
   const [innerElem, setInnerElem] = useState<HTMLDivElement | null>(null);
 
@@ -731,4 +733,43 @@ function Visualizer({ egraph, height = null, resize = false }: { egraph: string;
   );
 }
 
-export default Visualizer;
+// Put these both in one file, so its emitted as a single chunk and anywidget doesn't have to import another file
+
+/// Render anywidget model to the given element
+// Must be named `render` to work as an anywidget module
+// https://anywidget.dev/en/afm/#lifecycle-methods
+// eslint-disable-next-line react-refresh/only-export-components
+export function render({ model, el }: { el: HTMLElement; model: AnyModel }) {
+  const root = createRoot(el);
+  function render() {
+    startTransition(() => {
+      root.render(<Visualizer egraph={model.get("egraph")} height="600px" resize />);
+    });
+  }
+  render();
+  model.on("change:egraph", render);
+
+  return () => {
+    model.off("change:egraph", render);
+    root.unmount();
+  };
+}
+
+/// Mount the visualizer to the given element
+/// Call `render` to render a new egraph
+/// Call `unmount` to unmount the visualizer
+// eslint-disable-next-line react-refresh/only-export-components
+export function mount(element: HTMLElement): { render: (egraph: string) => void; unmount: () => void } {
+  const root = createRoot(element);
+
+  function render(egraph: string) {
+    startTransition(() => {
+      root.render(<Visualizer egraph={egraph} />);
+    });
+  }
+
+  function unmount() {
+    root.unmount();
+  }
+  return { render, unmount };
+}

src/anywidget.tsx

@@ -8,15 +8,16 @@ export default defineConfig({
   base: "./",
   build: {
     lib: {
-      entry: [resolve(__dirname, "src/anywidget.tsx"), resolve(__dirname, "src/dom.tsx")],
+      entry: [resolve(__dirname, "src/Visualizer.tsx")],
       formats: ["es"],
     },
     rollupOptions: {
       input: {
         main: resolve(__dirname, "index.html"),
-        anywidget: resolve(__dirname, "src/anywidget.tsx"),
-        dom: resolve(__dirname, "src/dom.tsx"),
+        index: resolve(__dirname, "src/Visualizer.tsx"),
       },
+      // allow extension of entry signatures so Visualizer.tsx can be outputed as index.js and not include any imports
+      preserveEntrySignatures: "allow-extension",
     },
   },