import{_ as D,k as e,t as E,x as r,D as t,A as c}from"./index--mkBkEwj.js";var a=c("<div id=npm>"),h=c("<div id=yarn>"),p=c("<div id=pnpm>"),o=c("<div id=bun>");function F(s){const n=Object.assign({p:"p",a:"a",h2:"h2",ol:"ol",li:"li",code:"code",div:"div",style:"style",script:"script",figure:"figure",figcaption:"figcaption",pre:"pre",span:"span",button:"button",h3:"h3",h4:"h4",strong:"strong",ul:"ul",h5:"h5"},D(),s.components),{TabsCodeBlocks:d,Callout:i}=n;return i||y("Callout"),d||y("TabsCodeBlocks"),[e(n.p,{get children(){return[e(n.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})," is a superset of JavaScript that enhances code reliability and predictability through the introduction of ",e(n.a,{href:"https://www.typescriptlang.org/docs/handbook/2/everyday-types.html",children:"static types"}),`.
While JavaScript code can be directly used in TypeScript, the added type annotations in TypeScript provide clearer code structure and documentation, making it more accessible for developers.`]}}),`
`,e(n.p,{children:`By leveraging standard JSX, a syntax extension to JavaScript, Solid facilitates seamless TypeScript interpretation.
Moreover, Solid has built-in types for the API that heighten accuracy.`}),`
`,e(n.p,{get children(){return["For developers eager to get started, we offer ",e(n.a,{href:"https://github.com/solidjs/templates/",children:"TypeScript templates"})," on GitHub."]}}),`
`,e(n.h2,{id:"configuring-typescript",get children(){return e(n.a,{className:"heading",href:"#configuring-typescript",children:"Configuring TypeScript"})}}),`
`,e(n.p,{children:"When integrating TypeScript with the Solid JSX compiler, there are some settings to make for a seamless interaction:"}),`
`,e(n.ol,{get children(){return[`
`,e(n.li,{get children(){return[e(n.code,{children:'"jsx": "preserve"'})," in the ",e(n.code,{children:"tsconfig.json"}),` retains the original JSX form.
This is because Solid's JSX transformation is incompatible with TypeScript's JSX transformation.`]}}),`
`,e(n.li,{get children(){return[e(n.code,{children:'"jsxImportSource": "solid-js"'})," designates Solid as the source of JSX types."]}}),`
`]}}),`
`,e(n.p,{get children(){return["For a basic setup, your ",e(n.code,{children:"tsconfig.json"})," should resemble:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return[e(n.style,{children:`.expressive-code{font-family:var(--ec-uiFontFml);font-size:var(--ec-uiFontSize);font-weight:var(--ec-uiFontWg);line-height:var(--ec-uiLineHt);text-size-adjust:none;-webkit-text-size-adjust:none}.expressive-code *:not(path){all:revert;box-sizing:border-box}.expressive-code pre{display:flex;margin:0;padding:0;border:var(--ec-brdWd) solid var(--ec-brdCol);border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));background:var(--ec-codeBg)}.expressive-code pre:focus-visible{outline:3px solid var(--ec-focusBrd);outline-offset:-3px}.expressive-code pre > code{all:unset;display:block;flex:1 0 100%;padding:var(--ec-codePadBlk) 0;color:var(--ec-codeFg);font-family:var(--ec-codeFontFml);font-size:var(--ec-codeFontSize);font-weight:var(--ec-codeFontWg);line-height:var(--ec-codeLineHt)}.expressive-code pre{overflow-x:auto}.expressive-code pre.wrap .ec-line .code{white-space:pre-wrap;overflow-wrap:break-word;min-width:min(20ch, var(--ecMaxLine, 20ch))}.expressive-code pre.wrap .ec-line .code span.indent{white-space:pre}.expressive-code pre::-webkit-scrollbar,.expressive-code pre::-webkit-scrollbar-track{background-color:inherit;border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));border-top-left-radius:0;border-top-right-radius:0}.expressive-code pre::-webkit-scrollbar-thumb{background-color:var(--ec-sbThumbCol);border:4px solid transparent;background-clip:content-box;border-radius:10px}.expressive-code pre::-webkit-scrollbar-thumb:hover{background-color:var(--ec-sbThumbHoverCol)}.expressive-code .ec-line{direction:ltr;unicode-bidi:isolate;display:grid;grid-template-areas:'gutter code';grid-template-columns:auto 1fr;position:relative}.expressive-code .ec-line .gutter{grid-area:gutter;color:var(--ec-gtrFg)}.expressive-code .ec-line .gutter > *{pointer-events:none;user-select:none;-webkit-user-select:none}.expressive-code .ec-line .gutter ~ .code{--ecLineBrdCol:var(--ec-gtrBrdCol)}.expressive-code .ec-line.highlight .gutter{color:var(--ec-gtrHlFg)}.expressive-code .ec-line .code{grid-area:code;position:relative;box-sizing:content-box;padding-inline-start:calc(var(--ecIndent, 0ch) + var(--ec-codePadInl) - var(--ecGtrBrdWd));padding-inline-end:var(--ec-codePadInl);text-indent:calc(var(--ecIndent, 0ch) * -1)}.expressive-code .ec-line .code::before,.expressive-code .ec-line .code::after,.expressive-code .ec-line .code :where(*){text-indent:0}.expressive-code .ec-line .code{--ecGtrBrdWd:var(--ec-gtrBrdWd);border-inline-start:var(--ecGtrBrdWd) solid var(--ecLineBrdCol, transparent)}.expressive-code :nth-child(1 of .ec-line) .code{padding-inline-end:calc(2rem + var(--ec-codePadInl))}.expressive-code .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.expressive-code .ec-line.mark{--tmLineBgCol:var(--ec-tm-markBg)}.expressive-code .ec-line.mark .code{--ecLineBrdCol:var(--ec-tm-markBrdCol)}.expressive-code .ec-line.ins{--tmLineBgCol:var(--ec-tm-insBg);--tmLabel:var(--ec-tm-insDiffIndContent)}.expressive-code .ec-line.ins .code{--ecLineBrdCol:var(--ec-tm-insBrdCol)}.expressive-code .ec-line.ins .code::before{color:var(--ec-tm-insDiffIndCol)}.expressive-code .ec-line.del{--tmLineBgCol:var(--ec-tm-delBg);--tmLabel:var(--ec-tm-delDiffIndContent)}.expressive-code .ec-line.del .code{--ecLineBrdCol:var(--ec-tm-delBrdCol)}.expressive-code .ec-line.del .code::before{color:var(--ec-tm-delDiffIndCol)}.expressive-code .ec-line.mark,.expressive-code .ec-line.ins,.expressive-code .ec-line.del{background:var(--tmLineBgCol)}.expressive-code .ec-line.mark .code,.expressive-code .ec-line.ins .code,.expressive-code .ec-line.del .code{--ecGtrBrdWd:var(--ec-tm-lineMarkerAccentWd)}.expressive-code .ec-line.mark .code::before,.expressive-code .ec-line.ins .code::before,.expressive-code .ec-line.del .code::before{display:block;position:absolute;left:0;box-sizing:border-box;content:var(--tmLabel, ' ');padding-inline-start:var(--ec-tm-lineDiffIndMargLeft);text-align:center;white-space:pre}.expressive-code .ec-line.mark.tm-label .code::before,.expressive-code .ec-line.ins.tm-label .code::before,.expressive-code .ec-line.del.tm-label .code::before{background:var(--ecLineBrdCol);padding:0 calc(var(--ec-tm-lineMarkerLabelPadInl) + var(--ec-tm-lineMarkerAccentWd)) 0 var(--ec-tm-lineMarkerLabelPadInl);color:var(--ec-tm-lineMarkerLabelCol)}.expressive-code .ec-line mark{--tmInlineBgCol:var(--ec-tm-markBg);--tmInlineBrdCol:var(--ec-tm-markBrdCol)}.expressive-code .ec-line ins{--tmInlineBgCol:var(--ec-tm-insBg);--tmInlineBrdCol:var(--ec-tm-insBrdCol)}.expressive-code .ec-line del{--tmInlineBgCol:var(--ec-tm-delBg);--tmInlineBrdCol:var(--ec-tm-delBrdCol)}.expressive-code .ec-line mark,.expressive-code .ec-line ins,.expressive-code .ec-line del{all:unset;display:inline-block;position:relative;--tmBrdL:var(--ec-tm-inlMarkerBrdWd);--tmBrdR:var(--ec-tm-inlMarkerBrdWd);--tmRadL:var(--ec-tm-inlMarkerBrdRad);--tmRadR:var(--ec-tm-inlMarkerBrdRad);margin-inline:0.025rem;padding-inline:var(--ec-tm-inlMarkerPad);border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);background:var(--tmInlineBgCol);background-clip:padding-box}.expressive-code .ec-line mark.open-start,.expressive-code .ec-line ins.open-start,.expressive-code .ec-line del.open-start{margin-inline-start:0;padding-inline-start:0;--tmBrdL:0px;--tmRadL:0}.expressive-code .ec-line mark.open-end,.expressive-code .ec-line ins.open-end,.expressive-code .ec-line del.open-end{margin-inline-end:0;padding-inline-end:0;--tmBrdR:0px;--tmRadR:0}.expressive-code .ec-line mark::before,.expressive-code .ec-line ins::before,.expressive-code .ec-line del::before{content:'';position:absolute;pointer-events:none;display:inline-block;inset:0;border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);border:var(--ec-tm-inlMarkerBrdWd) solid var(--tmInlineBrdCol);border-inline-width:var(--tmBrdL) var(--tmBrdR)}.expressive-code .frame{all:unset;position:relative;display:block;--header-border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));--tab-border-radius:calc(var(--ec-frm-edTabBrdRad) + var(--ec-brdWd));--button-spacing:0.4rem;--code-background:var(--ec-frm-edBg);border-radius:var(--header-border-radius);box-shadow:var(--ec-frm-frameBoxShdCssVal)}.expressive-code .frame .header{display:none;z-index:1;position:relative;border-radius:var(--header-border-radius) var(--header-border-radius) 0 0}.expressive-code .frame.has-title pre,.expressive-code .frame.has-title code,.expressive-code .frame.is-terminal pre,.expressive-code .frame.is-terminal code{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.expressive-code .frame .title:empty:before{content:'\\a0'}.expressive-code .frame.has-title:not(.is-terminal){--button-spacing:calc(1.9rem + 2 * (var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)))}.expressive-code .frame.has-title:not(.is-terminal) .title{position:relative;color:var(--ec-frm-edActTabFg);background:var(--ec-frm-edActTabBg);background-clip:padding-box;margin-block-start:var(--ec-frm-edTabsMargBlkStart);padding:calc(var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)) var(--ec-uiPadInl);border:var(--ec-brdWd) solid var(--ec-frm-edActTabBrdCol);border-radius:var(--tab-border-radius) var(--tab-border-radius) 0 0;border-bottom:none;overflow:hidden}.expressive-code .frame.has-title:not(.is-terminal) .title::after{content:'';position:absolute;pointer-events:none;inset:0;border-top:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndTopCol);border-bottom:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndBtmCol)}.expressive-code .frame.has-title:not(.is-terminal) .header{display:flex;background:linear-gradient(to top, var(--ec-frm-edTabBarBrdBtmCol) var(--ec-brdWd), transparent var(--ec-brdWd)),linear-gradient(var(--ec-frm-edTabBarBg), var(--ec-frm-edTabBarBg));background-repeat:no-repeat;padding-inline-start:var(--ec-frm-edTabsMargInlStart)}.expressive-code .frame.has-title:not(.is-terminal) .header::before{content:'';position:absolute;pointer-events:none;inset:0;border:var(--ec-brdWd) solid var(--ec-frm-edTabBarBrdCol);border-radius:inherit;border-bottom:none}.expressive-code .frame.is-terminal{--button-spacing:calc(1.9rem + var(--ec-brdWd) + 2 * var(--ec-uiPadBlk));--code-background:var(--ec-frm-trmBg)}.expressive-code .frame.is-terminal .header{display:flex;align-items:center;justify-content:center;padding-block:var(--ec-uiPadBlk);padding-block-end:calc(var(--ec-uiPadBlk) + var(--ec-brdWd));position:relative;font-weight:500;letter-spacing:0.025ch;color:var(--ec-frm-trmTtbFg);background:var(--ec-frm-trmTtbBg);border:var(--ec-brdWd) solid var(--ec-brdCol);border-bottom:none}.expressive-code .frame.is-terminal .header::before{content:'';position:absolute;pointer-events:none;left:var(--ec-uiPadInl);width:2.1rem;height:0.56rem;line-height:0;background-color:var(--ec-frm-trmTtbDotsFg);opacity:var(--ec-frm-trmTtbDotsOpa);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");mask-repeat:no-repeat}.expressive-code .frame.is-terminal .header::after{content:'';position:absolute;pointer-events:none;inset:0;border-bottom:var(--ec-brdWd) solid var(--ec-frm-trmTtbBrdBtmCol)}.expressive-code .frame pre{background:var(--code-background)}.expressive-code .copy{display:flex;gap:0.25rem;flex-direction:row;position:absolute;inset-block-start:calc(var(--ec-brdWd) + var(--button-spacing));inset-inline-end:calc(var(--ec-brdWd) + var(--ec-uiPadInl) / 2);direction:ltr;unicode-bidi:isolate}.expressive-code .copy button{position:relative;align-self:flex-end;margin:0;padding:0;border:none;border-radius:0.2rem;z-index:1;cursor:pointer;transition-property:opacity, background, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);width:2.5rem;height:2.5rem;background:var(--code-background);opacity:0.75}.expressive-code .copy button div{position:absolute;inset:0;border-radius:inherit;background:var(--ec-frm-inlBtnBg);opacity:var(--ec-frm-inlBtnBgIdleOpa);transition-property:inherit;transition-duration:inherit;transition-timing-function:inherit}.expressive-code .copy button::before{content:'';position:absolute;pointer-events:none;inset:0;border-radius:inherit;border:var(--ec-brdWd) solid var(--ec-frm-inlBtnBrd);opacity:var(--ec-frm-inlBtnBrdOpa)}.expressive-code .copy button::after{content:'';position:absolute;pointer-events:none;inset:0;background-color:var(--ec-frm-inlBtnFg);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");mask-repeat:no-repeat;margin:0.475rem;line-height:0}.expressive-code .copy button:hover,.expressive-code .copy button:focus:focus-visible{opacity:1}.expressive-code .copy button:hover div,.expressive-code .copy button:focus:focus-visible div{opacity:var(--ec-frm-inlBtnBgHoverOrFocusOpa)}.expressive-code .copy button:active{opacity:1}.expressive-code .copy button:active div{opacity:var(--ec-frm-inlBtnBgActOpa)}.expressive-code .copy .feedback{--tooltip-arrow-size:0.35rem;--tooltip-bg:var(--ec-frm-tooltipSuccessBg);color:var(--ec-frm-tooltipSuccessFg);pointer-events:none;user-select:none;-webkit-user-select:none;position:relative;align-self:center;background-color:var(--tooltip-bg);z-index:99;padding:0.125rem 0.75rem;border-radius:0.2rem;margin-inline-end:var(--tooltip-arrow-size);opacity:0;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:ease-in-out;transform:translate3d(0, 0.25rem, 0)}.expressive-code .copy .feedback::after{content:'';position:absolute;pointer-events:none;top:calc(50% - var(--tooltip-arrow-size));inset-inline-end:calc(-2 * (var(--tooltip-arrow-size) - 0.5px));border:var(--tooltip-arrow-size) solid transparent;border-inline-start-color:var(--tooltip-bg)}.expressive-code .copy .feedback.show{opacity:1;transform:translate3d(0, 0, 0)}@media (hover: hover){.expressive-code{}.expressive-code .copy button{opacity:0;width:2rem;height:2rem}.expressive-code .frame:hover .copy button:not(:hover),.expressive-code .frame:focus-within :focus-visible ~ .copy button:not(:hover),.expressive-code .frame .copy .feedback.show ~ button:not(:hover){opacity:0.75}}:root,:root:not([data-theme='min-light']) .expressive-code[data-theme='min-light']{--ec-brdRad:0.3rem;--ec-brdWd:1.5px;--ec-brdCol:#ffffff00;--ec-codeFontFml:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;--ec-codeFontSize:0.85rem;--ec-codeFontWg:400;--ec-codeLineHt:1.65;--ec-codePadBlk:1rem;--ec-codePadInl:1.35rem;--ec-codeBg:#ffffff;--ec-codeFg:#212121;--ec-codeSelBg:#add6ff;--ec-gtrFg:#8d8d8d;--ec-gtrBrdCol:#8d8d8d33;--ec-gtrBrdWd:1.5px;--ec-gtrHlFg:#757575;--ec-uiFontFml:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--ec-uiFontSize:0.9rem;--ec-uiFontWg:400;--ec-uiLineHt:1.65;--ec-uiPadBlk:0.25rem;--ec-uiPadInl:1rem;--ec-uiSelBg:#eee;--ec-uiSelFg:#212121;--ec-focusBrd:#d0d0d0;--ec-sbThumbCol:#64646466;--ec-sbThumbHoverCol:#646464b2;--ec-tm-lineMarkerAccentMarg:0rem;--ec-tm-lineMarkerAccentWd:0.15rem;--ec-tm-lineMarkerLabelPadInl:0.2rem;--ec-tm-lineMarkerLabelCol:white;--ec-tm-lineDiffIndMargLeft:0.3rem;--ec-tm-inlMarkerBrdWd:1.5px;--ec-tm-inlMarkerBrdRad:0.2rem;--ec-tm-inlMarkerPad:0.15rem;--ec-tm-insDiffIndContent:'+';--ec-tm-delDiffIndContent:'-';--ec-tm-markBg:#9fb6ff80;--ec-tm-markBrdCol:#5570b3d0;--ec-tm-insBg:#94c68480;--ec-tm-insBrdCol:#4e7e41d0;--ec-tm-insDiffIndCol:#3a692fd0;--ec-tm-delBg:#fea09280;--ec-tm-delBrdCol:#ae594fd0;--ec-tm-delDiffIndCol:#97453dd0;--ec-frm-shdCol:#00000028;--ec-frm-frameBoxShdCssVal:0.1rem 0.1rem 0.2rem #00000028;--ec-frm-edActTabBg:#ffffff;--ec-frm-edActTabFg:#424242;--ec-frm-edActTabBrdCol:transparent;--ec-frm-edActTabIndHt:1.5px;--ec-frm-edActTabIndTopCol:null;--ec-frm-edActTabIndBtmCol:#fff;--ec-frm-edTabsMargInlStart:0;--ec-frm-edTabsMargBlkStart:0;--ec-frm-edTabBrdRad:0.3rem;--ec-frm-edTabBarBg:#f6f6f6;--ec-frm-edTabBarBrdCol:#ffffff00;--ec-frm-edTabBarBrdBtmCol:#fff;--ec-frm-edBg:#ffffff;--ec-frm-trmTtbFg:#333333;--ec-frm-trmTtbDotsFg:#333333;--ec-frm-trmTtbDotsOpa:0.15;--ec-frm-trmTtbBg:#f6f6f6;--ec-frm-trmTtbBrdBtmCol:#ffffff00;--ec-frm-trmBg:#fff;--ec-frm-inlBtnFg:#212121;--ec-frm-inlBtnBg:#212121;--ec-frm-inlBtnBgIdleOpa:0;--ec-frm-inlBtnBgHoverOrFocusOpa:0.2;--ec-frm-inlBtnBgActOpa:0.3;--ec-frm-inlBtnBrd:#212121;--ec-frm-inlBtnBrdOpa:0.4;--ec-frm-tooltipSuccessBg:#4c8300;--ec-frm-tooltipSuccessFg:white}.expressive-code .ec-line :where(span[style^='--']:not([class])),:root:not([data-theme='min-light']) .expressive-code[data-theme='min-light'] .ec-line :where(span[style^='--']:not([class])){color:var(--0, inherit);font-style:var(--0fs, inherit);font-weight:var(--0fw, inherit);text-decoration:var(--0td, inherit)}@media (prefers-color-scheme: dark){:root:not([data-theme='min-light']){--ec-brdCol:#0f111a60;--ec-codeBg:#0f111a;--ec-codeFg:#babed8;--ec-codeSelBg:#717cb450;--ec-gtrFg:#636674fe;--ec-gtrBrdCol:#63667433;--ec-gtrHlFg:#767c92;--ec-uiSelBg:#00000050;--ec-uiSelFg:#80cbc4;--ec-focusBrd:#ffffff00;--ec-sbThumbCol:#8f93a220;--ec-sbThumbHoverCol:#8f93a284;--ec-tm-markBg:#264a8980;--ec-tm-insBg:#26561c80;--ec-tm-insDiffIndCol:#7eb070d0;--ec-tm-delBg:#81322b80;--ec-tm-delDiffIndCol:#e68a7ed0;--ec-frm-shdCol:#00000030;--ec-frm-frameBoxShdCssVal:0.1rem 0.1rem 0.2rem #00000030;--ec-frm-edActTabBg:#0f111a;--ec-frm-edActTabFg:#ffffff;--ec-frm-edActTabIndBtmCol:#80cbc4;--ec-frm-edTabBarBg:#0f111a;--ec-frm-edTabBarBrdCol:#0f111a60;--ec-frm-edTabBarBrdBtmCol:transparent;--ec-frm-edBg:#0f111a;--ec-frm-trmTtbFg:#babed8;--ec-frm-trmTtbDotsFg:#babed8;--ec-frm-trmTtbBg:#0f111a;--ec-frm-trmTtbBrdBtmCol:#0f111a60;--ec-frm-trmBg:#0f111a;--ec-frm-inlBtnFg:#babed8;--ec-frm-inlBtnBg:#babed8;--ec-frm-inlBtnBrd:#babed8;--ec-frm-tooltipSuccessBg:#687b4b}:root:not([data-theme='min-light']) .expressive-code .ec-line :where(span[style^='--']:not([class])){color:var(--1, inherit);font-style:var(--1fs, inherit);font-weight:var(--1fw, inherit);text-decoration:var(--1td, inherit)}}:root[data-theme='material-theme-ocean'] .expressive-code:not([data-theme='min-light']),.expressive-code[data-theme='material-theme-ocean']{--ec-brdCol:#0f111a60;--ec-codeBg:#0f111a;--ec-codeFg:#babed8;--ec-codeSelBg:#717cb450;--ec-gtrFg:#636674fe;--ec-gtrBrdCol:#63667433;--ec-gtrHlFg:#767c92;--ec-uiSelBg:#00000050;--ec-uiSelFg:#80cbc4;--ec-focusBrd:#ffffff00;--ec-sbThumbCol:#8f93a220;--ec-sbThumbHoverCol:#8f93a284;--ec-tm-markBg:#264a8980;--ec-tm-insBg:#26561c80;--ec-tm-insDiffIndCol:#7eb070d0;--ec-tm-delBg:#81322b80;--ec-tm-delDiffIndCol:#e68a7ed0;--ec-frm-shdCol:#00000030;--ec-frm-frameBoxShdCssVal:0.1rem 0.1rem 0.2rem #00000030;--ec-frm-edActTabBg:#0f111a;--ec-frm-edActTabFg:#ffffff;--ec-frm-edActTabIndBtmCol:#80cbc4;--ec-frm-edTabBarBg:#0f111a;--ec-frm-edTabBarBrdCol:#0f111a60;--ec-frm-edTabBarBrdBtmCol:transparent;--ec-frm-edBg:#0f111a;--ec-frm-trmTtbFg:#babed8;--ec-frm-trmTtbDotsFg:#babed8;--ec-frm-trmTtbBg:#0f111a;--ec-frm-trmTtbBrdBtmCol:#0f111a60;--ec-frm-trmBg:#0f111a;--ec-frm-inlBtnFg:#babed8;--ec-frm-inlBtnBg:#babed8;--ec-frm-inlBtnBrd:#babed8;--ec-frm-tooltipSuccessBg:#687b4b}:root[data-theme='material-theme-ocean'] .expressive-code:not([data-theme='min-light']) .ec-line :where(span[style^='--']:not([class])),.expressive-code[data-theme='material-theme-ocean'] .ec-line :where(span[style^='--']:not([class])){color:var(--1, inherit);font-style:var(--1fs, inherit);font-weight:var(--1fw, inherit);text-decoration:var(--1td, inherit)}`}),e(n.script,{type:"module",children:'(()=>{function i(n){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=n,document.body.appendChild(e);let r=document.createRange();r.selectNode(e);let o=getSelection();if(!o)return!1;o.removeAllRanges(),o.addRange(r);let a=!1;try{a=document.execCommand("copy")}finally{o.removeAllRanges(),document.body.removeChild(e)}return a}async function l(n){let e=n.currentTarget,r=e.dataset,o=!1,a=r.code.replace(/\\u007f/g,`\n`);try{await navigator.clipboard.writeText(a),o=!0}catch{o=i(a)}if(!o||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(r.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}var s=n=>{n.querySelectorAll&&n.querySelectorAll(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))};s(document);var u=new MutationObserver(n=>n.forEach(e=>e.addedNodes.forEach(r=>{s(r)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();'}),e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"compilerOptions"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"jsx"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"preserve"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"jsxImportSource"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'{  "compilerOptions": {    "jsx": "preserve",    "jsxImportSource": "solid-js"  }}',get children(){return e(n.div,{})}})}})]}})]}}),`
`,e(n.p,{get children(){return[`For projects with diverse JSX sources, such as a blend of React and Solid, some flexibility exists.
While it's possible to set a default `,e(n.code,{children:"jsxImportSource"})," in the ",e(n.code,{children:"tsconfig.json"}),`, which will correspond with the majority of your files, TypeScript also allows file-level overrides.
Using specific pragmas within `,e(n.code,{children:".tsx"})," files facilitates this:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"/** "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"@"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA","--1fs":"italic"},children:"jsxImportSource"}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:" solid-js */"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"/** @jsxImportSource solid-js */",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{children:"or, if using React:"}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"/** "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"@"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA","--1fs":"italic"},children:"jsxImportSource"}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:" react */"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"/** @jsxImportSource react */",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{children:`Opting for the React JSX pragma means having React and its associated dependencies fully integrated into the project.
Additionally, it makes sure the project's architecture is primed for React JSX file handling, which is vital.`}),`
`,e(n.h2,{id:"migrating-from-javascript-to-typescript",get children(){return e(n.a,{className:"heading",href:"#migrating-from-javascript-to-typescript",children:"Migrating from JavaScript to TypeScript"})}}),`
`,e(n.p,{children:"Transitioning from JavaScript to TypeScript in a Solid project offers the benefits of static typing. To migrate to Typescript:"}),`
`,e(n.ol,{get children(){return[`
`,e(n.li,{children:"Install TypeScript into your project."}),`
`]}}),`
`,e(d,{get children(){return[(()=>{var l=r(a);return t(l,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"npm"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"i"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"--save-dev"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"typescript"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"npm i --save-dev typescript",get children(){return e(n.div,{})}})}})]}})}})),l})(),(()=>{var l=r(h);return t(l,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"yarn"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"add"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"--dev"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"typescript"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"yarn add --dev typescript",get children(){return e(n.div,{})}})}})]}})}})),l})(),(()=>{var l=r(p);return t(l,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"pnpm"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"add"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"--save-dev"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"typescript"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"pnpm add --save-dev typescript",get children(){return e(n.div,{})}})}})]}})}})),l})(),(()=>{var l=r(o);return t(l,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"bun"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"add"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"--save-dev"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"typescript"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"bun add --save-dev typescript",get children(){return e(n.div,{})}})}})]}})}})),l})()]}}),`
`,e(n.ol,{start:"2",get children(){return[`
`,e(n.li,{get children(){return["Run the following command to generate a ",e(n.code,{children:"tsconfig.json"})," file."]}}),`
`]}}),`
`,e(d,{get children(){return[(()=>{var l=r(a);return t(l,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"npx"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"tsc"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"--init"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"npx tsc --init",get children(){return e(n.div,{})}})}})]}})}})),l})(),(()=>{var l=r(h);return t(l,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"yarn"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"dlx"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"tsc"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"--init"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"yarn dlx tsc --init",get children(){return e(n.div,{})}})}})]}})}})),l})(),(()=>{var l=r(p);return t(l,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"pnpm"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"dlx"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"tsc"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"--init"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"pnpm dlx tsc --init",get children(){return e(n.div,{})}})}})]}})}})),l})(),(()=>{var l=r(o);return t(l,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"bunx"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"tsc"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#2B5581","--1":"#C3E88D"},children:"--init"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"bunx tsc --init",get children(){return e(n.div,{})}})}})]}})}})),l})()]}}),`
`,e(n.ol,{start:"3",get children(){return[`
`,e(n.li,{get children(){return["Update the contents of the ",e(n.code,{children:"tsconfig.json"})," to match Solid's configuration:"]}}),`
`]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"compilerOptions"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"strict"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#1669BB"},children:"true"}),e(n.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"target"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"ESNext"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"module"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"ESNext"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"moduleResolution"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"node"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"allowSyntheticDefaultImports"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#1669BB"},children:"true"}),e(n.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"esModuleInterop"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#1669BB"},children:"true"}),e(n.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"jsx"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"preserve"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"jsxImportSource"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"types"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"vite/client"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:"]"}),e(n.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"noEmit"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#1669BB"},children:"true"}),e(n.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#C62C2C","--1":"#FFCB6B"},children:"isolatedModules"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#89DDFF"},children:"true"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'{  "compilerOptions": {    "strict": true,    "target": "ESNext",    "module": "ESNext",    "moduleResolution": "node",    "allowSyntheticDefaultImports": true,    "esModuleInterop": true,    "jsx": "preserve",    "jsxImportSource": "solid-js",    "types": ["vite/client"],    "noEmit": true,    "isolatedModules": true  }}',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.ol,{start:"4",get children(){return[`
`,e(n.li,{get children(){return["Create a TypeScript or ",e(n.code,{children:".tsx"})," file to test the setup."]}}),`
`]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"type"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Component"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"MyTsComponent"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:"()"}),e(n.span,{style:{"--0":"#C62C2C"},children:":"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Element"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"h1"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"This"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"is"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"a"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"TypeScript"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"component"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"h1"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"div"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"default"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" MyTsComponent"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { type Component } from "solid-js"function MyTsComponent(): JSX.Element {  return (    <div>      <h1>This is a TypeScript component</h1>    </div>  )}export default MyTsComponent',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{children:"If using an existing JavaScript component, import the TypeScript component:"}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" MyTsComponent "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./MyTsComponent"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"MyJsComponent"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<>"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"/* ... */"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyTsComponent"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</>"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import MyTsComponent from "./MyTsComponent";function MyJsComponent() {  return (    <>      {/* ... */}      <MyTsComponent />    </>  );}',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(i,{get children(){return[e(n.p,{get children(){return["If you wish to change the entry point file from ",e(n.code,{children:"index.jsx"})," to ",e(n.code,{children:"index.tsx"}),", you need to modify the ",e(n.code,{children:"src"})," attribute in ",e(n.code,{children:"<script>"})," to look like the following:"]}}),e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<!"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"doctype"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"html"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"html"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"lang"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"en"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"head"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"<!-- ... -->"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"head"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"body"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"noscript"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"You need to enable JavaScript to run this app."}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"noscript"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"id"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"root"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"></"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"script"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"src"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"/src/index.tsx"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"type"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"module"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"></"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"script"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"body"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"html"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'<!doctype html><html lang="en">  <head>    <!-- ... -->  </head>  <body>    <noscript>You need to enable JavaScript to run this app.</noscript>    <div id="root"></div>    <script src="/src/index.tsx" type="module"><\/script>  </body></html>',get children(){return e(n.div,{})}})}})]}})}})]}}),`
`,e(n.h2,{id:"api-types",get children(){return e(n.a,{className:"heading",href:"#api-types",children:"API types"})}}),`
`,e(n.p,{children:"Solid is written in TypeScript, meaning everything is typed out of the box."}),`
`,e(n.p,{children:`The Reference Tab in the sidebar provides the API Documentation that details the types of API calls.
In addition, there are several helpful definitions to make it easier for specifying explicit types.`}),`
`,e(n.h3,{id:"signals",get children(){return e(n.a,{className:"heading",href:"#signals",children:"Signals"})}}),`
`,e(n.p,{get children(){return["Using ",e(n.code,{children:"createSignal<T>"}),", a signal's type can be defined as ",e(n.code,{children:"T"}),"."]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"setCount"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"number"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"const [count, setCount] = createSignal<number>();",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["Here, ",e(n.code,{children:"createSignal"})," has the return type ",e(n.code,{children:"Signal<number | undefined>"}),", which corresponds to the type passed into it, and ",e(n.code,{children:"undefined"}),` as it was uninitialized.
This resolves to a getter-setter `,e(n.a,{href:"https://www.typescriptlang.org/docs/handbook/2/objects.html#tuple-types",children:"tuple"}),", both of which are generically typed:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"type"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Signal"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Accessor"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Setter"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"type"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Signal"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"T"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ["}),e(n.span,{style:{"--0":"#24292E","--1":"#FFCB6B"},children:"get"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Accessor"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"T"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:">"}),e(n.span,{style:{"--0":"#212121"},children:","})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#FFCB6B"},children:"set"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Setter"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"T"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import type { Signal, Accessor, Setter } from "solid-js";type Signal<T> = [get: Accessor<T>, set: Setter<T>];',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["In Solid, a signal's getter, like ",e(n.code,{children:"count"}),`, is essentially a function that returns a specific type.
In this case, the type is `,e(n.code,{children:"Accessor<number | undefined>"}),", which translates to a function ",e(n.code,{children:"() => number | undefined"}),`.
Since the signal was not initialized, its initial state is `,e(n.code,{children:"undefined"}),", therefore ",e(n.code,{children:"undefined"})," is included in its type."]}}),`
`,e(n.p,{get children(){return["The corresponding setter, ",e(n.code,{children:"setCount"}),", has a more complex type:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Setter"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"number "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"|"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#1669BB"},children:"undefined"}),e(n.span,{style:{"--0":"#C62C2C"},children:">"}),e(n.span,{style:{"--0":"#24292E"},children:"."})]}})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"Setter<number | undefined>.",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return[`Essentially, this type means that the function can accept either a direct number or another function as its input.
If provided with a function, that function can take the signal's previous value as its parameter and return a new value.
Both the initial and resulting values can be a number or `,e(n.code,{children:"undefined"}),". Importantly, calling ",e(n.code,{children:"setCount"})," without any arguments will reset the signal's value to ",e(n.code,{children:"undefined"}),"."]}}),`
`,e(n.p,{children:`When using the function form of the setter, the signal's current value will always be passed to the callback as the sole argument.
Additionally, the return type of the setter will align with the type of value passed into it, echoing the behavior expected from a typical assignment operation.`}),`
`,e(n.p,{children:`If a signal is intended to store functions, the setter won't directly accept new functions as values.
This is because it can not distinguish whether the function should be executed to yield the actual value or to store it as-is.
In these situations, using the callback form of the setter is recommended:`}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" value)"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"setSignal(() => value);",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.h4,{id:"default-values",get children(){return e(n.a,{className:"heading",href:"#default-values",children:"Default values"})}}),`
`,e(n.p,{get children(){return["By providing default values when ",e(n.code,{children:"createSignal"})," is called, the need for explicit type specification is avoided and the possibility of the ",e(n.code,{children:"| undefined"}),` type is eliminated.
This leverages type inference to determine the type automatically:`]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"setCount"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"setName"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'""'}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'const [count, setCount] = createSignal(0);const [name, setName] = createSignal("");',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["In this example, TypeScript understands the types as ",e(n.code,{children:"number"})," and ",e(n.code,{children:"string"}),`.
This means that `,e(n.code,{children:"count"})," and ",e(n.code,{children:"name"})," directly receive the types ",e(n.code,{children:"Accessor<number>"})," and ",e(n.code,{children:"Accessor<string>"}),", respectively, without the ",e(n.code,{children:"| undefined"})," tag."]}}),`
`,e(n.h3,{id:"context",get children(){return e(n.a,{className:"heading",href:"#context",children:"Context"})}}),`
`,e(n.p,{get children(){return["Just as signals use ",e(n.code,{children:"createSignal<T>"}),", context uses ",e(n.code,{children:"createContext<T>"}),", which is parameterized by the type ",e(n.code,{children:"T"})," of the context's value:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"type"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Data"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"count"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"number"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"name"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"string"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"type Data = { count: number; name: string };",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["When invoking ",e(n.code,{children:"useContext(dataContext)"}),`, the type contained within the context is returned.
For example, if the context is `,e(n.code,{children:"Context<Data | undefined>"}),", then with using ",e(n.code,{children:"useContext"})," a result of type ",e(n.code,{children:"Data | undefined"}),` will return.
The `,e(n.code,{children:"| undefined"})," signifies that the context may not be defined in the component's ancestor hierarchy."]}}),`
`,e(n.p,{get children(){return[e(n.code,{children:"dataContext"})," will be understood as ",e(n.code,{children:"Context<Data | undefined>"}),` by Solid.
Calling `,e(n.code,{children:"useContext(dataContext)"})," mirrors this type, returning ",e(n.code,{children:"Data | undefined"}),`.
The `,e(n.code,{children:"| undefined"})," arises when the context's value will be used but cannot be determined."]}}),`
`,e(n.p,{get children(){return["Much like ",e(n.a,{href:"#default-values",children:"default values"})," in signals, ",e(n.code,{children:"| undefined"})," can be avoided in the type by giving a default value that will be returned if no value is assigned by a context provider:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"dataContext"}),e(n.span,{style:{"--0":"#24292E"},children:" "})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createContext"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"count"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"name"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'""'}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'const dataContext = createContext({ count: 0, name: "" });',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["By providing a default value, TypeScript determines that ",e(n.code,{children:"dataContext"})," is ",e(n.code,{children:"Context<{ count: number, name: string }>"}),`.
This is equivalent to `,e(n.code,{children:"Context<Data>"})," but without ",e(n.code,{children:"| undefined"}),"."]}}),`
`,e(n.p,{get children(){return[`A common approach to this is forming a factory function to generate a context's value.
By using TypeScript's `,e(n.a,{href:"https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#return-type-annotations",get children(){return e(n.code,{children:"ReturnType"})}}),", you can use the return type of this function to type this context:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#6F42C1"},children:"makeCountNameContext"}),e(n.span,{style:{"--0":"#24292E"},children:" "})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"initialCount"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"initialName"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'""'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setCount"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"initialCount"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setName"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"initialName"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ["})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"count"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:"}"}),e(n.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"setCount"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"setName"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:"}"}),e(n.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"] "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"as"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"type"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"CountNameContextType"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"ReturnType"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:"<"}),e(n.span,{style:{"--0":"#C62C2C"},children:"typeof"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" makeCountNameContext"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">;"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"CountNameContext"}),e(n.span,{style:{"--0":"#24292E"},children:" "})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createContext"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"CountNameContextType"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'export const makeCountNameContext = (initialCount = 0, initialName = "") => {  const [count, setCount] = createSignal(initialCount);  const [name, setName] = createSignal(initialName);  return [    { count, name },    { setCount, setName },  ] as const;};type CountNameContextType = ReturnType<typeof makeCountNameContext>;export const CountNameContext = createContext<CountNameContextType>();',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return[e(n.code,{children:"CountNameContextType"})," will correspond to the result of ",e(n.code,{children:"makeCountNameContext"}),":"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"["})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"count"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" Accessor"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"number"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:">"}),e(n.span,{style:{"--0":"#212121"},children:","})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"name"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" Accessor"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"string"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:"}"}),e(n.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"setCount"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" Setter"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"number"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:">"}),e(n.span,{style:{"--0":"#212121"},children:","})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"setName"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" Setter"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"string"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:"}"}),e(n.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"[  { count: Accessor<number>, name: Accessor<string> },  { setCount: Setter<number>, setName: Setter<string> },];",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["To retrieve the context, use ",e(n.code,{children:"useCountNameContext"}),", which has a type signature of ",e(n.code,{children:"() => CountNameContextType | undefined"}),"."]}}),`
`,e(n.p,{get children(){return["In scenarios where ",e(n.code,{children:"undefined"}),` needs to be avoided as a possible type, assert that the context will always be present.
Additionally, throwing a readable error may be preferable to non-null asserting:`]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#6F42C1"},children:"useCountNameContext"}),e(n.span,{style:{"--0":"#24292E"},children:" "})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"countName"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"useContext"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"CountNameContext"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"if"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"!"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"countName"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:") "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"throw"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"new"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"Error"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"      "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"useCountNameContext should be called inside its ContextProvider"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"countName"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'export const useCountNameContext = () => {  const countName = useContext(CountNameContext);  if (!countName) {    throw new Error(      "useCountNameContext should be called inside its ContextProvider"    );  }  return countName;};',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return[e(n.strong,{children:"Note:"})," While supplying a default value to ",e(n.code,{children:"createContext"}),` can make the context perpetually defined, this approach may not always be advisable.
Depending on the use case, it could lead to silent failures, which may be less preferable.`]}}),`
`,e(n.h3,{id:"components",get children(){return e(n.a,{className:"heading",href:"#components",children:"Components"})}}),`
`,e(n.h4,{id:"the-basics",get children(){return e(n.a,{className:"heading",href:"#the-basics",children:"The basics"})}}),`
`,e(n.p,{get children(){return["By default, components in Solid use the generic ",e(n.code,{children:"Component<P>"})," type, where ",e(n.code,{children:"P"})," represents the props' type that is an object."]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"type"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Component"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#6F42C1"},children:"MyComponent"})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Component"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"MyProps"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"..."})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import type { Component } from "solid-js";const MyComponent: Component<MyProps> = (props) => {    ...}',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["A ",e(n.code,{children:"JSX.Element"})," denotes anything renderable by Solid, which could be a DOM node, array of JSX elements, or functions yielding ",e(n.code,{children:"JSX.Element"}),"."]}}),`
`,e(n.p,{children:"Trying to pass unnecessary props or children will result in type errors:"}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// in counter.tsx"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#6F42C1"},children:"Counter"})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Component"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setCount"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{()"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"prev"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" prev "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"+"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>{"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// in app.tsx"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Counter"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />;"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// ✔️"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Counter"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"initial"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"5"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />;"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// ❌: No 'initial' prop defined"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Counter"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"hi"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Counter"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">;"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// ❌: Children aren't expected"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"// in counter.tsxconst Counter: Component = () => {  const [count, setCount] = createSignal(0);  return (    <button onClick={() => setCount((prev) => prev + 1)}>{count()}</button>  );};// in app.tsx<Counter />; // ✔️<Counter initial={5} />; // ❌: No 'initial' prop defined<Counter>hi</Counter>; // ❌: Children aren't expected",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.h4,{id:"components-with-props",get children(){return e(n.a,{className:"heading",href:"#components-with-props",children:"Components with props"})}}),`
`,e(n.p,{get children(){return["For components that require the use of props, they can be typed using ",e(n.a,{href:"https://www.typescriptlang.org/docs/handbook/2/generics.html#handbook-content",children:"generics"}),":"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#6F42C1"},children:"InitCounter"})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Component"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<{"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"initial"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"number"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setCount"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"initial"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{()"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"prev"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" prev "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"+"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>{"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"InitCounter"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"initial"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"5"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />;"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"const InitCounter: Component<{ initial: number }> = (props) => {  const [count, setCount] = createSignal(props.initial);  return (    <button onClick={() => setCount((prev) => prev + 1)}>{count()}</button>  );};<InitCounter initial={5} />;",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.h4,{id:"components-with-children",get children(){return e(n.a,{className:"heading",href:"#components-with-children",children:"Components with children"})}}),`
`,e(n.p,{get children(){return[`Often, components may need to accept child elements.
For this, Solid provides `,e(n.code,{children:"ParentComponent"}),", which includes ",e(n.code,{children:"children?"}),` as an optional prop.
If defining a component with the `,e(n.code,{children:"function"})," keyword, ",e(n.code,{children:"ParentProps"})," can be used as a helper for the props:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"ParentComponent"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#6F42C1"},children:"CustomCounter"})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"ParentComponent"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setCount"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{()"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"prev"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" prev "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"+"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"children"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { ParentComponent } from "solid-js";const CustomCounter: ParentComponent = (props) => {  const [count, setCount] = createSignal(0);  return (    <button onClick={() => setCount((prev) => prev + 1)}>      {count()}      {props.children}    </button>  );};',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["In this example, ",e(n.code,{children:"props"})," is inferred to be of the type ",e(n.code,{children:"{children?: JSX.Element }"}),", streamlining the process of defining components that can accept children."]}}),`
`,e(n.h4,{id:"special-component-types",get children(){return e(n.a,{className:"heading",href:"#special-component-types",children:"Special component types"})}}),`
`,e(n.p,{children:"Solid offers subtypes for components dealing uniquely with children:"}),`
`,e(n.ul,{get children(){return[`
`,e(n.li,{get children(){return[e(n.strong,{children:"VoidComponent:"})," When a component should not accept children."]}}),`
`,e(n.li,{get children(){return[e(n.strong,{children:"FlowComponent:"})," Designed for components like ",e(n.a,{href:"/reference/components/show",get children(){return e(n.code,{children:"<Show>"})}})," or ",e(n.a,{href:"/reference/components/for",get children(){return e(n.code,{children:"<For>"})}}),", typically requiring children and, occasionally, specific children types."]}}),`
`]}}),`
`,e(n.p,{children:"These types make sure that the children fit the required type, maintaining consistent component behaviour."}),`
`,e(n.h5,{id:"components-without-the-component-types",get children(){return e(n.a,{className:"heading",href:"#components-without-the-component-types",get children(){return["Components without the ",e(n.code,{children:"Component"})," types"]}})}}),`
`,e(n.p,{get children(){return["Using the ",e(n.code,{children:"Component"}),` types is a matter of preference over a strict requirement.
Any function that takes props and returns a JSX.Element qualifies as a valid component:`]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// arrow function"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#6F42C1"},children:"MyComponent"}),e(n.span,{style:{"--0":"#24292E"},children:" "})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"MyProps"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:")"}),e(n.span,{style:{"--0":"#C62C2C"},children:":"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Element"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"..."}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// function declaration"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"MyComponent"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"MyProps"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:")"}),e(n.span,{style:{"--0":"#C62C2C"},children:":"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Element"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"..."}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// component which takes no props"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"MyComponent"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:"()"}),e(n.span,{style:{"--0":"#C62C2C"},children:":"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Element"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"..."}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"// arrow functionconst MyComponent = (props: MyProps): JSX.Element => { ... }// function declarationfunction MyComponent(props: MyProps): JSX.Element { ... }// component which takes no propsfunction MyComponent(): JSX.Element { ... }",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["It is worth noting that the ",e(n.code,{children:"Component"})," types ",e(n.strong,{children:"cannot be used to create generic components"}),`.
Instead, the generics will have to be typed explicitly:`]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// For arrow functions, the syntax <T> by itself is invalid in TSX because it could be confused with JSX."})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#6F42C1"},children:"MyGenericComponent"}),e(n.span,{style:{"--0":"#24292E"},children:" "})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"T"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"extends"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"unknown"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"MyProps"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"T"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:")"}),e(n.span,{style:{"--0":"#C62C2C"},children:":"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Element"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"/* ... */"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Using a function declaration for a generic component"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"MyGenericComponent"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"T"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"MyProps"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"T"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:">)"}),e(n.span,{style:{"--0":"#C62C2C"},children:":"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Element"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"/* ... */"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"// For arrow functions, the syntax <T> by itself is invalid in TSX because it could be confused with JSX.const MyGenericComponent = <T extends unknown>(  props: MyProps<T>): JSX.Element => {  /* ... */};// Using a function declaration for a generic componentfunction MyGenericComponent<T>(props: MyProps<T>): JSX.Element {  /* ... */}",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(i,{get children(){return e(n.p,{get children(){return["Each ",e(n.code,{children:"Component"})," type has a corresponding ",e(n.code,{children:"Props"}),` type that defines the shape
of its properties. These `,e(n.code,{children:"Props"}),` types also accept the same generic types as
their associated `,e(n.code,{children:"Component"})," types."]}})}}),`
`,e(n.h3,{id:"event-handling",get children(){return e(n.a,{className:"heading",href:"#event-handling",children:"Event handling"})}}),`
`,e(n.h4,{id:"basics",get children(){return e(n.a,{className:"heading",href:"#basics",children:"Basics"})}}),`
`,e(n.p,{get children(){return["In Solid, the type for event handlers is specified as ",e(n.code,{children:"JSX.EventHandler<TElement, TEvent>"}),`.
Here, `,e(n.code,{children:"TElement"}),` refers to the type of the element the event is linked to.
`,e(n.code,{children:"TEvent"})," will indicate the type of the event itself which can serve as an alternative to ",e(n.code,{children:"(event: TEvent) => void"}),` in the code.
This approach guarantees accurate typing for `,e(n.code,{children:"currentTarget"})," and ",e(n.code,{children:"target"})," within the event object while also eliminating the need for inline event handlers."]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"type"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Defining an event handler using the `EventHandler` type:"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#6F42C1"},children:"onInput"})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"EventHandler"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"HTMLInputElement"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"InputEvent"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"event"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"Input changed to"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"event"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"currentTarget"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"value"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Then attach handler to an input element:"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:";"}),e(n.span,{style:{"--0":"#C62C2C"},children:"<"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"input onInput"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"onInput"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"/>"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import type { JSX } from "solid-js"// Defining an event handler using the `EventHandler` type:const onInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {  console.log("Input changed to", event.currentTarget.value)}// Then attach handler to an input element:;<input onInput={onInput} />',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.h4,{id:"inline-handlers",get children(){return e(n.a,{className:"heading",href:"#inline-handlers",children:"Inline handlers"})}}),`
`,e(n.p,{children:"Defining an event handler inline within a JSX attribute automatically provides type inference and checking, eliminating the need for additional typing efforts:"}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"input"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onInput"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{("})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"event"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"Input changed to"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"event"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"currentTarget"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"value"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"/>"})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'<input  onInput={(event) => {    console.log("Input changed to", event.currentTarget.value);  }}/>',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.h4,{id:"currenttarget-and-target",get children(){return e(n.a,{className:"heading",href:"#currenttarget-and-target",get children(){return[e(n.code,{children:"currentTarget"})," and ",e(n.code,{children:"target"})]}})}}),`
`,e(n.p,{get children(){return["In the context of event delegation, the difference between ",e(n.code,{children:"currentTarget"})," and ",e(n.code,{children:"target"})," is important:"]}}),`
`,e(n.ul,{get children(){return[`
`,e(n.li,{get children(){return[e(n.code,{children:"currentTarget"}),": Represents the DOM element to which the event handler is attached."]}}),`
`,e(n.li,{get children(){return[e(n.code,{children:"target"}),": Any DOM element within the hierarchy of ",e(n.code,{children:"currentTarget"})," that has initiated the event."]}}),`
`]}}),`
`,e(n.p,{get children(){return["In the type signature ",e(n.code,{children:"JSX.EventHandler<T, E>"}),", ",e(n.code,{children:"currentTarget"})," will consistently have the type ",e(n.code,{children:"T"}),`.
However, the type of target could be more generic, potentially any DOM element.
For specific events like `,e(n.code,{children:"Input"})," and ",e(n.code,{children:"Focus"})," that are directly associated with input elements, the target will have the type ",e(n.code,{children:"HTMLInputElement"}),"."]}}),`
`,e(n.h3,{id:"ref-attribute",get children(){return e(n.a,{className:"heading",href:"#ref-attribute",get children(){return[e(n.code,{children:"ref"})," attribute"]}})}}),`
`,e(n.h4,{id:"basics-1",get children(){return e(n.a,{className:"heading",href:"#basics-1",children:"Basics"})}}),`
`,e(n.p,{get children(){return["In an environment without TypeScript, using the ",e(n.code,{children:"ref"})," attribute in Solid ensures that the corresponding DOM element is assigned to the variable after it is rendered:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"let"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" divRef"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"(divRef)"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Outputs: undefined"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"onMount"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"divRef"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Outputs: <div> element"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"ref"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"divRef"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />;"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"let divRef;console.log(divRef); // Outputs: undefinedonMount(() => {  console.log(divRef); // Outputs: <div> element});return <div ref={divRef} />;",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["In a TypeScript environment, particularly with strict ",e(n.code,{children:"null"})," checks enabled, typing these variables can be a challenge."]}}),`
`,e(n.p,{get children(){return["A safe approach in TypeScript is to acknowledge that ",e(n.code,{children:"divRef"})," may initially be ",e(n.code,{children:"undefined"})," and to implement checks when accessing it:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"let"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" divRef"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"HTMLDivElement"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"|"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"undefined"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// This would be flagged as an error during compilation"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"divRef"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"focus"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"onMount"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"if"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"!"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"divRef"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:") "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"divRef"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"focus"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" <"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"ref"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"divRef"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:">"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"...</"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"div"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:">"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"let divRef: HTMLDivElement | undefined// This would be flagged as an error during compilationdivRef.focus()onMount(() => {  if (!divRef) return  divRef.focus()})return <div ref={divRef}>...</div>",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["Within the scope of the ",e(n.code,{children:"onMount"})," function, which runs after rendering, you can use a non-",e(n.code,{children:"null"})," assertion (indicated by the exclamation mark ",e(n.code,{children:"!"}),"):"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"onMount"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"divRef"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"!"}),e(n.span,{style:{"--0":"#6F42C1"},children:"."})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"focus"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"onMount(() => {  divRef!.focus();});",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["Another approach is to bypass ",e(n.code,{children:"null"})," during the assignment phase and then apply a definite assignment assertion within the ",e(n.code,{children:"ref"})," attribute:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"let"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" divRef"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"HTMLDivElement"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Compilation error as expected"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"divRef"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"focus"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"onMount"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"divRef"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"focus"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" <"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"ref"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"divRef"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"!"}),e(n.span,{style:{"--0":"#24292E"},children:"}"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:">"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"...</"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"div"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:">"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"let divRef: HTMLDivElement// Compilation error as expecteddivRef.focus()onMount(() => {  divRef.focus()})return <div ref={divRef!}>...</div>",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["In this case, using ",e(n.code,{children:"divRef!"})," within the ",e(n.code,{children:"ref"})," attribute signals to TypeScript that ",e(n.code,{children:"divRef"})," will receive an assignment after this stage, which is more in line with how Solid works."]}}),`
`,e(i,{get children(){return e(n.p,{get children(){return[`While TypeScript does catch incorrect usage of refs that occur before their
JSX block definition, it currently does not identify undefined variables
within certain nested functions in Solid. Therefore, additional care is needed
when using `,e(n.code,{children:"ref"}),`s in functions such as
`,e(n.a,{href:"/reference/basic-reactivity/create-memo",get children(){return e(n.code,{children:"createMemo"})}}),`,
`,e(n.a,{href:"/reference/secondary-primitives/create-render-effect",get children(){return e(n.code,{children:"createRenderEffect"})}}),`,
and `,e(n.a,{href:"/reference/secondary-primitives/create-computed",get children(){return e(n.code,{children:"createComputed"})}}),"."]}})}}),`
`,e(n.p,{children:`Finally, a riskier approach involves using the definite assignment assertion right at the point of variable initialization.
While this method bypasses TypeScript's assignment checks for that particular variable, it offers a quick but less secure workaround that could lead to runtime errors.`}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"let"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" divRef"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"!:"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"HTMLDivElement"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Permitted by TypeScript but will throw an error at runtime:"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// divRef.focus();"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"onMount"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"divRef"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"focus"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"let divRef!: HTMLDivElement;// Permitted by TypeScript but will throw an error at runtime:// divRef.focus();onMount(() => {  divRef.focus();});",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.h2,{id:"control-flow-based-narrowing",get children(){return e(n.a,{className:"heading",href:"#control-flow-based-narrowing",children:"Control flow-based narrowing"})}}),`
`,e(n.p,{children:"Control flow-based narrowing involves refining the type of a value by using control flow statements."}),`
`,e(n.p,{children:"Consider the following:"}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"user"})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"User"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"|"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"undefined"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"maybeUser"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"user "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"&&"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"user"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">;"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"const user: User | undefined = maybeUser();return <div>{user && user.name}</div>;",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{children:"In Solid, however, accessors cannot be narrowed in a similar way:"}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"user"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"setUser"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"User"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"() "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"&&"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">;"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"//                    ^ Object may be 'undefined'."})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Using `<Show>`:"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"when"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"/* Object is possibly 'undefined' */"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"const [user, setUser] = createSignal<User>();return <div>{user() && user().name}</div>;//                    ^ Object may be 'undefined'.// Using `<Show>`:return (  <div>    <Show when={user()}>      {user().name /* Object is possibly 'undefined' */}    </Show>  </div>);",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{children:"In this case, using optional chaining serves as an good alternative:"}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"?."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">;"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Using `<Show>`:"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"when"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>{("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"nonNullishUser"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"nonNullishUser"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"return <div>{user()?.name}</div>;// Using `<Show>`:return (  <div>    <Show when={user()}>{(nonNullishUser) => nonNullishUser().name}</Show>  </div>);",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["This approach is similar using the keyed option, but offers an accessor to prevent the recreation of children each time the ",e(n.code,{children:"when"})," value changes."]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"keyed"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"when"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"nonNullishUser"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"nonNullishUser"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"return (  <div>    <Show keyed when={user()}>      {(nonNullishUser) => nonNullishUser.name}    </Show>  </div>);",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return[`Note that optional chaining may not always be possible.
For instance, when a `,e(n.code,{children:"UserPanel"})," component exclusively requires a ",e(n.code,{children:"User"})," object:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"UserPanel"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"user"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />;"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"//                        ^ Type 'undefined' is not assignable to type 'User'."})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"return <UserPanel user={user()} />;//                        ^ Type 'undefined' is not assignable to type 'User'.",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["If possible, consider refactoring ",e(n.code,{children:"UserPanel"})," to accept ",e(n.code,{children:"undefined"}),`.
This minimizes the changes required when `,e(n.code,{children:"user"})," goes from ",e(n.code,{children:"undefined"})," to ",e(n.code,{children:"User"}),"."]}}),`
`,e(n.p,{children:"Otherwise, using Show's callback form works:"}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"when"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"nonNullishUser"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"UserPanel"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"user"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"nonNullishUser"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"return (  <Show when={user()}>    {(nonNullishUser) => <UserPanel user={nonNullishUser()} />}  </Show>);",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{children:"Casting can also be a solution so long as the assumption is valid:"}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"() "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"&&"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"() "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"as"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"User"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">;"})]}})}})}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"return <div>{user() && (user() as User).name}</div>;",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return[`It's worth noting that runtime type errors may arise from doing this.
This may happen when passing a type-cast value to a component, which discards information that may be nullish followed by accessing it asynchronously, such as in an event handler or timeout, or in `,e(n.code,{children:"onCleanup"}),"."]}}),`
`,e(n.p,{get children(){return[e(n.code,{children:"<Show>"})," only excludes ",e(n.code,{children:"null"}),", ",e(n.code,{children:"undefined"}),", and ",e(n.code,{children:"false"})," from ",e(n.code,{children:"when"}),` when using the callback form.
If the types in a union need to be differentiated, a memo or computed signal can work as an alternative solution:`]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"type"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"User"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Admin"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"|"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"OtherUser"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"admin"}),e(n.span,{style:{"--0":"#24292E"},children:" "})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createMemo"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"u"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"u"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"&&"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"u"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"type"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"==="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"admin"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"?"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"u"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#1669BB"},children:"undefined"}),e(n.span,{style:{"--0":"#24292E"},children:";"})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"when"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"admin"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>{("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"a"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"AdminPanel"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"user"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"a"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />}</"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">;"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'type User = Admin | OtherUser;const admin = createMemo(() => {  const u = user();  return u && u.type === "admin" ? u : undefined;});return <Show when={admin()}>{(a) => <AdminPanel user={a()} />}</Show>;',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["The following alternative also works when using ",e(n.code,{children:"Show"}),":"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"when"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"u"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"user"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"u"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"&&"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"u"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"type"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"==="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"admin"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"?"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"u"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#1669BB"},children:"undefined"}),e(n.span,{style:{"--0":"#24292E"},children:";"})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"admin"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"AdminPanel"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"user"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"admin"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'<Show  when={(() => {    const u = user();    return u && u.type === "admin" ? u : undefined;  })()}>  {(admin) => <AdminPanel user={admin()} />}</Show>',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.h2,{id:"advanced-jsx-attributes-and-directives",get children(){return e(n.a,{className:"heading",href:"#advanced-jsx-attributes-and-directives",children:"Advanced JSX attributes and directives"})}}),`
`,e(n.h3,{id:"custom-event-handlers",get children(){return e(n.a,{className:"heading",href:"#custom-event-handlers",children:"Custom event handlers"})}}),`
`,e(n.p,{get children(){return["To handle custom events in Solid, you can use the attribute ",e(n.code,{children:"on:___"}),`.
Typing these events requires an extension of Solid's JSX namespace.`]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"class"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"NameEvent"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"extends"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"CustomEvent"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"type"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"Name"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"detail"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"name"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"string"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"constructor"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"name"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"string"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#BABED8"},children:"super"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"Name"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" detail"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"declare"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"module"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"namespace"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"interface"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"CustomEvents"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"Name"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"NameEvent"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Matches `on:Name`"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Usage"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"on"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"Name"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{("})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"event"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"console"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"name is"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"event"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"detail"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name)"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />;"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'class NameEvent extends CustomEvent {  type: "Name";  detail: { name: string };  constructor(name: string) {    super("Name", { detail: { name } });  }}declare module "solid-js" {  namespace JSX {    interface CustomEvents {      Name: NameEvent; // Matches `on:Name`    }  }}// Usage<div on:Name={(event) => console.log("name is", event.detail.name)} />;',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(i,{children:"New in v1.9.0"}),`
`,e(n.p,{get children(){return["It is now possible to use the intersection ",e(n.code,{children:"EventListenerObject & AddEventListenerOptions"})," to provide listener options as follows:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"type"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--1":"#BABED8"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:" "}),e(n.span,{style:{"--0":"#1669BB"},children:"handler"})]}}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"EventHandlerWithOptions"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"HTMLDivElement"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Event"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"  "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"once"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FF9CAC"},children:"true"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"handleEvent"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"event"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"will fire only once"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:"}"}),e(n.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Usage"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"on"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"click"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"handler"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />;"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import type { JSX } from "solid-js"const handler: JSX.EventHandlerWithOptions<HTMLDivElement, Event> =  {  once: true,  handleEvent: (event) => {    console.log("will fire only once");  },}// Usage<div on:click={handler} />;',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(i,{get children(){return[e(n.p,{get children(){return[e(n.strong,{children:"Note"}),`:
By default, using native events like `,e(n.code,{children:"mousemove"})," with the ",e(n.code,{children:"on"})," prefix — for example, ",e(n.code,{children:"<div on:mousemove={e => {}} />"}),` —  will trigger a TypeScript error.
This occurs because these native events are not part of Solid's custom event type definitions.
To solve this, the `,e(n.code,{children:"CustomEvents"})," interface can be extended to include events from the ",e(n.code,{children:"HTMLElementEventMap"}),":"]}}),e(n.p,{children:"To include all native events:"}),e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"declare"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"module"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"namespace"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"interface"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"CustomEvents"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"extends"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"HTMLElementEventMap"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'declare module "solid-js" {  namespace JSX {    interface CustomEvents extends HTMLElementEventMap {}  }}',get children(){return e(n.div,{})}})}})]}})}}),e(n.p,{get children(){return["To include specific native events, you can choose certain events (e.g. ",e(n.code,{children:"mousemove"})," and ",e(n.code,{children:"pointermove"}),"):"]}}),e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"declare"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"module"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"namespace"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"interface"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"CustomEvents"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"      "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"extends"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Pick"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"HTMLElementEventMap"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"mousemove"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"|"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"pointermove"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'declare module "solid-js" {  namespace JSX {    interface CustomEvents      extends Pick<HTMLElementEventMap, "mousemove" | "pointermove"> {}  }}',get children(){return e(n.div,{})}})}})]}})}})]}}),`
`,e(n.h4,{id:"forcing-properties-and-custom-attributes",get children(){return e(n.a,{className:"heading",href:"#forcing-properties-and-custom-attributes",children:"Forcing properties and custom attributes"})}}),`
`,e(n.p,{get children(){return["In Solid, the ",e(n.code,{children:"prop:___"}),` directive allows explicit property setting, which is useful for retaining the original data types like objects or arrays.
`,e(n.code,{children:"attr:___"})," directive allows custom attributes, on the other hand, and it is effective for handling string-based HTML attributes."]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"declare"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"module"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"namespace"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"interface"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"ExplicitProperties"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"count"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"number"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"name"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"string"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"interface"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"ExplicitAttributes"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"count"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"number"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"name"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"string"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Usage"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Input "}),e(n.span,{style:{"--0":"#24292E","--1":"#FFCB6B"},children:"prop"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#F07178"},children:"name"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#FFCB6B"},children:"prop"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"count"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#F07178"},children:"count"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:"()}"}),e(n.span,{style:{"--0":"#C62C2C"},children:"/>"})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"my"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"-"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"web"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"-"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"component "}),e(n.span,{style:{"--0":"#24292E","--1":"#FFCB6B"},children:"attr"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#F07178"},children:"name"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#FFCB6B"},children:"attr"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"count"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#F07178"},children:"count"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#24292E"},children:"()}"}),e(n.span,{style:{"--0":"#C62C2C"},children:"/>"})]}})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'declare module "solid-js" {  namespace JSX {    interface ExplicitProperties {      count: number;      name: string;    }    interface ExplicitAttributes {      count: number;      name: string;    }  }}// Usage<Input prop:name={name()} prop:count={count()}/><my-web-component attr:name={name()} attr:count={count()}/>',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.h4,{id:"custom-directives",get children(){return e(n.a,{className:"heading",href:"#custom-directives",children:"Custom directives"})}}),`
`,e(n.p,{get children(){return["In Solid, custom directives can be applied using the ",e(n.code,{children:"use:___"}),` attribute, which usually accepts a target element and a JSX attribute value.
The traditional `,e(n.code,{children:"Directives"})," interface types these values directly (i.e. the type of ",e(n.code,{children:"value"})," in ",e(n.code,{children:"<div use:foo={value} />"}),`).
However, the newer `,e(n.code,{children:"DirectiveFunctions"})," interface takes a function type and derives the valid types for elements and values from it."]}}),`
`,e(n.p,{children:"There are additional considerations:"}),`
`,e(n.ul,{get children(){return[`
`,e(n.li,{get children(){return[`The directive function always receives a single accessor.
For multiple arguments, the syntax `,e(n.code,{children:"<div use:foo={[a, b]} />"})," is an option, and an accessor to a tuple should be accepted."]}}),`
`,e(n.li,{get children(){return["The same principle holds for boolean directives, as seen in ",e(n.code,{children:"<div use:foo />"}),", and for directives with static values, like ",e(n.code,{children:"<div use:foo={false} />"}),"."]}}),`
`,e(n.li,{get children(){return[e(n.code,{children:"DirectiveFunctions"})," can accept functions that do not strictly meet the type requirements; such cases will be ignored."]}}),`
`]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"model"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"element"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Element"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// directives can be used on any HTML and SVG element"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"value"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Accessor"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Signal"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"string"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">>"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// second param will always be an accessor in case value being reactive"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"field"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setField"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"value"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createRenderEffect"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"element"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"value"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"field"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()))"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"element"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"addEventListener"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"input"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"e"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"value"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"e"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"target"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"as"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"HTMLInputElement"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"value"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setField"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"value"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"declare"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"module"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"namespace"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"interface"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Directives"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"model"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Signal"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"string"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">;"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Corresponds to `use:model`"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Usage"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"let"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" setName"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'""'}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"input"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"type"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"text"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"use"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"model"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"[name"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" setName]"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />;"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'function model(  element: Element, // directives can be used on any HTML and SVG element  value: Accessor<Signal<string>> // second param will always be an accessor in case value being reactive) {  const [field, setField] = value();  createRenderEffect(() => (element.value = field()));  element.addEventListener("input", (e) => {    const value = (e.target as HTMLInputElement).value;    setField(value);  });}declare module "solid-js" {  namespace JSX {    interface Directives {      model: Signal<string>; // Corresponds to `use:model`    }  }}// Usagelet [name, setName] = createSignal("");<input type="text" use:model={[name, setName]} />;',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["In using ",e(n.code,{children:"DirectiveFunctions"}),", there's the ability to check both arguments (if present) by detailing the entire function type:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"model"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"element"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"HTMLInputElement"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"value"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Accessor"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Signal"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"string"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">>)"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"field"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setField"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"value"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createRenderEffect"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"element"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"value"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"field"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()))"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"element"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"addEventListener"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"input"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"e"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setField"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"e"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"target"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"value"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"))"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"element"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Element"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"element"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"let"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" num "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"num"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"++"}),e(n.span,{style:{"--0":"#24292E"},children:";"})]}})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"foo"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"comp"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Element"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"args"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"Accessor"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"string"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"[]"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">)"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// function body"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"declare"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"module"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"  "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"namespace"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"JSX"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",children:"    "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"interface"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"DirectiveFunctions"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"model"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"typeof"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"model"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"log"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"typeof"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"log"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"count"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"typeof"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"count"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"      "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"foo"}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"typeof"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"foo"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"    "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{className:"indent",get children(){return e(n.span,{style:{"--0":"#24292E"},children:"  "})}}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'function model(element: HTMLInputElement, value: Accessor<Signal<string>>) {  const [field, setField] = value();  createRenderEffect(() => (element.value = field()));  element.addEventListener("input", (e) => setField(e.target.value));}function log(element: Element) {  console.log(element);}let num = 0;function count() {  num++;}function foo(comp: Element, args: Accessor<string[]>) {  // function body}declare module "solid-js" {  namespace JSX {    interface DirectiveFunctions {      model: typeof model;      log: typeof log;      count: typeof count;      foo: typeof foo;    }  }}',get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.p,{get children(){return["While the ",e(n.code,{children:"Directives"})," interface can limit the value type passed via JSX attribute to the directive, the ",e(n.code,{children:"DirectiveFunctions"})," interface ensures that both element and value align with the expected types, as shown below:"]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"/* This is correct */"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"input"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"use"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"model"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"''"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"/* These will result in a type error */"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"input"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"use"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"model"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"input"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"use"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"model"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"7"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"use"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"model"}),e(n.span,{style:{"--1":"#89DDFF"},get children(){return[e(n.span,{style:{"--0":"#C62C2C"},children:"="}),e(n.span,{style:{"--0":"#24292E"},children:"{"})]}}),e(n.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"''"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"} />"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"{/* This is correct */}<input use:model={createSignal('')} />{/* These will result in a type error */}<input use:model /><input use:model={7} /><div use:model={createSignal('')} />",get children(){return e(n.div,{})}})}})]}})}}),`
`,e(n.h5,{id:"addressing-import-issues-with-directives",get children(){return e(n.a,{className:"heading",href:"#addressing-import-issues-with-directives",children:"Addressing import issues with directives"})}}),`
`,e(n.p,{children:"If directives are imported from a separate file or module, TypeScript might mistakenly remove the import thinking it is a type."}),`
`,e(n.p,{children:"To prevent this:"}),`
`,e(n.ul,{get children(){return[`
`,e(n.li,{get children(){return["Configure ",e(n.code,{children:"onlyRemoveTypeImports: true"})," in ",e(n.code,{children:"babel-preset-typescript"}),"."]}}),`
`,e(n.li,{get children(){return["When using ",e(n.code,{children:"vite-plugin-solid"}),", set ",e(n.code,{children:"solidPlugin({ typescript: { onlyRemoveTypeImports: true } })"})," in ",e(n.code,{children:"vite.config.ts"}),"."]}}),`
`]}}),`
`,e(n.p,{get children(){return[`Careful management of export type and import type is required.
Including a statement in the importing module ensures TypeScript keeps the directive's import.
`,e(n.a,{href:"https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking",children:"Tree-shaking"})," tools usually omit this code from the final bundle."]}}),`
`,e(n.div,{className:"expressive-code",get children(){return e(n.figure,{className:"frame",get children(){return[e(n.figcaption,{className:"header"}),e(n.pre,{tabIndex:"0",get children(){return e(n.code,{get children(){return[e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"directive"}),e(n.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),e(n.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./directives.js"}),e(n.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"directive "}),e(n.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// prevents TypeScript's tree-shaking"})]}})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",children:`
`})}}),e(n.div,{className:"ec-line",get children(){return e(n.div,{className:"code",get children(){return[e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),e(n.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"use"}),e(n.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:":"}),e(n.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"directive"}),e(n.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}})]}})}}),e(n.div,{className:"copy",get children(){return e(n.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":`import { directive } from "./directives.js"directive // prevents TypeScript's tree-shaking<div use:directive />`,get children(){return e(n.div,{})}})}})]}})}})]}function m(s={}){const{wrapper:n}=Object.assign({},D(),s.components);return n?e(n,E(s,{get children(){return e(F,s)}})):F(s)}function y(s,n){throw new Error("Expected component `"+s+"` to be defined: you likely forgot to import, pass, or provide it.")}export{m as default};