From bf75dbd2754a56c411f281502c1fb0b4afb479b4 Mon Sep 17 00:00:00 2001 From: Universe Date: Thu, 23 Apr 2026 00:08:02 +0900 Subject: [PATCH] fix: unblock fresh-clone editor boot MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Findings from a fresh-worktree dry run. Contributors running `pnpm install && pnpm dev:editor` on a clean checkout hit three issues before they can click anything: - `/canvas` hangs on a spinner forever. `wasm-locate-file.ts` hardcodes `http://localhost:4020/dist/` as the dev fallback, which is only served after `just build canvas wasm` (emsdk, ninja, ~10 min first build). Let dev mode fall through to the unpkg-published wasm when the opt-in env var is unset; comment the var out in `.env.example` so it's off by default and labeled as an override for canvas-engine work. - The landing page throws `Maximum update depth exceeded` on every load from `FullscreenLoadingOverlay`. `startTime` was a `useState` listed in the effect's dep array while also being set inside the effect — classic loop. Switch to `useRef`; semantics preserved (latch on enter, read on exit). - The landing page also logs empty-`src` / `blurWidth`/`blurHeight` DOM warnings on first paint. `BigImageContainer` was spreading a `StaticImageData` import via `{...img}` before the carousel picked an index, then again into `` leaking blur bookkeeping to the DOM. Guard the initial render and pass the static import as `src={img}`. Docs: README Node version bumped 22 -> 24 to match `.nvmrc` / engines, and CONTRIBUTING clarifies the submodule step is required (not optional) with the `git submodule update --init` recovery. --- CONTRIBUTING.md | 5 ++++- README.md | 2 +- editor/.env.example | 2 +- editor/app/(www)/(home)/_home/content-1.tsx | 8 ++++---- .../starterkit-loading/loading.tsx | 11 +++++------ editor/grida-canvas/backends/wasm-locate-file.ts | 2 -- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e437f1cdf4..c62d82e7cb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,13 +2,16 @@ --- -First, clone the repo with git submodules (optional. using Github Desktop will automatically clone the submodules for you) +First, clone the repo with git submodules (required for canvas/WASM builds; GitHub Desktop clones submodules automatically). ```bash # clone the repo git clone --recurse-submodules https://github.com/gridaco/grida cd grida +# or, if you already cloned without --recurse-submodules +git submodule update --init + # setup node & package manager nvm use corepack enable pnpm diff --git a/README.md b/README.md index e22f7d592d..8988ad052d 100644 --- a/README.md +++ b/README.md @@ -180,7 +180,7 @@ Docs: [@grida/refig](https://grida.co/docs/packages/@grida/refig) ## Quickstart (monorepo) -**Requirements:** Node.js **22+**, pnpm **10+** +**Requirements:** Node.js **24+**, pnpm **10+** ```bash pnpm install diff --git a/editor/.env.example b/editor/.env.example index c3c5cf6745..6dd98ec25d 100644 --- a/editor/.env.example +++ b/editor/.env.example @@ -25,7 +25,7 @@ NEXT_PUBLIC_SUPABASE_URL_RR_AP_NORTHEAST_2=... # [insiders config] # flag to use unsafe sandbox (set 1 to enable) NEXT_PUBLIC_GRIDA_UNSAFE_DEVELOPER_SANDBOX='0' -NEXT_PUBLIC_GRIDA_WASM_DEV_SERVE_URL='http://localhost:4020/dist' # set to use locally served wasm (dev) +# NEXT_PUBLIC_GRIDA_WASM_DEV_SERVE_URL='http://localhost:4020/dist' # opt-in: use locally served wasm (requires `just build canvas wasm && just serve canvas wasm`). Leave unset to fetch the published wasm from unpkg. NEXT_PUBLIC_GRIDA_WASM_VERBOSE='0' # set 1 to inspect (log) the wasm api NEXT_PUBLIC_GRIDA_USE_INSIDERS_AUTH='1' NEXT_PUBLIC_GRIDA_LOCALHOST_REGION="us-west-1" diff --git a/editor/app/(www)/(home)/_home/content-1.tsx b/editor/app/(www)/(home)/_home/content-1.tsx index e97c13405e..0a009455e1 100644 --- a/editor/app/(www)/(home)/_home/content-1.tsx +++ b/editor/app/(www)/(home)/_home/content-1.tsx @@ -78,15 +78,15 @@ export default function Content1() { {/* body */}
- + {img && ( + + )}
); } function BigImageContainer({ - width, - height, alt = "", ...props }: React.ComponentProps) { @@ -97,7 +97,7 @@ function BigImageContainer({ animate={{ opacity: 1 }} transition={{ duration: 1 }} > - {alt} + {alt} ); } diff --git a/editor/grida-canvas-react-starter-kit/starterkit-loading/loading.tsx b/editor/grida-canvas-react-starter-kit/starterkit-loading/loading.tsx index e984ec20dd..ea9e15bfb7 100644 --- a/editor/grida-canvas-react-starter-kit/starterkit-loading/loading.tsx +++ b/editor/grida-canvas-react-starter-kit/starterkit-loading/loading.tsx @@ -197,18 +197,17 @@ export function FullscreenLoadingOverlay({ errmsg, }: FullscreenLoadingOverlayProps) { const [showOverlay, setShowOverlay] = useState(true); - const [startTime, setStartTime] = useState(null); + const startTimeRef = useRef(null); useEffect(() => { if (loading) { - setStartTime(Date.now()); + startTimeRef.current = Date.now(); setShowOverlay(true); - } else if (startTime) { - const elapsed = Date.now() - startTime; + } else if (startTimeRef.current) { + const elapsed = Date.now() - startTimeRef.current; const remaining = Math.max(0, minDuration - elapsed); if (remaining > 0) { - // Wait for minimum duration before hiding const timer = setTimeout(() => { setShowOverlay(false); }, remaining); @@ -218,7 +217,7 @@ export function FullscreenLoadingOverlay({ setShowOverlay(false); } } - }, [loading, minDuration, startTime]); + }, [loading, minDuration]); return ( diff --git a/editor/grida-canvas/backends/wasm-locate-file.ts b/editor/grida-canvas/backends/wasm-locate-file.ts index 18fd07ed2d..d01f1d06a2 100644 --- a/editor/grida-canvas/backends/wasm-locate-file.ts +++ b/editor/grida-canvas/backends/wasm-locate-file.ts @@ -9,8 +9,6 @@ export default function locateFile(...args: Args) { const [path, version] = args; if (process.env.NEXT_PUBLIC_GRIDA_WASM_DEV_SERVE_URL) { return `${process.env.NEXT_PUBLIC_GRIDA_WASM_DEV_SERVE_URL}/${path}`; - } else if (process.env.NODE_ENV === "development") { - return `http://localhost:4020/dist/${path}`; } else { return `https://unpkg.com/@grida/canvas-wasm@${version}/dist/${path}`; }