lite-monaco

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