js-ci.yml

name: 'ci / Front End'
on:
  workflow_dispatch:
  push:
    branches:
      - main
      - 6.x
  pull_request:

concurrency:
  group: js-ci-${{ github.ref }}
  cancel-in-progress: true

env:
  NODE_VERSION: '24'
  PHP_VERSION: '8.5'

permissions:
  contents: read

jobs:
  setup:
    name: 'Setup / Install + Build + Generate'
    runs-on: ubuntu-latest
    timeout-minutes: 15
    outputs:
      cache-key: ${{ steps.cache-key.outputs.value }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: ${{ env.PHP_VERSION }}

      - name: Setup Vite+
        uses: voidzero-dev/setup-vp@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: true

      - name: Compute cache key
        id: cache-key
        # Hash everything that can affect installed deps, the cp build, or the
        # generated TS/wayfinder files. PHP source is included because both
        # `testbench typescript:transform` and `testbench wayfinder:generate`
        # derive their output from controllers, DTOs, and routes in src/.
        run: |
          echo "value=js-ci-v3-${{ runner.os }}-${{ hashFiles('package-lock.json', 'composer.lock', 'package.json', 'packages/*/package.json', 'packages/craftcms-ui/src/**', 'packages/craftcms-ui/tsconfig*.json', 'packages/craftcms-ui/vite.config.*', 'packages/craftcms-ui/tsdown.config.*', 'packages/craftcms-garnish/src/**', 'packages/craftcms-garnish/tsconfig*.json', 'packages/craftcms-garnish/vite.config.*', 'src/**/*.php', 'workbench/**/*.php') }}" >> "$GITHUB_OUTPUT"

      - name: Restore install + build + generated cache
        id: cache
        uses: actions/cache@v4
        with:
          path: |
            node_modules
            packages/*/node_modules
            packages/craftcms-ui/dist
            packages/craftcms-garnish/dist
            vendor
            resources/js/actions
            resources/js/routes
            resources/js/wayfinder
            resources/js/generated
          key: ${{ steps.cache-key.outputs.value }}

      - name: Install Composer dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: composer install --no-interaction --no-progress

      - name: Install frontend dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: vp install --frozen-lockfile
        env:
          CRAFT_FONTAWESOME_TOKEN: ${{ secrets.CRAFT_FONTAWESOME_TOKEN }}

      # Build the garnish package so its `dist/*.d.ts` exist — `vue-tsc` resolves
      # `@craftcms/garnish` from `dist` (its `types`), and dist is gitignored.
      # Without this the typecheck job fails to resolve the module.
      - name: Build @craftcms/garnish
        if: steps.cache.outputs.cache-hit != 'true'
        run: vp run build:garnish

      - name: Build @craftcms/ui
        if: steps.cache.outputs.cache-hit != 'true'
        run: vp run build:ui

      # `build:cp` does not produce the Custom Elements Manifest (only the
      # Storybook pre-hooks do), so generate it explicitly — it lands in the
      # packages/craftcms-cp/dist cache path above for the downstream jobs.
      - name: Build Custom Elements Manifest
        if: steps.cache.outputs.cache-hit != 'true'
        run: vp run @craftcms/ui#build:manifest

      - name: Generate TypeScript types
        if: steps.cache.outputs.cache-hit != 'true'
        run: vp run generate:types

      - name: Generate Wayfinder routes
        if: steps.cache.outputs.cache-hit != 'true'
        run: vp run generate:wayfinder

  eslint:
    name: 'Code Quality / Oxlint'
    runs-on: ubuntu-latest
    timeout-minutes: 5
    needs: setup
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Vite+
        uses: voidzero-dev/setup-vp@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: true

      - name: Restore install + build + generated cache
        uses: actions/cache@v4
        with:
          path: |
            node_modules
            packages/*/node_modules
            packages/craftcms-ui/dist
            packages/craftcms-garnish/dist
            vendor
            resources/js/actions
            resources/js/routes
            resources/js/wayfinder
            resources/js/generated
          key: ${{ needs.setup.outputs.cache-key }}

      - name: Run Oxlint
        run: vp lint resources/js/

  typecheck:
    name: 'Code Quality / TypeScript'
    runs-on: ubuntu-latest
    timeout-minutes: 5
    needs: setup
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Vite+
        uses: voidzero-dev/setup-vp@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: true

      - name: Restore install + build + generated cache
        uses: actions/cache@v4
        with:
          path: |
            node_modules
            packages/*/node_modules
            packages/craftcms-ui/dist
            packages/craftcms-garnish/dist
            vendor
            resources/js/actions
            resources/js/routes
            resources/js/wayfinder
            resources/js/generated
          key: ${{ needs.setup.outputs.cache-key }}

      # Skip the `pretypecheck` hook (it would re-run generate:types +
      # generate:wayfinder, which need PHP/Composer that this job doesn't set
      # up — the setup job already produced and cached the output).
      - name: Run TypeScript type check
        run: vp run typecheck

  test-ui:
    name: 'Tests / @craftcms/ui'
    runs-on: ubuntu-latest
    timeout-minutes: 10
    needs: setup
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Vite+
        uses: voidzero-dev/setup-vp@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: true

      - name: Restore install + build + generated cache
        uses: actions/cache@v4
        with:
          path: |
            node_modules
            packages/*/node_modules
            packages/craftcms-ui/dist
            packages/craftcms-garnish/dist
            vendor
            resources/js/actions
            resources/js/routes
            resources/js/wayfinder
            resources/js/generated
          key: ${{ needs.setup.outputs.cache-key }}

      # The storybook tests run in real Chromium via @vitest/browser-playwright.
      - name: Install Playwright Chromium
        run: vp exec playwright install --with-deps chromium

      - name: Run @craftcms/ui tests
        run: vp run test:ui