lite-monaco

轻量 Monaco 向代码编辑器 —— 观感接近 VS Code / Monaco，体积与依赖更小。

| | | |---|---| | npm | lite-monaco 0.3.0 | | 内核 | 自研 CM7（from-scratch，零 @codemirror 运行时依赖） | | 高亮 | Shiki（peer，懒加载 / 可 SSR） | | 智能 | TS/JS LanguageService（typescript 可选 peer） |

状态：0.3 嵌入场景可替代 Monaco（见 ENDPOINT.md）。 不是 drop-in，也不是 VS Code 平台。
仓库目录仍叫 litcode；安装名是 lite-monaco。

安装

npm i lite-monaco shiki
# TS/JS 补全 · hover · 诊断 · 跳转：
npm i typescript

| 产物 | 约 | |---|---| | npm tarball | ~0.5 MB（不内嵌 typescript / shiki） | | dist/index.js | ~700 KB 未 gzip |

API 稳定面

| 符号 | 稳定性 | 说明 | |---|---|---| | litcodeCM7 / litcodeThemeCSS | stable | 产品主入口 | | DiffEditor / diffEditorCSS | stable | 并排 Diff | | core 命名空间（EditorView/State 等） | stable | 内核；少数字段仍可能扩展 | | lite-monaco/monaco-shim | experimental | 迁移薄层，API 子集 | | TS 高级（getTSService 等） | stable-ish | 依赖 optional peer |

快速接入

import { createHighlighter } from 'shiki'
import { litcodeCM7, core } from 'lite-monaco'

const hl = await createHighlighter({ themes: ['dark-plus'], langs: ['typescript'] })
const cfg = litcodeCM7(hl, {
  lang: 'typescript',
  theme: 'dark-plus',
  // features: { minimap: false, lineWrapping: true },
  // tsFiles: { '/utils.ts': 'export const x = 1' },
})

document.head.appendChild(Object.assign(document.createElement('style'), {
  textContent: cfg.themeCSS,
}))

const view = new core.EditorView({
  state: core.EditorState.create({
    doc: 'const hello = "world"\n',
    extensions: cfg.extensions,
  }),
  parent: document.getElementById('editor')!,
  decorationProviders: cfg.decorationProviders,
  keymap: cfg.keymap,
  drawSelection: cfg.drawSelection,
  lineNumbers: cfg.lineNumbers,
  lineWrapping: cfg.lineWrapping,
})
for (const attach of cfg.overlays) attach(view)

LitCodeFeatures（默认全开，传 false 关）

lineNumbers · foldGutter · activeLine · multiCursor · bracketMatch · closeBrackets · indentOnInput · bracketColors · overviewRuler · minimap · selectionMatch · indentGuide · search · autocomplete · hover · history · tabIndent · hScrollbar · vScrollbar · contextMenu · signatureHelp · tsDiagnostics · lineWrapping（默认关）· stickyScroll · codeActions · a11y

DiffEditor

import { DiffEditor, diffEditorCSS } from 'lite-monaco'

document.head.appendChild(Object.assign(document.createElement('style'), {
  textContent: diffEditorCSS(true),
}))

const diff = new DiffEditor({
  parent,
  original: oldText,
  modified: newText,
  dark: true,
  enableSplitViewResizing: true,
  renderMarginRevertIcon: true,
  renderOverviewRuler: true,
  renderIndicators: true,       // gutter ±（行号右侧）
  originalEditable: false,
  ignoreTrimWhitespace: true,
  find: true,                   // ⌘F
  onModifiedChange: (text) => { /* 保存 */ },
})

本地：npm run dev → http://localhost:5199 （主路径零 Monaco）· /diff.html 左右对照。

从 Monaco 迁移

见 MIGRATION.md。可选：

import { create, createDiffEditor } from 'lite-monaco/monaco-shim'

React 示例：examples/react-basic.tsx。

已有 / 未做

| 有 | 说明 | |---|---| | 编辑核心 | rope/state/view/输入/命令/虚拟视口 | | Monaco 向 UI | 行号、折叠、minimap、滚动条、find、命令面板 | | 语言 | Shiki；TS/JS 补全/hover/诊断/peek/fix | | Diff | side-by-side + 查找 + revert + 稳定 fill | | a11y | role/textbox、live region |

| 不做 | 说明 | |---|---| | Monaco API 全集 | shim 仅迁移子集 | | contribution / worker 平台 | 永久不做 | | multi-tab model 服务 | 宿主自管 | | inline / moved-block Diff | 未做 |

开发

npm run dev    # :5199
npm test
npm run build

| 文档 | | |---|---| | ROADMAP.md | 迭代 TODO | | MIGRATION.md | Monaco 迁移 | | PERF.md | 大文档预算 | | CAPABILITIES.md | 能力表 | | src/ARCHITECTURE.md | 源码分层 | | CHANGELOG.md | 版本 |

License

MIT