# (Compiler) Playground workflow (facebook/react)

> The (Compiler) Playground workflow from facebook/react, explained and optimized by Latchkey.

Source: https://latchkey.dev/workflows/facebook-react-compiler-playground  
Upstream: [facebook/react](https://github.com/facebook/react/blob/main/.github/workflows/compiler_playground.yml) (.github/workflows/compiler_playground.yml), licence MIT

## What it does

This is the (Compiler) Playground workflow from the facebook/react repository, a real project running GitHub Actions. It is shown here with attribution under its MIT license.

Below, Latchkey shows a faster, safer version produced by its optimization engine.

## The workflow

```yaml
name: (Compiler) Playground

on:
  push:
    branches: [main]
  pull_request:
    paths:
      - compiler/**
      - .github/workflows/compiler_playground.yml

permissions: {}

concurrency:
  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
  cancel-in-progress: true

env:
  TZ: /usr/share/zoneinfo/America/Los_Angeles
  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1

defaults:
  run:
    working-directory: compiler/apps/playground

jobs:
  playground:
    name: Test playground
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version-file: '.nvmrc'
      - name: Cache node_modules
        uses: actions/cache@v4
        id: node_modules
        with:
          path: |
            **/node_modules
          key: compiler-and-playground-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
      - run: yarn install --frozen-lockfile
        if: steps.node_modules.outputs.cache-hit != 'true'
        working-directory: compiler
      - run: yarn install --frozen-lockfile
        if: steps.node_modules.outputs.cache-hit != 'true'
      - name: Check Playwright version
        id: playwright_version
        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
        id: cache_playwright_browsers
        uses: actions/cache@v4
        with:
          path: ~/.cache/ms-playwright
          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
      - run: npx playwright install --with-deps chromium
        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
      - run: CI=true yarn test
      - run: ls -R test-results
        if: '!cancelled()'
      - name: Archive test results
        if: '!cancelled()'
        uses: actions/upload-artifact@v4
        with:
          name: test-results
          path: compiler/apps/playground/test-results
          if-no-files-found: ignore
```

## FAQ

### What does the (Compiler) Playground workflow (facebook/react) workflow do?

This is the (Compiler) Playground workflow from the facebook/react repository, a real project running GitHub Actions. It is shown here with attribution under its MIT license.

### What CI health grade does this workflow get?

This Node.js workflow grades C. Paste your own workflow into the Latchkey grader to see its grade and the exact fixes.

### How can I improve this Node.js workflow?

Add caching and job timeouts. Latchkey applies these automatically on managed runners when you point runs-on at Latchkey.

---

Latchkey runs CI/CD that repairs its own failures. Agent entry points: https://latchkey.dev/agent.txt, https://latchkey.dev/openapi.json, https://latchkey.dev/llms.txt