testeranto 0.200.1 → 0.202.0

package/src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, createContext, useContext } from 'react';
 import ReactDom from "react-dom/client";
 import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 
@@ -6,32 +6,183 @@ import { TestPage } from './components/stateful/TestPage';
 import { ProjectPage } from './components/stateful/ProjectPage';
 import { ProjectsPage } from './components/stateful/ProjectsPage';
 import { AppFrame } from './components/pure/AppFrame';
+import { SignIn } from './components/pure/SignIn';
 import { FeaturesReporter } from './components/stateful/FeaturesReporter';
 import { DesignEditorPage } from './components/DesignEditorPage';
 import { TextEditorPage } from './components/stateful/TextEditorPage';
 import { ProcessManagerPage } from './components/stateful/ProcessManagerPage';
 import { SingleProcessPage } from './components/stateful/SingleProcessPage';
-import { SettingsPage } from './components/stateful/SettingsPage';
+import { Settings } from './components/pure/Settings';
+import { GitIntegrationPage } from './components/stateful/GitIntegrationPage';
+import { AuthCallbackPage } from './components/stateful/AuthCallbackPage';
+import { githubAuthService } from './services/GitHubAuthService';
+import { SVGEditorPage } from './components/stateful/SVGEditorPage';
 
+interface WebSocketContextType {
+  ws: WebSocket | null;
+  isConnected: boolean;
+}
+
+interface TutorialModeContextType {
+  tutorialMode: boolean;
+  setTutorialMode: (mode: boolean) => void;
+}
+
+interface AuthContextType {
+  isAuthenticated: boolean;
+  user: any;
+  login: () => void;
+  logout: () => void;
+}
+
+// Create a context for the WebSocket
+const WebSocketContext = createContext<WebSocketContextType>({
+  ws: null,
+  isConnected: false,
+});
+
+// Create a context for tutorial mode
+const TutorialModeContext = createContext<TutorialModeContextType>({
+  tutorialMode: false,
+  setTutorialMode: () => {},
+});
+
+// Create a context for authentication
+const AuthContext = createContext<AuthContextType>({
+  isAuthenticated: false,
+  user: null,
+  login: () => {},
+  logout: () => {},
+});
+
+export const useWebSocket = () => {
+  return useContext(WebSocketContext);
+};
+
+export const useTutorialMode = () => {
+  return useContext(TutorialModeContext);
+};
+
+export const useAuth = () => {
+  return useContext(AuthContext);
+};
 
 export const App = () => {
+  const [ws, setWs] = useState<WebSocket | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [tutorialMode, setTutorialMode] = useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState(githubAuthService.isAuthenticated);
+  const [user, setUser] = useState(githubAuthService.userInfo);
+
+  useEffect(() => {
+    // Load tutorial mode from localStorage
+    const savedTutorialMode = localStorage.getItem('tutorialMode');
+    if (savedTutorialMode) {
+      setTutorialMode(savedTutorialMode === 'true');
+    }
+
+    // Listen for auth changes
+    const handleAuthChange = (authenticated: boolean) => {
+      setIsAuthenticated(authenticated);
+      setUser(githubAuthService.userInfo);
+    };
+
+    githubAuthService.on('authChange', handleAuthChange);
+    
+    // Handle GitHub OAuth callback from popup
+    const handleMessage = async (event: MessageEvent) => {
+      if (event.data.type === 'github-auth-callback') {
+        const { code } = event.data;
+        try {
+          const success = await githubAuthService.handleCallback(code);
+          if (success) {
+            console.log('GitHub authentication successful');
+          } else {
+            console.error('GitHub authentication failed');
+          }
+        } catch (error) {
+          console.error('Error handling GitHub callback:', error);
+        }
+      } else if (event.data.type === 'github-auth-error') {
+        console.error('GitHub authentication error:', event.data.error);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${wsProtocol}//${window.location.host}`;
+    const websocket = new WebSocket(wsUrl);
+    
+    websocket.onopen = () => {
+      console.log('WebSocket connected');
+      setWs(websocket);
+      setIsConnected(true);
+    };
+    
+    websocket.onclose = () => {
+      console.log('WebSocket disconnected');
+      setWs(null);
+      setIsConnected(false);
+    };
+    
+    websocket.onerror = (error) => {
+      console.error('WebSocket error:', error);
+      setIsConnected(false);
+    };
+
+    return () => {
+      githubAuthService.off('authChange', handleAuthChange);
+      window.removeEventListener('message', handleMessage);
+      websocket.close();
+    };
+  }, []);
+
+  const authContextValue = {
+    isAuthenticated,
+    user,
+    login: () => githubAuthService.initiateLogin(),
+    logout: () => githubAuthService.logout(),
+  };
+
   return (
-    <Router>
-      <AppFrame>
-        <Routes>
-          <Route path="/" element={<ProjectsPage />} />
-          <Route path="/projects/:projectName" element={<ProjectPage />} />
-          <Route path="/projects/:projectName/tests/*" element={<TestPage />} />
-          <Route path="/projects/:projectName#:tab" element={<ProjectPage />} />
-          <Route path="/features-reporter" element={<FeaturesReporter />} />
-          <Route path="/design-editor" element={<DesignEditorPage />} />
-          <Route path="/text-editor" element={<TextEditorPage />} />
-          <Route path="/processes" element={<ProcessManagerPage />} />
-          <Route path="/processes/:processId" element={<SingleProcessPage />} />
-          <Route path="/settings" element={<SettingsPage />} />
-        </Routes>
-      </AppFrame>
-    </Router>
+    <WebSocketContext.Provider value={{ ws, isConnected }}>
+      <TutorialModeContext.Provider value={{ tutorialMode, setTutorialMode }}>
+        <AuthContext.Provider value={authContextValue}>
+          <Router>
+            <AppFrame>
+              <Routes>
+                {/* Public routes */}
+                <Route path="/" element={<ProjectsPage />} />
+                <Route path="/projects/:projectName" element={<ProjectPage />} />
+                <Route path="/projects/:projectName/tests/*" element={<TestPage />} />
+                <Route path="/projects/:projectName#:tab" element={<ProjectPage />} />
+                <Route path="/signin" element={<SignIn />} />
+                <Route path="/auth/github/callback" element={<AuthCallbackPage />} />
+                
+                {/* Protected routes - handle authentication within components */}
+                <Route path="/features-reporter" element={isAuthenticated ? <FeaturesReporter /> : <SignIn />} />
+                <Route path="/design-editor" element={isAuthenticated ? <DesignEditorPage /> : <SignIn />} />
+                <Route path="/text-editor" element={isAuthenticated ? <TextEditorPage /> : <SignIn />} />
+                {/* Conditionally render process-related routes only if WebSocket is connected */}
+                {isConnected ? (
+                  <>
+                    <Route path="/processes" element={isAuthenticated ? <ProcessManagerPage /> : <SignIn />} />
+                    <Route path="/processes/:processId" element={isAuthenticated ? <SingleProcessPage /> : <SignIn />} />
+                  </>
+                ) : null}
+                <Route path="/settings" element={<Settings />} />
+                <Route path="/git" element={isAuthenticated ? <GitIntegrationPage /> : <SignIn />} />
+                <Route path="/svg-editor" element={isAuthenticated ? <SVGEditorPage /> : <SignIn />} />
+                
+                {/* Catch all - redirect to home for logged out users */}
+                <Route path="*" element={<ProjectsPage />} />
+              </Routes>
+            </AppFrame>
+          </Router>
+        </AuthContext.Provider>
+      </TutorialModeContext.Provider>
+    </WebSocketContext.Provider>
   );
 };
 

package/src/PM/PM_WithBuild.ts

@@ -0,0 +1,171 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import esbuild from "esbuild";
+
+import { IBuiltConfig } from "../Types.js";
+import esbuildNodeConfiger from "../esbuildConfigs/node.js";
+import esbuildWebConfiger from "../esbuildConfigs/web.js";
+import esbuildImportConfiger from "../esbuildConfigs/pure.js";
+import { getRunnables } from "../utils.js";
+
+import { PM_WithWebSocket } from "./PM_WithWebSocket.js";
+
+export abstract class PM_WithBuild extends PM_WithWebSocket {
+  configs: IBuiltConfig;
+  name: string;
+  mode: "once" | "dev";
+  currentBuildResolve: (() => void) | null = null;
+  currentBuildReject: ((error: any) => void) | null = null;
+
+  constructor(configs: IBuiltConfig, name: string, mode: "once" | "dev") {
+    super(configs);
+    this.configs = configs;
+    this.name = name;
+    this.mode = mode;
+  }
+
+  async startBuildProcesses(): Promise<void> {
+    const { nodeEntryPoints, webEntryPoints, pureEntryPoints } = getRunnables(
+      this.configs.tests,
+      this.name
+    );
+
+    console.log(`Starting build processes for ${this.name}...`);
+    console.log(`  Node entry points: ${Object.keys(nodeEntryPoints).length}`);
+    console.log(`  Web entry points: ${Object.keys(webEntryPoints).length}`);
+    console.log(`  Pure entry points: ${Object.keys(pureEntryPoints).length}`);
+
+    // Start all build processes (only node, web, pure)
+    await Promise.all([
+      this.startBuildProcess(esbuildNodeConfiger, nodeEntryPoints, "node"),
+      this.startBuildProcess(esbuildWebConfiger, webEntryPoints, "web"),
+      this.startBuildProcess(esbuildImportConfiger, pureEntryPoints, "pure"),
+    ]);
+  }
+
+  private async startBuildProcess(
+    configer: (
+      config: IBuiltConfig,
+      entryPoints: string[],
+      testName: string
+    ) => any,
+    entryPoints: Record<string, string>,
+    runtime: string
+  ): Promise<void> {
+    const entryPointKeys = Object.keys(entryPoints);
+    if (entryPointKeys.length === 0) return;
+
+    // Store reference to 'this' for use in the plugin
+    const self = this;
+
+    // Create a custom plugin to track build processes
+    const buildProcessTrackerPlugin = {
+      name: 'build-process-tracker',
+      setup(build) {
+        build.onStart(() => {
+          const processId = `build-${runtime}-${Date.now()}`;
+          const command = `esbuild ${runtime} for ${self.name}`;
+          
+          // Create a promise that will resolve when the build completes
+          const buildPromise = new Promise<void>((resolve, reject) => {
+            // Store resolve and reject functions to call them in onEnd
+            self.currentBuildResolve = resolve;
+            self.currentBuildReject = reject;
+          });
+
+          // Add to process manager
+          if (self.addPromiseProcess) {
+            self.addPromiseProcess(
+              processId,
+              buildPromise,
+              command,
+              "build-time",
+              self.name,
+              runtime as any
+            );
+          }
+
+          console.log(`Starting ${runtime} build for ${entryPointKeys.length} entry points`);
+          // Broadcast build start event
+          if (self.broadcast) {
+            self.broadcast({
+              type: "buildEvent",
+              event: "start",
+              runtime,
+              timestamp: new Date().toISOString(),
+              entryPoints: entryPointKeys.length,
+              processId
+            });
+          }
+        });
+        
+        build.onEnd((result) => {
+          const event = {
+            type: "buildEvent",
+            event: result.errors.length > 0 ? "error" : "success",
+            runtime,
+            timestamp: new Date().toISOString(),
+            errors: result.errors.length,
+            warnings: result.warnings.length
+          };
+          
+          if (result.errors.length > 0) {
+            console.error(`Build ${runtime} failed with ${result.errors.length} errors`);
+            if (self.currentBuildReject) {
+              self.currentBuildReject(new Error(`Build failed with ${result.errors.length} errors`));
+            }
+          } else {
+            console.log(`Build ${runtime} completed successfully`);
+            if (self.currentBuildResolve) {
+              self.currentBuildResolve();
+            }
+          }
+          
+          // Broadcast build result event
+          if (self.broadcast) {
+            self.broadcast(event);
+          }
+
+          // Clear the current build handlers
+          self.currentBuildResolve = null;
+          self.currentBuildReject = null;
+        });
+      }
+    };
+
+    // Get the base config and add our tracking plugin
+    const baseConfig = configer(this.configs, entryPointKeys, this.name);
+    const configWithPlugin = {
+      ...baseConfig,
+      plugins: [...(baseConfig.plugins || []), buildProcessTrackerPlugin]
+    };
+
+    try {
+      const ctx = await esbuild.context(configWithPlugin);
+
+      if (this.mode === "dev") {
+        // In dev mode, start watching - each rebuild will be tracked as a separate process
+        await ctx.watch();
+      } else {
+        // In once mode, do a single build which will be tracked by the plugin
+        const result = await ctx.rebuild();
+        await ctx.dispose();
+      }
+    } catch (error) {
+      console.error(`Failed to start ${runtime} build context:`, error);
+      // Broadcast error event
+      if (this.broadcast) {
+        this.broadcast({
+          type: "buildEvent",
+          event: "error",
+          runtime,
+          timestamp: new Date().toISOString(),
+          errors: 1,
+          warnings: 0,
+          message: error.message
+        });
+      }
+    }
+  }
+
+  abstract onBuildDone(): void;
+}

package/src/PM/PM_WithEslintAndTsc.ts

@@ -12,7 +12,7 @@ import tsc from "tsc-prog";
 import { lintPather, tscPather } from "../utils";
 import { IBuiltConfig, IRunTime, ISummary } from "../Types.js";
 
-import { PM_Base } from "./base.js";
+import { PM_WithBuild } from "./PM_WithBuild.js";
 import { makePromptInternal } from "../utils/makePrompt";
 
 const eslint = new ESLint();
@@ -20,16 +20,12 @@ const formatter = await eslint.loadFormatter(
   "./node_modules/testeranto/dist/prebuild/esbuildConfigs/eslint-formatter-testeranto.mjs"
 );
 
-export abstract class PM_WithEslintAndTsc extends PM_Base {
-  name: string;
-  mode: "once" | "dev";
+export abstract class PM_WithEslintAndTsc extends PM_WithBuild {
   summary: ISummary = {};
 
   constructor(configs: IBuiltConfig, name: string, mode: "once" | "dev") {
-    super(configs);
+    super(configs, name, mode);
 
-    this.name = name;
-    this.mode = mode;
     this.summary = {};
 
     // Initialize all test entries first
@@ -50,59 +46,71 @@ export abstract class PM_WithEslintAndTsc extends PM_Base {
     entrypoint: string;
     addableFiles: string[];
   }) => {
-    console.log(ansiC.green(ansiC.inverse(`tsc < ${entrypoint}`)));
-    try {
-      this.typeCheckIsRunning(entrypoint);
-    } catch (e) {
-      console.error("error in tscCheck");
-      console.error(e);
-      console.error(entrypoint);
-      console.error(JSON.stringify(this.summary, null, 2));
-      process.exit(-1);
-    }
-
-    const program = tsc.createProgramFromConfig({
-      basePath: process.cwd(), // always required, used for relative paths
-      configFilePath: "tsconfig.json", // config to inherit from (optional)
-      compilerOptions: {
-        outDir: tscPather(entrypoint, platform, this.name),
-        // declaration: true,
-        // skipLibCheck: true,
-        noEmit: true,
-      },
-      include: addableFiles, //["src/**/*"],
-      // exclude: ["node_modules", "../testeranto"],
-      // exclude: ["**/*.test.ts", "**/*.spec.ts"],
-    });
-    const tscPath = tscPather(entrypoint, platform, this.name);
-
-    const allDiagnostics = program.getSemanticDiagnostics();
-
-    const results: string[] = [];
-    allDiagnostics.forEach((diagnostic) => {
-      if (diagnostic.file) {
-        const { line, character } = ts.getLineAndCharacterOfPosition(
-          diagnostic.file,
-          diagnostic.start!
-        );
-        const message = ts.flattenDiagnosticMessageText(
-          diagnostic.messageText,
-          "\n"
-        );
-        results.push(
-          `${diagnostic.file.fileName} (${line + 1},${
-            character + 1
-          }): ${message}`
-        );
-      } else {
-        results.push(
-          ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n")
-        );
+    const processId = `tsc-${entrypoint}-${Date.now()}`;
+    const command = `tsc check for ${entrypoint}`;
+
+    const tscPromise = (async () => {
+      try {
+        this.typeCheckIsRunning(entrypoint);
+      } catch (e) {
+        // Log error through process manager
+        throw new Error(`Error in tscCheck: ${e.message}`);
       }
-    });
 
-    fs.writeFileSync(tscPath, results.join("\n"));
-    this.typeCheckIsNowDone(entrypoint, results.length);
+      const program = tsc.createProgramFromConfig({
+        basePath: process.cwd(),
+        configFilePath: "tsconfig.json",
+        compilerOptions: {
+          outDir: tscPather(entrypoint, platform, this.name),
+          noEmit: true,
+        },
+        include: addableFiles,
+      });
+      const tscPath = tscPather(entrypoint, platform, this.name);
+
+      const allDiagnostics = program.getSemanticDiagnostics();
+
+      const results: string[] = [];
+      allDiagnostics.forEach((diagnostic) => {
+        if (diagnostic.file) {
+          const { line, character } = ts.getLineAndCharacterOfPosition(
+            diagnostic.file,
+            diagnostic.start!
+          );
+          const message = ts.flattenDiagnosticMessageText(
+            diagnostic.messageText,
+            "\n"
+          );
+          results.push(
+            `${diagnostic.file.fileName} (${line + 1},${
+              character + 1
+            }): ${message}`
+          );
+        } else {
+          results.push(
+            ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n")
+          );
+        }
+      });
+
+      fs.writeFileSync(tscPath, results.join("\n"));
+      this.typeCheckIsNowDone(entrypoint, results.length);
+      return results.length;
+    })();
+
+    // Add to process manager if available
+    if (this.addPromiseProcess) {
+      this.addPromiseProcess(
+        processId,
+        tscPromise,
+        command,
+        "build-time",
+        entrypoint
+      );
+    } else {
+      // Fallback to just running the promise
+      await tscPromise;
+    }
   };
 
   eslintCheck = async (
@@ -110,32 +118,46 @@ export abstract class PM_WithEslintAndTsc extends PM_Base {
     platform: IRunTime,
     addableFiles: string[]
   ) => {
-    console.log(ansiC.green(ansiC.inverse(`eslint < ${entrypoint}`)));
-
-    try {
-      this.lintIsRunning(entrypoint);
-    } catch (e) {
-      console.error("error in eslintCheck");
-      console.error(e);
-      console.error(entrypoint);
-      console.error(JSON.stringify(this.summary, null, 2));
-      process.exit(-1);
-    }
-
-    const filepath = lintPather(entrypoint, platform, this.name);
-    if (fs.existsSync(filepath)) fs.rmSync(filepath);
-    const results = (await eslint.lintFiles(addableFiles))
-      .filter((r) => r.messages.length)
-      .filter((r) => {
-        return r.messages[0].ruleId !== null;
-      })
-      .map((r) => {
-        delete r.source;
-        return r;
-      });
+    const processId = `eslint-${entrypoint}-${Date.now()}`;
+    const command = `eslint check for ${entrypoint}`;
+
+    const eslintPromise = (async () => {
+      try {
+        this.lintIsRunning(entrypoint);
+      } catch (e) {
+        throw new Error(`Error in eslintCheck: ${e.message}`);
+      }
 
-    fs.writeFileSync(filepath, await formatter.format(results));
-    this.lintIsNowDone(entrypoint, results.length);
+      const filepath = lintPather(entrypoint, platform, this.name);
+      if (fs.existsSync(filepath)) fs.rmSync(filepath);
+      const results = (await eslint.lintFiles(addableFiles))
+        .filter((r) => r.messages.length)
+        .filter((r) => {
+          return r.messages[0].ruleId !== null;
+        })
+        .map((r) => {
+          delete r.source;
+          return r;
+        });
+
+      fs.writeFileSync(filepath, await formatter.format(results));
+      this.lintIsNowDone(entrypoint, results.length);
+      return results.length;
+    })();
+
+    // Add to process manager if available
+    if (this.addPromiseProcess) {
+      this.addPromiseProcess(
+        processId,
+        eslintPromise,
+        command,
+        "build-time",
+        entrypoint
+      );
+    } else {
+      // Fallback to just running the promise
+      await eslintPromise;
+    }
   };
 
   makePrompt = async (
@@ -241,14 +263,15 @@ export abstract class PM_WithEslintAndTsc extends PM_Base {
   };
 
   writeBigBoard = () => {
+    // note: this path is different from the one used by front end
     const summaryPath = `./testeranto/reports/${this.name}/summary.json`;
     const summaryData = JSON.stringify(this.summary, null, 2);
     fs.writeFileSync(summaryPath, summaryData);
-    
+
     // Broadcast the update
     this.broadcast({
-      type: 'summaryUpdate',
-      data: this.summary
+      type: "summaryUpdate",
+      data: this.summary,
     });
   };