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

* fix duplicate lilbs in bundle

* fix app/static pathing for non-extensible builds

* oof, fix extensible app/static filepaths

* Resolve conflicting npm deps via `resolve.alias`

* add missing worker/main.js

* cleanup unused imports

* WIP, add list of original overridable deps

* prevent template extensibility vendor.js from treating baseline route files as deps in vendor.js

* fix irrelevant bundlesize declaration to pass CI

* drop test:max-file-size test from my-extended-retail-app

packages/my-extended-retail-app/package.json

@@ -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"
+  },
+  "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"
+  ]
 }

packages/my-extended-retail-app/pwa-kit-overrides/app/pages/home/index.jsx

@@ -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'
 
 // Project Components
 import Hero from 'retail-react-app/app/components/hero'
@@ -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'

packages/my-extended-retail-app/worker/main.js

@@ -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()
+)

packages/pwa-kit-dev/src/configs/webpack/config.js

@@ -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))
@@ -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.
@@ -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
@@ -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)
@@ -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}/`)
+                            ) {
                                 return false
                             }
                             return module?.context?.match?.(/(node_modules)|(packages\/.*\/dist)/)
@@ -310,7 +323,7 @@ const ruleForBabelLoader = (babelPlugins) => {
             : {exclude: /node_modules/}),
         use: [
             {
-                loader: findInProjectThenSDK('babel-loader'),
+                loader: findDepInStack('babel-loader'),
                 options: {
                     rootMode: 'upward',
                     cacheDirectory: true,

packages/template-retail-react-app/app/hooks/index.js

@@ -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'