@fibrae/semi-json-viewer-core (英语)
JsonViewer在"Sime Design Next"中背后的框架-不可知编辑核心,由VS代码中的JSON取景和编辑执行而来. 考虑到容器元素和JSON文本,它提供渲染,编辑,搜索和替换,完成和格式化. 大多数用户通过每个框架的UI软件包中的JsonViewer和JsonViewer基础在 @fibrae/semi-foundation 取决于此软件包.
安装
pnpm add @fibrae/semi-json-viewer-core
它没有同伴或运行时间依赖关系(jsonc-parser 捆绑到 dist) (中文(简体) ). 该套件没有样式;JsonViewer组件提供.
使用量
import { JsonViewer } from '@fibrae/semi-json-viewer-core';
const viewer = new JsonViewer(container, '{"name": "semi"}', { readOnly: true });
viewer.layout();
// release when no longer needed
viewer.dispose();
构造器 : new JsonViewer(container: HTMLElement, value: string, options?: JsonViewerOptions)。 。 。 .
| 选项 | 说明 |
|---|---|
lineHeight | 线高 |
autoWrap | 是否自动包裹行 |
readOnly | 内容是否只读 |
formatOptions | 格式化,与 tabSize, (中文(简体) ), insertSpaces 财务报告和审定财务报表 eol |
completionOptions | 完成, 与 staticCompletions |
customRenderRule | 习惯组合生成规则 { match, render }时 match 是一个字符串, a RegExp 或者说 (value, pathChain, tokenType) => boolean |
prefixCls | 类名前缀 |
ariaLabel | 仅读时滚动区域的名称,可编辑时的文本框的名称 |
实例方法 : layout(), (中文(简体) ), resetMeasuredHeights(), (中文(简体) ), getModel(), (中文(简体) ), getSearchWidget(), (中文(简体) ), format() 财务报告和审定财务报表 dispose(),加上公共财产 emitter。每个实例都将其事件和工人隔离在自己的命名空间中,所以你必须呼叫 dispose() 当完成.
导出类型 : JsonViewerOptions, (中文(简体) ), CompletionOptions, (中文(简体) ), FormattingOptions, (中文(简体) ), TokenRenderType 财务报告和审定财务报表 CustomRenderRule。组件文件在 网站/内容/加/json-viewer。 。 。 .
内部
src/tokens 处理词典分析并突出JSON文本:
tokenize.ts识别分隔符、关键词、字符串、数字和注释,并记录括号嵌入深度.tokenizationJsonModelPart.ts保存整个文档的符号状态,并在内容变化时标记受影响的行.jsonModelToken.ts进行增量分析,只计算变化,在闲置时间完成背景IdleDeadline。 。 。 .offsetRange.ts提供相抵范围内的合并、相接、转移和封隔操作,用来约束需要重算的内容.
语言服务使用网络工人。 构建时的插件 vite.semi.ts 插入工人源,运行时从blob URL开始.
相关软件包
取决于 @fibrae/semi-foundation。不取决于其他的Semi软件包.
发展
pnpm build 运行 vp pack 在此软件包目录中,发布带有类型声明的单项无害环境管理文件。 测试、油漆和打字检查,见 捐款额 在寄存器根处.