Merge pull request #47 from GerkinDev/feature/rollup

Use rollup for builds
GerkinDev · Sep 28, 2018 · e39f4cf · e39f4cf
2 parents 7f7c350 + 7d5cdc9
commit e39f4cf
Show file tree

Hide file tree

Showing 22 changed files with 1,968 additions and 8,239 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ yarn add vuejs-datatable
 
 OR
 
-You can use the pre-compiled ES5 version of the component found in `dist/vuejs-datatable.js`. This will automatically register the component to `datatable`.
+You can use the pre-compiled [*IIFE*](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) version of the component found in `dist/vuejs-datatable.js`. This will automatically register the component to `datatable`.
 
 ```
 <datatable :columns="columns" :data="rows"></datatable>

diff --git a/dist/vuejs-datatable.esm.js b/dist/vuejs-datatable.esm.js
diff --git a/dist/vuejs-datatable.esm.js.map b/dist/vuejs-datatable.esm.js.map
diff --git a/dist/vuejs-datatable.js b/dist/vuejs-datatable.js
diff --git a/dist/vuejs-datatable.js.map b/dist/vuejs-datatable.js.map
diff --git a/examples/ajax/app.js b/examples/ajax/app.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import axios from 'axios';
-import DatatableFactory from '../../index.js';
+import { get } from 'axios';
+import DatatableFactory from '../../dist/vuejs-datatable.esm';
 
 DatatableFactory.registerTableType('ajaxtable', function(table_type){
 	table_type.setFilterHandler(function(url, filter_by, columns){
@@ -35,7 +35,7 @@ DatatableFactory.registerTableType('ajaxtable', function(table_type){
 		return sorted_url;
 	});
 	table_type.setDisplayHandler(function(processed_data, process_steps, setRows, setTotalRowCount){
-		axios.get(processed_data).then(function(response){
+		get(processed_data).then(function(response){
 			let total_rows = response.headers['x-total-count'] * 1;
 
 			setTotalRowCount(total_rows);

diff --git a/examples/ajax/build/app.js b/examples/ajax/build/app.js
diff --git a/examples/ajax/build/app.js.map b/examples/ajax/build/app.js.map
diff --git a/examples/ajax/index.html b/examples/ajax/index.html
@@ -10,7 +10,7 @@
     <body>
         <div class="container">
             <div class="col-xs-12 form-inline">
-                <div class="alert alert-info">This example requires the usage of a JSON server. We recommend <a href="https://github.com/typicode/json-server" target="_blank">typicode/json-server</a> and find it easy to use. Once installed globally, you can run `json-server --watch examples/rows-db.json` from the root directory of this project and then refresh this page.</div>
+                <div class="alert alert-info">This example requires the usage of a JSON server. We recommend <a href="https://github.com/typicode/json-server" target="_blank">typicode/json-server</a> and find it easy to use. You can run <code>npx concurrently --kill-others 'npx json-server --watch examples/rows-db.json' 'npx http-server'</code> from the root directory of this project and then go to <a href="http://localhost:8080/examples/ajax/index.html">http://localhost:8080/examples/ajax/index.html</a></div>
             </div>
 
             <div class="col-xs-12 form-inline">
@@ -30,6 +30,7 @@
 
         <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
         <script src="build/app.js"></script>
     </body>
 </html>
diff --git a/examples/custom-theme/app.js b/examples/custom-theme/app.js
@@ -1,6 +1,5 @@
 import Vue from 'vue';
-import axios from 'axios';
-import DatatableFactory from '../../index.js';
+import DatatableFactory from '../../dist/vuejs-datatable.esm';
 
 DatatableFactory.useDefaultType(false)
 	.registerTableType('datatable', function(table_type){

diff --git a/examples/custom-theme/build/app.js b/examples/custom-theme/build/app.js
diff --git a/examples/custom-theme/build/app.js.map b/examples/custom-theme/build/app.js.map
diff --git a/examples/custom-theme/index.html b/examples/custom-theme/index.html
@@ -34,6 +34,7 @@
 
         <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
         <script src="../rows.json"></script>
         <script src="build/app.js"></script>
     </body>

diff --git a/examples/rollup.examples.config.js b/examples/rollup.examples.config.js
@@ -0,0 +1,51 @@
+import resolve from 'rollup-plugin-node-resolve';
+import globals from 'rollup-plugin-node-globals';
+import commonjs from 'rollup-plugin-commonjs';
+import json from 'rollup-plugin-json';
+import { terser } from 'rollup-plugin-terser';
+
+// The module name
+const name = 'vuejs-datatable';
+
+// Plugins used for build
+const plugins = [
+	resolve({ browser: true }),
+	commonjs({
+		namedExports: {
+			// left-hand side can be an absolute path, a path
+			// relative to the current directory, or the name
+			// of a module in node_modules
+			'object-path': [ 'get', 'set' ],
+			'axios': [ 'get' ],
+		}
+	}),
+	globals(),
+	json(),
+	terser(),
+];
+
+// Destination dir
+const outDir = 'build';
+
+// Should we generate source maps?
+const sourcemap = true;
+
+const generateDemoConfig = dir => ({
+	input: `${__dirname}/${dir}/app.js`,
+	output: {
+		preferBuiltins: false,
+		file: `${__dirname}/${dir}/${outDir}/app.js`,
+		format: 'iife',
+		// Use `name` as window to hack a bit & avoid exports.
+		name: 'window',
+		sourcemap,
+		globals: { vue: 'Vue' },
+	},
+	plugins,
+	external: ['vue'],
+})
+
+export default [
+	generateDemoConfig('ajax'),
+	generateDemoConfig('custom-theme'),
+]
diff --git a/mix-manifest.json b/mix-manifest.json