mono-jsx-dom 0.1.8 → 0.1.9

package/index.mjs

@@ -1,6 +1,6 @@
 // index.ts
-import { atom, jsx, store } from "./jsx-runtime.mjs";
-function defineComponent(name, Component) {
+import { atom, jsx, render, store } from "./jsx-runtime.mjs";
+function defineComponent(name, Component, attachShadow) {
   customElements.define(
     name,
     class extends HTMLElement {
@@ -8,7 +8,12 @@ function defineComponent(name, Component) {
       connectedCallback() {
         this.#ac ??= new AbortController();
         const props = Object.fromEntries(this.getAttributeNames().map((name2) => [name2, this.getAttribute(name2)]));
-        this.mount(jsx(Component, props), this.#ac.signal);
+        if (attachShadow) {
+          const shadowRoot = this.attachShadow(typeof attachShadow === "boolean" ? { mode: "open" } : attachShadow);
+          render(null, jsx(Component, props), shadowRoot, this.#ac.signal);
+        } else {
+          this.mount(jsx(Component, props), this.#ac.signal);
+        }
       }
       disconnectedCallback() {
         this.#ac?.abort();

package/jsx-runtime.mjs

@@ -786,5 +786,6 @@ export {
   jsx,
   jsx as jsxDEV,
   jsx as jsxs,
+  render,
   store
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mono-jsx-dom",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A JSX runtime for browsers.",
   "keywords": [
     "jsx",

package/types/index.d.ts

@@ -13,4 +13,4 @@ export const store: <T extends Record<string, unknown>>(initValue: T) => T;
 /**
  * Defines a custom element with the given name and component.
  */
-export const defineComponent: <P = {}>(name: string, Component: ComponentType<P>) => void;
+export const defineComponent: (name: string, Component: ComponentType<any>, attachShadow?: boolean | { mode: "open" | "closed" }) => void;