wip

astro.config.mjs

@@ -57,4 +57,9 @@ export default defineConfig({
     }),
     react(),
   ],
+  vite: {
+    ssr: {
+      noExternal: [/^@roadmapsh\/editor.*$/],
+    },
+  },
 });

scripts/generate-renderer.sh

@@ -2,33 +2,8 @@
 
 set -e
 
-# ignore cloning if .temp/web-draw already exists
-if [ ! -d ".temp/web-draw" ]; then
-  mkdir -p .temp
-  git clone git@github.com:roadmapsh/web-draw.git .temp/web-draw
-fi
+pnpm add github:roadmapsh/web-draw-v2#path:packages/editor
 
-rm -rf editor
-mkdir editor
-
-# copy the files at /src/editor/* to /editor
-# while replacing any existing files
-cp -rf .temp/web-draw/src/editor/* editor
-
-# Add @ts-nocheck to the top of each ts and tsx file
-# so that the typescript compiler doesn't complain
-# about the missing types
-find editor -type f \( -name "*.ts" -o -name "*.tsx" \) -print0 | while IFS= read -r -d '' file; do
-  if [ -f "$file" ]; then
-    echo "// @ts-nocheck" > temp
-    cat "$file" >> temp
-    mv temp "$file"
-    echo "Added @ts-nocheck to $file"
-  fi
-done
-
-
-# ignore the worktree changes for the editor directory
-git update-index --assume-unchanged editor/readonly-editor.tsx || true
-git update-index --assume-unchanged editor/renderer/index.tsx || true
-git update-index --assume-unchanged editor/renderer/renderer.ts || true
+# ignore the worktree changes for the package.json
+git update-index --assume-unchanged package.json || true
+git update-index --assume-unchanged pnpm-lock.yaml || true

src/components/EditorRoadmap/EditorRoadmapRenderer.tsx

@@ -1,6 +1,6 @@
 import './EditorRoadmapRenderer.css';
 
-import { useCallback, useEffect, useRef } from 'react';
+import { lazy, useCallback, useEffect, useRef } from 'react';
 import {
   renderResourceProgress,
   updateResourceProgress,
@@ -11,11 +11,16 @@ import {
 import { pageProgressMessage } from '../../stores/page';
 import { useToast } from '../../hooks/use-toast';
 import type { Edge, Node } from '@roadmapsh/editor';
-import { Renderer } from '@roadmapsh/editor';
 import { slugify } from '../../lib/slugger';
 import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
 
+const Renderer = lazy(() =>
+  import('@roadmapsh/editor').then((mod) => ({
+    default: mod.Renderer,
+  })),
+);
+
 export type RoadmapRendererProps = {
   resourceId: string;
   nodes: Node[];