From 1cf95b490f5c8c03d2614079759c6ee3b17731a3 Mon Sep 17 00:00:00 2001 From: Don McCurdy Date: Sat, 20 Jan 2018 00:01:41 -0800 Subject: [PATCH] Use Rollup for UMD and ES6 builds. --- .babelrc | 7 ++ index.js => licenseBanner.txt | 4 - package.json | 58 ++++----------- rollup.config.js | 47 ++++++++++++ rollup.config.min.js | 36 +++++++++ ...saveDialogue.html => saveDialogue.html.js} | 6 +- src/dat/utils/css.js | 8 +- webpack/webpack.config.js | 73 ------------------- webpack/webpack.config.min.js | 31 -------- 9 files changed, 115 insertions(+), 155 deletions(-) create mode 100644 .babelrc rename index.js => licenseBanner.txt (86%) create mode 100644 rollup.config.js create mode 100644 rollup.config.min.js rename src/dat/gui/{saveDialogue.html => saveDialogue.html.js} (84%) delete mode 100644 webpack/webpack.config.js delete mode 100644 webpack/webpack.config.min.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..16c30ec --- /dev/null +++ b/.babelrc @@ -0,0 +1,7 @@ +{ + "presets": [ + ["env", { + "modules": false + }] + ] +} diff --git a/index.js b/licenseBanner.txt similarity index 86% rename from index.js rename to licenseBanner.txt index 04926e3..dd7aa97 100644 --- a/index.js +++ b/licenseBanner.txt @@ -10,7 +10,3 @@ * * http://www.apache.org/licenses/LICENSE-2.0 */ - -import dat from './src/dat/index'; - -export default dat; diff --git a/package.json b/package.json index 3c18871..08f675a 100644 --- a/package.json +++ b/package.json @@ -2,39 +2,16 @@ "name": "dat.gui", "version": "0.6.5", "description": "A lightweight graphical user interface for changing variables in JavaScript.", - "main": "index.js", + "main": "build/dat.gui.js", + "module": "build/dat.gui.module.js", "directories": { "test": "tests" }, - "browserify": { - "transform": [ - [ - "babelify", - { - "presets": [ - "es2015" - ] - } - ], - [ - "stringify", - { - "extensions": [ - ".html" - ] - } - ], - [ - "sassify" - ] - ] - }, "scripts": { - "dev": "webpack --progress --colors --watch --config webpack/webpack.config.js --devtool sourcemap", - "build": "npm run build-js && npm run build-css", - "build-js": "webpack --config ./webpack/webpack.config.js --devtool sourcemap && webpack --config ./webpack/webpack.config.min.js", - "build-css": "node-sass src/dat/gui/style.scss build/dat.gui.css", + "dev": "concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c -w -m inline\" \"serve --port 8080\"", + "build": "rollup -c && rollup -c rollup.config.min.js", "build-docs": "jsdoc2md -f src/dat/gui/GUI.js src/dat/controllers/Controller.js src/dat/controllers/NumberController.js | replace-between --target API.md --token API", + "lint": "eslint src", "postversion": "git push && git push --tags && npm publish" }, "repository": { @@ -48,28 +25,25 @@ }, "homepage": "https://github.com/dataarts/dat.gui#readme", "devDependencies": { - "babel-core": "^6.14.0", - "babel-loader": "^6.2.5", - "babel-plugin-add-module-exports": "^0.2.1", - "babel-preset-stage-0": "^6.5.0", - "css-loader": "^0.25.0", + "babel-core": "^6.26.0", + "babel-plugin-external-helpers": "^6.22.0", + "babel-preset-env": "^1.6.1", + "concurrently": "^3.5.1", "eslint": "^3.5.0", "eslint-config-airbnb-base": "^7.1.0", "eslint-loader": "^1.5.0", "eslint-plugin-import": "^1.15.0", "extend": "^3.0.0", - "html-loader": "^0.4.4", "jsdoc-to-markdown": "^3.0.2", "node-sass": "^3.10.0", "replace-between": "0.0.8", - "sass-loader": "^4.0.2", - "webpack": "1.14.x" - }, - "dependencies": { - "babel-preset-es2015": "^6.14.0", - "babelify": "^7.3.0", - "sassify": "^4.0.0", - "stringify": "^5.1.0" + "rollup": "^0.54.1", + "rollup-plugin-babel": "^3.0.3", + "rollup-plugin-cleanup": "^2.0.0", + "rollup-plugin-node-resolve": "^3.0.2", + "rollup-plugin-sass": "^0.5.3", + "rollup-plugin-uglify": "^2.0.1", + "serve": "^6.4.8" }, "eslintConfig": { "extends": "airbnb-base", diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..445c07a --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,47 @@ +/** + * dat-gui JavaScript Controller Library + * http://code.google.com/p/dat-gui + * + * Copyright 2011 Data Arts Team, Google Creative Lab + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + */ + +import fs from 'fs'; +import path from 'path'; +import resolve from 'rollup-plugin-node-resolve'; +import cleanup from 'rollup-plugin-cleanup'; +import babel from 'rollup-plugin-babel'; +import sass from 'rollup-plugin-sass'; + +const banner = fs.readFileSync(path.join(__dirname, 'licenseBanner.txt')); + +export default { + input: 'src/dat/index.js', + output: [{ + file: './build/dat.gui.js', + format: 'umd', + name: 'dat', + banner: banner + }, { + file: './build/dat.gui.module.js', + format: 'es', + banner: banner + }], + watch: { + include: 'src/**' + }, + plugins: [ + resolve(), + sass({options: {outputStyle: 'compressed'}}), + babel({ + plugins: ['external-helpers'], + exclude: 'node_modules/**' + }), + cleanup() + ] +}; diff --git a/rollup.config.min.js b/rollup.config.min.js new file mode 100644 index 0000000..2ac71fe --- /dev/null +++ b/rollup.config.min.js @@ -0,0 +1,36 @@ +/** + * dat-gui JavaScript Controller Library + * http://code.google.com/p/dat-gui + * + * Copyright 2011 Data Arts Team, Google Creative Lab + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + */ + +import fs from 'fs'; +import path from 'path'; +import defaultConfig from './rollup.config'; +import uglify from 'rollup-plugin-uglify'; + +const banner = fs.readFileSync(path.join(__dirname, 'licenseBanner.txt')); + +export default Object.assign({}, defaultConfig, { + output: { + file: './build/dat.gui.min.js', + format: 'umd', + name: 'dat', + banner: banner + }, + plugins: [...defaultConfig.plugins, uglify({ + output: { + // Preserve license commenting in minified build. + comments: function(node, comment) { + return comment.type === 'comment2'; + } + } + })] +}); diff --git a/src/dat/gui/saveDialogue.html b/src/dat/gui/saveDialogue.html.js similarity index 84% rename from src/dat/gui/saveDialogue.html rename to src/dat/gui/saveDialogue.html.js index a9dd79a..6a9c3d5 100644 --- a/src/dat/gui/saveDialogue.html +++ b/src/dat/gui/saveDialogue.html.js @@ -1,4 +1,4 @@ -
+const saveDialogContents = `
Here's the new load parameter for your GUI's constructor: @@ -18,4 +18,6 @@
-
\ No newline at end of file +`; + +export default saveDialogContents; diff --git a/src/dat/utils/css.js b/src/dat/utils/css.js index 9a9bc37..fadc82d 100644 --- a/src/dat/utils/css.js +++ b/src/dat/utils/css.js @@ -11,7 +11,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -module.exports = { +const css = { load: function(url, indoc) { const doc = indoc || document; const link = doc.createElement('link'); @@ -21,11 +21,11 @@ module.exports = { doc.getElementsByTagName('head')[0].appendChild(link); }, - inject: function(css, indoc) { + inject: function(cssContent, indoc) { const doc = indoc || document; const injected = document.createElement('style'); injected.type = 'text/css'; - injected.innerHTML = css; + injected.innerHTML = cssContent; const head = doc.getElementsByTagName('head')[0]; try { head.appendChild(injected); @@ -33,3 +33,5 @@ module.exports = { } } }; + +export default css; diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js deleted file mode 100644 index 51cef40..0000000 --- a/webpack/webpack.config.js +++ /dev/null @@ -1,73 +0,0 @@ -/** - * dat-gui JavaScript Controller Library - * http://code.google.com/p/dat-gui - * - * Copyright 2011 Data Arts Team, Google Creative Lab - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - */ - -var path = require("path"); - -module.exports = { - target: 'web', - - context: path.resolve(__dirname, '..', 'src'), - - entry: { - main: '../index', - - }, - - module: { - preLoaders: [ - { - test: /\.js$/, - exclude: /(node_modules|bower_components)/, - loader: 'eslint-loader' - }, - ], - loaders: [ - { - test: /\.js$/, - loader: 'babel', - exclude: /(node_modules|bower_components)/, - query: { - presets: [["es2015", {"loose": true}], "stage-0"], - plugins: ["add-module-exports"] - } - }, - { - test: /\.css$/, - loader: 'style-loader!css-loader' - }, - { - test: /\.png$/, - loader: 'url-loader?limit=100000' - }, - { - test: /\.jpg$/, - loader: 'file-loader' - }, - { - test: /\.scss$/, - loader: 'css-loader!sass-loader' - }, - { - test: /\.html$/, - loader: 'html-loader' - } - ] - }, - - output: { - path: path.join(__dirname, '..', 'build'), - filename: 'dat.gui.js', - library: ['dat'], - libraryTarget: 'umd' - } -}; \ No newline at end of file diff --git a/webpack/webpack.config.min.js b/webpack/webpack.config.min.js deleted file mode 100644 index 9b1c871..0000000 --- a/webpack/webpack.config.min.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * dat-gui JavaScript Controller Library - * http://code.google.com/p/dat-gui - * - * Copyright 2011 Data Arts Team, Google Creative Lab - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - */ - -var extend = require('extend'), - webpack = require('webpack'), - webpackConfig = require('./webpack.config'); - -var config = { - plugins: [ - new webpack.optimize.UglifyJsPlugin({ - minimize: true, - comments: false - }) - ], - - output: { - filename: 'dat.gui.min.js' - } -} - -module.exports = extend(true, webpackConfig, config); \ No newline at end of file