From 3272c32f8719ae87970acced5489a0063b5e0e34 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Wed, 3 Jun 2020 16:24:23 -0700 Subject: [PATCH] Move compatibility to own entrypoint again --- build-scripts/bundle.js | 13 +++++----- build-scripts/gulp/entry-html.js | 6 +++++ build-scripts/rollup-plugins/ignore-plugin.js | 26 +++++++++++++++++++ demo/src/ha-demo.ts | 1 - demo/src/html/index.html.template | 5 +++- src/entrypoints/authorize.ts | 2 -- .../compatibility.ts | 0 src/entrypoints/core.ts | 2 -- src/entrypoints/custom-panel.ts | 10 ++++--- src/entrypoints/onboarding.ts | 2 -- src/html/authorize.html.template | 5 +++- src/html/index.html.template | 7 ++--- src/html/onboarding.html.template | 5 +++- 13 files changed, 60 insertions(+), 24 deletions(-) rename src/{resources => entrypoints}/compatibility.ts (100%) diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js index 4d1ec71682..6123a7a095 100644 --- a/build-scripts/bundle.js +++ b/build-scripts/bundle.js @@ -20,13 +20,7 @@ module.exports.emptyPackages = ({ latestBuild }) => // Loads stuff from a CDN require.resolve("@polymer/font-roboto/roboto.js"), require.resolve("@vaadin/vaadin-material-styles/font-roboto.js"), - // Compatibility not needed for latest builds - latestBuild && - // wrapped in require.resolve so it blows up if file no longer exists - require.resolve( - path.resolve(paths.polymer_dir, "src/resources/compatibility.ts") - ), - // This polyfill is loaded in workers to support ES5, filter it out. + // Polyfill only needed for ES5 workers so filter out in latestBuild latestBuild && require.resolve("proxy-polyfill/src/index.js"), ].filter(Boolean); @@ -118,6 +112,7 @@ module.exports.config = { authorize: "./src/entrypoints/authorize.ts", onboarding: "./src/entrypoints/onboarding.ts", core: "./src/entrypoints/core.ts", + compatibility: "./src/entrypoints/compatibility.ts", "custom-panel": "./src/entrypoints/custom-panel.ts", }, outputPath: outputPath(paths.app_output_root, latestBuild), @@ -132,6 +127,10 @@ module.exports.config = { return { entry: { main: path.resolve(paths.demo_dir, "src/entrypoint.ts"), + compatibility: path.resolve( + paths.polymer_dir, + "src/entrypoints/compatibility.ts" + ), }, outputPath: outputPath(paths.demo_output_root, latestBuild), publicPath: publicPath(latestBuild), diff --git a/build-scripts/gulp/entry-html.js b/build-scripts/gulp/entry-html.js index c1be430039..9af75cf318 100644 --- a/build-scripts/gulp/entry-html.js +++ b/build-scripts/gulp/entry-html.js @@ -53,6 +53,7 @@ gulp.task("gen-pages-dev", (done) => { const content = renderTemplate(page, { latestPageJS: `/frontend_latest/${page}.js`, + es5Compatibility: "/frontend_es5/compatibility.js", es5PageJS: `/frontend_es5/${page}.js`, }); @@ -78,6 +79,7 @@ gulp.task("gen-pages-prod", (done) => { const content = renderTemplate(page, { latestPageJS: latestManifest[`${page}.js`], + es5Compatibility: es5Manifest["compatibility.js"], es5PageJS: es5Manifest[`${page}.js`], }); @@ -97,6 +99,7 @@ gulp.task("gen-index-app-dev", (done) => { latestCoreJS: "/frontend_latest/core.js", latestCustomPanelJS: "/frontend_latest/custom-panel.js", + es5Compatibility: "/frontend_es5/compatibility.js", es5AppJS: "/frontend_es5/app.js", es5CoreJS: "/frontend_es5/core.js", es5CustomPanelJS: "/frontend_es5/custom-panel.js", @@ -120,6 +123,7 @@ gulp.task("gen-index-app-prod", (done) => { latestCoreJS: latestManifest["core.js"], latestCustomPanelJS: latestManifest["custom-panel.js"], + es5Compatibility: es5Manifest["compatibility.js"], es5AppJS: es5Manifest["app.js"], es5CoreJS: es5Manifest["core.js"], es5CustomPanelJS: es5Manifest["custom-panel.js"], @@ -206,6 +210,7 @@ gulp.task("gen-index-demo-dev", (done) => { const content = renderDemoTemplate("index", { latestDemoJS: "/frontend_latest/main.js", + es5Compatibility: "/frontend_es5/compatibility.js", es5DemoJS: "/frontend_es5/main.js", }); @@ -228,6 +233,7 @@ gulp.task("gen-index-demo-prod", (done) => { const content = renderDemoTemplate("index", { latestDemoJS: latestManifest["main.js"], + es5Compatibility: es5Manifest["compatibility.js"], es5DemoJS: es5Manifest["main.js"], }); const minified = minifyHtml(content); diff --git a/build-scripts/rollup-plugins/ignore-plugin.js b/build-scripts/rollup-plugins/ignore-plugin.js index 4bebb69095..e696bbe6c9 100644 --- a/build-scripts/rollup-plugins/ignore-plugin.js +++ b/build-scripts/rollup-plugins/ignore-plugin.js @@ -14,6 +14,32 @@ module.exports = function (userOptions = {}) { return { name: "ignore", + resolveId(importee, importer) { + // Only use ignore to intercept imports that we don't control + // inside node_module dependencies. + if ( + importee.endsWith("commonjsHelpers.js") || + importee.endsWith("rollupPluginBabelHelpers.js") || + importee.endsWith("?commonjs-proxy") || + !importer || + !importer.includes("/node_modules/") + ) { + return null; + } + let fullPath; + try { + fullPath = importee.startsWith(".") + ? path.resolve(importee, importer) + : require.resolve(importee); + } catch (err) { + console.error("Error in ignore plugin", { importee, importer }, err); + throw err; + } + + return files.some((toIgnorePath) => fullPath.startsWith(toIgnorePath)) + ? fullPath + : null; + }, load(id) { return files.some((toIgnorePath) => id.startsWith(toIgnorePath)) diff --git a/demo/src/ha-demo.ts b/demo/src/ha-demo.ts index c49d522d65..6fd33b7f57 100644 --- a/demo/src/ha-demo.ts +++ b/demo/src/ha-demo.ts @@ -1,4 +1,3 @@ -import "../../src/resources/compatibility"; import { isNavigationClick } from "../../src/common/dom/is-navigation-click"; import { navigate } from "../../src/common/navigate"; import { diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template index 0b045fddd8..1bea54c292 100644 --- a/demo/src/html/index.html.template +++ b/demo/src/html/index.html.template @@ -95,9 +95,12 @@ _ls("/static/polyfills/custom-elements-es5-adapter.js"); <% if (useRollup) { %> _ls("/static/js/s.min.js").onload = function() { - System.import("<%= es5DemoJS %>"); + System.import("<%= es5Compatibility %>").then(function() { + System.import("<%= es5DemoJS %>"); + }); }; <% } else { %> + _ls("<%= es5Compatibility %>"); _ls("<%= es5DemoJS %>"); <% } %> } diff --git a/src/entrypoints/authorize.ts b/src/entrypoints/authorize.ts index 2a691c973f..959a8fc0ef 100644 --- a/src/entrypoints/authorize.ts +++ b/src/entrypoints/authorize.ts @@ -1,5 +1,3 @@ -// Compat needs to be first import -import "../resources/compatibility"; import "@polymer/polymer/lib/elements/dom-if"; import "@polymer/polymer/lib/elements/dom-repeat"; import "../auth/ha-authorize"; diff --git a/src/resources/compatibility.ts b/src/entrypoints/compatibility.ts similarity index 100% rename from src/resources/compatibility.ts rename to src/entrypoints/compatibility.ts diff --git a/src/entrypoints/core.ts b/src/entrypoints/core.ts index 8a6bedf9db..f9d929f3e7 100644 --- a/src/entrypoints/core.ts +++ b/src/entrypoints/core.ts @@ -1,5 +1,3 @@ -// Compat needs to be first import -import "../resources/compatibility"; import { Auth, Connection, diff --git a/src/entrypoints/custom-panel.ts b/src/entrypoints/custom-panel.ts index d43d881679..71ca34907e 100644 --- a/src/entrypoints/custom-panel.ts +++ b/src/entrypoints/custom-panel.ts @@ -1,4 +1,3 @@ -import "../resources/compatibility"; import { PolymerElement } from "@polymer/polymer"; import { fireEvent } from "../common/dom/fire_event"; import { loadJS } from "../common/dom/load_resource"; @@ -18,9 +17,12 @@ let es5Loaded: Promise | undefined; window.loadES5Adapter = () => { if (!es5Loaded) { - es5Loaded = loadJS( - `${__STATIC_PATH__}polyfills/custom-elements-es5-adapter.js` - ).catch(); // Swallow errors as it raises errors on old browsers. + es5Loaded = Promise.all([ + loadJS( + `${__STATIC_PATH__}polyfills/custom-elements-es5-adapter.js` + ).catch(), + import(/* webpackChunkName: "compat" */ "./compatibility"), + ]); } return es5Loaded; }; diff --git a/src/entrypoints/onboarding.ts b/src/entrypoints/onboarding.ts index 0c30daed0a..ffe47dc55e 100644 --- a/src/entrypoints/onboarding.ts +++ b/src/entrypoints/onboarding.ts @@ -1,5 +1,3 @@ -// Compat needs to be first import -import "../resources/compatibility"; import "../onboarding/ha-onboarding"; import "../resources/ha-style"; import "../resources/roboto"; diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template index 3cbcfda5ce..2b04434a3e 100644 --- a/src/html/authorize.html.template +++ b/src/html/authorize.html.template @@ -50,9 +50,12 @@ _ls("/static/polyfills/custom-elements-es5-adapter.js"); <% if (useRollup) { %> _ls("/static/js/s.min.js").onload = function() { - System.import("<%= es5PageJS %>"); + System.import("<%= es5Compatibility %>").then(function() { + System.import("<%= es5PageJS %>"); + }); } <% } else { %> + _ls("<%= es5Compatibility %>"); _ls("<%= es5PageJS %>"); <% } %> } diff --git a/src/html/index.html.template b/src/html/index.html.template index 7ce840a0e3..fbdf1b28c6 100644 --- a/src/html/index.html.template +++ b/src/html/index.html.template @@ -70,13 +70,14 @@ <% if (useRollup) { %> _ls("/static/js/s.min.js").onload = function() { - // Although core and app can load in any order, we need to - // force loading core first because it contains polyfills - return System.import("<%= es5CoreJS %>").then(function() { + System.import("<%= es5Compatibility %>").then(function() { + return System.import("<%= es5CoreJS %>"); + }).then(function() { System.import("<%= es5AppJS %>"); }); } <% } else { %> + _ls("<%= es5Compatibility %>"); _ls("<%= es5CoreJS %>"); _ls("<%= es5AppJS %>"); <% } %> diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template index 6acf158b58..b6f0243ad6 100644 --- a/src/html/onboarding.html.template +++ b/src/html/onboarding.html.template @@ -52,9 +52,12 @@ _ls("/static/polyfills/custom-elements-es5-adapter.js"); <% if (useRollup) { %> _ls("/static/js/s.min.js").onload = function() { - System.import("<%= es5PageJS %>"); + System.import("<%= es5Compatibility %>").then(function() { + System.import("<%= es5PageJS %>"); + }); } <% } else { %> + _ls("<%= es5Compatibility %>"); _ls("<%= es5PageJS %>"); <% } %> }