diff --git a/package-lock.json b/package-lock.json index db505f8..20f69b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { "name": "padl", - "version": "2.0.0", + "version": "2.0.1-alpha.9", "lockfileVersion": 2, "requires": true, "packages": { "": { - "version": "2.0.0", + "version": "2.0.1-alpha.9", "license": "MIT", "dependencies": { "@babel/cli": "^7.12.1", diff --git a/package.json b/package.json index dc8434e..03c8e6c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "padl", - "version": "2.0.0", + "version": "2.0.1-alpha.9", "description": "Develop pattern libraries with lit-element", "homepage": "https://github.com/britishgas-engineering/padl", "bug": { diff --git a/src/commands/build.js b/src/commands/build.js index e095853..14378a3 100644 --- a/src/commands/build.js +++ b/src/commands/build.js @@ -22,7 +22,7 @@ import { watchStyles } from '../util/build'; -const autoprefixPlugin = new Autoprefix({grid: true, overrideBrowserslist: ['last 2 versions']}); +const autoprefixPlugin = new Autoprefix({ grid: true, overrideBrowserslist: ['>0.25%, not dead, not IE 11'] }); const cleanCSSPlugin = new CleanCSS({advanced: true, level: 2}); const cliPath = path.join(path.dirname(__filename), '..'); @@ -35,6 +35,7 @@ export default async (config) => { const polyfillPath = `${dir}/polyfill.js`; const componentsPath = `${dir}/components.js`; + const componentsDir = `${dir}/components`; const mergedComponentsPath = `${dir}/components.min.js`; const modernComponentsPath = `${dir}/components.modern.min.js`; const onlyComponentsPath = `${dir}/only.components.min.js`; @@ -80,6 +81,18 @@ export default async (config) => { resolve() ]; + const compPlugins = [ + multiEntry({ entryFileName: 'index.js' }), + resolve(), + stylesPlugin({ + mode: 'extract', + less: { + plugins: [autoprefixPlugin, cleanCSSPlugin], + output: false + } + }), + ]; + if (!options.from) { minPlugins.push(filesize()); } @@ -119,6 +132,10 @@ export default async (config) => { return; } + if (options.components) { + await rollup('src/index.js', componentsDir, { ...options, separate: true }, compPlugins); + } + await copyFiles(config, dir); const styles = await createStyles(config, [autoprefixPlugin, cleanCSSPlugin]); diff --git a/src/index.js b/src/index.js index 12ae39c..ba128e6 100644 --- a/src/index.js +++ b/src/index.js @@ -16,6 +16,7 @@ program .command('build') .description('Build padl web component files') .option('--storybook', 'Creates static storybook with build') + .option('--components', 'Builds components individually') .action((options) => { const config = { ...getConfigArgs(), diff --git a/src/util/build.js b/src/util/build.js index 36741a3..c1ba4c6 100644 --- a/src/util/build.js +++ b/src/util/build.js @@ -68,17 +68,11 @@ const createModule = (config, styles, dir) => { fs.copySync(templateIndexPath, location); - const es5Path = getRightPathLocation(path.join(webcomponent, 'custom-elements-es5-adapter.js')); - const loaderPath = getRightPathLocation(path.join(webcomponent, 'webcomponents-loader.js')); const bundles = getRightPathLocation(path.join(webcomponent, 'bundles')); - const incPolyPath = path.join(path.dirname(__filename), '..', 'lib', 'includes.js'); fs.copySync(bundles, `${dir}/bundles`); const fileData = fs.readFileSync(location, 'utf8'); - const incPoly = fs.readFileSync(incPolyPath, 'utf8'); - const es5 = `${fs.readFileSync(es5Path, 'utf8')}${incPoly}`; - const loader = fs.readFileSync(loaderPath, 'utf8'); const component = fs.readFileSync(path.join(libraryPath, dir, 'only.components.min.js'), 'utf8'); let cssContent = ''; @@ -96,8 +90,6 @@ const createModule = (config, styles, dir) => { const result = fileData .replace(/_INSERT_COMPONENT_JS_/g, component) - .replace(/_INSERT_ES5_ADAPTER_/g, es5) - .replace(/_INSERT_WEBCOMPONENT_LOADER_/g, loader) .replace(/_INSERT_NAME_/g, `${name}.?m?i?n?.js`) .replace(/_INLINE_STYLES_/g, cssContent); diff --git a/src/util/index.js b/src/util/index.js index be1b4fb..5575e5e 100644 --- a/src/util/index.js +++ b/src/util/index.js @@ -32,14 +32,13 @@ const babelConfig = { compact: false, presets: [ ['@babel/preset-env', { - targets: ">0.25%", + targets: ">0.25%, not dead, not IE 11", loose: true, corejs: 3, useBuiltIns: 'entry' }] ], plugins: [ - "@babel/plugin-transform-spread", ["@babel/plugin-transform-runtime", { "regenerator": true, "useESModules": true diff --git a/src/util/rollup.js b/src/util/rollup.js index c5d697c..68db29f 100644 --- a/src/util/rollup.js +++ b/src/util/rollup.js @@ -16,17 +16,20 @@ export default async (inputPaths, outputPath, options = {}, plugins = []) => { const inputOptions = { // external: [/@babel\/runtime/], - treeshake: true, + treeshake: !options.separate, input: inputPaths, plugins, cache: cache[outputPath], ...warning }; + const outputLocation = options.separate ? 'dir' : 'file'; + const outputOptions = { - file: outputPath, + [outputLocation]: outputPath, format: options.format || 'es', banner: `/* @version: ${packageVersion} */`, + preserveModules: options.separate }; if (!options.noWatch && diff --git a/templates/module/index.js b/templates/module/index.js index 319e03e..d175e87 100644 --- a/templates/module/index.js +++ b/templates/module/index.js @@ -1,113 +1,17 @@ -_INSERT_ES5_ADAPTER_ - (function () { var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},asyncToGenerator=function(e){return function(){var c=e.apply(this,arguments);return new Promise(function(u,i){return function t(e,n){try{var o=c[e](n),r=o.value}catch(e){return void i(e)}if(!o.done)return Promise.resolve(r).then(function(e){t("next",e)},function(e){t("throw",e)});u(r)}("next")})}},classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function o(e,t){for(var n=0;n 0 ? 1 : -1) * Math.floor(Math.abs(number)); - }; - var maxSafeInteger = Math.pow(2, 53) - 1; - var toLength = function (value) { - var len = toInteger(value); - return Math.min(Math.max(len, 0), maxSafeInteger); - }; - - // The length property of the from method is 1. - return function from(arrayLike/*, mapFn, thisArg */) { - // 1. Let C be the this value. - var C = this; - - // 2. Let items be ToObject(arrayLike). - var items = Object(arrayLike); - - // 3. ReturnIfAbrupt(items). - if (arrayLike == null) { - throw new TypeError('Array.from requires an array-like object - not null or undefined'); - } - - // 4. If mapfn is undefined, then let mapping be false. - var mapFn = arguments.length > 1 ? arguments[1] : void undefined; - var T; - if (typeof mapFn !== 'undefined') { - // 5. else - // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. - if (!isCallable(mapFn)) { - throw new TypeError('Array.from: when provided, the second argument must be a function'); - } - - // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. - if (arguments.length > 2) { - T = arguments[2]; - } - } - - // 10. Let lenValue be Get(items, "length"). - // 11. Let len be ToLength(lenValue). - var len = toLength(items.length); - - // 13. If IsConstructor(C) is true, then - // 13. a. Let A be the result of calling the [[Construct]] internal method - // of C with an argument list containing the single item len. - // 14. a. Else, Let A be ArrayCreate(len). - var A = isCallable(C) ? Object(new C(len)) : new Array(len); - - // 16. Let k be 0. - var k = 0; - // 17. Repeat, while k < len… (also steps a - h) - var kValue; - while (k < len) { - kValue = items[k]; - if (mapFn) { - A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); - } else { - A[k] = kValue; - } - k += 1; - } - // 18. Let putStatus be Put(A, "length", len, true). - A.length = len; - // 20. Return A. - return A; - }; - }()); - } - - function getRoot() { - var scripts = document.getElementsByTagName('script'); - var list = [].slice.call(scripts).reduce(function (acc, script) { - var src = script.src; - - if (src && src.match(new RegExp('_INSERT_NAME_'))) { - var host = src.replace(new RegExp('_INSERT_NAME_'), ''); - acc.push(host); - } - - return acc; - }, []); - return list && list[0] || '/'; - }; - - var root = getRoot(); - - window.WebComponents = window.WebComponents || {}; - window.WebComponents.root = root; - - _INSERT_WEBCOMPONENT_LOADER_ - //_INLINE_STYLES_ - window.addEventListener('WebComponentsReady', function() { + function loadComponents() { _INSERT_COMPONENT_JS_ - }); + } + if (document.readyState == 'loading') { + // still loading, wait for the event + document.addEventListener('DOMContentLoaded', loadComponents); + } else { + // DOM is ready! + loadComponents(); + } }());