Merge pull request #85 from leezng/dev

pre release

Author: leezng

.github/workflows/bump-version.yml

@@ -0,0 +1,61 @@
+name: Create Release
+
+on:
+  push:
+    branches: 
+      - "master"
+
+jobs:
+  bump-version:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+
+      - name: Automated Version Bump
+        uses: phips28/[email protected]
+        env:
+          GITHUB_USER: ${{ secrets.CI_NAME }}
+          GITHUB_EMAIL: ${{ secrets.CI_EMAIL }}
+
+  publish-npm:
+    needs: bump-version
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+
+      - name: Publish
+        run: |
+          npm ci
+          npm run build
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  publish-gpr:
+    needs: bump-version
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://npm.pkg.github.com/
+
+      - name: Publish
+        run: |
+          npm ci
+          npm run build
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/gh-pages.yml

@@ -0,0 +1,27 @@
+name: Gh Pages
+
+on:
+  push:
+    branches: 
+      - "master"
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: npm run build:example
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./example-dist
+          user_name: ${{ secrets.CI_NAME }}
+          user_email: ${{ secrets.CI_EMAIL }}

.github/workflows/lint.yml

@@ -0,0 +1,22 @@
+name: Lint
+
+on: [push, pull_request]
+
+jobs:
+  run-linters:
+    name: Run Linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Lint
+        run: |
+          npm install
+          npm run lint

.gitignore

@@ -2,12 +2,13 @@
 node_modules/
 example-dist/
 dist/
+lib/
+react/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 test/e2e/reports
 selenium-debug.log
-react/
 
 # Editor directories and files
 .idea

.travis.yml

@@ -18,13 +18,15 @@ A vue 2.x component for rendering JSON data as a tree structure.
 
 ## Install
 
-```js
-npm install vue-json-pretty
+```bash
+npm install vue-json-pretty --save
 ```
 
 ## Usage
 
-```html
+The CSS file is included separately and needs to be imported manually. You can either import CSS globally in your app (if supported by your framework) or directly from the component.
+
+```vue
 <template>
   <div>
     ...
@@ -35,16 +37,39 @@ npm install vue-json-pretty
     </vue-json-pretty>
   </div>
 </template>
-```
 
-```js
+<script>
 import VueJsonPretty from 'vue-json-pretty'
+import 'vue-json-pretty/lib/styles.css';
 
 export default {
   components: {
     VueJsonPretty
   }
 }
+</script>
+```
+
+## Nuxt.js
+
+1. In `plugins/vue-json-pretty.js`
+
+```
+import Vue from 'vue'
+import VueJsonPretty from 'vue-json-pretty'
+
+Vue.component("vue-json-pretty", VueJsonPretty);
+```
+
+2. In `nuxt.config.js`
+
+```js
+css: [
+  'vue-json-pretty/lib/styles.css'
+],
+plugins: [
+  '@/plugins/vue-json-pretty'
+],
 ```
 
 ## Props
@@ -68,6 +93,7 @@ export default {
 | 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) | - |
 
 ## Events
@@ -76,3 +102,8 @@ export default {
 |---------- |-------- |---------- |
 | 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
+
+[![](https://avatars3.githubusercontent.com/u/153197?v=3&s=50)](https://github.com/rchl)
+[![](https://avatars1.githubusercontent.com/u/445616?v=3&s=50)](https://github.com/blackmad)

README.md

@@ -34,7 +34,7 @@ exports.cssLoaders = function (options) {
 
     // Extract CSS when that option is specified
     // (which is the case during production build)
-    if (options.extract && !!!process.env.DIST_ENV) {
+    if (options.extract) {
       return ['vue-style-loader'].concat([MiniCssExtractPlugin.loader].concat(loaders))
     } else {
       return ['vue-style-loader'].concat(loaders)

build/utils.js

@@ -10,8 +10,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 
-const isDist = !!process.env.DIST_ENV
-const distPath = '../dist'
+const isExampleEnv = process.env.EXAMPLE_ENV
+const distPath = '../lib'
 
 const env = process.env.NODE_ENV === 'testing'
   ? require('../config/test.env')
@@ -36,35 +36,31 @@ const webpackConfig = merge(baseWebpackConfig, {
     new webpack.DefinePlugin({
       'process.env': env
     }),
-    new CopyWebpackPlugin({
-      patterns: [
-        {
-          from: path.resolve(__dirname, '../README.md'),
-          to: isDist ? path.resolve(__dirname, distPath) : config.build.assetsRoot
-        }
-      ],
-    }),
   ]
 })
 
-if (isDist) {
+if (!isExampleEnv) {
   webpackConfig.entry = {
     'vue-json-pretty': './src/index.js'
   }
   webpackConfig.output = {
     path: path.resolve(__dirname, distPath),
     filename: `${distPath}/[name].js`,
+    globalObject: 'this',
     library: 'VueJsonPretty',
     libraryTarget: 'umd'
   }
   webpackConfig.plugins.push(
-    new CopyWebpackPlugin({
-      patterns: [
-        {
-          from: path.resolve(__dirname, '../package.json'),
-          to: path.resolve(__dirname, distPath)
-        }
-      ],
+    // extract css into its own file
+    new MiniCssExtractPlugin({
+      filename: 'styles.css'
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: {
+        safe: true
+      }
     }),
   )
 } else {