ov-tree

src/ov-tree.js

A STILL OF demo/aux.html

Attributes

None.

Properties

None.

Events

Using it

import 'overscan'
import 'overscan/overscan.css'

<ov-tree id="doc-tree">
</ov-tree>
<script type="module">
  /* demo/aux.html's nodes: "none" and "unknown" are different states, and
     both are on screen. */
  const NODES = [
    { label: 'reactor', children: [
      { label: 'core', children: 'none' },
      { label: 'coolant', children: [{ label: 'loop a', children: 'none' },
                                     { label: 'loop b', children: 'unknown' }] },
    ] },
    { label: 'sector 4', children: [
      { label: 'vents', children: 'unknown' },
      { label: 'sensors', children: 'none' },
    ] },
    { label: 'archive', children: 'unknown' },
  ];
  customElements.whenDefined('ov-tree').then(() => {
    const t = document.getElementById('doc-tree');
    t.load(structuredClone(NODES));
    t.open.add('0'); t.open.add('0.1'); t.open.add('1');
    t.paint();
  });
</script>

import { OvTree } from 'overscan/react'

<OvTree
  id="doc-tree"
  onReorder={handler}
/>

import { OvTree } from 'overscan/vue'

<OvTree
  id="doc-tree"
  @reorder="handler"
/>

import OvTree from 'overscan/svelte/OvTree.svelte'

<OvTree
  id="doc-tree"
  onreorder={handler}
/>

The CSS is a separate import in every framework. A single element can be imported on its own instead of the whole kit: import 'overscan/src/ov-chart.js'

A reading is set as a PROPERTY, never an attribute. An attribute is a string, so an array cannot survive one and a null arrives as the word "null", which the protocol would read as a value rather than a dropout.

Every ov: event is bound with addEventListener. The colon has no declarative spelling in Svelte 5, where the on: directive is gone and "onov:commit" is not an identifier, nor in JSX. Vue can bind it.

The wrapper applies attributes ITSELF and hands the framework nothing but a ref. All three frameworks set a prop as a property when the name exists on the element, and this kit has 77 getter-only properties across 43 elements. Assigning one throws, and in React it does not degrade: the whole tree fails to render. 13 elements have a getter-only name that is also a real attribute (at, bearing, digits, duration, floor, fov, fresh, hold, lat, lon, period, pitch, range, ring, rings, span, step, sweep, sweeps, traces, value), which are the ones a reader would naturally pass in markup.