fix(css-vars): fix css vars polyfill for ie11 using defineCustomElements()

Author: adamdbradley

scripts/build-core-esm.js

@@ -2,40 +2,29 @@ const fs = require('fs-extra');
 const path = require('path');
 const rollup = require('rollup');
 
-function buildCoreEsm(inputFile, outputFile) {
-  return rollup.rollup({
+
+async function buildCoreEsm(inputFile, outputFile) {
+  const build = await rollup.rollup({
     input: inputFile,
     onwarn: (message) => {
       if (/top level of an ES module/.test(message)) return;
       console.error( message );
     }
-  })
-  .then(bundle => {
-    generateBundle(inputFile, outputFile, bundle, 'es');
-  })
-  .catch(err => {
-    console.log(err);
-    console.log(err.stack);
-    process.exit(1);
   });
-}
-
 
-function generateBundle(inputFile, outputFile, bundle, format) {
-  bundle.generate({
-    format: format
+  const clientCore = await build.generate({
+    format: 'es'
+  });
 
-  }).then(clientCore => {
-    let code = clientCore.code.trim();
-    code = dynamicImportFnHack(code);
-    code = polyfillsHack(code);
+  let code = clientCore.code.trim();
+  code = dynamicImportFnHack(code);
+  code = polyfillsHack(code);
 
-    fs.writeFile(outputFile, code, (err) => {
-      if (err) {
-        console.log(err);
-        process.exit(1);
-      }
-    });
+  fs.writeFile(outputFile, code, (err) => {
+    if (err) {
+      console.log(err);
+      process.exit(1);
+    }
   });
 }
 

scripts/build-core.js

@@ -31,6 +31,7 @@ const outputLoaderFile = path.join(DST_DIR, 'client', 'loader.js');
 const inputCoreEsmFile = path.join(TRANSPILED_DIR, 'client', 'core-esm.js');
 const outputCoreEsmFile = path.join(DIST_CLIENT_DIR, 'core.esm.js');
 const outputPolyfillsDir = path.join(DIST_CLIENT_DIR, 'polyfills');
+const transpiledPolyfillsDir = path.join(TRANSPILED_DIR, 'client', 'polyfills');
 
 
 const success = transpile(path.join('..', 'src', 'tsconfig.json'));
@@ -51,7 +52,7 @@ if (success) {
   copyMain();
   createCoreDts();
   copyUtilDir();
-  buildPolyfills(outputPolyfillsDir);
+  buildPolyfills(transpiledPolyfillsDir, outputPolyfillsDir);
 
 
   function bundleClientCore(inputCoreFile, outputCoreFile) {

scripts/build-polyfills.js

@@ -1,12 +1,14 @@
 const fs = require('fs-extra');
 const path = require('path');
+const rollup = require('rollup');
+const ts = require('typescript');
+const terser = require('terser');
 
 const ROOT_DIR = path.join(__dirname, '..');
 const SRC_DIR = path.join(ROOT_DIR, 'src', 'client', 'polyfills');
 
 
-module.exports = function buildPolyfills(outputPolyfillsDir) {
-
+module.exports = async function buildPolyfills(transpiledPolyfillsDir, outputPolyfillsDir) {
   fs.emptyDirSync(outputPolyfillsDir);
 
   const esmDir = path.join(outputPolyfillsDir, 'esm');
@@ -26,9 +28,41 @@ module.exports = function buildPolyfills(outputPolyfillsDir) {
 
     const esmWrapped = (fileName === 'tslib.js')
       ? polyfillContent
-      : `export function applyPolyfill(window, document) {${polyfillContent}}`;
+      : esmWrap(polyfillContent);
 
     fs.writeFileSync(esmFilePath, esmWrapped);
     fs.writeFileSync(es5FilePath, polyfillContent);
   });
+
+
+  const build = await rollup.rollup({
+    input: path.join(transpiledPolyfillsDir, 'css-shim', 'index.js'),
+    onwarn: (message) => {
+      if (/top level of an ES module/.test(message)) return;
+      console.error( message );
+    }
+  });
+
+  const bundleResults = await build.generate({
+    format: 'es'
+  });
+
+  const transpile = ts.transpileModule(bundleResults.code, {
+    compilerOptions: {
+      target: ts.ScriptTarget.ES5
+    }
+  });
+
+  const minify = terser.minify(transpile.outputText);
+
+  const esmFilePath = path.join(esmDir, 'css-shim.js');
+  const es5FilePath = path.join(es5Dir, 'css-shim.js');
+
+  fs.writeFileSync(esmFilePath, esmWrap(minify.code));
+  fs.writeFileSync(es5FilePath, minify.code);
 };
+
+
+function esmWrap(polyfillContent) {
+  return `export function applyPolyfill(window, document) {${polyfillContent}}`;
+}

src/client/core-esm.ts

@@ -55,34 +55,45 @@ export function defineCustomElement(win: Window, cmpData: d.ComponentHostData |
       );
     }
 
-    // polyfills have been applied if need be
-    (cmpData as d.ComponentHostData[]).forEach(c => {
-      let HostElementConstructor: any;
-
-      if (isNative(win.customElements.define)) {
-        // native custom elements supported
-        const createHostConstructor = new Function('w', 'return class extends w.HTMLElement{}');
-        HostElementConstructor = createHostConstructor(win);
-
-      } else {
-        // using polyfilled custom elements
-        HostElementConstructor = function(self: any) {
-          return (win as any).HTMLElement.call(this, self);
-        };
-
-        HostElementConstructor.prototype = Object.create(
-          (win as any).HTMLElement.prototype,
-          { constructor: { value: HostElementConstructor, configurable: true } }
+    function defineComponents() {
+      // polyfills have been applied if need be
+      (cmpData as d.ComponentHostData[]).forEach(c => {
+        let HostElementConstructor: any;
+
+        if (isNative(win.customElements.define)) {
+          // native custom elements supported
+          const createHostConstructor = new Function('w', 'return class extends w.HTMLElement{}');
+          HostElementConstructor = createHostConstructor(win);
+
+        } else {
+          // using polyfilled custom elements
+          HostElementConstructor = function(self: any) {
+            return (win as any).HTMLElement.call(this, self);
+          };
+
+          HostElementConstructor.prototype = Object.create(
+            (win as any).HTMLElement.prototype,
+            { constructor: { value: HostElementConstructor, configurable: true } }
+          );
+        }
+
+        // convert the static constructor data to cmp metadata
+        // define the component as a custom element
+        pltMap[namespace].defineComponent(
+          buildComponentLoader(c),
+          HostElementConstructor
         );
-      }
+      });
+    }
 
-      // convert the static constructor data to cmp metadata
-      // define the component as a custom element
-      pltMap[namespace].defineComponent(
-        buildComponentLoader(c),
-        HostElementConstructor
-      );
-    });
+    if (_BUILD_.cssVarShim && (window as any).customStyleShim) {
+      pltMap[namespace].customStyle = (window as any).customStyleShim;
+
+      pltMap[namespace].customStyle.initShim().then(defineComponents);
+
+    } else {
+      defineComponents();
+    }
 
   });
 }

src/client/platform-main-legacy.ts

@@ -284,7 +284,7 @@ export function createPlatformMainLegacy(namespace: string, Context: d.CoreConte
 
   let requestBundleQueue: Function[] = [];
   if (_BUILD_.cssVarShim && customStyle) {
-    customStyle.init().then(() => {
+    customStyle.initShim().then(() => {
       // loaded all the css, let's run all the request bundle callbacks
       while (requestBundleQueue.length) {
         requestBundleQueue.shift()();

src/client/polyfills/css-shim/custom-style.ts

@@ -22,7 +22,7 @@ export class CustomStyle {
     private doc: Document,
   ) {}
 
-  init() {
+  initShim() {
     return new Promise(resolve => {
       this.win.requestAnimationFrame(() => {
         loadDocument(this.doc, this.globalScopes).then(() => resolve());

src/client/polyfills/css-shim/index.ts

@@ -0,0 +1,4 @@
+
+import { CustomStyle } from './custom-style';
+
+(window as any).customStyleShim = new CustomStyle(window, document);

src/client/polyfills/index.js

@@ -46,5 +46,6 @@ const INLINE_POLYFILLS = [
 
 const POLYFILLS = [
   ...INLINE_POLYFILLS,
+  'css-shim.js',
   'tslib.js'
 ];

src/compiler/app/app-polyfills.ts

@@ -234,5 +234,11 @@ export const RESERVED_PROPERTIES: string[] = [
   'warn',
   'webkitMatchesSelector',
   'window',
-  'HTMLElement'
+  'HTMLElement',
+
+  /** CSS Vars Shim */
+  'createHostStyle',
+  'initShim',
+  'customStyleShim',
+  'updateHost'
 ];