docs: add next js with app router example (#7552)

* move the existing example to with-script-in-browser * Add example with next js app router * disable ssr for excalidraw client comp * typo * update output dir * don't include nextjs example in tsconfig * remove meta.json * lint * remove example.ts * port * move the examples outside packages and use the deps as workspaces in examples * update gitignore * fix example * update path of build dir * fix * fix scripts * try local path * fix * update commands * fix * fix * fix script * skip ts * disable ts * add vercel.json * install * update tsconfig * fix lint * remove console.log * lets see if this works * revert * remove ts nocheck * add types and some utils in nextjs example * fix types * updatw example and remove nextjs dynamic syntax so we don't import excal twice * move both examples to workspaces and create generic example to be used by browser and next js both * copy the static assets to nextjs * fix ts config * render custom menu items * fix custom footer * fix types in browser example * use regular imports for importing excal and import it using dynamic next js in app router instead * Add example for pages router * fix css discrepancies * fix css * configure output dir * fix * fix css * rename to with-nextjs * move components to examples/excalidraw/components
2025-05-03 10:00:07 -04:00 · 2024-01-24 17:07:54 +05:30 · 2024-01-24 17:07:54 +05:30 · 4f0a2a9593
commit 4f0a2a9593
parent f3f8217125
51 changed files with 1431 additions and 229 deletions
--- a/examples/excalidraw/with-script-in-browser/index.html
+++ b/examples/excalidraw/with-script-in-browser/index.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <title>React App</title>
+    <script>
+      window.name = "codesandbox";
+    </script>
+    <link rel="stylesheet" href="/dist/browser/dev/index.css" />
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+
+    <!-- This is so that we use the bundled excalidraw.development.js file instead
+    of the actual source code -->
+    <script type="module">
+      import * as ExcalidrawLib from "@excalidraw/excalidraw";
+
+      console.log(ExcalidrawLib);
+      window.ExcalidrawLib = ExcalidrawLib;
+    </script>
+    <script type="module" src="index.tsx"></script>
+  </body>
+</html>
--- a/examples/excalidraw/with-script-in-browser/index.tsx
+++ b/examples/excalidraw/with-script-in-browser/index.tsx
@ -0,0 +1,28 @@
+import App from "../components/App";
+import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import type * as TExcalidraw from "@excalidraw/excalidraw";
+
+import "@excalidraw/excalidraw/index.css";
+
+declare global {
+  interface Window {
+    ExcalidrawLib: typeof TExcalidraw;
+  }
+}
+
+const rootElement = document.getElementById("root")!;
+const root = createRoot(rootElement);
+const { Excalidraw } = window.ExcalidrawLib;
+root.render(
+  <StrictMode>
+    <App
+      appTitle={"Excalidraw Example"}
+      useCustom={(api: any, args?: any[]) => {}}
+      excalidrawLib={window.ExcalidrawLib}
+    >
+      <Excalidraw />
+    </App>
+  </StrictMode>,
+);
--- a/examples/excalidraw/with-script-in-browser/package.json
+++ b/examples/excalidraw/with-script-in-browser/package.json
@ -0,0 +1,19 @@
+{
+  "name": "with-script-in-browser",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@excalidraw/excalidraw": "*"
+  },
+  "devDependencies": {
+    "vite": "5.0.6",
+    "typescript": "^5"
+  },
+  "scripts": {
+    "start": "yarn workspace @excalidraw/excalidraw run build:esm && vite",
+    "build": "yarn workspace @excalidraw/excalidraw run build:esm && vite build",
+    "build:preview": "yarn build && vite preview --port 5002"
+  }
+}
--- a/examples/excalidraw/with-script-in-browser/public/images/doremon.png
+++ b/examples/excalidraw/with-script-in-browser/public/images/doremon.png
--- a/examples/excalidraw/with-script-in-browser/public/images/excalibot.png
+++ b/examples/excalidraw/with-script-in-browser/public/images/excalibot.png
--- a/examples/excalidraw/with-script-in-browser/public/images/pika.jpeg
+++ b/examples/excalidraw/with-script-in-browser/public/images/pika.jpeg
--- a/examples/excalidraw/with-script-in-browser/public/images/rocket.jpeg
+++ b/examples/excalidraw/with-script-in-browser/public/images/rocket.jpeg
--- a/examples/excalidraw/with-script-in-browser/vercel.json
+++ b/examples/excalidraw/with-script-in-browser/vercel.json
@ -0,0 +1,4 @@
+{
+  "outputDirectory": "dist",
+  "installCommand": "yarn install"
+}
--- a/examples/excalidraw/with-script-in-browser/vite.config.mts
+++ b/examples/excalidraw/with-script-in-browser/vite.config.mts
@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: 3001,
+    // open the browser
+    open: true,
+  },
+  publicDir: "public",
+});