check-projects.yml

name: Check projects
on:
  workflow_dispatch: # for manual run
  push:
    branches:
      - master
    paths:
      - '.github/workflows/check-projects.yml'
      - 'projects/**/*'
      - '!projects/**/*.md'
  pull_request:
    branches:
      - master
    paths:
      - '.github/workflows/check-projects.yml'
      - 'projects/**/*'
      - '!projects/**/*.md'

jobs:
  build_bpmn-visualization_development_npm_package:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
        with:
          repository: 'process-analytics/bpmn-visualization-js'
          # to test a specific feature under development, uncomment the following line and use the related branch
          # ref: 'specific_branch'
      - name: Build Setup
        uses: ./.github/actions/build-setup
      - name: Build npm package
        run: npm pack
      - name: Upload npm package
        uses: actions/upload-artifact@v4
        with:
          name: bpmn-visualization-npm-package
          path: bpmn-visualization-*.tgz

  build_projects:
    runs-on: ubuntu-22.04
    needs: 'build_bpmn-visualization_development_npm_package'
    strategy:
      # don't cancel running jobs even if one fails
      fail-fast: false
      matrix:
        project:
          - javascript-vanilla-with-webpack
          - typescript-angular
          - typescript-lit-element
          - typescript-vanilla-with-parcel
          - typescript-vanilla-with-rollup
          - typescript-vanilla-with-vitejs
          - typescript-vue
        bv-npm-package:
          - development
          - release
    defaults:
      run:
        working-directory: ${{github.workspace}}/projects/${{matrix.project}}
    steps:
      - name: Download the bpmn-visualization development npm package
        if: ${{ matrix.bv-npm-package == 'development' }}
        id: 'download'
        uses: actions/download-artifact@v4
        with:
          name: bpmn-visualization-npm-package
          path: ${{github.workspace}}/../bpmn-visualization-npm-package
      - uses: actions/checkout@v4
      - name: Setup node
        uses: actions/setup-node@v4
        with:
          node-version-file: '.nvmrc'
      - name: Install dependencies
        run: npm install
      - name: Install bpmn-visualization development npm package
        if: ${{ matrix.bv-npm-package == 'development' }}
        # use wildcard as the file contains the version, and we don't know it
        run: npm install ${{steps.download.outputs.download-path}}/bpmn-visualization*.tgz
      - name: Build project
        run: npm run build
      - name: Upload project archive
        if: github.event_name == 'pull_request'
        uses: actions/upload-artifact@v4
        with:
          name: ${{matrix.project}}-${{matrix.bv-npm-package}}
          path: ${{github.workspace}}/projects/${{matrix.project}}/dist

  # WARN: use a short job-id to ensure the surge.sh subdomain is valid i.e. up to 63 characters (the surge-preview action includes the job-id in the generated surge domain)
  # For instance, using 'publish_pr_preview' would create the "process-analytics-bpmn-visualization-examples-publish_pr_preview-pr-438" subdomain
  # This subdomain is 71 characters long
  # See https://github.com/bonitasoft/actions/issues/101 for more details
  pr_preview:
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-22.04
    needs: 'build_projects'
    permissions:
      pull-requests: write # surge-preview: PR comments
    steps:
      - name: Download all artifacts
        uses: actions/download-artifact@v4
        with:
          path: tmp
      - name: Display structure of downloaded files
        run: ls -lhR
        working-directory: tmp
      - name: Build the final directories layout
        run: |
          mkdir -p build/development build/release
          cp -R tmp/*-development build/development
          cp -R tmp/*-release build/release
          # remove the '-development' and '-release' postfixes from directory names
          for element in build/development/*-development; do
            mv "$element" "${element%-development}"
          done
          for element in build/release/*-release; do
            mv "$element" "${element%-release}"
          done
      - name: List projects that will be referenced in the home page
        id: list_projects
        run: |
          # for the ls option, see https://serverfault.com/a/1095912
          echo "projects_development=$(ls -xw0 build/development/)" >> $GITHUB_OUTPUT
          echo "projects_release=$(ls -xw0 build/release/)" >> $GITHUB_OUTPUT
      - name: Create the home page
        uses: actions/github-script@v7
        env:
          PR_NUMBER: ${{github.event.pull_request.number}}
          PR_URL: ${{github.server_url}}/${{github.repository}}/pull/${{github.event.pull_request.number}}
          PROJECTS_DEVELOPMENT: ${{ steps.list_projects.outputs.projects_development }}
          PROJECTS_RELEASE: ${{ steps.list_projects.outputs.projects_release }}
        with:
          script: |
            const {PR_NUMBER, PR_URL, PROJECTS_DEVELOPMENT, PROJECTS_RELEASE} = process.env;
            let htmlContent = `<!DOCTYPE html>
            <html lang="en">
            <head>
            <meta charset="UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <title>Examples of bpmn-visualization projects for PR #${PR_NUMBER}</title>
            </head>
            <body>
            <h1>Examples of <code>bpmn-visualization</code> projects for <a href="${PR_URL}">PR #${PR_NUMBER}</a></h1>
            <p>
            Projects built using the <a href="https://github.com/process-analytics/bpmn-visualization-js/releases/latest" target="_blank">latest released version</a> of <code>bpmn-visualization</code>
            <ul>
            @release_projects@
            </ul>
            <p>
            Projects built using the <a href="https://github.com/process-analytics/bpmn-visualization-js/" target="_blank">development version</a> of <code>bpmn-visualization</code>
            <ul>
            @development_projects@
            </ul>
            </body>
            </html>
            `
            htmlContent = htmlContent.replaceAll('@release_projects@', PROJECTS_RELEASE.split(' ').filter(name => name.trim() !== '').map(name => `<li><a href="release/${name}/index.html" target="_blank">${name}</a></li>`).join('\n'));
            htmlContent = htmlContent.replaceAll('@development_projects@', PROJECTS_DEVELOPMENT.split(' ').filter(name => name.trim() !== '').map(name => `<li><a href="development/${name}/index.html" target="_blank">${name}</a></li>`).join('\n'));
            console.info('Generated page', htmlContent);
            // Create the file
            require('fs').writeFileSync('build/index.html', htmlContent);
      - name: Display the final structure of files
        run: |
          ls -lhR build
      - uses: bonitasoft/actions/packages/surge-preview-tools@v3
        id: surge-preview-tools
        with:
          surge-token: ${{ secrets.SURGE_TOKEN }}
      - name: Manage surge preview
        if: steps.surge-preview-tools.outputs.can-run-surge-command == 'true'
        uses: afc163/surge-preview@v1
        with:
          surge_token: ${{ secrets.SURGE_TOKEN }}
          github_token: ${{ secrets.GITHUB_TOKEN }}
          dist: build
          failOnError: true
          # We are not doing teardown here.
          # The teardown must be performed in the same job as the one which creates the domain (as the surge-action uses the job id to compute the surge domain).
          # Here, the job is run after other jobs run. Teardown run typically on PR close, and we don't want to run the parent job on PR close.
          # If the parent jobs don't run, this job cannot run. So we are in a dead end.
          # In the process-analytics GitHub organization, we have a workflow that is scheduled periodically to teardown old domain.
          # The domain created here will be removed by this scheduled run.
          teardown: 'false'
          build: echo 'Already built!'
      # Fallback when it is not possible to deploy to surge.sh
      - name: Upload artifact (preview not deployed)
        if: steps.surge-preview-tools.outputs.can-run-surge-command == 'false'
        uses: actions/upload-artifact@v4
        with:
          name: bpmn-visualization-examples-projects-${{github.sha}}
          path: build