mirror of
https://github.com/olehomelchenko/astrolabe.git
synced 2026-08-08 02:02:33 +00:00
28 lines
1.9 KiB
Markdown
28 lines
1.9 KiB
Markdown
---
|
|
name: vega-editor-reference-clone
|
|
description: Location and nature of the local vega/editor clone used as a technique reference for Astrolabe's Monaco/vega-embed/validation work
|
|
metadata:
|
|
type: reference
|
|
---
|
|
|
|
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.
|