leezng · leezng · Mar 20, 2024 · Feb 1, 2024 · Feb 1, 2024 · Feb 1, 2024
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ node_modules/
 example-dist/
 dist/
 lib/
+esm/
 types/
 npm-debug.log*
 yarn-debug.log*

diff --git a/README.md b/README.md
@@ -106,46 +106,47 @@ plugins: [
 
 ## Props
 
-| Property                  | Description                                                                     | Type                              | Default |
-|---------------------------|---------------------------------------------------------------------------------|-----------------------------------| ------- |
-| data(v-model)             | JSON data, support v-model when use editable                                    | JSON object                       | -       |
-| collapsedNodeLength       | Objects or arrays which length is greater than this threshold will be collapsed | number                            | -       |
-| deep                      | Paths greater than this depth will be collapsed                                 | number                            | -       |
-| showLength                | Show the length when collapsed                                                  | boolean                           | false   |
-| showLine                  | Show the line                                                                   | boolean                           | true    |
-| showLineNumber            | Show the line number                                                            | boolean                           | false   |
-| showIcon                  | Show the icon                                                                   | boolean                           | false   |
-| showDoubleQuotes          | Show doublequotes on key                                                        | boolean                           | true    |
-| virtual                   | Use virtual scroll                                                              | boolean                           | false   |
-| height                    | The height of list when using virtual                                           | number                            | 400     |
-| itemHeight                | The height of node when using virtual                                           | number                            | 20      |
-| selectedValue(v-model)    | Selected data path                                                              | string, array                     | -       |
-| rootPath                  | Root data path                                                                  | string                            | `root`  |
-| nodeSelectable            | Defines whether a node supports selection                                       | (node) => boolean                 | -       |
-| selectableType            | Support path select, default none                                               | `multiple` \| `single`            | -       |
-| showSelectController      | Show the select controller                                                      | boolean                           | false   |
-| selectOnClickNode         | Trigger select when click node                                                  | boolean                           | true    |
-| highlightSelectedNode     | Support highlighting selected nodes                                             | boolean                           | true    |
-| collapsedOnClickBrackets  | Support click brackets to collapse                                              | boolean                           | true    |
-| renderNodeKey             | render node key, or use slot #renderNodeKey                                     | ({ node, defaultKey }) => vNode   | -       |
-| renderNodeValue           | render node value, or use slot #renderNodeValue                                 | ({ node, defaultValue }) => vNode | -       |
-| editable                  | Support editable                                                                | boolean                           | false   |
-| editableTrigger           | Trigger                                                                         | `click` \| `dblclick`             | `click` |
+| Property                 | Description                                                                                                             | Type                              | Default |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------- |
+| data(v-model)            | JSON data, support v-model when use editable                                                                            | JSON object                       | -       |
+| collapsedNodeLength      | Objects or arrays which length is greater than this threshold will be collapsed                                         | number                            | -       |
+| deep                     | Paths greater than this depth will be collapsed                                                                         | number                            | -       |
+| showLength               | Show the length when collapsed                                                                                          | boolean                           | false   |
+| showLine                 | Show the line                                                                                                           | boolean                           | true    |
+| showLineNumber           | Show the line number                                                                                                    | boolean                           | false   |
+| showIcon                 | Show the icon                                                                                                           | boolean                           | false   |
+| showDoubleQuotes         | Show doublequotes on key                                                                                                | boolean                           | true    |
+| virtual                  | Use virtual scroll                                                                                                      | boolean                           | false   |
+| height                   | The height of list when using virtual                                                                                   | number                            | 400     |
+| itemHeight               | The height of node when using virtual                                                                                   | number                            | 20      |
+| selectedValue(v-model)   | Selected data path                                                                                                      | string, array                     | -       |
+| rootPath                 | Root data path                                                                                                          | string                            | `root`  |
+| nodeSelectable           | Defines whether a node supports selection                                                                               | (node) => boolean                 | -       |
+| selectableType           | Support path select, default none                                                                                       | `multiple` \| `single`            | -       |
+| showSelectController     | Show the select controller                                                                                              | boolean                           | false   |
+| selectOnClickNode        | Trigger select when click node                                                                                          | boolean                           | true    |
+| highlightSelectedNode    | Support highlighting selected nodes                                                                                     | boolean                           | true    |
+| collapsedOnClickBrackets | Support click brackets to collapse                                                                                      | boolean                           | true    |
+| renderNodeKey            | render node key, or use slot #renderNodeKey                                                                             | ({ node, defaultKey }) => vNode   | -       |
+| renderNodeValue          | render node value, or use slot #renderNodeValue                                                                         | ({ node, defaultValue }) => vNode | -       |
+| editable                 | Support editable                                                                                                        | boolean                           | false   |
+| editableTrigger          | Trigger                                                                                                                 | `click` \| `dblclick`             | `click` |
+| theme                    | Sets the theme of the component. Options are 'light' or 'dark', with dark mode enhancing visibility on dark backgrounds | `'light' \| 'dark'`               | `light` |
 
 ## Events
 
-| Event Name     | Description                              | Parameters           |
-| -------------- | ---------------------------------------- | -------------------- |
-| nodeClick      | triggers when click node                 | (node: NodeData)     |
-| bracketsClick  | triggers when click brackets             | (collapsed: boolean) |
-| iconClick      | triggers when click icon                 | (collapsed: boolean) |
-| selectedChange | triggers when the selected value changed | (newVal, oldVal)     |
+| Event Name     | Description                              | Parameters                           |
+| -------------- | ---------------------------------------- | ------------------------------------ |
+| nodeClick      | triggers when click node                 | (node: NodeData)                     |
+| bracketsClick  | triggers when click brackets             | (collapsed: boolean, node: NodeData) |
+| iconClick      | triggers when click icon                 | (collapsed: boolean, node: NodeData) |
+| selectedChange | triggers when the selected value changed | (newVal, oldVal)                     |
 
 ## Slots
 
 | Slot Name       | Description       | Parameters             |
 | --------------- | ----------------- | ---------------------- |
-| renderNodeKey   | render node key   | { node, defaultKey }        |
+| renderNodeKey   | render node key   | { node, defaultKey }   |
 | renderNodeValue | render node value | { node, defaultValue } |
 
 ## Contributors

diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -13,7 +13,7 @@
 | 属性                     | 说明                                        | 类型                              | 默认值        |
 | ------------------------ | ------------------------------------------- | --------------------------------- | ------------- |
 | data(v-model)            | 源数据，注意不是 `JSON` 字符串              | `JSON` 数据对象                   | -             |
-| collapsedNodeLength        | 长度大于此阈值的对象或数组将被折叠 | number               | Infinity      |
+| collapsedNodeLength      | 长度大于此阈值的对象或数组将被折叠          | number                            | Infinity      |
 | deep                     | 深度，大于该深度的节点将被折叠              | number                            | Infinity      |
 | showLength               | 在数据折叠的时候展示长度                    | boolean                           | false         |
 | showLine                 | 展示标识线                                  | boolean                           | true          |
@@ -31,23 +31,24 @@
 | selectOnClickNode        | 支持点击节点的时候触发选择                  | boolean                           | true          |
 | highlightSelectedNode    | 支持高亮已选择节点                          | boolean                           | true          |
 | collapsedOnClickBrackets | 支持点击括号折叠                            | boolean                           | true          |
-| renderNodeKey            | 渲染节点键，也可使用 #renderNodeKey    | ({ node, defaultKey }) => vNode | -             |
+| renderNodeKey            | 渲染节点键，也可使用 #renderNodeKey         | ({ node, defaultKey }) => vNode   | -             |
 | renderNodeValue          | 自定义渲染节点值，也可使用 #renderNodeValue | ({ node, defaultValue }) => vNode | -             |
 | editable                 | 支持可编辑                                  | boolean                           | false         |
 | editableTrigger          | 触发编辑的时机                              | `click` \| `dblclick`             | `click`       |
+| theme                    | 主题色                                      | `'light' \| 'dark'`               | `light`       |
 
 ## Events
 
-| 事件名称       | 说明                 | 回调参数             |
-| -------------- | -------------------- | -------------------- |
-| nodeClick      | 点击节点时触发       | (node: NodeData)     |
-| bracketsClick  | 点击括号时触发       | (collapsed: boolean) |
-| iconClick      | 点击图标时触发       | (collapsed: boolean) |
-| selectedChange | 选中值发生变化时触发 | (newVal, oldVal)     |
+| 事件名称       | 说明                 | 回调参数                             |
+| -------------- | -------------------- | ------------------------------------ |
+| nodeClick      | 点击节点时触发       | (node: NodeData)                     |
+| bracketsClick  | 点击括号时触发       | (collapsed: boolean, node: NodeData) |
+| iconClick      | 点击图标时触发       | (collapsed: boolean, node: NodeData) |
+| selectedChange | 选中值发生变化时触发 | (newVal, oldVal)                     |
 
 ## Slots
 
 | 插槽名          | 描述       | 参数                   |
 | --------------- | ---------- | ---------------------- |
-| renderNodeKey | 渲染节点键 | { node, defaultKey } |
+| renderNodeKey   | 渲染节点键 | { node, defaultKey }   |
 | renderNodeValue | 渲染节点值 | { node, defaultValue } |
diff --git a/build/build.js b/build/build.js
@@ -2,15 +2,19 @@ require('./check-versions')();
 
 process.env.NODE_ENV = 'production';
 
-const fs = require('fs');
-const path = require('path');
 const chalk = require('chalk');
 const webpack = require('webpack');
-const { spawn } = require('child_process');
 const webpackConfig = require('./webpack.prod.conf');
 
+const isEsm = process.env.ESM;
 const isExampleEnv = process.env.EXAMPLE_ENV;
 
+const successText = {
+  main: 'Build main sources complete.',
+  esm: 'Build esm sources complete.',
+  example: 'Build example page complete.',
+};
+
 webpack(webpackConfig, (err, stats) => {
   if (err) throw err;
 
@@ -29,7 +33,8 @@ webpack(webpackConfig, (err, stats) => {
     process.exit(1);
   }
 
-  console.log(chalk.cyan('Build sources complete.\n'));
+  const text = isExampleEnv ? successText.example : isEsm ? successText.esm : successText.main;
+  console.log(chalk.cyan(`${text}\n`));
 
   if (isExampleEnv) {
     console.log(
@@ -38,13 +43,5 @@ webpack(webpackConfig, (err, stats) => {
           "Opening index.html over file:// won't work.\n",
       ),
     );
-  } else {
-    const buildTypesProcess = spawn('npm', ['run', 'build:dts'], {
-      stdio: 'inherit',
-    });
-
-    buildTypesProcess.on('close', () => {
-      console.log(chalk.cyan('Build types(.d.ts) complete.\n'));
-    });
   }
 });
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
@@ -10,8 +10,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
 
+const isEsm = process.env.ESM;
 const isExampleEnv = process.env.EXAMPLE_ENV;
-const distPath = '../lib';
+const distPath = isEsm ? '../esm' : '../lib';
 
 const env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : config.build.env;
 
@@ -32,21 +33,35 @@ const webpackConfig = merge(baseWebpackConfig, {
 });
 
 if (!isExampleEnv) {
-  webpackConfig.entry = {
-    'vue-json-pretty': './src/index.ts',
-  };
   webpackConfig.output = {
     path: path.resolve(__dirname, distPath),
     filename: `${distPath}/[name].js`,
-    globalObject: 'this',
-    library: 'VueJsonPretty',
-    libraryTarget: 'umd',
   };
+  if (isEsm) {
+    webpackConfig.entry = {
+      'vue-json-pretty': './src/index.ts',
+    };
+    webpackConfig.experiments = {
+      outputModule: true,
+    };
+    webpackConfig.output.library = { type: 'module' };
+    webpackConfig.output.chunkFormat = 'module';
+    webpackConfig.target = 'es2019';
+  } else {
+    webpackConfig.entry = {
+      'vue-json-pretty': './src/index.ts',
+    };
+    webpackConfig.output.globalObject = 'this';
+    webpackConfig.output.library = 'VueJsonPretty';
+    webpackConfig.output.libraryTarget = 'umd';
+  }
   webpackConfig.externals = {
     vue: {
       root: 'Vue',
-      commonjs: 'vue',
       commonjs2: 'vue',
+      commonjs: 'vue',
+      amd: 'vue',
+      module: 'vue',
     },
   };
   webpackConfig.plugins.push(

diff --git a/example/App.tsx b/example/App.tsx
@@ -1,10 +1,11 @@
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, provide, onMounted, watch } from 'vue';
 import Basic from './Basic.vue';
 import VirtualList from './VirtualList.vue';
 import SelectControl from './SelectControl.vue';
 import Editable from './Editable.vue';
 // import Tsx from './Tsx';
 import './styles.less';
+import { MoonIcon, SunIcon } from './Icons';
 
 const list = [
   {
@@ -41,24 +42,48 @@ export default defineComponent({
       opened: [list[0].key],
     });
 
+    const globalDarkModeState = reactive({
+      isDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
+    });
+
+    provide('darkModeState', globalDarkModeState);
+
     const onActiveChange = (key: string) => {
       state.activeKey = key;
       if (!state.opened.includes(key)) {
         state.opened.push(key);
       }
     };
 
+    const toggleDarkMode = () => {
+      globalDarkModeState.isDarkMode = !globalDarkModeState.isDarkMode;
+    };
+
+    onMounted(() => {
+      document.body.classList.toggle('dark-mode', globalDarkModeState.isDarkMode);
+    });
+
+    watch(
+      () => globalDarkModeState.isDarkMode,
+      newVal => {
+        document.body.classList.toggle('dark-mode', newVal);
+      },
+      { immediate: true },
+    );
+
     return {
       state,
       onActiveChange,
+      toggleDarkMode,
+      globalDarkModeState,
     };
   },
 
   render() {
-    const { state, onActiveChange } = this;
+    const { state, onActiveChange, toggleDarkMode, globalDarkModeState } = this;
 
     return (
-      <div class="example">
+      <div class={`example ${state.isDarkMode ? 'dark-mode' : ''}`}>
         <h1>Vue Json Pretty</h1>
         <p>
           Welcome to the demo space of Vue Json Pretty, here we provide the following different
@@ -67,15 +92,20 @@ export default defineComponent({
 
         <div class="tabs">
           <div class="tabs-header">
-            {list.map(({ title, key }) => (
-              <div
-                key={key}
-                class={`tabs-header-item ${key === state.activeKey ? 'is-active' : ''}`}
-                onClick={() => onActiveChange(key)}
-              >
-                {title}
-              </div>
-            ))}
+            <div class="tabs-items-container">
+              {list.map(({ title, key }) => (
+                <div
+                  key={key}
+                  class={`tabs-header-item ${key === state.activeKey ? 'is-active' : ''}`}
+                  onClick={() => onActiveChange(key)}
+                >
+                  {title}
+                </div>
+              ))}
+            </div>
+            <div class="dark-mode-toggle" onClick={toggleDarkMode}>
+              {globalDarkModeState.isDarkMode ? <SunIcon /> : <MoonIcon />}
+            </div>
           </div>
 
           <div class="tabs-content">
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ node_modules/ @@
     example-dist/
     dist/
     lib/
+    esm/
     types/
     npm-debug.log*
     yarn-debug.log*
@@ Expand Down @@