chore(e2e): Setup e2e test for streaming SSR (redwoodjs#9349)

.github/actions/actionsLib.mjs

@@ -62,9 +62,9 @@ export function projectCopy(redwoodProjectCwd) {
 }
 
 /**
- * @param {{ baseKeyPrefix: string, distKeyPrefix: string }} options
+ * @param {{ baseKeyPrefix: string, distKeyPrefix: string, canary: boolean }} options
  */
-export async function createCacheKeys({ baseKeyPrefix, distKeyPrefix }) {
+export async function createCacheKeys({ baseKeyPrefix, distKeyPrefix, canary }) {
   const baseKey = [
     baseKeyPrefix,
     process.env.RUNNER_OS,
@@ -76,7 +76,7 @@ export async function createCacheKeys({ baseKeyPrefix, distKeyPrefix }) {
     baseKey,
     'dependencies',
     await hashFiles(['yarn.lock', '.yarnrc.yml'].join('\n')),
-  ].join('-')
+  ].join('-') + (canary ? '-canary' : '')
 
   const distKey = [
     dependenciesKey,
@@ -91,7 +91,7 @@ export async function createCacheKeys({ baseKeyPrefix, distKeyPrefix }) {
       'lerna.json',
       'packages',
     ].join('\n'))
-  ].join('-')
+  ].join('-') + (canary ? '-canary' : '')
 
   return {
     baseKey,

.github/actions/set-up-test-project/action.yaml

@@ -9,6 +9,9 @@ inputs:
   bundler:
     description: The bundler to use (vite or webpack)
     default: vite
+  canary:
+    description: Upgrade the project to canary?
+    default: "false"
 
 outputs:
   test-project-path:

.github/actions/set-up-test-project/setUpTestProject.mjs

@@ -25,16 +25,20 @@ core.setOutput('test-project-path', TEST_PROJECT_PATH)
 
 const bundler = core.getInput('bundler')
 
+const canary = core.getInput('canary') === 'true'
+
+
 console.log({
   bundler,
+  canary
 })
 
 console.log()
 
 const {
   dependenciesKey,
   distKey
-} = await createCacheKeys({ baseKeyPrefix: 'test-project', distKeyPrefix: bundler })
+} = await createCacheKeys({ baseKeyPrefix: 'test-project', distKeyPrefix: bundler, canary })
 
 /**
  * @returns {Promise<void>}
@@ -54,17 +58,20 @@ async function main() {
     await sharedTasks()
   } else {
     console.log(`Cache not found for input keys: ${distKey}, ${dependenciesKey}`)
-    await setUpTestProject()
+    await setUpTestProject({
+      canary: true
+    })
   }
 
   await cache.saveCache([TEST_PROJECT_PATH], distKey)
   console.log(`Cache saved with key: ${distKey}`)
 }
 
 /**
+ *  *@param {{canary: boolean}} options
  * @returns {Promise<void>}
  */
-async function setUpTestProject() {
+async function setUpTestProject({ canary }) {
   const TEST_PROJECT_FIXTURE_PATH = path.join(
     REDWOOD_FRAMEWORK_PATH,
     '__fixtures__',
@@ -83,6 +90,12 @@ async function setUpTestProject() {
   await execInProject('yarn install')
   console.log()
 
+  if (canary) {
+    console.log(`Upgrading project to canary`)
+    await execInProject('yarn rw upgrade -t canary')
+    console.log()
+  }
+
   await cache.saveCache([TEST_PROJECT_PATH], dependenciesKey)
   console.log(`Cache saved with key: ${dependenciesKey}`)
 

.github/actions/ssr_related_changes/action.yml

@@ -0,0 +1,8 @@
+name: Streaming-SSR Related Changes
+description: Determines if the PR makes any changes related to SSR or streaming
+outputs:
+  rsc-related-changes:
+    description: If the PR makes any SSR related changes
+runs:
+  using: node20
+  main: ssr_related_changes.mjs

.github/actions/ssr_related_changes/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "ssr_related_changes",
+  "private": true,
+  "dependencies": {
+    "@actions/core": "1.10.0",
+    "@actions/exec": "1.1.1"
+  },
+  "packageManager": "yarn@3.6.3"
+}

.github/actions/ssr_related_changes/ssr_related_changes.mjs

@@ -0,0 +1,43 @@
+import core from '@actions/core'
+import { exec, getExecOutput } from '@actions/exec'
+
+async function main() {
+  const branch = process.env.GITHUB_BASE_REF
+
+  // If there is no branch, we're not in a pull request
+  if (!branch) {
+    core.setOutput('ssr-related-changes', false)
+    return
+  }
+
+  await exec(`git fetch origin ${branch}`)
+
+  const { stdout } = await getExecOutput(
+    `git diff origin/${branch} --name-only`
+  )
+
+  const changedFiles = stdout.toString().trim().split('\n').filter(Boolean)
+
+  for (const changedFile of changedFiles) {
+    console.log('changedFile', changedFile)
+
+    if (
+      changedFile.startsWith('tasks/smoke-tests/streaming-ssr') ||
+      changedFile.startsWith('tasks/smoke-tests/basePlaywright.config.ts') ||
+      changedFile.startsWith('github/actions/ssr_related_changes/') ||
+      changedFile.startsWith('packages/internal/') ||
+      changedFile.startsWith('packages/project-config/') ||
+      changedFile.startsWith('packages/web/') ||
+      changedFile.startsWith('packages/router/') ||
+      changedFile.startsWith('packages/web-server/') ||
+      changedFile.startsWith('packages/vite/')
+    ) {
+      core.setOutput('ssr-related-changes', true)
+      return
+    }
+  }
+
+  core.setOutput('ssr-related-changes', false)
+}
+
+main()

.github/actions/ssr_related_changes/yarn.lock

@@ -0,0 +1,66 @@
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
+
+__metadata:
+  version: 6
+  cacheKey: 8c0
+
+"@actions/core@npm:1.10.0":
+  version: 1.10.0
+  resolution: "@actions/core@npm:1.10.0"
+  dependencies:
+    "@actions/http-client": ^2.0.1
+    uuid: ^8.3.2
+  checksum: 9214d1e0cf5cf2a5d48b8f3b12488c6be9f6722ea60f2397409226e8410b5a3e12e558d9b66c93469d180399865ec20180119408a1770f026bd9ecac6965fcda
+  languageName: node
+  linkType: hard
+
+"@actions/exec@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@actions/exec@npm:1.1.1"
+  dependencies:
+    "@actions/io": ^1.0.1
+  checksum: 4a09f6bdbe50ce68b5cf8a7254d176230d6a74bccf6ecc3857feee209a8c950ba9adec87cc5ecceb04110182d1c17117234e45557d72fde6229b7fd3a395322a
+  languageName: node
+  linkType: hard
+
+"@actions/http-client@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@actions/http-client@npm:2.0.1"
+  dependencies:
+    tunnel: ^0.0.6
+  checksum: b58987ba2f53d7988f612ede7ff834573a3360c21f8fdea9fea92f26ada0fd0efafb22aa7d83f49c18965a5b765775d5253e2edb8d9476d924c4b304ef726b67
+  languageName: node
+  linkType: hard
+
+"@actions/io@npm:^1.0.1":
+  version: 1.1.2
+  resolution: "@actions/io@npm:1.1.2"
+  checksum: 61c871bbee1cf58f57917d9bb2cf6bb7ea4dc40de3f65c7fb4ec619ceff57fc98f56be9cca2d476b09e7a96e1cba0d88cd125c4f690d384b9483935186f256c1
+  languageName: node
+  linkType: hard
+
+"ssr_related_changes@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "ssr_related_changes@workspace:."
+  dependencies:
+    "@actions/core": 1.10.0
+    "@actions/exec": 1.1.1
+  languageName: unknown
+  linkType: soft
+
+"tunnel@npm:^0.0.6":
+  version: 0.0.6
+  resolution: "tunnel@npm:0.0.6"
+  checksum: e27e7e896f2426c1c747325b5f54efebc1a004647d853fad892b46d64e37591ccd0b97439470795e5262b5c0748d22beb4489a04a0a448029636670bfd801b75
+  languageName: node
+  linkType: hard
+
+"uuid@npm:^8.3.2":
+  version: 8.3.2
+  resolution: "uuid@npm:8.3.2"
+  bin:
+    uuid: dist/bin/uuid
+  checksum: bcbb807a917d374a49f475fae2e87fdca7da5e5530820ef53f65ba1d12131bd81a92ecf259cc7ce317cbe0f289e7d79fdfebcef9bfa3087c8c8a2fa304c9be54
+  languageName: node
+  linkType: hard

.github/workflows/ci.yml

@@ -64,6 +64,31 @@ jobs:
         id: rsc-related-changes
         uses: ./.github/actions/rsc_related_changes
 
+  ssr-related-changes:
+    needs: check
+    if: github.repository == 'redwoodjs/redwood'
+    name: 🌤️ SSR related changes?
+    runs-on: ubuntu-latest
+    outputs:
+      ssr-related-changes: ${{ steps.ssr-related-changes.outputs.ssr-related-changes }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: ⬢ Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: 🐈 Yarn install
+        working-directory: ./.github/actions/ssr_related_changes
+        run: yarn install --inline-builds
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+
+      - name: 🌤️ SSR related changes?
+        id: ssr-related-changes
+        uses: ./.github/actions/ssr_related_changes
+
   check:
     needs: only-doc-changes
     if: needs.only-doc-changes.outputs.only-doc-changes == 'false'
@@ -232,6 +257,80 @@ jobs:
     steps:
       - run: echo "Only doc changes"
 
+  ssr-smoke-tests:
+    needs: ssr-related-changes
+    if: needs.ssr-related-changes.outputs.ssr-related-changes == 'true'
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        # [ubuntu-latest, windows-latest] disabled, because windows misbehaving
+        # waiting for help from main-man Josh
+
+    name: 🔁 SSR Smoke tests / ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+
+    env:
+      REDWOOD_CI: 1
+      REDWOOD_VERBOSE_TELEMETRY: 1
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: ⬢ Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: 🐈 Set up yarn cache
+        uses: ./.github/actions/set-up-yarn-cache
+
+      - name: 🐈 Yarn install
+        run: yarn install --inline-builds
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+
+      - name: 🔨 Build
+        run: yarn build
+
+      - name: 🌲 Set up test project
+        id: set-up-test-project
+        uses: ./.github/actions/set-up-test-project
+        with:
+          bundler: vite
+          canary: true
+        env:
+          REDWOOD_DISABLE_TELEMETRY: 1
+          YARN_ENABLE_IMMUTABLE_INSTALLS: false
+
+      - name: Run SSR codemods on test project
+        run: ./tasks/test-project/convert-to-ssr-fixture ${{ steps.set-up-test-project.outputs.test-project-path }}
+        env:
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: 🎭 Install playwright dependencies
+        run: npx playwright install --with-deps chromium
+
+      - name: Run SSR [DEV] smoke tests
+        working-directory: ./tasks/smoke-tests/streaming-ssr-dev
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: '${{ steps.set-up-test-project.outputs.test-project-path }}'
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: Build for production
+        working-directory: ${{ steps.set-up-test-project.outputs.test-project-path }}
+        run: yarn rw build --no-prerender
+        env:
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: Run SSR [PROD] smoke tests
+        working-directory: ./tasks/smoke-tests/streaming-ssr-prod
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: '${{ steps.set-up-test-project.outputs.test-project-path }}'
+          REDWOOD_DISABLE_TELEMETRY: 1
+
   smoke-tests:
     needs: check
 

.yarnrc.yml

@@ -17,3 +17,4 @@ plugins:
 preferInteractive: true
 
 yarnPath: .yarn/releases/yarn-3.6.3.cjs
+

packages/cli/src/commands/experimental/setupStreamingSsrHandler.js

@@ -3,6 +3,7 @@ import path from 'path'
 
 import { Listr } from 'listr2'
 
+import { addWebPackages } from '@redwoodjs/cli-helpers'
 import { getConfigPath } from '@redwoodjs/project-config'
 import { errorTelemetry } from '@redwoodjs/telemetry'
 
@@ -158,6 +159,9 @@ export const handler = async ({ force, verbose }) => {
           })
         },
       },
+      addWebPackages([
+        '@apollo/experimental-nextjs-app-support@0.0.0-commit-b8a73fe',
+      ]),
       {
         task: () => {
           printTaskEpilogue(command, description, EXPERIMENTAL_TOPIC_ID)

packages/vite/src/index.ts

@@ -10,6 +10,7 @@ import { getConfig, getPaths } from '@redwoodjs/project-config'
 
 import handleJsAsJsx from './plugins/vite-plugin-jsx-loader'
 import removeFromBundle from './plugins/vite-plugin-remove-from-bundle'
+import swapApolloProvider from './plugins/vite-plugin-swap-apollo-provider'
 
 /**
  * Pre-configured vite plugin, with required config for Redwood apps.
@@ -261,6 +262,8 @@ export default function redwoodPluginVite(): PluginOption[] {
         }
       },
     },
+    // We can remove when streaming is stable
+    rwConfig.experimental.streamingSsr.enabled && swapApolloProvider(),
     // -----------------
     handleJsAsJsx(),
     // Remove the splash-page from the bundle.

packages/vite/src/plugins/__tests__/swap-apollo-provider.test.mts

@@ -0,0 +1,18 @@
+import assert from 'node:assert/strict'
+import { describe, it } from 'node:test'
+
+import plugin from '../vite-plugin-swap-apollo-provider.js'
+
+// @ts-expect-error node test not configured correctly
+const swapApolloProvider = plugin.default
+
+
+describe('excludeModule', () => {
+  it('should swap the import', async() => {
+    const plugin = swapApolloProvider()
+
+   const output = await plugin.transform(`import ApolloProvider from '@redwoodjs/web/apollo'`, '/Users/dac09/Experiments/ssr-2354/web/src/App.tsx')
+
+   assert.strictEqual(output, "import ApolloProvider from '@redwoodjs/web/dist/apollo/suspense'")
+})
+})