ONBROWSER
Browser-side OQL execution context. Runs inside a compiled WASM OQL runtime delivered to the user's browser — not on the server. Standard OQL verbs are legal inside ONBROWSER blocks; verbs that require server I/O (QUERY, FETCH, EMAIL, etc.) are not.
[pending] — ONBROWSER is designed and specified. Runtime implementation is in progress.
How it works
OQL compiles ONBROWSER blocks server-side. The compiled instruction set is delivered to the browser alongside the page. A lightweight WASM OQL runtime in the browser executes the instructions against the live DOM. No OQL source code is ever exposed to the browser — only the compiled output.
Selection
(* First match — querySelector *)
ONBROWSER SELECT "#header" SET ?el
(* All matches — querySelectorAll → array *)
ONBROWSER ALL SELECT ".card" SET ?cards
(* Inline set — select and set inner HTML in one step *)
ONBROWSER SELECT "#status" INNERHTML "<strong>Done</strong>"
Reading DOM properties
ONBROWSER ?el('innerHTML') SET ?html
ONBROWSER ?el('value') SET ?input_val
ONBROWSER ?el('dataset.userId') SET ?uid
Setting DOM content
ONBROWSER ?el INNERHTML "<span>Updated</span>"
ONBROWSER ?el INNERTEXT "Plain text only"
ONBROWSER STRING "Hello World" SET ?el('innerText')
ONBROWSER STRING "new-value" SET ?el('value')
Class manipulation
ONBROWSER ?el CLASS ADD "visible"
ONBROWSER ?el CLASS REMOVE "hidden"
ONBROWSER ?el CLASS RESET "card card-active" (* replaces all classes *)
Attribute manipulation
ONBROWSER ?el ATTRIBUTE ADD "disabled"
ONBROWSER ?el ATTRIBUTE REMOVE "disabled"
ONBROWSER ?el ATTRIBUTE UPDATE "href" WITH "https://ocalt.com"
ONBROWSER ?el ATTRIBUTE UPDATE "data-id" WITH ?record(id)
Style manipulation
(* Full style string — merges with existing *)
ONBROWSER ?el STYLE "height:10px; opacity:0.5;"
(* Individual CSS property — any valid CSS property name *)
ONBROWSER ?el STYLE HEIGHT "10px"
ONBROWSER ?el STYLE COLOR "#0057FF"
ONBROWSER ?el STYLE BACKGROUND "rgba(0,0,0,0.4)"
ONBROWSER ?el STYLE OPACITY "0"
ONBROWSER ?el STYLE DISPLAY "none"
ONBROWSER ?el STYLE DISPLAY "flex"
ONBROWSER ?el STYLE TRANSFORM "translateX(100px)"
Window
(* Read window property *)
ONBROWSER !window("innerWidth") SET ?w
ONBROWSER !window("innerHeight") SET ?h
ONBROWSER !window("scrollY") SET ?scroll
(* Set window property *)
ONBROWSER !window("scrollY") AS "200"
Navigation
ONBROWSER NAVIGATE "https://ocalt.com"
ONBROWSER HASH "section-2" (* sets location.hash → #section-2 *)
ONBROWSER RELOAD (* location.reload() *)
Client-side operations
(* Define a named client-side operation *)
ONBROWSER NEW OPERATION AS "handleClick" OPEN NEST
ONBROWSER SELECT "#result" INNERTEXT "Clicked!"
ONBROWSER !window("scrollY") SET ?y
EMIT ?y
CLOSE NEST
(* Execute by name *)
ONBROWSER EXECUTE "handleClick"
(* Bind to element event *)
ONBROWSER ?el ONCLICK EXECUTE "handleClick" WITH !this AND !event
(* Describe a stored operation — also legal in standard OQL outside ONBROWSER *)
DESCRIBE OPERATION "handleClick" SET ?def
Standard OQL inside ONBROWSER
Standard non-I/O OQL verbs are legal inside ONBROWSER blocks. This allows loops, conditions, and data manipulation client-side.
ONBROWSER ALL SELECT ".item" SET ?items
AFTER FOREACH ?items AS ?item OPEN NEST
ONBROWSER ?item CLASS ADD "loaded"
ONBROWSER ?item STYLE OPACITY "1"
CLOSE NEST
Verb reference
| Verb | Description |
|---|---|
ONBROWSER SELECT "css" SET ?el | querySelector — first matching element → element reference |
ONBROWSER ALL SELECT "css" SET ?els | querySelectorAll → element array |
ONBROWSER SELECT "css" INNERHTML "html" | Select and set innerHTML inline |
ONBROWSER SELECT "css" INNERTEXT "text" | Select and set innerText inline |
ONBROWSER ?el('prop') SET ?var | Read DOM property into variable |
ONBROWSER STRING "val" SET ?el('prop') | Write string to DOM property |
ONBROWSER ?el INNERHTML "html" | Set innerHTML on element reference |
ONBROWSER ?el INNERTEXT "text" | Set innerText on element reference |
ONBROWSER ?el CLASS ADD "cls" | classList.add |
ONBROWSER ?el CLASS REMOVE "cls" | classList.remove |
ONBROWSER ?el CLASS RESET "cls1 cls2" | Replace all classes |
ONBROWSER ?el ATTRIBUTE ADD "attr" | setAttribute (boolean attribute) |
ONBROWSER ?el ATTRIBUTE REMOVE "attr" | removeAttribute |
ONBROWSER ?el ATTRIBUTE UPDATE "attr" WITH "val" | setAttribute with value |
ONBROWSER ?el STYLE "css text" | Merge cssText string |
ONBROWSER ?el STYLE PROPERTY "val" | Set individual CSS property |
ONBROWSER !window("prop") SET ?var | Read window property |
ONBROWSER !window("prop") AS "val" | Set window property |
ONBROWSER NAVIGATE "url" | window.location.href |
ONBROWSER HASH "hash" | location.hash = "#hash" |
ONBROWSER RELOAD | location.reload() |
ONBROWSER NEW OPERATION AS "name" OPEN NEST ... CLOSE NEST | Define client-side operation |
ONBROWSER EXECUTE "name" | Execute client-side operation by name |
ONBROWSER ?el ONCLICK EXECUTE "name" WITH !this AND !event | Bind operation to click event |
ONBROWSER ?el ONCHANGE EXECUTE "name" WITH !this AND !event | Bind operation to change event |
ONBROWSER ?el ONSUBMIT EXECUTE "name" WITH !this AND !event | Bind operation to submit event |
DESCRIBE OPERATION "name" SET ?def | Retrieve stored operation definition (standard OQL) |