perf(): generate modulepreload for mode

Author: manucorporat

src/compiler/prerender/prerender-modulepreload.ts

@@ -3,8 +3,8 @@ import { flatOne, unique } from '@utils';
 import { getScopeId } from '../style/scope-css';
 import {injectModulePreloads} from '../html/inject-module-preloads';
 
-export function generateModulePreloads(doc: Document, hydrateResults: d.HydrateResults, componnentGraph: Map<string, string[]>) {
-  if (!componnentGraph) {
+export function generateModulePreloads(doc: Document, hydrateResults: d.HydrateResults, componentGraph: Map<string, string[]>) {
+  if (!componentGraph) {
     return false;
   }
   const hasImportScript = !!doc.querySelector('script[type=module][data-resources-url]');
@@ -14,8 +14,8 @@ export function generateModulePreloads(doc: Document, hydrateResults: d.HydrateR
   const modulePreloads = unique(
     flatOne(
       hydrateResults.components
-        .map(cmp => getScopeId(cmp.tag))
-        .map(scopeId => componnentGraph.get(scopeId) || [])
+        .map(cmp => getScopeId(cmp.tag, cmp.mode))
+        .map(scopeId => componentGraph.get(scopeId) || [])
     )
   );
 

src/declarations/hydrate.ts

@@ -55,6 +55,7 @@ export interface HydrateResults {
 
 export interface HydrateComponent {
   tag: string;
+  mode: string;
   count: number;
   depth: number;
 }

src/hydrate/platform/bootstrap-hydrate.ts

@@ -7,7 +7,7 @@ import { insertVdomAnnotations, postUpdateComponent } from '@runtime';
 export function bootstrapHydrate(win: Window, opts: d.HydrateDocumentOptions, done: (results: BootstrapHydrateResults) => void) {
   const results: BootstrapHydrateResults = {
     hydratedCount: 0,
-    hydratedTags: []
+    hydratedComponents: []
   };
   plt.$resourcesUrl$ = new URL(opts.resourcesUrl || '/', win.location.href).href;
 
@@ -168,5 +168,8 @@ const NO_HYDRATE_TAGS = new Set([
 
 export interface BootstrapHydrateResults {
   hydratedCount: number;
-  hydratedTags: string[];
+  hydratedComponents: {
+    tag: string,
+    mode: string | undefined
+  }[];
 }

src/hydrate/platform/hydrate-component.ts

@@ -1,5 +1,5 @@
 import * as d from '../../declarations';
-import { connectedCallback, getComponent, registerHost } from '@platform';
+import { connectedCallback, getComponent, getHostRef, registerHost } from '@platform';
 import { proxyHostElement } from './proxy-host-element';
 import { BootstrapHydrateResults } from './bootstrap-hydrate';
 
@@ -21,10 +21,14 @@ export function hydrateComponent(win: Window, results: BootstrapHydrateResults,
 
           results.hydratedCount++;
 
-          if (!results.hydratedTags.includes(tagName)) {
-            results.hydratedTags.push(tagName);
+          const ref = getHostRef(elm);
+          const modeName = ref.$modeName$;
+          if (!results.hydratedComponents.some(c => c.tag === tagName && c.mode === modeName)) {
+            results.hydratedComponents.push({
+              tag: tagName,
+              mode: modeName
+            });
           }
-
         } catch (e) {
           win.console.error(e);
         }

src/hydrate/runner/render.ts

@@ -124,9 +124,10 @@ async function render(win: Window, doc: Document, opts: d.HydrateDocumentOptions
 
         try {
           results.hydratedCount = bootstrapResults.hydratedCount;
-          bootstrapResults.hydratedTags.forEach(hydratedTag => {
+          bootstrapResults.hydratedComponents.forEach(component => {
             results.components.push({
-              tag: hydratedTag,
+              tag: component.tag,
+              mode: component.mode,
               count: 0,
               depth: -1
             });