Merge pull request #12 from tujoworker/fix/fix-create-page

fix: fix "create page" issue during dev mode
tujoworker · Sep 20, 2021 · 507a0af · 507a0af
2 parents 8b9ae2d + ca88674
commit 507a0af
Show file tree

Hide file tree

Showing 7 changed files with 1,301 additions and 125 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/README.md b/README.md
@@ -250,8 +250,8 @@ We also listen for `unlink` so we can update related pages when a wrapper gets d
 
 To test the add and remove cycle, run:
 
-1. $ `git checkout -- example-micro-frontends/micro-app-home/src/pages/home-layout.tsx`
+1. $ `unlink example-micro-frontends/micro-app-home/src/pages/home-layout.tsx`
 
-2. $ `unlink example-micro-frontends/micro-app-home/src/pages/home-layout.tsx`
+2. $ `git checkout -- example-micro-frontends/micro-app-home/src/pages/home-layout.tsx`
 
 3. And repeat. Eventually refresh the browser.
diff --git a/gatsby-plugin-wrap-pages/gatsby-node.js b/gatsby-plugin-wrap-pages/gatsby-node.js
@@ -2,6 +2,7 @@ const systemPath = require('path')
 const chokidar = require('chokidar')
 const chalk = require('chalk')
 const onExit = require('signal-exit')
+const { slash } = require('gatsby-core-utils')
 const {
   handleWrapperScopesAndPages,
   isWrapper,
@@ -91,7 +92,7 @@ exports.onPostBootstrap = async (
 }
 
 exports.onCreateDevServer = (
-  { reporter, store, actions },
+  { reporter, store, actions, emitter },
   pluginOptions
 ) => {
   let updateTimeout = null
@@ -147,23 +148,23 @@ exports.onCreateDevServer = (
     )
   })
 
-  const watcher = chokidar.watch(watchPaths, { ignoreInitial: true })
-
-  watcher.on('add', (path) => {
-    const filterFile = path
-    const page = { component: filterFile }
+  emitter.on('CREATE_PAGE', async (action) => {
+    const filterFile = slash(action.payload.component)
 
     // 1. check first if the new file is a wrapper
+    const page = { component: filterFile }
     if (isWrapper({ page, wrapperName: globalThis.WPWrapperNames })) {
       // 2. we will then filter against directories
       const filterDir = systemPath.dirname(filterFile)
-      updatePages({ filterDir })
+      await updatePages({ filterDir })
     } else {
       // 3. instead of pages
-      updatePages({ filterFile })
+      await updatePages({ filterFile })
     }
   })
 
+  const watcher = chokidar.watch(watchPaths, { ignoreInitial: true })
+
   watcher.on('unlink', (path) => {
     const filterDir = systemPath.dirname(path)
     updatePages({ filterDir })

diff --git a/gatsby-plugin-wrap-pages/package.json b/gatsby-plugin-wrap-pages/package.json
@@ -45,6 +45,7 @@
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "fs-extra": "^10.0.0",
+    "gatsby-cli": "^3.14.0",
     "gatsby-core-utils": "^2.13.0",
     "semantic-release": "^17.4.7",
     "signal-exit": "^3.0.3"

diff --git a/gatsby-plugin-wrap-pages/plugin-logic.js b/gatsby-plugin-wrap-pages/plugin-logic.js
@@ -1,6 +1,7 @@
 const systemPath = require('path')
 const fs = require('fs-extra')
-const { createContentDigest } = require('gatsby-core-utils')
+const { createContentDigest, slash } = require('gatsby-core-utils')
+const reporter = require('gatsby-cli/lib/reporter')
 const {
   pageDataExists,
   writePageData,
@@ -18,7 +19,6 @@ globalThis.WPScopeFilesHash = null
 // Export all so we also can mock them
 exports.handleWrapperScopesAndPages = handleWrapperScopesAndPages
 exports.isWrapper = isWrapper
-exports.convertToForwardslash = convertToForwardslash
 exports.DEFAULT_WRAPPER_NAME = DEFAULT_WRAPPER_NAME
 
 async function handleWrapperScopesAndPages(params) {
@@ -47,7 +47,7 @@ async function collectWrappers({
       page.scopeData = page.scopeData || {}
 
       const componentPath = getPageComponent(page)
-      const relativePath = convertToForwardslash(
+      const relativePath = slash(
         systemPath.relative(globalThis.WPProgramDirectory, componentPath)
       )
 
@@ -87,7 +87,7 @@ async function updateContextInPages({
 
     const dirPath = systemPath.dirname(componentPath)
 
-    const relativeDirectoryPath = convertToForwardslash(
+    const relativeDirectoryPath = slash(
       systemPath.relative(globalThis.WPProgramDirectory, dirPath)
     )
     const correctedDirectoryPath = correctRelativePath(
@@ -127,28 +127,40 @@ async function updateContextInPages({
         )
 
         if (pageDataExists(publicDir, page.path)) {
-          // 1. Read page context
-          const result = JSON.parse(
-            await readPageQueryResult(publicDir, page.path)
+          const pageQueryResult = await readPageQueryResult(
+            publicDir,
+            page.path
           )
 
-          // 2. Update the page context
-          result.pageContext.WPS = page.context.WPS
-
-          // 3. write the page context to the cache
-          await savePageQueryResult(
-            globalThis.WPProgramDirectory,
-            page.path,
-            JSON.stringify(result)
-          )
-
-          // Ensure the page has at least an empty staticQueryHashes array
-          if (!page.staticQueryHashes) {
-            page.staticQueryHashes = []
+          if (pageQueryResult) {
+            console.log('pageQueryResult', String(pageQueryResult))
+
+            try {
+              // 1. Read page context
+              const result = JSON.parse(pageQueryResult)
+              console.log('result', result)
+
+              // 2. Update the page context
+              result.pageContext.WPS = page.context.WPS
+
+              // 3. write the page context to the cache
+              await savePageQueryResult(
+                globalThis.WPProgramDirectory,
+                page.path,
+                JSON.stringify(result)
+              )
+
+              // Ensure the page has at least an empty staticQueryHashes array
+              if (!page.staticQueryHashes) {
+                page.staticQueryHashes = []
+              }
+
+              // 4. update the real page context data for the effected page
+              await writePageData(publicDir, page)
+            } catch (e) {
+              reporter.error(e)
+            }
           }
-
-          // 4. update the real page context data for the effected page
-          await writePageData(publicDir, page)
         }
       }
     }
@@ -244,13 +256,6 @@ function isWrapper({ page, wrapperName = null }) {
   })
 }
 
-function convertToForwardslash(path) {
-  if (path.includes('\\')) {
-    return path.replace(/\\/g, '/')
-  }
-  return path
-}
-
 function correctRelativePath(path) {
   if (path.startsWith('../')) {
     return path.substr(path.indexOf('/src/') + 1)
@@ -263,7 +268,7 @@ function getPageComponent(page) {
 
   // Handle createPage context
   if (page.context && page.context.wrapPageWith) {
-    componentPath = convertToForwardslash(
+    componentPath = slash(
       systemPath.resolve(
         systemPath.isAbsolute(page.context.wrapPageWith)
           ? '/'

diff --git a/integration-tests/__tests__/plugin-logic.test.js b/integration-tests/__tests__/plugin-logic.test.js
@@ -1,9 +1,7 @@
 import systemPath from 'path'
 import fs from 'fs-extra'
-import {
-  handleWrapperScopesAndPages,
-  convertToForwardslash,
-} from 'gatsby-plugin-wrap-pages/plugin-logic'
+const { slash } = require('gatsby-core-utils')
+import { handleWrapperScopesAndPages } from 'gatsby-plugin-wrap-pages/plugin-logic'
 
 beforeEach(() => {
   jest.resetAllMocks()
@@ -26,7 +24,7 @@ const getPage = (component = 'src/pages/index.js', merge = null) => [
   'path',
   {
     path: '/path',
-    component: convertToForwardslash(
+    component: slash(
       systemPath.resolve(globalThis.WPProgramDirectory, component)
     ),
     context: {},
@@ -59,7 +57,7 @@ describe('wrapper', () => {
     await handleWrapperScopesAndPages(
       getParams({
         pages,
-        filterFile: convertToForwardslash(
+        filterFile: slash(
           systemPath.resolve(
             globalThis.WPProgramDirectory,
             'src/pages/wrap-pages.js'
@@ -125,7 +123,7 @@ describe('wrapper', () => {
     await handleWrapperScopesAndPages(
       getParams({
         pages,
-        filterFile: convertToForwardslash(
+        filterFile: slash(
           systemPath.resolve(
             globalThis.WPProgramDirectory,
             'src/pages/wrap-pages.js'
@@ -164,7 +162,7 @@ describe('wrapper', () => {
     await handleWrapperScopesAndPages(
       getParams({
         pages,
-        filterDir: convertToForwardslash(
+        filterDir: slash(
           systemPath.dirname(
             globalThis.WPProgramDirectory,
             'src/pages/wrap-pages'
@@ -456,10 +454,10 @@ export * as _de24c938e6d0ae34eea46b0360bc707c from '../src/pages/wrap-pages.js';
   })
 })
 
-describe('convertToForwardslash', () => {
+describe('slash', () => {
   it('should flip backslashes', async () => {
     const path = 'path-a\\path-b\\path-c'
-    const fixedPath = convertToForwardslash(path)
+    const fixedPath = slash(path)
 
     expect(fixedPath).toBe('path-a/path-b/path-c')
   })