基于 UMD 打包方式加载 monaco 相关资源的 react 实现方案。
主要特性:
- 动态切换多语言
- 外部加载多语言
- 外部加载主题
- textmate 解析支持
- 完整事件流程(便于插件扩展)
- 核心代码少
已经拆分 8 个子项目:
两个基础库:
-
@zenstone/use-remote-loader
- 外部资源加载 hook,实现 js/css 异步加载后挂载到 DOM head,额外支持 json/text/wasm/blobUrl 等加载机制
-
@zenstone/preset-provider
- 预定义组件和文本上下文 Provider,实现组件和文本重载。
@react-monaco
相关
-
@react-monaco/core
-
MonacoProvider
和MonacoCodeEditor
实现,核心的一些方法(主题判断,可配置化,事件抽象封装等) -
@react-monaco/assets
- 相关资产,包含 monaco 0.52.2 本体/locales/themes/tmLanguages 等。
-
@react-monaco/plugin-locale
- 多语言插件,提供外部加载机制(JSON)实现多语言
-
@react-monaco/plugin-themes
- 主题插件,提供外部加载机制挂载主题
-
@react-monaco/plugin-textmate
- textmate 解析插件,可以与 vscode 主题兼容
@react-monaco/demo
- 上述所有功能特性的合并演示项目。
@react-monaco 在线演示 (使用 jsdelivr CDN 资源,可能国内访问略慢)。
具体请参考具体子项目的说明文档。