Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[App Extensibility ⚙️] Fix Babel configuration ignore node_modules folder (@W-17373534@) #2228

Merged
merged 15 commits into from
Jan 30, 2025
Merged

[App Extensibility ⚙️] Fix Babel configuration ignore node_modules folder (@W-17373534@) #2228

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b9f3a7e
Babel ignore node_modules files
adamraya Jan 24, 2025
2230d17
Revert "[App Extensibility ⚙️] Fix Slow Dev Server (@W-17131556@) (#2…
adamraya Jan 28, 2025
0401f10
WIP Add debug logs
adamraya Jan 28, 2025
c099e68
Merge branch 'feature/extensibility-v2' into W-17373534-ignore-node_m…
adamraya Jan 28, 2025
d5de6f6
WIP babel-config only
adamraya Jan 28, 2025
049e826
WIP restore pwa-kit-dev start command
adamraya Jan 28, 2025
9a491a9
WIP babel-config ignore
adamraya Jan 28, 2025
9e3d3b8
Clean up
adamraya Jan 28, 2025
2f1c77b
Fix Babel config
adamraya Jan 29, 2025
90d0357
Clean up
adamraya Jan 29, 2025
bf4968d
lint
adamraya Jan 29, 2025
394f9b3
Remove Babel ignore flag
adamraya Jan 29, 2025
e60e441
PR Feedback
adamraya Jan 29, 2025
64e45c7
Clean up testing code
adamraya Jan 30, 2025
645f65d
Re-add tests
adamraya Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/commerce-sdk-react/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions packages/extension-chakra-store-locator/src/setup-server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@ import extensionMeta from '../extension-meta.json'
class StoreLocatorExtension extends ApplicationExtension<Config> {
static readonly id = extensionMeta.id
extendApp(app: Application): Application {
// TODO: Code added for testing proposes remove before merging
app.get('/sample', (req, res) => {
console.log('StarterExtension extendApp GET /sample')
res.send(`<p>Hello starter extension!</p>`)
})

return app
}
}
Expand Down
19 changes: 18 additions & 1 deletion packages/pwa-kit-dev/src/configs/babel/babel-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,22 @@ export default {
presets: [require('@babel/preset-env'), require('@babel/preset-react')],
plugins: [require('babel-plugin-dynamic-import-node-babel-7')]
}
}
},
ignore: [
function (filepath) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL you can pass a function into babel config ignore :-o. Any doc link about this?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's basically creating an inline Babel plugin. See https://babeljs.io/docs/plugins#plugin-development

// Ignore node_modules, but include @salesforce/extension-* and pwa-kit-extension-sdk
if (/node_modules/.test(filepath)) {
// Only ignore non-extension @salesforce packages
if (
/node_modules\/(?!@salesforce\/pwa-kit-extension-sdk|@salesforce\/extension-)/.test(
filepath
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unblocking comment, let's look a bit further in the future when partners start to create their own extensions. Do they have to follow the pattern of @salesforce/extension-* or just extension-* or their brand name like this @company/extension?
If it is more than @salesforce/extension-* we may want to allow other pattern here too to avoid bug later down the road.

)
) {
return true
}
return false
}
return false
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I asked AI to invert the logic to get rid of the nested conditions. Here is the output i got:

function (filepath) {
    // Return false if it's an allowed extension package
    if (/node_modules\/@salesforce\/(pwa-kit-extension-sdk|extension-)/.test(filepath)) {
        return false;
    }
    
    // Return true if it's in node_modules (excluding allowed packages handled above)
    if (/node_modules/.test(filepath)) {
        return true;
    }
    
    // Return false for all other files
    return false;
}

]
}
2 changes: 2 additions & 0 deletions packages/pwa-kit-dev/src/configs/webpack/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,8 @@ const ruleForBabelLoader = (babelPlugins) => {
id: 'babel-loader',
test: /(\.js(x?)|\.ts(x?))$/,
// NOTE: Because our extensions are just folders containing source code, we need to ensure that the babel-loader processes them.
// By default babel doesn't process files in "node_modules" folder, so here we will ensure they are included.
exclude: /node_modules\/(?!(@?[^/]+\/)?extension-)[^/]+\/.*$/i,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

normally I wouldn't advocate to document the "what", only the "why"s.

But I feel like when it comes to regexes, we should add a quick explanation of what this regex aims to do. Because it's hard to tell unless you copy and paste the regex to a tool like https://regexr.com/

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i.e. This regex exclude everything in node_modules, but node_modules/extensions-*/ folders

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dumb question, we have exclude here and ignore in the babel config? How are they working with each other? I recall they can't be used on a same directory like node_modules because exclude is exclusive to the folder and will override ignore.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are different configurations that don't work with each other. One is the Webpack configuration for babel-loader, and the other is the Babel configuration for babel-node, where we cannot use the exclude option. They are used in separate stages.

use: [
{
loader: findDepInStack('babel-loader'),
Expand Down
22 changes: 12 additions & 10 deletions packages/pwa-kit-extension-sdk/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

87 changes: 0 additions & 87 deletions packages/pwa-kit-extension-sdk/src/configs/babel/utils.test.ts
View file
Open in desktop

This file was deleted.

14 changes: 6 additions & 8 deletions packages/pwa-kit-extension-sdk/src/configs/babel/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ import {getConfiguredExtensions} from '../../shared/utils'
/**
* Constants used for building Babel extensibility arguments:
*
* IGNORE_PATH: Provides a placeholder path that does not exist, used in Babel's `--ignore`
* option to prevent processing of any unintended files by specifying a path that cannot match
* any actual file. This effectively disables Babel's ignore behavior when no other paths are specified.
*
* SERVER_PATH: Absolute path to the server entry point (`build-remote-server.js`) within the
* `@salesforce/pwa-kit-runtime` package. Required for Babel processing to ensure that server-side
* code, especially for SSR, is correctly transpiled as part of the extensibility setup.
Expand All @@ -25,7 +21,6 @@ import {getConfiguredExtensions} from '../../shared/utils'
* if no actual extensions are added.
*/
const NODE_MODULES_PATH = 'node_modules'
const IGNORE_PATH = `${NODE_MODULES_PATH}/does_not_exist`
const SERVER_PATH = `${NODE_MODULES_PATH}/@salesforce/pwa-kit-runtime/ssr/server/build-remote-server.js`
const PLACEHOLDER_PATH = `${NODE_MODULES_PATH}/@salesforce/pwa-kit-extension-sdk/express/placeholders/application-extensions.js`

Expand All @@ -42,12 +37,15 @@ export const buildBabelExtensibilityArgs = (config: any) => {

const extensionSrcPaths =
extensions.length > 0
? extensions.map(([packageName]) =>
fse.realpathSync(p.resolve(`${NODE_MODULES_PATH}/${packageName}/src`))
? extensions.map(
([packageName]) =>
fse.realpathSync(p.resolve(`${NODE_MODULES_PATH}/${packageName}/src`)) + '/**'
)
: []

const extensionsPathsStr = extensionSrcPaths.length > 0 ? `,${extensionSrcPaths.join(',')}` : ''

return `--ignore "${IGNORE_PATH}" --only "app/**,${serverPath},${placeHolderPath}${extensionsPathsStr}/**"`
const babelArgs = `--only "app/**,${serverPath},${placeHolderPath}${extensionsPathsStr}"`

return babelArgs
}
4 changes: 2 additions & 2 deletions packages/template-retail-react-app/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

38 changes: 37 additions & 1 deletion packages/template-typescript-minimal/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@loadable/component": "^5.15.3",
"@salesforce/extension-chakra-store-locator": "^0.1.0-extensibility-preview.3",
"@salesforce/pwa-kit-dev": "4.0.0-extensibility-preview.3",
"@salesforce/pwa-kit-extension-sdk": "4.0.0-extensibility-preview.3",
"@salesforce/pwa-kit-react-sdk": "4.0.0-extensibility-preview.3",
Expand All @@ -47,7 +48,42 @@
},
"mobify": {
"app": {
"extensions": []
"extensions": [
[
"@salesforce/extension-chakra-store-locator",
{
"enabled": true,
"path": "/store-locator",
"radius": 100,
"radiusUnit": "km",
"defaultPageSize": 10,
"defaultPostalCode": "10178",
"defaultCountry": "Germany",
"defaultCountryCode": "DE",
"supportedCountries": [
{
"countryCode": "US",
"countryName": "United States"
},
{
"countryCode": "DE",
"countryName": "Germany"
}
],
"commerceApi": {
"proxyPath": "/mobify/proxy/api",
"parameters": {
"shortCode": "8o7m175y",
"clientId": "c9c45bfd-0ed3-4aa2-9971-40f88962b836",
"organizationId": "f_ecom_zzrf_001",
"siteId": "RefArchGlobal",
"locale": "en-GB",
"currency": "USD"
}
}
}
]
]
},
"ssrEnabled": true,
"ssrOnly": [
Expand Down
Loading