1.9 KiB
name, description, metadata
| name | description | metadata | ||
|---|---|---|---|---|
| vega-editor-reference-clone | Location and nature of the local vega/editor clone used as a technique reference for Astrolabe's Monaco/vega-embed/validation work |
|
The canonical Vega-Lite editor (vega/editor) is cloned locally at
/Users/oleh/code/reference/vega-editor (shallow clone of main, HEAD 4fdbb59). It is the
reference for the "editor + renderer" wiring Astrolabe's M1/M2 call out ("mine vega-editor
for how it wires the schema"). Re-clone with git clone --depth 1 https://github.com/vega/editor.
Key divergences to remember when borrowing — it is React + Redux/context, uses
@monaco-editor/react + @monaco-editor/loader (CDN-loaded Monaco, no explicit worker
config), and — surprisingly — does NOT use vega-embed for its live preview (it hand-rolls
vegaLite.compile → vega.parse → new vega.View().runAsync(); vega-embed is imported only
for types + the exported standalone HTML). Astrolabe is React (see stack-moving-to-react) +
Zustand stores + raw monaco-editor + vegaEmbed(). Since both are now React, vega/editor's
component lifecycle patterns port fairly directly; the friction is state (their flat Redux →
our Zustand stores) and Monaco worker wiring (their CDN loader → our explicit Vite workers).
The Monaco choice (self-hosted from npm + raw API, not the CDN loader / @monaco-editor/react
route) is a recorded decision — see docs/architecture/08 § Decision · Monaco integration.
The highest-value files: src/utils/monaco.ts (schema wiring), src/utils/validate.ts (ajv),
src/utils/jsonc-parser.ts, src/utils/logger.ts (LocalLogger), src/components/renderer/renderer.tsx
(View lifecycle), src/components/app.tsx:188-365 (parse→validate→compile→render flow),
src/constants/default-state.ts (state shape). Relevant to M1/M2 of the implementation plan.