the-guild-org · jasonkuhrt · Apr 11, 2025 · Apr 11, 2025 · Apr 11, 2025 · Apr 11, 2025
diff --git a/.github/actions/install-playwright-binaries/action.yaml b/.github/actions/install-playwright-binaries/action.yaml
@@ -0,0 +1,55 @@
+# https://github.com/microsoft/playwright/issues/7249
+name: Install Playwright Binaries
+description: Install Playwright browsers with cache
+inputs:
+  working-directory:
+        description: Where to install Playwright
+    default: ./
+  browsers:
+    description: Browsers to install
+    default: chromium
+outputs:
+  version:
+    description: Installed version of Playwright
+    value: ${{ steps.version.outputs.version }}
+  cache-hit:
+    description: Whether cache for Playwright was found
+    value: ${{ steps.cache.outputs.cache-hit }}
+runs:
+  using: composite
+  steps:
+    - name: Get Playwright version
+      uses: actions/github-script@v7
+      id: version
+      with:
+        script: |
+          // https://github.com/actions/toolkit/issues/1624
+          // const workingDirectory = core.getInput("working-directory");
+          const workingDirectory = "${{ inputs.working-directory }}";
+          console.debug("Specified working directory:", workingDirectory);
+          if (workingDirectory) process.chdir(workingDirectory);
+          console.debug("Actual working directory:", process.cwd());
+          let version = "";
+          try {
+            version = require("playwright/package.json").version;
+          } catch (error) {
+            console.log(error.message);
+          }
+          console.debug("Version:", version);
+          if (version) {
+            core.exportVariable("PLAYWRIGHT_VERSION", version);
+            core.setOutput("version", version);
+          } else core.setFailed("Couldn't get Playwright version");
+
+    - name: Cache Playwright
+      id: cache
+      uses: actions/cache@v4
+      with:
+        path: ~/.cache/ms-playwright
+        key: playwright-${{ env.PLAYWRIGHT_VERSION }}
+
+    - name: Install Playwright Browsers
+      shell: bash
+      if: steps.cache.outputs.cache-hit != 'true'
+      working-directory: ${{ inputs.working-directory }}
+      run: npx playwright install ${{ inputs.browsers }}
diff --git a/.github/actions/setup/action.yaml b/.github/actions/setup/action.yaml
@@ -0,0 +1,45 @@
+name: Setup
+description: Boilerplate steps needed by most jobs.
+inputs:
+  node-version:
+    description: Version of Node to use.
+    required: false
+    default: 18.x
+  install-deps:
+    description: Should deps be installed?
+    required: false
+    default: 'true'
+runs:
+  using: composite
+  steps:
+    - name: Use Node.js ${{inputs.node-version}}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{inputs.node-version}}
+    - name: Enable Corepack
+      run: |
+        corepack enable
+        echo "PnPM version is $(pnpm --version)"
+      shell: bash
+    # https://github.com/pnpm/action-setup#use-cache-to-reduce-installation-time
+    - name: Get Current Month
+      id: date-month
+      shell: bash
+      run: |
+        DATE=$(date +'%Y-%m')
+        echo "$DATE"
+        echo "date_month=$DATE" >> $GITHUB_OUTPUT
+    - name: Get pnpm store directory
+      id: pnpm-cache
+      shell: bash
+      run: echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+    - uses: actions/cache@v3
+      name: Setup pnpm cache
+      with:
+        path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+        key: ${{ runner.os }}-pnpm-store-${{steps.date-month.outputs.date_month}}-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: ${{ runner.os }}-pnpm-store-${{steps.date-month.outputs.date_month}}
+    - name: Install Dependencies
+      run: pnpm install
+      shell: bash
+      if: ${{inputs.install-deps}} == 'true'
diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
@@ -0,0 +1,51 @@
+name: pr
+concurrency:
+  group: ${{github.head_ref}}
+  cancel-in-progress: true
+on:
+  - pull_request
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - run: pnpm add dprint
+      - run: pnpm check:format
+  # Fix lint
+  # lint:
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - uses: actions/checkout@v4
+  #     - uses: ./.github/actions/setup
+  #     - run: pnpm build
+  #     - run: pnpm check:lint
+  publint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - run: pnpm build
+      - run: pnpm check:package
+  types:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - run: pnpm check:types
+  test-examples:
+    strategy:
+      matrix:
+        os: ['ubuntu-latest'] #, 'macos-latest', 'windows-latest'
+        node-version: [22.x]
+    runs-on: ${{matrix.os}}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+        with:
+          node-version: ${{matrix.node-version}}
+      - name: Install Playwright Binaries
+        uses: ./.github/actions/install-playwright-binaries
+      - run: pnpm build
+      - run: cd examples/github-developer-portal && pnpm link ../..
+      - run: pnpm test:examples
diff --git a/.gitignore b/.gitignore
@@ -30,3 +30,5 @@ dist-ssr
 /build
 /examples/**/build
 examples/*/pnpm-workspace.yaml
+examples/_tests/__results__
+tsconfig.build.tsbuildinfo
diff --git a/examples/_tests/cases/github-developer-portal.ts b/examples/_tests/cases/github-developer-portal.ts
@@ -0,0 +1,27 @@
+import type { Page } from 'playwright/test'
+import { expect } from 'playwright/test'
+import * as path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { test } from '../helpers/test.js'
+
+const exampleName = `github-developer-portal`
+const dirname = path.dirname(fileURLToPath(import.meta.url))
+const exampleDir = path.resolve(dirname, `../../${exampleName}`)
+const cwd = exampleDir
+
+test.use({ cwd })
+
+const testPageHome = async (page: Page) => {
+  await expect(page.getByText(`GitHub Developer Portal`)).toBeVisible()
+  await expect(page.title()).resolves.toContain(`GitHub Developer Portal`)
+}
+
+test(`development server renders app`, async ({ runDev, page }) => {
+  await page.goto(runDev.url)
+  await testPageHome(page)
+})
+
+test(`built server renders app`, async ({ page, runStart }) => {
+  await page.goto(runStart.url)
+  await testPageHome(page)
+})
diff --git a/examples/_tests/helpers/run.ts b/examples/_tests/helpers/run.ts
@@ -0,0 +1,63 @@
+import { stripAnsi } from 'consola/utils'
+import type { ProcessOutput, ProcessPromise } from 'zx'
+import { $ } from 'zx'
+
+export const runBuild = async (
+  { cwd }: { cwd: string },
+): Promise<ProcessOutput> => {
+  const $$ = $({ cwd })
+  const output = await $$`pnpm run build`
+  return output
+}
+
+export interface ServerProcess {
+  process: ProcessPromise
+  url: string
+}
+
+export const runDev = async (
+  { cwd }: { cwd: string },
+): Promise<ServerProcess> => {
+  const $$ = $({ cwd })
+
+  const serverProcess = $$`pnpm run dev`
+  serverProcess.catch(console.error)
+
+  const logUrlPattern = /(https?:\/\/\S+)/
+  for await (const line of serverProcess) {
+    const linePlain = stripAnsi(line)
+    const url = (logUrlPattern.exec(linePlain))?.[1]
+    if (url) {
+      return {
+        process: serverProcess,
+        url,
+      }
+    }
+  }
+
+  throw new Error(`Server process did not output a URL`)
+}
+
+export const runStart = async ({ cwd }: { cwd: string }): Promise<ServerProcess> => {
+  const $$ = $({ cwd })
+
+  const serverProcess = $$`pnpm run start`
+
+  // eslint-disable-next-line
+  serverProcess.catch((error: ProcessOutput) => {
+    // We cannot achieve a clean exit for some reason so far.
+    console.log(`runStart server process error -----------------`)
+    console.log(error)
+    console.log(`runStart server process error -----------------`)
+    // silence
+    // throw error
+  })
+
+  // todo: If we give some log output from server then we can use that to detect when the server is ready.
+  await $$`sleep 1`
+
+  return {
+    process: serverProcess,
+    url: `http://localhost:5174`,
+  }
+}
diff --git a/examples/_tests/helpers/test.ts b/examples/_tests/helpers/test.ts
@@ -0,0 +1,32 @@
+import { test as base } from 'playwright/test'
+import type { ServerProcess } from './run.js'
+import { runBuild, runDev, runStart } from './run.js'
+import type { ProcessOutput } from 'zx'
+
+interface Fixtures {
+  cwd: string
+  runDev: ServerProcess
+  runBuild: ProcessOutput
+  runStart: ServerProcess
+}
+
+export const test = base.extend<Fixtures>({
+  cwd: [process.cwd(), { option: true }],
+  runDev: async ({ cwd }, use) => {
+    const server = await runDev({ cwd })
+    // eslint-disable-next-line
+    await use(server)
+    await server.process.kill()
+  },
+  runBuild: async ({ cwd }, use) => {
+    const output = await runBuild({ cwd })
+    // eslint-disable-next-line
+    await use(output)
+  },
+  runStart: async ({ cwd, runBuild: _ }, use) => {
+    const server = await runStart({ cwd })
+    // eslint-disable-next-line
+    await use(server)
+    await server.process.kill(`SIGKILL`)
+  },
+})
diff --git a/examples/_tests/playwright.config.ts b/examples/_tests/playwright.config.ts
@@ -0,0 +1,31 @@
+import { defineConfig, devices } from 'playwright/test'
+
+const isCi = !!process.env[`CI`]
+
+export default defineConfig({
+  name: `examples`,
+  testDir: `./cases`,
+  testMatch: `*.ts`,
+  fullyParallel: true,
+  forbidOnly: isCi,
+  retries: isCi ? 2 : 0,
+  workers: isCi ? 1 : undefined,
+  outputDir: `./__results__`,
+  // reporter: `html`,
+  // use: {
+  //   baseURL: `http://localhost:5173`,
+  //   trace: `on-first-retry`,
+  //   screenshot: `only-on-failure`,
+  // },
+  projects: [
+    {
+      name: `chromium`,
+      use: { ...devices[`Desktop Chrome`] },
+    },
+  ],
+  // webServer: {
+  //   // We don't use the webServer config as we need more complex server management
+  //   // in our tests. Server starting and stopping is handled within the test files.
+  //   reuseExistingServer: true,
+  // },
+})
diff --git a/examples/github-developer-portal/package.json b/examples/github-developer-portal/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build --app",
-    "preview": "node dist/entry.js"
+    "start": "node dist/entry.js"
   },
   "devDependencies": {
     "typescript": "~5.8.3",

diff --git a/examples/github-developer-portal/vite.config.ts b/examples/github-developer-portal/vite.config.ts
@@ -2,6 +2,6 @@ import { Polen } from 'polen'
 
 export default Polen.createConfiguration({
   templateVariables: {
-    title: `GitHub GraphQL API`,
+    title: `GitHub Developer Portal`,
   },
 })