Better approach in build process

.eslintignore

@@ -0,0 +1,2 @@
+/dist
+/node_modules

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
   },
   extends: [
     'plugin:vue/essential',
-    '@vue/airbnb',
+    'airbnb-base',
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 node_js:
-  - "8"
-  - "9"
+  - 8
+  - 10
 cache:
   yarn: true
   directories:

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/app',
-  ],
+  presets: ['bili/babel'],
 };

bili.config.ts

@@ -0,0 +1,40 @@
+import { Config } from 'bili';
+
+const config: Config = {
+  input: 'index.js',
+  output: {
+    moduleName: 'VueTinyPagination',
+    extractCSS: false,
+    format: ['esm', 'umd', 'cjs'],
+    fileName({ format }, defaultFileName) {
+      if (format === 'esm') {
+        return 'vue-tiny-pagination.esm.js';
+      }
+      if (format === 'umd') {
+        return 'vue-tiny-pagination.js';
+      }
+      if (format === 'cjs') {
+        return 'vue-tiny-pagination.cjs.js';
+      }
+      return defaultFileName;
+    },
+    sourceMapExcludeSources: true
+  },
+  babel: {
+    minimal: true
+  },
+  plugins: {
+    vue: true,
+  },
+  extendConfig(config, { format }) {
+    if (format === 'umd') {
+      config.output.minify = true;
+      config.env = Object.assign({}, config.env, {
+        NODE_ENV: 'production',
+      });
+    }
+    return config;
+  },
+};
+
+export default config;

jest.config.js

@@ -10,9 +10,6 @@ module.exports = {
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
     '^.+\\.jsx?$': 'babel-jest',
   },
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-  },
   snapshotSerializers: [
     'jest-serializer-vue',
   ],

package.json

@@ -1,6 +1,8 @@
 {
   "name": "vue-tiny-pagination",
   "version": "0.3.1",
+  "productName": "Vue Tiny Pagination",
+  "description": "A Vue component for create a tiny pagination with Flexbox",
   "author": {
     "name": "Javier Diaz Chamorro",
     "email": "[email protected]",
@@ -9,14 +11,19 @@
   "license": "MIT",
   "private": false,
   "scripts": {
-    "build": "rollup --config rollup.config.js",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit",
-    "prepare": "yarn test:unit && yarn build"
+    "build": "bili",
+    "lint": "eslint -c .eslintrc.js . --ext .js,.vue",
+    "test:unit": "jest",
+    "prepare": "yarn lint && yarn test:unit && yarn build"
   },
-  "main": "dist/vue-tiny-pagination.umd.js",
+  "main": "dist/vue-tiny-pagination.cjs.js",
   "module": "dist/vue-tiny-pagination.esm.js",
-  "unpkg": "dist/vue-tiny-pagination.min.js",
+  "unpkg": "dist/vue-tiny-pagination.js",
+  "jsdelivr": "dist/vue-tiny-pagination.js",
+  "cdn": "dist/vue-tiny-pagination.js",
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/coderdiaz/vue-tiny-pagination.git"
@@ -35,24 +42,31 @@
     "small",
     "component"
   ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn lint"
+    }
+  },
   "dependencies": {
-    "vue": "^2.5.17"
+    "vue": "^2.6.10"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.5",
-    "@vue/cli-plugin-eslint": "^3.0.5",
-    "@vue/cli-plugin-unit-jest": "^3.0.5",
-    "@vue/cli-service": "^3.0.5",
-    "@vue/eslint-config-airbnb": "^3.0.5",
-    "@vue/test-utils": "^1.0.0-beta.20",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^23.0.1",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.7.1",
+    "bili": "^4.7.3",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-vue": "^5.2.2",
+    "husky": "^1.3.1",
+    "jest": "^24.7.1",
+    "jest-serializer-vue": "^2.0.2",
+    "jest-transform-stub": "^2.0.0",
     "node-sass": "^4.9.0",
-    "rollup": "^1.8.0",
-    "rollup-plugin-commonjs": "^9.2.3",
-    "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-vue": "^4.7.2",
-    "sass-loader": "^7.0.1",
-    "vue-template-compiler": "^2.5.17"
+    "vue-jest": "^3.0.4",
+    "vue-template-compiler": "^2.6.10"
   }
 }

packages/TinyPagination/src/main.vue

@@ -2,26 +2,25 @@
   <div class="vue-tiny-pagination">
     <ul class="tiny-pagination" :class="customClass">
       <li class="page-item" :class="classFirstPage">
-        <a class="btn-prev-page" href="#" @click.prevent="lastPage">{{translation.prev}}</a>
+        <a class="btn-prev-page" href="#" @click.prevent="lastPage">{{ translation.prev }}</a>
       </li>
       <li class="page-item">
-        <span>{{titlePage}}</span>
+        <span>{{ titlePage }}</span>
       </li>
       <li class="page-item" :class="classLastPage">
-        <a class="btn-next-page" href="#" @click.prevent="nextPage">{{translation.next}}</a>
+        <a class="btn-next-page" href="#" @click.prevent="nextPage">{{ translation.next }}</a>
       </li>
       <li v-if="showLimit" class="page-item">
-        <select class="tiny-form-select" v-model="currentLimit" @change="onLimitChange">
+        <select v-model="currentLimit" class="tiny-form-select" @change="onLimitChange">
           <option
             v-for="(limit, index) in limits"
-            :value="limit"
-            :key="index">{{limit}}/{{translation.title}}</option>
+            :key="index"
+            :value="limit">{{ limit }}/{{ translation.title }}</option>
         </select>
       </li>
     </ul>
   </div>
 </template>
-
 <script>
 export default {
   name: 'TinyPagination',
@@ -40,19 +39,20 @@ export default {
     },
     customClass: {
       type: String,
+      default: '',
     },
     limits: {
       type: Array,
-      default () {
+      default() {
         return [10, 15, 20, 50, 100];
       },
     },
     showLimit: {
       type: Boolean,
       default: true,
-    }
+    },
   },
-  data () {
+  data() {
     return {
       version: '0.3.1',
       currentPage: 1,
@@ -67,73 +67,73 @@ export default {
           prev: 'Anterior',
           title: 'Página',
           next: 'Siguiente',
-        }
+        },
       },
       availableLanguages: ['en', 'es'],
     };
   },
-  created () {
-    this.currentPage = this.page
-  },
   computed: {
-    translation () {
-      return (this.availableLanguages.includes(this.lang)) ?
-        this.translations[this.lang]
-      : this.translations['en']
+    translation() {
+      return (this.availableLanguages.includes(this.lang))
+        ? this.translations[this.lang]
+        : this.translations.en;
     },
-    totalPages () {
-      return Math.ceil(this.total/this.currentLimit)
+    totalPages() {
+      return Math.ceil(this.total / this.currentLimit);
     },
-    titlePage () {
-      return `${this.translation.title} ${this.currentPage}`
+    titlePage() {
+      return `${this.translation.title} ${this.currentPage}`;
     },
-    classFirstPage () {
+    classFirstPage() {
       return {
         disabled: (this.currentPage === 1),
-        'c-not-allowed': true
-      }
+        'c-not-allowed': true,
+      };
     },
-    classLastPage () {
+    classLastPage() {
       return {
         disabled: (this.currentPage === this.totalPages),
-        'c-not-allowed': true
-      }
-    }
+        'c-not-allowed': true,
+      };
+    },
+  },
+  watch: {
+    currentPage(value) {
+      this.$emit('tiny:change-page', {
+        page: value,
+      });
+    },
+    currentLimit(value) {
+      this.$emit('tiny:change-limit', {
+        limit: value,
+      });
+    },
+  },
+  created() {
+    this.currentPage = this.page;
   },
   methods: {
-    nextPage () {
+    nextPage() {
       if (this.currentPage !== this.totalPages) {
-        this.currentPage += 1
+        this.currentPage += 1;
       }
     },
-    lastPage () {
+    lastPage() {
       if (this.currentPage > 1) {
-        this.currentPage -= 1
+        this.currentPage -= 1;
       }
     },
-    onLimitChange () {
-      this.currentPage = 1
-    }
-  },
-  watch: {
-    currentPage (value) {
-      this.$emit('tiny:change-page', {
-        page: value
-      })
+    onLimitChange() {
+      this.currentPage = 1;
     },
-    currentLimit (value) {
-      this.$emit('tiny:change-limit', {
-        limit: value
-      })
-    }
-  }
-}
+  },
+};
 </script>
-
 <style lang="scss">
 // Pagination
+$apple-fonts: -apple-system, system-ui, BlinkMacSystemFont;
 .tiny-pagination {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-family: $apple-fonts, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   display: flex;
   list-style: none;
   margin: .2rem 0;
@@ -218,4 +218,4 @@ export default {
     padding-right: 1.2rem;
   }
 }
-</style>
+</style>