fwouts · fwouts · Aug 22, 2023 · Aug 25, 2023 · Aug 25, 2023 · Aug 25, 2023
diff --git a/component-test/LICENSE b/component-test/LICENSE
diff --git a/component-test/index.html b/component-test/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/component-test/package.json b/component-test/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@previewjs/component-test",
+  "version": "0.0.0",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "e2e-test": "playwright test"
+  },
+  "dependencies": {
+    "@types/lodash": "^4.14.197",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.38.1",
+    "@previewjs/core": "workspace:*",
+    "@previewjs/iframe": "workspace:*",
+    "@previewjs/plugin-react": "workspace:*",
+    "@types/fs-extra": "^11.0.1",
+    "@types/node": "^18.16.14",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.4",
+    "fs-extra": "^11.1.1",
+    "playwright": "^1.38.1",
+    "typescript": "^5.2.2",
+    "unbuild": "^2.0.0",
+    "vite": "^4.4.9"
+  }
+}
diff --git a/component-test/playwright.config.ts b/component-test/playwright.config.ts
@@ -0,0 +1,2 @@
+import { defineConfig } from "@playwright/test";
+export default defineConfig({});
diff --git a/component-test/public/vite.svg b/component-test/public/vite.svg
diff --git a/component-test/src/App.css b/component-test/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/component-test/src/App.tsx b/component-test/src/App.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import "./App.css";
+import reactLogo from "./assets/react.svg";
+import viteLogo from "/vite.svg";
+
+function App({ title }: { title: React.ReactNode }) {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="App">
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://reactjs.org" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>{title}</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </div>
+  );
+}
+
+export default App;
diff --git a/component-test/src/Bold.tsx b/component-test/src/Bold.tsx
@@ -0,0 +1,3 @@
+export const Bold = ({ children }: { children: React.ReactNode }) => (
+  <i>{children}</i>
+);
diff --git a/component-test/src/Foo.tsx b/component-test/src/Foo.tsx
@@ -0,0 +1,10 @@
+import { isEqual } from "lodash";
+import { Bold } from "./Bold";
+
+export const Foo = () => {
+  return (
+    <div>
+      Hello: <Bold>{isEqual(1, 2)}</Bold>!
+    </div>
+  );
+};
diff --git a/component-test/src/assets/react.svg b/component-test/src/assets/react.svg
diff --git a/component-test/src/example.spec.tsx b/component-test/src/example.spec.tsx
@@ -0,0 +1,19 @@
+import react from "@previewjs/plugin-react";
+import { setupTest } from "./lib";
+
+const test = setupTest(react);
+
+test.describe("example", () => {
+  test("foo", async ({ page, runInPage }) => {
+    await runInPage(async (message) => {
+      const { default: App } = await import("./App");
+
+      await mount(<App title={message} />);
+    }, "hello world");
+
+    await page.waitForSelector("text=hello world");
+    await page.screenshot({
+      path: "src/example.spec.output.png",
+    });
+  });
+});
diff --git a/component-test/src/index.css b/component-test/src/index.css
@@ -0,0 +1,69 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/component-test/src/lib.ts b/component-test/src/lib.ts
@@ -0,0 +1,90 @@
+import { test as base } from "@playwright/test";
+import type {
+  FrameworkPluginFactory,
+  PreviewServer,
+  Workspace,
+} from "@previewjs/core";
+import { createWorkspace } from "@previewjs/core";
+import "@previewjs/iframe";
+import path from "path";
+
+let cache: Map<
+  FrameworkPluginFactory,
+  ReturnType<typeof createTest>
+> = new Map();
+
+export function setupTest(frameworkPluginFactory: FrameworkPluginFactory) {
+  const cached = cache.get(frameworkPluginFactory);
+  if (cached !== undefined) {
+    return cached;
+  }
+  const test = createTest(frameworkPluginFactory);
+  cache.set(frameworkPluginFactory, test);
+  return test;
+}
+
+function createTest(frameworkPluginFactory: FrameworkPluginFactory) {
+  return base.extend<
+    {
+      runInPage(pageFunction: () => Promise<void>): Promise<void>;
+      runInPage<Arg>(
+        pageFunction: (arg: Arg) => Promise<void>,
+        arg: Arg
+      ): Promise<void>;
+    },
+    { previewServer: PreviewServer; previewWorkspace: Workspace }
+  >({
+    previewWorkspace: [
+      // eslint-disable-next-line no-empty-pattern
+      async ({}, use, { config }) => {
+        const workspace = await createWorkspace({
+          rootDir: config.rootDir,
+          frameworkPlugins: [frameworkPluginFactory],
+        });
+        await use(workspace);
+        await workspace.dispose();
+      },
+      { scope: "worker" },
+    ],
+    previewServer: [
+      async ({ previewWorkspace }, use) => {
+        const previewServer = await previewWorkspace.startServer();
+        await use(previewServer);
+        await previewServer.stop();
+      },
+      { scope: "worker" },
+    ],
+    runInPage: async (
+      { previewWorkspace, previewServer, page },
+      use,
+      testInfo
+    ) => {
+      use(async function runInPage<Arg = never>(
+        pageFunction: (arg: Arg) => Promise<void>,
+        arg?: Arg
+      ): Promise<void> {
+        let resolvePromise!: () => void;
+        const onRenderDone = new Promise<void>((resolve) => {
+          resolvePromise = resolve;
+        });
+        await page.exposeFunction("__ON_PREVIEWJS_MOUNTED__", resolvePromise);
+        await page.exposeFunction("__PREVIEWJS_BOOSTRAP_HOOK__", async () => {
+          await page.evaluate(
+            async ([pageFunctionStr, arg]) => {
+              const pageFunction = eval(pageFunctionStr);
+              await pageFunction(arg);
+              // @ts-expect-error
+              window.__ON_PREVIEWJS_MOUNTED__();
+            },
+            [pageFunction.toString(), arg] as const
+          );
+        });
+        const currentPath = path
+          .relative(previewWorkspace.rootDir, path.dirname(testInfo.file))
+          .replaceAll(path.delimiter, "/");
+        await page.goto(`${previewServer.url()}/${currentPath}/`);
+        await onRenderDone;
+      });
+    },
+  });
+}
diff --git a/component-test/src/main.tsx b/component-test/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/component-test/src/vite-env.d.ts b/component-test/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/component-test/tsconfig.json b/component-test/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+}
diff --git a/component-test/vite.config.ts b/component-test/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/core/src/previewer.ts b/core/src/previewer.ts
@@ -87,6 +87,12 @@ export class Previewer {
       kind: "starting",
       promise: (async () => {
         const router = express.Router();
+        router.get(/^[^:]*\/$/, async (req, res) => {
+          res
+            .status(200)
+            .set({ "Content-Type": "text/html" })
+            .end(await this.viteManager!.loadIndexHtml(req.originalUrl));
+        });
         router.get(/^\/.*:[^/]+\/$/, async (req, res, next) => {
           if (req.url.includes("?html-proxy")) {
             next();