{"owner":"solidjs","repo":"solid","hasSkills":true,"totalSkillsCount":10,"totalTokensCount":8464,"categories":["plugin-manifest","cursor-rule"],"hasMcp":false,"mcpConfig":null,"found":["packages/babel-preset-solid/README.md","packages/solid-element/README.md","packages/solid-ssr/README.md","packages/solid/README.md","packages/solid/h/README.md","packages/solid/html/README.md","packages/solid/store/README.md","packages/solid/universal/README.md","packages/solid/web/README.md",".cursorrules (optimize-dry-solid-principles-cursorrules-prompt-f.mdc)"],"skills":{"packages/babel-preset-solid/README.md":"# babel-preset-solid\r\nBabel preset to transform JSX into Solid runtime calls.\r\n\r\n### Install\r\n\r\nVia NPM\r\n\r\n```javascript\r\nnpm install babel-preset-solid --save-dev\r\n```\r\n\r\nor Yarn\r\n\r\n```javascript\r\nyarn add babel-preset-solid --dev\r\n```\r\n\r\n### Usage\r\n\r\nMake or update your .babelrc config file with the preset:\r\n\r\n```javascript\r\n{\r\n \"presets\": [\r\n \"solid\"\r\n ]\r\n}\r\n```\r\n\r\nVia package.json\r\n\r\n```javascript\r\n ...\r\n \"babel\": {\r\n \"presets\": [\r\n \"es2015\",\r\n \"solid\"\r\n ],\r\n \"plugins\": [\r\n ]\r\n },\r\n ...\r\n```\r\n\r\n### Usage for SSR code\r\nWhen need to transform JSX code to be used on the server, pass the following options\r\n\r\n```javascript\r\n{\r\n \"presets\": [\r\n [\"solid\", { \"generate\": \"ssr\", \"hydratable\": true }]\r\n ]\r\n}\r\n```\r\nAnd for the browser build pass the hydratable option as well:\r\n```javascript\r\n{\r\n \"presets\": [\r\n [\"solid\", { \"generate\": \"dom\", \"hydratable\": true }]\r\n ]\r\n}\r\n```\r\n","packages/solid-element/README.md":"# Solid Element\n[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)\n[](https://www.npmjs.com/package/solid-element)\n\n\n\nThis library extends [Solid](https://github.com/solidjs/solid) by adding Custom Web Components and extensions to manage modular behaviors and composition. It uses [Component Register](https://github.com/ryansolid/component-register) to create Web Components and its composed mixin pattern to construct modular reusable behaviors. This allows your code to be available as simple HTML elements for library interop and to leverage Shadow DOM style isolation. Solid already supports binding to Web Components so this fills the gap allowing full modular applications to be built out of nested Web Components. Component Register makes use of the V1 Standards and on top of being compatible with the common webcomponent.js polyfills, has a solution for Polyfilling Shadow DOM CSS using the ShadyCSS Parser from Polymer in a generic framework agnostic way (unlike the ShadyCSS package).\n\n## Example\n\n[See here](./sample.jsx) for an example of a webcomponent created by `solid-element`.\n\n## Installation\n\n```sh\nnpm i solid-element solid-js babel-preset-solid\n```\n\n## Custom Elements\n\nThe simplest way to create a Web Component is to use the `customElement` method.\n\nThe arguments of `customElement` are:\n1) custom element tag (e.g. `'my-component'`)\n2) (optional) Default prop values (e.g. `{someProp: 'one', otherProp: 'two'}`). Props without default values will be ignored by the customElement.\n3) the Solid template function. The arguments of this function are state wrapped props as the first argument, and the underlying element as the 2nd (e.g. `(props, { element }) => { solid code here\n }`)\n\n```jsx\nimport { customElement } from 'solid-element';\n\ncustomElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {\n // ... Solid code\n})\n```\n\nProps get assigned as element properties and hyphenated attributes. This exposes the component that can be used in HTML/JSX as:\n```html\n\n```\n\nThis is all you need to get started with Solid Element.\n\nA shadow DOM is used by default for style isolation. If you want to disable the shadow DOM, you can do it with `noShadowDOM()` like this:\n\n```jsx\nimport { customElement, noShadowDOM } from 'solid-element';\n\ncustomElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {\n noShadowDOM();\n // ... Solid code\n})\n```\n\n## Examples\n\n[Web Component Todos](https://wc-todo.firebaseapp.com/) Simple Todos Comparison\n\n## Hot Module Replacement (new)\n\nSolid Element exposes Component Register's Hot Module Replacement solution for Webpack and Parcel. It does not preserve state, swapping Components that are changed and their descendants. This approach is simple but predictable. It works by indicating the component to be Hot Replaced with the `hot` method in your file.\n\n```js\nimport { customElement, hot } from 'solid-element';\n\nhot(module, 'my-component');\n```\nThis is a new feature that is actively seeking feedback. Read more: [Component Register](https://github.com/ryansolid/component-register#hot-module-replacement-new)\n\nThere is also a webpack loader that handles adding this automatically. Check out [Component Register Loader](https://github.com/ryansolid/component-register-loader)\n\n## withSolid\n\nUnder the hood the customElement method is using Component Register's mixins to create our Custom Element. So this library also provides the way to do so directly if you wish to mixin your own functionality. It all starts by using the register HOC which upgrades your class or method to a WebComponent. It is always the start of the chain.\n\n```jsx\nimport { register } from 'component-register';\n\n/*\nregister(tag, defaultProps)\n*/\nregister('my-component', {someProp: 'one', otherProp: 'two'})((props, options) =>\n // ....\n)\n```\n\nComponent Register exposes a convenient compose method (a reduce right) that makes it easier compose multiple mixins. From there we can use withSolid mixin to basically produce the Component method above. However, now you are able to add more HOC mixins in the middle to add additional behavior in your components.\n\n```jsx\nimport { register, compose } from 'component-register';\nimport { withSolid } from 'solid-element';\n\n/*\nwithSolid\n*/\ncompose(\n register('my-component'),\n withSolid\n)((props, options) =>\n // ....\n)\n```\n","packages/solid-ssr/README.md":"# `solid-ssr`\n\nThis library provides tools to help with SSR. So far it's a simple Static Generator. But will add more tools in the future.\n\n## solid-ssr/static\n\nThis is a simple runner that renders files and writes them to disk. It exports a single export that can be used in either CJS or ESM.\n\n```js\nrenderStatic(\n PAGES.map(p => ({\n entry: pathToServer,\n output: path.join(pathToPublic, `${p}.html`),\n url: `/${p}`\n }))\n);\n```\n\nEach entry expects 3 values:\n* entry: path to the server entry point you will be using to render the page\n* output: path to the location of the html file you wish to write\n* url: the url that will be passed on the faux request object\n\nEntry files should be async functions that return the html string in the form:\n```js\nexport default async function(req) {\n return \"My Page\"\n}\n```\n\n## Examples\n\nLook at the examples to best understand how to use it. Important I make use of conditional export maps here in node. You need the latest version of Node 14 (or latest Node 12 but this example doesn't work in Node 12, sorry).\n\nThere are 4 examples all using the same shared source. It is an isomorphically routed tab navigation using Suspense, Lazy Components, and Data Fetching. They are just compiled differently and have slightly different server entry points.\n\n1. ssr\n\nUses standard synchronous SSR. Renders what it can synchronously on the server and hydrates top level in the client. Async data is fetched and rendered in the client without hydration.\n\n2. stream\n\nSimilar to `ssr` except using streams. Data is loaded on the server and sent along the stream so the client can render it. Again, only initial HTML is hydrated. Slightly speeds up data loading, so total page load time is reduced.\n\n3. async\n\nResolves everything reactively on server before sending HTML and serialized data to the client. Whole page is hydrated, but all loading states are avoided. Total load time is similar to streaming, but time to first paint is blocked by how long it takes to load data.\n\n4. ssg\nUsing async compiler configuration to statically generate pages. Removes the time it takes to render real time.\n\nExamples run on http://localhost:8080/. To run them (in this case ssr):\n```\nlerna run build:example:ssr --stream\nlerna run start:example:ssr --stream\n```\n\n|folder/example name|ssr|async|stream|ssg|\n|--- |--- |--- |--- |--- |\n|Parallels|[JAMStack](\"https://jamstack.org/what-is-jamstack/\")|Next/Nuxt/Sveltekit|[Marko streaming](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/)|Static site generators|\n|When is the data queried?|Client|Server, at request time|Server, at request time|Server, at build-time|\n|Render strategy|Elements outside the suspense boundary are rendered on the server and sent initially, then hydrated on the client. Everything that depends on data is in the bundle and rendered client-side|All necessary nodes are rendered on the server, then hydrated on the client. Data is serialized, sent along with the page, and reused on the client as necessary.|The page is rendered with placeholders for elements that depend on data. These are replaced with the correct nodes as more of the stream loads.|Same as async, but the rendering is done ahead of time|\n|Loading indicators / suspense fallbacks|Top-level suspense fallback (the _Loading…_ span) is sent as part of the HTML. The _Loading Info…_ span is part of the Profile component, in the bundle.|None. The suspense fallback never gets shown because the suspense is resolved in the server.|Both loading indicators are included in the HTML, along with the scripts that replace them. On a slow connection, the HTML gets to the browser at the same time, and you don’t see any loading indicators.|Same as async|\n|Server-side render function used|renderToString|renderToStringAsync|renderToStream (1.3)|renderToStringAsync|\n","packages/solid/README.md":"
\n \n
\n\n[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)\n[](https://coveralls.io/github/solidjs/solid?branch=main)\n\n[](https://www.npmjs.com/package/solid-js)\n[](https://www.npmjs.com/package/solid-js)\n[](https://discord.com/invite/solidjs)\n[](https://www.reddit.com/r/solidjs/)\n\n**[Website](https://www.solidjs.com/) • [API Docs](https://docs.solidjs.com/) • [Features Tutorial](https://www.solidjs.com/tutorial/introduction_basics) • [Playground](https://playground.solidjs.com/?version=1.3.13#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EogcuPfr2ZCouOAGU0Ac2hqps+YpU6DW09CysrGXoIZlw0WgheAGEGCBdGAAoASn4rXgd4sj5gZhTcLF4yOFxkqNwAXV4AXgcnF3cvKDV0gAZMywT8iELeDEc4eFSm3iymgD4KqprU9JLamYBqXgBGPvCBoVwmBPTcvN4AHhN6XFx43gJiRpUrm-iVXnjEjWYAa0aQUZCCa4SSzU5nfirZaZSTgi76F63CBgga7CCwiBWISicTpGaNebnJZpXj6WblES0Zj0YEAOg8VQAompxsJcAAhfAASREJzAUEIhBUmTRYEkdSAA) • [Discord](https://discord.com/invite/solidjs)**\n\nSolid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun. Check out our [intro video](https://www.youtube.com/watch?v=cELFZQAMdhQ) or read on!\n\n## Key Features\n\n- Fine-grained updates to the real DOM\n- Declarative data: model your state as a system with reactive primitives\n- Render-once mental model: your components are regular JavaScript functions that run once to set up your view\n- Automatic dependency tracking: accessing your reactive state subscribes to it\n- [Small](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f) and [fast](https://krausest.github.io/js-framework-benchmark/current.html)\n- Simple: learn a few powerful concepts that can be reused, combined, and built on top of\n- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering.\n- Naturally debuggable: A `
` is a real div, so you can use your browser's devtools to inspect the rendering\n- [Web component friendly](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) and can author custom elements\n- Isomorphic: render your components on the client and the server\n- Universal: write [custom renderers](https://github.com/solidjs/solid/releases/tag/v1.2.0) to use Solid anywhere\n- A growing community and ecosystem with active core team support\n\n\n\nQuick Start\n\nYou can get started with a simple app by running the following in your terminal:\n\n```sh\n> npx degit solidjs/templates/js my-app\n> cd my-app\n> npm i # or yarn or pnpm\n> npm run dev # or yarn or pnpm\n```\n\nOr for TypeScript:\n\n```sh\n> npx degit solidjs/templates/ts my-app\n> cd my-app\n> npm i # or yarn or pnpm\n> npm run dev # or yarn or pnpm\n```\n\nThis will create a minimal, client-rendered application powered by [Vite](https://vitejs.dev/).\n\nOr you can install the dependencies in your own setup. To use Solid with JSX (_recommended_), run:\n\n```sh\n> npm i -D babel-preset-solid\n> npm i solid-js\n```\n\nThe easiest way to get set up is to add `babel-preset-solid` to your `.babelrc`, babel config for webpack, or rollup configuration:\n\n```js\n\"presets\": [\"solid\"]\n```\n\nFor TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX:\n\n```js\n\"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxImportSource\": \"solid-js\",\n}\n```\n\n\n\n## Why Solid?\n\n### Performant\n\nMeticulously engineered for performance and with half a decade of research behind it, Solid's performance is almost indistinguishable from optimized vanilla JavaScript (See Solid on the [JS Framework Benchmark](https://krausest.github.io/js-framework-benchmark/current.html)). Solid is [small](https://bundlephobia.com/package/solid-js@1.3.15) and completely tree-shakable, and [fast](https://levelup.gitconnected.com/how-we-wrote-the-fastest-javascript-ui-framework-again-db097ddd99b6) when rendering on the server, too. Whether you're writing a fully client-rendered SPA or a server-rendered app, your users see it faster than ever. ([Read more about Solid's performance](https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37) from the library's creator.)\n\n### Powerful\n\nSolid is fully-featured with everything you can expect from a modern framework. Performant state management is built-in with Context and Stores: you don't have to reach for a third party library to manage global state (if you don't want to). With Resources, you can use data loaded from the server like any other piece of state and build a responsive UI for it thanks to Suspense and concurrent rendering. And when you're ready to move to the server, Solid has full SSR and serverless support, with streaming and progressive hydration to get to interactive as quickly as possible. (Check out our full [interactive features walkthrough](https://www.solidjs.com/tutorial/introduction_basics).)\n\n### Pragmatic\n\nDo more with less: use simple, composable primitives without hidden rules and gotchas. In Solid, components are just functions - rendering is determined purely by how your state is used - so you're free to organize your code how you like and you don't have to learn a new rendering system. Solid encourages patterns like declarative code and read-write segregation that help keep your project maintainable, but isn't opinionated enough to get in your way.\n\n### Productive\n\nSolid is built on established tools like JSX and TypeScript and integrates with the Vite ecosystem. Solid's bare-metal, minimal abstractions give you direct access to the DOM, making it easy to use your favorite native JavaScript libraries like D3. And the Solid ecosystem is growing fast, with [custom primitives](https://github.com/solidjs-community/solid-primitives), [component libraries](https://github.com/hope-ui/hope-ui), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels).\n\n\nShow Me!\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\n// A component is just a function that (optionally) accepts properties and returns a DOM node\nconst Counter = props => {\n // Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount()\n const [count, setCount] = createSignal(props.startingCount || 1);\n\n // The increment function calls the setter\n const increment = () => setCount(count() + 1);\n\n console.log(\n \"The body of the function runs once, like you'd expect from calling any other function, so you only ever see this console log once.\"\n );\n\n // JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax\n // The only part of this that will ever rerender is the count() text.\n return (\n \n );\n};\n\n// The render function mounts a component onto your page\nrender(() => , document.getElementById(\"app\"));\n```\n\nSee it in action in our interactive [Playground](https://playground.solidjs.com/?hash=-894962706&version=1.3.13)!\n\nSolid compiles our JSX down to efficient real DOM expressions updates, still using the same reactive primitives (`createSignal`) at runtime but making sure there's as little rerendering as possible. Here's what that looks like in this example:\n\n```js\nimport { render, createComponent, delegateEvents, insert, template } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nconst _tmpl$ = /*#__PURE__*/ template(``, 2);\n\nconst Counter = props => {\n const [count, setCount] = createSignal(props.startingCount || 1);\n const increment = () => setCount(count() + 1);\n\n console.log(\"The body of the function runs once . . .\");\n\n return (() => {\n //_el$ is a real DOM node!\n const _el$ = _tmpl$.cloneNode(true);\n _el$.firstChild;\n\n _el$.$$click = increment;\n\n //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button\n insert(_el$, count, null);\n\n return _el$;\n })();\n};\n\nrender(\n () =>\n createComponent(Counter, {\n startingCount: 2\n }),\n document.getElementById(\"app\")\n);\n\ndelegateEvents([\"click\"]);\n```\n\n\n\n## More\n\nCheck out our official [documentation](https://www.solidjs.com/guide) or browse some [examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md)\n\n## Browser Support\n\nSolidJS Core is committed to supporting the last 2 years of modern browsers including Firefox, Safari, Chrome and Edge (for desktop and mobile devices). We do not support IE or similar sunset browsers. For server environments, we support Node LTS and the latest Deno and Cloudflare Worker runtimes.\n\n\n\n## Community\n\nCome chat with us on [Discord](https://discord.com/invite/solidjs)! Solid's creator and the rest of the core team are active there, and we're always looking for contributions.\n\n### Contributors\n\n\n\n### Open Collective\n\nSupport us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Sponsors\n\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/solid#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","packages/solid/h/README.md":"# Solid HyperScript\n\nThis sub module provides a HyperScript method for Solid. This is useful to use Solid in non-compiled environments or in some environments where you can only use a standard JSX transform. This method can be used as the JSX factory function.\n\nHyperScript function takes a few forms. The 2nd props argument is optional. Children may be passed as either an array to the 2nd/3rd argument or as every argument past the 2nd.\n\n```js\n// create an element with a title attribute\nh(\"button\", { title: \"My button\" }, \"Click Me\")\n\n// create a component with a title prop\nh(Button, { title: \"My button\" }, \"Click Me\")\n\n// create an element with many children\nh(\"div\", { title: \"My button\" }, h(\"span\", \"1\"), h(\"span\", \"2\"), h(\"span\", \"3\"))\n```\n\nThis is the least efficient way to use Solid as it requires a slightly larger runtime that isn't treeshakeable, and cannot leverage anything in the way of analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).\n\n## Example\n\n```js\nimport { render } from \"solid-js/web\";\nimport h from \"solid-js/h\";\nimport { createSignal } from \"solid-js\";\n\nfunction Button(props) {\n return h(\"button.btn-primary\", props)\n}\n\nfunction Counter() {\n const [count, setCount] = createSignal(0);\n const increment = (e) => setCount(c => c + 1);\n\n return h(Button, { type: \"button\", onClick: increment }, count);\n}\n\nrender(Counter, document.getElementById(\"app\"));\n```\n\n## Differences from JSX\n\nThere are a few differences from Solid's JSX that are important to note. They also apply when attempting to use any transformation that would compile to HyperScript.\n\n1. Reactive expression must be manually wrapped in functions to be reactive.\n\n```js\n// jsx\n
{firstName() + lastName()}
\n\n// hyperscript\nh(\"div\", { id: () => props.id }, () => firstName() + lastName())\n```\n\n2. Merging spreads requires using the merge props helper to keep reactivity\n\n```js\n// jsx\n\n\n// hyperscript\nimport { mergeProps } from \"solid-js\"\n\nh(\"div\", mergeProps({ class: selectedClass }, props))\n```\n\n3. Events on components require explicit event in the arguments\n\nSolid's HyperScript automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `` component.\n\n```js\n// good\nh(Button, { onClick: (e) => console.log(\"Hi\")});\n\n// bad\nh(Button, { onClick: () => console.log(\"Hi\")})\n```\n\n4. All refs are callback form\n\nWe can't do the compiled assignment trick so only the callback form is supported.\n\n```js\nlet myEl;\n\nh(div, { ref: (el) => myEl = el });\n```\n\n5. There is a shorthand for static id and classes\n\n```js\nh(\"div#some-id.my-class\")\n```\n\n6. Fragments are just arrays\n\n```js\n[h(\"span\", \"1\"), h(\"span\", \"2\")]\n```\n","packages/solid/html/README.md":"# Solid Tagged Template Literals\n\nThis sub module provides a Tagged Template Literal `html` method for Solid. This is useful to use Solid in non-compiled environments. This method can be used as replacement for JSX.\n\n`html` uses `${}` to escape into JavaScript expressions. Components are closed with ``\n\n```js\n// create an element with a title attribute\nhtml``\n\n// create a component with a title prop\nhtml`<${Button} title=\"My button\">Click me`\n\n// create an element with dynamic attribute and spread\nhtml`
selectedClass()} ...${props} />`\n```\n\nUsing `html` is slightly less efficient than JSX(but more than HyperScript), requires a larger runtime that isn't treeshakeable, and cannot leverage expression analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).\n\n## Example\n\n```js\nimport { render } from \"solid-js/web\";\nimport html from \"solid-js/html\";\nimport { createSignal } from \"solid-js\";\n\nfunction Button(props) {\n return html``;\n}\n\nfunction Counter() {\n const [count, setCount] = createSignal(0);\n const increment = (e) => setCount((c) => c + 1);\n\n return html`<${Button} type=\"button\" onClick=${increment}>${count}`;\n}\n\nrender(Counter, document.getElementById(\"app\"));\n```\n\n## Differences from JSX\n\nThere are a few differences from Solid's JSX that are important to note.\n\n1. Reactive expression must be manually wrapped in functions to be reactive.\n\n```js\n// jsx\n
{firstName() + lastName()}
\n\n// hyperscript\nhtml`
props.id}>${() => firstName() + lastName()}
`\n```\n\n2. Events on components require explicit event in the arguments\n\nSolid's Tagged Template Literals automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `` component.\n\n```js\n// good\nhtml`<${Button} onClick=${(e) => console.log(\"Hi\")} />`;\n\n// bad\nhtml`<${Button} onClick=${() => console.log(\"Hi\")} />`;\n```\n\n4. All refs are callback form\n\nWe can't do the compiled assignment trick so only the callback form is supported.\n\n```js\nlet myEl;\nhtml`
myEl = el} />`;\n```\n\n5. There can be multiple top level elements\n\nNo need for fragments just:\n```js\nhtml`\n
1
\n
2
\n`\n```","packages/solid/store/README.md":"# Solid Store\n\nThis submodules contains the means for handling deeps nested reactivity. It provides 2 main primitives `createStore` and `createMutable` which leverage proxies to create dynamic nested reactive structures.\n\nThis also contains helper methods `produce` and `reconcile` which augment the behavior of the store setter method to allow for localized mutation and data diffing.\n\nFor full documentation, check out the [website](https://docs.solidjs.com).\n\n## Example\n\n```js\nimport { createStore } from \"solid-js/store\";\n\nconst [store, setStore] = createStore({\n user: {\n firstName: \"John\",\n lastName: \"Smith\"\n }\n});\n\n// update store.user.firstName\nsetStore(\"user\", \"firstName\", \"Will\");\n```\n","packages/solid/universal/README.md":"# Solid Universal\n\nThis contains the means to create the runtime for a custom renderer for Solid. This can enable using Solid to render to different platforms like native mobile and desktop, canvas or WebGL, or even the terminal. It relies on custom compilation from `babel-preset-solid` and exporting the result of `createRenderer` at a referenceable location.\n\n## Example\n\n### Babel\n\nTo use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your babelrc as:\n```json\n{\n \"presets\": [\n [\n \"babel-preset-solid\",\n {\n \"moduleName\": \"solid-custom-dom\",\n \"generate\": \"universal\"\n }\n ]\n ]\n}\n```\n\n### Vite\n\nTo use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your vite config as:\n```js\nimport { defineConfig } from 'vite';\nimport solidPlugin from 'vite-plugin-solid';\n\nexport default defineConfig({\n plugins: [solidPlugin({\n solid: {\n moduleName: \"solid-custom-dom\",\n generate: 'universal'\n }\n })]\n});\n```\n\nTo create a custom renderer you must implement certain methods and export (as named exports) the results. You may also want to forward `solid-js` control flow to allow them to be auto imported as well.\n\n```js\n// example custom dom renderer\nimport { createRenderer } from \"solid-js/universal\";\n\nconst PROPERTIES = new Set([\"className\", \"textContent\"]);\n\nexport const {\n render,\n effect,\n memo,\n createComponent,\n createElement,\n createTextNode,\n insertNode,\n insert,\n spread,\n setProp,\n mergeProps,\n use\n} = createRenderer({\n createElement(string) {\n return document.createElement(string);\n },\n createTextNode(value) {\n return document.createTextNode(value);\n },\n replaceText(textNode, value) {\n textNode.data = value;\n },\n setProperty(node, name, value) {\n if (name === \"style\") Object.assign(node.style, value);\n else if (name.startsWith(\"on\")) node[name.toLowerCase()] = value;\n else if (PROPERTIES.has(name)) node[name] = value;\n else node.setAttribute(name, value);\n },\n insertNode(parent, node, anchor) {\n parent.insertBefore(node, anchor);\n },\n isTextNode(node) {\n return node.type === 3;\n },\n removeNode(parent, node) {\n parent.removeChild(node);\n },\n getParentNode(node) {\n return node.parentNode;\n },\n getFirstChild(node) {\n return node.firstChild;\n },\n getNextSibling(node) {\n return node.nextSibling;\n }\n});\n\n// Forward Solid control flow\nexport {\n For,\n Show,\n Suspense,\n SuspenseList,\n Switch,\n Match,\n Index,\n ErrorBoundary\n} from \"solid-js\";\n```\n\nThen to consume:\n```js\nimport { render } from \"solid-custom-dom\";\n\nfunction App() {\n // the skies the limits\n}\n\nrender(() => , mountNode)\n```\n\n> Note: For TypeScript support of non-standard JSX you will need to provide your own types at a jsx-runtime entry on your package so that it can be set as the `jsxImportSource`. If mixing and matching different JSX implementations you will need use the per file pragmas.\n","packages/solid/web/README.md":"# Solid Web\n\nThis submodule contains the web specific APIs for Solid that are mostly internal methods imported during compilation. It has all the code to render for the web on the server and the browser.\n\nIn addition this modules provides the primary entry point methods `render`, `hydrate`, `renderToString`, `renderToStringAsync`, `pipeToNodeWritable`, and `pipeToWritable`. As well as a few web specific control flow components `` and ``.\n\nRefer to the [website](https://docs.solidjs.com) for documentation.\n",".cursorrules (optimize-dry-solid-principles-cursorrules-prompt-f.mdc)":"---\ndescription: \"Cursor rules for optimization development with DRY and SOLID principles integration.\"\nglobs: **/*\nalwaysApply: false\n---\nCommunication and Problem-Solving:\n\nCode Quality and Best Practices:\n\nParadigms and Principles:\n\nSemantic Naming and Abstractions:\n\nPlatform Thinking:\n\nResponse Format:\n\nHandling Uncertainty and Limitations:\n\nWhen outputting code blocks, include a # or // file name comment prior to the block, with a few lines before and after the modification. This helps the user identify where to make changes.\n\nStick to the current architecture choices located in pyproject.toml unless the user suggests a new method or module.\n\nIf you need clarification on any part of the task, ask for more information before proceeding with the implementation.\n"},"files":{"packages/babel-preset-solid/README.md":"# babel-preset-solid\r\nBabel preset to transform JSX into Solid runtime calls.\r\n\r\n### Install\r\n\r\nVia NPM\r\n\r\n```javascript\r\nnpm install babel-preset-solid --save-dev\r\n```\r\n\r\nor Yarn\r\n\r\n```javascript\r\nyarn add babel-preset-solid --dev\r\n```\r\n\r\n### Usage\r\n\r\nMake or update your .babelrc config file with the preset:\r\n\r\n```javascript\r\n{\r\n \"presets\": [\r\n \"solid\"\r\n ]\r\n}\r\n```\r\n\r\nVia package.json\r\n\r\n```javascript\r\n ...\r\n \"babel\": {\r\n \"presets\": [\r\n \"es2015\",\r\n \"solid\"\r\n ],\r\n \"plugins\": [\r\n ]\r\n },\r\n ...\r\n```\r\n\r\n### Usage for SSR code\r\nWhen need to transform JSX code to be used on the server, pass the following options\r\n\r\n```javascript\r\n{\r\n \"presets\": [\r\n [\"solid\", { \"generate\": \"ssr\", \"hydratable\": true }]\r\n ]\r\n}\r\n```\r\nAnd for the browser build pass the hydratable option as well:\r\n```javascript\r\n{\r\n \"presets\": [\r\n [\"solid\", { \"generate\": \"dom\", \"hydratable\": true }]\r\n ]\r\n}\r\n```\r\n","packages/solid-element/README.md":"# Solid Element\n[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)\n[](https://www.npmjs.com/package/solid-element)\n\n\n\nThis library extends [Solid](https://github.com/solidjs/solid) by adding Custom Web Components and extensions to manage modular behaviors and composition. It uses [Component Register](https://github.com/ryansolid/component-register) to create Web Components and its composed mixin pattern to construct modular reusable behaviors. This allows your code to be available as simple HTML elements for library interop and to leverage Shadow DOM style isolation. Solid already supports binding to Web Components so this fills the gap allowing full modular applications to be built out of nested Web Components. Component Register makes use of the V1 Standards and on top of being compatible with the common webcomponent.js polyfills, has a solution for Polyfilling Shadow DOM CSS using the ShadyCSS Parser from Polymer in a generic framework agnostic way (unlike the ShadyCSS package).\n\n## Example\n\n[See here](./sample.jsx) for an example of a webcomponent created by `solid-element`.\n\n## Installation\n\n```sh\nnpm i solid-element solid-js babel-preset-solid\n```\n\n## Custom Elements\n\nThe simplest way to create a Web Component is to use the `customElement` method.\n\nThe arguments of `customElement` are:\n1) custom element tag (e.g. `'my-component'`)\n2) (optional) Default prop values (e.g. `{someProp: 'one', otherProp: 'two'}`). Props without default values will be ignored by the customElement.\n3) the Solid template function. The arguments of this function are state wrapped props as the first argument, and the underlying element as the 2nd (e.g. `(props, { element }) => { solid code here\n }`)\n\n```jsx\nimport { customElement } from 'solid-element';\n\ncustomElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {\n // ... Solid code\n})\n```\n\nProps get assigned as element properties and hyphenated attributes. This exposes the component that can be used in HTML/JSX as:\n```html\n\n```\n\nThis is all you need to get started with Solid Element.\n\nA shadow DOM is used by default for style isolation. If you want to disable the shadow DOM, you can do it with `noShadowDOM()` like this:\n\n```jsx\nimport { customElement, noShadowDOM } from 'solid-element';\n\ncustomElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {\n noShadowDOM();\n // ... Solid code\n})\n```\n\n## Examples\n\n[Web Component Todos](https://wc-todo.firebaseapp.com/) Simple Todos Comparison\n\n## Hot Module Replacement (new)\n\nSolid Element exposes Component Register's Hot Module Replacement solution for Webpack and Parcel. It does not preserve state, swapping Components that are changed and their descendants. This approach is simple but predictable. It works by indicating the component to be Hot Replaced with the `hot` method in your file.\n\n```js\nimport { customElement, hot } from 'solid-element';\n\nhot(module, 'my-component');\n```\nThis is a new feature that is actively seeking feedback. Read more: [Component Register](https://github.com/ryansolid/component-register#hot-module-replacement-new)\n\nThere is also a webpack loader that handles adding this automatically. Check out [Component Register Loader](https://github.com/ryansolid/component-register-loader)\n\n## withSolid\n\nUnder the hood the customElement method is using Component Register's mixins to create our Custom Element. So this library also provides the way to do so directly if you wish to mixin your own functionality. It all starts by using the register HOC which upgrades your class or method to a WebComponent. It is always the start of the chain.\n\n```jsx\nimport { register } from 'component-register';\n\n/*\nregister(tag, defaultProps)\n*/\nregister('my-component', {someProp: 'one', otherProp: 'two'})((props, options) =>\n // ....\n)\n```\n\nComponent Register exposes a convenient compose method (a reduce right) that makes it easier compose multiple mixins. From there we can use withSolid mixin to basically produce the Component method above. However, now you are able to add more HOC mixins in the middle to add additional behavior in your components.\n\n```jsx\nimport { register, compose } from 'component-register';\nimport { withSolid } from 'solid-element';\n\n/*\nwithSolid\n*/\ncompose(\n register('my-component'),\n withSolid\n)((props, options) =>\n // ....\n)\n```\n","packages/solid-ssr/README.md":"# `solid-ssr`\n\nThis library provides tools to help with SSR. So far it's a simple Static Generator. But will add more tools in the future.\n\n## solid-ssr/static\n\nThis is a simple runner that renders files and writes them to disk. It exports a single export that can be used in either CJS or ESM.\n\n```js\nrenderStatic(\n PAGES.map(p => ({\n entry: pathToServer,\n output: path.join(pathToPublic, `${p}.html`),\n url: `/${p}`\n }))\n);\n```\n\nEach entry expects 3 values:\n* entry: path to the server entry point you will be using to render the page\n* output: path to the location of the html file you wish to write\n* url: the url that will be passed on the faux request object\n\nEntry files should be async functions that return the html string in the form:\n```js\nexport default async function(req) {\n return \"My Page\"\n}\n```\n\n## Examples\n\nLook at the examples to best understand how to use it. Important I make use of conditional export maps here in node. You need the latest version of Node 14 (or latest Node 12 but this example doesn't work in Node 12, sorry).\n\nThere are 4 examples all using the same shared source. It is an isomorphically routed tab navigation using Suspense, Lazy Components, and Data Fetching. They are just compiled differently and have slightly different server entry points.\n\n1. ssr\n\nUses standard synchronous SSR. Renders what it can synchronously on the server and hydrates top level in the client. Async data is fetched and rendered in the client without hydration.\n\n2. stream\n\nSimilar to `ssr` except using streams. Data is loaded on the server and sent along the stream so the client can render it. Again, only initial HTML is hydrated. Slightly speeds up data loading, so total page load time is reduced.\n\n3. async\n\nResolves everything reactively on server before sending HTML and serialized data to the client. Whole page is hydrated, but all loading states are avoided. Total load time is similar to streaming, but time to first paint is blocked by how long it takes to load data.\n\n4. ssg\nUsing async compiler configuration to statically generate pages. Removes the time it takes to render real time.\n\nExamples run on http://localhost:8080/. To run them (in this case ssr):\n```\nlerna run build:example:ssr --stream\nlerna run start:example:ssr --stream\n```\n\n|folder/example name|ssr|async|stream|ssg|\n|--- |--- |--- |--- |--- |\n|Parallels|[JAMStack](\"https://jamstack.org/what-is-jamstack/\")|Next/Nuxt/Sveltekit|[Marko streaming](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/)|Static site generators|\n|When is the data queried?|Client|Server, at request time|Server, at request time|Server, at build-time|\n|Render strategy|Elements outside the suspense boundary are rendered on the server and sent initially, then hydrated on the client. Everything that depends on data is in the bundle and rendered client-side|All necessary nodes are rendered on the server, then hydrated on the client. Data is serialized, sent along with the page, and reused on the client as necessary.|The page is rendered with placeholders for elements that depend on data. These are replaced with the correct nodes as more of the stream loads.|Same as async, but the rendering is done ahead of time|\n|Loading indicators / suspense fallbacks|Top-level suspense fallback (the _Loading…_ span) is sent as part of the HTML. The _Loading Info…_ span is part of the Profile component, in the bundle.|None. The suspense fallback never gets shown because the suspense is resolved in the server.|Both loading indicators are included in the HTML, along with the scripts that replace them. On a slow connection, the HTML gets to the browser at the same time, and you don’t see any loading indicators.|Same as async|\n|Server-side render function used|renderToString|renderToStringAsync|renderToStream (1.3)|renderToStringAsync|\n","packages/solid/README.md":"
\n \n
\n\n[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)\n[](https://coveralls.io/github/solidjs/solid?branch=main)\n\n[](https://www.npmjs.com/package/solid-js)\n[](https://www.npmjs.com/package/solid-js)\n[](https://discord.com/invite/solidjs)\n[](https://www.reddit.com/r/solidjs/)\n\n**[Website](https://www.solidjs.com/) • [API Docs](https://docs.solidjs.com/) • [Features Tutorial](https://www.solidjs.com/tutorial/introduction_basics) • [Playground](https://playground.solidjs.com/?version=1.3.13#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EogcuPfr2ZCouOAGU0Ac2hqps+YpU6DW09CysrGXoIZlw0WgheAGEGCBdGAAoASn4rXgd4sj5gZhTcLF4yOFxkqNwAXV4AXgcnF3cvKDV0gAZMywT8iELeDEc4eFSm3iymgD4KqprU9JLamYBqXgBGPvCBoVwmBPTcvN4AHhN6XFx43gJiRpUrm-iVXnjEjWYAa0aQUZCCa4SSzU5nfirZaZSTgi76F63CBgga7CCwiBWISicTpGaNebnJZpXj6WblES0Zj0YEAOg8VQAompxsJcAAhfAASREJzAUEIhBUmTRYEkdSAA) • [Discord](https://discord.com/invite/solidjs)**\n\nSolid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun. Check out our [intro video](https://www.youtube.com/watch?v=cELFZQAMdhQ) or read on!\n\n## Key Features\n\n- Fine-grained updates to the real DOM\n- Declarative data: model your state as a system with reactive primitives\n- Render-once mental model: your components are regular JavaScript functions that run once to set up your view\n- Automatic dependency tracking: accessing your reactive state subscribes to it\n- [Small](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f) and [fast](https://krausest.github.io/js-framework-benchmark/current.html)\n- Simple: learn a few powerful concepts that can be reused, combined, and built on top of\n- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering.\n- Naturally debuggable: A `
` is a real div, so you can use your browser's devtools to inspect the rendering\n- [Web component friendly](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) and can author custom elements\n- Isomorphic: render your components on the client and the server\n- Universal: write [custom renderers](https://github.com/solidjs/solid/releases/tag/v1.2.0) to use Solid anywhere\n- A growing community and ecosystem with active core team support\n\n\n\nQuick Start\n\nYou can get started with a simple app by running the following in your terminal:\n\n```sh\n> npx degit solidjs/templates/js my-app\n> cd my-app\n> npm i # or yarn or pnpm\n> npm run dev # or yarn or pnpm\n```\n\nOr for TypeScript:\n\n```sh\n> npx degit solidjs/templates/ts my-app\n> cd my-app\n> npm i # or yarn or pnpm\n> npm run dev # or yarn or pnpm\n```\n\nThis will create a minimal, client-rendered application powered by [Vite](https://vitejs.dev/).\n\nOr you can install the dependencies in your own setup. To use Solid with JSX (_recommended_), run:\n\n```sh\n> npm i -D babel-preset-solid\n> npm i solid-js\n```\n\nThe easiest way to get set up is to add `babel-preset-solid` to your `.babelrc`, babel config for webpack, or rollup configuration:\n\n```js\n\"presets\": [\"solid\"]\n```\n\nFor TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX:\n\n```js\n\"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxImportSource\": \"solid-js\",\n}\n```\n\n\n\n## Why Solid?\n\n### Performant\n\nMeticulously engineered for performance and with half a decade of research behind it, Solid's performance is almost indistinguishable from optimized vanilla JavaScript (See Solid on the [JS Framework Benchmark](https://krausest.github.io/js-framework-benchmark/current.html)). Solid is [small](https://bundlephobia.com/package/solid-js@1.3.15) and completely tree-shakable, and [fast](https://levelup.gitconnected.com/how-we-wrote-the-fastest-javascript-ui-framework-again-db097ddd99b6) when rendering on the server, too. Whether you're writing a fully client-rendered SPA or a server-rendered app, your users see it faster than ever. ([Read more about Solid's performance](https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37) from the library's creator.)\n\n### Powerful\n\nSolid is fully-featured with everything you can expect from a modern framework. Performant state management is built-in with Context and Stores: you don't have to reach for a third party library to manage global state (if you don't want to). With Resources, you can use data loaded from the server like any other piece of state and build a responsive UI for it thanks to Suspense and concurrent rendering. And when you're ready to move to the server, Solid has full SSR and serverless support, with streaming and progressive hydration to get to interactive as quickly as possible. (Check out our full [interactive features walkthrough](https://www.solidjs.com/tutorial/introduction_basics).)\n\n### Pragmatic\n\nDo more with less: use simple, composable primitives without hidden rules and gotchas. In Solid, components are just functions - rendering is determined purely by how your state is used - so you're free to organize your code how you like and you don't have to learn a new rendering system. Solid encourages patterns like declarative code and read-write segregation that help keep your project maintainable, but isn't opinionated enough to get in your way.\n\n### Productive\n\nSolid is built on established tools like JSX and TypeScript and integrates with the Vite ecosystem. Solid's bare-metal, minimal abstractions give you direct access to the DOM, making it easy to use your favorite native JavaScript libraries like D3. And the Solid ecosystem is growing fast, with [custom primitives](https://github.com/solidjs-community/solid-primitives), [component libraries](https://github.com/hope-ui/hope-ui), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels).\n\n\nShow Me!\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\n// A component is just a function that (optionally) accepts properties and returns a DOM node\nconst Counter = props => {\n // Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount()\n const [count, setCount] = createSignal(props.startingCount || 1);\n\n // The increment function calls the setter\n const increment = () => setCount(count() + 1);\n\n console.log(\n \"The body of the function runs once, like you'd expect from calling any other function, so you only ever see this console log once.\"\n );\n\n // JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax\n // The only part of this that will ever rerender is the count() text.\n return (\n \n );\n};\n\n// The render function mounts a component onto your page\nrender(() => , document.getElementById(\"app\"));\n```\n\nSee it in action in our interactive [Playground](https://playground.solidjs.com/?hash=-894962706&version=1.3.13)!\n\nSolid compiles our JSX down to efficient real DOM expressions updates, still using the same reactive primitives (`createSignal`) at runtime but making sure there's as little rerendering as possible. Here's what that looks like in this example:\n\n```js\nimport { render, createComponent, delegateEvents, insert, template } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nconst _tmpl$ = /*#__PURE__*/ template(``, 2);\n\nconst Counter = props => {\n const [count, setCount] = createSignal(props.startingCount || 1);\n const increment = () => setCount(count() + 1);\n\n console.log(\"The body of the function runs once . . .\");\n\n return (() => {\n //_el$ is a real DOM node!\n const _el$ = _tmpl$.cloneNode(true);\n _el$.firstChild;\n\n _el$.$$click = increment;\n\n //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button\n insert(_el$, count, null);\n\n return _el$;\n })();\n};\n\nrender(\n () =>\n createComponent(Counter, {\n startingCount: 2\n }),\n document.getElementById(\"app\")\n);\n\ndelegateEvents([\"click\"]);\n```\n\n\n\n## More\n\nCheck out our official [documentation](https://www.solidjs.com/guide) or browse some [examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md)\n\n## Browser Support\n\nSolidJS Core is committed to supporting the last 2 years of modern browsers including Firefox, Safari, Chrome and Edge (for desktop and mobile devices). We do not support IE or similar sunset browsers. For server environments, we support Node LTS and the latest Deno and Cloudflare Worker runtimes.\n\n\n\n## Community\n\nCome chat with us on [Discord](https://discord.com/invite/solidjs)! Solid's creator and the rest of the core team are active there, and we're always looking for contributions.\n\n### Contributors\n\n\n\n### Open Collective\n\nSupport us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Sponsors\n\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/solid#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","packages/solid/h/README.md":"# Solid HyperScript\n\nThis sub module provides a HyperScript method for Solid. This is useful to use Solid in non-compiled environments or in some environments where you can only use a standard JSX transform. This method can be used as the JSX factory function.\n\nHyperScript function takes a few forms. The 2nd props argument is optional. Children may be passed as either an array to the 2nd/3rd argument or as every argument past the 2nd.\n\n```js\n// create an element with a title attribute\nh(\"button\", { title: \"My button\" }, \"Click Me\")\n\n// create a component with a title prop\nh(Button, { title: \"My button\" }, \"Click Me\")\n\n// create an element with many children\nh(\"div\", { title: \"My button\" }, h(\"span\", \"1\"), h(\"span\", \"2\"), h(\"span\", \"3\"))\n```\n\nThis is the least efficient way to use Solid as it requires a slightly larger runtime that isn't treeshakeable, and cannot leverage anything in the way of analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).\n\n## Example\n\n```js\nimport { render } from \"solid-js/web\";\nimport h from \"solid-js/h\";\nimport { createSignal } from \"solid-js\";\n\nfunction Button(props) {\n return h(\"button.btn-primary\", props)\n}\n\nfunction Counter() {\n const [count, setCount] = createSignal(0);\n const increment = (e) => setCount(c => c + 1);\n\n return h(Button, { type: \"button\", onClick: increment }, count);\n}\n\nrender(Counter, document.getElementById(\"app\"));\n```\n\n## Differences from JSX\n\nThere are a few differences from Solid's JSX that are important to note. They also apply when attempting to use any transformation that would compile to HyperScript.\n\n1. Reactive expression must be manually wrapped in functions to be reactive.\n\n```js\n// jsx\n
{firstName() + lastName()}
\n\n// hyperscript\nh(\"div\", { id: () => props.id }, () => firstName() + lastName())\n```\n\n2. Merging spreads requires using the merge props helper to keep reactivity\n\n```js\n// jsx\n\n\n// hyperscript\nimport { mergeProps } from \"solid-js\"\n\nh(\"div\", mergeProps({ class: selectedClass }, props))\n```\n\n3. Events on components require explicit event in the arguments\n\nSolid's HyperScript automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `` component.\n\n```js\n// good\nh(Button, { onClick: (e) => console.log(\"Hi\")});\n\n// bad\nh(Button, { onClick: () => console.log(\"Hi\")})\n```\n\n4. All refs are callback form\n\nWe can't do the compiled assignment trick so only the callback form is supported.\n\n```js\nlet myEl;\n\nh(div, { ref: (el) => myEl = el });\n```\n\n5. There is a shorthand for static id and classes\n\n```js\nh(\"div#some-id.my-class\")\n```\n\n6. Fragments are just arrays\n\n```js\n[h(\"span\", \"1\"), h(\"span\", \"2\")]\n```\n","packages/solid/html/README.md":"# Solid Tagged Template Literals\n\nThis sub module provides a Tagged Template Literal `html` method for Solid. This is useful to use Solid in non-compiled environments. This method can be used as replacement for JSX.\n\n`html` uses `${}` to escape into JavaScript expressions. Components are closed with ``\n\n```js\n// create an element with a title attribute\nhtml``\n\n// create a component with a title prop\nhtml`<${Button} title=\"My button\">Click me`\n\n// create an element with dynamic attribute and spread\nhtml`
selectedClass()} ...${props} />`\n```\n\nUsing `html` is slightly less efficient than JSX(but more than HyperScript), requires a larger runtime that isn't treeshakeable, and cannot leverage expression analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).\n\n## Example\n\n```js\nimport { render } from \"solid-js/web\";\nimport html from \"solid-js/html\";\nimport { createSignal } from \"solid-js\";\n\nfunction Button(props) {\n return html``;\n}\n\nfunction Counter() {\n const [count, setCount] = createSignal(0);\n const increment = (e) => setCount((c) => c + 1);\n\n return html`<${Button} type=\"button\" onClick=${increment}>${count}`;\n}\n\nrender(Counter, document.getElementById(\"app\"));\n```\n\n## Differences from JSX\n\nThere are a few differences from Solid's JSX that are important to note.\n\n1. Reactive expression must be manually wrapped in functions to be reactive.\n\n```js\n// jsx\n
{firstName() + lastName()}
\n\n// hyperscript\nhtml`
props.id}>${() => firstName() + lastName()}
`\n```\n\n2. Events on components require explicit event in the arguments\n\nSolid's Tagged Template Literals automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `` component.\n\n```js\n// good\nhtml`<${Button} onClick=${(e) => console.log(\"Hi\")} />`;\n\n// bad\nhtml`<${Button} onClick=${() => console.log(\"Hi\")} />`;\n```\n\n4. All refs are callback form\n\nWe can't do the compiled assignment trick so only the callback form is supported.\n\n```js\nlet myEl;\nhtml`
myEl = el} />`;\n```\n\n5. There can be multiple top level elements\n\nNo need for fragments just:\n```js\nhtml`\n
1
\n
2
\n`\n```","packages/solid/store/README.md":"# Solid Store\n\nThis submodules contains the means for handling deeps nested reactivity. It provides 2 main primitives `createStore` and `createMutable` which leverage proxies to create dynamic nested reactive structures.\n\nThis also contains helper methods `produce` and `reconcile` which augment the behavior of the store setter method to allow for localized mutation and data diffing.\n\nFor full documentation, check out the [website](https://docs.solidjs.com).\n\n## Example\n\n```js\nimport { createStore } from \"solid-js/store\";\n\nconst [store, setStore] = createStore({\n user: {\n firstName: \"John\",\n lastName: \"Smith\"\n }\n});\n\n// update store.user.firstName\nsetStore(\"user\", \"firstName\", \"Will\");\n```\n","packages/solid/universal/README.md":"# Solid Universal\n\nThis contains the means to create the runtime for a custom renderer for Solid. This can enable using Solid to render to different platforms like native mobile and desktop, canvas or WebGL, or even the terminal. It relies on custom compilation from `babel-preset-solid` and exporting the result of `createRenderer` at a referenceable location.\n\n## Example\n\n### Babel\n\nTo use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your babelrc as:\n```json\n{\n \"presets\": [\n [\n \"babel-preset-solid\",\n {\n \"moduleName\": \"solid-custom-dom\",\n \"generate\": \"universal\"\n }\n ]\n ]\n}\n```\n\n### Vite\n\nTo use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your vite config as:\n```js\nimport { defineConfig } from 'vite';\nimport solidPlugin from 'vite-plugin-solid';\n\nexport default defineConfig({\n plugins: [solidPlugin({\n solid: {\n moduleName: \"solid-custom-dom\",\n generate: 'universal'\n }\n })]\n});\n```\n\nTo create a custom renderer you must implement certain methods and export (as named exports) the results. You may also want to forward `solid-js` control flow to allow them to be auto imported as well.\n\n```js\n// example custom dom renderer\nimport { createRenderer } from \"solid-js/universal\";\n\nconst PROPERTIES = new Set([\"className\", \"textContent\"]);\n\nexport const {\n render,\n effect,\n memo,\n createComponent,\n createElement,\n createTextNode,\n insertNode,\n insert,\n spread,\n setProp,\n mergeProps,\n use\n} = createRenderer({\n createElement(string) {\n return document.createElement(string);\n },\n createTextNode(value) {\n return document.createTextNode(value);\n },\n replaceText(textNode, value) {\n textNode.data = value;\n },\n setProperty(node, name, value) {\n if (name === \"style\") Object.assign(node.style, value);\n else if (name.startsWith(\"on\")) node[name.toLowerCase()] = value;\n else if (PROPERTIES.has(name)) node[name] = value;\n else node.setAttribute(name, value);\n },\n insertNode(parent, node, anchor) {\n parent.insertBefore(node, anchor);\n },\n isTextNode(node) {\n return node.type === 3;\n },\n removeNode(parent, node) {\n parent.removeChild(node);\n },\n getParentNode(node) {\n return node.parentNode;\n },\n getFirstChild(node) {\n return node.firstChild;\n },\n getNextSibling(node) {\n return node.nextSibling;\n }\n});\n\n// Forward Solid control flow\nexport {\n For,\n Show,\n Suspense,\n SuspenseList,\n Switch,\n Match,\n Index,\n ErrorBoundary\n} from \"solid-js\";\n```\n\nThen to consume:\n```js\nimport { render } from \"solid-custom-dom\";\n\nfunction App() {\n // the skies the limits\n}\n\nrender(() => , mountNode)\n```\n\n> Note: For TypeScript support of non-standard JSX you will need to provide your own types at a jsx-runtime entry on your package so that it can be set as the `jsxImportSource`. If mixing and matching different JSX implementations you will need use the per file pragmas.\n","packages/solid/web/README.md":"# Solid Web\n\nThis submodule contains the web specific APIs for Solid that are mostly internal methods imported during compilation. It has all the code to render for the web on the server and the browser.\n\nIn addition this modules provides the primary entry point methods `render`, `hydrate`, `renderToString`, `renderToStringAsync`, `pipeToNodeWritable`, and `pipeToWritable`. As well as a few web specific control flow components `` and ``.\n\nRefer to the [website](https://docs.solidjs.com) for documentation.\n",".cursorrules (optimize-dry-solid-principles-cursorrules-prompt-f.mdc)":"---\ndescription: \"Cursor rules for optimization development with DRY and SOLID principles integration.\"\nglobs: **/*\nalwaysApply: false\n---\nCommunication and Problem-Solving:\n\nCode Quality and Best Practices:\n\nParadigms and Principles:\n\nSemantic Naming and Abstractions:\n\nPlatform Thinking:\n\nResponse Format:\n\nHandling Uncertainty and Limitations:\n\nWhen outputting code blocks, include a # or // file name comment prior to the block, with a few lines before and after the modification. This helps the user identify where to make changes.\n\nStick to the current architecture choices located in pyproject.toml unless the user suggests a new method or module.\n\nIf you need clarification on any part of the task, ask for more information before proceeding with the implementation.\n"},"items":[{"name":"README.md","path":"packages/babel-preset-solid/README.md","rawUrl":"https://raw.githubusercontent.com/solidjs/solid/HEAD/packages/babel-preset-solid/README.md","title":"babel-preset-solid Documentation","category":"plugin-manifest","format":"markdown","content":"# babel-preset-solid\r\nBabel preset to transform JSX into Solid runtime calls.\r\n\r\n### Install\r\n\r\nVia NPM\r\n\r\n```javascript\r\nnpm install babel-preset-solid --save-dev\r\n```\r\n\r\nor Yarn\r\n\r\n```javascript\r\nyarn add babel-preset-solid --dev\r\n```\r\n\r\n### Usage\r\n\r\nMake or update your .babelrc config file with the preset:\r\n\r\n```javascript\r\n{\r\n \"presets\": [\r\n \"solid\"\r\n ]\r\n}\r\n```\r\n\r\nVia package.json\r\n\r\n```javascript\r\n ...\r\n \"babel\": {\r\n \"presets\": [\r\n \"es2015\",\r\n \"solid\"\r\n ],\r\n \"plugins\": [\r\n ]\r\n },\r\n ...\r\n```\r\n\r\n### Usage for SSR code\r\nWhen need to transform JSX code to be used on the server, pass the following options\r\n\r\n```javascript\r\n{\r\n \"presets\": [\r\n [\"solid\", { \"generate\": \"ssr\", \"hydratable\": true }]\r\n ]\r\n}\r\n```\r\nAnd for the browser build pass the hydratable option as well:\r\n```javascript\r\n{\r\n \"presets\": [\r\n [\"solid\", { \"generate\": \"dom\", \"hydratable\": true }]\r\n ]\r\n}\r\n```\r\n","isInternal":false,"tokens":242,"sizeBytes":930},{"name":"README.md","path":"packages/solid-element/README.md","rawUrl":"https://raw.githubusercontent.com/solidjs/solid/HEAD/packages/solid-element/README.md","title":"solid-element Documentation","category":"plugin-manifest","format":"markdown","content":"# Solid Element\n[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)\n[](https://www.npmjs.com/package/solid-element)\n\n\n\nThis library extends [Solid](https://github.com/solidjs/solid) by adding Custom Web Components and extensions to manage modular behaviors and composition. It uses [Component Register](https://github.com/ryansolid/component-register) to create Web Components and its composed mixin pattern to construct modular reusable behaviors. This allows your code to be available as simple HTML elements for library interop and to leverage Shadow DOM style isolation. Solid already supports binding to Web Components so this fills the gap allowing full modular applications to be built out of nested Web Components. Component Register makes use of the V1 Standards and on top of being compatible with the common webcomponent.js polyfills, has a solution for Polyfilling Shadow DOM CSS using the ShadyCSS Parser from Polymer in a generic framework agnostic way (unlike the ShadyCSS package).\n\n## Example\n\n[See here](./sample.jsx) for an example of a webcomponent created by `solid-element`.\n\n## Installation\n\n```sh\nnpm i solid-element solid-js babel-preset-solid\n```\n\n## Custom Elements\n\nThe simplest way to create a Web Component is to use the `customElement` method.\n\nThe arguments of `customElement` are:\n1) custom element tag (e.g. `'my-component'`)\n2) (optional) Default prop values (e.g. `{someProp: 'one', otherProp: 'two'}`). Props without default values will be ignored by the customElement.\n3) the Solid template function. The arguments of this function are state wrapped props as the first argument, and the underlying element as the 2nd (e.g. `(props, { element }) => { solid code here\n }`)\n\n```jsx\nimport { customElement } from 'solid-element';\n\ncustomElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {\n // ... Solid code\n})\n```\n\nProps get assigned as element properties and hyphenated attributes. This exposes the component that can be used in HTML/JSX as:\n```html\n\n```\n\nThis is all you need to get started with Solid Element.\n\nA shadow DOM is used by default for style isolation. If you want to disable the shadow DOM, you can do it with `noShadowDOM()` like this:\n\n```jsx\nimport { customElement, noShadowDOM } from 'solid-element';\n\ncustomElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {\n noShadowDOM();\n // ... Solid code\n})\n```\n\n## Examples\n\n[Web Component Todos](https://wc-todo.firebaseapp.com/) Simple Todos Comparison\n\n## Hot Module Replacement (new)\n\nSolid Element exposes Component Register's Hot Module Replacement solution for Webpack and Parcel. It does not preserve state, swapping Components that are changed and their descendants. This approach is simple but predictable. It works by indicating the component to be Hot Replaced with the `hot` method in your file.\n\n```js\nimport { customElement, hot } from 'solid-element';\n\nhot(module, 'my-component');\n```\nThis is a new feature that is actively seeking feedback. Read more: [Component Register](https://github.com/ryansolid/component-register#hot-module-replacement-new)\n\nThere is also a webpack loader that handles adding this automatically. Check out [Component Register Loader](https://github.com/ryansolid/component-register-loader)\n\n## withSolid\n\nUnder the hood the customElement method is using Component Register's mixins to create our Custom Element. So this library also provides the way to do so directly if you wish to mixin your own functionality. It all starts by using the register HOC which upgrades your class or method to a WebComponent. It is always the start of the chain.\n\n```jsx\nimport { register } from 'component-register';\n\n/*\nregister(tag, defaultProps)\n*/\nregister('my-component', {someProp: 'one', otherProp: 'two'})((props, options) =>\n // ....\n)\n```\n\nComponent Register exposes a convenient compose method (a reduce right) that makes it easier compose multiple mixins. From there we can use withSolid mixin to basically produce the Component method above. However, now you are able to add more HOC mixins in the middle to add additional behavior in your components.\n\n```jsx\nimport { register, compose } from 'component-register';\nimport { withSolid } from 'solid-element';\n\n/*\nwithSolid\n*/\ncompose(\n register('my-component'),\n withSolid\n)((props, options) =>\n // ....\n)\n```\n","isInternal":false,"tokens":1076,"sizeBytes":4744},{"name":"README.md","path":"packages/solid-ssr/README.md","rawUrl":"https://raw.githubusercontent.com/solidjs/solid/HEAD/packages/solid-ssr/README.md","title":"solid-ssr Documentation","category":"plugin-manifest","format":"markdown","content":"# `solid-ssr`\n\nThis library provides tools to help with SSR. So far it's a simple Static Generator. But will add more tools in the future.\n\n## solid-ssr/static\n\nThis is a simple runner that renders files and writes them to disk. It exports a single export that can be used in either CJS or ESM.\n\n```js\nrenderStatic(\n PAGES.map(p => ({\n entry: pathToServer,\n output: path.join(pathToPublic, `${p}.html`),\n url: `/${p}`\n }))\n);\n```\n\nEach entry expects 3 values:\n* entry: path to the server entry point you will be using to render the page\n* output: path to the location of the html file you wish to write\n* url: the url that will be passed on the faux request object\n\nEntry files should be async functions that return the html string in the form:\n```js\nexport default async function(req) {\n return \"My Page\"\n}\n```\n\n## Examples\n\nLook at the examples to best understand how to use it. Important I make use of conditional export maps here in node. You need the latest version of Node 14 (or latest Node 12 but this example doesn't work in Node 12, sorry).\n\nThere are 4 examples all using the same shared source. It is an isomorphically routed tab navigation using Suspense, Lazy Components, and Data Fetching. They are just compiled differently and have slightly different server entry points.\n\n1. ssr\n\nUses standard synchronous SSR. Renders what it can synchronously on the server and hydrates top level in the client. Async data is fetched and rendered in the client without hydration.\n\n2. stream\n\nSimilar to `ssr` except using streams. Data is loaded on the server and sent along the stream so the client can render it. Again, only initial HTML is hydrated. Slightly speeds up data loading, so total page load time is reduced.\n\n3. async\n\nResolves everything reactively on server before sending HTML and serialized data to the client. Whole page is hydrated, but all loading states are avoided. Total load time is similar to streaming, but time to first paint is blocked by how long it takes to load data.\n\n4. ssg\nUsing async compiler configuration to statically generate pages. Removes the time it takes to render real time.\n\nExamples run on http://localhost:8080/. To run them (in this case ssr):\n```\nlerna run build:example:ssr --stream\nlerna run start:example:ssr --stream\n```\n\n|folder/example name|ssr|async|stream|ssg|\n|--- |--- |--- |--- |--- |\n|Parallels|[JAMStack](\"https://jamstack.org/what-is-jamstack/\")|Next/Nuxt/Sveltekit|[Marko streaming](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/)|Static site generators|\n|When is the data queried?|Client|Server, at request time|Server, at request time|Server, at build-time|\n|Render strategy|Elements outside the suspense boundary are rendered on the server and sent initially, then hydrated on the client. Everything that depends on data is in the bundle and rendered client-side|All necessary nodes are rendered on the server, then hydrated on the client. Data is serialized, sent along with the page, and reused on the client as necessary.|The page is rendered with placeholders for elements that depend on data. These are replaced with the correct nodes as more of the stream loads.|Same as async, but the rendering is done ahead of time|\n|Loading indicators / suspense fallbacks|Top-level suspense fallback (the _Loading…_ span) is sent as part of the HTML. The _Loading Info…_ span is part of the Profile component, in the bundle.|None. The suspense fallback never gets shown because the suspense is resolved in the server.|Both loading indicators are included in the HTML, along with the scripts that replace them. On a slow connection, the HTML gets to the browser at the same time, and you don’t see any loading indicators.|Same as async|\n|Server-side render function used|renderToString|renderToStringAsync|renderToStream (1.3)|renderToStringAsync|\n","isInternal":false,"tokens":900,"sizeBytes":3902},{"name":"README.md","path":"packages/solid/h/README.md","rawUrl":"https://raw.githubusercontent.com/solidjs/solid/HEAD/packages/solid/h/README.md","title":"h Documentation","category":"plugin-manifest","format":"markdown","content":"# Solid HyperScript\n\nThis sub module provides a HyperScript method for Solid. This is useful to use Solid in non-compiled environments or in some environments where you can only use a standard JSX transform. This method can be used as the JSX factory function.\n\nHyperScript function takes a few forms. The 2nd props argument is optional. Children may be passed as either an array to the 2nd/3rd argument or as every argument past the 2nd.\n\n```js\n// create an element with a title attribute\nh(\"button\", { title: \"My button\" }, \"Click Me\")\n\n// create a component with a title prop\nh(Button, { title: \"My button\" }, \"Click Me\")\n\n// create an element with many children\nh(\"div\", { title: \"My button\" }, h(\"span\", \"1\"), h(\"span\", \"2\"), h(\"span\", \"3\"))\n```\n\nThis is the least efficient way to use Solid as it requires a slightly larger runtime that isn't treeshakeable, and cannot leverage anything in the way of analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).\n\n## Example\n\n```js\nimport { render } from \"solid-js/web\";\nimport h from \"solid-js/h\";\nimport { createSignal } from \"solid-js\";\n\nfunction Button(props) {\n return h(\"button.btn-primary\", props)\n}\n\nfunction Counter() {\n const [count, setCount] = createSignal(0);\n const increment = (e) => setCount(c => c + 1);\n\n return h(Button, { type: \"button\", onClick: increment }, count);\n}\n\nrender(Counter, document.getElementById(\"app\"));\n```\n\n## Differences from JSX\n\nThere are a few differences from Solid's JSX that are important to note. They also apply when attempting to use any transformation that would compile to HyperScript.\n\n1. Reactive expression must be manually wrapped in functions to be reactive.\n\n```js\n// jsx\n
{firstName() + lastName()}
\n\n// hyperscript\nh(\"div\", { id: () => props.id }, () => firstName() + lastName())\n```\n\n2. Merging spreads requires using the merge props helper to keep reactivity\n\n```js\n// jsx\n\n\n// hyperscript\nimport { mergeProps } from \"solid-js\"\n\nh(\"div\", mergeProps({ class: selectedClass }, props))\n```\n\n3. Events on components require explicit event in the arguments\n\nSolid's HyperScript automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `` component.\n\n```js\n// good\nh(Button, { onClick: (e) => console.log(\"Hi\")});\n\n// bad\nh(Button, { onClick: () => console.log(\"Hi\")})\n```\n\n4. All refs are callback form\n\nWe can't do the compiled assignment trick so only the callback form is supported.\n\n```js\nlet myEl;\n\nh(div, { ref: (el) => myEl = el });\n```\n\n5. There is a shorthand for static id and classes\n\n```js\nh(\"div#some-id.my-class\")\n```\n\n6. Fragments are just arrays\n\n```js\n[h(\"span\", \"1\"), h(\"span\", \"2\")]\n```\n","isInternal":false,"tokens":708,"sizeBytes":2847},{"name":"README.md","path":"packages/solid/html/README.md","rawUrl":"https://raw.githubusercontent.com/solidjs/solid/HEAD/packages/solid/html/README.md","title":"html Documentation","category":"plugin-manifest","format":"markdown","content":"# Solid Tagged Template Literals\n\nThis sub module provides a Tagged Template Literal `html` method for Solid. This is useful to use Solid in non-compiled environments. This method can be used as replacement for JSX.\n\n`html` uses `${}` to escape into JavaScript expressions. Components are closed with ``\n\n```js\n// create an element with a title attribute\nhtml``\n\n// create a component with a title prop\nhtml`<${Button} title=\"My button\">Click me`\n\n// create an element with dynamic attribute and spread\nhtml`
selectedClass()} ...${props} />`\n```\n\nUsing `html` is slightly less efficient than JSX(but more than HyperScript), requires a larger runtime that isn't treeshakeable, and cannot leverage expression analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).\n\n## Example\n\n```js\nimport { render } from \"solid-js/web\";\nimport html from \"solid-js/html\";\nimport { createSignal } from \"solid-js\";\n\nfunction Button(props) {\n return html``;\n}\n\nfunction Counter() {\n const [count, setCount] = createSignal(0);\n const increment = (e) => setCount((c) => c + 1);\n\n return html`<${Button} type=\"button\" onClick=${increment}>${count}`;\n}\n\nrender(Counter, document.getElementById(\"app\"));\n```\n\n## Differences from JSX\n\nThere are a few differences from Solid's JSX that are important to note.\n\n1. Reactive expression must be manually wrapped in functions to be reactive.\n\n```js\n// jsx\n
{firstName() + lastName()}
\n\n// hyperscript\nhtml`
props.id}>${() => firstName() + lastName()}
`\n```\n\n2. Events on components require explicit event in the arguments\n\nSolid's Tagged Template Literals automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `` component.\n\n```js\n// good\nhtml`<${Button} onClick=${(e) => console.log(\"Hi\")} />`;\n\n// bad\nhtml`<${Button} onClick=${() => console.log(\"Hi\")} />`;\n```\n\n4. All refs are callback form\n\nWe can't do the compiled assignment trick so only the callback form is supported.\n\n```js\nlet myEl;\nhtml`
myEl = el} />`;\n```\n\n5. There can be multiple top level elements\n\nNo need for fragments just:\n```js\nhtml`\n
\n\n[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)\n[](https://coveralls.io/github/solidjs/solid?branch=main)\n\n[](https://www.npmjs.com/package/solid-js)\n[](https://www.npmjs.com/package/solid-js)\n[](https://discord.com/invite/solidjs)\n[](https://www.reddit.com/r/solidjs/)\n\n**[Website](https://www.solidjs.com/) • [API Docs](https://docs.solidjs.com/) • [Features Tutorial](https://www.solidjs.com/tutorial/introduction_basics) • [Playground](https://playground.solidjs.com/?version=1.3.13#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EogcuPfr2ZCouOAGU0Ac2hqps+YpU6DW09CysrGXoIZlw0WgheAGEGCBdGAAoASn4rXgd4sj5gZhTcLF4yOFxkqNwAXV4AXgcnF3cvKDV0gAZMywT8iELeDEc4eFSm3iymgD4KqprU9JLamYBqXgBGPvCBoVwmBPTcvN4AHhN6XFx43gJiRpUrm-iVXnjEjWYAa0aQUZCCa4SSzU5nfirZaZSTgi76F63CBgga7CCwiBWISicTpGaNebnJZpXj6WblES0Zj0YEAOg8VQAompxsJcAAhfAASREJzAUEIhBUmTRYEkdSAA) • [Discord](https://discord.com/invite/solidjs)**\n\nSolid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun. Check out our [intro video](https://www.youtube.com/watch?v=cELFZQAMdhQ) or read on!\n\n## Key Features\n\n- Fine-grained updates to the real DOM\n- Declarative data: model your state as a system with reactive primitives\n- Render-once mental model: your components are regular JavaScript functions that run once to set up your view\n- Automatic dependency tracking: accessing your reactive state subscribes to it\n- [Small](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f) and [fast](https://krausest.github.io/js-framework-benchmark/current.html)\n- Simple: learn a few powerful concepts that can be reused, combined, and built on top of\n- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering.\n- Naturally debuggable: A `
` is a real div, so you can use your browser's devtools to inspect the rendering\n- [Web component friendly](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) and can author custom elements\n- Isomorphic: render your components on the client and the server\n- Universal: write [custom renderers](https://github.com/solidjs/solid/releases/tag/v1.2.0) to use Solid anywhere\n- A growing community and ecosystem with active core team support\n\n\n\nQuick Start\n\nYou can get started with a simple app by running the following in your terminal:\n\n```sh\n> npx degit solidjs/templates/js my-app\n> cd my-app\n> npm i # or yarn or pnpm\n> npm run dev # or yarn or pnpm\n```\n\nOr for TypeScript:\n\n```sh\n> npx degit solidjs/templates/ts my-app\n> cd my-app\n> npm i # or yarn or pnpm\n> npm run dev # or yarn or pnpm\n```\n\nThis will create a minimal, client-rendered application powered by [Vite](https://vitejs.dev/).\n\nOr you can install the dependencies in your own setup. To use Solid with JSX (_recommended_), run:\n\n```sh\n> npm i -D babel-preset-solid\n> npm i solid-js\n```\n\nThe easiest way to get set up is to add `babel-preset-solid` to your `.babelrc`, babel config for webpack, or rollup configuration:\n\n```js\n\"presets\": [\"solid\"]\n```\n\nFor TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX:\n\n```js\n\"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxImportSource\": \"solid-js\",\n}\n```\n\n\n\n## Why Solid?\n\n### Performant\n\nMeticulously engineered for performance and with half a decade of research behind it, Solid's performance is almost indistinguishable from optimized vanilla JavaScript (See Solid on the [JS Framework Benchmark](https://krausest.github.io/js-framework-benchmark/current.html)). Solid is [small](https://bundlephobia.com/package/solid-js@1.3.15) and completely tree-shakable, and [fast](https://levelup.gitconnected.com/how-we-wrote-the-fastest-javascript-ui-framework-again-db097ddd99b6) when rendering on the server, too. Whether you're writing a fully client-rendered SPA or a server-rendered app, your users see it faster than ever. ([Read more about Solid's performance](https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37) from the library's creator.)\n\n### Powerful\n\nSolid is fully-featured with everything you can expect from a modern framework. Performant state management is built-in with Context and Stores: you don't have to reach for a third party library to manage global state (if you don't want to). With Resources, you can use data loaded from the server like any other piece of state and build a responsive UI for it thanks to Suspense and concurrent rendering. And when you're ready to move to the server, Solid has full SSR and serverless support, with streaming and progressive hydration to get to interactive as quickly as possible. (Check out our full [interactive features walkthrough](https://www.solidjs.com/tutorial/introduction_basics).)\n\n### Pragmatic\n\nDo more with less: use simple, composable primitives without hidden rules and gotchas. In Solid, components are just functions - rendering is determined purely by how your state is used - so you're free to organize your code how you like and you don't have to learn a new rendering system. Solid encourages patterns like declarative code and read-write segregation that help keep your project maintainable, but isn't opinionated enough to get in your way.\n\n### Productive\n\nSolid is built on established tools like JSX and TypeScript and integrates with the Vite ecosystem. Solid's bare-metal, minimal abstractions give you direct access to the DOM, making it easy to use your favorite native JavaScript libraries like D3. And the Solid ecosystem is growing fast, with [custom primitives](https://github.com/solidjs-community/solid-primitives), [component libraries](https://github.com/hope-ui/hope-ui), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels).\n\n\nShow Me!\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\n// A component is just a function that (optionally) accepts properties and returns a DOM node\nconst Counter = props => {\n // Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount()\n const [count, setCount] = createSignal(props.startingCount || 1);\n\n // The increment function calls the setter\n const increment = () => setCount(count() + 1);\n\n console.log(\n \"The body of the function runs once, like you'd expect from calling any other function, so you only ever see this console log once.\"\n );\n\n // JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax\n // The only part of this that will ever rerender is the count() text.\n return (\n \n );\n};\n\n// The render function mounts a component onto your page\nrender(() => , document.getElementById(\"app\"));\n```\n\nSee it in action in our interactive [Playground](https://playground.solidjs.com/?hash=-894962706&version=1.3.13)!\n\nSolid compiles our JSX down to efficient real DOM expressions updates, still using the same reactive primitives (`createSignal`) at runtime but making sure there's as little rerendering as possible. Here's what that looks like in this example:\n\n```js\nimport { render, createComponent, delegateEvents, insert, template } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nconst _tmpl$ = /*#__PURE__*/ template(``, 2);\n\nconst Counter = props => {\n const [count, setCount] = createSignal(props.startingCount || 1);\n const increment = () => setCount(count() + 1);\n\n console.log(\"The body of the function runs once . . .\");\n\n return (() => {\n //_el$ is a real DOM node!\n const _el$ = _tmpl$.cloneNode(true);\n _el$.firstChild;\n\n _el$.$$click = increment;\n\n //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button\n insert(_el$, count, null);\n\n return _el$;\n })();\n};\n\nrender(\n () =>\n createComponent(Counter, {\n startingCount: 2\n }),\n document.getElementById(\"app\")\n);\n\ndelegateEvents([\"click\"]);\n```\n\n\n\n## More\n\nCheck out our official [documentation](https://www.solidjs.com/guide) or browse some [examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md)\n\n## Browser Support\n\nSolidJS Core is committed to supporting the last 2 years of modern browsers including Firefox, Safari, Chrome and Edge (for desktop and mobile devices). We do not support IE or similar sunset browsers. For server environments, we support Node LTS and the latest Deno and Cloudflare Worker runtimes.\n\n\n\n## Community\n\nCome chat with us on [Discord](https://discord.com/invite/solidjs)! Solid's creator and the rest of the core team are active there, and we're always looking for contributions.\n\n### Contributors\n\n\n\n### Open Collective\n\nSupport us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Sponsors\n\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/solid#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","isInternal":false,"tokens":3814,"sizeBytes":14060},{"name":"README.md","path":"packages/solid/store/README.md","rawUrl":"https://raw.githubusercontent.com/solidjs/solid/HEAD/packages/solid/store/README.md","title":"store Documentation","category":"plugin-manifest","format":"markdown","content":"# Solid Store\n\nThis submodules contains the means for handling deeps nested reactivity. It provides 2 main primitives `createStore` and `createMutable` which leverage proxies to create dynamic nested reactive structures.\n\nThis also contains helper methods `produce` and `reconcile` which augment the behavior of the store setter method to allow for localized mutation and data diffing.\n\nFor full documentation, check out the [website](https://docs.solidjs.com).\n\n## Example\n\n```js\nimport { createStore } from \"solid-js/store\";\n\nconst [store, setStore] = createStore({\n user: {\n firstName: \"John\",\n lastName: \"Smith\"\n }\n});\n\n// update store.user.firstName\nsetStore(\"user\", \"firstName\", \"Will\");\n```\n","isInternal":false,"tokens":158,"sizeBytes":706},{"name":"README.md","path":"packages/solid/universal/README.md","rawUrl":"https://raw.githubusercontent.com/solidjs/solid/HEAD/packages/solid/universal/README.md","title":"universal Documentation","category":"plugin-manifest","format":"markdown","content":"# Solid Universal\n\nThis contains the means to create the runtime for a custom renderer for Solid. This can enable using Solid to render to different platforms like native mobile and desktop, canvas or WebGL, or even the terminal. It relies on custom compilation from `babel-preset-solid` and exporting the result of `createRenderer` at a referenceable location.\n\n## Example\n\n### Babel\n\nTo use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your babelrc as:\n```json\n{\n \"presets\": [\n [\n \"babel-preset-solid\",\n {\n \"moduleName\": \"solid-custom-dom\",\n \"generate\": \"universal\"\n }\n ]\n ]\n}\n```\n\n### Vite\n\nTo use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your vite config as:\n```js\nimport { defineConfig } from 'vite';\nimport solidPlugin from 'vite-plugin-solid';\n\nexport default defineConfig({\n plugins: [solidPlugin({\n solid: {\n moduleName: \"solid-custom-dom\",\n generate: 'universal'\n }\n })]\n});\n```\n\nTo create a custom renderer you must implement certain methods and export (as named exports) the results. You may also want to forward `solid-js` control flow to allow them to be auto imported as well.\n\n```js\n// example custom dom renderer\nimport { createRenderer } from \"solid-js/universal\";\n\nconst PROPERTIES = new Set([\"className\", \"textContent\"]);\n\nexport const {\n render,\n effect,\n memo,\n createComponent,\n createElement,\n createTextNode,\n insertNode,\n insert,\n spread,\n setProp,\n mergeProps,\n use\n} = createRenderer({\n createElement(string) {\n return document.createElement(string);\n },\n createTextNode(value) {\n return document.createTextNode(value);\n },\n replaceText(textNode, value) {\n textNode.data = value;\n },\n setProperty(node, name, value) {\n if (name === \"style\") Object.assign(node.style, value);\n else if (name.startsWith(\"on\")) node[name.toLowerCase()] = value;\n else if (PROPERTIES.has(name)) node[name] = value;\n else node.setAttribute(name, value);\n },\n insertNode(parent, node, anchor) {\n parent.insertBefore(node, anchor);\n },\n isTextNode(node) {\n return node.type === 3;\n },\n removeNode(parent, node) {\n parent.removeChild(node);\n },\n getParentNode(node) {\n return node.parentNode;\n },\n getFirstChild(node) {\n return node.firstChild;\n },\n getNextSibling(node) {\n return node.nextSibling;\n }\n});\n\n// Forward Solid control flow\nexport {\n For,\n Show,\n Suspense,\n SuspenseList,\n Switch,\n Match,\n Index,\n ErrorBoundary\n} from \"solid-js\";\n```\n\nThen to consume:\n```js\nimport { render } from \"solid-custom-dom\";\n\nfunction App() {\n // the skies the limits\n}\n\nrender(() => , mountNode)\n```\n\n> Note: For TypeScript support of non-standard JSX you will need to provide your own types at a jsx-runtime entry on your package so that it can be set as the `jsxImportSource`. If mixing and matching different JSX implementations you will need use the per file pragmas.\n","isInternal":false,"tokens":706,"sizeBytes":3002},{"name":"README.md","path":"packages/solid/web/README.md","rawUrl":"https://raw.githubusercontent.com/solidjs/solid/HEAD/packages/solid/web/README.md","title":"web Documentation","category":"plugin-manifest","format":"markdown","content":"# Solid Web\n\nThis submodule contains the web specific APIs for Solid that are mostly internal methods imported during compilation. It has all the code to render for the web on the server and the browser.\n\nIn addition this modules provides the primary entry point methods `render`, `hydrate`, `renderToString`, `renderToStringAsync`, `pipeToNodeWritable`, and `pipeToWritable`. As well as a few web specific control flow components `` and ``.\n\nRefer to the [website](https://docs.solidjs.com) for documentation.\n","isInternal":false,"tokens":111,"sizeBytes":528},{"name":".cursorrules","path":".cursorrules (optimize-dry-solid-principles-cursorrules-prompt-f.mdc)","rawUrl":"https://raw.githubusercontent.com/PatrickJS/awesome-cursorrules/main/rules/optimize-dry-solid-principles-cursorrules-prompt-f.mdc","title":"Awesome Cursorrules: optimize dry solid principles cursorrules prompt f","category":"cursor-rule","format":"markdown","content":"---\ndescription: \"Cursor rules for optimization development with DRY and SOLID principles integration.\"\nglobs: **/*\nalwaysApply: false\n---\nCommunication and Problem-Solving:\n\nCode Quality and Best Practices:\n\nParadigms and Principles:\n\nSemantic Naming and Abstractions:\n\nPlatform Thinking:\n\nResponse Format:\n\nHandling Uncertainty and Limitations:\n\nWhen outputting code blocks, include a # or // file name comment prior to the block, with a few lines before and after the modification. This helps the user identify where to make changes.\n\nStick to the current architecture choices located in pyproject.toml unless the user suggests a new method or module.\n\nIf you need clarification on any part of the task, ask for more information before proceeding with the implementation.\n","tokens":149,"sizeBytes":775}],"systemPromptSnippet":"\n\n# babel-preset-solid\r\nBabel preset to transform JSX into Solid runtime calls.\r\n\r\n### Install\r\n\r\nVia NPM\r\n\r\n```javascript\r\nnpm install babel-preset-solid --save-dev\r\n```\r\n\r\nor Yarn\r\n\r\n```javascript\r\nyarn add babel-preset-solid --dev\r\n```\r\n\r\n### Usage\r\n\r\nMake or update your .babelrc config file with the preset:\r\n\r\n```javascript\r\n{\r\n \"presets\": [\r\n \"solid\"\r\n ]\r\n}\r\n```\r\n\r\nVia package.json\r\n\r\n```javascript\r\n ...\r\n \"babel\": {\r\n \"presets\": [\r\n \"es2015\",\r\n \"solid\"\r\n ],\r\n \"plugins\": [\r\n ]\r\n },\r\n ...\r\n```\r\n\r\n### Usage for SSR code\r\nWhen need to transform JSX code to be used on the server, pass the following options\r\n\r\n```javascript\r\n{\r\n \"presets\": [\r\n [\"solid\", { \"generate\": \"ssr\", \"hydratable\": true }]\r\n ]\r\n}\r\n```\r\nAnd for the browser build pass the hydratable option as well:\r\n```javascript\r\n{\r\n \"presets\": [\r\n [\"solid\", { \"generate\": \"dom\", \"hydratable\": true }]\r\n ]\r\n}\r\n```\n\n\n# Solid Element\n[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)\n[](https://www.npmjs.com/package/solid-element)\n\n\n\nThis library extends [Solid](https://github.com/solidjs/solid) by adding Custom Web Components and extensions to manage modular behaviors and composition. It uses [Component Register](https://github.com/ryansolid/component-register) to create Web Components and its composed mixin pattern to construct modular reusable behaviors. This allows your code to be available as simple HTML elements for library interop and to leverage Shadow DOM style isolation. Solid already supports binding to Web Components so this fills the gap allowing full modular applications to be built out of nested Web Components. Component Register makes use of the V1 Standards and on top of being compatible with the common webcomponent.js polyfills, has a solution for Polyfilling Shadow DOM CSS using the ShadyCSS Parser from Polymer in a generic framework agnostic way (unlike the ShadyCSS package).\n\n## Example\n\n[See here](./sample.jsx) for an example of a webcomponent created by `solid-element`.\n\n## Installation\n\n```sh\nnpm i solid-element solid-js babel-preset-solid\n```\n\n## Custom Elements\n\nThe simplest way to create a Web Component is to use the `customElement` method.\n\nThe arguments of `customElement` are:\n1) custom element tag (e.g. `'my-component'`)\n2) (optional) Default prop values (e.g. `{someProp: 'one', otherProp: 'two'}`). Props without default values will be ignored by the customElement.\n3) the Solid template function. The arguments of this function are state wrapped props as the first argument, and the underlying element as the 2nd (e.g. `(props, { element }) => { solid code here\n }`)\n\n```jsx\nimport { customElement } from 'solid-element';\n\ncustomElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {\n // ... Solid code\n})\n```\n\nProps get assigned as element properties and hyphenated attributes. This exposes the component that can be used in HTML/JSX as:\n```html\n\n```\n\nThis is all you need to get started with Solid Element.\n\nA shadow DOM is used by default for style isolation. If you want to disable the shadow DOM, you can do it with `noShadowDOM()` like this:\n\n```jsx\nimport { customElement, noShadowDOM } from 'solid-element';\n\ncustomElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {\n noShadowDOM();\n // ... Solid code\n})\n```\n\n## Examples\n\n[Web Component Todos](https://wc-todo.firebaseapp.com/) Simple Todos Comparison\n\n## Hot Module Replacement (new)\n\nSolid Element exposes Component Register's Hot Module Replacement solution for Webpack and Parcel. It does not preserve state, swapping Components that are changed and their descendants. This approach is simple but predictable. It works by indicating the component to be Hot Replaced with the `hot` method in your file.\n\n```js\nimport { customElement, hot } from 'solid-element';\n\nhot(module, 'my-component');\n```\nThis is a new feature that is actively seeking feedback. Read more: [Component Register](https://github.com/ryansolid/component-register#hot-module-replacement-new)\n\nThere is also a webpack loader that handles adding this automatically. Check out [Component Register Loader](https://github.com/ryansolid/component-register-loader)\n\n## withSolid\n\nUnder the hood the customElement method is using Component Register's mixins to create our Custom Element. So this library also provides the way to do so directly if you wish to mixin your own functionality. It all starts by using the register HOC which upgrades your class or method to a WebComponent. It is always the start of the chain.\n\n```jsx\nimport { register } from 'component-register';\n\n/*\nregister(tag, defaultProps)\n*/\nregister('my-component', {someProp: 'one', otherProp: 'two'})((props, options) =>\n // ....\n)\n```\n\nComponent Register exposes a convenient compose method (a reduce right) that makes it easier compose multiple mixins. From there we can use withSolid mixin to basically produce the Component method above. However, now you are able to add more HOC mixins in the middle to add additional behavior in your components.\n\n```jsx\nimport { register, compose } from 'component-register';\nimport { withSolid } from 'solid-element';\n\n/*\nwithSolid\n*/\ncompose(\n register('my-component'),\n withSolid\n)((props, options) =>\n // ....\n)\n```\n\n\n# `solid-ssr`\n\nThis library provides tools to help with SSR. So far it's a simple Static Generator. But will add more tools in the future.\n\n## solid-ssr/static\n\nThis is a simple runner that renders files and writes them to disk. It exports a single export that can be used in either CJS or ESM.\n\n```js\nrenderStatic(\n PAGES.map(p => ({\n entry: pathToServer,\n output: path.join(pathToPublic, `${p}.html`),\n url: `/${p}`\n }))\n);\n```\n\nEach entry expects 3 values:\n* entry: path to the server entry point you will be using to render the page\n* output: path to the location of the html file you wish to write\n* url: the url that will be passed on the faux request object\n\nEntry files should be async functions that return the html string in the form:\n```js\nexport default async function(req) {\n return \"My Page\"\n}\n```\n\n## Examples\n\nLook at the examples to best understand how to use it. Important I make use of conditional export maps here in node. You need the latest version of Node 14 (or latest Node 12 but this example doesn't work in Node 12, sorry).\n\nThere are 4 examples all using the same shared source. It is an isomorphically routed tab navigation using Suspense, Lazy Components, and Data Fetching. They are just compiled differently and have slightly different server entry points.\n\n1. ssr\n\nUses standard synchronous SSR. Renders what it can synchronously on the server and hydrates top level in the client. Async data is fetched and rendered in the client without hydration.\n\n2. stream\n\nSimilar to `ssr` except using streams. Data is loaded on the server and sent along the stream so the client can render it. Again, only initial HTML is hydrated. Slightly speeds up data loading, so total page load time is reduced.\n\n3. async\n\nResolves everything reactively on server before sending HTML and serialized data to the client. Whole page is hydrated, but all loading states are avoided. Total load time is similar to streaming, but time to first paint is blocked by how long it takes to load data.\n\n4. ssg\nUsing async compiler configuration to statically generate pages. Removes the time it takes to render real time.\n\nExamples run on http://localhost:8080/. To run them (in this case ssr):\n```\nlerna run build:example:ssr --stream\nlerna run start:example:ssr --stream\n```\n\n|folder/example name|ssr|async|stream|ssg|\n|--- |--- |--- |--- |--- |\n|Parallels|[JAMStack](\"https://jamstack.org/what-is-jamstack/\")|Next/Nuxt/Sveltekit|[Marko streaming](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/)|Static site generators|\n|When is the data queried?|Client|Server, at request time|Server, at request time|Server, at build-time|\n|Render strategy|Elements outside the suspense boundary are rendered on the server and sent initially, then hydrated on the client. Everything that depends on data is in the bundle and rendered client-side|All necessary nodes are rendered on the server, then hydrated on the client. Data is serialized, sent along with the page, and reused on the client as necessary.|The page is rendered with placeholders for elements that depend on data. These are replaced with the correct nodes as more of the stream loads.|Same as async, but the rendering is done ahead of time|\n|Loading indicators / suspense fallbacks|Top-level suspense fallback (the _Loading…_ span) is sent as part of the HTML. The _Loading Info…_ span is part of the Profile component, in the bundle.|None. The suspense fallback never gets shown because the suspense is resolved in the server.|Both loading indicators are included in the HTML, along with the scripts that replace them. On a slow connection, the HTML gets to the browser at the same time, and you don’t see any loading indicators.|Same as async|\n|Server-side render function used|renderToString|renderToStringAsync|renderToStream (1.3)|renderToStringAsync|\n\n\n# Solid HyperScript\n\nThis sub module provides a HyperScript method for Solid. This is useful to use Solid in non-compiled environments or in some environments where you can only use a standard JSX transform. This method can be used as the JSX factory function.\n\nHyperScript function takes a few forms. The 2nd props argument is optional. Children may be passed as either an array to the 2nd/3rd argument or as every argument past the 2nd.\n\n```js\n// create an element with a title attribute\nh(\"button\", { title: \"My button\" }, \"Click Me\")\n\n// create a component with a title prop\nh(Button, { title: \"My button\" }, \"Click Me\")\n\n// create an element with many children\nh(\"div\", { title: \"My button\" }, h(\"span\", \"1\"), h(\"span\", \"2\"), h(\"span\", \"3\"))\n```\n\nThis is the least efficient way to use Solid as it requires a slightly larger runtime that isn't treeshakeable, and cannot leverage anything in the way of analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).\n\n## Example\n\n```js\nimport { render } from \"solid-js/web\";\nimport h from \"solid-js/h\";\nimport { createSignal } from \"solid-js\";\n\nfunction Button(props) {\n return h(\"button.btn-primary\", props)\n}\n\nfunction Counter() {\n const [count, setCount] = createSignal(0);\n const increment = (e) => setCount(c => c + 1);\n\n return h(Button, { type: \"button\", onClick: increment }, count);\n}\n\nrender(Counter, document.getElementById(\"app\"));\n```\n\n## Differences from JSX\n\nThere are a few differences from Solid's JSX that are important to note. They also apply when attempting to use any transformation that would compile to HyperScript.\n\n1. Reactive expression must be manually wrapped in functions to be reactive.\n\n```js\n// jsx\n
{firstName() + lastName()}
\n\n// hyperscript\nh(\"div\", { id: () => props.id }, () => firstName() + lastName())\n```\n\n2. Merging spreads requires using the merge props helper to keep reactivity\n\n```js\n// jsx\n\n\n// hyperscript\nimport { mergeProps } from \"solid-js\"\n\nh(\"div\", mergeProps({ class: selectedClass }, props))\n```\n\n3. Events on components require explicit event in the arguments\n\nSolid's HyperScript automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `` component.\n\n```js\n// good\nh(Button, { onClick: (e) => console.log(\"Hi\")});\n\n// bad\nh(Button, { onClick: () => console.log(\"Hi\")})\n```\n\n4. All refs are callback form\n\nWe can't do the compiled assignment trick so only the callback form is supported.\n\n```js\nlet myEl;\n\nh(div, { ref: (el) => myEl = el });\n```\n\n5. There is a shorthand for static id and classes\n\n```js\nh(\"div#some-id.my-class\")\n```\n\n6. Fragments are just arrays\n\n```js\n[h(\"span\", \"1\"), h(\"span\", \"2\")]\n```\n\n\n# Solid Tagged Template Literals\n\nThis sub module provides a Tagged Template Literal `html` method for Solid. This is useful to use Solid in non-compiled environments. This method can be used as replacement for JSX.\n\n`html` uses `${}` to escape into JavaScript expressions. Components are closed with ``\n\n```js\n// create an element with a title attribute\nhtml``\n\n// create a component with a title prop\nhtml`<${Button} title=\"My button\">Click me`\n\n// create an element with dynamic attribute and spread\nhtml`
selectedClass()} ...${props} />`\n```\n\nUsing `html` is slightly less efficient than JSX(but more than HyperScript), requires a larger runtime that isn't treeshakeable, and cannot leverage expression analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).\n\n## Example\n\n```js\nimport { render } from \"solid-js/web\";\nimport html from \"solid-js/html\";\nimport { createSignal } from \"solid-js\";\n\nfunction Button(props) {\n return html``;\n}\n\nfunction Counter() {\n const [count, setCount] = createSignal(0);\n const increment = (e) => setCount((c) => c + 1);\n\n return html`<${Button} type=\"button\" onClick=${increment}>${count}`;\n}\n\nrender(Counter, document.getElementById(\"app\"));\n```\n\n## Differences from JSX\n\nThere are a few differences from Solid's JSX that are important to note.\n\n1. Reactive expression must be manually wrapped in functions to be reactive.\n\n```js\n// jsx\n
{firstName() + lastName()}
\n\n// hyperscript\nhtml`
props.id}>${() => firstName() + lastName()}
`\n```\n\n2. Events on components require explicit event in the arguments\n\nSolid's Tagged Template Literals automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `` component.\n\n```js\n// good\nhtml`<${Button} onClick=${(e) => console.log(\"Hi\")} />`;\n\n// bad\nhtml`<${Button} onClick=${() => console.log(\"Hi\")} />`;\n```\n\n4. All refs are callback form\n\nWe can't do the compiled assignment trick so only the callback form is supported.\n\n```js\nlet myEl;\nhtml`
myEl = el} />`;\n```\n\n5. There can be multiple top level elements\n\nNo need for fragments just:\n```js\nhtml`\n
1
\n
2
\n`\n```\n\n\n
\n \n
\n\n[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)\n[](https://coveralls.io/github/solidjs/solid?branch=main)\n\n[](https://www.npmjs.com/package/solid-js)\n[](https://www.npmjs.com/package/solid-js)\n[](https://discord.com/invite/solidjs)\n[](https://www.reddit.com/r/solidjs/)\n\n**[Website](https://www.solidjs.com/) • [API Docs](https://docs.solidjs.com/) • [Features Tutorial](https://www.solidjs.com/tutorial/introduction_basics) • [Playground](https://playground.solidjs.com/?version=1.3.13#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EogcuPfr2ZCouOAGU0Ac2hqps+YpU6DW09CysrGXoIZlw0WgheAGEGCBdGAAoASn4rXgd4sj5gZhTcLF4yOFxkqNwAXV4AXgcnF3cvKDV0gAZMywT8iELeDEc4eFSm3iymgD4KqprU9JLamYBqXgBGPvCBoVwmBPTcvN4AHhN6XFx43gJiRpUrm-iVXnjEjWYAa0aQUZCCa4SSzU5nfirZaZSTgi76F63CBgga7CCwiBWISicTpGaNebnJZpXj6WblES0Zj0YEAOg8VQAompxsJcAAhfAASREJzAUEIhBUmTRYEkdSAA) • [Discord](https://discord.com/invite/solidjs)**\n\nSolid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun. Check out our [intro video](https://www.youtube.com/watch?v=cELFZQAMdhQ) or read on!\n\n## Key Features\n\n- Fine-grained updates to the real DOM\n- Declarative data: model your state as a system with reactive primitives\n- Render-once mental model: your components are regular JavaScript functions that run once to set up your view\n- Automatic dependency tracking: accessing your reactive state subscribes to it\n- [Small](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f) and [fast](https://krausest.github.io/js-framework-benchmark/current.html)\n- Simple: learn a few powerful concepts that can be reused, combined, and built on top of\n- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering.\n- Naturally debuggable: A `
` is a real div, so you can use your browser's devtools to inspect the rendering\n- [Web component friendly](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) and can author custom elements\n- Isomorphic: render your components on the client and the server\n- Universal: write [custom renderers](https://github.com/solidjs/solid/releases/tag/v1.2.0) to use Solid anywhere\n- A growing community and ecosystem with active core team support\n\n\n\nQuick Start\n\nYou can get started with a simple app by running the following in your terminal:\n\n```sh\n> npx degit solidjs/templates/js my-app\n> cd my-app\n> npm i # or yarn or pnpm\n> npm run dev # or yarn or pnpm\n```\n\nOr for TypeScript:\n\n```sh\n> npx degit solidjs/templates/ts my-app\n> cd my-app\n> npm i # or yarn or pnpm\n> npm run dev # or yarn or pnpm\n```\n\nThis will create a minimal, client-rendered application powered by [Vite](https://vitejs.dev/).\n\nOr you can install the dependencies in your own setup. To use Solid with JSX (_recommended_), run:\n\n```sh\n> npm i -D babel-preset-solid\n> npm i solid-js\n```\n\nThe easiest way to get set up is to add `babel-preset-solid` to your `.babelrc`, babel config for webpack, or rollup configuration:\n\n```js\n\"presets\": [\"solid\"]\n```\n\nFor TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX:\n\n```js\n\"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxImportSource\": \"solid-js\",\n}\n```\n\n\n\n## Why Solid?\n\n### Performant\n\nMeticulously engineered for performance and with half a decade of research behind it, Solid's performance is almost indistinguishable from optimized vanilla JavaScript (See Solid on the [JS Framework Benchmark](https://krausest.github.io/js-framework-benchmark/current.html)). Solid is [small](https://bundlephobia.com/package/solid-js@1.3.15) and completely tree-shakable, and [fast](https://levelup.gitconnected.com/how-we-wrote-the-fastest-javascript-ui-framework-again-db097ddd99b6) when rendering on the server, too. Whether you're writing a fully client-rendered SPA or a server-rendered app, your users see it faster than ever. ([Read more about Solid's performance](https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37) from the library's creator.)\n\n### Powerful\n\nSolid is fully-featured with everything you can expect from a modern framework. Performant state management is built-in with Context and Stores: you don't have to reach for a third party library to manage global state (if you don't want to). With Resources, you can use data loaded from the server like any other piece of state and build a responsive UI for it thanks to Suspense and concurrent rendering. And when you're ready to move to the server, Solid has full SSR and serverless support, with streaming and progressive hydration to get to interactive as quickly as possible. (Check out our full [interactive features walkthrough](https://www.solidjs.com/tutorial/introduction_basics).)\n\n### Pragmatic\n\nDo more with less: use simple, composable primitives without hidden rules and gotchas. In Solid, components are just functions - rendering is determined purely by how your state is used - so you're free to organize your code how you like and you don't have to learn a new rendering system. Solid encourages patterns like declarative code and read-write segregation that help keep your project maintainable, but isn't opinionated enough to get in your way.\n\n### Productive\n\nSolid is built on established tools like JSX and TypeScript and integrates with the Vite ecosystem. Solid's bare-metal, minimal abstractions give you direct access to the DOM, making it easy to use your favorite native JavaScript libraries like D3. And the Solid ecosystem is growing fast, with [custom primitives](https://github.com/solidjs-community/solid-primitives), [component libraries](https://github.com/hope-ui/hope-ui), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels).\n\n\nShow Me!\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\n// A component is just a function that (optionally) accepts properties and returns a DOM node\nconst Counter = props => {\n // Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount()\n const [count, setCount] = createSignal(props.startingCount || 1);\n\n // The increment function calls the setter\n const increment = () => setCount(count() + 1);\n\n console.log(\n \"The body of the function runs once, like you'd expect from calling any other function, so you only ever see this console log once.\"\n );\n\n // JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax\n // The only part of this that will ever rerender is the count() text.\n return (\n \n );\n};\n\n// The render function mounts a component onto your page\nrender(() => , document.getElementById(\"app\"));\n```\n\nSee it in action in our interactive [Playground](https://playground.solidjs.com/?hash=-894962706&version=1.3.13)!\n\nSolid compiles our JSX down to efficient real DOM expressions updates, still using the same reactive primitives (`createSignal`) at runtime but making sure there's as little rerendering as possible. Here's what that looks like in this example:\n\n```js\nimport { render, createComponent, delegateEvents, insert, template } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nconst _tmpl$ = /*#__PURE__*/ template(``, 2);\n\nconst Counter = props => {\n const [count, setCount] = createSignal(props.startingCount || 1);\n const increment = () => setCount(count() + 1);\n\n console.log(\"The body of the function runs once . . .\");\n\n return (() => {\n //_el$ is a real DOM node!\n const _el$ = _tmpl$.cloneNode(true);\n _el$.firstChild;\n\n _el$.$$click = increment;\n\n //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button\n insert(_el$, count, null);\n\n return _el$;\n })();\n};\n\nrender(\n () =>\n createComponent(Counter, {\n startingCount: 2\n }),\n document.getElementById(\"app\")\n);\n\ndelegateEvents([\"click\"]);\n```\n\n\n\n## More\n\nCheck out our official [documentation](https://www.solidjs.com/guide) or browse some [examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md)\n\n## Browser Support\n\nSolidJS Core is committed to supporting the last 2 years of modern browsers including Firefox, Safari, Chrome and Edge (for desktop and mobile devices). We do not support IE or similar sunset browsers. For server environments, we support Node LTS and the latest Deno and Cloudflare Worker runtimes.\n\n\n\n## Community\n\nCome chat with us on [Discord](https://discord.com/invite/solidjs)! Solid's creator and the rest of the core team are active there, and we're always looking for contributions.\n\n### Contributors\n\n\n\n### Open Collective\n\nSupport us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Sponsors\n\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/solid#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n# Solid Store\n\nThis submodules contains the means for handling deeps nested reactivity. It provides 2 main primitives `createStore` and `createMutable` which leverage proxies to create dynamic nested reactive structures.\n\nThis also contains helper methods `produce` and `reconcile` which augment the behavior of the store setter method to allow for localized mutation and data diffing.\n\nFor full documentation, check out the [website](https://docs.solidjs.com).\n\n## Example\n\n```js\nimport { createStore } from \"solid-js/store\";\n\nconst [store, setStore] = createStore({\n user: {\n firstName: \"John\",\n lastName: \"Smith\"\n }\n});\n\n// update store.user.firstName\nsetStore(\"user\", \"firstName\", \"Will\");\n```\n\n\n# Solid Universal\n\nThis contains the means to create the runtime for a custom renderer for Solid. This can enable using Solid to render to different platforms like native mobile and desktop, canvas or WebGL, or even the terminal. It relies on custom compilation from `babel-preset-solid` and exporting the result of `createRenderer` at a referenceable location.\n\n## Example\n\n### Babel\n\nTo use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your babelrc as:\n```json\n{\n \"presets\": [\n [\n \"babel-preset-solid\",\n {\n \"moduleName\": \"solid-custom-dom\",\n \"generate\": \"universal\"\n }\n ]\n ]\n}\n```\n\n### Vite\n\nTo use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your vite config as:\n```js\nimport { defineConfig } from 'vite';\nimport solidPlugin from 'vite-plugin-solid';\n\nexport default defineConfig({\n plugins: [solidPlugin({\n solid: {\n moduleName: \"solid-custom-dom\",\n generate: 'universal'\n }\n })]\n});\n```\n\nTo create a custom renderer you must implement certain methods and export (as named exports) the results. You may also want to forward `solid-js` control flow to allow them to be auto imported as well.\n\n```js\n// example custom dom renderer\nimport { createRenderer } from \"solid-js/universal\";\n\nconst PROPERTIES = new Set([\"className\", \"textContent\"]);\n\nexport const {\n render,\n effect,\n memo,\n createComponent,\n createElement,\n createTextNode,\n insertNode,\n insert,\n spread,\n setProp,\n mergeProps,\n use\n} = createRenderer({\n createElement(string) {\n return document.createElement(string);\n },\n createTextNode(value) {\n return document.createTextNode(value);\n },\n replaceText(textNode, value) {\n textNode.data = value;\n },\n setProperty(node, name, value) {\n if (name === \"style\") Object.assign(node.style, value);\n else if (name.startsWith(\"on\")) node[name.toLowerCase()] = value;\n else if (PROPERTIES.has(name)) node[name] = value;\n else node.setAttribute(name, value);\n },\n insertNode(parent, node, anchor) {\n parent.insertBefore(node, anchor);\n },\n isTextNode(node) {\n return node.type === 3;\n },\n removeNode(parent, node) {\n parent.removeChild(node);\n },\n getParentNode(node) {\n return node.parentNode;\n },\n getFirstChild(node) {\n return node.firstChild;\n },\n getNextSibling(node) {\n return node.nextSibling;\n }\n});\n\n// Forward Solid control flow\nexport {\n For,\n Show,\n Suspense,\n SuspenseList,\n Switch,\n Match,\n Index,\n ErrorBoundary\n} from \"solid-js\";\n```\n\nThen to consume:\n```js\nimport { render } from \"solid-custom-dom\";\n\nfunction App() {\n // the skies the limits\n}\n\nrender(() => , mountNode)\n```\n\n> Note: For TypeScript support of non-standard JSX you will need to provide your own types at a jsx-runtime entry on your package so that it can be set as the `jsxImportSource`. If mixing and matching different JSX implementations you will need use the per file pragmas.\n\n\n# Solid Web\n\nThis submodule contains the web specific APIs for Solid that are mostly internal methods imported during compilation. It has all the code to render for the web on the server and the browser.\n\nIn addition this modules provides the primary entry point methods `render`, `hydrate`, `renderToString`, `renderToStringAsync`, `pipeToNodeWritable`, and `pipeToWritable`. As well as a few web specific control flow components `` and ``.\n\nRefer to the [website](https://docs.solidjs.com) for documentation.\n\n\n---\ndescription: \"Cursor rules for optimization development with DRY and SOLID principles integration.\"\nglobs: **/*\nalwaysApply: false\n---\nCommunication and Problem-Solving:\n\nCode Quality and Best Practices:\n\nParadigms and Principles:\n\nSemantic Naming and Abstractions:\n\nPlatform Thinking:\n\nResponse Format:\n\nHandling Uncertainty and Limitations:\n\nWhen outputting code blocks, include a # or // file name comment prior to the block, with a few lines before and after the modification. This helps the user identify where to make changes.\n\nStick to the current architecture choices located in pyproject.toml unless the user suggests a new method or module.\n\nIf you need clarification on any part of the task, ask for more information before proceeding with the implementation.\n"}
![\"SolidJS\"](\"https://assets.solidjs.com/banner?project=Library&type=core\")
\n![\"Testing](\"https://saucelabs.github.io/images/opensauce/powered-by-saucelabs-badge-gray.svg?sanitize=true\"){kind=icon}
\n\n## Community\n\nCome chat with us on [Discord](https://discord.com/invite/solidjs)! Solid's creator and the rest of the core team are active there, and we're always looking for contributions.\n\n### Contributors\n\n![](\"https://opencollective.com/solid/backer/0/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/backer/1/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/backer/2/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/backer/3/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/backer/4/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/backer/5/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/backer/6/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/backer/7/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/backer/8/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/backer/9/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/backer/10/avatar.svg\"){kind=avatar}
\n\n### Sponsors\n\nBecome a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/solid#sponsor)]\n\n![](\"https://opencollective.com/solid/sponsor/0/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/1/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/2/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/3/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/4/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/5/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/6/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/7/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/8/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/9/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/10/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/11/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/solid/sponsor/12/avatar.svg\"){kind=avatar}
\n","packages/solid/h/README.md":"# Solid HyperScript\n\nThis sub module provides a HyperScript method for Solid. This is useful to use Solid in non-compiled environments or in some environments where you can only use a standard JSX transform. This method can be used as the JSX factory function.\n\nHyperScript function takes a few forms. The 2nd props argument is optional. Children may be passed as either an array to the 2nd/3rd argument or as every argument past the 2nd.\n\n```js\n// create an element with a title attribute\nh(\"button\", { title: \"My button\" }, \"Click Me\")\n\n// create a component with a title prop\nh(Button, { title: \"My button\" }, \"Click Me\")\n\n// create an element with many children\nh(\"div\", { title: \"My button\" }, h(\"span\", \"1\"), h(\"span\", \"2\"), h(\"span\", \"3\"))\n```\n\nThis is the least efficient way to use Solid as it requires a slightly larger runtime that isn't treeshakeable, and cannot leverage anything in the way of analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).\n\n## Example\n\n```js\nimport { render } from \"solid-js/web\";\nimport h from \"solid-js/h\";\nimport { createSignal } from \"solid-js\";\n\nfunction Button(props) {\n return h(\"button.btn-primary\", props)\n}\n\nfunction Counter() {\n const [count, setCount] = createSignal(0);\n const increment = (e) => setCount(c => c + 1);\n\n return h(Button, { type: \"button\", onClick: increment }, count);\n}\n\nrender(Counter, document.getElementById(\"app\"));\n```\n\n## Differences from JSX\n\nThere are a few differences from Solid's JSX that are important to note. They also apply when attempting to use any transformation that would compile to HyperScript.\n\n1. Reactive expression must be manually wrapped in functions to be reactive.\n\n```js\n// jsx\n