Add tldraw example (#55)

* Add tldraw example * Drop devtools
zephraph · Sep 25, 2024 · f4a8bf0 · f4a8bf0
1 parent f9ebf8d
commit f4a8bf0
Show file tree

Hide file tree

Showing 3 changed files with 189 additions and 2 deletions.
diff --git a/deno.json b/deno.json
@@ -8,9 +8,10 @@
     "gen:rust": "cargo test",
     "gen:deno": "deno run -A scripts/generate-schema.ts && deno run -A scripts/sync-versions.ts",
     "build": "deno task gen && cargo build -F transparent -F devtools",
-    "run": "export WEBVIEW_BIN=./target/debug/deno-webview && deno run -E=WEBVIEW_BIN --allow-run=$WEBVIEW_BIN",
+    "run": "export WEBVIEW_BIN=./target/debug/deno-webview && deno run -E -R --allow-run",
     "example:simple": "deno task run examples/simple.ts",
-    "example:ipc": "deno task run examples/ipc.ts"
+    "example:ipc": "deno task run examples/ipc.ts",
+    "example:tldraw": "deno task run examples/tldraw.ts"
   },
   "publish": {
     "include": ["README.md", "LICENSE", "src/**/*.ts"]

diff --git a/deno.lock b/deno.lock
diff --git a/examples/tldraw.ts b/examples/tldraw.ts
@@ -0,0 +1,60 @@
+import { createWebView } from "../src/lib.ts";
+import * as esbuild from "npm:esbuild";
+
+const tldrawApp = `
+import { Tldraw } from "tldraw";
+import { createRoot } from "react-dom/client";
+
+function App() {
+  return (
+    <>
+      <div style={{ position: "absolute", inset: 0 }}>
+        <Tldraw cameraOptions={{ wheelBehavior: "zoom" }} />
+      </div>
+    </>
+  );
+}
+
+createRoot(document.querySelector("main")).render(<App />);
+`;
+
+const app = await esbuild.transform(tldrawApp, {
+  loader: "jsx",
+  jsx: "automatic",
+  target: "esnext",
+  format: "esm",
+  minify: false,
+  sourcemap: false,
+});
+
+const webview = await createWebView({
+  title: "TLDraw",
+  html: `
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap"/>
+        <link rel="stylesheet" href="https://esm.sh/[email protected]/tldraw.css"/>
+        <style> body { font-family: "Inter"; } </style>
+      </head>
+      <body>
+        <main></main>
+        <script type="importmap">
+          {
+            "imports": {
+              "tldraw": "https://esm.sh/[email protected]?bundle-deps",
+              "react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime?bundle-deps",
+              "react-dom/client": "https://esm.sh/[email protected]/client?bundle-deps"
+            }
+          }
+        </script>
+        <script type="module">
+          ${app.code}
+        </script>
+      </body>
+    </html>
+  `,
+});
+
+await webview.waitUntilClosed();