$register utility

$register utility is only used in esModules to make components or any functions, in a module, accessible to $render. If you don't use $register in esModules, your components won't be accessible to $render.

$register(component, function, etc...);

ℹ️

Note: You don't need to use $register when using $render in a script tag as components are accessible by default.

$register a component

You only need to $register a component where it is imported and used (not where it is created).

export const Shuffle = (status=false) => {
  return `
    <div id="shuffle">
      <button class="btn-icon toggle">
        <span 
          class="material-symbols-rounded ${status ? 'active': ''}"
          onclick="$render(Shuffle, ${!status})"
        >shuffle ${status} </span>
      </button>
    </div>
  `;
}

Shuffle is created. Now, let use it in App component.

  import {Shuffle} from './Shuffle'
 
  const App = () => {
    const media = {};
    return `
      <div id="main">
        <article>
          <Shuffle />
        </article>
        <button 
          onClick="transformMedia(${stringify(media)})">
          transform media
        </button>
      </div>
    `;
  }
 
$register(Shuffle);

You see! We $register Shuffle in the App component where it is used. You have to $register a component where you use it.

ℹ️

Note: Once you $register a component, you don't need to re-register it if you have to use it in another component.

$register a function

Functions from a module are not accessible to DOM events like onclick by default. You can make them accessible by using $register on them.

appFunctions.js

  import {htmx} from './hypermedia'
 
  const $view = htmx.view;
  $register($view);

Click to check the common errors in using $register.

$purify $render