npm - mono-jsx - Versions diffs - 0.9.5 → 0.9.7 - Mend

mono-jsx 0.9.5 → 0.9.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dom/jsx-runtime.mjs CHANGED Viewed

@@ -77,6 +77,12 @@ var Signal = class extends Reactive {
   watch(callback, abortSignal) {
     onAbort(abortSignal, this.#scope[$watch](this.#key, callback));
   }
+  ref(callback) {
+    if (callback) {
+      return new Computed(this.#scope, () => callback(this.get()));
+    }
+    return this;
+  }
 };
 var Computed = class extends Reactive {
   #scope;
@@ -121,7 +127,7 @@ var InsertMark = class {
   constructor(root, signal) {
     const anchor = createTextNode();
     root.appendChild(anchor);
-    onAbort(signal, () => anchor.remove());
+    onAbort(signal, anchor.remove.bind(anchor));
     this.#root = root;
     this.#anchor = anchor;
   }
@@ -234,7 +240,9 @@ var createScope = (slots, abortSignal) => {
                   cleanup = callback.call(receiver);
                 }, abortSignal)
               );
-              onAbort(abortSignal, () => cleanup?.());
+              if (cleanup) {
+                onAbort(abortSignal, cleanup);
+              }
               $depsMark = void 0;
             });
           };
@@ -352,7 +360,7 @@ var render = (scope, child, root, abortSignal) => {
             textNode2.textContent = String(value);
           }, abortSignal);
           root.appendChild(textNode2);
-          onAbort(abortSignal, () => textNode2.remove());
+          onAbort(abortSignal, textNode2.remove.bind(textNode2));
           return;
         }
         if (isVNode(child)) {
@@ -535,7 +543,7 @@ var render = (scope, child, root, abortSignal) => {
                       break;
                   }
                 }
-                onAbort(abortSignal, () => el.remove());
+                onAbort(abortSignal, el.remove.bind(el));
                 (portal instanceof HTMLElement ? portal : root).appendChild(el);
                 if (children !== void 0) {
                   renderChildren(scope, children, el, abortSignal);
@@ -549,7 +557,7 @@ var render = (scope, child, root, abortSignal) => {
   }
   const textNode = createTextNode(String(child));
   root.appendChild(textNode);
-  onAbort(abortSignal, () => textNode.remove());
+  onAbort(abortSignal, textNode.remove.bind(textNode));
 };
 var renderChildren = (scope, children, root, aboutSignal) => {
   if (Array.isArray(children) && !isVNode(children)) {
@@ -630,10 +638,10 @@ var applyStyle = (el, 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);
-      let css = [];
       switch (k.charCodeAt(0)) {
         case /* ':' */
         58:
@@ -663,12 +671,14 @@ var applyStyle = (el, style, mark) => {
           inline ??= {};
           inline[k] = v;
       }
-      if (css.length) {
-        classList.add(computeStyleClassName(css));
-      }
     }
-    if (inline) {
-      classList.add(computeStyleClassName([null, renderStyle(inline)]));
+    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;
@@ -690,7 +700,7 @@ var renderStyle = (style, mark) => {
   }
   return "{" + css + "}";
 };
-var computeStyleClassName = (css) => {
+var createStyleElement = (css) => {
   const hash = hashCode(css.join("")).toString(36);
   const className = "css-" + hash;
   if (!document2.getElementById(className)) {

package/jsx-runtime.mjs CHANGED Viewed

@@ -176,7 +176,7 @@ var $vnode = /* @__PURE__ */ Symbol.for("jsx.vnode");
 var $setup = /* @__PURE__ */ Symbol.for("mono.setup");
 // version.ts
-var VERSION = "0.9.5";
+var VERSION = "0.9.6";
 // render.ts
 var FunctionIdGenerator = class extends Map {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mono-jsx",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "description": "`<html>` as a `Response`.",
   "type": "module",
   "module": "./index.mjs",

package/types/dom/index.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 /// <reference types="../jsx.d.ts" />
-export interface IAtom<T> {
+export interface Atom<T> {
   get(): T;
   set(value: T | ((prev: T) => T)): void;
   map(callback: (value: T extends (infer V)[] ? V : T, index: number) => JSX.Element): JSX.Element[];
+  ref(): T;
+  ref<V>(callback: (value: T) => V): V;
 }
-export const atom: <T>(initValue: T) => IAtom<T>;
+export const atom: <T>(initValue: T) => Atom<T>;
 export const store: <T extends Record<string, unknown>>(initValue: T) => T;

package/types/html.d.ts CHANGED Viewed

@@ -2,14 +2,14 @@
 import type * as Aria from "./aria.d.ts";
 import type * as CSS from "./css.d.ts";
-import type * as Mono from "./jsx.d.ts";
+import type * as Mono from "./mono.d.ts";
 export interface BaseCSSProperties extends CSS.Properties<string | number> {
   /**
    * The field-sizing CSS property enables you to control the sizing behavior of elements that are given a default preferred size, such as form control elements. This property enables you to override the default sizing behavior, allowing form controls to adjust in size to fit their contents.
    * @see https://developer.mozilla.org/docs/Web/CSS/field-sizing
    */
-  fieldSizing?: "fixed" | "content";
+  fieldSizing?: "fixed" | "content" | (string & {});
   /**
    * The view-transition-class CSS property provides the selected elements with an identifying class (a <custom-ident>), providing an additional method of styling the view transitions for those elements.
    * @see https://developer.mozilla.org/docs/Web/CSS/view-transition-class
@@ -33,7 +33,7 @@ export interface AtRuleCSSProperties {
     /**
      * Specifies the effect this at-rule will have on the document's view transition behavior.
      */
-    navigation?: "auto" | "none";
+    navigation?: "auto" | "none" | (string & {});
   };
 }
@@ -303,12 +303,12 @@ export namespace HTML {
      * Two-way binding prop that automatically creates checked and oninput attributes for signal binding
      * @mono-jsx
      */
-    $checked?: boolean;
+    $checked?: Mono.MaybeGetter<boolean>;
     /**
      * Two-way binding prop that automatically creates value and oninput attributes for signal binding
      * @mono-jsx
      */
-    $value?: string | number;
+    $value?: Mono.MaybeGetter<string | number>;
   }
   interface OptionAttributes<T extends EventTarget> extends GlobalAttributes<T> {
@@ -331,7 +331,7 @@ export namespace HTML {
      * Two-way binding prop that automatically creates value and oninput attributes for signal binding
      * @mono-jsx
      */
-    $value?: string | number;
+    $value?: Mono.MaybeGetter<string | number>;
   }
   interface TextareaAttributes<T extends EventTarget> extends GlobalAttributes<T> {
@@ -354,7 +354,7 @@ export namespace HTML {
      * Two-way binding prop that automatically creates value and oninput attributes for signal binding
      * @mono-jsx
      */
-    $value?: string;
+    $value?: Mono.MaybeGetter<string>;
   }
   interface ButtonAttributes<T extends EventTarget> extends GlobalAttributes<T> {

package/types/jsx.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 import type { HTML } from "./html.d.ts";
 export type ChildPrimitiveType = JSX.Element | string | number | bigint | boolean | null | undefined;
-export type ChildType = MaybeArray<ChildPrimitiveType | MaybeGetter<ChildPrimitiveType>>;
+export type ChildType = MaybeArray<MaybeGetter<ChildPrimitiveType>>;
 export type MaybeArray<T> = T | T[];
-export type MaybeGetter<T> = { get: () => T };
+export type MaybeGetter<T> = T | { get: () => T };
 export type MaybePromiseOrGenerator<T> = T | Promise<T> | Generator<T> | AsyncGenerator<T>;
 export interface BaseAttributes {

package/types/mono.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { AsyncComponentAttributes, BaseAttributes, ComponentType } from "./jsx.d.ts";
+import type { AsyncComponentAttributes, BaseAttributes, ComponentType, MaybeGetter } from "./jsx.d.ts";
 export type WithParams<T> = T & { params?: Record<string, string> };
@@ -263,3 +263,5 @@ declare global {
     }
     : never;
 }
+export type { AsyncComponentAttributes, BaseAttributes, MaybeGetter };