[feature] Rename V4 app dir to => src @W-18895152@

.github/actions/changelog-check/action.yml

@@ -55,7 +55,7 @@ runs:
         fi
         echo "Changed files: $CHANGED_FILES"
 
-        PUBLIC_PACKAGES=("commerce-sdk-react" "pwa-kit-create-app" "pwa-kit-dev" "pwa-kit-react-sdk" "pwa-kit-runtime" "template-retail-react-app")
+        PUBLIC_PACKAGES=("commerce-sdk-react" "pwa-kit-create-app" "pwa-kit-dev" "pwa-kit-react-sdk" "pwa-kit-runtime")
 
         for PACKAGE in "${PUBLIC_PACKAGES[@]}"; do
           if echo "$CHANGED_FILES" | grep -iq "^packages/$PACKAGE/"; then

.github/workflows/e2e.yml

@@ -110,7 +110,7 @@ jobs:
 
       - name: Get Template Version
         run: |-
-          version=`jq -r ".version" packages/template-retail-react-app/package.json`
+          version=`jq -r ".version" packages/template-chakra-storefront/package.json`
           echo "retail_app_template_version=$version" >> "$GITHUB_ENV"
 
       - name: Generate Retail App Without Extensibility
@@ -227,7 +227,7 @@ jobs:
 
       - name: Get Template Version
         run: |-
-          version=`jq -r ".version" packages/template-retail-react-app/package.json`
+          version=`jq -r ".version" packages/template-chakra-storefront/package.json`
           echo "retail_app_template_version=$version" >> "$GITHUB_ENV"
 
       - name: Generate Retail App With Extensibility
@@ -342,7 +342,7 @@ jobs:
 
       - name: Get Template Version
         run: |-
-          version=`jq -r ".version" packages/template-retail-react-app/package.json`
+          version=`jq -r ".version" packages/template-chakra-storefront/package.json`
           echo "retail_app_template_version=$version" >> "$GITHUB_ENV"
 
       - name: Generate Retail App Private Client

.github/workflows/nightly_release.yml

@@ -33,7 +33,7 @@ jobs:
 
       - name: Get retail-react-app version
         run: |-
-          version=`jq -r ".version" packages/template-retail-react-app/package.json | cut -d "-" -f 1`
+          version=`jq -r ".version" packages/template-chakra-storefront/package.json | cut -d "-" -f 1`
           echo "retail_app_version_base=$version" >> "$GITHUB_ENV"
 
       - name: Get commerce-sdk-react version

.github/workflows/setup_template_retail_react_app_manual.yml

@@ -3,7 +3,7 @@ on:
   workflow_dispatch:
 
 jobs:
-  setup-template-retail-react-app:
+  setup-template-chakra-storefront:
     runs-on: ubuntu-latest
     steps:
       - name: Initialize
@@ -45,6 +45,6 @@ jobs:
         with:
           project_id: ${{ env.PROJECT_ID }}
           target_id: ${{ env.MRT_TARGET_ID }}
-          project_dir: "./packages/template-retail-react-app"
+          project_dir: "./packages/template-chakra-storefront"
           mobify_user: ${{ secrets.MOBIFY_CLIENT_USER }}
           mobify_api_key: ${{ secrets.MOBIFY_CLIENT_API_KEY }}

.github/workflows/test.yml

@@ -118,7 +118,7 @@ jobs:
         if: env.IS_NOT_FORK == 'true' && env.IS_MRT_NODE == 'true' && env.DEVELOP == 'true'
         uses: "./.github/actions/push_to_mrt"
         with:
-          CWD: "./packages/template-retail-react-app"
+          CWD: "./packages/template-chakra-storefront"
           TARGET: staging
 
       - name: Push Bundle to MRT (Commerce SDK React)

.prettierignore

@@ -2,4 +2,4 @@ build
 docs
 coverage
 scripts/generator/assets
-app/static
+static

CONTRIBUTING.md

@@ -16,7 +16,7 @@ This repository is a [monorepo](https://en.wikipedia.org/wiki/Monorepo) that inc
 - `pwa-kit-runtime`: A package that contains runtime environments for applications to run on Managed Runtime
 - `template-express-minimal`: A project template that can be used as a starting point for a generic Express application (does not include React)
 - `template-mrt-reference-app`: A project template that is used by the Managed Runtime team to test platform features
-- `template-retail-react-app`: A project template that can be used as a starting point for a full retail storefront
+- `template-chakra-storefront`: A project template that can be used as a starting point for a full retail storefront
 - `template-typescript-minimal`: A project template with TypeScript support that can be used as a starting point for React projects
 - `test-commerce-sdk-react`: A project that is used to test `commerce-sdk-react` and demonstrate usage of the library
 

README.md

@@ -18,7 +18,7 @@
 <br /><br />
 The PWA Kit is a storefront technology for headless commerce using Salesforce Commerce APIs and React. It provides front-end developers with a more flexible and agile approach to build and maintain modern shopping experiences.
 <br/><br/>
-<img alt="pwa-kit banner" src="https://raw.githubusercontent.com/SalesforceCommerceCloud/pwa-kit/develop/packages/template-retail-react-app/app/static/img/hero.png" style="width: 700px; height:auto;">
+<img alt="pwa-kit banner" src="https://raw.githubusercontent.com/SalesforceCommerceCloud/pwa-kit/develop/packages/template-chakra-storefront/static/img/hero.png" style="width: 700px; height:auto;">
 
 </div>
 
@@ -55,7 +55,7 @@ npm run push -- -m "Message to help you recognize this bundle"
 
 ## 🌍 Localization
 
-See the [Localization README.md](./packages/template-retail-react-app/translations/README.md) for important setup instructions for localization.
+See the [Localization README.md](./packages/template-chakra-storefront/static/translations/README.md) for important setup instructions for localization.
 
 ## ⚠️ License Information
 

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,4 +1,5 @@
 ## v3.3.0-extensibility-preview.5 (May 06, 2025)
+- Migrate directory structure from `app/*` to `src/*` [#2693](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2693)
 
 ## v3.3.0-extensibility-preview.4 (Feb 12, 2025)
 - Add `ServerContext` type for `useServerContext` hook [#2239](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2239)

packages/commerce-sdk-react/README.md

@@ -48,7 +48,7 @@ npm install @salesforce/commerce-sdk-react @tanstack/react-query
 To integrate this library with your PWA Kit application you can use the `CommerceApiProvider` directly assuming that you use the `withReactQuery` higher order component to wrap your `AppConfig` component. Below is a snippet of how this is accomplished.
 
 ```jsx
-// app/components/_app-config/index.jsx
+// src/components/_app-config/index.jsx
 
 import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
 import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/components/with-react-query'

packages/extension-chakra-store-locator/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@salesforce/extension-chakra-store-locator",
   "version": "0.1.0-extensibility-preview.5",
+  "private": true,
   "bugs": {
     "url": "https://github.com/SalesforceCommerceCloud/pwa-kit/issues"
   },
@@ -13,7 +14,6 @@
   "scripts": {
     "lint": "npm run lint:js",
     "lint:fix": "npm run lint:js -- --fix",
-    "test": "pwa-kit-dev test",
     "lint:js": "pwa-kit-dev lint \"**/*.{js,jsx,ts,tsx}\"",
     "typecheck": "tsc --noEmit"
   },

packages/pwa-kit-create-app/CHANGELOG.md

@@ -1,4 +1,5 @@
 ## 4.0.0-extensibility-preview.5
+- Migrate directory structure from `app/*` to `src/*` [#2693](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2693)
 - Deprecate V3 Extensibility and experimental V4 Extensibility (#2573)
 - Move extensibility logic to generator (#2573)
 

packages/pwa-kit-create-app/assets/bootstrap/js/README.MD

@@ -33,7 +33,7 @@ This version of the application uses [Template Extensibility](https://developer.
 
 ## 🌍 Localization
 
-See the [Localization README.md](./packages/template-retail-react-app/translations/README.md) for important setup instructions for localization.
+See the [Localization README.md](./packages/template-chakra-storefront/static/translations/README.md) for important setup instructions for localization.
 
 ## 📖 Documentation
 

packages/pwa-kit-dev/CHANGELOG.md

@@ -1,5 +1,7 @@
 ## v4.0.0-extensibility-preview.5 (May 06, 2025)
 
+-   Migrate directory structure from `app/*` to `src/*` [#2693](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2693)
+
 ## v3.10.0-dev (Feb 18, 2025)
 
 -   Support source map for both client and server on MRT [#240](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2240)

packages/pwa-kit-dev/bin/pwa-kit-dev.js

@@ -60,7 +60,7 @@ const getProjectName = async () => {
 }
 
 const getAppEntrypoint = () => {
-    return p.join(process.cwd(), 'app', 'ssr.js')
+    return p.join(process.cwd(), 'src', 'ssr.js')
 }
 
 const main = async () => {

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

@@ -92,9 +92,9 @@ const entryPointExists = (segments) => {
     return false
 }
 
-const getAppEntryPoint = () => './app/main'
+const getAppEntryPoint = () => './src/main'
 
-const getServerEntryPoint = () => './app/ssr.js'
+const getServerEntryPoint = () => './src/ssr.js'
 
 const getPublicPathEntryPoint = () => {
     return resolve(
@@ -356,7 +356,7 @@ const enableReactRefresh = (config) => {
 }
 
 const client =
-    entryPointExists(['app', 'main']) &&
+    entryPointExists(['src', 'main']) &&
     baseConfig('web')
         .extend(withChunking)
         .extend((config) => {
@@ -377,7 +377,7 @@ const client =
                     new LoadablePlugin({writeToDisk: true}),
                     analyzeBundle && getBundleAnalyzerPlugin(CLIENT)
                 ].filter(Boolean),
-                // Hide the performance hints, since we already have a similar `bundlesize` check in `template-retail-react-app` package
+                // Hide the performance hints, since we already have a similar `bundlesize` check in `template-chakra-storefront` package
                 performance: {
                     hints: false
                 }
@@ -396,7 +396,7 @@ const clientOptional = baseConfig('web')
             ...config,
             name: CLIENT_OPTIONAL,
             entry: {
-                ...optional('loader', resolve(projectDir, 'app', 'loader.js')),
+                ...optional('loader', resolve(projectDir, 'src', 'loader.js')),
                 ...optional('worker', resolve(projectDir, 'worker', 'main.js')),
                 ...optional('fetch-polyfill', resolve(projectDir, 'node_modules', 'whatwg-fetch'))
             },
@@ -482,13 +482,13 @@ const ssr = (() => {
 })()
 
 const requestProcessor =
-    entryPointExists(['app', 'request-processor']) &&
+    entryPointExists(['src', 'request-processor']) &&
     baseConfig('node')
         .extend((config) => {
             return {
                 ...config,
                 name: REQUEST_PROCESSOR,
-                entry: './app/request-processor.js',
+                entry: './src/request-processor.js',
                 output: {
                     path: buildDir,
                     filename: 'request-processor.js',

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

@@ -26,7 +26,7 @@ const getOverridePath = (relativePath) => {
               'pwa-kit-react-sdk',
               'ssr',
               'universal',
-              ...relativePath.filter((item) => item !== 'app')
+              ...relativePath.filter((item) => item !== 'src')
           )
 }
 
@@ -41,23 +41,23 @@ export const sdkReplacementPlugin = () => {
     const overridables = [
         {
             path: makeRegExp('pwa-kit-react-sdk(/dist)?/ssr/universal/components/_app-config$'),
-            newPath: getOverridePath(['app', 'components', '_app-config', 'index'])
+            newPath: getOverridePath(['src', 'components', '_app-config', 'index'])
         },
         {
             path: makeRegExp('pwa-kit-react-sdk(/dist)?/ssr/universal/components/_document$'),
-            newPath: getOverridePath(['app', 'components', '_document', 'index'])
+            newPath: getOverridePath(['src', 'components', '_document', 'index'])
         },
         {
             path: makeRegExp('pwa-kit-react-sdk(/dist)?/ssr/universal/components/_app$'),
-            newPath: getOverridePath(['app', 'components', '_app', 'index'])
+            newPath: getOverridePath(['src', 'components', '_app', 'index'])
         },
         {
             path: makeRegExp('pwa-kit-react-sdk(/dist)?/ssr/universal/components/_error$'),
-            newPath: getOverridePath(['app', 'components', '_error', 'index'])
+            newPath: getOverridePath(['src', 'components', '_error', 'index'])
         },
         {
             path: makeRegExp('pwa-kit-react-sdk(/dist)?/ssr/universal/routes$'),
-            newPath: getOverridePath(['app', 'routes'])
+            newPath: getOverridePath(['src', 'routes'])
         }
     ]
 

packages/pwa-kit-dev/src/ssr/server/build-dev-server.js

@@ -253,10 +253,10 @@ export const DevServerMixin = {
         // Warning: Ugly part of the Bundle spec that we need to maintain.
         //
         // This function assumes that an SDK build step will copy all
-        // non-webpacked assets from the 'app' dir to the 'build' dir.
+        // non-webpacked assets from the 'src' dir to the 'build' dir.
         //
         // If you look carefully through the history, this has never
-        // been true though – assets get copied from app/static to
+        // been true though – assets get copied from src/static to
         // build/static but this isn't really clear from the API.
         //
         // To see where those assets get copied, see here:
@@ -270,7 +270,7 @@ export const DevServerMixin = {
         // https://salesforce-internal.slack.com/archives/C8YDDMKFZ/p1677793769255659?thread_ts=1677791840.174309&cid=C8YDDMKFZ
 
         return (req, res) => {
-            const baseDir = path.resolve(req.app.options.projectDir, 'app')
+            const baseDir = path.resolve(req.app.options.projectDir, 'src')
             return this._serveStaticFile(req, res, baseDir, filePath, opts)
         }
     },

packages/pwa-kit-dev/src/ssr/server/build-dev-server.test.js

@@ -553,7 +553,7 @@ describe('DevServer persistent caching support', () => {
                 res.status(status)
                 res.setHeader('content-type', 'application/javascript')
                 res.setHeader('content-encoding', 'gzip')
-                res.send(zlib.gzipSync(fse.readFileSync(path.join(testFixtures, 'app', 'main.js'))))
+                res.send(zlib.gzipSync(fse.readFileSync(path.join(testFixtures, 'src', 'main.js'))))
                 break
 
             case 'compressed-responses-test':

packages/pwa-kit-dev/src/utils/script-utils.ts

@@ -137,7 +137,7 @@ interface DependencyTree {
  * @returns A DependencyTree with the versions of all dependencies
  */
 export const getProjectDependencyTree = async (): Promise<DependencyTree | null> => {
-    // When executing this inside template-retail-react-app, the output of `npm ls` exceeds the
+    // When executing this inside template-chakra-storefont, the output of `npm ls` exceeds the
     // max buffer size that child_process can handle, so we can't use that directly. The max string
     // size is much larger, so writing/reading a temp file is a functional workaround.
     const tmpDir = await mkdtemp(path.join(os.tmpdir(), 'pwa-kit-dev-'))

packages/template-chakra-storefront/CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.1.0-extensibility-preview.5
+- Migrate directory structure from `app/*` to `src/*` [#2693](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2693)
+
 ## 0.1.0-extensibility-preview.4
 - Fix hreflang alternate links [#2269](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2269)
 - PDP / PLP: Add page meta data tags that have been defined in BM [#2232](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2232)

packages/template-chakra-storefront/jest.config.js

@@ -22,7 +22,7 @@ module.exports = {
     },
     setupFilesAfterEnv: [path.join(__dirname, 'jest-setup.js')],
     collectCoverageFrom: [
-        'srcpages/**/*.{js,jsx}',
+        'src/pages/**/*.{js,jsx}',
         'src/components/**/*.{js,jsx}',
         'src/hooks/**/*.{js,jsx}',
         'src/utils/**/*.{js,jsx}',

packages/template-chakra-storefront/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@salesforce/chakra-storefront",
   "version": "0.1.0-extensibility-preview.5",
+  "private": true,
   "bugs": {
     "url": "https://github.com/SalesforceCommerceCloud/pwa-kit/issues"
   },

packages/template-chakra-storefront/app/components/_app/index.jsx → packages/template-chakra-storefront/src/components/_app/index.jsx

@@ -162,7 +162,7 @@ const App = (props) => {
 
     // Fetch the translation message data using the target locale.
     const {data: messages} = useQuery({
-        queryKey: ['app', 'translations', 'messages', targetLocale],
+        queryKey: ['static', 'translations', 'messages', targetLocale],
         queryFn: () => {
             if (is404ForMissingTranslationFile) {
                 // Return early to prevent an infinite loop
@@ -305,7 +305,7 @@ const App = (props) => {
                     locale={targetLocale}
                     messages={messages}
                     // For react-intl, the _default locale_ refers to the locale that the inline `defaultMessage`s are written for.
-                    // NOTE: if you update this value, please also update the following npm scripts in `template-retail-react-app/package.json`:
+                    // NOTE: if you update this value, please also update the following npm scripts in `template-chakra-storefront/package.json`:
                     // - "extract-default-translations"
                     // - "compile-translations:pseudo"
                     defaultLocale={appConfig.defaultAppLocale}

packages/template-chakra-storefront/src/hooks/use-product-view-modal.test.js

@@ -15,7 +15,7 @@ import {IntlProvider} from 'react-intl'
 import mockProductDetail from '../../mocks/variant-750518699578M'
 import {useProductViewModal} from './use-product-view-modal'
 import {DEFAULT_LOCALE, renderWithProviders} from '../utils/test-utils'
-import messages from '../../static/translations/compiled/en-GB.json'
+import messages from '../static/translations/compiled/en-GB.json'
 import {rest} from 'msw'
 
 jest.mock('@salesforce/commerce-sdk-react', () => {

packages/template-chakra-storefront/src/utils/locale.test.js

@@ -19,7 +19,7 @@ jest.mock('cross-fetch', () => {
         }
 
         const locale = matched[1]
-        const json = await import(`../../static/translations/compiled/${locale}.json`)
+        const json = await import(`../static/translations/compiled/${locale}.json`)
 
         return {
             ok: true,

packages/template-chakra-storefront/src/utils/test-utils.js

@@ -17,7 +17,7 @@ import {IntlProvider} from 'react-intl'
 import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
 import {PageContext, Region} from '@salesforce/commerce-sdk-react/components'
 import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/components/with-react-query'
-import fallbackMessages from '../../static/translations/compiled/en-GB.json'
+import fallbackMessages from '../static/translations/compiled/en-GB.json'
 import mockConfig from '../../mock-config'
 // Contexts
 import {CurrencyProvider, MultiSiteProvider} from '../contexts'

packages/template-chakra-storefront/tsconfig.json

@@ -32,8 +32,5 @@
         /* Completeness */
         "skipLibCheck": true
     },
-    "exclude": [
-        "node_modules",
-        "static"
-    ]
+    "exclude": ["node_modules", "src/static"]
 }

packages/template-express-minimal/.eslintignore

@@ -1,7 +1,7 @@
 build
 coverage
 docs
-app/static
+src/static
 jest.config.js
 webpack
 scripts/generator/assets

packages/template-mrt-reference-app/.eslintignore

@@ -1,7 +1,7 @@
 build
 coverage
 docs
-app/static
+src/static
 jest.config.js
 webpack
 scripts/generator/assets