From b7b1bb5dd717c1ff7b4a4ef9250c3b5d7809db8e Mon Sep 17 00:00:00 2001 From: codecalm Date: Sun, 8 Sep 2019 23:28:44 +0200 Subject: [PATCH] tabler build script --- .babelrc | 5 +++ build/banner.js | 4 +- build/browsersync.js | 1 - build/rollup.config.js | 71 ++++++++++++------------------ js/autosize.js | 0 js/demo.js | 6 --- js/polyfill.js | 1 - js/{charts.js => tabler-charts.js} | 66 +++++++++++++-------------- package.json | 13 +++--- pages/_includes/layout/js.html | 16 ++++--- 10 files changed, 86 insertions(+), 97 deletions(-) create mode 100644 .babelrc delete mode 100644 js/autosize.js delete mode 100644 js/polyfill.js rename js/{charts.js => tabler-charts.js} (65%) diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..a29ac998 --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + "@babel/preset-env" + ] +} diff --git a/build/banner.js b/build/banner.js index c1720f25..107c2d73 100644 --- a/build/banner.js +++ b/build/banner.js @@ -1,7 +1,7 @@ '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 `/*! diff --git a/build/browsersync.js b/build/browsersync.js index 2f2220e4..592c6bc5 100755 --- a/build/browsersync.js +++ b/build/browsersync.js @@ -2,7 +2,6 @@ const bs = require('browser-sync').create(); bs.init({ watch: true, - port: 4567, server: { routes: { '/': 'tmp', diff --git a/build/rollup.config.js b/build/rollup.config.js index 039b94ca..ab615a28 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -1,56 +1,43 @@ '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; diff --git a/js/autosize.js b/js/autosize.js deleted file mode 100644 index e69de29b..00000000 diff --git a/js/demo.js b/js/demo.js index 2f2288ba..ba1a0155 100644 --- a/js/demo.js +++ b/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); - } })(); diff --git a/js/polyfill.js b/js/polyfill.js deleted file mode 100644 index ad9a93a7..00000000 --- a/js/polyfill.js +++ /dev/null @@ -1 +0,0 @@ -'use strict'; diff --git a/js/charts.js b/js/tabler-charts.js similarity index 65% rename from js/charts.js rename to js/tabler-charts.js index d6e798d4..10a378e7 100644 --- a/js/charts.js +++ b/js/tabler-charts.js @@ -1,38 +1,38 @@ -(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 = $('
').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 = $('
').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); diff --git a/package.json b/package.json index 05158db6..ab4c1483 100644 --- a/package.json +++ b/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": [ diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html index be6b4cde..39810c5b 100644 --- a/pages/_includes/layout/js.html +++ b/pages/_includes/layout/js.html @@ -1,17 +1,19 @@ + - - - + + + + + + - - - - + +