Merge pull request #31 from itslearning/rollup

Initial support for Rollup.

CHANGELOG.md

@@ -0,0 +1,24 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [v9.0.0] - 02.04.2019
+
+### Added
+
+- This changelog!
+- Initial support for using Rollup to build packages. Use `rbuild` and `rdev`.
+
+### Changed
+
+- Updated old Babel packages
+
+### Deprecated
+
+- Webpack support. Will be removed in next version.

itsl.rollup.js

@@ -0,0 +1,99 @@
+const fs = require('fs');
+const path = require('path');
+
+const  babel = require('rollup-plugin-babel');
+const  { eslint } = require('rollup-plugin-eslint');
+const resolve = require('rollup-plugin-node-resolve');
+const  scss = require('rollup-plugin-scss');
+const  svelte = require('rollup-plugin-svelte');
+const  { uglify } = require('rollup-plugin-uglify');
+
+/**
+ * Returns a Rollup Configuration Object for Svelte files
+ * @param {string} src The source file
+ * @param {string} dest The destination file
+ * @returns {object} A Rollup Configuration Object
+ */
+const Svelte = (src, dest) => ({
+    input: src,
+    output: {
+        file: dest,
+        format: 'iife'
+    },
+    treeshake: true,
+    plugins: [
+        resolve({
+            extensions: ['.svelte', '.js']
+        }),
+        eslint(),
+        svelte(),
+        babel({
+            babelrc: false,
+            presets: [['@babel/env', { modules: false }]],
+            extensions: ['.js', '.svelte']
+        }),
+        uglify()
+    ],
+});
+
+/**
+ * Returns a Rollup Configuration Object for Scss files
+ * @param {string} src The source file
+ * @param {string} dest The destination file
+ * @returns {object} A Rollup Configuration Object
+ */
+const Sass = (src, dest) => ({
+    input: src,
+    // Required for Rollup, just ignore
+    output: {
+        file: dest,
+        format: 'esm'
+    },
+    // Script will ALWAYS render an empty file at first
+    onwarn: (warning) => warning.code === 'EMPTY_BUNDLE' ? false : warning,
+    plugins: [
+        scss({
+            importer(path) {
+                return { file: path.replace(/^~/, 'node_modules/') };
+            },
+            output: `${dest}.temp`,
+            outputStyle: 'compact'
+        }),
+        {
+            name: 'Itslearning Rollup Sass Plugin',
+            /**
+             * Renames the .temp file to .css overwriting the default javascript output
+             */
+            writeBundle: () => fs.renameSync(`${dest}.temp`, dest)
+        }
+    ]
+});
+
+/**
+ * Create an array of Rollup Configuration Objects
+ * @param {object} config The required configuration
+ * @param {string} config.destination The path where the generated file should be saved.
+ * @param {Array<string>} config.files The files to be processed.
+ * @returns {object} A Rollup Configuration Object
+ */
+const ItslRollup = ({ destination, files }) =>
+    files.map(file => {
+        const inFile = Array.isArray(file) ? file[0] : file;
+        const outFile = Array.isArray(file) ? file[1] || inFile : file;
+
+        const { ext } = path.parse(inFile);
+        const { name } = path.parse(outFile || inFile);
+
+        if (ext !== '.js' && ext !== '.scss') {
+            throw(`Unknown format ${ext}`);
+        }
+        return ext === '.js'
+            ? Svelte(inFile, `${destination}${name}.js`)
+            : ext === '.scss'
+            ? Sass(inFile, `${destination}${name}.css`)
+            : false;
+    });
+
+module.exports = {
+    ItslRollup
+};

package.json

@@ -1,10 +1,12 @@
 {
     "name": "@itslearning/protomorph",
     "description": "Shared build config for frontend applications",
-    "version": "8.9.1",
+    "version": "9.0.0",
     "author": "Gavin King <[email protected]>",
     "license": "MIT",
     "scripts": {
+        "rdev": "rollup -c -w",
+        "rbuild": "rollup -c",
         "build": "webpack-cli",
         "dev": "webpack-cli --watch",
         "test": "yarn build && karma start"
@@ -14,57 +16,65 @@
         "not dead"
     ],
     "dependencies": {
-        "@babel/core": "7.0.0-beta.46",
-        "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.46",
-        "@babel/preset-env": "7.0.0-beta.46",
+        "@babel/core": "^7.2.2",
+        "@babel/plugin-proposal-object-rest-spread": "7.4.0",
+        "@babel/preset-env": "^7.3.1",
         "@types/chai": "4.1.3",
         "@types/mocha": "5.2.0",
         "autoprefixer": "8.6.2",
         "axe-core": "3.0.2",
-        "babel-loader": "8.0.0-beta.0",
+        "babel-loader": "8.0.5",
         "babel-polyfill": "6.26.0",
         "chai": "4.1.2",
         "clean-webpack-plugin": "0.1.19",
         "copy-webpack-plugin": "4.5.1",
         "css-loader": "0.28.11",
         "del": "3.0.0",
         "dirty-chai": "2.0.1",
-        "eslint": "4.19.1",
-        "eslint-config-standard": "11.0.0",
+        "eslint-config-standard": "^12.0.0",
         "eslint-loader": "2.0.0",
-        "eslint-plugin-html": "4.0.3",
-        "eslint-plugin-import": "2.11.0",
-        "eslint-plugin-json": "1.2.0",
-        "eslint-plugin-node": "6.0.1",
-        "eslint-plugin-promise": "3.7.0",
-        "eslint-plugin-standard": "3.1.0",
-        "karma": "2.0.2",
-        "karma-chai": "0.1.0",
+        "eslint-plugin-html": "^5.0.0",
+        "eslint-plugin-import": "^2.15.0",
+        "eslint-plugin-json": "^1.3.2",
+        "eslint-plugin-node": "^8.0.1",
+        "eslint-plugin-promise": "^4.0.1",
+        "eslint-plugin-standard": "^4.0.0",
+        "eslint": "4.19.1",
         "karma-chai-dom": "1.1.0",
+        "karma-chai": "0.1.0",
         "karma-chrome-launcher": "2.2.0",
         "karma-dirty-chai": "2.0.0",
         "karma-edge-launcher": "0.4.2",
         "karma-firefox-launcher": "1.1.0",
         "karma-ie-launcher": "1.0.0",
-        "karma-mocha": "1.3.0",
         "karma-mocha-reporter": "2.2.5",
+        "karma-mocha": "1.3.0",
+        "karma": "2.0.2",
         "mini-css-extract-plugin": "0.4.0",
         "mocha": "5.1.1",
-        "node-sass": "4.11.0",
         "node-sass-magic-importer": "5.2.0",
+        "node-sass-tilde-importer": "^1.0.2",
+        "node-sass": "4.11.0",
         "on-build-webpack": "0.1.0",
         "optimize-css-assets-webpack-plugin": "4.0.1",
         "postcss-loader": "2.1.5",
+        "rollup-plugin-babel": "^4.3.2",
+        "rollup-plugin-eslint": "^5.0.0",
+        "rollup-plugin-node-resolve": "4.0.0",
+        "rollup-plugin-scss": "1.0.0",
+        "rollup-plugin-svelte": "^5.0.1",
+        "rollup-plugin-uglify": "^6.0.1",
+        "rollup": "^1.1.2",
         "sass-lint": "1.12.1",
         "sass-loader": "7.0.1",
         "sasslint-webpack-plugin": "1.0.4",
-        "svelte": "2.15.3",
         "svelte-loader": "2.11.0",
+        "svelte": "^2.16.0",
         "ts-loader": "4.2.0",
         "typescript": "2.8.3",
-        "webpack": "4.27.1",
         "webpack-clean": "1.2.3",
-        "webpack-cli": "3.1.2"
+        "webpack-cli": "3.1.2",
+        "webpack": "4.27.1"
     },
     "resolutions": {
         "node-sass": "4.11.0"

rollup.config.js

@@ -0,0 +1,10 @@
+import ItslRollup from '@itslearning/protomorph/itsl.rollup';
+
+export default ItslRollup({
+    destination: './build/',
+    files: [
+        ['./src/index.js', 'index.bundle.js'],
+        ['./src/theme.aaa.scss', 'aaa.bundle.css'],
+        ['./src/theme.modern.scss', 'modern.bundle.css']
+    ]
+});