hole

A dynamic window for html proxy child elements within context.

hole returns the html proxy props and children.

import { html, hole } from '@hellajs/dom';

function Counter() {
  const count = signal(0);

  const Provider = (...args: HoleArgs) =>
    html.div(hole(args).children);

  const Button = (...args: HoleArgs) =>
    html.button({ onclick: () => count(count() + 1) },
      hole(args).children
    );

  const Child = (...args: HoleArgs) =>
    html.p(hole(args).children);

  return { Provider, Button, Child, count };
}

// Inside your component...

const Counter = hole(Counter);

return Counter.Provider(
  Counter.Button(`Count: `, Counter.count),
  Counter.Child(`Current count is: `, Counter.count)
);

// or...

const { Provider, Button, Child, count } = Counter;

return Provider(
  Button(`Count: `, count),
  Child(`Current count is: `, count)
);