From d13a4d852c44339dfa302443610ea2a8072e5eb3 Mon Sep 17 00:00:00 2001
From: Andreas Heissenberger <andreas@heissenberger.at>
Date: Tue, 13 Feb 2024 14:48:08 +0100
Subject: [PATCH 1/6] feat: Test bundling npm packages which provide
 environment depended code parts

---
 e2e/fixtures/ssr-target-bundle/README.md      |  3 +
 e2e/fixtures/ssr-target-bundle/package.json   | 23 +++++
 .../ssr-target-bundle/src/components/App.tsx  | 13 +++
 .../src/components/Textarea.tsx               | 10 +++
 .../ssr-target-bundle/src/entries.tsx         | 28 ++++++
 e2e/fixtures/ssr-target-bundle/src/main.tsx   | 17 ++++
 e2e/fixtures/ssr-target-bundle/tsconfig.json  | 16 ++++
 e2e/ssr-target-bundle.spec.ts                 | 86 +++++++++++++++++++
 8 files changed, 196 insertions(+)
 create mode 100644 e2e/fixtures/ssr-target-bundle/README.md
 create mode 100644 e2e/fixtures/ssr-target-bundle/package.json
 create mode 100644 e2e/fixtures/ssr-target-bundle/src/components/App.tsx
 create mode 100644 e2e/fixtures/ssr-target-bundle/src/components/Textarea.tsx
 create mode 100644 e2e/fixtures/ssr-target-bundle/src/entries.tsx
 create mode 100644 e2e/fixtures/ssr-target-bundle/src/main.tsx
 create mode 100644 e2e/fixtures/ssr-target-bundle/tsconfig.json
 create mode 100644 e2e/ssr-target-bundle.spec.ts

diff --git a/e2e/fixtures/ssr-target-bundle/README.md b/e2e/fixtures/ssr-target-bundle/README.md
new file mode 100644
index 000000000..183341d89
--- /dev/null
+++ b/e2e/fixtures/ssr-target-bundle/README.md
@@ -0,0 +1,3 @@
+# SSR Bundling for NPM packages with environment depended code parts
+
+Choosing the right code based on the `export` section of the `react-textarea-autosize` module based on the backend server deployment target ('node' | 'webworker') and the client browser. No browser only code should be bundled with server only code.
diff --git a/e2e/fixtures/ssr-target-bundle/package.json b/e2e/fixtures/ssr-target-bundle/package.json
new file mode 100644
index 000000000..bbaebb271
--- /dev/null
+++ b/e2e/fixtures/ssr-target-bundle/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "ssr-basic",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev --with-ssr",
+    "build": "waku build --with-ssr",
+    "start": "waku start --with-ssr"
+  },
+  "dependencies": {
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
+    "react-textarea-autosize": "^8.5.3",
+    "waku": "0.19.2"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.55",
+    "@types/react-dom": "18.2.19",
+    "typescript": "5.3.3"
+  }
+}
diff --git a/e2e/fixtures/ssr-target-bundle/src/components/App.tsx b/e2e/fixtures/ssr-target-bundle/src/components/App.tsx
new file mode 100644
index 000000000..904e52da3
--- /dev/null
+++ b/e2e/fixtures/ssr-target-bundle/src/components/App.tsx
@@ -0,0 +1,13 @@
+import { Textarea } from './Textarea.js';
+
+const App = ({ name }: { name: string }) => {
+  return (
+    <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
+      <title>Waku example</title>
+      <h1 data-testid="app-name">{name}</h1>
+      <Textarea />
+    </div>
+  );
+};
+
+export default App;
diff --git a/e2e/fixtures/ssr-target-bundle/src/components/Textarea.tsx b/e2e/fixtures/ssr-target-bundle/src/components/Textarea.tsx
new file mode 100644
index 000000000..c4343295a
--- /dev/null
+++ b/e2e/fixtures/ssr-target-bundle/src/components/Textarea.tsx
@@ -0,0 +1,10 @@
+'use client';
+import TextareaAutosize from 'react-textarea-autosize';
+
+export const Textarea = () => {
+  return (
+    <div>
+      <TextareaAutosize data-testid="textarea" defaultValue={'EMPTY'} />
+    </div>
+  );
+};
diff --git a/e2e/fixtures/ssr-target-bundle/src/entries.tsx b/e2e/fixtures/ssr-target-bundle/src/entries.tsx
new file mode 100644
index 000000000..3c2365ef1
--- /dev/null
+++ b/e2e/fixtures/ssr-target-bundle/src/entries.tsx
@@ -0,0 +1,28 @@
+import { lazy } from 'react';
+import { defineEntries } from 'waku/server';
+import { Slot } from 'waku/client';
+
+const App = lazy(() => import('./components/App.js'));
+
+export default defineEntries(
+  // renderEntries
+  async (input) => {
+    return {
+      App: <App name={input || 'Waku'} />,
+    };
+  },
+  // getBuildConfig
+  async () => [{ pathname: '/', entries: [{ input: '' }] }],
+  // getSsrConfig
+  async (pathname) => {
+    switch (pathname) {
+      case '/':
+        return {
+          input: '',
+          body: <Slot id="App" />,
+        };
+      default:
+        return null;
+    }
+  },
+);
diff --git a/e2e/fixtures/ssr-target-bundle/src/main.tsx b/e2e/fixtures/ssr-target-bundle/src/main.tsx
new file mode 100644
index 000000000..bc436da93
--- /dev/null
+++ b/e2e/fixtures/ssr-target-bundle/src/main.tsx
@@ -0,0 +1,17 @@
+import { StrictMode } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { Root, Slot } from 'waku/client';
+
+const rootElement = (
+  <StrictMode>
+    <Root>
+      <Slot id="App" />
+    </Root>
+  </StrictMode>
+);
+
+if (import.meta.env.WAKU_HYDRATE) {
+  hydrateRoot(document.body, rootElement);
+} else {
+  createRoot(document.body).render(rootElement);
+}
diff --git a/e2e/fixtures/ssr-target-bundle/tsconfig.json b/e2e/fixtures/ssr-target-bundle/tsconfig.json
new file mode 100644
index 000000000..8a8505011
--- /dev/null
+++ b/e2e/fixtures/ssr-target-bundle/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "nodenext",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx",
+    "rootDir": "./src",
+    "outDir": "./dist"
+  }
+}
diff --git a/e2e/ssr-target-bundle.spec.ts b/e2e/ssr-target-bundle.spec.ts
new file mode 100644
index 000000000..e8372fb75
--- /dev/null
+++ b/e2e/ssr-target-bundle.spec.ts
@@ -0,0 +1,86 @@
+import { expect } from '@playwright/test';
+import { execSync, exec, ChildProcess } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import waitPort from 'wait-port';
+import { getFreePort, test } from './utils.js';
+import { rm } from 'node:fs/promises';
+
+const waku = fileURLToPath(
+  new URL('../packages/waku/dist/cli.js', import.meta.url),
+);
+
+const commands = [
+  {
+    command: 'dev --with-ssr',
+  },
+  {
+    build: 'build --with-ssr',
+    command: 'start --with-ssr',
+  },
+];
+
+const cwd = fileURLToPath(new URL('./fixtures/ssr-target-bundle', import.meta.url));
+
+for (const { build, command } of commands) {
+  test.describe(`ssr-target-bundle: ${command}`, () => {
+    let cp: ChildProcess;
+    let port: number;
+    test.beforeAll('remove cache', async () => {
+      await rm(`${cwd}/dist`, {
+        recursive: true,
+        force: true,
+      });
+    });
+
+    test.beforeAll(async () => {
+      if (build) {
+        execSync(`node ${waku} ${build}`, {
+          cwd,
+        });
+      }
+      port = await getFreePort();
+      cp = exec(`node ${waku} ${command}`, {
+        cwd,
+        env: {
+          ...process.env,
+          PORT: `${port}`,
+        },
+      });
+      cp.stdout?.on('data', (data) => {
+        console.log(`${port} stdout: `, `${data}`);
+      });
+      cp.stderr?.on('data', (data) => {
+        console.error(`${port} stderr: `, `${data}`);
+      });
+      await waitPort({
+        port,
+      });
+    });
+
+    test.afterAll(async () => {
+      cp.kill();
+    });
+
+    test('add text input', async ({ page }) => {
+      await page.goto(`http://localhost:${port}/`);
+      await expect(page.getByTestId('app-name')).toHaveText('Waku');
+      await expect(page.getByTestId('textarea')).toHaveValue('EMPTY');
+      const height = await page.getByTestId('textarea').evaluate((el) => el.clientHeight);
+      await page.getByTestId('textarea').fill("Line1\nLine2\nLine3");
+      const heightChanged = await page.getByTestId('textarea').evaluate((el) => el.clientHeight);
+      expect(heightChanged).toBeGreaterThan(height);
+    });
+
+    test('no js environment should have first screen', async ({ browser }) => {
+      const context = await browser.newContext({
+        javaScriptEnabled: false,
+      });
+      const page = await context.newPage();
+      await page.goto(`http://localhost:${port}/`);
+      await expect(page.getByTestId('app-name')).toHaveText('Waku');
+      await expect(page.getByTestId('textarea')).toHaveValue('EMPTY');
+      await page.close();
+      await context.close();
+    });
+  });
+}

From f88cb83ea951f17282aaacfe97d83bacfbc64cdc Mon Sep 17 00:00:00 2001
From: Andreas Heissenberger <andreas@heissenberger.at>
Date: Tue, 13 Feb 2024 14:57:16 +0100
Subject: [PATCH 2/6] add lock file

---
 pnpm-lock.yaml | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 860d666fe..048af0a5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -150,6 +150,34 @@ importers:
         specifier: 5.3.3
         version: 5.3.3
 
+  e2e/fixtures/ssr-target-bundle:
+    dependencies:
+      react:
+        specifier: 18.3.0-canary-4b2a1115a-20240202
+        version: 18.3.0-canary-4b2a1115a-20240202
+      react-dom:
+        specifier: 18.3.0-canary-4b2a1115a-20240202
+        version: 18.3.0-canary-4b2a1115a-20240202(react@18.3.0-canary-4b2a1115a-20240202)
+      react-server-dom-webpack:
+        specifier: 18.3.0-canary-4b2a1115a-20240202
+        version: 18.3.0-canary-4b2a1115a-20240202(react-dom@18.3.0-canary-4b2a1115a-20240202)(react@18.3.0-canary-4b2a1115a-20240202)(webpack@5.90.1)
+      react-textarea-autosize:
+        specifier: ^8.5.3
+        version: 8.5.3(@types/react@18.2.55)(react@18.3.0-canary-4b2a1115a-20240202)
+      waku:
+        specifier: 0.19.2
+        version: link:../../../packages/waku
+    devDependencies:
+      '@types/react':
+        specifier: 18.2.55
+        version: 18.2.55
+      '@types/react-dom':
+        specifier: 18.2.19
+        version: 18.2.19
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
+
   examples/01_template:
     dependencies:
       react:
@@ -5398,6 +5426,20 @@ packages:
       react-dom: 18.3.0-canary-4b2a1115a-20240202(react@18.3.0-canary-4b2a1115a-20240202)
       webpack: 5.90.1
 
+  /react-textarea-autosize@8.5.3(@types/react@18.2.55)(react@18.3.0-canary-4b2a1115a-20240202):
+    resolution: {integrity: sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.23.9
+      react: 18.3.0-canary-4b2a1115a-20240202
+      use-composed-ref: 1.3.0(react@18.3.0-canary-4b2a1115a-20240202)
+      use-latest: 1.2.1(@types/react@18.2.55)(react@18.3.0-canary-4b2a1115a-20240202)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /react-wrap-balancer@1.1.0(react@18.3.0-canary-4b2a1115a-20240202):
     resolution: {integrity: sha512-EhF3jOZm5Fjx+Cx41e423qOv2c2aOvXAtym2OHqrGeMUnwERIyNsRBgnfT3plB170JmuYvts8K2KSPEIerKr5A==}
     peerDependencies:
@@ -6325,6 +6367,41 @@ packages:
     resolution: {integrity: sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ==}
     dev: true
 
+  /use-composed-ref@1.3.0(react@18.3.0-canary-4b2a1115a-20240202):
+    resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.3.0-canary-4b2a1115a-20240202
+    dev: false
+
+  /use-isomorphic-layout-effect@1.1.2(@types/react@18.2.55)(react@18.3.0-canary-4b2a1115a-20240202):
+    resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.55
+      react: 18.3.0-canary-4b2a1115a-20240202
+    dev: false
+
+  /use-latest@1.2.1(@types/react@18.2.55)(react@18.3.0-canary-4b2a1115a-20240202):
+    resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.55
+      react: 18.3.0-canary-4b2a1115a-20240202
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.55)(react@18.3.0-canary-4b2a1115a-20240202)
+    dev: false
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true

From 5fb87640c745956c2c62c76fafa8c682d4ff59bb Mon Sep 17 00:00:00 2001
From: Andreas Heissenberger <andreas@heissenberger.at>
Date: Tue, 13 Feb 2024 15:14:12 +0100
Subject: [PATCH 3/6] fix formating

---
 e2e/ssr-target-bundle.spec.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/e2e/ssr-target-bundle.spec.ts b/e2e/ssr-target-bundle.spec.ts
index e8372fb75..389478312 100644
--- a/e2e/ssr-target-bundle.spec.ts
+++ b/e2e/ssr-target-bundle.spec.ts
@@ -19,7 +19,9 @@ const commands = [
   },
 ];
 
-const cwd = fileURLToPath(new URL('./fixtures/ssr-target-bundle', import.meta.url));
+const cwd = fileURLToPath(
+  new URL('./fixtures/ssr-target-bundle', import.meta.url),
+);
 
 for (const { build, command } of commands) {
   test.describe(`ssr-target-bundle: ${command}`, () => {
@@ -65,9 +67,13 @@ for (const { build, command } of commands) {
       await page.goto(`http://localhost:${port}/`);
       await expect(page.getByTestId('app-name')).toHaveText('Waku');
       await expect(page.getByTestId('textarea')).toHaveValue('EMPTY');
-      const height = await page.getByTestId('textarea').evaluate((el) => el.clientHeight);
-      await page.getByTestId('textarea').fill("Line1\nLine2\nLine3");
-      const heightChanged = await page.getByTestId('textarea').evaluate((el) => el.clientHeight);
+      const height = await page
+        .getByTestId('textarea')
+        .evaluate((el) => el.clientHeight);
+      await page.getByTestId('textarea').fill('Line1\nLine2\nLine3');
+      const heightChanged = await page
+        .getByTestId('textarea')
+        .evaluate((el) => el.clientHeight);
       expect(heightChanged).toBeGreaterThan(height);
     });
 

From 05e2f0dd26686b793272dd200ba68bad2f6dbd30 Mon Sep 17 00:00:00 2001
From: Daishi Kato <dai-shi@users.noreply.github.com>
Date: Wed, 14 Feb 2024 08:56:36 +0900
Subject: [PATCH 4/6] Update e2e/fixtures/ssr-target-bundle/package.json

---
 e2e/fixtures/ssr-target-bundle/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/fixtures/ssr-target-bundle/package.json b/e2e/fixtures/ssr-target-bundle/package.json
index bbaebb271..6ce170e5e 100644
--- a/e2e/fixtures/ssr-target-bundle/package.json
+++ b/e2e/fixtures/ssr-target-bundle/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ssr-basic",
+  "name": "ssr-target-bundle",
   "version": "0.1.0",
   "type": "module",
   "private": true,

From e9e4f912caf5ac73e3c16c85ac9300d8b14568c4 Mon Sep 17 00:00:00 2001
From: Andreas Heissenberger <andreas@heissenberger.at>
Date: Wed, 14 Feb 2024 01:13:31 +0100
Subject: [PATCH 5/6] fix: waku from monorepo, add test to gloabt tsconfig.e2e

---
 e2e/fixtures/ssr-target-bundle/package.json | 2 +-
 tsconfig.e2e.json                           | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/e2e/fixtures/ssr-target-bundle/package.json b/e2e/fixtures/ssr-target-bundle/package.json
index 6ce170e5e..daff6ef3c 100644
--- a/e2e/fixtures/ssr-target-bundle/package.json
+++ b/e2e/fixtures/ssr-target-bundle/package.json
@@ -13,7 +13,7 @@
     "react-dom": "18.3.0-canary-4b2a1115a-20240202",
     "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
     "react-textarea-autosize": "^8.5.3",
-    "waku": "0.19.2"
+    "waku": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "18.2.55",
diff --git a/tsconfig.e2e.json b/tsconfig.e2e.json
index 882b10f7e..cbffee426 100644
--- a/tsconfig.e2e.json
+++ b/tsconfig.e2e.json
@@ -14,6 +14,9 @@
     },
     {
       "path": "./e2e/fixtures/rsc-router/tsconfig.json"
+    },
+    {
+      "path": "./e2e/fixtures/ssr-target-bundle/tsconfig.json"
     }
   ]
 }

From c7f093c3d76c607fb10c9a0cfb43b28e2d7b42df Mon Sep 17 00:00:00 2001
From: Andreas Heissenberger <andreas@heissenberger.at>
Date: Wed, 14 Feb 2024 01:22:25 +0100
Subject: [PATCH 6/6] fix lockfile

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 048af0a5c..5988657d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -165,7 +165,7 @@ importers:
         specifier: ^8.5.3
         version: 8.5.3(@types/react@18.2.55)(react@18.3.0-canary-4b2a1115a-20240202)
       waku:
-        specifier: 0.19.2
+        specifier: workspace:*
         version: link:../../../packages/waku
     devDependencies:
       '@types/react':