implement getModule, load needed modules for a page in browser and …

…for SSR
gatsbyjs · Jun 20, 2020 · ab6b500 · ab6b500
1 parent 5cdcc6c
commit ab6b500
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 4 deletions.
diff --git a/packages/gatsby/cache-dir/gatsby-browser-entry.js b/packages/gatsby/cache-dir/gatsby-browser-entry.js
@@ -113,3 +113,5 @@ export {
   useStaticQuery,
   prefetchPathname,
 }
+
+export { getModule } from "./modules"
diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js
@@ -1,6 +1,7 @@
 import prefetchHelper from "./prefetch"
 import emitter from "./emitter"
 import { setMatchPaths, findPath, findMatchPath } from "./find-path"
+import { addModule, getModule } from "./modules"
 
 /**
  * Available resource loading statuses
@@ -199,8 +200,12 @@ export class BaseLoader {
         }
 
         let pageData = result.payload
-        const { componentChunkName } = pageData
-        return this.loadComponent(componentChunkName).then(component => {
+        const { componentChunkName, moduleDependencies = [] } = pageData
+
+        return Promise.all([
+          this.loadComponent(componentChunkName),
+          this.fetchModuleDependencies(moduleDependencies),
+        ]).then(([component]) => {
           const finalResult = { createdAt: new Date() }
           let pageResources
           if (!component) {
@@ -351,6 +356,20 @@ export class BaseLoader {
       return appData
     })
   }
+
+  fetchModuleDependencies(moduleDependencies) {
+    return Promise.all(
+      moduleDependencies.map(moduleId => {
+        if (getModule(moduleId)) {
+          return Promise.resolve()
+        }
+
+        return this.loadComponent(moduleId, `modules`).then(module => {
+          addModule(moduleId, module)
+        })
+      })
+    )
+  }
 }
 
 const createComponentUrls = componentChunkName =>

diff --git a/packages/gatsby/cache-dir/modules.js b/packages/gatsby/cache-dir/modules.js
@@ -0,0 +1,9 @@
+const modules = new Map()
+
+export function addModule(moduleId, module) {
+  modules.set(moduleId, module)
+}
+
+export function getModule(moduleId) {
+  return modules.get(moduleId)
+}
diff --git a/packages/gatsby/cache-dir/static-entry.js b/packages/gatsby/cache-dir/static-entry.js
@@ -18,6 +18,7 @@ const {
 const { RouteAnnouncerProps } = require(`./route-announcer-props`)
 const apiRunner = require(`./api-runner-ssr`)
 const syncRequires = require(`./sync-requires`)
+const { addModule, getModule } = require(`./modules`)
 const { version: gatsbyVersion } = require(`gatsby/package.json`)
 
 const stats = JSON.parse(
@@ -201,7 +202,19 @@ export default (pagePath, callback) => {
 
   const appDataUrl = getAppDataUrl()
 
-  const { componentChunkName } = pageData
+  const { componentChunkName, moduleDependencies } = pageData
+
+  // make sure needed modules for the page are loaded in modules provider
+  if (moduleDependencies) {
+    moduleDependencies.forEach(moduleId => {
+      if (getModule(moduleId)) {
+        return
+      }
+
+      const module = syncRequires.modules[moduleId]
+      addModule(moduleId, module)
+    })
+  }
 
   class RouteHandler extends React.Component {
     render() {
@@ -274,7 +287,7 @@ export default (pagePath, callback) => {
 
   // Create paths to scripts
   let scriptsAndStyles = flatten(
-    [`app`, componentChunkName].map(s => {
+    [`app`, componentChunkName, ...(moduleDependencies || [])].map(s => {
       const fetchKey = `assetsByChunkName[${s}]`
 
       let chunks = get(stats, fetchKey)