init

lib/component.ts

@@ -0,0 +1,31 @@
+import type { Html } from './html.js';
+import { htmlElementContext, type HtmlElementContext } from './store.js';
+
+type ComponentOptions<T> = (options: { props: T; context: HtmlElementContext['get'] }) => Html;
+
+const component = <T>(options: ComponentOptions<T>) => {
+  const render = (props: T) => {
+    const toHtmlElement = () => {
+      const root = document.createElement('div');
+      root.style.display = 'content';
+      const context = htmlElementContext(root);
+      const api = { context: context.get, props };
+      const view = options(api);
+      context.emitter.addEventListener('change', () => {
+        view(root);
+      });
+      view(root);
+      return root;
+    };
+
+    return {
+      toHtmlElement,
+    };
+  };
+
+  return Object.assign(render, {
+    toHtmlElement: () => render({} as T).toHtmlElement(),
+  });
+};
+
+export { component };