mono-jsx-dom 0.1.9 → 0.1.11

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,15 +1,25 @@
 // index.ts
 import { atom, jsx, render, store } from "./jsx-runtime.mjs";
-function defineComponent(name, Component, attachShadow) {
+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)]));
-        if (attachShadow) {
-          const shadowRoot = this.attachShadow(typeof attachShadow === "boolean" ? { mode: "open" } : attachShadow);
+        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);
@@ -23,6 +33,6 @@ function defineComponent(name, Component, attachShadow) {
 }
 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);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mono-jsx-dom",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "A JSX runtime for browsers.",
   "keywords": [
     "jsx",
@@ -36,6 +36,7 @@
       "import": "./server/index.mjs"
     },
     "./node-fetch-server": {
+      "types": "./types/node-fetch-server.d.ts",
       "node": "./server/node-fetch-server.mjs",
       "import": "./server/node-fetch-server.mjs"
     },

package/server/node-fetch-server.mjs

@@ -1,8 +1,7 @@
 // server/node-fetch-server.ts
 import { createServer } from "node:http";
-function createRequestListener(fetch, options) {
-  const onError = options?.onError ?? defaultErrorHandler;
-  const idleTimeout = options?.idleTimeout;
+function createRequestListener(options) {
+  const { fetch, onError = defaultErrorHandler, idleTimeout } = options;
   return async (req, res) => {
     let response;
     if (idleTimeout !== void 0) {
@@ -115,8 +114,8 @@ async function sendResponse(res, response) {
   res.end();
 }
 function serve(options) {
-  const { port = getDefaultPort(), hostname, signal, fetch, onListen } = options;
-  const server = createServer(createRequestListener(fetch, options));
+  const { port = getDefaultPort(), hostname, signal, onListen } = options;
+  const server = createServer(createRequestListener(options));
   server.listen(port, options?.hostname, () => {
     if (onListen) {
       onListen({ port });

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

package/types/node-fetch-server.d.ts

@@ -0,0 +1,11 @@
+export type ServeOptions = {
+  port?: number;
+  hostname?: string;
+  signal?: AbortSignal;
+  idleTimeout?: number;
+  fetch: (req: Request) => Response | Promise<Response>;
+  onListen?: (localAddress: { port: number }) => void;
+  onError?: (error: Error) => Response | Promise<Response>;
+};
+
+export function serve(options: ServeOptions): Promise<{ port: number }>;