;}",get children(){return n(e.div,{})}})}})]}})]}}),`
`,n(e.p,{children:`A component can be as simple as a single element or as complex as a full page.
They can also be nested within each other to create more intricate applications:`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"App"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"function App() { return (
);}",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h2,{id:"component-trees",get children(){return n(e.a,{className:"heading",href:"#component-trees",children:"Component trees"})}}),`
`,n(e.p,{children:`A web page is displayed by rendering a component tree, which is a hierarchical structure of components.
At the top of the tree is the primary application component, which is the root of the tree.
Child components are nested within the primary component, and those components can have their own child components.
This nesting can continue as needed.`}),`
`,n(e.p,{children:"A simple application may have a component tree that looks like this:"}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"App "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// primary application component"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"└── MyComponent "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// child component"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"App // primary application component└── MyComponent // child component",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{children:`When an application grows, the component tree can become more complex.
For example, a more complex application may have a component tree that looks like this:`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"App"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"├── Header"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"├── Sidebar"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"├── Content"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"│ ├── Post"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"│ │ ├── PostHeader"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"│ │ ├── PostContent"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"│ │ └── PostFooter"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"│ ├── Post"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"│ │ ├── PostHeader"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"│ │ ├── PostContent"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"│ │ └── PostFooter"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"│ └── Post"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"│ ├── ..."})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"└── Footer"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"App├── Header├── Sidebar├── Content│ ├── Post│ │ ├── PostHeader│ │ ├── PostContent│ │ └── PostFooter│ ├── Post│ │ ├── PostHeader│ │ ├── PostContent│ │ └── PostFooter│ └── Post│ ├── ...└── Footer",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{children:`In nesting components, you can create a hierarchy of components that can be reused throughout the application.
This allows for a more modular approach to building applications, as components can be reused in different contexts.`}),`
`,n(e.h2,{id:"component-lifecycles",get children(){return n(e.a,{className:"heading",href:"#component-lifecycles",children:"Component lifecycles"})}}),`
`,n(e.p,{get children(){return[`Components have a lifecycle that defines how they are created, updated, and destroyed.
A Solid component's lifecycle is different from other frameworks, as it is tied to the `,n(e.a,{href:"/concepts/intro-to-reactivity",children:"concept of reactivity"}),"."]}}),`
`,n(e.p,{children:`Where frameworks may re-run components on every state change, a Solid component's lifecycle is tied to its initial run.
What this means is that a Solid component is only run once, when it is first rendered into the DOM.
After that, the component is not re-run, even if the application's state changes.`}),`
`,n(e.p,{children:`When the Solid component renders, it sets up a reactive system that monitors for state changes.
When a state change occurs, the component will update the relevant areas without re-running the entire component.
By bypassing the full component lifecycle on every state change, Solid has a more predictable behavior compared to frameworks that re-run functions on every update.`}),`
`,n(e.p,{children:"Since the component's logic is not continuously visited, getting this setup right is important when working with Solid."}),`
`,n(e.h3,{id:"initialization--configuration",get children(){return n(e.a,{className:"heading",href:"#initialization--configuration",children:"Initialization & configuration"})}}),`
`,n(e.p,{get children(){return[`When a component is first rendered into the DOM, the component function is executed.
This is where you will set up the component's state and side-effects.
This includes setting up `,n(e.a,{href:"/concepts/signals",children:"signals"}),", ",n(e.a,{href:"/concepts/stores",children:"stores"}),", ",n(e.a,{href:"/concepts/effects",children:"effects"}),`, and other reactive elements.
Since the logic in the component function is not continuously visited, it is important to set up the component correctly from the outset.`]}}),`
`,n(e.p,{children:`Each component instance is independent of other instances, meaning that each component has its own state and side-effects.
Through establishing proper dependencies, you can ensure that the component is set up correctly.
This allows for components to be reused in different contexts without affecting each other.`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"())"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"p"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{()"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" prev "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"+"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"function MyComponent() { const [count, setCount] = createSignal(0); console.log(count()); return (
Count: {count()}
);}",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return[`When this component is rendered into the DOM, the function body is executed.
This includes creating the `,n(e.code,{children:"count"})," signal and executing the ",n(e.code,{children:"console.log(count())"})," statement, which will log the current value of ",n(e.code,{children:"count"}),` to the console.
In addition, the component's JSX is returned, which will be rendered into the DOM.`]}}),`
`,n(e.p,{get children(){return["After the component is rendered, the ",n(e.code,{children:"console.log"}),` statement will not be executed again, even if the component's state changes.
However, because the component's JSX is reactive, each press of the button will update the DOM with the new value of `,n(e.code,{children:"count"}),"."]}}),`
`,n(e.p,{children:"In essence, Solid splits the concerns:"}),`
`,n(e.ol,{get children(){return[`
`,n(e.li,{children:"The initial setup logic, which is executed once when the component is rendered."}),`
`,n(e.li,{children:"The reactive logic, which is executed when the component's state changes."}),`
`]}}),`
`,n(e.h3,{id:"conditional-rendering",get children(){return n(e.a,{className:"heading",href:"#conditional-rendering",children:"Conditional rendering"})}}),`
`,n(e.p,{children:`To display different content based on state or other criteria, you can use conditional rendering.
Given that the component function is only executed once, conditional statements must be placed within the return statement.
This design ensures that conditional paths are clear and immediately understood.`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"() "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"5"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"?"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Count limit reached"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:") "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"p"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{()"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" prev "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"+"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"function MyComponent() { const [count, setCount] = createSignal(0); return (
{count() > 5 ? (
Count limit reached
) : ( <>
Count: {count()}
)}
);}",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["This example uses a ",n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator",children:"ternary operator"})," to conditionally render different content based on the value of ",n(e.code,{children:"count"}),`.
When `,n(e.code,{children:"count"})," is greater than 5, the component will display ",n(e.code,{children:'"Count limit reached"'}),`.
Otherwise, it will display the current count with an increment button.`]}}),`
`,n(t,{get children(){return[n(e.p,{get children(){return["To simplify conditional rendering, Solid provides built-in ",n(e.a,{href:"/concepts/control-flow/conditional-rendering",children:"control-flow"})," components like ",n(e.a,{href:"/concepts/control-flow/conditional-rendering#show",get children(){return n(e.code,{children:"Show"})}}),", which create a more readable conditional rendering experience."]}}),n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Show"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"when"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"() "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"5"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"fallback"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{"})]}})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"p"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{()"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" prev"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"+"}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Count limit reached"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"function MyComponent() { const [count, setCount] = createSignal(0) return (
5} fallback={ <>
Count: {count()}
} >
Count limit reached
)}",get children(){return n(e.div,{})}})}})]}})}})]}}),`
`,n(e.h2,{id:"importing-and-exporting",get children(){return n(e.a,{className:"heading",href:"#importing-and-exporting",children:"Importing and exporting"})}}),`
`,n(e.p,{children:`For components to be reusable, they need to be exported from one module and imported into another.
This allows for components to be shared and used where needed.`}),`
`,n(e.h3,{id:"exporting-components",get children(){return n(e.a,{className:"heading",href:"#exporting-components",children:"Exporting components"})}}),`
`,n(e.p,{get children(){return["Once defined, a component can be ",n(e.a,{href:"https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export",children:"exported"}),` to make it available for use in other parts of your application.
There are two ways to export a component: `,n(e.a,{href:"https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#named_exports",children:"named exports"})," and ",n(e.a,{href:"https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#default_exports",children:"default exports"}),"."]}}),`
`,n(e.p,{get children(){return n(e.strong,{children:"Named export:"})}}),`
`,n(e.p,{get children(){return[`Named exports allow for multiple components to be exported from a single file.
To export a component, you must use the `,n(e.code,{children:"export"})," keyword before the function definition or specify the name of the component to export in curly braces (",n(e.code,{children:"{}"}),")."]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" <"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Hello"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"World"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// or"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" <"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Hello"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"World"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"export function MyComponent() { return
Hello World
}// orfunction MyComponent() { return
Hello World
}export { MyComponent }",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return n(e.strong,{children:"Default export:"})}}),`
`,n(e.p,{get children(){return[`Default exports specify a single component to export from a file.
This is done by using the `,n(e.code,{children:"default"})," keyword."]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame has-title",get children(){return[n(e.figcaption,{className:"header",get children(){return n(e.span,{className:"title",children:"MyComponent.ts"})}}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"default"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" <"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#FFCB6B"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Hello"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"World"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"export default function MyComponent() { return
Hello World
}",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h3,{id:"importing-components",get children(){return n(e.a,{className:"heading",href:"#importing-components",children:"Importing components"})}}),`
`,n(e.p,{get children(){return["To use a component in another file or component, it must be ",n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import",children:"imported"}),`.
To import a component, you must specify the path to the file containing the component and the name of the component to import.`]}}),`
`,n(e.p,{get children(){return n(e.strong,{children:"Named import:"})}}),`
`,n(e.p,{get children(){return["When importing a named export, you must specify the name of the component to import in curly braces (",n(e.code,{children:"{}"}),")."]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame has-title",get children(){return[n(e.figcaption,{className:"header",get children(){return n(e.span,{className:"title",children:"App.ts"})}}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./MyComponent"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"App"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { MyComponent } from "./MyComponent";function App() { return (
);}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{children:`This is the preferred way to import components, as it allows for better code readability and maintainability.
Additionally, it allows for multiple components to be imported from the same file.`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame has-title",get children(){return[n(e.figcaption,{className:"header",get children(){return n(e.span,{className:"title",children:"App.ts"})}}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"MyComponent"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"MyOtherComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./MyComponent"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"App"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyOtherComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { MyComponent, MyOtherComponent } from "./MyComponent";function App() { return (
);}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return n(e.strong,{children:"Default import:"})}}),`
`,n(e.p,{children:"To import a default export, you must specify the name of the component to import."}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame has-title",get children(){return[n(e.figcaption,{className:"header",get children(){return n(e.span,{className:"title",children:"App.ts"})}}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" MyComponent "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./MyComponent"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"App"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyComponent"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import MyComponent from "./MyComponent";function App() { return (
);}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h3,{id:"importing-solid-and-its-utilities",get children(){return n(e.a,{className:"heading",href:"#importing-solid-and-its-utilities",children:"Importing Solid and its utilities"})}}),`
`,n(e.p,{children:`To use Solid, you must import the Solid library.
The reactive primitives and utilities are exported from Solid's main module.`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createSignal } from "solid-js";',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{children:"However, some of Solid's utilities are exported from their own modules."}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createStore"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js/store"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createStore } from "solid-js/store";',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{children:"To see a full list of Solid's utilities, the Reference Tab in the sidebar provides the API Documentation."})]}function d(r={}){const{wrapper:e}=Object.assign({},l(),r.components);return e?n(e,s(r,{get children(){return n(i,r)}})):i(r)}function c(r,e){throw new Error("Expected component `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}export{d as default};