testeranto 0.200.1 → 0.202.0

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

@@ -1,206 +1,40 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState, useEffect, useRef } from 'react';
-import { toPng } from 'html-to-image';
-export const DesignEditor = React.forwardRef(({ projectId }, ref) => {
+import React, { useEffect, useRef } from 'react';
+import { Canvas, Rect, Text } from 'fabric';
+export const DesignEditor = () => {
     const canvasRef = useRef(null);
-    const [design, setDesign] = useState({
-        objects: [],
-        background: '#ffffff',
-        version: '1.0'
-    });
-    const [collaborators, setCollaborators] = useState([]);
-    const wsRef = useRef(null);
-    // Initialize canvas and WebSocket connection
     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, () => {
-                    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 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 () => {
-            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.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 (React.createElement("div", { className: "design-editor" },
-        React.createElement("div", { className: "toolbar" },
-            React.createElement("button", { onClick: () => addShape('rectangle') }, "Add Rectangle"),
-            React.createElement("button", { onClick: () => addShape('circle') }, "Add Circle"),
-            React.createElement("button", { onClick: () => addShape('text') }, "Add Text"),
-            React.createElement("button", { onClick: exportAsPNG }, "Export PNG")),
-        React.createElement("canvas", { id: "design-canvas" }),
-        React.createElement("div", { className: "collaborators" },
-            React.createElement("h3", null,
-                "Collaborators (",
-                collaborators.length,
-                ")"),
-            React.createElement("ul", null, collaborators.map(user => (React.createElement("li", { key: user.id }, user.name)))))));
-});
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement("canvas", { ref: canvasRef })));
+};

package/dist/module/src/App.js

@@ -1,30 +1,136 @@
-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';
 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';
+// Create a context for the WebSocket
+const WebSocketContext = createContext({
+    ws: null,
+    isConnected: false,
+});
+// Create a context for tutorial mode
+const TutorialModeContext = createContext({
+    tutorialMode: false,
+    setTutorialMode: () => { },
+});
+// Create a context for authentication
+const AuthContext = createContext({
+    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 = () => {
-    return (React.createElement(Router, null,
-        React.createElement(AppFrame, null,
-            React.createElement(Routes, null,
-                React.createElement(Route, { path: "/", element: React.createElement(ProjectsPage, null) }),
-                React.createElement(Route, { path: "/projects/:projectName", element: React.createElement(ProjectPage, null) }),
-                React.createElement(Route, { path: "/projects/:projectName/tests/*", element: React.createElement(TestPage, null) }),
-                React.createElement(Route, { path: "/projects/:projectName#:tab", element: React.createElement(ProjectPage, null) }),
-                React.createElement(Route, { path: "/features-reporter", element: React.createElement(FeaturesReporter, null) }),
-                React.createElement(Route, { path: "/design-editor", element: React.createElement(DesignEditorPage, null) }),
-                React.createElement(Route, { path: "/text-editor", element: React.createElement(TextEditorPage, null) }),
-                React.createElement(Route, { path: "/processes", element: React.createElement(ProcessManagerPage, null) }),
-                React.createElement(Route, { path: "/processes/:processId", element: React.createElement(SingleProcessPage, null) }),
-                React.createElement(Route, { path: "/settings", element: React.createElement(SettingsPage, null) })))));
+    const [ws, setWs] = useState(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) => {
+            setIsAuthenticated(authenticated);
+            setUser(githubAuthService.userInfo);
+        };
+        githubAuthService.on('authChange', handleAuthChange);
+        // Handle GitHub OAuth callback from popup
+        const handleMessage = async (event) => {
+            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 (React.createElement(WebSocketContext.Provider, { value: { ws, isConnected } },
+        React.createElement(TutorialModeContext.Provider, { value: { tutorialMode, setTutorialMode } },
+            React.createElement(AuthContext.Provider, { value: authContextValue },
+                React.createElement(Router, null,
+                    React.createElement(AppFrame, null,
+                        React.createElement(Routes, null,
+                            React.createElement(Route, { path: "/", element: React.createElement(ProjectsPage, null) }),
+                            React.createElement(Route, { path: "/projects/:projectName", element: React.createElement(ProjectPage, null) }),
+                            React.createElement(Route, { path: "/projects/:projectName/tests/*", element: React.createElement(TestPage, null) }),
+                            React.createElement(Route, { path: "/projects/:projectName#:tab", element: React.createElement(ProjectPage, null) }),
+                            React.createElement(Route, { path: "/signin", element: React.createElement(SignIn, null) }),
+                            React.createElement(Route, { path: "/auth/github/callback", element: React.createElement(AuthCallbackPage, null) }),
+                            React.createElement(Route, { path: "/features-reporter", element: isAuthenticated ? React.createElement(FeaturesReporter, null) : React.createElement(SignIn, null) }),
+                            React.createElement(Route, { path: "/design-editor", element: isAuthenticated ? React.createElement(DesignEditorPage, null) : React.createElement(SignIn, null) }),
+                            React.createElement(Route, { path: "/text-editor", element: isAuthenticated ? React.createElement(TextEditorPage, null) : React.createElement(SignIn, null) }),
+                            isConnected ? (React.createElement(React.Fragment, null,
+                                React.createElement(Route, { path: "/processes", element: isAuthenticated ? React.createElement(ProcessManagerPage, null) : React.createElement(SignIn, null) }),
+                                React.createElement(Route, { path: "/processes/:processId", element: isAuthenticated ? React.createElement(SingleProcessPage, null) : React.createElement(SignIn, null) }))) : null,
+                            React.createElement(Route, { path: "/settings", element: React.createElement(Settings, null) }),
+                            React.createElement(Route, { path: "/git", element: isAuthenticated ? React.createElement(GitIntegrationPage, null) : React.createElement(SignIn, null) }),
+                            React.createElement(Route, { path: "*", element: React.createElement(ProjectsPage, null) }))))))));
 };
 // Export App to global scope
 function initApp() {

package/dist/module/src/PM/PM_WithBuild.js

@@ -0,0 +1,128 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import esbuild from "esbuild";
+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 class PM_WithBuild extends PM_WithWebSocket {
+    constructor(configs, name, mode) {
+        super(configs);
+        this.currentBuildResolve = null;
+        this.currentBuildReject = null;
+        this.configs = configs;
+        this.name = name;
+        this.mode = mode;
+    }
+    async startBuildProcesses() {
+        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"),
+        ]);
+    }
+    async startBuildProcess(configer, entryPoints, runtime) {
+        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((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);
+                    }
+                    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 = Object.assign(Object.assign({}, 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
+                });
+            }
+        }
+    }
+}