Merge pull request #95 from leezng/dev-next

Dev next

Author: leezng

.babelrc

@@ -1,17 +1,20 @@
 {
   "presets": [
-    ["env", {
+    ["@babel/preset-env", {
       "modules": false,
       "targets": {
-        "browsers": ["> 1%", "last 5 versions", "not ie <= 10"]
+        "browsers": ["> 1%", "last 10 versions", "not ie <= 11"]
       }
     }],
-    "stage-2"
+    ["@babel/preset-typescript", {
+      "allExtensions": true,
+      "isTSX": true
+    }]
   ],
-  "plugins": ["transform-runtime"],
+  "plugins": ["@babel/plugin-transform-runtime", "@vue/babel-plugin-jsx"],
   "env": {
     "test": {
-      "presets": ["env", "stage-2"],
+      "presets": ["@babel/preset-env"],
       "plugins": ["istanbul"]
     }
   }

.eslintrc.js

@@ -1,12 +1,21 @@
-// http://eslint.org/docs/user-guide/configuring
-
 module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
   extends: [
-    'plugin:vue/recommended'
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    // '@vue/prettier',
+    // '@vue/prettier/@typescript-eslint',
   ],
-  // add your custom rules here
-  'rules': {
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
-  }
-}
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    // 'prettier/prettier': [1, { arrowParens: 'avoid' }],
+  },
+};

.github/workflows/bump-version.yml

@@ -2,8 +2,8 @@ name: Create Release
 
 on:
   push:
-    branches: 
-      - "master"
+    branches:
+      - 'master'
 
 jobs:
   bump-version:
@@ -14,6 +14,8 @@ jobs:
 
       - name: Automated Version Bump
         uses: phips28/[email protected]
+        with:
+          major-wording: MAJOR
         env:
           GITHUB_USER: ${{ secrets.CI_NAME }}
           GITHUB_EMAIL: ${{ secrets.CI_EMAIL }}

.gitignore

@@ -3,7 +3,7 @@ node_modules/
 example-dist/
 dist/
 lib/
-react/
+types/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

.postcssrc.js

@@ -1,8 +1,8 @@
 // https://github.com/michael-ciniawsky/postcss-load-config
 
 module.exports = {
-  "plugins": {
+  plugins: {
     // to edit target browsers: use "browserslist" field in package.json
-    "autoprefixer": {}
-  }
-}
+    autoprefixer: {},
+  },
+};

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "indent": 2,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+}

README.md

@@ -1,25 +1,54 @@
-# vue-json-pretty
+<p align="center">
+  <a href="https://github.com/leezng/vue-json-pretty">
+    <img width="200" src="./static/logo.svg">
+  </a>
+</p>
+
+<h1 align="center">
+  <a href="https://github.com/leezng/vue-json-pretty" target="_blank">Vue Json Pretty</a>
+</h1>
+
+<div align="center">
+
+<p>A Vue component for rendering JSON data as a tree structure.</p>
+<p>Now it supports Vue3 at least. If you still use Vue2, see <a href="https://github.com/leezng/vue-json-pretty/tree/1.x">1.x</a>.</p>
 
 [![Build Status](https://travis-ci.org/leezng/vue-json-pretty.svg?branch=master)](https://travis-ci.org/leezng/vue-json-pretty)
 [![npm package](https://img.shields.io/npm/v/vue-json-pretty.svg)](https://www.npmjs.org/package/vue-json-pretty)
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/leezng/vue-json-pretty/blob/master/LICENSE)
+[![Sizes](https://img.shields.io/bundlephobia/min/vue-json-pretty)](https://bundlephobia.com/result?p=vue-json-pretty)
+[![NPM downloads](http://img.shields.io/npm/dm/vue-json-pretty.svg?style=flat-square)](https://www.npmtrends.com/vue-json-pretty)
+[![Issues](https://img.shields.io/github/issues-raw/leezng/vue-json-pretty)](https://github.com/leezng/vue-json-pretty/issues)
+
+</div>
+
+English | [简体中文](./README-zh_CN.md)
 
-A vue 2.x component for rendering JSON data as a tree structure.
+## Features
 
-- As a JSON Formatter
-- Get item data from JSON
+- As a JSON Formatter.
+- Get item data from JSON.
+- Written in TypeScript with predictable static types.
+- Support big data.
 
-## Links
+## Environment Support
 
-- [Demo](https://leezng.github.io/vue-json-pretty)
-- [Github](https://github.com/leezng/vue-json-pretty)
-- [NPM](https://www.npmjs.com/package/vue-json-pretty)
-- [中文文档](./README.zh-CN.md)
+- Modern browsers and Internet Explorer 11 (with [polyfills](https://www.antdv.com/docs/vue/getting-started/#Compatibility))
+- Server-side Rendering
+- [Electron](https://electronjs.org/)
 
-## Install
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| IE11, Edge                                                                                                                                                                                                      | last 10 versions                                                                                                                                                                                                  | last 10 versions                                                                                                                                                                                              | last 10 versions                                                                                                                                                                                              | last 2 versions                                                                                                                                                                                                       |
+
+## Using NPM or Yarn
 
 ```bash
-npm install vue-json-pretty --save
+$ npm install vue-json-pretty --save
+```
+
+```bash
+$ yarn add vue-json-pretty
 ```
 
 ## Usage
@@ -29,28 +58,23 @@ The CSS file is included separately and needs to be imported manually. You can e
 ```vue
 <template>
   <div>
-    ...
-    <vue-json-pretty
-      :path="'res'"
-      :data="{ key: 'value' }"
-      @click="handleClick">
-    </vue-json-pretty>
+    <vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick"> </vue-json-pretty>
   </div>
 </template>
 
 <script>
-import VueJsonPretty from 'vue-json-pretty'
-import 'vue-json-pretty/lib/styles.css'
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
 
 export default {
   components: {
-    VueJsonPretty
-  }
-}
+    VueJsonPretty,
+  },
+};
 </script>
 ```
 
-## Nuxt.js
+## Use Nuxt.js
 
 1. In `plugins/vue-json-pretty.js`
 
@@ -77,31 +101,31 @@ plugins: [
 - If you are using only the normal features (JSON pretty), just focus on the `base` properties.
 - If you are using higher features (Get data), you can use `base` and `higher` attributes.
 
-| Attribute | Level | Description | Type | Default |
-|-------- |-------- |-------- |-------- | -------- |
-| data | normal | json data | JSON object | - |
-| deep | normal | data depth, data larger than this depth will not be expanded | number | Infinity |
-| showLength | normal | whether to show the length when closed | boolean | false |
-| showLine | normal | whether to show the line | boolean | true |
-| showDoubleQuotes | normal | whether to show doublequotes on key | boolean | true |
-| highlightMouseoverNode | normal | highlight current node when mouseover | boolean | false |
-| v-model | higher | defines value when the tree can be selected | string, array | -, [] |
-| path | higher | root data path | string | root |
-| pathChecked | higher | defines the selected data path | array | [] |
-| pathSelectable | higher | defines whether a data path supports selection | Function(itemPath, itemData) | - |
-| selectableType | higher | defines the selected type, this feature is not supported by default | enum: -, multiple, single  | - |
-| showSelectController | higher | whether to show the select controller at left | boolean | false |
-| selectOnClickNode | higher | whether to change selected value when click node | boolean | true |
-| highlightSelectedNode | higher | highlight current node when selected | boolean | true |
-| collapsedOnClickBrackets | higher | collapsed control | boolean | true |
-| customValueFormatter | higher | a function that can return different html or strings to display for values in the data. | Function(data, key, parent, defaultFormatted) | - |
+| Attribute                | Level  | Description                                                                             | Type                                           | Default  |
+| ------------------------ | ------ | --------------------------------------------------------------------------------------- | ---------------------------------------------- | -------- |
+| data                     | normal | JSON data                                                                               | JSON object                                    | -        |
+| deep                     | normal | Data depth, data larger than this depth will not be expanded                            | number                                         | Infinity |
+| showLength               | normal | Whether to show the length when closed                                                  | boolean                                        | false    |
+| showLine                 | normal | Whether to show the line                                                                | boolean                                        | true     |
+| showDoubleQuotes         | normal | Whether to show doublequotes on key                                                     | boolean                                        | true     |
+| virtual                  | normal | Whether to use virtual scrolling, usually used for big data                             | boolean                                        | false    |
+| itemHeight               | normal | The height of each item when using virtual scrolling                                    | number                                         | auto     |
+| v-model                  | higher | Defines value when the tree can be selected                                             | string, array                                  | -        |
+| path                     | higher | Root data path                                                                          | string                                         | root     |
+| pathSelectable           | higher | Defines whether a data path supports selection                                          | function(path, content)                        | -        |
+| selectableType           | higher | Defines the selected type, this feature is not supported by default                     | multiple, single                               | -        |
+| showSelectController     | higher | Whether to show the select controller at left                                           | boolean                                        | false    |
+| selectOnClickNode        | higher | Whether to change selected value when click node                                        | boolean                                        | true     |
+| highlightSelectedNode    | higher | Highlight current node when selected                                                    | boolean                                        | true     |
+| collapsedOnClickBrackets | higher | Collapsed control                                                                       | boolean                                        | true     |
+| customValueFormatter     | higher | A function that can return different html or strings to display for values in the data. | function(data, key, path, defaultFormatResult) | -        |
 
 ## Events
 
-| Event Name | Description | Callback Parameters |
-|---------- |-------- |---------- |
-| click  | triggered when a data item is clicked | (path, data) |
-| change  | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) |
+| Event Name | Description                                                                  | Callback Parameters |
+| ---------- | ---------------------------------------------------------------------------- | ------------------- |
+| click      | triggered when a data item is clicked                                        | (path, data)        |
+| change     | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal)    |
 
 ## Major Contributors
 

README.zh-CN.md renamed to README.zh_CN.md

@@ -1,30 +1,55 @@
-require('./check-versions')()
+require('./check-versions')();
 
-process.env.NODE_ENV = 'production'
+process.env.NODE_ENV = 'production';
 
-const path = require('path')
-const chalk = require('chalk')
-const webpack = require('webpack')
-const webpackConfig = require('./webpack.prod.conf')
+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');
 
-webpack(webpackConfig, function (err, stats) {
-  if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n\n')
+const isExampleEnv = process.env.EXAMPLE_ENV;
+
+webpack(webpackConfig, (err, stats) => {
+  if (err) throw err;
+
+  process.stdout.write(
+    stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false,
+    }) + '\n\n',
+  );
 
   if (stats.hasErrors()) {
-    console.log(chalk.red('  Build failed with errors.\n'))
-    process.exit(1)
+    console.log(chalk.red('Build failed with errors.\n'));
+    process.exit(1);
   }
 
-  console.log(chalk.cyan('  Build complete.\n'))
-  console.log(chalk.yellow(
-    '  Tip: built files are meant to be served over an HTTP server.\n' +
-    '  Opening index.html over file:// won\'t work.\n'
-  ))
-})
+  console.log(chalk.cyan('Build sources complete.\n'));
+
+  if (isExampleEnv) {
+    console.log(
+      chalk.yellow(
+        'Tip: built files are meant to be served over an HTTP server.\n' +
+          "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 complete.\n'));
+
+      fs.copyFile('types/components/Tree/index.d.ts', 'lib/vue-json-pretty.d.ts', err => {
+        if (err) throw err;
+        console.log(chalk.cyan('Build major d.ts complete.\n'));
+      });
+    });
+  }
+});