mono-jsx 0.7.1 → 0.7.3

package/README.md

@@ -161,10 +161,10 @@ mono-jsx supports [pseudo classes](https://developer.mozilla.org/en-US/docs/Web/
 
 mono-jsx supports [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) to create smooth transitions between views. To use view transitions, add the `viewTransition` attribute to the following components:
 
- - `<toggle viewTransition="transition-name">`
- - `<switch viewTransition="transition-name">`
- - `<component viewTransition="transition-name">`
- - `<router viewTransition="transition-name">`
+ - `<toggle viewTransition="view-transition-name">`
+ - `<switch viewTransition="view-transition-name">`
+ - `<component viewTransition="view-transition-name">`
+ - `<router viewTransition="view-transition-name">`
 
 You can set custom transition animations by adding [`::view-transition-group`](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-group), [`::view-transition-old`](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-old), and [`::view-transition-new`](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-new) pseudo-elements with your own CSS animations. For example:
 
@@ -175,9 +175,9 @@ function App(this: FC<{ show: boolean }>) {
       style={{
         "@keyframes fade-in": { from: { opacity: 0 }, to: { opacity: 1 } },
         "@keyframes fade-out": { from: { opacity: 1 }, to: { opacity: 0 } },
-        "::view-transition-group(fade)": { animationDuration: "0.5s" },
-        "::view-transition-old(fade)": { animation: "0.5s ease-in both fade-out" },
-        "::view-transition-new(fade)": { animation: "0.5s ease-in both fade-in" },
+        "::view-transition-group(fade)": { animationDuration: "0.3s" },
+        "::view-transition-old(fade)": { animation: "0.3s ease-in both fade-out" },
+        "::view-transition-new(fade)": { animation: "0.3s ease-in both fade-in" },
       }}
     >
       <toggle show={this.show} viewTransition="fade">
@@ -189,6 +189,28 @@ function App(this: FC<{ show: boolean }>) {
 }
 ```
 
+You can also set the `viewTransition` attribute a html element which contains signal children.
+
+```tsx
+function App(this: FC<{ message: string }>) {
+  this.message = "Hello world!";
+  return (
+    <h1 viewTransition="fade">{this.message}</h1>
+  )
+}
+```
+
+You can also set the view transition name in the style property with the `viewTransition` attribute set to `true`.
+
+```tsx
+function App(this: FC<{ message: string }>) {
+  this.message = "Hello world!";
+  return (
+    <h1 viewTransition style={{ viewTransitionName: "fade" }}>{this.message}</h1>
+  )
+}
+```
+
 ### Using `<slot>` Element
 
 mono-jsx uses [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) elements to render slotted content (equivalent to React's `children` property). You can also add the `name` attribute to define named slots:

package/jsx-runtime.mjs

@@ -16,7 +16,7 @@ var STYLE_JS = `{var l=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^o
 var RENDER_ATTR_JS = `{var s=(l,n,r)=>{let e=l.parentElement;return e.tagName==="M-GROUP"&&(e=e.previousElementSibling),()=>{let t=r();n==="value"?e.value=String(t):n==="checked"?e.checked=!!t:typeof t=="boolean"?e.toggleAttribute(n,t):t==null?e.removeAttribute(n):typeof t=="object"?n==="class"?e.setAttribute(n,$cx(t)):n==="style"?$applyStyle(e,t):e.setAttribute(n,JSON.stringify(t)):e.setAttribute(n,String(t))}};window.$renderAttr=s;}`;
 var RENDER_TOGGLE_JS = `{var i=(e,s)=>{let t,l=()=>e.replaceChildren(...s()?t:[]);return()=>{if(!t){let n=e.firstElementChild;n&&n.tagName==="TEMPLATE"&&n.hasAttribute("m-slot")?t=[...n.content.childNodes]:t=[...e.childNodes]}e.hasAttribute("vt")&&document.startViewTransition?document.startViewTransition(l):l()}};window.$renderToggle=i;}`;
 var RENDER_SWITCH_JS = `{var a=(l,u)=>{let s,r=l.getAttribute("value"),t,i,o=e=>t.get(e)??t.set(e,[]).get(e),d=()=>l.replaceChildren(...t.has(s)?t.get(s):i);return()=>{if(!t){t=new Map,i=[];for(let e of l.childNodes)if(e.nodeType===1&&e.tagName==="TEMPLATE"&&e.hasAttribute("m-slot")){for(let n of e.content.childNodes)n.nodeType===1&&n.hasAttribute("slot")?o(n.getAttribute("slot")).push(n):i.push(n);e.remove()}else r?o(r).push(e):i.push(e)}s=""+u(),l.hasAttribute("vt")&&document.startViewTransition?document.startViewTransition(d):d()}};window.$renderSwitch=a;}`;
-var SIGNALS_JS = `{let m;const h=window,b=new Map,k=new Map,l=n=>k.get(n)??k.set(n,M(n)).get(n),y=()=>Object.create(null),f=(n,e)=>n.getAttribute(e),M=n=>{const e=y(),t=(r,c)=>{e[r]=c},s=new Map,a=(r,c)=>{let o=s.get(r);return o||(o=new Set,s.set(r,o)),o.add(c),()=>{o.delete(c),o.size===0&&s.delete(r)}},i=new Proxy(y(),{get:(r,c)=>document.querySelector("[data-ref='"+n+":"+c+"']")});return new Proxy(e,{get:(r,c,o)=>{switch(c){case"$init":return t;case"$watch":return a;case"app":return l(0);case"refs":return i;default:return m?.(n,c),Reflect.get(r,c,o)}},set:(r,c,o,d)=>{if(o!==Reflect.get(r,c,d)){const u=s.get(c);return u&&queueMicrotask(()=>u.forEach(g=>g())),Reflect.set(r,c,o,d)}return!1}})},$=(n,e,t)=>{switch(e){case"toggle":return $renderToggle(n,t);case"switch":return $renderSwitch(n,t);case"html":return()=>n.innerHTML=""+t()}return e&&e.length>2&&e.startsWith("[")&&e.endsWith("]")?$renderAttr(n,e.slice(1,-1),t):()=>n.textContent=""+t()},E=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},p=async n=>{const e=n();return e!==void 0?e:(await new Promise(t=>setTimeout(t,0)),p(n))},S=n=>{typeof n=="function"&&n()},v=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});v("m-signal",n=>{const e=Number(f(n,"scope")),t=l(e),s=f(n,"key");if(s)n.disposes.push(t.$watch(s,$(n,f(n,"mode"),()=>t[s])));else{const a=Number(f(n,"computed"));p(()=>b.get(e*1e9+a)).then(([i,r])=>{const c=$(n,f(n,"mode"),i.bind(t));r.forEach(o=>{const[d,u]=E(o);n.disposes.push(l(d).$watch(u,c))})})}}),v("m-effect",n=>{const{disposes:e}=n,t=Number(f(n,"scope")),s=Number(f(n,"n")),a=new Array(s);e.push(()=>{a.forEach(S),a.length=0});for(let i=0;i<s;i++){const r="$ME_"+t+"_"+i;p(()=>h[r]).then(c=>{const o=[],d=l(t),u=()=>{S(a[i]),a[i]=c.call(d)};m=(g,w)=>o.push([g,w]),u(),m=void 0;for(const[g,w]of o)e.push(l(g).$watch(w,u))},()=>{})}}),h.$MS=(n,e)=>{const[t,s]=E(n);l(t).$init(s,e)},h.$MC=(n,e,t,s)=>{b.set(n*1e9+e,[t,s])},h.$patch=(n,...e)=>{for(const[t,...s]of e){const a=s.pop();let i=n;for(const r of s)i=i[r];i[a]=t}return n},h.$signals=n=>n!==void 0?l(n):void 0;}`;
+var SIGNALS_JS = `{let m;const w=window,p=document,y=new Map,k=new Map,l=n=>k.get(n)??k.set(n,M(n)).get(n),$=()=>Object.create(null),f=(n,e)=>n.getAttribute(e),M=n=>{const e=$(),t=(i,r)=>{e[i]=r},s=new Map,a=(i,r)=>{let o=s.get(i);return o||(o=new Set,s.set(i,o)),o.add(r),()=>{o.delete(r),o.size===0&&s.delete(i)}},c=new Proxy($(),{get:(i,r)=>p.querySelector("[data-ref='"+n+":"+r+"']")});return new Proxy(e,{get:(i,r,o)=>{switch(r){case"$init":return t;case"$watch":return a;case"app":return l(0);case"refs":return c;default:return m?.(n,r),Reflect.get(i,r,o)}},set:(i,r,o,d)=>{if(o!==Reflect.get(i,r,d)){const u=s.get(r);return u&&queueMicrotask(()=>u.forEach(g=>g())),Reflect.set(i,r,o,d)}return!1}})},v=(n,e,t)=>{switch(e){case"toggle":return $renderToggle(n,t);case"switch":return $renderSwitch(n,t);case"html":return()=>n.innerHTML=""+t()}if(e&&e.length>2&&e.startsWith("[")&&e.endsWith("]"))return $renderAttr(n,e.slice(1,-1),t);const s=n.parentElement,a=()=>n.textContent=""+t();if(p.startViewTransition&&s.hasAttribute("data-vt")){const c=s.getAttribute("data-vt");return c&&(s.style.viewTransitionName=c),()=>p.startViewTransition(a)}return a},E=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},b=async n=>{const e=n();return e!==void 0?e:(await new Promise(t=>setTimeout(t,0)),b(n))},S=n=>{typeof n=="function"&&n()},T=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});T("m-signal",n=>{const e=Number(f(n,"scope")),t=l(e),s=f(n,"key");if(s)n.disposes.push(t.$watch(s,v(n,f(n,"mode"),()=>t[s])));else{const a=Number(f(n,"computed"));b(()=>y.get(e*1e9+a)).then(([c,i])=>{const r=v(n,f(n,"mode"),c.bind(t));i.forEach(o=>{const[d,u]=E(o);n.disposes.push(l(d).$watch(u,r))})})}}),T("m-effect",n=>{const{disposes:e}=n,t=Number(f(n,"scope")),s=Number(f(n,"n")),a=new Array(s);e.push(()=>{a.forEach(S),a.length=0});for(let c=0;c<s;c++){const i="$ME_"+t+"_"+c;b(()=>w[i]).then(r=>{const o=[],d=l(t),u=()=>{S(a[c]),a[c]=r.call(d)};m=(g,h)=>o.push([g,h]),u(),m=void 0;for(const[g,h]of o)e.push(l(g).$watch(h,u))},()=>{})}}),w.$MS=(n,e)=>{const[t,s]=E(n);l(t).$init(s,e)},w.$MC=(n,e,t,s)=>{y.set(n*1e9+e,[t,s])},w.$patch=(n,...e)=>{for(const[t,...s]of e){const a=s.pop();let c=n;for(const i of s)c=c[i];c[a]=t}return n},w.$signals=n=>n!==void 0?l(n):void 0;}`;
 var SUSPENSE_JS = `{const i=new Map,o=e=>e.getAttribute("chunk-id"),l=(e,t)=>customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}});l("m-portal",e=>{i.set(o(e),e)}),l("m-chunk",e=>{setTimeout(()=>{const t=o(e),n=i.get(t),s=e.firstChild?.content.childNodes;n&&(e.hasAttribute("next")?s&&n.before(...s):(e.hasAttribute("done")?n.remove():s&&n.replaceWith(...s),i.delete(t)),e.remove())})});}`;
 var COMPONENT_JS = `{const e=document,a=(t,s)=>t.getAttribute(s);customElements.define("m-component",class extends HTMLElement{static observedAttributes=["name","props"];#t;#s;#r;#h;#i;#e=new Map;#a=!0;async#l(){if(!this.#t){this.#n("");return}const t=this.#s||"{}",s=this.#t+t,i={"x-component":this.#t,"x-props":t,"x-flags":$FLAGS},n=new AbortController;if(this.#h?.abort(),this.#h=n,this.#e.has(s)){this.#n(this.#e.get(s));return}this.#r?.length&&this.#n(this.#r);const r=await fetch(location.href,{headers:i,signal:n.signal});if(!r.ok)throw this.#n(""),new Error("Failed to fetch component '"+this.#t+"'");const[h,o]=await r.json();this.#e.set(s,h),this.#n(h),o&&(e.body.appendChild(e.createElement("script")).textContent=o)}#n(t){const s=()=>typeof t=="string"?this.innerHTML=t:this.replaceChildren(...t);this.hasAttribute("vt")&&e.startViewTransition&&!this.#a?e.startViewTransition(s):s(),this.#a=!1}get name(){return this.#t??null}set name(t){t&&t!==this.#t&&(this.#t=t,this.#o())}get props(){return this.#s?JSON.parse(this.#s):void 0}set props(t){const s=typeof t=="string"?t:JSON.stringify(t);s&&s!==this.#s&&(this.#s=s,this.#o())}attributeChangedCallback(t,s,i){this.#t&&i&&(t==="name"?this.name=i:t==="props"&&(this.props=i))}connectedCallback(){setTimeout(()=>{if(!this.#r){const t=a(this,"props");this.#t=a(this,"name"),this.#s=t?.startsWith("base64,")?atob(t.slice(7)):void 0,this.#r=[...this.childNodes]}this.#l()})}disconnectedCallback(){this.#e.clear(),this.#h?.abort(),this.#h=void 0,this.#i&&clearTimeout(this.#i),this.#i=void 0}#o(){this.#i&&clearTimeout(this.#i),this.#i=setTimeout(()=>{this.#i=void 0,this.#l()},50)}refresh(){this.#t&&this.#e.delete(this.#t+(this.#s||"{}")),this.#o()}});}`;
 var ROUTER_JS = `{const n=document,a=location,o=t=>t.split("#",1)[0],l=t=>o(t)===o(a.href);customElements.define("m-router",class extends HTMLElement{#t;#s;#i;#n;#e=new Map;#r=!0;async#c(t){const s=new AbortController,i={"x-route":"true","x-flags":$FLAGS};this.#n?.abort(),this.#n=s;const e=await fetch(t,{headers:i,signal:s.signal});if(e.status===404)return null;if(!e.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+e.status+" "+e.statusText);return e.json()}#a(t){const s=()=>typeof t=="string"?this.innerHTML=t:this.replaceChildren(...t);this.hasAttribute("vt")&&n.startViewTransition&&!this.#r?n.startViewTransition(s):s(),this.#r=!1}#o(){n.querySelectorAll("nav a").forEach(t=>{const{href:s,classList:i}=t,e=t.closest("nav")?.getAttribute("data-active-class")??"active";l(s)?i.add(e):i.remove(e)})}async#l(t,s){const i=this.#c(t).then(e=>{if(e){const[r,c]=e;return this.#e.set(t,r),this.#a(r),c}else this.#e.delete(t),this.#a(this.#t??[]),typeof $signals<"u"&&($signals(0).url=new URL(t))});this.#e.has(t)?this.#a(this.#e.get(t)):await i,history[s?.replace?"replaceState":"pushState"]({},"",t),this.#o(),window.scrollTo(0,0),i.then(e=>{e&&(n.body.appendChild(n.createElement("script")).textContent=e)})}navigate(t,s){const i=new URL(t,a.href);if(i.origin!==a.origin){a.href=t;return}l(i.href)||this.#l(t,s)}connectedCallback(){setTimeout(()=>{if(!this.#t)if(this.hasAttribute("fallback"))this.removeAttribute("fallback"),this.#t=[...this.childNodes];else{this.#t=[];for(const t of this.childNodes)if(t.nodeType===1&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-slot")){this.#t.push(...t.content.childNodes),t.remove();break}}}),this.#s=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const{download:s,href:i,rel:e,target:r}=t.target;s||e==="external"||r==="_blank"||!i.startsWith(a.origin)||(t.preventDefault(),this.navigate(i))},this.#i=()=>this.#l(a.href),addEventListener("popstate",this.#i),n.addEventListener("click",this.#s),setTimeout(()=>this.#o()),globalThis.$router=this}disconnectedCallback(){removeEventListener("popstate",this.#i),n.removeEventListener("click",this.#s),delete globalThis.$router,this.#n?.abort(),this.#n=void 0,this.#e.clear(),this.#s=void 0,this.#i=void 0}});}`;
@@ -143,7 +143,7 @@ var $signal = Symbol.for("mono.signal");
 var $vnode = Symbol.for("jsx.vnode");
 
 // version.ts
-var VERSION = "0.7.0";
+var VERSION = "0.7.2";
 
 // render.ts
 var cdn = "https://raw.esm.sh";
@@ -665,7 +665,7 @@ async function renderNode(rc, node, stripSlotProp) {
             const { routeFC } = rc;
             write("<m-router" + (!routeFC ? " fallback" : "") + renderViewTransitionAttr(viewTransition) + ">");
             if (routeFC) {
-              await renderFC(rc, routeFC instanceof Promise ? (await routeFC).default : routeFC, {});
+              await renderFC(rc, routeFC instanceof Promise ? (await routeFC).default : routeFC, {}, true);
             }
             let buf = "";
             if (children) {
@@ -938,6 +938,13 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
         binding = true;
       }
       break;
+    case "viewTransition":
+      if (attrValue === true || attrValue === "") {
+        attr = " data-vt";
+      } else if (isString(attrValue)) {
+        attr = " data-vt=" + toAttrStringLit(attrValue);
+      }
+      break;
     default:
       if (attrName.startsWith("on") && typeof attrValue === "function") {
         attr = " " + escapeHTML(attrName.toLowerCase()) + '="$emit(event,$MF_' + (scopeId ?? 0) + "_" + rc.mfs.gen(attrValue, scopeId) + toStr(scopeId, (i) => "," + i) + ')"';

package/package.json

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

package/types/html.d.ts

@@ -101,8 +101,6 @@ export namespace HTML {
     popover?: boolean | "auto" | "manual";
     /** A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) pseudo-element. */
     part?: string;
-    /** The `slot` attribute assigns a slot in a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) shadow tree to an element: An element with a `slot` attribute is assigned to the slot created by the `<slot>` element whose name attribute's value matches that slot attribute's value. */
-    slot?: string;
     /** Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see [Using custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) for more details). */
     is?: string;
     /** A boolean value that makes the browser disregard user input events for the element. Useful when click events are present. */

package/types/mono.d.ts

@@ -93,7 +93,16 @@ export type WithParams<T> = T & { params?: Record<string, string> };
 
 export interface BaseAttributes {
   children?: MaybeArray<ChildType>;
+  key?: string | number;
+  /**
+   * The `slot` attribute assigns a slot in a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) shadow tree to an element: An element with a `slot` attribute is assigned to the slot created by the `<slot>` element whose name attribute's value matches that slot attribute's value.
+   */
   slot?: string;
+  /**
+   * The `viewTransition` attribute is used to control the view transition of the children.
+   * @mono-jsx
+   */
+  viewTransition?: string | boolean;
 }
 
 export interface AsyncComponentAttributes {
@@ -125,10 +134,6 @@ export interface Elements {
      * The `hidden` attribute is used to control the visibility of the children.
      */
     hidden?: any;
-    /**
-     * The `viewTransition` attribute is used to control the view transition of the children.
-     */
-    viewTransition?: string | boolean;
   };
   /**
    * The `switch` element is a built-in element of mono-jsx that chooses one of its children based on the `slot` attribute to display.
@@ -139,10 +144,6 @@ export interface Elements {
      * The `value` attribute is used to control the value of the children.
      */
     value?: string | number | boolean | null;
-    /**
-     * The `viewTransition` attribute is used to control the view transition of the children.
-     */
-    viewTransition?: string | boolean;
   };
   /**
    * The `component` element is a built-in element of mono-jsx that is used to load components lazily,
@@ -161,10 +162,6 @@ export interface Elements {
      * The `ref` attribute is used to control the ref of the component.
      */
     ref?: ComponentElement | ((el: ComponentElement) => void);
-    /**
-     * The `viewTransition` attribute is used to control the view transition of the children.
-     */
-    viewTransition?: string | boolean;
   };
   /**
    * The `router` element is a built-in element of mono-jsx that provides SPA routing.
@@ -178,10 +175,6 @@ export interface Elements {
      * The `ref` attribute is used to control the ref of the router.
      */
     ref?: RouterElement | ((el: RouterElement) => void);
-    /**
-     * The `viewTransition` attribute is used to control the view transition of the children.
-     */
-    viewTransition?: string | boolean;
   };
   /**
    * The `cache` element is a built-in element of mono-jsx that caches the rendered content of the child nodes
@@ -313,7 +306,14 @@ declare global {
      *
      * **⚠ This is a server-side only API.**
      */
-    readonly request: WithParams<Request & { URL: URL }>;
+    readonly request: WithParams<
+      Request & {
+        /**
+         * Returns the URL of request as a URL object.
+         */
+        URL: URL;
+      }
+    >;
     /**
      * The `form` object created by the route form submission.
      *