dmvs_html: scripts compiled by dmvs_js - the host of its DOM

[JaxCalder]

Summary

The page's scripts are now compiled by dmvs_js. dmvs_html's own evaluator (lexer, parser, abstract runner: about 1800 lines) is gone, and script.c is now the compiler's host, i.e. the DOM. Scripts get the whole language dmvs_js compiles:

• timers (setTimeout / setInterval / clearInterval);
• texts (innerText / textContent);
• numbers (parseFloat, toFixed, Math);
• loops, functions with returns, closures.

Before, all of that was reported and left out.

What the host does

• Elements: getElementById, querySelector(All) (an array) and getAttribute, resolved at conversion.
• Classes and styles:
  • classList.add / remove / toggle / replace / contains and style.<property> = <static text> are laid out as before: moves and fades are variables animated by CSS transitions, other looks become variants, and :active gives pressed looks.
  • Each change is a CALL of a handler reserved during compilation and filled once every change is laid out.
  • Classes an element changes together become one change (one look). The compiler's flush hook marks where the code changes direction, as the old code did.
• Element variables (let current = null; … current = w): a change of the element a variable holds is an IF for each element dmvs_js_object_domain() gives.
• Texts:
  • innerText / textContent is a text variable of 64 bytes.
  • It is painted on the element's first line, or on its content box when the element starts empty, and placed by text-align.
  • Its font gets every character the scripts contain.
  • A number variable shadows it, so parseFloat(el.innerText) reads the number it shows.
• Clicks:
  • addEventListener('click', f), el.onclick = f and onclick="…" (with this set to the element) make up an element's click handler.
  • el.click() calls it.
  • The click handler and the element-variable IFs copy their callees' actions instead of calling them, because dmview's calls nest only 8 deep.

Still reported and left out: createElement / innerHTML, src, setAttribute, styles known only at runtime, Date.

Depends on

• dmvs_js#4, with a release of dmvs_js (there is none yet). The module links dmvs_js@>=0.1 and dmvsi@>=0.4, so CI can't pass until that release exists.
• For views using the new code: todmvs#4 (code IR, long texts split), todmv#7 and dmview#14 (APPEND, format 0.5).

Added after the board test (car HMI)

• What scripts build as the page loads is part of the page:
  • dmvs_js's evaluator runs the loading. createElement, className, innerHTML with markup and appendChild are recorded as operations on the page's elements, and applied on every layout, states included.
  • A created element carries data-dmvs-built="k", so the compilation's k-th createElement() is that element, and its listeners become clicks.
  • The car HMI's queue shows its 5 songs, with the current one highlighted.
  • A list rebuilt later, while the view runs, stays as it was at load.
• innerHTML set to text in an element with no child elements becomes its text (the climate temperatures).
• Room for script texts: a script's text in a box as narrow as its text takes the room of the first wider ancestor, centred or right-aligned as the box sits in it. The speed was "6" instead of "68".
• No undefined texts: a text that is undefined is not set.
• New test step: a list built from an array, with its texts, the current row's background, and the three rows' clicks. 10/10 locally.

Added for the car HMI's home screen and queue

• CSS animations:
  • @keyframes, Tailwind's spin / ping / pulse / bounce, and animate-* / animate-[...] are supported for what dmview can move: transform: translate and opacity.
  • An animated element gets its group's variables, and the view gets one timer. Every 20 ms it starts each animation's segment that is due: an ANIMATE to the next keyframe with its timing function and duration. Animations repeat forever (infinite), and alternate goes there and back.
  • The equalizer bars bounce. Rotation and scaling (the spinning cover) are reported and not drawn.
• Rounded images:
  • An image takes the corners of its own border-radius, or of a box around it that clips and that it fills. Examples: a cover in a round frame, the queue's thumbnails.
  • This is dmvsi's image radius (dmvsi: an image's radius - shown in a rounded box dmvsi#6), which todmvs (dmvs_html: scripts compiled by dmvs_js - the host of its DOM #4) and todmvi (libtodmvi: cut and round - what a rounded box shows of an image todmvi#3) turn into a round image.
• Choices:
  • className set to one of known class lists becomes a change to each list, applied according to which one it is. The queue's highlight follows the current song.
  • img.src set to one of known images becomes a variant per image, shown by its variable. The cover changes with the song.
• Icons in looks: an element's look includes its text, so an icon font's ::before (play / pause) counts as a different look.
• Other looks seen as the element is: the queue's rows no longer vanish in their other look inside a screen that is hidden at load.
• Scroll extent: a box that scrolls can scroll as far down as its children go (the queue).
• dmvsi 0.5 is required.

Testing

test_dmvs_html passes 11/11 locally (with dmvs_js feature/host-objects).

• The existing script tests now check the actions with CALLs inlined (flat_actions()). Those are the same actions the old code emitted: windows sliding in with their transition, current held and tested, a class toggled.
• A new step converts a page with a speed text driven by setInterval and a temperature changed by a click with parseFloat / toFixed. It checks:
  • the text nodes are bound to text variables, centred, with the initial text;
  • the shadowing number starts at 21500;
  • the click sets both;
  • the view has a timer.

The car HMI (car_hmi_480x272.html) converts with todmvs (#4) into 36 boxes and 247 instructions, and assembles with todmv (#7) into a 53 KB view. It hasn't been tested on the board yet.

🤖 Generated with Claude Code