-
Notifications
You must be signed in to change notification settings - Fork 275
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Next.js] Exclude ComponentProps functions from the client bundle (#1753
) * [Next.js] Exclude ComponentProps functions from the client bundle * Updated CHANGELOG * Update * Updated yarn.lock * Added a submodule * Extracted common function
- Loading branch information
1 parent
44d995d
commit 74e2e36
Showing
10 changed files
with
220 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
...s/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| /** | ||
| * @param {import('next').NextConfig} nextConfig | ||
| */ | ||
| const componentPropsPlugin = (nextConfig = {}) => { | ||
| return Object.assign({}, nextConfig, { | ||
| webpack: (config, options) => { | ||
|
|
||
| if (!options.isServer) { | ||
| // Add a loader to strip out getServerSideProps and getStaticProps from components in the client bundle | ||
| config.module.rules.unshift({ | ||
| test: /src\\components\\.*\.tsx$/, | ||
| use: ['@sitecore-jss\\sitecore-jss-dev-tools\\nextjs-component-props-loader'], | ||
| }); | ||
| } | ||
|
|
||
| // Overload the Webpack config if it was already overloaded | ||
| if (typeof nextConfig.webpack === 'function') { | ||
| return nextConfig.webpack(config, options); | ||
| } | ||
|
|
||
| return config; | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| module.exports = componentPropsPlugin; |
1 change: 1 addition & 0 deletions
1
packages/sitecore-jss-dev-tools/nextjs-component-props-loader.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './types/templating/nextjs/component-props.loader'; |
3 changes: 3 additions & 0 deletions
3
packages/sitecore-jss-dev-tools/nextjs-component-props-loader.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| const loader = require('./dist/cjs/templating/nextjs/component-props.loader'); | ||
|
|
||
| module.exports = loader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import loader from './component-props.loader'; | ||
| import { expect } from 'chai'; | ||
|
|
||
| describe('component-props.loader', () => { | ||
| it('should strip exported function expressions from the source code', () => { | ||
| const source = `import { foo } from 'module'; | ||
| console.log('Hello, world!'); | ||
| export const getServerSideProps = async () => { | ||
| return { | ||
| props: { test: true }, | ||
| }; | ||
| } | ||
| export const getStaticProps = async () => { | ||
| return { | ||
| props: { test: true }, | ||
| }; | ||
| }`; | ||
|
|
||
| const expected = `import { foo } from 'module'; | ||
| console.log('Hello, world!');`; | ||
|
|
||
| const result = loader(source).replace(/\r\n/g, '\n'); | ||
|
|
||
| expect(result).to.deep.equal(expected); | ||
| }); | ||
|
|
||
| it('should strip exported function declarations from the source code', () => { | ||
| const source = `import { foo } from 'module'; | ||
| console.log('Hello, world!'); | ||
| export async function getServerSideProps() { | ||
| return { | ||
| props: { test: true }, | ||
| }; | ||
| } | ||
| export async function getStaticProps() { | ||
| return { | ||
| props: { test: true }, | ||
| }; | ||
| }`; | ||
|
|
||
| const expected = `import { foo } from 'module'; | ||
| console.log('Hello, world!'); | ||
| export {}; | ||
| export {};`; | ||
|
|
||
| const result = loader(source).replace(/\r\n/g, '\n'); | ||
|
|
||
| expect(result).to.deep.equal(expected); | ||
| }); | ||
| }); |
81 changes: 81 additions & 0 deletions
81
packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import * as recast from 'recast'; | ||
|
|
||
| type VariableDeclaration = recast.types.namedTypes.VariableDeclaration; | ||
|
|
||
| /** | ||
| * Webpack loader to strip functions from the source code | ||
| * Strips the `getServerSideProps` and `getStaticProps` functions from the source code | ||
| * @param {string} source file source code | ||
| * @returns {string} output file source code with stripped functions | ||
| */ | ||
| export default function componentPropsLoader(source: string) { | ||
| // Parse the source code into an AST (Abstract Syntax Tree) | ||
| const ast = recast.parse(source, { | ||
| parser: require('recast/parsers/babel-ts'), | ||
| }); | ||
|
|
||
| // List of functions to strip from the AST | ||
| const functionsToStrip = ['getServerSideProps', 'getStaticProps']; | ||
|
|
||
| // Remove the function from the list of functions to strip | ||
| const updateList = (functionName: string) => { | ||
| // Remove the function from the list of functions to strip | ||
| functionsToStrip.splice(functionsToStrip.indexOf(functionName), 1); | ||
| }; | ||
|
|
||
| // Traverse the AST and strip the functions | ||
| recast.visit(ast, { | ||
| // Visit the named export function expression | ||
| visitExportNamedDeclaration: function(path): boolean | void { | ||
| // Get the variable declaration from the AST | ||
| (path.node.declaration as VariableDeclaration)?.declarations?.forEach((declaration) => { | ||
| // Check if the function is in the list of functions to strip | ||
| if ( | ||
| 'id' in declaration && | ||
| 'name' in declaration.id && | ||
| typeof declaration.id.name === 'string' && | ||
| functionsToStrip.includes(declaration.id.name) | ||
| ) { | ||
| updateList(declaration.id.name); | ||
|
|
||
| // Strip the function from the AST | ||
| path.prune(); | ||
| } | ||
| }); | ||
|
|
||
| if (functionsToStrip.length === 0) { | ||
| // We have pruned all the functions we need to, so we can stop traversing the AST | ||
| return false; | ||
| } | ||
|
|
||
| // Continue traversing the AST | ||
| this.traverse(path); | ||
| }, | ||
| // Visit the named export function declaration | ||
| visitFunctionDeclaration: function(path): boolean | void { | ||
| // Check if the function is in the list of functions to strip | ||
| if ( | ||
| path.node.id && | ||
| 'name' in path.node.id && | ||
| typeof path.node.id.name === 'string' && | ||
| functionsToStrip.includes(path.node.id.name) | ||
| ) { | ||
| updateList(path.node.id.name); | ||
|
|
||
| // Strip the function from the AST | ||
| path.prune(); | ||
| } | ||
|
|
||
| if (functionsToStrip.length === 0) { | ||
| // We have pruned all the functions we need to, so we can stop traversing the AST | ||
| return false; | ||
| } | ||
|
|
||
| // Continue traversing the AST | ||
| this.traverse(path); | ||
| }, | ||
| }); | ||
|
|
||
| // Generate the output code | ||
| return recast.print(ast).code; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters