JavaScript Modules

<!-- modular: core first, then only the components you use -->

<script type="module" src="components/core.min.js"></script>

<script type="module" src="components/dialog/dialog.min.js"></script>

<script type="module" src="components/tabs/tabs.min.js"></script>

<!-- or everything at once (all.js embeds core first) -->

<script type="module" src="components/all.min.js"></script>

// src/components/example/example.ts - the source (build.ts compiles it to dist/)

import { defussGlobals, defussQuery } from '../../shared/state-api.js';

const df$ = defussGlobals();     // OUR registry namespace: df$.shadcn (not the global callable)

const dfDollar = defussQuery();  // the installed runtime: defuss-query over defuss-morph

// 1. declared states - 'default' first (agents + tests drive them by name)

const exampleStates = ['default', 'open'];

// 2. the ONLY function that touches the DOM for a state change - scalar writes via query

function triggerStateChange(el, stateName) {

  const open = stateName === 'open';

  dfDollar(el).attr('data-open', open ? '' : null);              // null removes the attribute

  dfDollar(el).find('.example-trigger').attr('aria-expanded', String(open));

}

// 3. registry API - element passed explicitly, unknown names throw

export const exampleApi = {

  setState(el, stateName, config = {}) {

    if (!exampleStates.includes(stateName)) {

      throw new Error(`example: unknown state "${stateName}" (supported: ${exampleStates.join(', ')})`);

    }

    triggerStateChange(el, stateName, config);

    el.dataset.stateName = stateName;  // state lives on the ELEMENT, never in module scope

    el._stateConfig = config;

  },

  getState: (el) => ({ name: el.dataset.stateName || 'default', config: el._stateConfig ?? {} }),

};

df$.exampleApi = exampleApi;         // → df$.shadcn.exampleApi

df$.exampleStates = exampleStates;   // → df$.shadcn.exampleStates

// 4. structure renders through keyed morph - never innerHTML

function renderDays(grid, isoDays) {

  // stable ids = identity: matched nodes MOVE, so focus and listeners survive

  dfDollar(grid).morph(isoDays.map((iso) => `<button id="d${iso}">${iso.slice(-2)}</button>`).join(''));

}

// 5. per-instance binding with a double-init guard, auto-init on DOM changes

function init() {

  document.querySelectorAll('.example:not([data-init])').forEach((el) => {

    el.dataset.init = '';

    el.api = {

      setState: (stateName, config) => exampleApi.setState(el, stateName, config),

      getState: () => exampleApi.getState(el),

    };

    // native protocols stay native (listeners, showModal, showPopover, focus)

    el.querySelector('.example-trigger')?.addEventListener('click', () => {

      exampleApi.setState(el, exampleApi.getState(el).name === 'open' ? 'default' : 'open');

    });

  });

}

init();

new MutationObserver(init).observe(document, { childList: true, subtree: true });

// dist/components/dialog/dialog.js - generated by scripts/build.ts (do not edit)

// The shared import is rewritten into a binding to the ONE runtime core installed:

var __df$core = globalThis.df$;

var __df$shared = __df$core && __df$core.shadcn && __df$core.shadcn.shared;

if (!__df$shared || __df$shared.abi !== '<this release>') {

  throw new Error(

    'defuss-shadcn: runtime incomplete; load core before component scripts, or load all alone',

  );

}

const { defussGlobals } = __df$shared;

const df$ = defussGlobals();

// ...the component body follows, unchanged

// calendar - the month grid re-renders through keyed morph (ISO-date cell ids):

dfDollar(grid).morph(renderGrid(year, month, selectedDay, calId, minDate, maxDate));

// carousel - dots keyed by id, reconciled in ONE morph pass:

dfDollar(dotsContainer).morph(html);

// combobox / command - filtering is scalar writes; the listbox is never rebuilt:

dfDollar(item).prop('hidden', !match);

dfDollar(item).attr('aria-selected', 'true');

dfDollar(list).find('.command-separator').prop('hidden', !!query);

// pagination - page links that stay visible MOVE (node identity → focus survives):

dfDollar(nextLi).before(node);

// toast - mount, fill and dismiss through query's exact structural ops:

dfDollar(document.body).append(toastContainer);

dfDollar(p).text(title);            // literal user text - never parsed as markup

dfDollar(el).remove();

// auto-initialization, inside every component module:

function init() {

  document.querySelectorAll('.my-component:not([data-init])').forEach((el) => {

    el.dataset.init = '';            // the guard: first line, every time

    el.api = { /* setState / getState bound to this element */ };

    // ... listeners, ARIA wiring

  });

}

init();                              // once on load

new MutationObserver(init).observe(document, { childList: true, subtree: true });

make dev              # this repo: Vite dev server on :3000

bun run dev           # same, without make

bunx vite .           # bare Vite against dist/ in another project

bunx serve dist/      # any static server works

python3 -m http.server