From 67cf6bd308cdd6030e81a7ca288fcd0bdaf3c9fa Mon Sep 17 00:00:00 2001 From: Paul T Date: Sat, 30 Jun 2018 12:06:16 -0400 Subject: [PATCH] Added auto WC polyfill loader to output bundle --- package-lock.json | 11 +++- package.json | 3 +- webpack.config.js | 137 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 149 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 55af978..e3e14aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "boxicons", - "version": "1.0.6", + "version": "1.1.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -8529,6 +8529,15 @@ "strip-ansi": "3.0.1" } }, + "wrapper-webpack-plugin": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wrapper-webpack-plugin/-/wrapper-webpack-plugin-1.0.0.tgz", + "integrity": "sha1-VcEWR/jKmQ/28EtB2PpK8JbDG7s=", + "dev": true, + "requires": { + "webpack-sources": "1.1.0" + } + }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index f936065..ee0d4ec 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "svgo": "^1.0.5", "to-string-loader": "^1.1.5", "webpack": "^3.6.0", - "webpack-dev-server": "^2.8.2" + "webpack-dev-server": "^2.8.2", + "wrapper-webpack-plugin": "^1.0.0" } } diff --git a/webpack.config.js b/webpack.config.js index 5ff1fb4..1646c40 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,5 @@ const webpack = require('webpack'); +const WrapperPlugin = require('wrapper-webpack-plugin'); const packageJson = require('./package.json'); module.exports = { @@ -46,5 +47,141 @@ module.exports = { VERSION: JSON.stringify(packageJson.version), }, }), + new WrapperPlugin({ + test: /box-icon-element\.js$/, + header: getWrapper('header'), + footer: getWrapper('footer'), + }), ], }; + +function getWrapper(type) { + if (getWrapper.header) { + return getWrapper[type]; + } + + const templatePieces = `(function ( + DEFAULT_CDN_PREFIX, + STRING_WEB_COMPONENTS_REQUESTED, + WINDOW, + DOCUMENT, + init +) { + /** + * A Custom Elements (Web Components) polyfill loader wrapper. + * Use it to wrap modules that use CEs and it will take care of + * only executing the module initialization function when the + * polyfill is loaded. + * This loader wrapper also loads the \`core-js\` library if it + * finds that he current environment does not support Promises + * (ex. IE) + * + * The loader contains default URLs for polyfills, however, these + * can be overwritten with the following globals: + * + * - \`window.WEB_COMPONENTS_POLYFILL\` + * - \`window.ES6_CORE_POLYFILL\` + * + * In addition, this loader will add the following global + * variable, which is used to store module initialization + * functions until the environment is patched: + * + * - \`window.AWAITING_WEB_COMPONENTS_POLYFILL\`: an Array + * with callbacks. To store a new one, use + * \`window.AWAITING_WEB_COMPONENTS_POLYFILL.then(callbackHere)\` + */ + if (!('customElements' in WINDOW)) { + + // If in the mist of loading the polyfills, then just add init to when that is done + if (WINDOW[STRING_WEB_COMPONENTS_REQUESTED]) { + WINDOW[STRING_WEB_COMPONENTS_REQUESTED].then(init); + return; + } + + var _WEB_COMPONENTS_REQUESTED = WINDOW[STRING_WEB_COMPONENTS_REQUESTED] = getCallbackQueue(); + _WEB_COMPONENTS_REQUESTED.then(init); + + var WEB_COMPONENTS_POLYFILL = WINDOW.WEB_COMPONENTS_POLYFILL || "/" + "/" + DEFAULT_CDN_PREFIX + "/webcomponentsjs/2.0.2/webcomponents-bundle.js"; + var ES6_CORE_POLYFILL = WINDOW.ES6_CORE_POLYFILL || "/" + "/" + DEFAULT_CDN_PREFIX + "/core-js/2.5.3/core.min.js"; + + if (!("Promise" in WINDOW)) { + loadScript(ES6_CORE_POLYFILL) + .then(function () { + loadScript(WEB_COMPONENTS_POLYFILL).then(function () { + _WEB_COMPONENTS_REQUESTED.isDone = true; + _WEB_COMPONENTS_REQUESTED.exec(); + }); + }); + } else { + loadScript(WEB_COMPONENTS_POLYFILL).then(function () { + _WEB_COMPONENTS_REQUESTED.isDone = true; + _WEB_COMPONENTS_REQUESTED.exec(); + }); + } + } else { + init(); + } + + function getCallbackQueue() { + var callbacks = []; + callbacks.isDone = false; + callbacks.exec = function () { + callbacks.splice(0).forEach(function (callback) { + callback(); + }); + }; + callbacks.then = function(callback){ + if (callbacks.isDone) { + callback(); + } else { + callbacks.push(callback); + } + return callbacks; + } + return callbacks; + } + + function loadScript (url) { + var callbacks = getCallbackQueue(); + var script = DOCUMENT.createElement("script") + + script.type = "text/javascript"; + + if (script.readyState){ // IE + script.onreadystatechange = function(){ + if (script.readyState == "loaded" || script.readyState == "complete"){ + script.onreadystatechange = null; + callbacks.isDone = true; + callbacks.exec(); + } + }; + } else { + script.onload = function(){ + callbacks.isDone = true; + callbacks.exec(); + }; + } + + script.src = url; + DOCUMENT.getElementsByTagName("head")[0].appendChild(script); + + script.then = callbacks.then; + return script; + } + +})( + "cdnjs.cloudflare.com/ajax/libs", + "AWAITING_WEB_COMPONENTS_POLYFILL", // Global wait queue var name + window, + document, + function () { +____SPLIT_HERE____ + } +);`.split('____SPLIT_HERE____'); + + getWrapper.header = templatePieces[0]; + getWrapper.footer = templatePieces[1]; + + return getWrapper[type]; +} +