vue 3 build

first version running with vue 3

Author: razorness

.eslintignore

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitattributes

@@ -1,7 +1,6 @@
 .DS_Store
-node_modules
-/dist
-/docs
+node_modules/
+/dist/
 
 # local env files
 .env.local
@@ -20,5 +19,3 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
-
-.rpt2_cache

.gitignore

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Tyler Krupicka
+Copyright (c) 2021 Tyler Krupicka, Volker Nauruhn
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

.npmrc

@@ -1,8 +1,14 @@
-# Vue JSON Component
+# Vue3 JSON Component
 
-[![npm version](https://badge.fury.io/js/vue-json-component.svg)](https://badge.fury.io/js/vue-json-component) [![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/) ![npm bundle size](https://img.shields.io/bundlephobia/min/vue-json-component.svg) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+---
+**NOTE**
 
-[Demo](http://tylerkrupicka.com/vue-json-component/)
+This is primary a fork of [vue-json-component](https://github.com/tylerkrupicka/vue-json-component) which was created to achieve quick Vue 3 support.
+---
+
+[![npm version](https://badge.fury.io/js/vue3-json-component.svg)](https://badge.fury.io/js/vue3-json-component) [![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/) ![npm bundle size](https://img.shields.io/bundlephobia/min/vue3-json-component.svg) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+
+[Demo](http://tylerkrupicka.com/vue3-json-component/)
 
 A collapsable tree view for JSON. This package has some similarites with [vue-json-tree-view](https://github.com/michaelfitzhavey/vue-json-tree-view) so I'll address the differences below. I'm not contributing this back to that package because it would require breaking API changes, and the code is entirely different. **Contributions welcome!**
 
@@ -13,7 +19,7 @@ A collapsable tree view for JSON. This package has some similarites with [vue-js
 This package has a few major improvements over predecessors: builds, styles, and customization. For builds, this package ships CommonJS, Module, and UNPKG builds with no dependencies. [vue-json-tree-view](https://github.com/michaelfitzhavey/vue-json-tree-view) bundles in lots of dependencies -- including lodash. I also export global Vue imports, local Vue imports, and TypeScript declarations. The code itself is about as small as it can be while being easy to follow.
 
 - [vue-json-tree-view (84KB)](https://bundlephobia.com/result?p=vue-json-tree-view@2.1.4)
-- [vue-json-component (9KB)](https://bundlephobia.com/result?p=vue-json-component@0.3.0)
+- [vue3-json-component (9KB)](https://bundlephobia.com/result?p=vue3-json-component@0.3.0)
 
 The styles in this package are all scoped, with key colors still being customizable. There are no extra margins or overflow rules and text properties are all inherited from the page. This makes the view much easier to integrate anywhere you need it.
 
@@ -24,14 +30,14 @@ The default color theme is based on solarized, and font weights are modified to
 ### Install
 
 ```bash
-npm i vue-json-component
-yarn add vue-json-component
+npm i vue3-json-component
+yarn add vue3-json-component
 ```
 
 ### Import Locally
 
 ```js
-import { JSONView } from 'vue-json-component';
+import { JSONView } from 'vue3-json-component';
 export default Vue.extend({
   components: { 'json-view': JSONView }
 });
@@ -40,7 +46,7 @@ export default Vue.extend({
 ### Import Globally
 
 ```js
-import JSONView from 'vue-json-component';
+import JSONView from 'vue3-json-component';
 Vue.use(JSONView);
 ```
 

LICENSE

@@ -1,3 +1,17 @@
+const devPresets = ['@vue/babel-preset-app'];
+const buildPresets = [
+  [
+    '@babel/preset-env',
+    // Config for @babel/preset-env
+    {
+      // Example: Always transpile optional chaining/nullish coalescing
+      // include: [
+      //   /(optional-chaining|nullish-coalescing)/
+      // ],
+    },
+  ],
+  '@babel/preset-typescript',
+];
 module.exports = {
-  presets: [['@vue/app', { useBuiltIns: 'entry', corejs: { version: 2 } }]]
+  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
 };

README.md

@@ -0,0 +1,189 @@
+// rollup.config.js
+import fs from 'fs';
+import path from 'path';
+import vue from 'rollup-plugin-vue';
+import alias from '@rollup/plugin-alias';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import babel from '@rollup/plugin-babel';
+import PostCSS from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+import ttypescript from 'ttypescript';
+import typescript from 'rollup-plugin-typescript2';
+import minimist from 'minimist';
+import scss from 'rollup-plugin-scss';
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+
+// Get browserslist config and remove ie from es build targets
+const esbrowserslist = fs.readFileSync('./.browserslistrc')
+    .toString()
+    .split('\n')
+    .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
+
+// Extract babel preset-env config, to combine with esbrowserslist
+const babelPresetEnvConfig = require('../babel.config')
+    .presets.filter((entry) => entry[ 0 ] === '@babel/preset-env')[ 0 ][ 1 ];
+
+const argv = minimist(process.argv.slice(2));
+
+const projectRoot = path.resolve(__dirname, '..');
+
+const baseConfig = {
+    input  : 'src/entry.ts',
+    plugins: {
+        preVue : [
+            alias({
+                entries: [
+                    {
+                        find       : '@',
+                        replacement: `${path.resolve(projectRoot, 'src')}`
+                    }
+                ]
+            })
+        ],
+        replace: {
+            'process.env.NODE_ENV': JSON.stringify('production')
+        },
+        vue    : {},
+        postVue: [
+            resolve({
+                extensions: [ '.js', '.jsx', '.ts', '.tsx', '.vue' ]
+            }),
+            scss({
+                processor   : () => postcss([ autoprefixer() ]),
+                includePaths: [
+                    path.join(__dirname, '../../node_modules/'),
+                    'node_modules/'
+                ]
+            }),
+            // Process only `<style module>` blocks.
+            PostCSS({
+                modules: {
+                    generateScopedName: '[local]___[hash:base64:5]'
+                },
+                include: /&module=.*\.css$/
+            }),
+            // Process all `<style>` blocks except `<style module>`.
+            PostCSS({include: /(?<!&module=.*)\.css$/}),
+            commonjs()
+        ],
+        babel  : {
+            exclude     : 'node_modules/**',
+            extensions  : [ '.js', '.jsx', '.ts', '.tsx', '.vue' ],
+            babelHelpers: 'bundled'
+        }
+    }
+};
+
+// ESM/UMD/IIFE shared settings: externals
+// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
+const external = [
+    // list external dependencies, exactly the way it is written in the import statement.
+    // eg. 'jquery'
+    'vue'
+];
+
+// UMD/IIFE shared settings: output.globals
+// Refer to https://rollupjs.org/guide/en#output-globals for details
+const globals = {
+    // Provide global variable names to replace your external imports
+    // eg. jquery: '$'
+    vue: 'Vue'
+};
+
+// Customize configs for individual targets
+const buildFormats = [];
+if (!argv.format || argv.format === 'es') {
+    const esConfig = {
+        ...baseConfig,
+        input  : 'src/entry.esm.ts',
+        external,
+        output : {
+            file   : 'dist/JSONView.esm.js',
+            format : 'esm',
+            exports: 'named'
+        },
+        plugins: [
+            replace(baseConfig.plugins.replace),
+            ...baseConfig.plugins.preVue,
+            vue(baseConfig.plugins.vue),
+            ...baseConfig.plugins.postVue,
+            // Only use typescript for declarations - babel will
+            // do actual js transformations
+            typescript({
+                typescript               : ttypescript,
+                useTsconfigDeclarationDir: true,
+                emitDeclarationOnly      : true
+            }),
+            babel({
+                ...baseConfig.plugins.babel,
+                presets: [
+                    [
+                        '@babel/preset-env',
+                        {
+                            ...babelPresetEnvConfig,
+                            targets: esbrowserslist
+                        }
+                    ]
+                ]
+            })
+        ]
+    };
+    buildFormats.push(esConfig);
+}
+
+if (!argv.format || argv.format === 'cjs') {
+    const umdConfig = {
+        ...baseConfig,
+        external,
+        output : {
+            compact: true,
+            file   : 'dist/JSONView.ssr.js',
+            format : 'cjs',
+            name   : 'JSONView',
+            exports: 'auto',
+            globals
+        },
+        plugins: [
+            replace(baseConfig.plugins.replace),
+            ...baseConfig.plugins.preVue,
+            vue(baseConfig.plugins.vue),
+            ...baseConfig.plugins.postVue,
+            babel(baseConfig.plugins.babel)
+        ]
+    };
+    buildFormats.push(umdConfig);
+}
+
+if (!argv.format || argv.format === 'iife') {
+    const unpkgConfig = {
+        ...baseConfig,
+        external,
+        output : {
+            compact: true,
+            file   : 'dist/JSONView.min.js',
+            format : 'iife',
+            name   : 'JSONView',
+            exports: 'auto',
+            globals
+        },
+        plugins: [
+            replace(baseConfig.plugins.replace),
+            ...baseConfig.plugins.preVue,
+            vue(baseConfig.plugins.vue),
+            ...baseConfig.plugins.postVue,
+            babel(baseConfig.plugins.babel),
+            terser({
+                output: {
+                    ecma: 5
+                }
+            })
+        ]
+    };
+    buildFormats.push(unpkgConfig);
+}
+
+// Export config
+export default buildFormats;

babel.config.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import Dev from './serve.vue';
+
+const app = createApp(Dev);
+app.mount('#app');