Json viewer

.eslintrc.js

@@ -121,6 +121,8 @@ module.exports = {
                 "space-infix-ops": ["error", { "int32Hint": false }],
                 'space-before-blocks': ['error', 'always'],
                 "space-infix-ops": "error",
+                '@typescript-eslint/prefer-as-const': 'off',
+                '@typescript-eslint/no-namespace': 'off',
                 "@typescript-eslint/type-annotation-spacing": ['error', {"after": true}],
                 "@typescript-eslint/member-delimiter-style": [
                     "error",

CONTRIBUTING.md

@@ -35,8 +35,9 @@ npm install --global lerna
 npm run bootstrap
 ```
  - 接下来进行你想要做的修改，可以是 bug 修复，也可以是新功能的开发
- - 你可以通过运行 storybook(`npm start`)和官网(`npm run docsite`)来验证逻辑
- - 为你的修改编写测试用例，并确保测试通过
+ - 你可以通过运行 storybook(`npm start`)和文档站官网(`npm run docsite`)来验证逻辑
+ - 为你的修改编写测试用例（可以是 Jest Unit Test，也可以是 Cypress E2E Test），并确保测试通过
+    - 如果你想详细了解 Semi Design的测试机制，可查阅 [How We Test Semi Design Component Libraries](https://medium.com/front-end-weekly/how-we-test-semi-design-component-libraries-64b854f63b65)
 ```bash
 npm run test:unit
 ```
@@ -50,10 +51,10 @@ npm run test:unit
 ## 帮助改善文档
 文档站基于 [gatsby](https://www.gatsbyjs.com/) 构建，核心代码在 `src` 目录。
 
-**组件文档位于 `semi-ui` 组件文件夹下的 md 文件。** 以 tooltip 为例：
+**组件文档位于 `content` 组件文件夹下, 根据组件分类对应不同的二级目录下的 md 文件** 以 banner 为例：
 
-* 中文文档 `packages/semi-ui/tooltip/index.md` 
-* 英文文档 `packages/semi-ui/tooltip/index-en-US.md`
+* 中文文档 `content/feedback/banner/index.md` 
+* 英文文档 `content/feedback/banner/index-en-US.md`
 
 启动文档站点
 ```sh

content/order.js

@@ -84,6 +84,7 @@ const order = [
     'configprovider',
     'locale',
     'chat',
+    'jsonviewer',
 ];
 let { exec } = require('child_process');
 let fs = require('fs');

content/show/jsonviewer/index.md

@@ -0,0 +1,195 @@
+---
+localeCode: zh-CN
+order: 86
+category: 展示类
+title: Json-Viewer JSON编辑器
+icon: doc-list
+dir: column
+noInline: true
+brief: 用于展示和编辑 JSON 数据
+---
+
+## 代码演示
+
+### 如何引入
+
+```jsx import
+import { JsonViewer } from '@douyinfe/semi-ui';
+```
+
+### 基本用法
+
+JsonViewer 的基本用法。传入 value height 和 width 参数，设置组件的高度和宽度和初始值。
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+
+class SimpleList extends React.Component {
+    render() {
+        const data = `{
+            "name": "Semi",
+            "version": "0.0.0"
+        }`;
+
+        return (
+            <div>
+                <div style={{ marginRight: 16 }}>
+                    <h3 style={{ marginBottom: 16 }}>Default Size</h3>
+                    <JsonViewer height={400} width={700} value={data} />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleList);
+```
+
+### 设置行高
+
+配置 options 的 lineHeight 参数，设置固定行高（单位：px, 默认 20）。
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+
+class SimpleList extends React.Component {
+    render() {
+        const data = `{
+            "name": "Semi",
+            "version": "0.0.0"
+        }`;
+
+        return (
+            <div>
+                <div style={{ marginRight: 16 }}>
+                    <h3 style={{ marginBottom: 16 }}>Default Size</h3>
+                    <JsonViewer height={400} width={700} value={data} options={{ lineHeight: 25 }} />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleList);
+```
+
+### 自动换行
+
+配置 options 的 autoWrap 参数，设置组件是否自动换行。
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+
+class SimpleList extends React.Component {
+    render() {
+        const data = `{
+            "name": "Semi",
+            "version": "0.0.0",
+            "description": "lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        }`;
+
+        return (
+            <div>
+                <div style={{ marginRight: 16 }}>
+                    <h3 style={{ marginBottom: 16 }}>Default Size</h3>
+                    <JsonViewer height={400} width={700} value={data} options={{ autoWrap: true }} />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleList);
+```
+
+### 格式化配置
+
+配置 options 的 formatOptions 参数，设置组件的格式化配置。
+
+-   tabSize: number, 设置缩进大小,4 表示每级缩进 4 个空格
+-   insertSpaces: boolean, true 表示使用空格进行缩进，false 表示使用制表符(Tab)
+-   eol: string, 设置换行符,可以是\n,\r\n,
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+
+class SimpleList extends React.Component {
+    render() {
+        const data = `{
+            "name": "Semi",
+            "version": "0.0.0",
+            "description": "lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        }`;
+
+        return (
+            <div>
+                <div style={{ marginRight: 16 }}>
+                    <h3 style={{ marginBottom: 16 }}>Default Size</h3>
+                    <JsonViewer
+                        height={400}
+                        width={700}
+                        value={data}
+                        options={{ formatOptions: { tabSize: 2, insertSpaces: true, eol: '\n' } }}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleList);
+```
+
+## API 参考
+
+### JsonViewer
+
+| 属性                | 说明                                             | 类型                              | 默认值    |
+|-------------------|------------------------------------------------|---------------------------------|--------------|
+| value             | 设置 value 属性                                  | string                                  | -  |
+| height            | 设置高度 属性                                     | number                                  | -  |
+| width             | 设置宽度 属性                                     | number                                  | -  |
+| options           | 设置格式化配置 属性                                | JsonViewerOptions                       | -   |
+| onChange          | 设置 value 变化回调 属性                           | (value: string) => void                  | -   |
+| onValueHover      | 设置 value 悬浮回调 属性                           | ({value: string, target: HTMLElement}) => HTMLElement | -   |
+
+### JsonViewerOptions
+
+| 属性                | 说明                                          | 类型                              | 默认值    |
+|-------------------|------------------------------------------------|---------------------------------|-----------|
+| lineHeight        | 设置行高 属性                                    | number                          | 20  |
+| autoWrap        | 设置是否自动换行 属性                             | boolean                          | true  |
+| formatOptions     | 设置格式化配置 属性                               | FormattingOptions                |           |
+
+### FormattingOptions
+
+| 属性                | 说明                                          | 类型                              | 默认值    |
+|-------------------|------------------------------------------------|---------------------------------|-----------|
+| tabSize           | 设置缩进大小 属性                                 | number                          | 4  |
+| insertSpaces      | 设置是否使用空格进行缩进 属性                       | boolean                         | true  |
+| eol               | 设置换行符 属性                                   | string                          | '\n'  |
+
+
+
+
+## 使用场景
+
+JsonViewer 和 Monaco Editor 各有其适用场景：
+
+- **JsonViewer 适用于**：
+  - 仅需 JSON 查看和基础编辑的场景
+  - 对加载速度和性能要求较高的场景
+  - 需要更轻量级组件的场景
+
+- **Monaco Editor 适用于**：
+  - 需要完整 IDE 功能的场景（如语法高亮、代码补全、错误提示等）
+  - 需要多语言支持的场景
+  - 需要更复杂编辑功能的场景
+
+### 技术实现
+
+JsonViewer 底层使用 jsonc-parser 进行 JSON 词法解析和格式化，并在此基础上实现了 JSON 的 AST 解析，代码提示等功能。

gatsby-node.js

@@ -112,6 +112,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
                 'semi-site-header': process.env.SEMI_SITE_HEADER || '@douyinfe/semi-site-header',
                 'semi-site-banner': process.env.SEMI_SITE_BANNER || '@douyinfe/semi-site-banner',
                 'univers-webview': process.env.SEMI_SITE_UNIVERS_WEBVIEW || resolve('packages/semi-ui'),
+                '@douyinfe/semi-json-viewer-core': resolve('packages/semi-json-viewer-core'),
                 '@douyinfe/semi-ui': resolve('packages/semi-ui'),
                 '@douyinfe/semi-foundation': resolve('packages/semi-foundation'),
                 '@douyinfe/semi-icons': resolve('packages/semi-icons/src/'),
@@ -155,7 +156,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
                 },
                 {
                   test:/\.m?js/,
-                  include: [/micromark-util-sanitize-uri/,/mdast-util-from-markdown/,/micromark/,/mdast-util-to-markdown/,/semi-foundation\/node_modules\/@mdx-js/],
+                  include: [/micromark-util-sanitize-uri/,/mdast-util-from-markdown/,/micromark/,/mdast-util-to-markdown/,/semi-foundation\/node_modules\/@mdx-js/,/jsonc-parser/],
                   use: ["esbuild-loader"]
                 },
                 {
@@ -184,7 +185,8 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
                     test: /\.mjs$/,
                     include: /node_modules/,
                     type: "javascript/auto"
-                }
+                },
+                { test: /\.worker\.ts$/, use: ['worker-loader', 'ts-loader'] }
             ],
         },
         plugins: [plugins.extractText(), plugins.define({

package.json

@@ -12,10 +12,10 @@
         "bootstrap": "lerna bootstrap -- --legacy-peer-deps",
         "docsite": "npm run develop",
         "pre-develop": "npm run scripts:changelog && node ./scripts/designToken.js ./static/designToken.json",
-        "develop": "npm run pre-develop && gatsby clean && lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design && gatsby develop -H 0.0.0.0 --port=3666 --verbose",
+        "develop": "npm run pre-develop && gatsby clean && lerna run build:lib --scope @douyinfe/semi-json-viewer-core --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design && gatsby develop -H 0.0.0.0 --port=3666 --verbose",
         "scripts:changelog": "node scripts/changelog.js",
         "start": "npm run story",
-        "pre-story": "lerna exec --scope=@douyinfe/semi-ui --scope=@douyinfe/semi-foundation -- rimraf ./lib && lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design",
+        "pre-story": "lerna exec --scope=@douyinfe/semi-ui --scope=@douyinfe/semi-foundation -- rimraf ./lib && lerna run build:lib --scope @douyinfe/semi-json-viewer-core --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design",
         "story": "npm run pre-story && sb dev -c ./.storybook/js/ -p 6006",
         "story:ts": "npm run pre-story && sb dev -c ./.storybook/ts/ -p 6007",
         "story:ani": "npm run pre-story && sb dev -c ./.storybook/animation/react -p 6008",
@@ -35,7 +35,7 @@
         "build:css": "lerna run build:css",
         "build-storybook": "sb build  -c ./.storybook/js/ -o ./storybook && cp -r storybook storybook-static",
         "build-storybook-static": "sb build  -c ./.storybook/js/",
-        "build:gatsbydoc": "lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design && cross-env NODE_ENV=production node --max_old_space_size=16384 ./node_modules/gatsby/cli.js build --prefix-paths --verbose && rimraf build && mv public build",
+        "build:gatsbydoc": "lerna run build:lib --scope --scope @douyinfe/semi-json-viewer-core --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design && cross-env NODE_ENV=production node --max_old_space_size=16384 ./node_modules/gatsby/cli.js build --prefix-paths --verbose && rimraf build && mv public build",
         "build:icon": "lerna run build:icon --scope='@douyinfe/semi-{icons,illustrations}'",
         "cypress:coverage": "npx wait-on http://127.0.0.1:6006 && ./node_modules/.bin/cypress run",
         "postcypress:coverage": "yarn coverage:merge",
@@ -217,7 +217,8 @@
         "webpack": "^5.77.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^3.11.2",
-        "webpackbar": "^5.0.0-3"
+        "webpackbar": "^5.0.0-3",
+        "worker-loader": "^3.0.8"
     },
     "husky": {
         "hooks": {
@@ -242,5 +243,6 @@
             "stylelint"
         ]
     },
-    "license": "MIT"
+    "license": "MIT",
+    "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

packages/semi-foundation/jsonViewer/constants.ts

@@ -0,0 +1,7 @@
+import { BASE_CLASS_PREFIX } from "../base/constants";
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-json-viewer`,
+} as const;
+
+export { cssClasses };

packages/semi-foundation/jsonViewer/core/index.ts

@@ -0,0 +1 @@
+export * from '@douyinfe/semi-json-viewer-core';

packages/semi-foundation/jsonViewer/foundation.ts

@@ -0,0 +1,10 @@
+
+
+import BaseFoundation from '../base/foundation';
+
+export interface JsonViewerAdapter {
+
+}
+
+
+class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {}