From 168763a643804a732080e359a139023b1ec8dce9 Mon Sep 17 00:00:00 2001
From: tutosrive <tutosrivegamer@gmail.com>
Date: Mon, 19 Jan 2026 19:50:22 -0500
Subject: [PATCH] Try clean unused imports

---
 index.html                      |  3 --
 src/components/CodapiCustom.tsx |  1 -
 src/main.tsx                    |  3 --
 src/pages/Home.tsx              | 72 ++++++++++++++++++---------------
 src/pages/Playground.tsx        |  8 ++--
 src/ts/codapi.ts                | 62 ++++++++--------------------
 src/tsx/utils.tsx               |  1 -
 7 files changed, 59 insertions(+), 91 deletions(-)

diff --git a/index.html b/index.html
index 7e8e743..437b957 100644
--- a/index.html
+++ b/index.html
@@ -28,9 +28,6 @@
 
     <link rel="shortcut icon" href="./src/assets/images/svg/favicon.svg" type="image/x-icon" />
 
-    <!-- <link rel="stylesheet" href="https://unpkg.com/@antonz/codapi@0.20.0/dist/snippet.css" />
-    <script defer src="https://unpkg.com/@antonz/codapi/dist/snippet.js"></script> -->
-
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-X9KF6BCPRP"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
diff --git a/src/components/CodapiCustom.tsx b/src/components/CodapiCustom.tsx
index bcbd7d5..be61db2 100644
--- a/src/components/CodapiCustom.tsx
+++ b/src/components/CodapiCustom.tsx
@@ -27,7 +27,6 @@ const CodapiCustom = ({ language, engine, classes, output, caller, selector, out
   return (
     <div className={classes}>
       <div className="sr-only">
-        {/* <Selector listSelectors={options} startValue={selectorStartValue} onChangeCustom={onChangeSelector} selectClasses="custom-select bg-zinc-900 border-0 focus-visible:outline-none rounded-2xl p-1 m-4" /> */}
         {/* @ts-ignore */}
         <codapi-snippet engine={engine} sandbox={language} editor="external" selector={selector} output-mode={outputMode}></codapi-snippet>
       </div>
diff --git a/src/main.tsx b/src/main.tsx
index b1f0c39..788df97 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,12 +1,9 @@
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import { BrowserRouter } from 'react-router-dom';
 
 createRoot(document.getElementById('root')!).render(
   <BrowserRouter basename="/eval/">
-    {/* <StrictMode> */}
     <App />
-    {/* </StrictMode> */}
   </BrowserRouter>,
 );
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index ad3a4a9..7312f08 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -9,42 +9,48 @@ export default function Home() {
         </div>
         <article className="mt-4">
           <p>Experience instant coding: switch languages, preview results live, and collaborate effortlessly. Eval empowers you to experiment, learn, and build—all in one powerful playground.</p>
+          <div className="divider"></div>
+          <section className="mt-5">
+            <header className="text-center">
+              <h2 className="font-bold text-2xl">Supported Languages (Experimental)</h2>
+            </header>
 
-          <div className="carousel w-full">
-            <div id="item2" className="carousel-item w-full">
-              <img src="./src/assets/images/png/python.png" className="w-full" />
-            </div>
-            <div id="item4" className="carousel-item w-full">
-              <img src="./src/assets/images/png/ruby.png" className="w-full" />
-            </div>
-            <div id="item1" className="carousel-item w-full">
-              <img src="./src/assets/images/png/lua.png" className="w-full" />
-            </div>
-            <div id="item1" className="carousel-item w-full">
-              <img src="./src/assets/images/png/js.png" className="w-full" />
-            </div>
+            <div className="mt-12 carousel w-full">
+              <div id="item1" className="carousel-item w-full">
+                <img src="./src/assets/images/png/python.png" className="w-full" />
+              </div>
+              <div id="item2" className="carousel-item w-full">
+                <img src="./src/assets/images/png/ruby.png" className="w-full" />
+              </div>
+              <div id="item3" className="carousel-item w-full">
+                <img src="./src/assets/images/png/lua.png" className="w-full" />
+              </div>
+              <div id="item4" className="carousel-item w-full">
+                <img src="./src/assets/images/png/js.png" className="w-full" />
+              </div>
 
-            <div id="item3" className="carousel-item w-full">
-              <img src="./src/assets/images/png/php.png" className="w-full" />
+              <div id="item5" className="carousel-item w-full">
+                <img src="./src/assets/images/png/php.png" className="w-full" />
+              </div>
             </div>
-          </div>
-          <div className="flex w-full justify-center gap-2 py-2">
-            <a href="#item1" className="btn btn-xs">
-              1
-            </a>
-            <a href="#item2" className="btn btn-xs">
-              2
-            </a>
-            <a href="#item3" className="btn btn-xs">
-              3
-            </a>
-            <a href="#item4" className="btn btn-xs">
-              4
-            </a>
-            <a href="#item5" className="btn btn-xs">
-              5
-            </a>
-          </div>
+            <div className="flex w-full justify-center gap-2 py-2">
+              <a href="#item1" className="btn btn-xs">
+                1
+              </a>
+              <a href="#item2" className="btn btn-xs">
+                2
+              </a>
+              <a href="#item3" className="btn btn-xs">
+                3
+              </a>
+              <a href="#item4" className="btn btn-xs">
+                4
+              </a>
+              <a href="#item5" className="btn btn-xs">
+                5
+              </a>
+            </div>
+          </section>
         </article>
       </div>
 
diff --git a/src/pages/Playground.tsx b/src/pages/Playground.tsx
index 6254cfc..2c21a96 100644
--- a/src/pages/Playground.tsx
+++ b/src/pages/Playground.tsx
@@ -15,13 +15,14 @@ import { Editor } from 'ace-builds';
 import LoaderInfinity from '../components/Loader';
 import { modeOptionsFromList, outputMoesOptionsFromList, themesOptionsFromList } from '../tsx/utils';
 
+ace.toString();
+
 export default function Playground() {
   const [loading, setLoading] = React.useState(true);
   const [mode, setMode] = React.useState('javascript');
   const [theme, setTheme] = React.useState('chaos');
   const [editorValue, setEditorValue] = React.useState(INITIAL_CODE);
   const [engine, setEngine] = React.useState('');
-  const [scripts, setScripts] = React.useState<string[]>([]);
   const [output, setOutput] = React.useState<any>('Output will be displayed here...');
   const [modesFiltered, setModes] = React.useState<CodapiEngineResponse[]>([]);
   const [outputMode, setOutputMode] = React.useState('table');
@@ -91,9 +92,6 @@ export default function Playground() {
 
   useEffect(() => {
     loadWasiScripts();
-  }, [scripts]);
-
-  useEffect(() => {
     const _engine = getEngineByMode(mode, 'without')?.engine || '';
     setEngine(_engine);
 
@@ -102,7 +100,7 @@ export default function Playground() {
     const events = ['result', 'error'];
     events.forEach((event) => {
       codapiSnippet?.removeEventListener(event, () => {});
-      codapiSnippet?.addEventListener(event, (e) => {
+      codapiSnippet?.addEventListener(event, () => {
         getCodapiOutput('#codapi-output');
       });
     });
diff --git a/src/ts/codapi.ts b/src/ts/codapi.ts
index d03d448..934a52e 100644
--- a/src/ts/codapi.ts
+++ b/src/ts/codapi.ts
@@ -1,5 +1,4 @@
 import type { Mode } from 'ace-builds/src-noconflict/ext-modelist';
-import axios from 'axios';
 
 export enum ECodapiLanguagesWithoutServer {
   JAVASCRIPT = 'Javascript|browser',
@@ -51,50 +50,23 @@ export enum ECodapiLanguagesWithServer {
 
 export const OUTPUT_MODES = [{ text: 'Plain text' }, { table: 'JSON like a table' }, { svg: 'SVG' }, { html: 'HTML elements' }, { dom: 'DOM elements, like chart.js' }];
 
-class Response {
-  status?: number;
-  data?: any;
-  error?: any;
-
-  constructor(status: number = 200, data: any = null, error: any = null) {
-    this.status = status;
-    this.data = data;
-    this.error = error;
-  }
-}
-
-interface ICodapiExecData {
-  code: string;
-  mode: string;
-  timeout?: number;
-}
-
-function changeJsToTs(m: string): string {
-  let mode = m.toLowerCase();
-
-  if (mode === 'javascript') {
-    mode = 'typescript';
-  }
-
-  return mode;
-}
-
-export async function exec(data: ICodapiExecData): Promise<Response> {
-  let response: Response = new Response();
-  // const mode = changeJsToTs(data.mode);
-  const dataSend = { sandbox: data.mode, command: 'run', files: { '': data.code }, engine: 'browser' };
-
-  try {
-    const req = await axios.post('https://api.codapi.org/v1/exec', dataSend);
-    const res = await req.data;
-    response.status = req.status;
-    response.data = res;
-  } catch (e) {
-    response.error = e;
-  }
-
-  return response;
-}
+// class Response {
+//   status?: number;
+//   data?: any;
+//   error?: any;
+
+//   constructor(status: number = 200, data: any = null, error: any = null) {
+//     this.status = status;
+//     this.data = data;
+//     this.error = error;
+//   }
+// }
+
+// interface ICodapiExecData {
+//   code: string;
+//   mode: string;
+//   timeout?: number;
+// }
 
 export class CodapiEngineResponse {
   engine: string;
diff --git a/src/tsx/utils.tsx b/src/tsx/utils.tsx
index c37ddb1..a3c2abb 100644
--- a/src/tsx/utils.tsx
+++ b/src/tsx/utils.tsx
@@ -21,7 +21,6 @@ export function themesOptionsFromList(list: Array<ThemesObj>): ReactNode[] {
   const options: ReactNode[] = [];
 
   list.forEach((item) => {
-    // añadir atributo select si si es "chaos", 2 opciones, option sera alguna de las dos item.name === 'chaos' ? 'selected' : ''
     const option = (
       <option className={'selectorOption'} key={item.caption} value={item.name}>
         {`${item.caption} (${item.isDark ? 'Dark' : 'Light'})`}