@josecortez1/c42-blade

Auto-mount the headless controllers from @josecortez1/c42-core onto plain data-c42-* markup — no JavaScript wiring per component.

@josecortez1/c42-core is a peer dependency: install it alongside @josecortez1/c42-blade.

npm install @josecortez1/c42-blade @josecortez1/c42-core

Usage

Render your markup with the documented data-c42-* attributes, then call mount() once on page load:

import { mount } from '@josecortez1/c42-blade';

const app = mount();

<div data-c42-accordion>
  <div data-c42-accordion-item data-value="a">
    <button data-c42-accordion-trigger>Section A</button>
    <div data-c42-accordion-panel>Content A</div>
  </div>
</div>

mount(root = document) scans root for every registered selector, instantiates the matching controller, and installs a MutationObserver so markup added later is mounted automatically and removed markup is destroyed.

Mounting is idempotent: an element already carrying data-c42-mounted is never wrapped twice, so calling mount() more than once is safe.

const app = mount(document.querySelector('#app')!);

app.refresh();  // re-scan after a manual DOM change
app.unmount();  // disconnect the observer and destroy every controller

What gets mounted

mount() walks the registry map (selector → controller). It covers the interactive @josecortez1/c42-core controllers that enhance existing markup with zero-config defaults — accordion, modal, tabs, dropdown, drawer, tooltip, carousel, and many more.

Controllers that require runtime options (such as pagination, whose total is mandatory) are excluded — they must be wired by hand. Purely presentational, CSS-only components (badge, card, divider, breadcrumb, button, input-label) have no controller and are not part of the registry.

License

MIT © Laravel42