Mark/minimax
1
0
Fork 0
Code Issues Releases Activity

upgrades

Browse Source
This commit is contained in:
Mark
2025-10-29 21:14:44 -07:00
parent 667624d0ca
commit 965253386a
13 changed files with 146 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
rust/rhai-codemirror/src/rhai_mode.rs
View File

@@ -205,7 +205,7 @@ fn token(stream: codemirror::StringStream, state: &mut State) -> Result<Option<S
if state.is_defining_identifier {
"def"
} else {
"variable"
"identifier"
}
}
rhai::Token::CharConstant(_) => "string-2",

3
webui/bun.lock
View File

@@ -7,6 +7,7 @@
"@xterm/xterm": "^5.5.0",
"clsx": "^2.0.0",
"codemirror": "^5.65.1",
"lucide-react": "^0.548.0",
"next": "14.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
@@ -477,6 +478,8 @@
"loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
"lucide-react": ["lucide-react@0.548.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-63b16z63jM9yc1MwxajHeuu0FRZFsDtljtDjYm26Kd86UQ5HQzu9ksEtoUUw4RBuewodw/tGFmvipePvRsKeDA=="],
"math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
"merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],

1
webui/package.json
View File

@@ -13,6 +13,7 @@
"@xterm/xterm": "^5.5.0",
"clsx": "^2.0.0",
"codemirror": "^5.65.1",
"lucide-react": "^0.548.0",
"next": "14.0.0",
"react": "18.2.0",
"react-dom": "18.2.0"

8
webui/src/app/layout.tsx
View File

@@ -2,7 +2,7 @@ import "@/styles/globals.css";
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Rhai Playground",
title: "Minimax",
description: "An interactive Rhai scripting language playground",
};
@@ -18,12 +18,6 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/5.3.45/css/materialdesignicons.min.css"
/>
</head>
<body>{children}</body>
</html>
);

24
webui/src/app/page.tsx
View File

@@ -2,6 +2,7 @@
import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
import { loadAllWasm } from "@/utils/wasmLoader";
const Playground = dynamic(() => import("@/components/Playground"), {
ssr: false,
@@ -20,14 +21,7 @@ const Playground = dynamic(() => import("@/components/Playground"), {
}}
>
<div>
Loading{" "}
<a
href="https://github.com/rhaiscript/playground"
target="_blank"
>
Rhai Playground
</a>
...
Loading WASM...
</div>
</div>
),
@@ -35,12 +29,24 @@ const Playground = dynamic(() => import("@/components/Playground"), {
export default function Home() {
const [isClient, setIsClient] = useState(false);
const [isWasmLoaded, setIsWasmLoaded] = useState(false);
useEffect(() => {
setIsClient(true);
// Load all WASM modules
loadAllWasm()
.then(() => {
setIsWasmLoaded(true);
})
.catch((error) => {
console.error('Failed to load WASM modules:', error);
// Still allow the app to load, but WASM features may not work
setIsWasmLoaded(true);
});
}, []);
if (!isClient) {
if (!isClient || !isWasmLoaded) {
return (
<div
id="loading"

27
webui/src/components/Editor.tsx
View File

@@ -14,7 +14,7 @@ if (typeof window !== "undefined") {
CodeMirror = cm.default;
await import("codemirror/addon/edit/matchbrackets");
await import("codemirror/addon/edit/closebrackets");
await import("codemirror/addon/selection/active-line");
//await import("codemirror/addon/selection/active-line");
await import("codemirror/addon/comment/comment");
// @ts-ignore - CodeMirror addon type issues
await import("codemirror/addon/fold/brace-fold");
@@ -23,25 +23,12 @@ if (typeof window !== "undefined") {
// @ts-ignore - CodeMirror addon type issues
await import("codemirror/addon/search/match-highlighter");
require("codemirror/lib/codemirror.css");
require("codemirror/theme/monokai.css");
require("codemirror/theme/material-darker.css");
require("codemirror/addon/fold/foldgutter.css");
try {
await loadRhaiWasm();
initRhaiMode(CodeMirror);
console.log('✅ WASM-based Rhai mode initialized successfully');
} catch (error) {
console.warn('⚠️ Failed to load WASM Rhai mode, falling back to JavaScript mode:', error);
// Fallback to JavaScript mode if WASM fails
CodeMirror.defineMode("rhai", (config: any) => {
const jsMode = CodeMirror.getMode(config, "javascript");
return {
...jsMode,
name: "rhai",
helperType: "rhai"
};
});
}
await loadRhaiWasm();
initRhaiMode(CodeMirror);
console.log('✅ WASM-based Rhai mode initialized successfully');
isCodeMirrorReady = true;
})
@@ -74,7 +61,7 @@ export const Editor = forwardRef<any, EditorProps>(function Editor(
const editor = CodeMirror.fromTextArea(textareaRef.current, {
lineNumbers: true,
mode: "rhai",
theme: "monokai",
theme: "material-darker",
indentUnit: 4,
matchBrackets: true,
foldGutter: {
@@ -113,7 +100,7 @@ export const Editor = forwardRef<any, EditorProps>(function Editor(
editorRef.current = null;
}
};
}, []); // Only run once
}, []); // DO NOT FILL ARRAY
return (
<div className={styles.editorContainer}>

23
webui/src/components/ui/Button.tsx
View File

@@ -2,8 +2,19 @@
import { ButtonHTMLAttributes, ReactNode } from "react";
import clsx from "clsx";
import { Play, Square, Loader2 } from "lucide-react";
import styles from "@/styles/Button.module.css";
const iconMap = {
play: Play,
stop: Square,
loading: Loader2,
};
function getIcon(iconName: string) {
return iconMap[iconName as keyof typeof iconMap];
}
interface ButtonProps
extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
variant?:
@@ -47,10 +58,16 @@ export function Button({
title={tooltip}
{...props}
>
{iconLeft && !loading && <i className={`mdi mdi-${iconLeft}`} />}
{loading && <i className="mdi mdi-loading mdi-spin" />}
{iconLeft && !loading && (() => {
const IconComponent = getIcon(iconLeft);
return IconComponent ? <IconComponent size={16} /> : null;
})()}
{loading && <Loader2 size={16} className={styles.spin} />}
<span>{children}</span>
{iconRight && !loading && <i className={`mdi mdi-${iconRight}`} />}
{iconRight && !loading && (() => {
const IconComponent = getIcon(iconRight);
return IconComponent ? <IconComponent size={16} /> : null;
})()}
</button>
);
}

22
webui/src/components/ui/Dropdown.tsx
View File

@@ -2,8 +2,19 @@
import { useState, useRef, useEffect, ReactNode } from "react";
import clsx from "clsx";
import { HelpCircle, MoreHorizontal, ChevronDown } from "lucide-react";
import styles from "@/styles/Dropdown.module.css";
const iconMap = {
"help-circle": HelpCircle,
"dots-horizontal": MoreHorizontal,
"menu-down": ChevronDown,
};
function getIcon(iconName: string) {
return iconMap[iconName as keyof typeof iconMap];
}
interface DropdownItem {
text: string;
onClick: () => void;
@@ -59,12 +70,13 @@ export function Dropdown({
onClick={() => !disabled && setIsOpen(!isOpen)}
disabled={disabled}
>
{triggerIcon && <i className={`mdi mdi-${triggerIcon}`} />}
{triggerIcon && (() => {
const IconComponent = getIcon(triggerIcon);
return IconComponent ? <IconComponent size={16} /> : null;
})()}
{trigger && <span>{trigger}</span>}
{!triggerIcon && !trigger && (
<i className="mdi mdi-dots-horizontal" />
)}
<i className="mdi mdi-menu-down" />
{!triggerIcon && !trigger && <MoreHorizontal size={16} />}
<ChevronDown size={16} />
</button>
{isOpen && (

9
webui/src/lib/script-runner.worker.ts
View File

@@ -22,7 +22,14 @@ async function initWasm(): Promise<void> {
self.onmessage = async (event) => {
const { type, script } = event.data;
if (type === "run") {
if (type === "init") {
try {
await initWasm();
self.postMessage({ type: "ready" });
} catch (error) {
self.postMessage({ type: "error", error: String(error) });
}
} else if (type === "run") {
try {
await initWasm();

13
webui/src/styles/Button.module.css
View File

@@ -39,6 +39,19 @@
cursor: wait;
}
.spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Button types */
.is-primary {
background: #007bff;

4
webui/src/styles/Editor.module.css
View File

@@ -6,7 +6,7 @@
.editorContainer textarea {
width: 100%;
height: 100%;
border: 1px solid #ccc;
border: none;
font-family: "Consolas", "Monaco", "Courier New", monospace;
font-size: 14px;
line-height: 1.4;
@@ -18,7 +18,7 @@
/* Enhanced CodeMirror styles from playground */
.editorContainer :global(.CodeMirror) {
border: 1px solid #ccc;
border: none;
height: 100% !important;
box-sizing: border-box;
font-size: 0.95em;

2
webui/src/styles/Playground.module.css
View File

@@ -71,6 +71,8 @@
.terminalContainer {
flex: 1;
overflow: hidden;
padding: 8px;
background: #1D1F21;
}
.result {

66
webui/src/utils/wasmLoader.ts
View File

@@ -3,22 +3,31 @@ import init, { RhaiMode, init_codemirror_pass } from '@/wasm/rhai-codemirror/rha
let wasmInitialized = false;
let wasmModule: any = null;
let wasmLoadPromise: Promise<any> | null = null;
export const loadRhaiWasm = async () => {
if (wasmInitialized) {
return wasmModule;
}
try {
// Initialize the WASM module
wasmModule = await init();
wasmInitialized = true;
return wasmModule;
} catch (error) {
console.error('Failed to load Rhai WASM module:', error);
throw error;
if (wasmLoadPromise) {
return wasmLoadPromise;
}
wasmLoadPromise = (async () => {
try {
// Initialize the WASM module
wasmModule = await init();
wasmInitialized = true;
return wasmModule;
} catch (error) {
console.error('Failed to load Rhai WASM module:', error);
wasmLoadPromise = null; // Reset on error
throw error;
}
})();
return wasmLoadPromise;
};
export const initRhaiMode = (CodeMirror: any) => {
@@ -35,4 +44,41 @@ export const initRhaiMode = (CodeMirror: any) => {
});
};
// Function to preload all WASM modules used by the application
export const loadAllWasm = async (): Promise<void> => {
try {
// Load Rhai CodeMirror WASM
await loadRhaiWasm();
// Load Script Runner WASM by creating and immediately terminating a worker
const worker = new Worker(new URL('../lib/script-runner.worker.ts', import.meta.url));
await new Promise<void>((resolve, reject) => {
const timeout = setTimeout(() => {
worker.terminate();
reject(new Error('Script runner WASM load timeout'));
}, 10000);
worker.postMessage({ type: 'init' });
worker.onmessage = (event) => {
if (event.data.type === 'ready') {
clearTimeout(timeout);
worker.terminate();
resolve();
}
};
worker.onerror = (error) => {
clearTimeout(timeout);
worker.terminate();
reject(error);
};
});
console.log('✅ All WASM modules loaded successfully');
} catch (error) {
console.error('❌ Failed to load WASM modules:', error);
throw error;
}
};
export { RhaiMode };