edrlab · panaC · Nov 24, 2025 · Nov 25, 2025 · Nov 25, 2025
diff --git a/front-end/package-lock.json b/front-end/package-lock.json
diff --git a/front-end/package.json b/front-end/package.json
@@ -5,7 +5,7 @@
   "main": "dist/index.js",
   "scripts": {
     "postbuild": "node scripts/preprocessor.js -D__NODE__ -D__DEV__ dist/index.js",
-    "build": "tsc",
+    "build": "tsc && tsc -p tsconfig-client.json",
     "build:container": "tsc && node scripts/preprocessor.js -D__NODE__ -D__BUILD__ dist/index.js",
     "validate_secrets": "sh ./scripts/validate_secrets_json.sh",
     "start": "node dist/index.js",
@@ -24,16 +24,20 @@
     "hono": "^4.10.4",
     "jsonwebtoken": "^9.0.2",
     "nanoid": "^5.1.6",
+    "react": "^19.2.0",
     "simple-git": "^3.30.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^24.10.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "cpy-cli": "^6.0.0",
     "dotenv": "^17.2.3",
     "eslint": "^9.39.1",
     "make-dir-cli": "^4.0.0",
+    "react-dom": "^19.2.0",
     "rimraf": "^6.1.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.4"

diff --git a/front-end/src/client/hello.tsx b/front-end/src/client/hello.tsx
@@ -0,0 +1,140 @@
+import React from "react";
+import { createRoot } from 'react-dom/client';
+
+interface EntryData {
+    id: number;
+    lang: string;
+    content: string;
+}
+
+export const Hello = (props: { id: string }) => {
+
+    const externalStateRef = React.useRef(JSON.parse((document.getElementById(props.id) as HTMLTextAreaElement).value || '{}'));
+    const setState = (value: any) => {
+        (document.getElementById(props.id) as HTMLTextAreaElement).value = JSON.stringify(value, null, 4);
+        externalStateRef.current = value;
+    }
+    const [entries, setEntries] = React.useState<EntryData[]>([{ id: 1, lang: 'en', content: '' }]);
+
+    React.useEffect(() => {
+        const initialData = externalStateRef.current;
+        const initialEntries: EntryData[] = Object.entries(initialData).map(([key, value], index) => ({
+            id: index + 1,
+            lang: key,
+            content: value as string,
+        }));
+
+        if (initialEntries.length > 0) {
+            setEntries(initialEntries);
+        }
+    }, []);
+
+    const handleChange = (id: number, field: keyof Omit<EntryData, 'id'>, value: string) => {
+        setEntries(prevEntries =>
+            prevEntries.map(entry =>
+                entry.id === id ? { ...entry, [field]: value } : entry
+            )
+        );
+    };
+
+    const handleAddEntry = () => {
+        const maxId = entries.length > 0 ? Math.max(...entries.map(e => e.id)) : 0;
+        const newId = maxId + 1;
+        setEntries(prevEntries => [...prevEntries, { id: newId, lang: '', content: '' }]);
+    };
+
+    const handleRemoveEntry = (idToRemove: number) => {
+        setEntries(prevEntries => prevEntries.filter(entry => entry.id !== idToRemove));
+    };
+
+    const handleSubmit = () => {
+        const newExternalState: { [key: string]: string } = {};
+        entries.forEach(entry => {
+            if (entry.lang && entry.content) {
+                newExternalState[entry.lang] = entry.content;
+            }
+        });
+        setState(newExternalState);
+    };
+
+    return (
+        <>
+            {entries.map((entry) => (
+                <div
+                    key={entry.id}
+                    className="input-wrapper"
+                    style={{
+                        display: "flex",
+                        gap: "10px",
+                        alignItems: "end",
+                        width: '100%',
+                        border: "var(--pico-border-width) solid var(--pico-border-color)",
+                        borderRadius: "5px",
+                        padding: "10px",
+                        marginBottom: "10px",
+                        backgroundColor: "var(--pico-background-color)",
+                    }}
+                >
+                    <div className="input-container" style={{ width: "120px" }}>
+                        <label htmlFor={`_react_${props.id}_lang-${entry.id}`}>Lang</label>
+                        <input
+                            name={`_react_${props.id}_lang-${entry.id}`}
+                            placeholder="en"
+                            style={{ margin: "0" }}
+                            value={entry.lang}
+                            onChange={(e) => handleChange(entry.id, 'lang', e.target.value)}
+                        />
+                    </div>
+                    <div className="input-container" style={{ width: "100%" }}>
+                        <label htmlFor={`_react_${props.id}_title-${entry.id}`}>{props.id}</label>
+                        <input
+                            name={`_react_${props.id}_title-${entry.id}`}
+                            style={{ margin: "0" }}
+                            value={entry.content}
+                            onChange={(e) => handleChange(entry.id, 'content', e.target.value)}
+                        />
+                    </div>
+                    {entry.id ?
+                        <button
+                            onClick={() => handleRemoveEntry(entry.id)}
+                            style={{ padding: "10px", cursor: "pointer" }}
+                            title="Delete this entry"
+                        >
+                            X
+                        </button>
+                        : <></>
+                    }
+                </div>
+            ))}
+            <div style={{justifySelf: 'end'}}>
+                <button
+                    onClick={handleAddEntry}
+                    style={{ padding: "10px", cursor: "pointer", marginRight: "10px" }}
+                >
+                    + Add Entry
+                </button>
+                <button
+                    onClick={handleSubmit}
+                    style={{ padding: "10px", cursor: "pointer" }}
+                >
+                    Submit & Update
+                </button>
+            </div>
+        </>
+    );
+}
+
+
+document.addEventListener("DOMContentLoaded", () => {
+    console.log("LOADED");
+    {
+        const domNode = document.getElementById('__title_react_root_node') as HTMLElement;
+        const root = createRoot(domNode);
+        root.render(<Hello id={"title"} />);
+    }
+    {
+        const domNode = document.getElementById('__desc_react_root_node') as HTMLElement;
+        const root = createRoot(domNode);
+        root.render(<Hello id={"description"} />);
+    }
+});
diff --git a/front-end/src/controller/profile.tsx b/front-end/src/controller/profile.tsx
@@ -34,6 +34,7 @@ profile.get('/',
         return c.render(
             <>
                 <script src='/dist/client/profile.js'></script>
+                <script src="/dist/client/hello.js" type="module"></script>
                 {/* <script src='/node_modules/lit-html/lit-html.js'></script> */}
                 <title>profile</title>
                 <div class="grid">
@@ -58,7 +59,9 @@ profile.get('/',
                             id="title"
                             name="title"
                             aria-invalid={undefined}
+                            hidden
                         >{JSON.stringify(manifest.title, null, 4)}</textarea>
+                        <div id="__title_react_root_node"></div>
                     </fieldset>
 
                     <fieldset>
@@ -69,6 +72,7 @@ profile.get('/',
                             aria-invalid={undefined}
                             >{JSON.stringify(manifest.description, null, 4)}</textarea>
                     </fieldset>
+                    <div id="__desc_react_root_node"></div>
 
                     {/* DARK THEME */}
                     <fieldset>

diff --git a/front-end/src/index.tsx b/front-end/src/index.tsx
@@ -20,6 +20,7 @@ import login from './controller/login.js'
 import profile from './controller/profile.js'
 import upload from './controller/upload.js';
 import status_ from './controller/status.js';
+import { html } from 'hono/html';
 // import { Layout } from './view/layout.js';
 
 const app = new Hono()
@@ -43,6 +44,26 @@ app.use('/dist/client/**/*', serveStatic({
   }
 }));
 
+// app.use('/node_modules/react/**/*', serveStatic({
+//   root: "./",
+//   // onNotFound((path) => {
+//   //   console.log("NOT FOUND", path);
+//   // }),
+//   onNotFound: (path) => {
+//     console.log("[NOT FOUND PATH=]", path);
+//   }
+// }));
+
+app.use('/src/client/**/*.tsx', serveStatic({
+  root: "./",
+  // onNotFound((path) => {
+  //   console.log("NOT FOUND", path);
+  // }),
+  onNotFound: (path) => {
+    console.log("[NOT FOUND PATH=]", path);
+  }
+}));
+
 app.use('*', async (c, next) => {
   c.setRenderer((content) => {
     return c.html(
@@ -53,6 +74,17 @@ app.use('*', async (c, next) => {
           <meta name="color-scheme" content="light dark" />
           <link rel="stylesheet" href="/third-party/css/pico.indigo.css" />
           {/* <link rel="stylesheet" href="/third-party/css/gridlex.css" /> */}
+          {
+            html`<script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/[email protected]?dev",
+      "react-dom/client": "https://esm.sh/[email protected]/client?dev",
+      "react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime?dev"
+    }
+  }
+</script>`
+          }
           <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js" defer></script>
           <script src="/dist/client/client.js" type="module"></script>
         </head>