mono-jsx-dom 0.1.8 → 0.1.10

package/README.md

@@ -44,22 +44,25 @@ async function App(this: FC<{ word: string }>) {
 document.body.mount(<App />);
 ```
 
-You can also define [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) with the `defineComponent` function:
+You can also define a component as a [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) with the `register` function:
 
 ```tsx
-import { defineComponent } from "mono-jsx-dom";
+// app.tsx
+
+import { register } from "mono-jsx-dom";
 
 function App(this: FC<{ word: string }>) {
   return <div>Hello, {this.word}!</div>;
 }
 
-defineComponent("my-app", App);
+register("my-app", App, { mode: "open", style: "div { color: black; }" });
 ```
 
-Then you can use the `<my-app>` element in your HTML.
+Then you can use the `<my-app>` element in your HTML:
 
 ```html
 <my-app word="world"></my-app>
+<script type="module" src="app.tsx"></script>
 ```
 
 >[!TIP]

package/index.mjs

@@ -1,14 +1,29 @@
 // index.ts
-import { atom, jsx, store } from "./jsx-runtime.mjs";
-function defineComponent(name, Component) {
+import { atom, jsx, render, store } from "./jsx-runtime.mjs";
+function register(name, Component, shadow) {
   customElements.define(
     name,
     class extends HTMLElement {
       #ac;
       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);
+        this.#ac ??= new AbortController();
+        if (shadow) {
+          const { mode = "open", style } = typeof shadow === "boolean" ? {} : shadow;
+          const shadowRoot = this.attachShadow({ mode });
+          if (style) {
+            let styleSheet = new CSSStyleSheet();
+            if (typeof style === "string") {
+              styleSheet.replaceSync(style);
+            } else {
+              styleSheet = style;
+            }
+            shadowRoot.adoptedStyleSheets = [styleSheet];
+          }
+          render(null, jsx(Component, props), shadowRoot, this.#ac.signal);
+        } else {
+          this.mount(jsx(Component, props), this.#ac.signal);
+        }
       }
       disconnectedCallback() {
         this.#ac?.abort();
@@ -18,6 +33,6 @@ function defineComponent(name, Component) {
 }
 export {
   atom,
-  defineComponent,
+  register,
   store
 };

package/jsx-runtime.mjs

@@ -417,7 +417,7 @@ var render = (scope, child, root, abortSignal) => {
           }
           // `<slot>` element
           case "slot": {
-            const slots = scope[$slots];
+            const slots = scope?.[$slots];
             if (slots) {
               renderChildren(scope, slots, root, abortSignal);
             }
@@ -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.10",
   "description": "A JSX runtime for browsers.",
   "keywords": [
     "jsx",

package/types/index.d.ts

@@ -13,4 +13,8 @@ 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 register: (
+  name: string,
+  Component: ComponentType<any>,
+  shadow?: boolean | { mode?: "open" | "closed"; style?: string },
+) => void;