tabler build script

.babelrc

+{
+  "presets": [
+    "@babel/preset-env"
+  ]
+}

build/banner.js

 'use strict';
 
-const pkg = require('../package.json');
-const year = new Date().getFullYear();
+const pkg = require('../package.json'),
+  year = new Date().getFullYear();
 
 function getBanner(pluginFilename) {
   return `/*!

build/browsersync.js

@@ -2,7 +2,6 @@ const bs = require('browser-sync').create();
 
 bs.init({
   watch: true,
-  port: 4567,
   server: {
     routes: {
       '/': 'tmp',

build/rollup.config.js

 'use strict';
 
-const path = require('path');
-const babel = require('rollup-plugin-babel');
-const resolve = require('rollup-plugin-node-resolve');
-const banner = require('./banner.js');
-
 const BUNDLE = process.env.BUNDLE === 'true';
-const ESM = process.env.ESM === 'true';
 
-let fileDest = `tabler${ESM ? '.esm' : ''}`;
-const external = ['popper.js'];
-const plugins = [
-  babel({
-    // Only transpile our source code
-    exclude: 'node_modules/**',
-    // Include only required helpers
-    externalHelpersWhitelist: [
-      'defineProperties',
-      'createClass',
-      'inheritsLoose',
-      'defineProperty',
-      'objectSpread',
-    ],
-  }),
-];
+import path from 'path';
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import minify from 'rollup-plugin-babel-minify';
 
-const globals = {
-  'popper.js': 'Popper',
-};
+
+const fileDest = 'tabler',
+  banner = require('./banner');
+
+let plugins = [
+  resolve()
+];
 
 if (BUNDLE) {
-  fileDest += '.bundle';
-  // Remove last entry in external array to bundle Popper
-  external.pop();
-  delete globals['popper.js'];
-  plugins.push(resolve());
+  plugins = [plugins, ...[
+    babel({
+      exclude: 'node_modules/**'
+    }),
+    minify({
+      comments: false
+    })
+  ]];
 }
 
-const rollupConfig = {
-  input: path.resolve(__dirname, '../js/tabler.js'),
+module.exports = {
+  input: {
+    tabler: path.resolve(__dirname, '../js/tabler.js'),
+    'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
+    demo: path.resolve(__dirname, '../js/demo.js')
+  },
   output: {
     banner,
-    file: path.resolve(__dirname, `../dist/js/${fileDest}.js`),
-    format: ESM ? 'esm' : 'umd',
-    globals,
+    // name: 'tabler',
+    dir: path.resolve(__dirname, `../dist/js/`),
+    entryFileNames: BUNDLE ? '[name].min.js' : '[name].js',
+    format: 'cjs'
   },
-  external,
   plugins,
 };
-
-if (!ESM) {
-  rollupConfig.output.name = 'tabler';
-}
-
-module.exports = rollupConfig;

js/demo.js

@@ -192,10 +192,4 @@ Init demo
 (function () {
   const demo = new TablerDemo();
   window.DEMO = demo;
-
-  let elem = document.getElementById('layout-manager');
-
-  if (elem) {
-    demo.renderManagerHtml(elem);
-  }
 })();

js/polyfill.js

-'use strict';

js/charts.js → js/tabler-charts.js

-(function($) {
-  $(document).ready(function() {
+(function ($) {
+  $(document).ready(function () {
     $().peity &&
-      $('[data-spark]').each(function() {
-        const $this = $(this),
-          data = $this.attr('data-spark'),
-          color = $this.attr('data-spark-color') || 'blue',
-          type = $this.attr('data-spark-type') || 'line';
-
-        const $div = $('<div />').html(data);
-        $this.append($div);
-
-        let strokeColor = tabler.colors[color],
-          fillColor = tabler.colors[color];
-
-        if (type === 'donut' || type === 'pie') {
-          fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)];
-        } else if (type === 'bar') {
-          fillColor = [fillColor];
-        } else if (type === 'line') {
-          fillColor = tabler.hexToRgbA(fillColor, 0.1);
-        }
-
-        $div.peity(type, {
-          width: $this.width(),
-          height: $this.height(),
-          // max: 100,
-          // min: 0,
-          stroke: strokeColor,
-          strokeWidth: 2,
-          fill: fillColor,
-          padding: 0.2,
-          innerRadius: type === 'donut' ? 17 : 0,
-        });
+    $('[data-spark]').each(function () {
+      const $this = $(this),
+        data = $this.attr('data-spark'),
+        color = $this.attr('data-spark-color') || 'blue',
+        type = $this.attr('data-spark-type') || 'line';
+
+      const $div = $('<div />').html(data);
+      $this.append($div);
+
+      let strokeColor = tabler.colors[color],
+        fillColor = tabler.colors[color];
+
+      if (type === 'donut' || type === 'pie') {
+        fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)];
+      } else if (type === 'bar') {
+        fillColor = [fillColor];
+      } else if (type === 'line') {
+        fillColor = tabler.hexToRgbA(fillColor, 0.1);
+      }
+
+      $div.peity(type, {
+        width: $this.width(),
+        height: $this.height(),
+        // max: 100,
+        // min: 0,
+        stroke: strokeColor,
+        strokeWidth: 2,
+        fill: fillColor,
+        padding: 0.2,
+        innerRadius: type === 'donut' ? 17 : 0,
       });
+    });
   });
 })(jQuery);
 

package.json

@@ -24,12 +24,9 @@
     "watch-js": "nodemon --watch js/ --ext js --exec \"npm run js-compile-standalone\"",
     "js": "npm-run-all js-compile js-minify",
     "js-lint": "eslint --cache --cache-location .cache/.eslintcache js build/",
-    "js-compile": "npm-run-all --parallel js-compile-* --sequential js-minify",
+    "js-compile": "npm-run-all --sequential js-compile-*",
     "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
     "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
-    "js-minify": "npm-run-all js-minify-standalone* js-minify-bundle",
-    "js-minify-standalone": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
-    "js-minify-bundle": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.bundle.js.map,includeSources,url=tabler.bundle.min.js.map\" --output dist/js/tabler.bundle.min.js dist/js/tabler.bundle.js",
     "svg-svgo": "svgo -f svg/fe --pretty && svgo -f svg/brand --pretty",
     "svg-iconfont": "mkdir -p svg-tmp && for i in svg/*/*.svg;do N=`echo $i | sed -e 's/^svg\\///g' | sed -e 's/\\\\.svg$//g' | sed -e 's/\\//-/g'`; echo $i; rsvg-convert $i -o svg-tmp/$N.svg -f svg -w 1000; done && svgo ./svg-tmp/*.svg --disable={removeViewBox} && icon-font-generator ./svg-tmp/*.svg -o fonts/tabler-webfont --html false --cssfontsurl ../fonts/tabler-webfont --csstp build/tabler-webfont.hbs --csspath scss/fonts/_tabler-webfont.scss --center --normalize --name tabler-webfont --types svg,eot,ttf,woff,woff2 --json false && rm -rf svg-tmp && node build/generate-font-codepoints.js"
   },
@@ -53,6 +50,7 @@
   ],
   "homepage": "https://tabler.io",
   "devDependencies": {
+    "@babel/preset-env": "^7.6.0",
     "browser-sync": "2.26.7",
     "bundlesize": "0.17.2",
     "clean-css-cli": "4.3.0",
@@ -70,6 +68,10 @@
     "postcss-cli": "6.1.2",
     "rollup": "1.15.6",
     "rollup-plugin-babel": "4.3.2",
+    "rollup-plugin-babel-minify": "^9.0.0",
+    "rollup-plugin-commonjs": "10.1.0",
+    "rollup-plugin-filesize": "6.2.0",
+    "rollup-plugin-multi-input": "1.0.2",
     "rollup-plugin-node-resolve": "5.0.3",
     "shx": "0.3.2",
     "stylelint": "10.1.0",
@@ -81,8 +83,9 @@
   "dependencies": {
     "apexcharts": "3.8.0",
     "autosize": "4.0.2",
-    "bootstrap": "twbs/bootstrap#fb475e9",
+    "bootstrap": "twbs/bootstrap#2f549ec",
     "imask": "5.1.5",
+    "jquery": "3.4.1",
     "selectize": "0.12.6"
   },
   "bundlesize": [

pages/_includes/layout/js.html

+<!-- tabler core -->
 <script src="{{ site.base }}/libs/jquery/jquery.js"></script>
 <script src="{{ site.base }}/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
-
-<script src="{{ site.base }}/libs/apexcharts/apexcharts.min.js"></script>
-<script src="{{ site.base }}/libs/peity/jquery.peity.min.js"></script>
 <script src="{{ site.base }}/libs/autosize/autosize.min.js"></script>
 <script src="{{ site.base }}/libs/imask/imask.min.js"></script>
 <script src="{{ site.base }}/libs/selectize/js/standalone/selectize.min.js"></script>
 
+<script src="{{ site.base }}/dist/js/tabler.js"></script>
+
+<!-- tabler charts -->
+<script src="{{ site.base }}/libs/apexcharts/apexcharts.min.js"></script>
+<script src="{{ site.base }}/libs/peity/jquery.peity.min.js"></script>
+<script src="{{ site.base }}/dist/js/tabler-charts.js"></script>
 
-<script src="{{ site.base }}/js/polyfill.js"></script>
-<script src="{{ site.base }}/js/tabler.js"></script>
-<script src="{{ site.base }}/js/charts.js"></script>
-<script src="{{ site.base }}/js/demo.js"></script>
+<!-- demo scripts -->
+<script src="{{ site.base }}/dist/js/demo.js"></script>
 
 <script>
    window.tabler = window.tabler || {};