@gorse/shards-vue 1.0.8 → 2.0.0

package/README.md

@@ -56,14 +56,15 @@ npm i @gorse/shards-vue
 If you are using a module bundler such as [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/), you can include the entire Shards Vue library inside your project.
 
 ```javascript
-import Vue from 'vue'
+import { createApp } from 'vue'
 import ShardsVue from '@gorse/shards-vue'
+import App from './App.vue'
 
 // Import base styles (Bootstrap and Shards)
 import 'bootstrap/dist/css/bootstrap.css'
 import '@gorse/shards-ui/dist/css/shards.css'
 
-Vue.use(ShardsVue);
+createApp(App).use(ShardsVue).mount('#app')
 ```
 
 <br />
@@ -73,14 +74,16 @@ Vue.use(ShardsVue);
 If you'd like to register only certain components as Vue plugins, make sure to import just the component you'd like to use.
 
 ```javascript
-import Vue from 'vue'
+import { createApp } from 'vue'
+import App from './App.vue'
 
 // Import base styles (Bootstrap and Shards)
 import 'bootstrap/dist/css/bootstrap.css'
 import '@gorse/shards-ui/dist/css/shards.css'
 
 import { Button } from '@gorse/shards-vue/src/components'
-Vue.use(Button)
+
+createApp(App).use(Button).mount('#app')
 
 ```
 
@@ -129,7 +132,7 @@ You can also run `pnpm bundlesize` at any time to check the compiled file sizes.
 
 * [Shards UI Kit](https://designrevision.com/downloads/shards/)
 * [noUiSlider by Léon Gersen (WTFPL License)](https://refreshless.com/nouislider/download/)
-* [vuejs-datepicker](https://github.com/charliekassel/vuejs-datepicker)
+* [Vue Datepicker](https://vue3datepicker.com/)
 
 <br />
 

package/build/optimize.js

@@ -2,9 +2,7 @@
 
 const path = require('path')
 const fs = require('fs')
-const glob = require('glob')
-const UglifyJS = require('uglify-js')
-const UglifyES = require('uglify-es')
+const { minify } = require('terser')
 const PATHS = require('./paths')
 
 function stripTrailingWhitespace(content) {
@@ -14,20 +12,16 @@ function stripTrailingWhitespace(content) {
         .replace(/[ \t]+$/gm, '')
 }
 
-glob(path.resolve(PATHS.DIST + '/*.js'), {}, function(err, files) {
-    if (err) {
-        throw err
-    }
+async function optimize() {
+    const files = fs.readdirSync(PATHS.DIST)
+        .filter(file => file.endsWith('.js') && file.indexOf('.min.js') === -1)
+        .map(file => path.resolve(PATHS.DIST, file))
 
-    files.forEach(file => {
+    for (const file of files) {
         if (path.basename(file).indexOf('.min.js') !== -1) {
-            return
+            continue
         }
 
-        const Uglifier = path.basename(file).indexOf('.esm.js') !== -1
-            ? UglifyES
-            : UglifyJS
-
         // Define minified file path
         let minFilePath = path.basename(file).replace('.js', '.min.js')
         minFilePath = path.resolve(PATHS.DIST + '/' + minFilePath)
@@ -40,10 +34,28 @@ glob(path.resolve(PATHS.DIST + '/*.js'), {}, function(err, files) {
         let _c = fs.readFileSync(file, 'utf8')
         _c = stripTrailingWhitespace(_c)
         fs.writeFileSync(file, _c)
-        _c = Uglifier.minify(_c, { mangle: true, compress: true, sourceMap: true })
+        const sourceMapPath = `${file}.map`
+        const sourceMapContent = fs.existsSync(sourceMapPath)
+            ? fs.readFileSync(sourceMapPath, 'utf8')
+            : null
+
+        _c = await minify(_c, {
+            compress: true,
+            mangle: true,
+            sourceMap: {
+                content: sourceMapContent,
+                filename: path.basename(minFilePath),
+                url: path.basename(minMapPath)
+            }
+        })
 
         // Write minified file and sourcemap
         fs.writeFileSync(minFilePath, _c.code)
         fs.writeFileSync(minMapPath, _c.map)
-    })
+    }
+}
+
+optimize().catch(err => {
+    console.error(err)
+    process.exit(1)
 })

package/build/rollup.config.js

@@ -1,20 +1,22 @@
 'use strict'
 
-import path from 'path'
-import fs from 'fs'
-import { name as packageName, dependencies, version } from '../package.json'
-
-import cleanCSS from 'clean-css'
-import buble from 'rollup-plugin-buble'
-import vuePlugin from 'rollup-plugin-vue'
-import nodeResolve from 'rollup-plugin-node-resolve'
-import commonjs from 'rollup-plugin-commonjs'
+const path = require('path')
+const vuePlugin = require('rollup-plugin-vue')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const commonjs = require('@rollup/plugin-commonjs')
+const postcss = require('rollup-plugin-postcss')
+const {
+    name: packageName,
+    dependencies = {},
+    peerDependencies = {},
+    version
+} = require('../package.json')
 
 const PATHS = require('./paths')
 
 const [major, minor] = process.versions.node.split('.').map(parseFloat)
 if (major < 7 || (major === 7 && minor <= 5)) {
-    utils.logError('Node 7.6+ is required.')
+    console.error('Node 7.6+ is required.')
     process.exit()
 }
 
@@ -39,43 +41,32 @@ const banner = `/*
 */`
 
 const globals = {
+    vue: 'Vue',
     bootstrap: 'bootstrap',
     nouislider: 'noUiSlider',
     '@gorse/shards-ui': 'Shards',
-    'vue-clickaway': 'vueClickaway',
-    'vuejs-datepicker': 'VueDatepicker'
+    '@vuepic/vue-datepicker': 'VueDatePicker'
 }
 
 module.exports = {
     input: PATHS.INPUT,
-    external: Object.keys(dependencies).filter(dep => {
+    external: Object.keys({ ...dependencies, ...peerDependencies }).filter(dep => {
         return ['popper.js', 'lodash.xor'].indexOf(dep) === -1
     }),
     plugins: [
         vuePlugin({
-            compileTemplate: true,
-            style: {
-                preprocessOptions: {
-                    scss: {
-                        silenceDeprecations: ['legacy-js-api']
-                    }
-                }
-            },
-            cssModules: {
+            preprocessStyles: true,
+            cssModulesOptions: {
                 generateScopedName: '[name]__[local]'
-            },
-            css(style) {
-                fs.writeFileSync(
-                    path.resolve(PATHS.DIST, `${bundleName}.css`),
-                    new cleanCSS().minify(style).styles
-                )
             }
         }),
-        nodeResolve({ external: ['vue'] }),
-        commonjs(),
-        buble({
-            objectAssign: 'Object.assign'
-        })
+        postcss({
+            sourceMap: true,
+            minimize: false,
+            inject: true
+        }),
+        nodeResolve(),
+        commonjs()
     ],
     output: [
         {
@@ -83,22 +74,21 @@ module.exports = {
             format: 'cjs',
             name: camelize(bundleName),
             file: path.resolve(PATHS.DIST, bundleName + '.common.js'),
-            sourcemap: true
+            sourcemap: true,
+            exports: 'named'
         },
         {
             banner,
             format: 'umd',
             name: camelize(bundleName),
-            modulename: camelize(bundleName),
             globals,
             file: path.resolve(PATHS.DIST, bundleName + '.umd.js'),
-            sourcemap: true
+            sourcemap: true,
+            exports: 'named'
         },
         {
             banner,
             format: 'es',
-            name: camelize(bundleName),
-            modulename: camelize(bundleName),
             file: path.resolve(PATHS.DIST, bundleName + '.esm.js'),
             sourcemap: true
         }