online-compiler-widget 0.0.1

package/src/components/RunContainer.module.scss

@@ -0,0 +1,150 @@
+button {
+  margin: 0;
+  padding: 0;
+}
+
+.runContainer {
+  display: flex;
+  flex-direction: row;
+  padding: 6px 7px;
+  border-top: 2px solid #E2E8F0;
+  background-color: #F8FAFC;
+}
+
+
+.runText {
+  font-family: Arial;
+  font-weight: 400;
+  font-size: 12px;
+  padding: 0;
+  margin: 0;
+}
+
+.runButton {
+  display: flex;
+  flex-direction: row;
+  width: auto;
+  padding: 6px 7px;
+  margin-right: 6px;
+  background-color: #74c56f;
+  align-items: center;
+  justify-content: center;
+}
+
+.stopButton {
+  width: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  padding: 6px 7px;
+  background-color: #e57575;
+}
+
+.startIcon {
+  margin-right: 3px;
+  height: 11px;
+}
+
+.stopIcon {
+  margin-right: 3px;
+  height: 13px;
+}
+
+.baseButton {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  border-radius: 6px;
+  padding: 6px 14px;
+  font-size: 14px;
+  font-weight: 500;
+
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.1s ease;
+
+  color: white;              /* <-- иконкам цвет идёт отсюда */
+}
+
+.baseButton:active {
+  transform: scale(0.97);
+}
+
+/* ===================== */
+/*       RUN BUTTON      */
+/* ===================== */
+.runButton {
+  @extend .baseButton;
+
+  background: #22c55e;
+
+  &:hover {
+    background: #16a34a;
+  }
+
+  &:active {
+    background: #15803d;
+  }
+}
+
+.startIcon {
+  width: 15px;
+  height: 15px;
+  margin-right: 6px;
+  color: white; /* SVG окрашивается */
+}
+
+/* ===================== */
+/*      STOP BUTTON      */
+/* ===================== */
+.stopButton {
+  @extend .baseButton;
+  margin-right: 5px;
+
+  background: #ef4444;
+
+  &:hover {
+    background: #dc2626;
+  }
+
+  &:active {
+    background: #b91c1c;
+  }
+}
+
+.stopIcon {
+  width: 18px;
+  height: 18px;
+  margin-right: 6px;
+  color: white; // окрашивает stroke="currentColor"
+}
+
+/* ===================== */
+/*      SAVE BUTTON      */
+/* ===================== */
+.saveButton {
+  @extend .baseButton;
+
+  margin-left: auto;
+  margin-right: 7px;
+
+  background: #3b82f6;
+
+  &:hover {
+    background: #2563eb;
+  }
+
+  &:active {
+    background: #1d4ed8;
+  }
+}
+
+.saveIcon {
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+  color: white;  /* <-- ТЕПЕРЬ РАБОТАЕТ */
+}

package/src/components/RunContainer.tsx

@@ -0,0 +1,34 @@
+// src/components/RunContainer.tsx
+import React from 'react';
+import cls from './RunContainer.module.scss';
+
+import StartIcon from "../assets/start.svg?react";
+import StopIcon from "../assets/stop.svg?react";
+import SaveIcon from "../assets/save-icon.svg?react"
+import type {EditorDocument} from "../types/EditorDocument.ts";
+import type {UpdateFileDto} from "../api";
+
+interface RunContainerProps {
+    run: () => void,
+    stop: () => void,
+    save: () => void,
+}
+
+export const RunContainer: React.FC<RunContainerProps> = (props: RunContainerProps) => {
+    return (
+        <div className={cls.runContainer}>
+            <button className={cls.runButton} onClick={props.run}>
+                <StartIcon className={cls.startIcon}/>
+                <p className={cls.runText}>Run</p>
+            </button>
+            <button className={cls.stopButton} onClick={props.stop}>
+                <StopIcon className={cls.stopIcon}/>
+                <p className={cls.runText}>Stop</p>
+            </button>
+            <button className={cls.saveButton} onClick={props.save}>
+                <SaveIcon className={cls.saveIcon}/>
+                <p className={cls.runText}>Save</p>
+            </button>
+        </div>
+    );
+};

package/src/hooks/useCompiler.ts

@@ -0,0 +1,228 @@
+import { useEffect, useLayoutEffect, useState } from "react";
+import type { EditorDocument } from "../types/EditorDocument";
+import { FileApi, ProjectApi, CompilerApi } from "../api";
+
+export function useCompiler(initialFiles?: Record<string, string>) {
+
+    const [projectId, setProjectId] = useState<string>("");
+    const [output, setOutput] = useState<string>("");
+
+    const fileApi = new FileApi();
+    const projectApi = new ProjectApi();
+    const compilerApi = new CompilerApi();
+
+    useLayoutEffect(() => {
+        projectApi.apiProjectsCreatePost({ name: "AHAHHAHAHA" })
+            .then(res => {
+                setProjectId(res.data.projectId);
+            })
+            .catch(err => alert(err))
+    }, []);
+
+
+    const [documents, setDocuments] = useState<EditorDocument[]>([]);
+
+    useEffect(() => {
+        if (projectId && initialFiles) {
+            setDocuments([]);
+            Object.keys(initialFiles).forEach(key => {
+                console.log(key, initialFiles[key]);
+
+                fileApi.apiFilesProjectProjectIdPost(projectId, {
+                    name: key,
+                    path: key
+                }).then(res => {
+                    const file: EditorDocument = {
+                        id: res.data,
+                        content: initialFiles[key],
+                        language: "csharp",
+                        modified: false,
+                        name: key,
+                        path: key
+                    };
+                    setDocuments(docs => [...docs, file]);
+                    fileApi.apiFilesFileIdSavePost(file.id, {
+                        content: initialFiles[key],
+                    })
+                        .then(res => console.log(res))
+                })
+            });
+        }
+    }, [projectId]);
+
+    const [selectedId, setSelectedId] = useState<string | null>(
+        () => documents[0]?.id || null
+    );
+
+    const selectedDocument = documents.find(d => d.id === selectedId) || null;
+
+    const setDocumentContent = (id: string, newContent: string) => {
+        setDocuments(docs =>
+            docs.map(d =>
+                d.id === id
+                    ? { ...d, content: newContent, modified: true }
+                    : d
+            )
+        );
+    };
+
+    // В useCompiler.ts обновляем функцию addDocument:
+const addDocument = (fileName?: string) => {
+    // Если передано имя файла - используем его, иначе генерируем
+    const defaultName = `file${documents.length + 1}.cs`;
+    const finalName = fileName || defaultName;
+
+    let fileId = "";
+
+    fileApi.apiFilesProjectProjectIdPost(projectId, {
+        name: finalName,
+        path: finalName
+    })
+        .then(res => {
+            fileId = res.data;
+
+            // Определяем язык по расширению
+            let language: "javascript" | "csharp" = "csharp";
+            if (finalName.endsWith('.js')) {
+                language = "javascript";
+            }
+
+            // Начальное содержимое в зависимости от языка
+            let initialContent = "// New file";
+            if (language === "javascript") {
+                initialContent = "// JavaScript file";
+            }
+
+            const newDoc: EditorDocument = {
+                id: fileId,
+                path: finalName,
+                name: finalName,
+                language: language,
+                content: initialContent,
+                modified: false,
+            };
+
+            setDocuments(d => [...d, newDoc]);
+            setSelectedId(newDoc.id);
+
+            // Сохраняем начальное содержимое
+            fileApi.apiFilesFileIdSavePost(fileId, {
+                content: initialContent,
+            }).catch(err => console.error("Ошибка при сохранении:", err));
+        })
+        .catch(err => {
+            console.error("Ошибка при создании файла:", err);
+            alert(`Ошибка при создании файла: ${err.message}`);
+        });
+};
+
+    const updateDocument = (id: string, patch: Partial<EditorDocument>) => {
+        const doc = documents.find(d => d.id === id);
+        if (!doc) return;
+
+        // 1. Локальное обновление
+        setDocuments(docs =>
+            docs.map(doc => doc.id === id ? { ...doc, ...patch, modified: true } : doc)
+        );
+
+        // 2. Если меняется имя - отправить на сервер
+        if (patch.name !== undefined && patch.name !== doc.name) {
+            fileApi.apiFilesFileIdRenamePost(id, {
+                name: patch.name
+            }).catch(err => {
+                console.error("Ошибка при переименовании:", err);
+                // Откат если ошибка
+                setDocuments(docs =>
+                    docs.map(d => d.id === id ? { ...d, name: doc.name } : d)
+                );
+            });
+        }
+
+        // 3. Если меняется контент - сохранить
+        if (patch.modified) {
+            fileApi.apiFilesFileIdSavePost(id, {
+                content: patch.content,
+            }).catch(err => console.error("Ошибка при сохранении:", err));
+        }
+    };
+
+
+    const deleteDocument = (id: string) => {
+        fileApi.apiFilesFileIdDeletePost(id)
+            .then(() => setDocuments(docs => docs.filter(doc => doc.id !== id)))
+            .catch(err => alert(err));
+    };
+
+    const saveAll = () => {
+        // Находим измененные документы
+        const modifiedDocs = documents.filter(doc => doc.modified);
+
+        if (modifiedDocs.length === 0) {
+            console.log("Нет изменений для сохранения");
+            return;
+        }
+
+        console.log(`Сохранение ${modifiedDocs.length} файлов`);
+
+        // Создаем массив промисов для сохранения
+        const savePromises = modifiedDocs.map(doc =>
+            fileApi.apiFilesFileIdSavePost(doc.id, {
+                content: doc.content
+            })
+        );
+
+        // Выполняем все запросы
+        Promise.all(savePromises)
+            .then(() => {
+                // После успешного сохранения всех файлов сбрасываем флаг modified
+                setDocuments(docs =>
+                    docs.map(doc => ({
+                        ...doc,
+                        // Если документ был среди измененных - сбрасываем флаг
+                        modified: modifiedDocs.some(md => md.id === doc.id) ? false : doc.modified
+                    }))
+                );
+                console.log("Все файлы сохранены");
+            })
+            .catch(error => {
+                console.error("Ошибка при сохранении:", error);
+                alert("Ошибка сохранения файлов");
+            });
+    };
+
+    const run = async () => {
+        await saveAll()
+        setOutput("Запуск программы...")
+        const res = await compilerApi.apiCompileProjectProjectIdRunPost(projectId, {
+            mainFile: "ConsoleApp.csproj"
+        });
+
+        setOutput(res.data.output ?? "");
+        await stop();
+
+    }
+    const stop = () => {
+        compilerApi.apiCompileProjectProjectIdStopPost(projectId)
+            .then(res => console.log(res.data))
+            .catch(err => alert(err));
+    }
+
+
+
+    return {
+        documents,
+        selectedDocument,
+        selectedId,
+        setSelectedId,
+        setDocumentContent,
+        addDocument,
+        updateDocument,
+        deleteDocument,
+        run,
+        stop,
+        output,
+        saveAll,
+        history: [],
+    };
+}
+

package/src/index.css

@@ -0,0 +1,78 @@
+:root {
+    font-family: 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;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+}
+
+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;
+    }
+}

package/src/main.tsx

@@ -0,0 +1,7 @@
+import {createRoot} from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+        <App/>
+)

package/src/types/EditorDocument.ts

@@ -0,0 +1,8 @@
+export interface EditorDocument {
+    id: string;
+    path: string;
+    name: string;
+    language: "javascript" | "csharp";
+    content: string;
+    modified: boolean;
+}