chore(client): split client patch-browser and esm bundle

ionic-team · Aug 5, 2020 · 1fe168c · 1fe168c
1 parent dfc1e59
commit 1fe168c
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 41 deletions.
diff --git a/scripts/bundles/internal-platform-client.ts b/scripts/bundles/internal-platform-client.ts
@@ -57,14 +57,14 @@ export async function internalClient(opts: BuildOptions) {
     ],
   };
 
-  const internalClientPatchBundle: RollupOptions = {
-    input: join(inputClientDir, 'client-patch.js'),
+  const internalClientPatchBrowserBundle: RollupOptions = {
+    input: join(inputClientDir, 'client-patch-browser.js'),
     output: {
       format: 'es',
       dir: outputInternalClientDir,
-      entryFileNames: 'patch.js',
+      entryFileNames: 'patch-browser.js',
       chunkFileNames: '[name].js',
-      banner: getBanner(opts, 'Stencil Client Patch'),
+      banner: getBanner(opts, 'Stencil Client Patch Browser'),
       preferConst: true,
     },
     treeshake: {
@@ -143,7 +143,19 @@ export async function internalClient(opts: BuildOptions) {
       reorderCoreStatementsPlugin(),
     ],
   };
-  return [internalClientBundle, internalClientPatchBundle];
+
+  const internalClientPatchEsmBundle = { ...internalClientPatchBrowserBundle };
+  internalClientPatchEsmBundle.input = join(inputClientDir, 'client-patch-esm.js');
+  internalClientPatchEsmBundle.output = {
+    format: 'es',
+    dir: outputInternalClientDir,
+    entryFileNames: 'patch-esm.js',
+    chunkFileNames: '[name].js',
+    banner: getBanner(opts, 'Stencil Client Patch Esm'),
+    preferConst: true,
+  };
+
+  return [internalClientBundle, internalClientPatchBrowserBundle, internalClientPatchEsmBundle];
 }
 
 async function copyPolyfills(opts: BuildOptions, outputInternalClientPolyfillsDir: string) {

diff --git a/src/client/client-patch.ts → src/client/client-patch-browser.ts b/src/client/client-patch.ts → src/client/client-patch-browser.ts
@@ -1,25 +1,8 @@
 import * as d from '../declarations';
 import { BUILD, NAMESPACE } from '@app-data';
-import { consoleDevInfo, CSS, H, doc, plt, promiseResolve, win } from '@platform';
+import { consoleDevInfo, H, doc, plt, promiseResolve, win } from '@platform';
 import { getDynamicImportFunction } from '@utils';
 
-export const patchEsm = () => {
-  // NOTE!! This fn cannot use async/await!
-  // @ts-ignore
-  if (BUILD.cssVarShim && !(CSS && CSS.supports && CSS.supports('color', 'var(--c)'))) {
-    // @ts-ignore
-    return import(/* webpackChunkName: "polyfills-css-shim" */ './polyfills/css-shim.js').then(() => {
-      if ((plt.$cssShim$ = (win as any).__cssshim)) {
-        return plt.$cssShim$.i();
-      } else {
-        // for better minification
-        return 0;
-      }
-    });
-  }
-  return promiseResolve();
-};
-
 export const patchBrowser = (): Promise<d.CustomElementsDefineOptions> => {
   // NOTE!! This fn cannot use async/await!
   if (BUILD.isDev && !BUILD.isTesting) {

diff --git a/src/client/client-patch-esm.ts b/src/client/client-patch-esm.ts
@@ -0,0 +1,19 @@
+import { BUILD } from '@app-data';
+import { CSS, plt, promiseResolve, win } from '@platform';
+
+export const patchEsm = () => {
+  // NOTE!! This fn cannot use async/await!
+  // @ts-ignore
+  if (BUILD.cssVarShim && !(CSS && CSS.supports && CSS.supports('color', 'var(--c)'))) {
+    // @ts-ignore
+    return import(/* webpackChunkName: "polyfills-css-shim" */ './polyfills/css-shim.js').then(() => {
+      if ((plt.$cssShim$ = (win as any).__cssshim)) {
+        return plt.$cssShim$.i();
+      } else {
+        // for better minification
+        return 0;
+      }
+    });
+  }
+  return promiseResolve();
+};
diff --git a/src/compiler/bundle/core-resolve-plugin.ts b/src/compiler/bundle/core-resolve-plugin.ts
@@ -9,7 +9,8 @@ import {
   STENCIL_CORE_ID,
   STENCIL_INTERNAL_ID,
   STENCIL_INTERNAL_CLIENT_ID,
-  STENCIL_INTERNAL_CLIENT_PATCH_ID,
+  STENCIL_INTERNAL_CLIENT_PATCH_BROWSER_ID,
+  STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID,
   STENCIL_INTERNAL_HYDRATE_ID,
 } from './entry-alias-ids';
 import type { Plugin } from 'rollup';
@@ -28,7 +29,8 @@ export const coreResolvePlugin = (config: d.Config, compilerCtx: d.CompilerCtx,
   }
   const compilerExe = config.sys.getCompilerExecutingPath();
   const internalClient = getStencilInternalModule(config, compilerExe, 'client/index.js');
-  const internalClientPatch = getStencilInternalModule(config, compilerExe, 'client/patch.js');
+  const internalClientPatchBrowser = getStencilInternalModule(config, compilerExe, 'client/patch-browser.js');
+  const internalClientPatchEsm = getStencilInternalModule(config, compilerExe, 'client/patch-esm.js');
   const internalHydrate = getStencilInternalModule(config, compilerExe, 'hydrate/index.js');
 
   return {
@@ -65,14 +67,23 @@ export const coreResolvePlugin = (config: d.Config, compilerCtx: d.CompilerCtx,
         // the custom app-data conditionals
         return internalClient;
       }
-      if (id === STENCIL_INTERNAL_CLIENT_PATCH_ID) {
+      if (id === STENCIL_INTERNAL_CLIENT_PATCH_BROWSER_ID) {
         if (externalRuntime) {
           return {
-            id: STENCIL_INTERNAL_CLIENT_PATCH_ID,
+            id: STENCIL_INTERNAL_CLIENT_PATCH_BROWSER_ID,
             external: true,
           };
         }
-        return internalClientPatch;
+        return internalClientPatchBrowser;
+      }
+      if (id === STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID) {
+        if (externalRuntime) {
+          return {
+            id: STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID,
+            external: true,
+          };
+        }
+        return internalClientPatchEsm;
       }
       if (id === STENCIL_INTERNAL_HYDRATE_ID) {
         return internalHydrate;

diff --git a/src/compiler/bundle/entry-alias-ids.ts b/src/compiler/bundle/entry-alias-ids.ts
@@ -4,7 +4,8 @@ export const STENCIL_APP_DATA_ID = '@stencil/core/internal/app-data';
 export const STENCIL_APP_GLOBALS_ID = '@stencil/core/internal/app-globals';
 export const STENCIL_HYDRATE_FACTORY_ID = '@stencil/core/hydrate-factory';
 export const STENCIL_INTERNAL_CLIENT_ID = '@stencil/core/internal/client';
-export const STENCIL_INTERNAL_CLIENT_PATCH_ID = '@stencil/core/internal/client/patch';
+export const STENCIL_INTERNAL_CLIENT_PATCH_BROWSER_ID = '@stencil/core/internal/client/patch-browser';
+export const STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID = '@stencil/core/internal/client/patch-esm';
 export const STENCIL_INTERNAL_HYDRATE_ID = '@stencil/core/internal/hydrate';
 export const STENCIL_MOCK_DOC_ID = '@stencil/core/mock-doc';
 export const APP_DATA_CONDITIONAL = '?app-data=conditional';

diff --git a/src/compiler/output-targets/dist-lazy/generate-esm-browser.ts b/src/compiler/output-targets/dist-lazy/generate-esm-browser.ts
@@ -16,7 +16,7 @@ export const generateEsmBrowser = async (config: d.Config, compilerCtx: d.Compil
       preferConst: true,
     };
     if (config.extras.dynamicImportShim) {
-      // for Edge 18 and below
+      // for Edge 16-18
       esmOpts.dynamicImportFunction = getDynamicImportFunction(config.fsNamespace);
     }
     const output = await generateRollupOutput(rollupBuild, esmOpts, config, buildCtx.entryModules);

diff --git a/src/compiler/output-targets/dist-lazy/lazy-output.ts b/src/compiler/output-targets/dist-lazy/lazy-output.ts
@@ -10,7 +10,8 @@ import {
   LAZY_EXTERNAL_ENTRY_ID,
   STENCIL_APP_GLOBALS_ID,
   STENCIL_CORE_ID,
-  STENCIL_INTERNAL_CLIENT_PATCH_ID,
+  STENCIL_INTERNAL_CLIENT_PATCH_BROWSER_ID,
+  STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID,
   USER_INDEX_ENTRY_ID,
 } from '../../bundle/entry-alias-ids';
 import { lazyComponentTransform } from '../../transformers/component-lazy/transform-lazy-component';
@@ -97,14 +98,14 @@ const getLazyEntry = (isBrowser: boolean) => {
   s.append(`import { bootstrapLazy } from '${STENCIL_CORE_ID}';\n`);
 
   if (isBrowser) {
-    s.append(`import { patchBrowser } from '${STENCIL_INTERNAL_CLIENT_PATCH_ID}';\n`);
+    s.append(`import { patchBrowser } from '${STENCIL_INTERNAL_CLIENT_PATCH_BROWSER_ID}';\n`);
     s.append(`import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';\n`);
     s.append(`patchBrowser().then(options => {\n`);
     s.append(`  globalScripts();\n`);
     s.append(`  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n`);
     s.append(`});\n`);
   } else {
-    s.append(`import { patchEsm } from '${STENCIL_INTERNAL_CLIENT_PATCH_ID}';\n`);
+    s.append(`import { patchEsm } from '${STENCIL_INTERNAL_CLIENT_PATCH_ESM_ID}';\n`);
     s.append(`import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';\n`);
     s.append(`export const defineCustomElements = (win, options) => {\n`);
     s.append(`  if (typeof window === 'undefined') return Promise.resolve();\n`);

diff --git a/src/compiler/output-targets/index.ts b/src/compiler/output-targets/index.ts
@@ -31,7 +31,8 @@ export const generateOutputTargets = async (config: d.Config, compilerCtx: d.Com
     outputCustomElementsBundle(config, compilerCtx, buildCtx),
     outputHydrateScript(config, compilerCtx, buildCtx),
     outputLazyLoader(config, compilerCtx),
-    outputApp(config, compilerCtx, buildCtx),
+    outputLazy(config, compilerCtx, buildCtx),
+    outputWww(config, compilerCtx, buildCtx),
   ]);
 
   // must run after all the other outputs
@@ -42,11 +43,6 @@ export const generateOutputTargets = async (config: d.Config, compilerCtx: d.Com
   timeSpan.finish('generate outputs finished');
 };
 
-const outputApp = async (config: d.Config, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx) => {
-  await outputLazy(config, compilerCtx, buildCtx);
-  await outputWww(config, compilerCtx, buildCtx);
-};
-
 const invalidateRollupCaches = (compilerCtx: d.CompilerCtx) => {
   const invalidatedIds = compilerCtx.changedFiles;
   compilerCtx.rollupCache.forEach((cache: RollupCache) => {

diff --git a/tsconfig.json b/tsconfig.json
@@ -34,7 +34,8 @@
       "@stencil/core/dev-server": ["src/dev-server/index.ts"],
       "@stencil/core/internal": ["src/internal/index.ts"],
       "@stencil/core/internal/client": ["src/client/index.ts"],
-      "@stencil/core/internal/client/patch": ["src/client/client-patch.ts"],
+      "@stencil/core/internal/client/patch-browser": ["src/client/client-patch-browser.ts"],
+      "@stencil/core/internal/client/patch-es": ["src/client/client-patch-esm.ts"],
       "@stencil/core/internal/testing": ["src/testing/platform/index.ts"],
       "@stencil/core/mock-doc": ["src/mock-doc/index.ts"],
       "@stencil/core/testing": ["src/testing/index.ts"],
@@ -47,7 +48,8 @@
     "src/cli/index.ts",
     "src/cli/public.ts",
     "src/client/index.ts",
-    "src/client/client-patch.ts",
+    "src/client/client-patch-browser.ts",
+    "src/client/client-patch-esm.ts",
     "src/client/polyfills/css-shim/index.ts",
     "src/compiler/index.ts",
     "src/compiler/public.ts",