feat: extract JS browser runtime from feat/js-browser-runtime

- Update el-compiler/src/codegen-js.el to Phase 5 (1245 lines, up from 926) Adds: lambda literals, try/catch, extern fn, JS method call, Promise helpers, Object/Array utils, URL import declarations - Update el-compiler/runtime/el_runtime.js (1049 lines, up from 679) - Add examples/browser-counter.el, examples/browser-auth.el - Update spec/codegen-js.md to Phase 5 status - Update el-compiler/src/compiler.el: add --bundle, --minify, --obfuscate flags, bundled IIFE mode, terser/javascript-obfuscator post-processing pipeline - No lexer.el or parser.el taken from this branch
2026-05-05 00:11:03 -05:00
parent 3fbfe76f14
commit 92f393afd8
6 changed files with 1504 additions and 100 deletions
@@ -522,6 +522,328 @@ function math_sin(f)  { return Math.sin(f); }
 function math_cos(f)  { return Math.cos(f); }
 function math_pi()    { return Math.PI; }

+// ── DOM bridge (browser-only) ──────────────────────────────────────────────
+//
+// These functions wrap the browser DOM API. Each throws a descriptive error
+// when called from a Node environment, mirroring the pattern used by fs_*
+// in browser mode.
+
+function _ensureBrowser(name) {
+    if (IS_NODE) {
+        throw new Error(`${name}: not supported in Node runtime — DOM is browser-only`);
+    }
+}
+
+function dom_get_element(id) {
+    _ensureBrowser('dom_get_element');
+    return document.getElementById(String(id));
+}
+
+function dom_get_value(el) {
+    _ensureBrowser('dom_get_value');
+    return el == null ? '' : String(el.value ?? '');
+}
+
+function dom_set_value(el, v) {
+    _ensureBrowser('dom_set_value');
+    if (el != null) el.value = String(v);
+}
+
+function dom_get_text(el) {
+    _ensureBrowser('dom_get_text');
+    return el == null ? '' : String(el.textContent ?? '');
+}
+
+function dom_set_text(el, text) {
+    _ensureBrowser('dom_set_text');
+    if (el != null) el.textContent = String(text);
+}
+
+function dom_set_prop(el, prop, val) {
+    _ensureBrowser('dom_set_prop');
+    if (el != null) el[String(prop)] = val;
+}
+
+function dom_get_prop(el, prop) {
+    _ensureBrowser('dom_get_prop');
+    if (el == null) return null;
+    const v = el[String(prop)];
+    return v === undefined ? null : v;
+}
+
+function dom_set_style(el, prop, val) {
+    _ensureBrowser('dom_set_style');
+    if (el != null) el.style[String(prop)] = String(val);
+}
+
+function dom_add_class(el, cls) {
+    _ensureBrowser('dom_add_class');
+    if (el != null) el.classList.add(String(cls));
+}
+
+function dom_remove_class(el, cls) {
+    _ensureBrowser('dom_remove_class');
+    if (el != null) el.classList.remove(String(cls));
+}
+
+function dom_show(el) {
+    _ensureBrowser('dom_show');
+    if (el != null) el.style.display = '';
+}
+
+function dom_hide(el) {
+    _ensureBrowser('dom_hide');
+    if (el != null) el.style.display = 'none';
+}
+
+function dom_listen(el, event, handler) {
+    _ensureBrowser('dom_listen');
+    if (el != null) el.addEventListener(String(event), handler);
+}
+
+function dom_query(selector) {
+    _ensureBrowser('dom_query');
+    return document.querySelector(String(selector));
+}
+
+function dom_query_all(selector) {
+    _ensureBrowser('dom_query_all');
+    return Array.from(document.querySelectorAll(String(selector)));
+}
+
+function dom_create(tag) {
+    _ensureBrowser('dom_create');
+    return document.createElement(String(tag));
+}
+
+function dom_append(parent, child) {
+    _ensureBrowser('dom_append');
+    if (parent != null && child != null) parent.appendChild(child);
+}
+
+function dom_remove(el) {
+    _ensureBrowser('dom_remove');
+    if (el != null) el.remove();
+}
+
+function dom_is_null(el) {
+    return el === null || el === undefined;
+}
+
+// ── Extended DOM API (browser-only) ───────────────────────────────────────
+
+function dom_set_attr(el, attr, val) {
+    _ensureBrowser('dom_set_attr');
+    if (el != null) el.setAttribute(String(attr), String(val));
+}
+
+function dom_get_attr(el, attr) {
+    _ensureBrowser('dom_get_attr');
+    if (el == null) return '';
+    return el.getAttribute(String(attr)) ?? '';
+}
+
+function dom_remove_attr(el, attr) {
+    _ensureBrowser('dom_remove_attr');
+    if (el != null) el.removeAttribute(String(attr));
+}
+
+function dom_set_html(el, html) {
+    _ensureBrowser('dom_set_html');
+    if (el != null) el.innerHTML = String(html);
+}
+
+function dom_get_html(el) {
+    _ensureBrowser('dom_get_html');
+    return el == null ? '' : String(el.innerHTML ?? '');
+}
+
+function dom_get_parent(el) {
+    _ensureBrowser('dom_get_parent');
+    return el == null ? null : (el.parentElement ?? null);
+}
+
+function dom_contains_class(el, cls) {
+    _ensureBrowser('dom_contains_class');
+    if (el == null) return false;
+    return el.classList.contains(String(cls));
+}
+
+function dom_get_checked(el) {
+    _ensureBrowser('dom_get_checked');
+    return el == null ? false : Boolean(el.checked);
+}
+
+function dom_set_checked(el, val) {
+    _ensureBrowser('dom_set_checked');
+    if (el != null) el.checked = Boolean(val);
+}
+
+// ── Timer API (browser + Node) ─────────────────────────────────────────────
+
+function set_timeout(ms, cb) {
+    if (typeof setTimeout === 'undefined') {
+        throw new Error('set_timeout: setTimeout not available in this environment');
+    }
+    setTimeout(cb, ms | 0);
+}
+
+function set_interval(ms, cb) {
+    if (typeof setInterval === 'undefined') {
+        throw new Error('set_interval: setInterval not available in this environment');
+    }
+    return setInterval(cb, ms | 0);
+}
+
+function clear_interval(handle) {
+    if (typeof clearInterval !== 'undefined') clearInterval(handle);
+}
+
+// ── Local storage (browser-only) ───────────────────────────────────────────
+
+function local_storage_get(key) {
+    _ensureBrowser('local_storage_get');
+    return localStorage.getItem(String(key)) ?? '';
+}
+
+function local_storage_set(key, val) {
+    _ensureBrowser('local_storage_set');
+    localStorage.setItem(String(key), String(val));
+}
+
+function local_storage_remove(key) {
+    _ensureBrowser('local_storage_remove');
+    localStorage.removeItem(String(key));
+}
+
+// ── Window location / navigation (browser-only) ────────────────────────────
+
+function window_location() {
+    _ensureBrowser('window_location');
+    return window.location.href;
+}
+
+function window_redirect(url) {
+    _ensureBrowser('window_redirect');
+    window.location.href = String(url);
+}
+
+function window_on_load(cb) {
+    if (typeof document !== 'undefined') {
+        document.addEventListener('DOMContentLoaded', cb);
+    } else if (typeof window !== 'undefined') {
+        window.addEventListener('load', cb);
+    }
+    // In Node: no-op
+}
+
+// ── console_log (explicit debug log, distinct from println) ────────────────
+
+function console_log(msg) {
+    // eslint-disable-next-line no-console
+    console.log(String(msg));
+}
+
+// ── Window export helpers ──────────────────────────────────────────────────
+//
+// Expose El functions to the browser's global scope so they can be called
+// from inline event handlers (onclick="increment()") or by external JS.
+// In Node mode, writes to globalThis so the same pattern works in tests.
+
+function window_set(name, val) {
+    if (typeof window !== 'undefined') {
+        window[String(name)] = val;
+    } else if (typeof globalThis !== 'undefined') {
+        globalThis[String(name)] = val;
+    }
+}
+
+function window_get(name) {
+    if (typeof window !== 'undefined') {
+        const v = window[String(name)];
+        return v === undefined ? null : v;
+    }
+    return null;
+}
+
+// ── Promise helpers ────────────────────────────────────────────────────────
+//
+// Third-party APIs often return Promises but are not El @async functions.
+// These helpers let El programs chain .then / .catch without needing
+// native_js, and without requiring the callee to be @async.
+
+function promise_then(p, cb) {
+    return Promise.resolve(p).then(cb);
+}
+
+function promise_catch(p, cb) {
+    return Promise.resolve(p).catch(cb);
+}
+
+function promise_resolve(val) {
+    return Promise.resolve(val);
+}
+
+function promise_reject(msg) {
+    return Promise.reject(new Error(String(msg)));
+}
+
+// ── Object / Array utilities ───────────────────────────────────────────────
+//
+// Structural operations on Any-typed JS values. These complement the
+// El map/list primitives for interop with third-party library objects.
+
+function object_assign(target, source) {
+    return Object.assign(Object.assign({}, target), source);
+}
+
+function object_keys(obj) {
+    if (obj === null || obj === undefined) return [];
+    return Object.keys(obj);
+}
+
+function object_values(obj) {
+    if (obj === null || obj === undefined) return [];
+    return Object.values(obj);
+}
+
+function json_deep_clone(obj) {
+    if (obj === null || obj === undefined) return null;
+    return JSON.parse(JSON.stringify(obj));
+}
+
+function array_from(iterable) {
+    if (iterable === null || iterable === undefined) return [];
+    return Array.from(iterable);
+}
+
+function type_of(val) {
+    return typeof val;
+}
+
+function instanceof_check(val, constructor_name) {
+    if (typeof globalThis[constructor_name] === 'function') {
+        return val instanceof globalThis[constructor_name];
+    }
+    return false;
+}
+
+// ── native_js escape hatch ─────────────────────────────────────────────────
+//
+// Evaluate arbitrary JS from El source. Intended for calling third-party
+// browser libraries (Supabase, Stripe, etc.) until proper El bindings exist.
+// Use sparingly — this bypasses El's type system entirely.
+
+function native_js(code) {
+    // eslint-disable-next-line no-eval
+    return eval(String(code));
+}
+
+function native_js_call(obj, method, args) {
+    if (obj == null) throw new Error('native_js_call: object is null');
+    return obj[String(method)](...(Array.isArray(args) ? args : []));
+}
+
 // ── Stubs for not-yet-supported features ───────────────────────────────────
 //
 // These compile but throw when called. See spec/codegen-js.md §7.
@@ -632,6 +954,31 @@ const __el = {
    // Float / math
    float_to_str, int_to_float, float_to_int, format_float, decimal_round,
    str_to_float, math_sqrt, math_log, math_ln, math_sin, math_cos, math_pi,
+    // DOM bridge (browser-only)
+    dom_get_element, dom_get_value, dom_set_value, dom_get_text, dom_set_text,
+    dom_set_prop, dom_get_prop, dom_set_style, dom_add_class, dom_remove_class,
+    dom_show, dom_hide, dom_listen, dom_query, dom_query_all, dom_create,
+    dom_append, dom_remove, dom_is_null,
+    // Extended DOM
+    dom_set_attr, dom_get_attr, dom_remove_attr, dom_set_html, dom_get_html,
+    dom_get_parent, dom_contains_class, dom_get_checked, dom_set_checked,
+    // Timers
+    set_timeout, set_interval, clear_interval,
+    // Local storage
+    local_storage_get, local_storage_set, local_storage_remove,
+    // Window location
+    window_location, window_redirect, window_on_load,
+    // Debug
+    console_log,
+    // Window export helpers
+    window_set, window_get,
+    // Promise helpers
+    promise_then, promise_catch, promise_resolve, promise_reject,
+    // Object / Array utilities
+    object_assign, object_keys, object_values, json_deep_clone,
+    array_from, type_of, instanceof_check,
+    // native_js escape hatch
+    native_js, native_js_call,
    // CGI / DHARMA / Engram / LLM (stubs)
    el_cgi_init,
    dharma_connect, dharma_send, dharma_activate, dharma_emit, dharma_field,
@@ -676,4 +1023,27 @@ export {
    dharma_connect, dharma_send, dharma_activate, dharma_emit, dharma_field,
    engram_node, engram_search, engram_activate,
    llm_call, llm_call_system,
+    // DOM bridge
+    dom_get_element, dom_get_value, dom_set_value, dom_get_text, dom_set_text,
+    dom_set_prop, dom_get_prop, dom_set_style, dom_add_class, dom_remove_class,
+    dom_show, dom_hide, dom_listen, dom_query, dom_query_all, dom_create,
+    dom_append, dom_remove, dom_is_null,
+    // Extended DOM
+    dom_set_attr, dom_get_attr, dom_remove_attr, dom_set_html, dom_get_html,
+    dom_get_parent, dom_contains_class, dom_get_checked, dom_set_checked,
+    // Timers
+    set_timeout, set_interval, clear_interval,
+    // Local storage
+    local_storage_get, local_storage_set, local_storage_remove,
+    // Window location
+    window_location, window_redirect, window_on_load,
+    // Debug
+    console_log,
+    // Window / native_js
+    window_set, window_get, native_js, native_js_call,
+    // Promise helpers
+    promise_then, promise_catch, promise_resolve, promise_reject,
+    // Object / Array utilities
+    object_assign, object_keys, object_values, json_deep_clone,
+    array_from, type_of, instanceof_check,
 };