Compilando PSeInt en la web

Compilación

1. Descargue el código fuente de PSeInt.
2. Cree un devcontainer con base Linux universal.
3. Instale el SDK de Emscripten (emsdk) siguiendo la guía oficial.
4. Compile el intérprete core (pseint). Durante la compilación aparecieron advertencias de codificación de caracteres que fue necesario corregir.

codespace ➜ /workspaces/pseint/pseint $ make GPP=emcc   CXXFLAGS="-O3 -DNDEBUG -std=c++17 -DUSE_ZOCKETS"   LDFLAGS="-s EXPORT_ALL=1 -s INVOKE_RUN=0 -s NO_EXIT_RUNTIME=1 -s EXPORTED_FUNCTIONS=['_main'] -s EXPORTED_RUNTIME_METHODS=['callMain','ccall','cwrap']"   ARCH=lnx

Integración en la UI

1. Se creó una interfaz básica con un proyecto nuevo de Next.js.
2. Se cargó el módulo wasm generado por Emscripten usando un useEffect de React.

useEffect(() => {
  if (window.Module?.callMain) {
    setReady(true);
    return;
  }

  window.Module = window.Module ?? {};
  window.Module.locateFile = (path: string) => `/${path}`;
  window.Module.print = (...args: unknown[]) => {
    console.log("[pseint]", ...args);
    if (onStdout) {
      onStdout(args.join(" "));
    }
  };
  window.Module.printErr = (...args: unknown[]) => {
    console.error("[pseint]", ...args);
    if (onStderr) {
      onStderr(args.join(" "));
    }
  };
  window.Module.onRuntimeInitialized = () => setReady(true);

  const existingScript = document.querySelector(
    'script[data-emscripten="pseint"]'
  ) as HTMLScriptElement | null;
  if (existingScript) {
    return;
  }

  const script = document.createElement("script");
  script.src = "/pseint";
  script.type = "text/javascript";
  script.async = true;
  script.dataset.emscripten = "pseint";
  script.onerror = () => {
    console.error("Error loading pseint.js");
  };
  document.body.appendChild(script);
}, []);

Conectándolo a un editor y a un panel para mostrar stdout y stderr, se verifica que ejecuta un hola mundo escrito en el lenguaje de PSeInt. La salida aparece en el panel de la derecha, usando el intérprete original compilado con Emscripten. Esto demuestra la flexibilidad de WebAssembly y la capacidad de llevar binarios históricamente de escritorio directamente a la web.

Problemas de codificación

Se observan problemas de codificación en la salida; esto ya había sido advertido durante la compilación.

Monaco Editor

Gracias a que es open source, podemos cargar el Monaco Editor usado por VS Code y extenderlo con una definición personalizada para resaltar la sintaxis de PSeInt.