From 5acb4bca3de315e90f517a0e851fd2e28ac8da46 Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Thu, 9 Nov 2017 13:14:35 -0800 Subject: [PATCH 1/4] ENYO-4901: prerendered page is displayed very short time even if it should be skipped. When deep link conditions are specified, conditionally render (rather than inline deleting html prerender nodes). --- plugins/PrerenderPlugin/index.js | 3 ++- plugins/PrerenderPlugin/templates.js | 16 +++++++--------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/plugins/PrerenderPlugin/index.js b/plugins/PrerenderPlugin/index.js index d4b4c91..73f9998 100644 --- a/plugins/PrerenderPlugin/index.js +++ b/plugins/PrerenderPlugin/index.js @@ -189,7 +189,8 @@ PrerenderPlugin.prototype.apply = function(compiler) { } const appHtml = parsePrerender(status.prerender[i]); - const updater = templates.update(mapping, opts.deep); + const updater = templates.update(mapping, opts.deep, appHtml.prerender); + if(opts.deep) appHtml.prerender = ''; if(updater) { body.push({ tagName: 'script', diff --git a/plugins/PrerenderPlugin/templates.js b/plugins/PrerenderPlugin/templates.js index b82184a..35dc1bf 100644 --- a/plugins/PrerenderPlugin/templates.js +++ b/plugins/PrerenderPlugin/templates.js @@ -54,15 +54,13 @@ const startup = (screenTypes, jsAssets) => ` }, 0); }; `; -const deepLink = (conditions, fallback) => conditions ? ` +const deepLink = (conditions, prerender, wrapped) => conditions ? ` // Handle any deep link conditions. - if(${(Array.isArray(conditions) ? conditions.join(' && ') : conditions)}) { - var div = document.getElementById("root"); - while(div && div.firstChild) { div.removeChild(div.firstChild); } - ${fallback ? `} else { - ${fallback.replace(/\n/g, '\n\t')} - }` : '}'} -` : (fallback || null); + if(!(${(Array.isArray(conditions) ? conditions.join(' && ') : conditions)})) { + document.getElementById("root").innerHTML = ${JSON.stringify(prerender)}; + ${wrapped ? wrapped.replace(/\n/g, '\n\t') : ''} + } +` : (wrapped || null); const multiLocale = (mapping) => mapping && ` // Apply locale-specific root classes and checksum. @@ -81,5 +79,5 @@ module.exports = { startup: (screenTypes, jsAssets) => fn(startup(screenTypes, jsAssets)), // Update inline script, which updates the template/prerender content prior to app render. // Used for locale and deeplinking customizations. - update: (mapping, deep) => fn(deepLink(deep, multiLocale(mapping))) + update: (mapping, deep, prerender) => fn(deepLink(deep, prerender, multiLocale(mapping))) }; From fad50c641ff74ee972f68c5e2c3537a03dfe515c Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Thu, 9 Nov 2017 15:06:26 -0800 Subject: [PATCH 2/4] ENYO-4906: Update prerender inline base font script --- plugins/PrerenderPlugin/templates.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/plugins/PrerenderPlugin/templates.js b/plugins/PrerenderPlugin/templates.js index b82184a..719f2c3 100644 --- a/plugins/PrerenderPlugin/templates.js +++ b/plugins/PrerenderPlugin/templates.js @@ -15,10 +15,11 @@ const startup = (screenTypes, jsAssets) => ` width = window.innerWidth; var scrObj = screenTypes[screenTypes.length - 1]; if(height > width) { - width = height; + height = window.innerWidth; + width = window.innerHeight; } for(var i=screenTypes.length-1; i>=0; i--) { - if(width <= screenTypes[i].width) { + if(height <= screenTypes[i].height && width <= screenTypes[i].width) { scrObj = screenTypes[i]; } } From e09d8b567e8a9f9254310b876fe0e0e41536cded Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Tue, 9 Jan 2018 15:36:57 -0800 Subject: [PATCH 3/4] Added EnzymeAdapterplugin to automate the initialization of Enzyme adapter into Enzyme whenever Enzyme is imported/required. --- plugins/EnzymeAdapterPlugin/README.md | 2 ++ plugins/EnzymeAdapterPlugin/enzyme-proxy.js | 15 ++++++++++ plugins/EnzymeAdapterPlugin/index.js | 32 +++++++++++++++++++++ plugins/index.js | 1 + 4 files changed, 50 insertions(+) create mode 100644 plugins/EnzymeAdapterPlugin/README.md create mode 100644 plugins/EnzymeAdapterPlugin/enzyme-proxy.js create mode 100644 plugins/EnzymeAdapterPlugin/index.js diff --git a/plugins/EnzymeAdapterPlugin/README.md b/plugins/EnzymeAdapterPlugin/README.md new file mode 100644 index 0000000..ea0a449 --- /dev/null +++ b/plugins/EnzymeAdapterPlugin/README.md @@ -0,0 +1,2 @@ +# EnzymeAdapterPlugin + diff --git a/plugins/EnzymeAdapterPlugin/enzyme-proxy.js b/plugins/EnzymeAdapterPlugin/enzyme-proxy.js new file mode 100644 index 0000000..3899871 --- /dev/null +++ b/plugins/EnzymeAdapterPlugin/enzyme-proxy.js @@ -0,0 +1,15 @@ +/* global ENZYME_MODULE_REQUEST, ENZYME_ADAPTER_REQUEST */ +/* eslint no-var: off */ +/* + * enzyme-proxy.js + * + * A proxy module to automatically initialize the Enzyme Adapter whenever Enzyme is + * required/imported. + */ + +var enzyme = require(ENZYME_MODULE_REQUEST); +var Adapter = require(ENZYME_ADAPTER_REQUEST); + +enzyme.configure({adapter: new Adapter()}); + +module.exports = enzyme; diff --git a/plugins/EnzymeAdapterPlugin/index.js b/plugins/EnzymeAdapterPlugin/index.js new file mode 100644 index 0000000..2980458 --- /dev/null +++ b/plugins/EnzymeAdapterPlugin/index.js @@ -0,0 +1,32 @@ +const {DefinePlugin} = require('webpack'); + +function EnzymeAdapterPlugin(options) { + this.options = options || {}; + this.options.enzyme = this.options.enzyme || 'enzyme'; + this.options.adapter = this.options.adapter || 'enzyme-adapter-react-16'; +} + +EnzymeAdapterPlugin.prototype.apply = function(compiler) { + const opts = this.options; + const proxyJS = require.resolve('./enzyme-proxy'); + + // Inject enzyme and adapter module filepath constants + compiler.apply(new DefinePlugin({ + ENZYME_MODULE_REQUEST: JSON.stringify(opts.enzyme), + ENZYME_ADAPTER_REQUEST: JSON.stringify(opts.adapter) + })); + + // Redirect external 'enzyme' import/require statements to the enzyme proxy + compiler.plugin('normal-module-factory', (factory) => { + factory.plugin('before-resolve', (result, callback) => { + if(!result) return callback(); + if(result.request === 'enzyme' && result.contextInfo.issuer !== proxyJS + && !result.contextInfo.issuer.includes('enzyme')) { + result.request = proxyJS; + } + return callback(null, result); + }); + }); +}; + +module.exports = EnzymeAdapterPlugin; diff --git a/plugins/index.js b/plugins/index.js index b8205da..a3077c3 100644 --- a/plugins/index.js +++ b/plugins/index.js @@ -1,6 +1,7 @@ module.exports = { EnactFrameworkPlugin: require('./dll/EnactFrameworkPlugin'), EnactFrameworkRefPlugin: require('./dll/EnactFrameworkRefPlugin'), + EnzymeAdapterPlugin: require('./EnzymeAdapterPlugin'), GracefulFsPlugin: require('./GracefulFsPlugin'), ILibPlugin: require('./ILibPlugin'), PrerenderPlugin: require('./PrerenderPlugin'), From 7ce7a23e9e13f8ef87af9d933db2b65ee2603f83 Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Tue, 9 Jan 2018 15:42:03 -0800 Subject: [PATCH 4/4] 0.5.0 release --- CHANGELOG.md | 8 +++++++- package.json | 6 +++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 05cf5ee..3cdc122 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 0.5.0 + +* Added a new plugin for webpack, EnzymeAdapterPlugin, which automates the Enzyme initialization of an adapter. Whenever an app imports/requires Enzyme, a small proxy will intervene and ensure the desired Enzyme adapter is configured and used. This allows easier Enzyme usage within karma-webpack, for example. +* PrerenderPlugin inline script to initialize root `fontSize` now considers window height in addition to window width. +* Deep linking support in a prerendered page will now default to empty content, inserting prerendered app HTML as needed. + ## 0.4.0 (Nov. 6, 2017) * Unify PrerenderPlugin and LocaleHtmlPlugin into a single general-purpose plugin @@ -31,7 +37,7 @@ * Added an `option-parser` module to parse and store the Enact build options from the `package.json` and to handle intertwined values and fallbacks to do with `fontGenerator`, `screenTypes`, `ri`, `theme`, `target`, etc. * Added support for a CommonJS font generator to generate localized font CSS (deprecating the previous global prerender hook). * Added support for dynamic replacement of main entrypoint to `config-helper`. -* Updated `package-toot` to now throw an error when no root is found. +* Updated `package-root` to now throw an error when no root is found. * Updated dependencies. ## 0.1.0 (Sept. 28, 2017) diff --git a/package.json b/package.json index 4332680..4ccceb8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@enact/dev-utils", - "version": "0.4.0", + "version": "0.5.0", "description": "A collection of development utilities for Enact apps.", "main": "index.js", "author": "Jason Robitaille ", @@ -25,8 +25,8 @@ "webpack-sources": "^1.0.0" }, "devDependencies": { - "eslint": "~4.10.0", - "webpack": "~3.8.1" + "eslint": "~4.15.0", + "webpack": "~3.10.0" }, "peerDependencies": { "webpack": "^2 || ^2.1.0-beta || ^2.2.0-rc || ^3"