[Extensibility] Feature branch for Extensibility V2

.eslintrc.js

@@ -32,25 +32,5 @@ module.exports = {
                 ]
             }
         ]
-    },
-    // For an import in a file to be replaced via template extensibility, the import must use the
-    // full package name, rather than relative imports, i.e. all retail react app imports must use
-    // "@salesforce/retail-react-app/" rather than relative imports.
-    overrides: [
-        {
-            files: ['packages/template-retail-react-app/**'],
-            plugins: ['no-relative-import-paths'],
-            rules: {
-                // https://github.com/MelvinVermeer/eslint-plugin-no-relative-import-paths
-                'no-relative-import-paths/no-relative-import-paths': [
-                    'error',
-                    {
-                        allowSameFolder: false,
-                        rootDir: 'packages/template-retail-react-app',
-                        prefix: '@salesforce/retail-react-app'
-                    }
-                ]
-            }
-        }
-    ]
+    }
 }

.github/actions/bundle_size_test/action.yml

@@ -1,8 +1,39 @@
-name: bundlesize
+name: bundle_size_test
+inputs:
+  cwd:
+    required: true
+  config:
+    required: true
 runs:
   using: composite
   steps:
-  - name: Check bundle size
+  - name: Analyze build
+    working-directory: ${{ inputs.cwd }}
     run: |-
-        npm run test:max-file-size
+        npm run analyze-build
+    shell: bash
+
+  - name: Check bundle sizes
+    working-directory: ${{ inputs.cwd }}
+    # NOTE: A bug prevented us from running bundlesize with a config file:
+    # npx bundlesize --scope ${{ github.action_path }}/bundlesize.config.json
+    # For more details, see https://github.com/siddharthkp/bundlesize/issues/326
+    run: |-
+        json_string='${{ inputs.config }}'
+
+        if ! echo "$json_string" | jq '.' > /dev/null 2>&1; then
+          echo "::error::Invalid JSON input provided: $json_string"
+          exit 1
+        fi
+
+        # Parse the given json string and build the command to run
+        echo "$json_string" | jq -r 'to_entries[] | "npx bundlesize -f \"" + .key + "\" -s " + .value' | while IFS= read -r command; do
+          echo "Executing: $command"
+          eval "$command"
+        done
+    shell: bash
+
+  - name: Report bundle sizes
+    run: |-
+        node ./scripts/report-bundle-size.js ${{ inputs.cwd }}/build
     shell: bash

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

@@ -27,10 +27,19 @@ runs:
         fi
       shell: bash
 
+    - name: Get latest PR data
+      id: get_pr
+      uses: octokit/request-action@v2.x
+      with:
+        route: GET /repos/${{ github.repository }}/issues/${{ inputs.pr_number }}
+      env:
+        GITHUB_TOKEN: ${{ github.token }}
+
     - name: Check if 'skip changelog' label is present
       id: check_labels
       run: |
-        SKIP_CHANGELOG_LABEL="${{ contains(github.event.pull_request.labels.*.name, 'skip changelog') }}"
+        echo "PR labels: ${{ toJSON(fromJSON(steps.get_pr.outputs.data).labels.*.name) }}"
+        SKIP_CHANGELOG_LABEL="${{ contains(fromJSON(steps.get_pr.outputs.data).labels.*.name, 'skip changelog') }}"
         if [ "$SKIP_CHANGELOG_LABEL" = "true" ]; then
           echo "Skip changelog label is present. Skipping changelog check."
           echo "SKIP_CHANGELOG_CHECK=true" >> $GITHUB_ENV
@@ -55,7 +64,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/actions/create_mrt/action.yml

@@ -14,5 +14,5 @@ runs:
       working-directory: ${{ inputs.cwd }}
       run: |-
         # Add credentials file at ~/.mobify so we can upload to Mobify Cloud
-        npm run save-credentials --prefix packages/template-retail-react-app -- --user "${{inputs.mobify_user}}" --key "${{inputs.mobify_api_key}}"
+        npm run save-credentials --prefix packages/template-typescript-minimal -- --user "${{inputs.mobify_user}}" --key "${{inputs.mobify_api_key}}"
       shell: bash

.github/actions/datadog/action.yml

@@ -9,13 +9,15 @@ runs:
   steps:
     - name: Send metrics to Datadog
       run : |
+        # TODO: move it back to setup_ubuntu action
         # For the datadog cli, it must be installed via python
         # to install python packages on CI environment, we must activate the virtual env
         # or otherwise it throws error: externally-managed-environment
         python3 -m venv venv
         source venv/bin/activate
         pip install datadog
 
+        # TODO: move it back to setup_ubuntu action
         # Add a dogrc so we can submit metrics to datadog
         printf "[Connection]\napikey = ${{inputs.datadog_api_key}}\nappkey =\n" > ~/.dogrc
 

.github/actions/e2e_generate_app/action.yml

@@ -1,7 +1,7 @@
 name: e2e_generate_app
 inputs:
   PROJECT_KEY:
-    description: Project key to specify project to generate ("retail-app-demo", "retail-app-ext" or "retail-app-no-ext")
+    description: Project key to specify project to generate ("retail-app-demo")
     required: true
     type: string
 

.github/actions/e2e_validate_generated_app/action.yml

@@ -1,7 +1,7 @@
 name: e2e_validate_generated_app
 inputs:
   PROJECT_KEY:
-    description: Project key to specify project to validate ("retail-app-demo", "retail-app-ext" or "retail-app-no-ext")
+    description: Project key to specify project to validate ("retail-app-demo")
     required: true
     type: string
 

.github/actions/generate_app_with_preset/action.yml

@@ -0,0 +1,15 @@
+name: generate_app_with_preset
+inputs:
+  preset:
+    required: true
+  output_dir:
+    required: false
+    default: generated_pwa
+runs:
+  using: composite
+  steps:
+    - run: |-
+        node packages/pwa-kit-create-app/scripts/create-mobify-app-dev.js --outputDir ${{ inputs.output_dir }}
+      shell: bash
+      env:
+        GENERATOR_PRESET: ${{ inputs.preset }}

.github/actions/lighthouse_ci/action.yml

@@ -1,8 +1,18 @@
 name: lighthouse_ci
+inputs:
+  project_dir:
+    required: true
+  config_filename:
+    required: true
 runs:
   using: composite
   steps:
-  - name: Run Lighthouse CI on the PWA
-    # This test is flaky, so let's try it three times!
-    run: npm run test:lighthouse --prefix packages/template-retail-react-app || npm run test:lighthouse --prefix packages/template-retail-react-app || npm run test:lighthouse --prefix packages/template-retail-react-app
+  - name: Run Lighthouse CI
+    working-directory: ${{ inputs.project_dir }}
+    run: |-
+      lighthouse_test="npx @lhci/cli autorun --config=${{ github.action_path }}/${{ inputs.config_filename }}"
+      # This test is flaky, so let's try it three times!
+      $lighthouse_test || $lighthouse_test || $lighthouse_test
     shell: bash
+    env:
+      NODE_ENV: production

packages/template-retail-react-app/tests/lighthouserc.js → .github/actions/lighthouse_ci/lighthouserc.retail-react-app.js

@@ -4,6 +4,7 @@
  * 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
  */
+
 module.exports = {
     // The different Lighthouse CI configuration options:
     // https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md

.github/actions/npm_scripts/action.yml

@@ -0,0 +1,12 @@
+name: npm_scripts
+inputs:
+  cwd:
+    required: true
+runs:
+  using: composite
+  steps:
+  - name: Smoke test the npm scripts
+    run: |-
+      # Basic smoke-tests for uncommonly run scripts in a project
+      node ./scripts/smoke-test-npm-scripts.js --dir "${{ inputs.cwd }}"
+    shell: bash

.github/actions/setup_ubuntu/action.yml

@@ -3,27 +3,46 @@ inputs:
   cwd:
     required: false
     default: ${{ github.workspace }}
+  node:
+    required: true
+    description: Major node version
+  npm:
+    required: false
+    description: Major npm version
+  update_npm:
+    required: false
+    default: false
 description: "Setup Ubuntu Machine"
 runs:
   using: composite
   steps:
+    - name: Setup Node
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node }}
+        cache: npm
+
+    - name: Update NPM version
+      if: inputs.update_npm == 'true'
+      run: |-
+        npm install -g npm@${{ inputs.npm }}
+      shell: bash
+
+    - name: Verify node and npm versions
+      uses: ./.github/actions/verify_node_npm_major_versions
+      with:
+        node: ${{ inputs.node }}
+        npm: ${{ inputs.npm }}
+
     - name: Install Dependencies
       working-directory: ${{ inputs.cwd }}
       run: |-
         # Install node dependencies
         node ./scripts/gtime.js monorepo_install npm ci
 
-        # Build the PWA
-        npm run lerna -- run analyze-build --scope "@salesforce/retail-react-app"
-
-        # Report bundle sizes
-        node ./scripts/report-bundle-size.js
-
         # Install Snyk CLI
         # TODO: Ticket W-12425059. Revisit Snyk CLI integration to monitor manifest files on generated projects.
         # TODO: Latest Snyk CLI version is currently failing on npm i. We use the alternative Snyk GitHub integration.
         # sudo npm install -g snyk
 
-        # Install Lighthouse CI CLI
-        sudo npm install -g @lhci/cli
       shell: bash

.github/actions/setup_windows/action.yml

@@ -3,10 +3,37 @@ inputs:
   cwd:
     required: false
     default: "${PWD}"
+  node:
+    required: true
+    description: Major node version
+  npm:
+    required: false
+    description: Major npm version
+  update_npm:
+    required: false
+    default: false
 description: "Setup Windows Machine"
 runs:
   using: composite
   steps:
+    - name: Setup Node
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node }}
+        cache: npm
+
+    - name: Update NPM version
+      if: inputs.update_npm == 'true'
+      run: |-
+        npm install -g npm@${{ inputs.npm }}
+      shell: bash
+
+    - name: Verify node and npm versions
+      uses: ./.github/actions/verify_node_npm_major_versions
+      with:
+        node: ${{ inputs.node }}
+        npm: ${{ inputs.npm }}
+
     - name: Install Dependencies
       run: |-
         # Install node dependencies

.github/actions/verify_node_npm_major_versions/action.yml

@@ -0,0 +1,39 @@
+name: verify_node_npm_major_versions
+inputs:
+  node:
+    required: false
+    description: Major node version
+  npm:
+    required: false
+    description: Major npm version
+runs:
+  using: composite
+  steps:
+    - run: |-
+        EXPECTED_NODE_VERSION="${{ inputs.node }}"
+        EXPECTED_NPM_VERSION="${{ inputs.npm }}"
+
+        FULL_NODE_VERSION=$(node -v)
+        FULL_NPM_VERSION=$(npm -v)
+        # Parse out the _major_ versions
+        INSTALLED_NODE_VERSION=$(echo $FULL_NODE_VERSION | sed 's/^v\([0-9]*\).*/\1/')
+        INSTALLED_NPM_VERSION=$(echo $FULL_NPM_VERSION | sed 's/^\([0-9]*\).*/\1/')
+
+        if [ -n "$EXPECTED_NODE_VERSION" ]; then
+          if [ "$INSTALLED_NODE_VERSION" != "$EXPECTED_NODE_VERSION" ]; then
+            echo "The node version is incorrect. Expected: v$EXPECTED_NODE_VERSION, but found: v$INSTALLED_NODE_VERSION"
+            exit 1
+          fi
+        fi
+
+        if [ -n "$EXPECTED_NPM_VERSION" ]; then
+          if [ "$INSTALLED_NPM_VERSION" != "$EXPECTED_NPM_VERSION" ]; then
+            echo "The npm version is incorrect. Expected: $EXPECTED_NPM_VERSION, but found: $INSTALLED_NPM_VERSION"
+            exit 1
+          fi
+        fi
+
+        echo "Node/npm version check completed successfully."
+        echo "Installed node version: $FULL_NODE_VERSION"
+        echo "Installed npm version: $FULL_NPM_VERSION"
+      shell: bash

.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