fix(gatsby-plugin-preact): add preact to framework bundle (#24154)

* fix(gatsby-plugin-preact): add preact to framework bundle

* Update packages/gatsby-plugin-preact/src/gatsby-node.js

Co-authored-by: Jason Miller <[email protected]>

* chore: format

* remove unused code

* fix splitchunks

* Update packages/gatsby-plugin-preact/src/gatsby-node.js

Co-authored-by: Michal Piechowiak <[email protected]>

Co-authored-by: Jason Miller <[email protected]>
Co-authored-by: gatsbybot <[email protected]>
Co-authored-by: Michal Piechowiak <[email protected]>

Author: 4 people

packages/gatsby-plugin-preact/src/__tests__/gatsby-node.js

@@ -53,7 +53,33 @@ describe(`gatsby-plugin-preact`, () => {
   })
 
   it(`sets the correct webpack config in production`, () => {
-    const getConfig = jest.fn()
+    const FRAMEWORK_BUNDLES = [`react`, `react-dom`, `scheduler`, `prop-types`]
+    const getConfig = jest.fn(() => {
+      return {
+        optimization: {
+          splitChunks: {
+            chunks: `all`,
+            cacheGroups: {
+              default: false,
+              vendors: false,
+              framework: {
+                chunks: `all`,
+                name: `framework`,
+                // This regex ignores nested copies of framework libraries so they're bundled with their issuer.
+                test: new RegExp(
+                  `(?<!node_modules.*)[\\\\/]node_modules[\\\\/](${FRAMEWORK_BUNDLES.join(
+                    `|`
+                  )})[\\\\/]`
+                ),
+                priority: 40,
+                // Don't let webpack eliminate this chunk (prevents this chunk from becoming a part of the commons chunk)
+                enforce: true,
+              },
+            },
+          },
+        },
+      }
+    })
     const actions = {
       setWebpackConfig: jest.fn(),
       setBabelPlugin: jest.fn(),
@@ -73,8 +99,40 @@ describe(`gatsby-plugin-preact`, () => {
       },
     })
 
-    expect(getConfig).toHaveBeenCalledTimes(0)
-    expect(actions.replaceWebpackConfig).toHaveBeenCalledTimes(0)
+    expect(getConfig).toHaveBeenCalledTimes(1)
     expect(actions.setBabelPlugin).toHaveBeenCalledTimes(0)
+    expect(actions.replaceWebpackConfig).toHaveBeenCalledTimes(1)
+    expect(actions.replaceWebpackConfig).toMatchInlineSnapshot(`
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "optimization": Object {
+                "splitChunks": Object {
+                  "cacheGroups": Object {
+                    "default": false,
+                    "framework": Object {
+                      "chunks": "all",
+                      "enforce": true,
+                      "name": "framework",
+                      "priority": 40,
+                      "test": [Function],
+                    },
+                    "vendors": false,
+                  },
+                  "chunks": "all",
+                },
+              },
+            },
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    `)
   })
 })

packages/gatsby-plugin-preact/src/gatsby-node.js

@@ -24,6 +24,25 @@ exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
     })
   }
 
+  // add preact to the framework bundle
+  if (stage === `build-javascript`) {
+    const webpackConfig = getConfig()
+    if (
+      webpackConfig?.optimization?.splitChunks?.cacheGroups?.framework?.test
+    ) {
+      const frameworkRegex =
+        webpackConfig.optimization.splitChunks.cacheGroups.framework.test
+
+      // replace react libs with preact
+      webpackConfig.optimization.splitChunks.cacheGroups.framework.test = module =>
+        /(?<!node_modules.*)[\\/]node_modules[\\/](preact)[\\/]/.test(
+          module.resource
+        ) || frameworkRegex.test(module.resource)
+
+      actions.replaceWebpackConfig(webpackConfig)
+    }
+  }
+
   actions.setWebpackConfig({
     resolve: {
       alias: {