Toolbar and Control Plane (#61)

Author: SteffenDE

README.md

@@ -122,6 +122,8 @@ Vite's `tidewave` accepts the configuration options below:
   Defaults to `tmp`, storing files under `tmp/tidewave/screenshots` and
   `tmp/tidewave/recordings`
 - `team`: enable Tidewave Web for teams
+- `toolbar`: controls whether the Tidewave toolbar is injected into your HTML
+  pages. Defaults to `true`
 
 ## Available tools
 

src/core.ts

@@ -145,6 +145,7 @@ export interface TidewaveConfig {
   port?: number;
   host?: string;
   clientUrl?: string;
+  toolbar?: boolean;
   allowRemoteAccess?: boolean;
   allowedOrigins?: string[];
   projectName?: string;

src/http/handlers/config.ts

@@ -4,6 +4,29 @@ import { default as tidewavePackage } from '../../../package.json' with { type:
 
 export type LocalPortGetter = () => number | undefined;
 
+export interface TidewaveConfigPayload {
+  project_name: string;
+  framework_type: string;
+  tidewave_version: string;
+  team: NonNullable<TidewaveConfig['team']> | Record<string, never>;
+  local_port: number | undefined;
+  tmp_dir: string;
+}
+
+export function tidewaveConfig(
+  config: TidewaveConfig,
+  getLocalPort?: LocalPortGetter,
+): TidewaveConfigPayload {
+  return {
+    project_name: config.projectName || 'app',
+    framework_type: config.framework || 'unknown',
+    tidewave_version: tidewavePackage.version,
+    team: config.team || {},
+    local_port: getLocalPort?.(),
+    tmp_dir: config.tmpDir || 'tmp',
+  };
+}
+
 export function createHandleConfig(
   config: TidewaveConfig,
   getLocalPort?: LocalPortGetter,
@@ -14,19 +37,10 @@ export function createHandleConfig(
     next: TidewaveNext,
   ): Promise<void> {
     try {
-      const tidewaveConfig = {
-        project_name: config.projectName || 'app',
-        framework_type: config.framework || 'unknown',
-        tidewave_version: tidewavePackage.version,
-        team: config.team || {},
-        local_port: getLocalPort?.(),
-        tmp_dir: config.tmpDir || 'tmp',
-      };
-
       res.statusCode = 200;
       res.setHeader('Content-Type', 'application/json');
       res.setHeader('Access-Control-Allow-Origin', '*');
-      res.end(JSON.stringify(tidewaveConfig));
+      res.end(JSON.stringify(tidewaveConfig(config, getLocalPort)));
     } catch (err) {
       console.error(`[Tidewave] Failed to serve config: ${err}`);
 

src/http/handlers/html.ts

@@ -2,17 +2,33 @@ import type { TidewaveConfig } from '../../core';
 import type { TidewaveHandler, TidewaveNext, TidewaveRequest, TidewaveResponse } from '../types';
 
 export function createHandleHtml(config: TidewaveConfig): TidewaveHandler {
+  return createHtmlHandler(config, 'tc.js', {});
+}
+
+export function createHandleAppHtml(config: TidewaveConfig): TidewaveHandler {
+  return createHtmlHandler(config, 'control.js', {
+    headers: {
+      'Content-Security-Policy': "base-uri 'self'; frame-ancestors 'self';",
+    },
+  });
+}
+
+function createHtmlHandler(
+  config: TidewaveConfig,
+  script: 'tc.js' | 'control.js',
+  options: { headers?: Record<string, string> },
+): TidewaveHandler {
   return async function handleHtml(
     req: TidewaveRequest,
     res: TidewaveResponse,
     next: TidewaveNext,
   ): Promise<void> {
-    // Only handle exact /tidewave path, not sub-paths
+    // Only handle exact mounted paths, not sub-paths.
     const url = req.url || '/';
-    const [pathname] = url.split('?');
+    const pathname = url.split('?')[0] || '';
 
-    // Different connect-style middleware stacks may strip different URL prefixes.
-    if (pathname !== '' && pathname !== '/' && pathname !== '/tidewave') {
+    // Vite strips the prefix passed to server.use, so we can always check /
+    if (pathname !== '/') {
       return next();
     }
 
@@ -21,12 +37,15 @@ export function createHandleHtml(config: TidewaveConfig): TidewaveHandler {
 
       res.statusCode = 200;
       res.setHeader('Content-Type', 'text/html');
+      for (const [header, value] of Object.entries(options.headers || {})) {
+        res.setHeader(header, value);
+      }
       res.end(`
 <html>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script type="module" src="${clientUrl}/tc/tc.js"></script>
+    <script type="module" src="${clientUrl}/tc/${script}"></script>
   </head>
   <body></body>
 </html>