Update frontend_addon template to support Volto 19

.github/workflows/main.yml

@@ -12,6 +12,7 @@ on:
 
 env:
   node-version: 22.x
+  node-version-prerelease: 24.x
   python-version: "3.10"
 
 jobs:
@@ -112,6 +113,11 @@ jobs:
       - name: Checkout codebase
         uses: actions/checkout@v4
 
+      - name: Use Node.js ${{ env.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.node-version }}
+
       - name: Generate
         uses: ./.github/actions/generate
         with:
@@ -208,6 +214,120 @@ jobs:
         run: |
           make ci-acceptance-test
 
+  frontend-functional-prerelease:
+    runs-on: ubuntu-latest
+    if: "${{ always() }}"
+    needs:
+      - test-repository
+    env:
+      template: "frontend_addon"
+      name: "volto-add-on"
+    steps:
+      - name: Checkout codebase
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.node-version-prerelease }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.node-version-prerelease }}
+
+      - name: Generate
+        uses: ./.github/actions/generate
+        with:
+          template: ${{ env.template }}
+          python-version: ${{ env.python-version }}
+          frontend-use-prerelease-versions: 'Yes'
+
+      - name: Enable corepack
+        run: |
+          npm install -g --force corepack@latest
+          corepack enable
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('volto-add-on/package.json','volto-add-on/mrs.developer.json') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Cache Cypress Binary
+        id: cache-cypress-binary
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/Cypress
+          key: binary-${{ env.node-version-prerelease }}-${{ hashFiles('volto-add-on/package.json','volto-add-on/mrs.developer.json') }}
+
+      - name: Install generated package
+        working-directory: ${{ env.name }}
+        run: |
+          make install
+
+      - name: Run unit tests
+        working-directory: ${{ env.name }}
+        run: |
+          make ci-test
+
+      - name: Run i18n tests
+        working-directory: ${{ env.name }}
+        run: |
+          make i18n
+
+      - name: Run linting
+        working-directory: ${{ env.name }}
+        run: |
+          make lint
+
+      - name: Run formatting
+        working-directory: ${{ env.name }}
+        run: |
+          make format
+
+      - name: Run Storybook
+        working-directory: ${{ env.name }}
+        run: |
+          make storybook-build
+
+      - name: Start Servers
+        uses: JarvusInnovations/background-action@v1
+        with:
+          working-directory: ${{ env.name }}
+          run: |
+            make ci-acceptance-backend-start &
+            make acceptance-frontend-prod-start &
+          # your step-level and job-level environment variables are available to your commands as-is
+          # npm install will count towards the wait-for timeout
+          # whenever possible, move unrelated scripts to a different step
+          # to background multiple processes: add & to the end of the command
+
+          wait-on: |
+            http-get://localhost:55001/plone
+            http://localhost:3000
+          # IMPORTANT: to use environment variables in wait-on, you must use this form: ${{ env.VAR }}
+          # See wait-on section below for all resource types and prefixes
+
+          tail: true # true = stderr,stdout
+          # This will allow you to monitor the progress live
+
+          log-output-resume: stderr
+          # Eliminates previosuly output stderr log entries from post-run output
+
+          wait-for: 10m
+
+          log-output: stderr,stdout # same as true
+
+          log-output-if: failure
+
+      - name: Run acceptance tests
+        working-directory: ${{ env.name }}
+        run: |
+          make ci-acceptance-test
+
   report:
     runs-on: ubuntu-latest
     needs:

news/+Volto19support.feature

@@ -0,0 +1 @@
+Added full support for Volto 19 (prerelease). @sneridagh

templates/add-ons/frontend/cookiecutter.json

@@ -17,8 +17,10 @@
   "__version_frontend_package": "1.0.0-alpha.0",
   "__version_plone_volto": "{{ cookiecutter.volto_version }}",
   "__version_mrs_developer": "^2.2.0",
-  "__version_pnpm": "9.1.1",
+  "__version_pnpm": "{{ '10.20.0' if cookiecutter.volto_version >= '19' else '9.1.1' }}",
   "__version_release_it": "^17.1.1",
+  "__version_testing_library_react": "^16.2.0",
+  "__version_vitest": "^3.1.2",
   "__node_version": "{{ cookiecutter.volto_version | node_version_for_volto }}",
   "__gha_version_node": "{{ cookiecutter.__node_version }}",
   "__gha_version_checkout": "v4",
@@ -27,6 +29,7 @@
   "__gha_version_background_action": "v1",
   "__gha_version_upload_artifact": "v4",
   "__gha_version_pages_deploy": "v4",
+  "__test_framework": "{{ 'vitest' if cookiecutter.volto_version >= '19' else 'jest'}}",
   "__prompts__": {
     "frontend_addon_name": "Add-on (Short name of the addon)",
     "title": "Add-on Title",

templates/add-ons/frontend/hooks/post_gen_project.py

@@ -32,6 +32,18 @@ def generate_docs_starter(context, output_dir):
     files.remove_files(output_dir / folder_name, DOCUMENTATION_STARTER_REMOVE)
 
 
+def remove_conditional_files(context, output_dir):
+    if context["__test_framework"] == "jest":
+        (
+            output_dir
+            / "packages"
+            / context["frontend_addon_name"]
+            / "vitest.config.mjs"
+        ).unlink()
+    else:
+        (output_dir / "jest-addon.config.js").unlink()
+
+
 def main():
     """Final fixes."""
 
@@ -53,6 +65,8 @@ def main():
         console.print(f" -> {title}")
         func(new_context, output_dir)
 
+    remove_conditional_files(context, output_dir)
+
     msg = """
         [bold blue]{{ cookiecutter.frontend_addon_name }}[/bold blue]
 

templates/add-ons/frontend/{{ cookiecutter.__folder_name }}/Makefile

@@ -98,8 +98,12 @@ test: ## Run unit tests
 .PHONY: ci-test
 ci-test: ## Run unit tests in CI
 	# Unit Tests need the i18n to be built
-	VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n
-	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests
+	VOLTOCONFIG=$(CURRENT_DIR)/volto.config.js pnpm --filter @plone/volto i18n
+{%- if cookiecutter.__test_framework == 'jest' %}
+	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm run --filter @plone/volto test --passWithNoTests
+{%- else %}
+	CI=1 pnpm run test --passWithNoTests
+{%- endif %}
 
 .PHONY: backend-docker-start
 backend-docker-start:	## Starts a Docker-based backend for development

templates/add-ons/frontend/{{ cookiecutter.__folder_name }}/package.json

@@ -18,7 +18,11 @@
     "build": "VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto build",
     "build:deps": "pnpm --filter @plone/registry --filter @plone/components build",
     "i18n": "pnpm --filter {{ cookiecutter.__npm_package_name }} i18n && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n",
+{%- if cookiecutter.__test_framework == 'jest' %}
     "test": "RAZZLE_JEST_CONFIG=$(pwd)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests",
+{%- else %}
+    "test": "pnpm --filter {{ cookiecutter.__npm_package_name }} exec vitest",
+{%- endif %}
     "lint": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --max-warnings=0 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --fix 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
     "prettier": "prettier --check 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
@@ -44,7 +48,21 @@
     "overrides": {
       "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
       "react-refresh": "^0.14.2"
-    }
+    }{%- if cookiecutter.volto_version >= '19' %},
+    "ignoredBuiltDependencies": [
+      "@parcel/watcher"
+    ],
+    "onlyBuiltDependencies": [
+      "core-js",
+      "core-js-pure",
+      "cypress",
+      "es5-ext",
+      "esbuild",
+      "full-icu",
+      "lightningcss-cli",
+      "unrs-resolver"
+    ]
+    {%- endif %}
   },
   "packageManager": "pnpm@{{ cookiecutter.__version_pnpm }}"
 }

templates/add-ons/frontend/{{ cookiecutter.__folder_name }}/packages/{{ cookiecutter.frontend_addon_name }}/package.json

@@ -36,6 +36,12 @@
   },
   "devDependencies": {
     "@plone/scripts": "workspace:*",
+{%- if cookiecutter.__test_framework == 'jest' %}
     "release-it": "{{ cookiecutter.__version_release_it }}"
+{%- else %}
+    "@testing-library/react": "{{ cookiecutter.__version_testing_library_react }}",
+    "release-it": "{{ cookiecutter.__version_release_it }}",
+    "vitest": "{{ cookiecutter.__version_vitest }}"
+{%- endif %}
   }
 }

templates/add-ons/frontend/{{ cookiecutter.__folder_name }}/packages/{{ cookiecutter.frontend_addon_name }}/vitest.config.mjs

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+import voltoVitestConfig from '@plone/volto/vitest.config.mjs';
+import path from 'path';
+
+export default defineConfig({
+  ...voltoVitestConfig,
+  resolve: {
+    alias: {
+      '@plone/volto': path.resolve(__dirname, '../../core/packages/volto/src'), // Add paths accordingly
+      // 'promise-file-reader': require.resolve('promise-file-reader') // Add to identify dependency from package
+    },
+  },
+});

templates/add-ons/seven_addon/cookiecutter.json

@@ -13,7 +13,7 @@
   "__version_package": "1.0.0",
   "__version_plone_volto": "{{ cookiecutter.volto_version }}",
   "__version_mrs_developer": "^2.2.0",
-  "__version_pnpm": "10.10.0",
+  "__version_pnpm": "10.20.0",
   "__version_release_it": "^19.0.5",
   "__version_pre_commit": "3.7.1",
   "__gha_version_node": "22.x",

templates/add-ons/seven_addon/{{ cookiecutter.__folder_name }}/Makefile

@@ -105,7 +105,7 @@ test: ## Run unit tests
 ci-test: ## Run unit tests in CI
 	# Unit Tests need the i18n to be built
 	VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n
-	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests
+	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm run --filter @plone/volto test --passWithNoTests
 
 .PHONY: backend-docker-start
 backend-docker-start:	## Starts a Docker-based backend for development

templates/projects/monorepo/cookiecutter.json

@@ -32,7 +32,7 @@
   "__python_version": "3.12",
   "__node_version": "{{ cookiecutter.volto_version | node_version_for_volto }}",
   "__version_plone_volto": "{{ cookiecutter.volto_version }}",
-  "__version_pnpm": "9.1.1",
+  "__version_pnpm": "{{ '10.20.0' if cookiecutter.volto_version >= '19' else '9.1.1' }}",
   "__container_registry_prefix": "{{ cookiecutter.container_registry | image_prefix }}",
   "__container_image_prefix": "{{ cookiecutter.__container_registry_prefix }}{{ cookiecutter.github_organization }}/{{ cookiecutter.project_slug }}",
   "__profile_version": "{% now 'utc', '%Y%m%d001' %}",

templates/sub/frontend_project/cookiecutter.json

@@ -4,15 +4,13 @@
   "author": "Plone Community",
   "__folder_name": "app",
   "__version_plone_volto": "{{ cookiecutter.volto_version }}",
+  "__version_pnpm": "{{ '10.20.0' if cookiecutter.volto_version >= '19' else '9.1.1' }}",
   "__prompts__": {
     "title": "Project name",
     "volto_version": "Volto version"
   },
-  "_copy_without_render": [
-  ],
-  "_extensions": [
-    "cookieplone.filters.latest_volto"
-  ],
+  "_copy_without_render": [],
+  "_extensions": ["cookieplone.filters.latest_volto"],
   "__cookieplone_repository_path": "",
   "__cookieplone_template": ""
 }

templates/sub/frontend_project/{{ cookiecutter.__folder_name }}/_project_files/Makefile

@@ -79,7 +79,7 @@ test: ## Run unit tests
 
 .PHONY: ci-test
 ci-test: ## Run unit tests in CI
-	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests
+	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm run --filter @plone/volto test --passWithNoTests
 
 .PHONY: backend-docker-start
 backend-docker-start:	## Starts a Docker-based backend for development

templates/sub/frontend_project/{{ cookiecutter.__folder_name }}/_project_files/package.json

@@ -42,7 +42,12 @@
     "overrides": {
       "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
       "react-refresh": "^0.14.2"
-    }
+    }{%- if cookiecutter.volto_version >= '19' %},
+    "onlyBuiltDependencies": [
+      "cypress",
+      "lightningcss-cli"
+    ]
+    {%- endif %}
   },
-  "packageManager": "pnpm@9.1.1"
+  "packageManager": "pnpm@{{ cookiecutter.__version_pnpm }}"
 }

templates/sub/project_settings/cookiecutter.json

@@ -28,13 +28,16 @@
   "__locales_language": "{{ cookiecutter.language_code|locales_language_code }}",
   "__python_version": "3.12",
   "__supported_versions_python": ["{{ cookiecutter.__python_version }}"],
-  "__supported_versions_plone": ["{{ cookiecutter.plone_version | as_major_minor }}"],
+  "__supported_versions_plone": [
+    "{{ cookiecutter.plone_version | as_major_minor }}"
+  ],
   "__python_version_identifier": "{{ cookiecutter.__python_version | replace('.', '') }}",
   "__version_frontend_package": "1.0.0-alpha.0",
   "__version_plone_volto": "{{ cookiecutter.volto_version }}",
   "__version_mrs_developer": "^2.2.0",
-  "__version_pnpm": "9.1.1",
+  "__version_pnpm": "{{ '10.20.0' if cookiecutter.volto_version >= '19' else '9.1.1' }}",
   "__version_release_it": "^17.1.1",
+  "__test_framework": "{{ 'vitest' if cookiecutter.volto_version >= '19' else 'jest'}}",
   "_copy_without_render": [],
   "_extensions": [
     "cookieplone.filters.use_prerelease_versions",

templates/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/Makefile

@@ -97,7 +97,11 @@ test: ## Run unit tests
 ci-test: ## Run unit tests in CI
 	# Unit Tests need the i18n to be built
 	VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n
-	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests
+{%- if cookiecutter.__test_framework == 'jest' %}
+	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm run --filter @plone/volto test --passWithNoTests
+{%- else %}
+	CI=1 pnpm run test --passWithNoTests
+{%- endif %}
 
 .PHONY: backend-docker-start
 backend-docker-start:	## Starts a Docker-based backend for development

templates/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/package.json

@@ -18,7 +18,11 @@
     "build": "VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto build",
     "build:deps": "pnpm --filter @plone/registry --filter @plone/components build",
     "i18n": "pnpm --filter {{ cookiecutter.__npm_package_name }} i18n && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n",
+{%- if cookiecutter.__test_framework == 'jest' %}
     "test": "RAZZLE_JEST_CONFIG=$(pwd)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests",
+{%- else %}
+    "test": "pnpm --filter {{ cookiecutter.__npm_package_name }} exec vitest",
+{%- endif %}
     "lint": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --max-warnings=0 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --fix 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
     "prettier": "prettier --check 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
@@ -44,7 +48,12 @@
     "overrides": {
       "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
       "react-refresh": "^0.14.2"
-    }
+    }{%- if cookiecutter.volto_version >= '19' %},
+    "onlyBuiltDependencies": [
+      "cypress",
+      "lightningcss-cli"
+    ]
+    {%- endif %}
   },
   "packageManager": "pnpm@{{ cookiecutter.__version_pnpm }}"
 }