mono-jsx-dom 0.1.7 → 0.1.8

package/README.md

@@ -12,6 +12,7 @@
 - 🚦 Signals as reactive primitives
 - 💡 Complete Web API TypeScript definitions
 - ⏳ Streaming rendering
+- 🎨 Builtin [TailwindCSS](https://tailwindcss.com/) integration
 - 🔩 Builtin dev/build/deploy toolchain
 
 Playground: https://val.town/x/ije/mono-jsx-dom
@@ -35,13 +36,32 @@ mono-jsx-dom adds a `mount` method to the `HTMLElement` prototype to allow you t
 ```tsx
 // app.tsx
 
-function App(this: FC) {
-  return <div>Hello, world!</div>;
+async function App(this: FC<{ word: string }>) {
+  this.word = await fetch("/data/word").then(res => res.text());
+  return <div>Hello, {this.word}!</div>;
 }
 
 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:
+
+```tsx
+import { defineComponent } from "mono-jsx-dom";
+
+function App(this: FC<{ word: string }>) {
+  return <div>Hello, {this.word}!</div>;
+}
+
+defineComponent("my-app", App);
+```
+
+Then you can use the `<my-app>` element in your HTML.
+
+```html
+<my-app word="world"></my-app>
+```
+
 >[!TIP]
 > `mono-jsx-dom` is designed for client-side rendering. You can use [mono-jsx](https://github.com/ije/mono-jsx) to render the UI on the server side.
 
@@ -645,7 +665,7 @@ function App(this: FC) {
 }
 ```
 
-2\. Signals cannot be computed outside of the `this.computed` method.
+2\. Signals would not be computed automatically outside of the `this.computed` method.
 
 ```tsx
 // ❌ Won't work - updates of a signal won't refresh the view
@@ -653,7 +673,7 @@ function App(this: FC<{ message: string }>) {
   this.message = "Welcome to mono-jsx";
   return (
     <div>
-      <h1 title={this.message + "!"}>{this.message + "!"}</h1>
+      <h1>{this.message + "!"}</h1>
       <button onClick={() => this.message = "Clicked"}>
         Click Me
       </button>
@@ -666,7 +686,7 @@ function App(this: FC) {
   this.message = "Welcome to mono-jsx";
   return (
     <div>
-      <h1 title={this.$(() => this.message + "!")}>{this.$(() => this.message + "!")}</h1>
+      <h1>{this.computed(() => this.message + "!")}</h1>
       <button onClick={() => this.message = "Clicked"}>
         Click Me
       </button>
@@ -675,6 +695,34 @@ function App(this: FC) {
 }
 ```
 
+3\. `this` in nested functions in a component function would not be bound to the component. You can use an arrow function that automatically binds `this` to the component.
+
+```tsx
+function App(this: FC<{ count: number }>) {
+  function increment() {
+    this.count++; // ❌ `this` is not bound to the component.
+  }
+  return (
+    <div>
+      <span>{this.count}</span>
+      <button onClick={increment}>{this.count}</button>
+    </div>
+  )
+}
+
+function App(this: FC) {
+  const increment = () => {
+    this.count++; // ✅ `this` is bound to the component.
+  }
+  return (
+    <div>
+      <span>{this.count}</span>
+      <button onClick={increment}>{this.count}</button>
+    </div>
+  )
+}
+```
+
 ## Using `this` in Components
 
 mono-jsx-dom binds a scoped signals object to `this` in your component functions. This allows you to access signals, context, and request information directly in your components.

package/index.mjs

@@ -1,6 +1,23 @@
 // index.ts
-import { atom, store } from "./jsx-runtime.mjs";
+import { atom, jsx, store } from "./jsx-runtime.mjs";
+function defineComponent(name, Component) {
+  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);
+      }
+      disconnectedCallback() {
+        this.#ac?.abort();
+      }
+    }
+  );
+}
 export {
   atom,
+  defineComponent,
   store
 };

package/jsx-runtime.mjs

@@ -48,7 +48,7 @@ var NullPrototypeObject = /* @__PURE__ */ (() => {
   ONP.prototype = /* @__PURE__ */ Object.create(null);
   return ONP;
 })();
-var createStyleElement = (css) => {
+var applyCSS = (css) => {
   const hash = hashCode(css.join("")).toString(36);
   const className = "css-" + hash;
   if (!document.getElementById(className)) {
@@ -65,6 +65,11 @@ var domEscapeHTML = (text) => {
 };
 
 // render.ts
+var $get = /* @__PURE__ */ Symbol();
+var $watch = /* @__PURE__ */ Symbol();
+var $delegated = /* @__PURE__ */ Symbol();
+var $slots = /* @__PURE__ */ Symbol();
+var orphanScopes = /* @__PURE__ */ new Set();
 var Reactive = class {
   reactive(effect, abortSignal) {
     const update = () => effect(this.get());
@@ -175,22 +180,17 @@ var InsertMark = class {
     return () => childNodes.forEach((node) => node.remove());
   }
 };
-var globalScopes = /* @__PURE__ */ new Set();
-var $get = /* @__PURE__ */ Symbol();
-var $watch = /* @__PURE__ */ Symbol();
-var $expr = /* @__PURE__ */ Symbol();
-var $slots = /* @__PURE__ */ Symbol();
 var appScope;
 var atomIndex = 0;
 var depsMark;
 var createScope = (slots, abortSignal) => {
-  let exprMode = false;
+  let delegated2 = false;
   let watchHandlers = /* @__PURE__ */ new Map();
   let refElements = /* @__PURE__ */ new Map();
   let signals = /* @__PURE__ */ new Map();
   let refs = new Proxy(new NullPrototypeObject(), {
     get(_, key) {
-      if (!exprMode || depsMark) {
+      if (!delegated2 || depsMark) {
         return refElements.get(key);
       }
       return new Ref(refElements, key);
@@ -211,8 +211,8 @@ var createScope = (slots, abortSignal) => {
             handlers.add(effect);
             return () => handlers.delete(effect);
           };
-        case $expr:
-          return (ok) => exprMode = ok;
+        case $delegated:
+          return (ok) => delegated2 = ok;
         case $slots:
           return slots;
         case "init":
@@ -270,7 +270,7 @@ var createScope = (slots, abortSignal) => {
           if (typeof key === "symbol" || isFunction(value)) {
             return value;
           }
-          const getRawValue = !exprMode || depsMark !== void 0;
+          const getRawValue = !delegated2 || depsMark !== void 0;
           if (value instanceof Reactive) {
             if (getRawValue) {
               if (value instanceof Signal) {
@@ -319,7 +319,7 @@ var atom = (value) => {
 };
 var store = (props) => {
   const scope = createScope();
-  globalScopes.add(scope);
+  orphanScopes.add(scope);
   return scope.store(props);
 };
 var render = (scope, child, root, abortSignal) => {
@@ -511,7 +511,59 @@ var render = (scope, child, root, abortSignal) => {
                       el.style.cssText = attrValue;
                     } else {
                       let mark = /* @__PURE__ */ new Set();
-                      let update = () => applyStyle(el, attrValue, mark);
+                      let update = () => {
+                        const { classList } = el;
+                        const style = $(attrValue, mark);
+                        if (isPlainObject(style)) {
+                          let inline;
+                          let css = [];
+                          for (let [k, v] of Object.entries(style)) {
+                            v = $(v, mark);
+                            switch (k.charCodeAt(0)) {
+                              case /* ':' */
+                              58:
+                                if (isPlainObject(v)) {
+                                  css.push(k.startsWith("::view-") ? "" : null, k + renderStyle(v, mark));
+                                }
+                                break;
+                              case /* '@' */
+                              64:
+                                if (isPlainObject(v)) {
+                                  if (k.startsWith("@keyframes ")) {
+                                    css.push(
+                                      k + "{" + Object.entries(v).map(([k2, v2]) => isPlainObject(v2) ? k2 + renderStyle(v2, mark) : "").join("") + "}"
+                                    );
+                                  } else if (k.startsWith("@view-")) {
+                                    css.push(k + renderStyle(v, mark));
+                                  } else {
+                                    css.push(k + "{", null, renderStyle(v, mark) + "}");
+                                  }
+                                }
+                                break;
+                              case /* '&' */
+                              38:
+                                if (isPlainObject(v)) {
+                                  css.push(null, k.slice(1) + renderStyle(v, mark));
+                                }
+                                break;
+                              default:
+                                inline ??= {};
+                                inline[k] = v;
+                            }
+                          }
+                          if (css.length > 0) {
+                            classList.remove(...classList.values().filter((key) => key.startsWith("css-")));
+                            if (inline) {
+                              css.unshift(null, renderStyle(inline));
+                            }
+                            classList.add(applyCSS(css));
+                          } else if (inline) {
+                            el.style.cssText = renderStyle(inline).slice(1, -1);
+                          }
+                        } else if (isString(style)) {
+                          el.style.cssText = style;
+                        }
+                      };
                       update();
                       for (const reactive of mark) {
                         reactive.watch(update, abortSignal);
@@ -600,7 +652,7 @@ var renderFC = (fc, props, root, abortSignal) => {
   let el;
   let scope = createScope(props.children, abortSignal);
   let catchFn = props.catch;
-  setExpr(scope, true);
+  delegated(scope, true);
   try {
     el = fc.call(scope, props);
   } catch (err) {
@@ -620,7 +672,7 @@ var renderFC = (fc, props, root, abortSignal) => {
     }
     root.append(...pendingNodes);
     el.then((nodes) => {
-      setExpr(scope, false);
+      delegated(scope, false);
       pendingNodes[0].replaceWith(...renderToFragment(scope, nodes, abortSignal).childNodes);
     }).catch((err) => {
       if (!catchFn) {
@@ -628,11 +680,11 @@ var renderFC = (fc, props, root, abortSignal) => {
       }
       pendingNodes[0].replaceWith(...renderToFragment(scope, catchFn(err), abortSignal).childNodes);
     }).finally(() => {
-      setExpr(scope, false);
+      delegated(scope, false);
       pendingNodes.forEach((node) => node.remove());
     });
   } else {
-    setExpr(scope, false);
+    delegated(scope, false);
     if (isPlainObject(el) && !isVNode(el)) {
       if (Symbol.asyncIterator in el) {
       } else if (Symbol.iterator in el) {
@@ -673,9 +725,9 @@ var $ = (value, mark) => {
   }
   return value;
 };
-var setExpr = (scope, ok) => {
-  scope[$expr](ok);
-  globalScopes.forEach((s) => s[$expr](ok));
+var delegated = (scope, ok) => {
+  scope[$delegated](ok);
+  orphanScopes.forEach((s) => s[$delegated](ok));
 };
 var cx = (className, mark) => {
   className = $(className, mark);
@@ -687,57 +739,6 @@ var cx = (className, mark) => {
   }
   return "";
 };
-var applyStyle = (el, style, mark) => {
-  style = $(style, mark);
-  if (isPlainObject(style)) {
-    let { classList } = el;
-    let inline;
-    let css = [];
-    classList.remove(...classList.values().filter((key) => key.startsWith("css-")));
-    for (let [k, v] of Object.entries(style)) {
-      v = $(v, mark);
-      switch (k.charCodeAt(0)) {
-        case /* ':' */
-        58:
-          if (isPlainObject(v)) {
-            css.push(k.startsWith("::view-") ? "" : null, k + renderStyle(v, mark));
-          }
-          break;
-        case /* '@' */
-        64:
-          if (isPlainObject(v)) {
-            if (k.startsWith("@keyframes ")) {
-              css.push(k + "{" + Object.entries(v).map(([k2, v2]) => isPlainObject(v2) ? k2 + renderStyle(v2, mark) : "").join("") + "}");
-            } else if (k.startsWith("@view-")) {
-              css.push(k + renderStyle(v, mark));
-            } else {
-              css.push(k + "{", null, renderStyle(v, mark) + "}");
-            }
-          }
-          break;
-        case /* '&' */
-        38:
-          if (isPlainObject(v)) {
-            css.push(null, k.slice(1) + renderStyle(v, mark));
-          }
-          break;
-        default:
-          inline ??= {};
-          inline[k] = v;
-      }
-    }
-    if (css.length > 0) {
-      if (inline) {
-        css.unshift(null, renderStyle(inline));
-      }
-      classList.add(createStyleElement(css));
-    } else if (inline) {
-      el.style.cssText = renderStyle(inline).slice(1, -1);
-    }
-  } else if (isString(style)) {
-    el.style.cssText = style;
-  }
-};
 
 // jsx-runtime.ts
 var Fragment = $fragment;

package/package.json

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

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import type { Atom } from "./jsx.d.ts";
+import type { Atom, ComponentType } from "./jsx.d.ts";
 
 /**
  * Creates an atom signal.
@@ -9,3 +9,8 @@ export const atom: <T>(initValue: T) => Atom<T>;
  * Creates a signal store.
  */
 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;