npm - mono-jsx - Versions diffs - 0.8.2 → 0.9.1 - Mend

mono-jsx 0.8.2 → 0.9.1

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 (5) hide show

package/README.md CHANGED Viewed

@@ -534,10 +534,7 @@ mono-jsx uses signals for updating the view when a signal changes. Signals are s
 You can use the `this` keyword in your components to manage signals. Signals are bound to the component instance, can be updated directly, and the view will automatically re-render when a signal changes:
 ```tsx
-function Counter(
-  this: FC<{ count: number }>,
-  props: { initialCount?: number },
-) {
+function Counter(this: FC<{ count: number }>, props: { initialCount?: number }) {
   // Initialize a signal
   this.count = props.initialCount ?? 0;
@@ -554,16 +551,35 @@ function Counter(
 }
 ```
+You can also use `this.extend` method to extend the signals:
+```tsx
+function Counter(this: FC, props: { initialCount?: number }) {
+  const counter = this.extend({ count: props.initialCount ?? 0})
+  return (
+    <div>
+      {/* render signal */}
+      <span>{counter.count}</span>
+      {/* Update signal to trigger re-render */}
+      <button onClick={() => counter.count--}>-</button>
+      <button onClick={() => counter.count++}>+</button>
+    </div>
+  )
+}
+```
 ### Using App Signals
 You can define app signals by adding the `app` prop to the root `<html>` element. The app signals are available in all components via `this.app.<SignalName>`. Changes to the app signals will trigger re-renders in all components that use them:
 ```tsx
-interface AppSignals {
+interface IAppSignals {
   themeColor: string;
 }
-function Header(this: App<FC, AppSignals>) {
+function Header(this: WithAppSignals<FC, IAppSignals>) {
   return (
     <header>
       <h1 style={{ color: this.app.themeColor }}>Welcome to mono-jsx!</h1>
@@ -571,7 +587,7 @@ function Header(this: App<FC, AppSignals>) {
   )
 }
-function Footer(this: App<FC, AppSignals>) {
+function Footer(this: WithAppSignals<FC, IAppSignals>) {
   return (
     <footer>
       <p style={{ color: this.app.themeColor }}>(c) 2025 mono-jsx.</p>
@@ -579,7 +595,7 @@ function Footer(this: App<FC, AppSignals>) {
   )
 }
-function Main(this: App<FC, AppSignals>) {
+function Main(this: WithAppSignals<FC, IAppSignals>) {
   return (
     <main>
       <p>
@@ -879,20 +895,31 @@ The `this` object has the following built-in properties:
 - `request`: The request object from the `fetch` handler.
 - `session`: The session storage.
 - `refs`: A map of refs defined in the component.
-- `computed`: A method to create a computed signal.
-- `effect`: A method to create side effects.
+- `computed(fn)`: A method to create a computed signal.
+- `$(fn)`:  A shortcut for `computed(fn)`.
+- `effect(fn)`: A method to create side effects.
 ```ts
-type FC<Signals = {}, Refs = {}, AppSignals = {}, AppRefs = {}, Context = {}> = {
+type FC<Signals = {}, Refs = {}> = {
   readonly app: AppSignals & { refs: AppRefs; url: WithParams<URL> }
   readonly context: Context;
   readonly request: WithParams<Request>;
   readonly session: Session;
   readonly refs: Refs;
   readonly computed: <T = unknown>(fn: () => T) => T;
-  readonly $: FC["computed"];
+  readonly $: FC["computed"]; // A shortcut for `FC.computed`.
   readonly effect: (fn: () => void | (() => void)) => void;
 } & Signals;
+// define `AppSignals` type
+function Component(this: WithAppSignals<FC, { title: string }>) {
+  this.app.title // type: 'string'
+}
+// define `Context` type
+function Component(this: WithContext<FC, { secret: string }>) {
+  this.context.secret // type: 'string'
+}
 ```
 ### Using Signals
@@ -904,7 +931,7 @@ See the [Using Signals](#using-signals) section for more details on how to use s
 You can use `this.refs` to access refs in your components. Refs are defined using the `ref` attribute in JSX, and they allow you to access DOM elements directly. The `refs` object is a map of ref names to DOM elements.
 ```tsx
-function App(this: Refs<FC, { input?: HTMLInputElement }>) {
+function App(this: WithRefs<FC, { input?: HTMLInputElement }>) {
   this.effect(() => {
     this.refs.input?.addEventListener("input", (evt) => {
       console.log("Input changed:", evt.target.value);
@@ -946,7 +973,7 @@ The `<component>` element also supports the `ref` attribute, which allows you to
 ```tsx
 import type { ComponentElement } from "mono-jsx";
-function App(this: Refs<FC, { component: ComponentElement }>) {
+function App(this: WithRefs<FC, { component: ComponentElement }>) {
   this.effect(() => {
     // updating the component name and props will trigger a re-render of the component
     this.refs.component.name = "Foo";
@@ -971,7 +998,7 @@ function App(this: Refs<FC, { component: ComponentElement }>) {
 You can use the `context` property in `this` to access context values in your components. The context is defined on the root `<html>` element:
 ```tsx
-function Dash(this: Context<FC, { auth: { uuid: string; name: string } }>) {
+function Dash(this: WithContext<FC, { auth: { uuid: string; name: string } }>) {
   const { auth } = this.context;
   return (
     <div>
@@ -1341,13 +1368,13 @@ function Component(this: FC) {
 mono-jsx renders HTML dynamically per request; large apps may tax your CPU resources. To improve rendering performance, mono-jsx introduces two built-in elements that can cache the rendered HTML of the children:
-- `<cache>` with specified `key` and `ttl`
+- `<cache>` with specified `key` and `maxAge`
 - `<static>` for elements that rarely change, such as `<svg>`
 ```tsx
 function BlogPage() {
   return (
-    <cache key="blog" ttl={86400}>
+    <cache key="blog" maxAge={86400}>
       <Blog />
     </cache>
   )

package/jsx-runtime.mjs CHANGED Viewed

@@ -26,7 +26,7 @@ var STYLE_JS = `{var f=/^(-|f[lo].*[^se]$|g.{5,}[^ps]$|z|o[pr]|(W.{5})?[lL]i.*(t
 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 h;const w=window,p=document,y=new Map,k=new Map,$=new Map,u=n=>y.get(n)??y.set(n,N(n)).get(n),v=()=>Object.create(null),l=(n,e)=>n.getAttribute(e),N=n=>{const e=v(),t=(r,c)=>{e[r]=c},s=new Map,a=(r,c)=>{let i=s.get(r);return i||(i=new Set,s.set(r,i)),i.add(c),()=>{i.delete(c),i.size===0&&s.delete(r)}},o=new Proxy(v(),{get:(r,c)=>p.querySelector("[data-ref='"+n+":"+c+"']")});return new Proxy(e,{get:(r,c,i)=>{switch(c){case"$init":return t;case"$watch":return a;case"app":return u(0);case"refs":return o;default:return h?.(n,c),Reflect.get(r,c,i)}},set:(r,c,i,f)=>{if(i!==Reflect.get(r,c,f)){const d=s.get(c);return d&&queueMicrotask(()=>d.forEach(g=>g())),Reflect.set(r,c,i,f)}return!1}})},E=(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 o=s.getAttribute("data-vt");return o&&(s.style.viewTransitionName=o),()=>p.startViewTransition(a)}return a},S=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},b=async(n,e=100)=>{const t=n();if(t!==void 0)return t;if(await new Promise(s=>setTimeout(s,25)),e<=0)throw new Error("Deferred value not found");return b(n,e-1)},T=n=>typeof n=="function"&&n(),M=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});M("m-signal",n=>{const e=Number(l(n,"scope")),t=u(e),s=l(n,"key");if(s)n.disposes.push(t.$watch(s,E(n,l(n,"mode"),()=>t[s])));else{const a=Number(l(n,"computed"));b(()=>k.get(e+":"+a)).then(o=>{const r=E(n,l(n,"mode"),$fmap.get(a).bind(t));o.forEach(c=>{const[i,f]=S(c);n.disposes.push(u(i).$watch(f,r))})})}}),M("m-effect",n=>{const{disposes:e}=n,t=Number(l(n,"scope"));b(()=>$.get(t)??void 0).then(s=>{const a=s.length,o=new Array(a);e.push(()=>{o.forEach(T),o.length=0});for(let r=0;r<a;r++){const c=[],i=u(t),f=$fmap.get(s[r]),d=()=>{T(o[r]),o[r]=f?.call(i)};h=(g,m)=>c.push([g,m]),d(),h=void 0;for(const[g,m]of c)e.push(u(g).$watch(m,d))}})}),w.$S=(n,e)=>{const[t,s]=S(n);u(t).$init(s,e)},w.$C=(n,e,t)=>{k.set(n+":"+e,t)},w.$E=(n,...e)=>{$.set(n,e)},w.$patch=(n,...e)=>{for(const[t,...s]of e){let a=s.pop(),o=n;for(const r of s)o=o[r];o[a]=t}return n},w.$signals=n=>n!==void 0?u(n):void 0;}`;
+var SIGNALS_JS = `{let h;const a=window,b=document,y=new Map,E=new Map,k=new Map,v=new Map,$=new Map,m=new Map,l=n=>y.get(n)??y.set(n,V(n)).get(n),F=()=>Object.create(null),p=(n,e)=>n.getAttribute(e),V=n=>{const e=F(),t=(o,c)=>{e[o]=c},s=new Map,r=(o,c)=>{let u=s.get(o);return u||(u=new Set,s.set(o,u)),u.add(c),()=>{u.delete(c),u.size===0&&s.delete(o)}},i=new Proxy(F(),{get:(o,c)=>b.querySelector("[data-ref='"+n+":"+c+"']")});return new Proxy(e,{get:(o,c,u)=>{switch(c){case"$init":return t;case"$watch":return r;case"app":return l(0);case"refs":return i;default:return h?.(n,c),Reflect.get(o,c,u)}},set:(o,c,u,g)=>{if(u!==Reflect.get(o,c,g)){const f=s.get(c);return f&&queueMicrotask(()=>f.forEach(d=>d())),Reflect.set(o,c,u,g)}return!1}})},M=(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,r=()=>n.textContent=""+t();if(b.startViewTransition&&s.hasAttribute("data-vt")){const i=s.getAttribute("data-vt");return i&&(s.style.viewTransitionName=i),()=>b.startViewTransition(r)}return r},S=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},q=(n,e,t,s)=>{const r=n.get(t);if(r!==void 0){s(r);return}const i=e.get(t);i?i.push(s):e.set(t,[s])},N=(n,e)=>{const t=a.$fmap?.get(n);if(t){e(t);return}const s=m.get(n);s?s.push(e):m.set(n,[e])};if(typeof a.$F=="function"){const n=a.$F;a.$F=(e,t)=>{n(e,t);const s=m.get(e);s&&(m.delete(e),s.forEach(r=>r(t)))}}const T=n=>typeof n=="function"&&n(),A=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});A("m-signal",n=>{const e=Number(p(n,"scope")),t=l(e),s=p(n,"key");if(s)n.disposes.push(t.$watch(s,M(n,p(n,"mode"),()=>t[s])));else{const r=Number(p(n,"computed")),i=e+":"+r;q(E,v,i,o=>{N(r,c=>{const u=M(n,p(n,"mode"),c.bind(t));o.forEach(g=>{const[f,d]=S(g);n.disposes.push(l(f).$watch(d,u))})})})}}),A("m-effect",n=>{const{disposes:e}=n,t=Number(p(n,"scope"));q(k,$,t,s=>{const r=s.length,i=new Array(r);e.push(()=>{i.forEach(T),i.length=0});for(let o=0;o<r;o++)N(s[o],c=>{const u=[],g=l(t),f=()=>{T(i[o]),i[o]=c.call(g)};h=(d,w)=>u.push([d,w]),f(),h=void 0;for(const[d,w]of u)e.push(l(d).$watch(w,f))})})}),a.$S=(n,e)=>{const[t,s]=S(n);l(t).$init(s,e)},a.$C=(n,e,t)=>{const s=n+":"+e;E.set(s,t);const r=v.get(s);r&&(v.delete(s),r.forEach(i=>i(t)))},a.$E=(n,...e)=>{k.set(n,e);const t=$.get(n);t&&($.delete(n),t.forEach(s=>s(e)))},a.$patch=(n,...e)=>{for(const[t,...s]of e){let r=s.pop(),i=n;for(const o of s)i=i[o];i[r]=t}return n},a.$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-fallback")){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}});}`;
@@ -176,7 +176,7 @@ var $vnode = Symbol.for("jsx.vnode");
 var $setup = Symbol.for("mono.setup");
 // version.ts
-var VERSION = "0.8.1";
+var VERSION = "0.9.0";
 // render.ts
 var FunctionIdGenerator = class extends Map {
@@ -759,15 +759,15 @@ async function renderNode(rc, node, stripSlotProp) {
           }
           case "cache":
           case "static": {
-            const { $stack, key = $stack, ttl, children } = props;
+            const { $stack, key = $stack, maxAge, children } = props;
             if (children) {
               if (key) {
                 const now = Date.now();
                 const value = cache.get(key);
-                if (value && (!value.expires || value.expires > now)) {
-                  write("<!-- cached -->");
+                if (value && (!value.expiresAt || value.expiresAt > now)) {
+                  write("<!-- " + tag + " -->");
                   write(value.html);
-                  write("<!-- /cached -->");
+                  write("<!-- /" + tag + " -->");
                 } else {
                   let buf = "";
                   await renderChildren(
@@ -780,7 +780,7 @@ async function renderNode(rc, node, stripSlotProp) {
                     children,
                     true
                   );
-                  cache.set(key, { html: buf, expires: ttl ? now + ttl : void 0 });
+                  cache.set(key, { html: buf, expiresAt: typeof maxAge === "number" && maxAge > 0 ? now + maxAge * 1e3 : void 0 });
                   rc.write(buf);
                 }
               } else {

package/package.json CHANGED Viewed

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

package/types/jsx.d.ts CHANGED Viewed

@@ -106,12 +106,12 @@ declare global {
       effect(fn: () => (() => void) | void): void;
     }
     & FCExtension<FC>
-    & Omit<Omit<Signals, "init" | "refs" | "computed" | "$" | "effect">, keyof FCExtension>;
+    & Omit<Omit<Signals, "refs" | "init" | "computed" | "$" | "effect">, keyof FCExtension>;
   /**
    *  Defines the `this.refs` type.
    */
-  type Refs<T, R extends {}> = T extends FC<infer S> ? FC<S, R> : never;
+  type WithRefs<T, R extends {}> = T extends FC<infer S> ? FC<S, R> : never;
   /**
    * The JSX namespace object.

package/types/mono.d.ts CHANGED Viewed

@@ -116,9 +116,9 @@ export interface Elements {
      */
     key?: string;
     /**
-     * The time-to-live of the cache in seconds.
+     * The maximum age of the cache in seconds.
      */
-    ttl?: number;
+    maxAge?: number;
   };
   /**
@@ -279,7 +279,7 @@ declare global {
   /**
    * Defines the `this.app` type.
    */
-  type App<T, AppSignals = {}, AppRefs = Record<string, HTMLElement>> = T extends FC<infer S, infer R> ? FC<S, R> & {
+  type WithAppSignals<T, AppSignals = {}, AppRefs = Record<string, HTMLElement>> = T extends FC<infer S, infer R> ? FC<S, R> & {
       /**
        * The global signals shared across the application.
        */
@@ -302,7 +302,7 @@ declare global {
   /**
    * Defines the `this.context` type.
    */
-  type Context<T, Context = {}> = T extends FC<infer S, infer R> ? FC<S, R> & {
+  type WithContext<T, Context = {}> = T extends FC<infer S, infer R> ? FC<S, R> & {
       /**
        * The rendering context object.
        *