chore: create monorepo e2e spec

Author: rmarscher

e2e/fixtures/monorepo/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "monorepo",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ]
+}

e2e/fixtures/monorepo/packages/waku-project/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.env*
+*.tsbuildinfo
+.cache
+.DS_Store
+*.pem

e2e/fixtures/monorepo/packages/waku-project/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "waku-project",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
+  },
+  "dependencies": {
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-server-dom-webpack": "19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
+    "autoprefixer": "10.4.20",
+    "tailwindcss": "3.4.16",
+    "typescript": "5.7.2"
+  }
+}

e2e/fixtures/monorepo/packages/waku-project/postcss.config.js

@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

e2e/fixtures/monorepo/packages/waku-project/public/images/favicon.png

@@ -0,0 +1,21 @@
+'use client';
+
+import { useState } from 'react';
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  const handleIncrement = () => setCount((c) => c + 1);
+
+  return (
+    <section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
+      <div>Count: {count}</div>
+      <button
+        onClick={handleIncrement}
+        className="rounded-sm bg-black px-2 py-0.5 text-sm text-white"
+      >
+        Increment
+      </button>
+    </section>
+  );
+};

e2e/fixtures/monorepo/packages/waku-project/src/components/counter.tsx

@@ -0,0 +1,18 @@
+export const Footer = () => {
+  return (
+    <footer className="p-6 lg:fixed lg:bottom-0 lg:left-0">
+      <div>
+        visit{' '}
+        <a
+          href="https://waku.gg/"
+          target="_blank"
+          rel="noreferrer"
+          className="mt-4 inline-block underline"
+        >
+          waku.gg
+        </a>{' '}
+        to learn more
+      </div>
+    </footer>
+  );
+};

e2e/fixtures/monorepo/packages/waku-project/src/components/footer.tsx

@@ -0,0 +1,11 @@
+import { Link } from 'waku';
+
+export const Header = () => {
+  return (
+    <header className="flex items-center gap-4 p-6 lg:fixed lg:left-0 lg:top-0">
+      <h2 className="text-lg font-bold tracking-tight">
+        <Link to="/">Waku starter</Link>
+      </h2>
+    </header>
+  );
+};

e2e/fixtures/monorepo/packages/waku-project/src/components/header.tsx

@@ -0,0 +1,39 @@
+import '../styles.css';
+
+import type { ReactNode } from 'react';
+
+import { Header } from '../components/header';
+import { Footer } from '../components/footer';
+
+type RootLayoutProps = { children: ReactNode };
+
+export default async function RootLayout({ children }: RootLayoutProps) {
+  const data = await getData();
+
+  return (
+    <div className="font-['Nunito']">
+      <meta name="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <Header />
+      <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    description: 'An internet website!',
+    icon: '/images/favicon.png',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  } as const;
+};

e2e/fixtures/monorepo/packages/waku-project/src/pages/_layout.tsx

@@ -0,0 +1,32 @@
+import { Link } from 'waku';
+
+export default async function AboutPage() {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
+      <p>{data.body}</p>
+      <Link to="/" className="mt-4 inline-block underline">
+        Return home
+      </Link>
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    title: 'About',
+    headline: 'About Waku',
+    body: 'The minimal React framework',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  } as const;
+};

e2e/fixtures/monorepo/packages/waku-project/src/pages/about.tsx

@@ -0,0 +1,35 @@
+import { Link } from 'waku';
+
+import { Counter } from '../components/counter';
+
+export default async function HomePage() {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className="text-4xl font-bold tracking-tight" data-testid="header">{data.headline}</h1>
+      <p>{data.body}</p>
+      <Counter />
+      <Link to="/about" className="mt-4 inline-block underline">
+        About page
+      </Link>
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    title: 'Waku',
+    headline: 'Waku',
+    body: 'Hello world!',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  } as const;
+};

e2e/fixtures/monorepo/packages/waku-project/src/pages/index.tsx

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

e2e/fixtures/monorepo/packages/waku-project/src/styles.css

@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};

e2e/fixtures/monorepo/packages/waku-project/tailwind.config.js

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "types": ["react/experimental"],
+    "jsx": "react-jsx"
+  }
+}

e2e/fixtures/monorepo/packages/waku-project/tsconfig.json

@@ -0,0 +1,81 @@
+import { debugChildProcess, getFreePort, terminate, test } from './utils.js';
+import { fileURLToPath } from 'node:url';
+import { cp, mkdtemp } from 'node:fs/promises';
+import { exec, execSync } from 'node:child_process';
+import { expect } from '@playwright/test';
+import waitPort from 'wait-port';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { createRequire } from 'node:module';
+
+let standaloneDir: string;
+let standaloneAppDir: string;
+const appRelativePath = '/packages/waku-project';
+const exampleDir = fileURLToPath(
+  new URL('./fixtures/monorepo', import.meta.url),
+);
+const wakuDir = fileURLToPath(new URL('../packages/waku', import.meta.url));
+const { version } = createRequire(import.meta.url)(
+  join(wakuDir, 'package.json'),
+);
+
+async function start() {
+  const port = await getFreePort();
+  const cp = exec(
+    `node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} start --port ${port}`,
+    { cwd: standaloneDir },
+  );
+  debugChildProcess(cp, fileURLToPath(import.meta.url), [
+    /ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time/,
+  ]);
+
+  await waitPort({ port });
+  return [port, cp.pid] as const;
+}
+
+test.describe('monorepo', async () => {
+  test.beforeEach(async () => {
+    // GitHub Action on Windows doesn't support mkdtemp on global temp dir,
+    // Which will cause files in `src` folder to be empty.
+    // I don't know why
+    const tmpDir = process.env.TEMP_DIR ? process.env.TEMP_DIR : tmpdir();
+    standaloneDir = await mkdtemp(join(tmpDir, 'waku-monorepo-'));
+    standaloneAppDir = join(standaloneDir, appRelativePath);
+    await cp(exampleDir, standaloneDir, {
+      filter: (src) => {
+        return !src.includes('node_modules') && !src.includes('dist');
+      },
+      recursive: true,
+    });
+
+    // FIXME we need to `npm install` in the monorepo but
+    // how do we copy in the local version of waku or link
+    // it in a way that will accurately match what happens
+    // with the npm published version.
+    execSync(`pnpm pack --pack-destination ${standaloneDir}`, {
+      cwd: wakuDir,
+      stdio: 'inherit',
+    });
+    const name = `waku-${version}.tgz`;
+    execSync(`npm install ${join(standaloneDir, name)}`, {
+      cwd: standaloneDir,
+      stdio: 'inherit',
+    });
+    execSync(
+      `node ${join(standaloneDir, './node_modules/waku/dist/cli.js')} build`,
+      {
+        cwd: standaloneAppDir,
+        stdio: 'inherit',
+      },
+    );
+  });
+
+  test.describe('renders', () => {
+    test(`the home page`, async ({ page }) => {
+      const [port, pid] = await start();
+      await page.goto(`http://localhost:${port}`);
+      await expect(page.getByTestId('header')).toHaveText('Waku');
+      await terminate(pid!);
+    });
+  });
+});