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

Fix vendor.js inclusion of retail-react-app files #1198

Merged
merged 13 commits into from
May 18, 2023
Merged

Fix vendor.js inclusion of retail-react-app files #1198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0e147b2
fix duplicate lilbs in bundle
bfeister May 11, 2023
af2bc02
fix app/static pathing for non-extensible builds
bfeister May 12, 2023
75d78b1
oof, fix extensible app/static filepaths
bfeister May 15, 2023
c10d046
Resolve conflicting npm deps via `resolve.alias`
bfeister May 16, 2023
5b21cbc
Merge branch 'feature/template-extensibility-algo-refactor' into fix/…
bfeister May 16, 2023
e222a4b
add missing worker/main.js
bfeister May 16, 2023
a4766f4
cleanup unused imports
bfeister May 16, 2023
3c1fe47
Merge branch 'feature/template-extensibility-algo-refactor' into fix/…
bfeister May 17, 2023
4039e76
WIP, add list of original overridable deps
bfeister May 17, 2023
506ab19
prevent template extensibility vendor.js from treating baseline route…
bfeister May 17, 2023
6462752
fix irrelevant bundlesize declaration to pass CI
bfeister May 17, 2023
37980a8
Merge branch 'feature/template-extensibility-algo-refactor' into fix/…
bfeister May 17, 2023
00c3b54
drop test:max-file-size test from my-extended-retail-app
bfeister May 18, 2023
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
179 changes: 89 additions & 90 deletions packages/my-extended-retail-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,92 +1,91 @@
{
"name": "my-extended-retail-app",
"version": "2.8.0-dev",
"license": "See license in LICENSE",
"engines": {
"node": "^16.0.0 || ^18.0.0",
"npm": "^7.0.0 || ^8.0.0 || ^9.0.0"
},
"ccExtensibility": {
"extends": "retail-react-app",
"overridesDir": "pwa-kit-overrides"
},
"devDependencies": {
"@chakra-ui/icons": "^1.1.7",
"@chakra-ui/react": "^1.8.9",
"@chakra-ui/skip-nav": "^1.2.6",
"@chakra-ui/system": "^1.12.1",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@formatjs/cli": "^6.0.4",
"@lhci/cli": "^0.11.0",
"@loadable/component": "^5.15.3",
"@peculiar/webcrypto": "^1.4.2",
"@tanstack/react-query": "^4.0.10",
"@tanstack/react-query-devtools": "^4.29.1",
"@testing-library/dom": "^9.0.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^11.2.7",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^12.8.3",
"base64-arraybuffer": "^0.2.0",
"bundlesize2": "^0.0.31",
"card-validator": "^8.1.1",
"commerce-sdk-react-preview": "^2.8.0-dev",
"cross-env": "^5.2.1",
"cross-fetch": "^3.1.5",
"focus-visible": "^5.2.0",
"framer-motion": "^3.10.6",
"full-icu": "^1.5.0",
"helmet": "^4.6.0",
"jest-fetch-mock": "^2.1.2",
"js-cookie": "^3.0.1",
"jsonwebtoken": "^9.0.0",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"msw": "^1.2.1",
"nanoid": "^3.3.4",
"njwt": "^1.2.0",
"prop-types": "^15.8.1",
"pwa-kit-dev": "2.8.0-dev",
"pwa-kit-react-sdk": "2.8.0-dev",
"pwa-kit-runtime": "2.8.0-dev",
"query-string": "^7.1.3",
"raf": "^3.4.1",
"randomstring": "^1.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-hook-form": "^6.15.8",
"react-intl": "^5.25.1",
"react-router-dom": "^5.3.4",
"retail-react-app": "2.8.0-dev"
},
"peerDependencies": {
"@chakra-ui/system": "^1.12.1"
},
"scripts": {
"analyze-build": "cross-env MOBIFY_ANALYZE=true npm run build",
"build-translations": "npm run extract-default-translations && npm run compile-translations",
"compile-translations": "formatjs compile-folder --ast app/translations app/translations/compiled",
"compile-translations:pseudo": "formatjs compile --ast app/translations/en-US.json --out-file app/translations/compiled/en-XB.json --pseudo-locale en-XB",
"extract-default-translations": "formatjs extract 'app/**/*.{js,jsx}' --out-file app/translations/en-US.json --id-interpolation-pattern [sha512:contenthash:base64:6]",
"format": "pwa-kit-dev format \"**/*.{js,jsx}\"",
"lint": "pwa-kit-dev lint \"**/*.{js,jsx}\"",
"lint:fix": "npm run lint -- --fix",
"build": "npm run build-translations && pwa-kit-dev build",
"push": "npm run build && pwa-kit-dev push",
"save-credentials": "pwa-kit-dev save-credentials",
"start": "cross-env NODE_ICU_DATA=node_modules/full-icu pwa-kit-dev start",
"start:inspect": "npm run start -- --inspect",
"start:pseudolocale": "npm run extract-default-translations && npm run compile-translations:pseudo && cross-env USE_PSEUDOLOCALE=true npm run start",
"tail-logs": "pwa-kit-dev tail-logs",
"test": "pwa-kit-dev test",
"test:lighthouse": "cross-env NODE_ENV=production lhci autorun --config=tests/lighthouserc.js",
"test:max-file-size": "npm run build && bundlesize"
},
"browserslist": [
"iOS >= 9.0",
"Android >= 4.4.4",
"last 4 ChromeAndroid versions"
]
"name": "my-extended-retail-app",
"version": "2.8.0-dev",
"license": "See license in LICENSE",
"engines": {
"node": "^16.0.0 || ^18.0.0",
"npm": "^7.0.0 || ^8.0.0 || ^9.0.0"
},
"ccExtensibility": {
"extends": "retail-react-app",
"overridesDir": "pwa-kit-overrides"
},
"devDependencies": {
"@chakra-ui/icons": "^1.1.7",
"@chakra-ui/react": "^1.8.9",
"@chakra-ui/skip-nav": "^1.2.6",
"@chakra-ui/system": "^1.12.1",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@formatjs/cli": "^6.0.4",
"@lhci/cli": "^0.11.0",
"@loadable/component": "^5.15.3",
"@peculiar/webcrypto": "^1.4.2",
"@tanstack/react-query": "^4.0.10",
"@tanstack/react-query-devtools": "^4.29.1",
"@testing-library/dom": "^9.0.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^11.2.7",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^12.8.3",
"base64-arraybuffer": "^0.2.0",
"bundlesize2": "^0.0.31",
"card-validator": "^8.1.1",
"commerce-sdk-react-preview": "^2.8.0-dev",
"cross-env": "^5.2.1",
"cross-fetch": "^3.1.5",
"focus-visible": "^5.2.0",
"framer-motion": "^3.10.6",
"full-icu": "^1.5.0",
"helmet": "^4.6.0",
"jest-fetch-mock": "^2.1.2",
"js-cookie": "^3.0.1",
"jsonwebtoken": "^9.0.0",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"msw": "^1.2.1",
"nanoid": "^3.3.4",
"njwt": "^1.2.0",
"prop-types": "^15.8.1",
"pwa-kit-dev": "2.8.0-dev",
"pwa-kit-react-sdk": "2.8.0-dev",
"pwa-kit-runtime": "2.8.0-dev",
"query-string": "^7.1.3",
"raf": "^3.4.1",
"randomstring": "^1.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-hook-form": "^6.15.8",
"react-intl": "^5.25.1",
"react-router-dom": "^5.3.4",
"retail-react-app": "2.8.0-dev"
},
"peerDependencies": {
"@chakra-ui/system": "^1.12.1"
},
kevinxh marked this conversation as resolved.
Show resolved Hide resolved
"scripts": {
"analyze-build": "cross-env MOBIFY_ANALYZE=true npm run build",
"build-translations": "npm run extract-default-translations && npm run compile-translations",
"compile-translations": "formatjs compile-folder --ast app/translations app/translations/compiled",
"compile-translations:pseudo": "formatjs compile --ast app/translations/en-US.json --out-file app/translations/compiled/en-XB.json --pseudo-locale en-XB",
"extract-default-translations": "formatjs extract 'app/**/*.{js,jsx}' --out-file app/translations/en-US.json --id-interpolation-pattern [sha512:contenthash:base64:6]",
"format": "pwa-kit-dev format \"**/*.{js,jsx}\"",
"lint": "pwa-kit-dev lint \"**/*.{js,jsx}\"",
"lint:fix": "npm run lint -- --fix",
"build": "npm run build-translations && pwa-kit-dev build",
"push": "npm run build && pwa-kit-dev push",
"save-credentials": "pwa-kit-dev save-credentials",
"start": "cross-env NODE_ICU_DATA=node_modules/full-icu pwa-kit-dev start",
"start:inspect": "npm run start -- --inspect",
"start:pseudolocale": "npm run extract-default-translations && npm run compile-translations:pseudo && cross-env USE_PSEUDOLOCALE=true npm run start",
"tail-logs": "pwa-kit-dev tail-logs",
"test": "pwa-kit-dev test",
"test:lighthouse": "cross-env NODE_ENV=production lhci autorun --config=tests/lighthouserc.js"
},
"browserslist": [
"iOS >= 9.0",
"Android >= 4.4.4",
"last 4 ChromeAndroid versions"
]
}
14 changes: 1 addition & 13 deletions packages/my-extended-retail-app/pwa-kit-overrides/app/pages/home/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,7 @@ import {useIntl, FormattedMessage} from 'react-intl'
import {useLocation} from 'react-router-dom'

// Components
import {
Box,
Button,
SimpleGrid,
HStack,
VStack,
Text,
Flex,
Stack,
Container,
Link
} from '@chakra-ui/react'
import {Box, Button, SimpleGrid, Stack, Link} from '@chakra-ui/react'
bfeister marked this conversation as resolved.
Show resolved Hide resolved

// Project Components
import Hero from 'retail-react-app/app/components/hero'
Expand All @@ -30,7 +19,6 @@ import ProductScroller from 'retail-react-app/app/components/product-scroller'

// Others
import {getAssetUrl} from 'pwa-kit-react-sdk/ssr/universal/utils'
import {heroFeatures, features} from 'retail-react-app/app/pages/home/data'

//Hooks
import useEinstein from 'retail-react-app/app/hooks/use-einstein'
Expand Down
36 changes: 36 additions & 0 deletions packages/my-extended-retail-app/worker/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/*
* Copyright (c) 2023, salesforce.com, inc.
* All rights reserved.
* SPDX-License-Identifier: BSD-3-Clause
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
*/

/* global workbox, DEBUG */
/* istanbul ignore file */
/**
* This is your project's Service Worker. For information on customizing your
* Service Worker, see:
*
* - https://developers.google.com/web/fundamentals/primers/service-workers/
* - https://developers.google.com/web/tools/workbox/
*/

self.importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js')

workbox.setConfig({debug: DEBUG})

// Place your Workbox route configurations here, eg:
// workbox.routing.registerRoute(...)

// Never cache dev-server internals.
workbox.routing.registerRoute(
/^http:\/\/localhost:3000\/__mrt/,
new workbox.strategies.NetworkOnly()
)

// Minimum viable configuration to get offline mode.
workbox.routing.registerRoute(/^http:\/\/localhost:3000/, new workbox.strategies.NetworkFirst())
workbox.routing.registerRoute(
/^https:\/\/.+\.mobify-storefront.com/,
new workbox.strategies.NetworkFirst()
)
67 changes: 40 additions & 27 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 @@ -51,6 +51,30 @@ export const EXT_OVERRIDES_DIR_NO_SLASH = EXT_OVERRIDES_DIR?.replace(/^\//, '')
export const EXT_EXTENDS = pkg?.ccExtensibility?.extends
export const EXT_EXTENDABLE = pkg?.ccExtensibility?.extendable

// TODO: can these be handled in package.json as peerDependencies?
// https://salesforce-internal.slack.com/archives/C0DKK1FJS/p1672939909212589

// due to to how the sdks work and the potential of these npm deps coming
// from multiple places, we need to force them to one place where they're found
export const DEPS_TO_DEDUPE = [
'babel-runtime',
'@tanstack/react-query',
'@loadable/component',
'@loadable/server',
'@loadable/webpack-plugin',
'svg-sprite-loader',
'react',
'react-router-dom',
'react-dom',
'react-helmet',
'webpack-hot-middleware',
'react-intl',
'@chakra-ui/icons',
'@chakra-ui/react',
'@chakra-ui/skip-nav',
'@emotion/react'
]

if (EXT_EXTENDABLE && EXT_EXTENDS) {
const extendsAsArr = Array.isArray(EXT_EXTENDS) ? EXT_EXTENDS : [EXT_EXTENDS]
const conflicts = extendsAsArr.filter((x) => EXT_EXTENDABLE?.includes(x))
Expand Down Expand Up @@ -93,7 +117,7 @@ const getAppEntryPoint = () => {
return EXT_OVERRIDES_DIR + '/app/main'
}

const findInProjectThenSDK = (pkg) => {
const findDepInStack = (pkg) => {
// Look for the SDK node_modules in two places because in CI,
// pwa-kit-dev is published under a 'dist' directory, which
// changes this file's location relative to the package root.
Expand Down Expand Up @@ -169,28 +193,11 @@ const baseConfig = (target) => {
: {}),
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
alias: {
'babel-runtime': findInProjectThenSDK('babel-runtime'),
'@tanstack/react-query': findInProjectThenSDK('@tanstack/react-query'),
'@loadable/component': findInProjectThenSDK('@loadable/component'),
'@loadable/server': findInProjectThenSDK('@loadable/server'),
'@loadable/webpack-plugin': findInProjectThenSDK(
'@loadable/webpack-plugin'
...Object.assign(
...DEPS_TO_DEDUPE.map((dep) => ({
[dep]: findDepInStack(dep)
}))
),
'svg-sprite-loader': findInProjectThenSDK('svg-sprite-loader'),
react: findInProjectThenSDK('react'),
'react-router-dom': findInProjectThenSDK('react-router-dom'),
'react-dom': findInProjectThenSDK('react-dom'),
'react-helmet': findInProjectThenSDK('react-helmet'),
'webpack-hot-middleware': findInProjectThenSDK('webpack-hot-middleware'),

// TODO: these need to be declared in package.json as peerDependencies ?
// https://salesforce-internal.slack.com/archives/C0DKK1FJS/p1672939909212589
'react-intl': findInProjectThenSDK('react-intl'),
'@chakra-ui/icons': findInProjectThenSDK('@chakra-ui/icons'),
'@chakra-ui/react': findInProjectThenSDK('@chakra-ui/react'),
'@chakra-ui/skip-nav': findInProjectThenSDK('@chakra-ui/skip-nav'),
'@emotion/react': findInProjectThenSDK('@emotion/react'),
'@emotion/styled': findInProjectThenSDK('@emotion/styled'),
...(EXT_OVERRIDES_DIR && EXT_EXTENDS
? Object.assign(
// NOTE: when an array of `extends` dirs are accepted, don't coerce here
Expand Down Expand Up @@ -234,17 +241,17 @@ const baseConfig = (target) => {
ruleForBabelLoader(),
target === 'node' && {
test: /\.svg$/,
loader: findInProjectThenSDK('svg-sprite-loader')
loader: findDepInStack('svg-sprite-loader')
},
target === 'web' && {
test: /\.svg$/,
loader: findInProjectThenSDK('ignore-loader')
loader: findDepInStack('ignore-loader')
},
{
test: /\.html$/,
exclude: /node_modules/,
use: {
loader: findInProjectThenSDK('html-loader')
loader: findDepInStack('html-loader')
}
}
].filter(Boolean)
Expand Down Expand Up @@ -285,8 +292,14 @@ const withChunking = (config) => {
// 2. The package is one of the monorepo packages.
// This is for local development to ensure the bundle
// composition is the same as a production build
// 3. If extending another template, don't include the
// baseline route files in vendor.js
test: (module) => {
if (module?.context?.match(makeRegExp(`${sysPath}/node_modules`))) {
if (
EXT_EXTENDS &&
EXT_OVERRIDES_DIR &&
module?.context?.includes(`/${EXT_EXTENDS}/`)
Copy link
Collaborator

Choose a reason for hiding this comment

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

It looks like EXT_EXTENDS is an array, do you mean EXT_OVERRIDES_DIR? also, why do you need the leading and trailing slash?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

slashes are just to reduce risk of name collision since we know that's the exact npm dependency name.

EXT_EXTENDS is not an array, we coerce it to one in other places

) {
return false
}
return module?.context?.match?.(/(node_modules)|(packages\/.*\/dist)/)
Expand All @@ -310,7 +323,7 @@ const ruleForBabelLoader = (babelPlugins) => {
: {exclude: /node_modules/}),
use: [
{
loader: findInProjectThenSDK('babel-loader'),
loader: findDepInStack('babel-loader'),
options: {
rootMode: 'upward',
cacheDirectory: true,
Expand Down
18 changes: 9 additions & 9 deletions packages/template-retail-react-app/app/hooks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
*/

/* istanbul ignore file */
export {useSearchParams} from './use-search-params'
export {useLimitUrls} from './use-limit-urls'
export {usePageUrls} from './use-page-urls'
export {useSortUrls} from './use-sort-urls'
export {useVariant} from './use-variant'
export {useVariationAttributes} from './use-variation-attributes'
export {useVariationParams} from './use-variation-params'
export {useDerivedProduct} from './use-derived-product'
export {useCurrency} from './use-currency'
export {useSearchParams} from 'retail-react-app/app/hooks/use-search-params'
export {useLimitUrls} from 'retail-react-app/app/hooks/use-limit-urls'
export {usePageUrls} from 'retail-react-app/app/hooks/use-page-urls'
export {useSortUrls} from 'retail-react-app/app/hooks/use-sort-urls'
export {useVariant} from 'retail-react-app/app/hooks/use-variant'
export {useVariationAttributes} from 'retail-react-app/app/hooks/use-variation-attributes'
export {useVariationParams} from 'retail-react-app/app/hooks/use-variation-params'
export {useDerivedProduct} from 'retail-react-app/app/hooks/use-derived-product'
export {useCurrency} from 'retail-react-app/app/hooks/use-currency'