How the JavaScript works

The JavaScript layer is deliberately boring: no framework, no bundler needed to consume it. Each component is a plain script that finds its elements by data-* attribute and wires them up.

The attribute-driven model

Components initialise themselves on DOMContentLoaded by scanning for their attribute and skipping anything already processed. The pattern, using the theme switcher:

function createThemeSwitchers() {
  document
    .querySelectorAll('[data-theme-switcher]:not([data-theme-switcher-created])')
    .forEach((item) => {
      item.addEventListener('click' /* … */)
      item.dataset.themeSwitcherCreated = 'true' // idempotency guard
    })
}

Two consequences worth knowing:

• You author HTML, not JS. Add the documented data-* attributes and the component activates itself.
• A …-created marker attribute is added once wired. It is set by the script — you never write it. Component pages mark these as [auto-set].

Dynamic content

Elements added after load (AJAX, template swaps) aren’t wired automatically. Re-run the component’s create…() function, or Preline’s window.HSStaticMethods.autoInit() for preline-based pieces, after you insert them.

_defaults.js — the shared globals

_defaults.js runs first and puts four config objects on window. Many components read these, so it must load before them. Component pages flag this with a “Requires _defaults.js” note.

Global	Holds	Used by
window._formats	number + date format strings (for numeral / date-fns) and a toHHMMSS() helper	format.js, tables, inputs
window._regexs	Reusable regexes for parsing key:value parameter strings	element / param parsing
window._types	Input type groupings (e.g. which inputs are date-like)	input.js, validation
window._placeholders	Default placeholders for date / datetime / month	date inputs
window._storage	Canonical localStorage keys (theme, shell:sidebar, search:recent, content:font-size)	theme, shell, search, content

Caution

Never hard-code a localStorage key or a date format in your own code — read them from window._storage / window._formats so everything stays in sync with the design system.

Third-party libraries

Some components expect these globals to exist (loaded from a CDN in the head):

Library	Global	Needed for
numeral	numeral	number formatting (format.js)
date-fns	dateFns	date formatting/parsing (+ en-US locale)
anime.js	anime	animations (animation.js)
Preline	HSStaticMethods etc.	dropdowns, overlays, tabs, tooltips

If a component does nothing, first check its libraries and window._icons are present in the console.

runtime.js — inline icons

runtime.js defines window._icons, a small map of inline SVG strings that some components inject (chevrons for tables, close/edit/trash for the detail drawer, …). It must exist before those components run. Add icon keys here as you need them.