feat(rollup): Use rollup to generate UMD and ESM build

package.json

@@ -6,11 +6,12 @@
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --target lib --name VueImageWall ./src/install.js",
+    "build": "rollup -c",
     "lint": "vue-cli-service lint",
     "semantic-release": "semantic-release"
   },
-  "main": "dist/VueImageWall.umd.js",
+  "main": "dist/vue-image-wall.umd.js",
+  "module": "dist/vue-image-wall.esm.js",
   "files": [
     "dist/*",
     "src/*"
@@ -19,16 +20,23 @@
     "lodash": "^4.17.15",
     "vue": "^2.6.10"
   },
+  "peerDependencies": {
+    "lodash": "^4.17.15",
+    "vue": "^2.6.10"
+  },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.11.0",
-    "@vue/cli-plugin-eslint": "^3.11.0",
-    "@vue/cli-service": "^3.11.0",
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@vue/cli-plugin-babel": "^4.5.8",
+    "@vue/cli-plugin-eslint": "^4.5.8",
+    "@vue/cli-service": "^4.5.8",
     "node-sass": "^4.12.0",
-    "rollup": "^1.24.0",
-    "rollup-plugin-buble": "^0.19.8",
-    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup": "^2.32.1",
+    "rollup-plugin-filesize": "^9.0.2",
+    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^5.0.1",
-    "sass-loader": "^8.0.0",
+    "sass-loader": "^10.0.4",
     "semantic-release": "^17.2.1",
     "vue-template-compiler": "^2.6.10"
   },

readme.md

@@ -25,26 +25,25 @@ yarn add vue-image-wall
 ## Usage
 __FEATURES UNDER DEVELOPMENT__
 
-1. Width is fixed to 250px, will be fixed
+1. Height is fixed to 250px, will be fixed
 2. Will add ability to accept config (scale of image, animation duration, etc)
 
 ```
 <template>
   <div id="app">
-    <vue-image-wall v-bind:link-images="listImages"></vue-image-wall>
+    <vue-image-wall :link-images="images"></vue-image-wall>
   </div>
 </template>
 
 <script>
-
   import VueImageWall from 'vue-image-wall';
 
   export default {
     name: 'app',
     components: { VueImageWall },
     data: function () {
       return {
-        listImages: [
+        images: [
           '/assets/0.jpg',
           '/assets/1.jpg',
           '/assets/2.jpg',
@@ -54,7 +53,6 @@ __FEATURES UNDER DEVELOPMENT__
       };
     },
   };
-
 </script>
 
 <style scoped>
@@ -63,7 +61,7 @@ __FEATURES UNDER DEVELOPMENT__
 
 | props | type | default value | note |
 |-----|------|-------|------|
-| linkImages | `[String]` | (required) | Contains list of images that this component will display |
+| link-images | `[String]` | (required) | Contains list of images that this component will display |
 
 ## How to Contribute
 

rollup.config.js

@@ -0,0 +1,43 @@
+import resolve from '@rollup/plugin-node-resolve';
+import buble from '@rollup/plugin-buble';
+import commonjs from '@rollup/plugin-commonjs';
+import filesize from 'rollup-plugin-filesize';
+import { terser } from 'rollup-plugin-terser';
+import VuePlugin from 'rollup-plugin-vue';
+import pkg from './package.json';
+
+export default [
+  // browser-friendly UMD build
+  {
+    input: './src/install.js',
+    output: {
+      name: 'VueImageWall',
+      file: pkg.main,
+      format: 'umd',
+    },
+    plugins: [
+      resolve(),
+      commonjs(),
+      VuePlugin(),
+      buble(),
+      terser(),
+      filesize(),
+    ],
+  },
+
+  // ESM build
+  {
+    input: './src/install.js',
+    external: ['vue', 'lodash'],
+    output: [
+      { file: pkg.module, format: 'es' },
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      VuePlugin(),
+      terser(),
+      filesize(),
+    ],
+  },
+];

src/components/ImageWall.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-  import ImageFrame from './ImageFrame';
+  import ImageFrame from './ImageFrame.vue';
 
   export default {
     name: 'ImageWall',

src/components/ImageWallWrapper.vue

@@ -17,7 +17,7 @@
 <script>
   import _ from 'lodash';
   import { degreeToRad } from '../helper';
-  import ImageWall from './ImageWall';
+  import ImageWall from './ImageWall.vue';
 
   /**
    * This wrapper contain all the configuration for Image Wall component

src/install.js

@@ -1,8 +1,17 @@
-import VueImageWall from './components/ImageWallWrapper';
+import VueImageWall from './components/ImageWallWrapper.vue';
 
-export default VueImageWall;
+const componentName = 'vue-image-wall';
+
+// For use as global component
+// To use: Vue.use(VueImageWall)
+VueImageWall.install = function (Vue) {
+  Vue.component(componentName, VueImageWall);
+};
 
-// For browser tag
+// For browser tag <script> usage
+// No need to register (its done here)
 if (typeof window !== 'undefined' && window.Vue) {
-  window.Vue.component('VueImageWall', VueImageWall);
+  window.Vue.component(componentName, VueImageWall);
 }
+
+export default VueImageWall;