ov-countdown

src/ov-countdown.js

A STILL OF demo/countdown.html

Attributes

Properties

A reading property takes a reading directly, which an attribute cannot: an attribute is a string, and a reading may be an array, a dropout, or a value carrying an age.

WHAT A READING PROPERTY ACCEPTS

A reading property never coerces null to 0 and never drops it from an array. Strings are passed through unnormalised, so "01.50" stays "01.50".

This readout does not mark staleness. It has no common() path, so a reading carrying an age is drawn without a stale qualifier.

READ-ONLY PROPERTIES

report

Events

Using it

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

<ov-countdown
  source="doc-mission"
  target="252000"
  places="1"
>
</ov-countdown>
<script type="module">
  import '../src/ov-source.js';
  /* Mission-elapsed ms from the moment the page opened, derived from the
     sample index, so the reading is the same on every open. */
  window.Overscan.source('doc-mission', (t) => t * 1000, { hz: 4 });
</script>

import { OvCountdown } from 'overscan/react'

<OvCountdown
  source="doc-mission"
  target="252000"
  places="1"
  clock={reading}
  onClock={handler}
/>

import { OvCountdown } from 'overscan/vue'

<OvCountdown
  source="doc-mission"
  target="252000"
  places="1"
  :clock="reading"
  @clock="handler"
/>

import OvCountdown from 'overscan/svelte/OvCountdown.svelte'

<OvCountdown
  source="doc-mission"
  target="252000"
  places="1"
  clock={reading}
  onclock={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.