testeranto 0.200.1 → 0.202.0

package/README.md

@@ -2,7 +2,7 @@
 
 ## Brings vibe coding to the real world
 
-Testeranto lets you vibe code large, real-world codebases by intelligently managing the AI context
+Testeranto lets you vibe code large, real-world polyglot codebases by intelligently managing the AI context
 
 #### 🚀 Join Our Beta Program! 🚀
 
@@ -28,6 +28,7 @@ We're launching a private beta for GitHub stargazers first, followed by a public
 ## What is testeranto?
 
 - Testeranto produces test results that can be fed to Aider.ai to automatically fix failing tests.
+- Testeranto supports TypeScript/Javascript, golang and python (with more planed)
 - Testeranto tests are specified in a strongly-typed gherkin-like syntax. Rather than testing your code directly, Testeranto requires you to wrap your code with a semantic interface that is based on TS type signatures.
 - Testeranto can run tests in the frontend, the backend, or both.
 - Testeranto can be used to test anything that can be bundled with esbuild.
@@ -56,6 +57,30 @@ We're launching a private beta for GitHub stargazers first, followed by a public
 
 0. Install Aider and signup for a LLM service.
 
+### Server-Side Setup for GitHub OAuth
+
+For GitHub authentication to work properly, you need to set up the server-side token exchange:
+
+1. Add the following environment variables to your server:
+   ```
+   GITHUB_CLIENT_ID=your_github_oauth_client_id
+   GITHUB_CLIENT_SECRET=your_github_oauth_client_secret
+   ```
+
+2. The server will handle the OAuth token exchange at the `/api/auth/github/token` endpoint
+
+### GitHub Authentication Setup
+
+To enable Git operations with GitHub:
+
+1. Create a GitHub OAuth App at https://github.com/settings/developers
+2. Set the Authorization callback URL to: `http://localhost:3000/auth/github/callback`
+3. Copy the Client ID
+4. Update the `clientId` field in the `githubOAuth` section of `testeranto.config.ts`
+5. Restart the development server
+
+**Note**: The client secret is not needed for the frontend application as it will be handled by the server-side component for token exchange.
+
 1. Install testeranto:
 
 ```bash

package/design-editor/DesignEditor.tsx

@@ -1,251 +1,50 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState, useEffect, useRef } from 'react';
-import { Canvas, Rect, Circle, Text } from 'fabric';
-import { toPng } from 'html-to-image';
+import React, { useEffect, useRef } from 'react';
+import { Canvas, Rect, Text } from 'fabric';
 
-interface DesignObject {
-  type: string;
-  [key: string]: any;
-}
-
-interface Design {
-  version: string;
-  background: string;
-  objects: DesignObject[];
-}
-
-interface Collaborator {
-  id: string;
-  name: string;
-}
-
-export interface DesignEditorRef {
-  loadDesign: (design: Design) => void;
-  saveDesign: () => Design | null;
-}
-
-export const DesignEditor = React.forwardRef<DesignEditorRef, { projectId: string }>(
-  ({ projectId }, ref) => {
-  const canvasRef = useRef<any>(null);
-  const [design, setDesign] = useState<Design>({
-    objects: [],
-    background: '#ffffff',
-    version: '1.0'
-  });
-  const [collaborators, setCollaborators] = useState<Collaborator[]>([]);
-  const wsRef = useRef<WebSocket | null>(null);
-
-  // Initialize canvas and WebSocket connection
+export const DesignEditor = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  
   useEffect(() => {
-    // @ts-ignore
-    const canvas = new fabric.Canvas('design-canvas', {
+    if (!canvasRef.current) return;
+    
+    // Initialize the fabric canvas
+    const canvas = new Canvas(canvasRef.current, {
       width: 800,
-      height: 600
+      height: 600,
+      backgroundColor: '#f0f0f0'
     });
-    canvas.backgroundColor = design.background;
-    canvasRef.current = canvas;
-
-    const wsPort = window.location.port ? Number(window.location.port) + 1 : 3001;
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const host = window.location.hostname;
-    wsRef.current = new WebSocket(`${protocol}//${host}:${wsPort}/design?project=${projectId}`);
-
-    wsRef.current.onmessage = (event) => {
-      const message = JSON.parse(event.data);
-      if (message.type === 'design_update' && canvasRef.current) {
-        canvasRef.current.loadFromJSON(message.data, () => {
-          canvasRef.current?.renderAll();
-        });
-      } else if (message.type === 'collaborators_update') {
-        setCollaborators(message.data);
-      }
-    };
-
+    
+    // Add a simple rectangle
+    const rect = new Rect({
+      left: 100,
+      top: 100,
+      width: 100,
+      height: 100,
+      fill: 'red',
+      angle: 0
+    });
+    
+    // Add text
+    const text = new Text('Hello Fabric.js!', {
+      left: 50,
+      top: 50,
+      fontSize: 20,
+      fill: 'blue'
+    });
+    
+    // Add objects to canvas
+    canvas.add(rect, text);
+    canvas.renderAll();
+    
+    // Cleanup
     return () => {
-      wsRef.current?.close();
       canvas.dispose();
     };
-  }, [projectId]);
-
-  const addShape = (shape: string) => {
-    if (!canvasRef.current) return;
-
-    let object;
-    switch (shape) {
-      case 'rectangle':
-        // @ts-ignore
-        object = new fabric.Rect({
-          width: 100,
-          height: 100,
-          fill: 'red',
-          left: 100,
-          top: 100
-        });
-        break;
-      case 'circle':
-        // @ts-ignore
-        object = new fabric.Circle({
-          radius: 50,
-          fill: 'blue',
-          left: 200,
-          top: 200
-        });
-        break;
-      case 'text':
-        // @ts-ignore
-        object = new fabric.Text('Double click to edit', {
-          fontFamily: 'Arial',
-          fontSize: 20,
-          left: 100,
-          top: 300
-        });
-        break;
-      default:
-        return;
-    }
-
-    canvasRef.current.add(object);
-    canvasRef.current.renderAll();
-  };
-
-  const saveDesign = (): Design | null => {
-    if (!canvasRef.current) {
-      console.warn('Canvas ref is null, cannot save design');
-      return null;
-    }
-    
-    try {
-      // Get current canvas state
-      const json = canvasRef.current.toJSON() as Design;
-      setDesign(json);
-      
-      // Send update to collaborators
-      if (wsRef.current) {
-        wsRef.current.send(JSON.stringify({
-          type: 'design_update',
-          data: json
-        }));
-      }
-      
-      // Force re-render of all objects
-      canvasRef.current.getObjects().forEach(obj => {
-        obj.set('dirty', true);
-      });
-      canvasRef.current.renderAll();
-      
-      console.log('Design saved:', json);
-      return json;
-    } catch (err) {
-      console.error('Error saving design:', err);
-      return null;
-    }
-  };
-
-  const loadDesign = (design: Design) => {
-    console.log('loadDesign called with:', design);
-    if (!canvasRef.current) {
-      console.warn('Canvas ref is null, cannot load design');
-      return;
-    }
-
-    try {
-      console.log('Loading design into canvas...');
-
-      // Clear existing canvas
-      canvasRef.current.clear();
-
-      // Set background color
-      if (design.background) {
-        canvasRef.current.backgroundColor = design.background;
-      }
-
-      // Load objects if they exist
-      if (design.objects && design.objects.length > 0) {
-        console.log('Loading objects:', design.objects.length);
-        canvasRef.current.loadFromJSON(design, () => {
-          console.log('Design loaded, rendering canvas...');
-          // Force re-render of all objects
-          canvasRef.current?.getObjects().forEach(obj => {
-            obj.set('dirty', true);
-          });
-          canvasRef.current?.renderAll();
-          console.log('Canvas rendered with new design');
-        });
-      } else {
-        console.log('No objects to load, rendering empty canvas');
-        canvasRef.current.renderAll();
-      }
-
-      // Force immediate render
-      canvasRef.current.renderAll();
-    } catch (err) {
-      console.error('Error loading design:', err);
-      if (err instanceof Error) {
-        console.error('Error details:', {
-          name: err.name,
-          message: err.message,
-          stack: err.stack
-        });
-      }
-    }
-  };
-
-  // Expose methods via ref
-  React.useImperativeHandle(ref, () => ({
-    loadDesign,
-    saveDesign
-  }));
-
-  const exportAsPNG = async () => {
-    if (!canvasRef.current) return;
-
-    try {
-      // Store current active object and hide controls
-      const activeObject = canvasRef.current.getActiveObject();
-      if (activeObject) {
-        canvasRef.current.discardActiveObject();
-      }
-
-      // Render once to clear controls
-      canvasRef.current.renderAll();
-
-      // Get canvas element and export
-      const canvasElement = document.getElementById('design-canvas');
-      if (!canvasElement) return;
-      
-      const dataUrl = await toPng(canvasElement);
-      const link = document.createElement('a');
-      link.download = `design-${projectId}.png`;
-      link.href = dataUrl;
-      link.click();
-
-      // Restore active object if there was one
-      if (activeObject) {
-        canvasRef.current.setActiveObject(activeObject);
-        canvasRef.current.renderAll();
-      }
-    } catch (error) {
-      console.error('Error exporting PNG:', error);
-    }
-  };
-
+  }, []);
+  
   return (
-    <div className="design-editor">
-      <div className="toolbar">
-        <button onClick={() => addShape('rectangle')}>Add Rectangle</button>
-        <button onClick={() => addShape('circle')}>Add Circle</button>
-        <button onClick={() => addShape('text')}>Add Text</button>
-        <button onClick={exportAsPNG}>Export PNG</button>
-      </div>
-      <canvas id="design-canvas" />
-      <div className="collaborators">
-        <h3>Collaborators ({collaborators.length})</h3>
-        <ul>
-          {collaborators.map(user => (
-            <li key={user.id}>{user.name}</li>
-          ))}
-        </ul>
-      </div>
+    <div>
+      <canvas ref={canvasRef} />
     </div>
   );
-});
+};

package/dist/common/design-editor/DesignEditor.js

@@ -34,209 +34,44 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DesignEditor = void 0;
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importStar(require("react"));
-const html_to_image_1 = require("html-to-image");
-exports.DesignEditor = react_1.default.forwardRef(({ projectId }, ref) => {
+const fabric_1 = require("fabric");
+const DesignEditor = () => {
     const canvasRef = (0, react_1.useRef)(null);
-    const [design, setDesign] = (0, react_1.useState)({
-        objects: [],
-        background: '#ffffff',
-        version: '1.0'
-    });
-    const [collaborators, setCollaborators] = (0, react_1.useState)([]);
-    const wsRef = (0, react_1.useRef)(null);
-    // Initialize canvas and WebSocket connection
     (0, react_1.useEffect)(() => {
-        // @ts-ignore
-        const canvas = new fabric.Canvas('design-canvas', {
+        if (!canvasRef.current)
+            return;
+        // Initialize the fabric canvas
+        const canvas = new fabric_1.Canvas(canvasRef.current, {
             width: 800,
-            height: 600
+            height: 600,
+            backgroundColor: '#f0f0f0'
         });
-        canvas.backgroundColor = design.background;
-        canvasRef.current = canvas;
-        const wsPort = window.location.port ? Number(window.location.port) + 1 : 3001;
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const host = window.location.hostname;
-        wsRef.current = new WebSocket(`${protocol}//${host}:${wsPort}/design?project=${projectId}`);
-        wsRef.current.onmessage = (event) => {
-            const message = JSON.parse(event.data);
-            if (message.type === 'design_update' && canvasRef.current) {
-                canvasRef.current.loadFromJSON(message.data, () => {
-                    var _a;
-                    (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.renderAll();
-                });
-            }
-            else if (message.type === 'collaborators_update') {
-                setCollaborators(message.data);
-            }
-        };
+        // Add a simple rectangle
+        const rect = new fabric_1.Rect({
+            left: 100,
+            top: 100,
+            width: 100,
+            height: 100,
+            fill: 'red',
+            angle: 0
+        });
+        // Add text
+        const text = new fabric_1.Text('Hello Fabric.js!', {
+            left: 50,
+            top: 50,
+            fontSize: 20,
+            fill: 'blue'
+        });
+        // Add objects to canvas
+        canvas.add(rect, text);
+        canvas.renderAll();
+        // Cleanup
         return () => {
-            var _a;
-            (_a = wsRef.current) === null || _a === void 0 ? void 0 : _a.close();
             canvas.dispose();
         };
-    }, [projectId]);
-    const addShape = (shape) => {
-        if (!canvasRef.current)
-            return;
-        let object;
-        switch (shape) {
-            case 'rectangle':
-                // @ts-ignore
-                object = new fabric.Rect({
-                    width: 100,
-                    height: 100,
-                    fill: 'red',
-                    left: 100,
-                    top: 100
-                });
-                break;
-            case 'circle':
-                // @ts-ignore
-                object = new fabric.Circle({
-                    radius: 50,
-                    fill: 'blue',
-                    left: 200,
-                    top: 200
-                });
-                break;
-            case 'text':
-                // @ts-ignore
-                object = new fabric.Text('Double click to edit', {
-                    fontFamily: 'Arial',
-                    fontSize: 20,
-                    left: 100,
-                    top: 300
-                });
-                break;
-            default:
-                return;
-        }
-        canvasRef.current.add(object);
-        canvasRef.current.renderAll();
-    };
-    const saveDesign = () => {
-        if (!canvasRef.current) {
-            console.warn('Canvas ref is null, cannot save design');
-            return null;
-        }
-        try {
-            // Get current canvas state
-            const json = canvasRef.current.toJSON();
-            setDesign(json);
-            // Send update to collaborators
-            if (wsRef.current) {
-                wsRef.current.send(JSON.stringify({
-                    type: 'design_update',
-                    data: json
-                }));
-            }
-            // Force re-render of all objects
-            canvasRef.current.getObjects().forEach(obj => {
-                obj.set('dirty', true);
-            });
-            canvasRef.current.renderAll();
-            console.log('Design saved:', json);
-            return json;
-        }
-        catch (err) {
-            console.error('Error saving design:', err);
-            return null;
-        }
-    };
-    const loadDesign = (design) => {
-        console.log('loadDesign called with:', design);
-        if (!canvasRef.current) {
-            console.warn('Canvas ref is null, cannot load design');
-            return;
-        }
-        try {
-            console.log('Loading design into canvas...');
-            // Clear existing canvas
-            canvasRef.current.clear();
-            // Set background color
-            if (design.background) {
-                canvasRef.current.backgroundColor = design.background;
-            }
-            // Load objects if they exist
-            if (design.objects && design.objects.length > 0) {
-                console.log('Loading objects:', design.objects.length);
-                canvasRef.current.loadFromJSON(design, () => {
-                    var _a, _b;
-                    console.log('Design loaded, rendering canvas...');
-                    // Force re-render of all objects
-                    (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getObjects().forEach(obj => {
-                        obj.set('dirty', true);
-                    });
-                    (_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.renderAll();
-                    console.log('Canvas rendered with new design');
-                });
-            }
-            else {
-                console.log('No objects to load, rendering empty canvas');
-                canvasRef.current.renderAll();
-            }
-            // Force immediate render
-            canvasRef.current.renderAll();
-        }
-        catch (err) {
-            console.error('Error loading design:', err);
-            if (err instanceof Error) {
-                console.error('Error details:', {
-                    name: err.name,
-                    message: err.message,
-                    stack: err.stack
-                });
-            }
-        }
-    };
-    // Expose methods via ref
-    react_1.default.useImperativeHandle(ref, () => ({
-        loadDesign,
-        saveDesign
-    }));
-    const exportAsPNG = async () => {
-        if (!canvasRef.current)
-            return;
-        try {
-            // Store current active object and hide controls
-            const activeObject = canvasRef.current.getActiveObject();
-            if (activeObject) {
-                canvasRef.current.discardActiveObject();
-            }
-            // Render once to clear controls
-            canvasRef.current.renderAll();
-            // Get canvas element and export
-            const canvasElement = document.getElementById('design-canvas');
-            if (!canvasElement)
-                return;
-            const dataUrl = await (0, html_to_image_1.toPng)(canvasElement);
-            const link = document.createElement('a');
-            link.download = `design-${projectId}.png`;
-            link.href = dataUrl;
-            link.click();
-            // Restore active object if there was one
-            if (activeObject) {
-                canvasRef.current.setActiveObject(activeObject);
-                canvasRef.current.renderAll();
-            }
-        }
-        catch (error) {
-            console.error('Error exporting PNG:', error);
-        }
-    };
-    return (react_1.default.createElement("div", { className: "design-editor" },
-        react_1.default.createElement("div", { className: "toolbar" },
-            react_1.default.createElement("button", { onClick: () => addShape('rectangle') }, "Add Rectangle"),
-            react_1.default.createElement("button", { onClick: () => addShape('circle') }, "Add Circle"),
-            react_1.default.createElement("button", { onClick: () => addShape('text') }, "Add Text"),
-            react_1.default.createElement("button", { onClick: exportAsPNG }, "Export PNG")),
-        react_1.default.createElement("canvas", { id: "design-canvas" }),
-        react_1.default.createElement("div", { className: "collaborators" },
-            react_1.default.createElement("h3", null,
-                "Collaborators (",
-                collaborators.length,
-                ")"),
-            react_1.default.createElement("ul", null, collaborators.map(user => (react_1.default.createElement("li", { key: user.id }, user.name)))))));
-});
+    }, []);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("canvas", { ref: canvasRef })));
+};
+exports.DesignEditor = DesignEditor;