fix(safari): update safari 10 to use es5/system builds

Closes #1900
ionic-team · Jan 1, 2020 · cc4c013 · cc4c013
1 parent e8b4c59
commit cc4c013
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 18 deletions.
diff --git a/src/client/import-shims.ts b/src/client/import-shims.ts
@@ -19,43 +19,61 @@ export const patchEsm = () => {
   return Promise.resolve();
 };
 
-export const patchBrowser = async (): Promise<d.CustomElementsDefineOptions> => {
+export const patchBrowser = (): Promise<d.CustomElementsDefineOptions> => {
+  // NOTE!! This fn cannot use async/await!
   if (BUILD.isDev) {
     consoleDevInfo('Stencil is running in the development mode.');
   }
+
   if (BUILD.cssVarShim) {
+    // shim css vars
     plt.$cssShim$ = (win as any).__stencil_cssshim;
   }
+
   if (BUILD.cloneNodeFix) {
+    // opted-in to polyfill cloneNode() for slot polyfilled components
     patchCloneNodeFix((H as any).prototype);
   }
 
+  if (BUILD.profile && !performance.mark) {
+    // not all browsers support performance.mark/measure (Safari 10)
+    performance.mark = performance.measure = () => {/*noop*/};
+    performance.getEntriesByName = () => [];
+  }
+
   // @ts-ignore
-  const importMeta = import.meta.url;
-  const regex = new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`);
   const scriptElm = Array.from(doc.querySelectorAll('script')).find(s => (
-    regex.test(s.src) ||
+    new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
     s.getAttribute('data-stencil-namespace') === NAMESPACE
   ));
-  const opts = (scriptElm as any)['data-opts'];
+  const opts = (scriptElm as any)['data-opts'] || {};
+  const importMeta = import.meta.url;
+
+  if ('onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
+    // Safari < v11 support: This IF is true if it's Safari below v11.
+    // This fn cannot use async/await since Safari didn't support it until v11,
+    // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
+    // so both the ESM file and nomodule file would get downloaded. Only Safari
+    // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
+    // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
+    // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
+    return { then() {/* promise noop */} } as any;
+  }
+
   if (importMeta !== '') {
-    return {
-      ...opts,
-      resourcesUrl: new URL('.', importMeta).href
-    };
+    opts.resourcesUrl = new URL('.', importMeta).href;
+
   } else {
-    const resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href));
-    patchDynamicImport(resourcesUrl.href, scriptElm);
+    opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;
+    patchDynamicImport(opts.resourcesUrl, scriptElm);
 
     if (!window.customElements) {
+      // module support, but no custom elements support (Old Edge)
       // @ts-ignore
-      await import('./polyfills/dom.js');
+     return import('./polyfills/dom.js').then(() => opts);
     }
-    return {
-      ...opts,
-      resourcesUrl: resourcesUrl.href,
-    };
   }
+  return Promise.resolve(opts);
 };
 
 export const patchDynamicImport = (base: string, orgScriptElm: HTMLScriptElement) => {

diff --git a/src/compiler/component-lazy/generate-lazy-module.ts b/src/compiler/component-lazy/generate-lazy-module.ts
@@ -232,6 +232,12 @@ async function convertChunk(
         code = transpileResults.code;
       }
     }
+    if (isCore) {
+      // IS_ESM_BUILD is replaced at build time so systemjs and esm builds have diff values
+      // not using the BUILD conditional since rollup would input the same value
+      code = code.replace(/\/\* IS_ESM_BUILD \*\//g, '&& false /* IS_SYSTEM_JS_BUILD */');
+    }
+
   }
   if (shouldMinify) {
     const optimizeResults = await optimizeModule(config, compilerCtx, sourceTarget, isCore, code);

diff --git a/src/compiler/component-lazy/generate-system.ts b/src/compiler/component-lazy/generate-system.ts
@@ -49,8 +49,22 @@ async function getSystemLoader(config: d.Config, corePath: string, includePolyfi
   var doc = document;
   var currentScript = doc.currentScript;
 
-  // Safari 10 support type="module" but still download and executes the nomodule script
-  if (!currentScript || !currentScript.hasAttribute('nomodule') || !('onbeforeload' in currentScript)) {
+  // !currentScript
+  // IE11 since it doesnt support document.currentScript
+
+  // !currentScript.hasAttribute('nomodule')
+  // Bundled or doesn't have "nomodule" attribute
+
+  // !('onbeforeload' in currentScript)
+  // Not Safari
+
+  // ('onbeforeload' in currentScript) && !history.scrollRestoration
+  // Safari 10.x supports "module" but does not support async/await
+  // so it should use the es5/system build while Safari >=11 should use esm build
+  // 'onbeforeload' in currentScript only true for Safari
+  // history.scrollRestoration support added in Safari 11
+
+  if (!currentScript || !currentScript.hasAttribute('nomodule') || !('onbeforeload' in currentScript) || (('onbeforeload' in currentScript) && !history.scrollRestoration)) {
 
     ${polyfills}