diff --git a/README.md b/README.md index 230ca5947..f72df0138 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ [![Discord](https://img.shields.io/discord/722131463138705510?style=for-the-badge)](https://discord.com/invite/solidjs) [![Subreddit subscribers](https://img.shields.io/reddit/subreddit-subscribers/solidjs?style=for-the-badge)](https://www.reddit.com/r/solidjs/) -**[Website](https://www.solidjs.com/) • [API Docs](https://www.solidjs.com/docs/latest/api) • [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)** +**[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)** Solid 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. diff --git a/packages/solid/README.md b/packages/solid/README.md index edb98e8fc..942c9cc96 100644 --- a/packages/solid/README.md +++ b/packages/solid/README.md @@ -1,223 +1,223 @@ -

- SolidJS -

- -[![Build Status](https://img.shields.io/github/actions/workflow/status/solidjs/solid/main-ci.yml?branch=main&logo=github&style=for-the-badge)](https://github.com/solidjs/solid/actions/workflows/main-ci.yml) -[![Coverage Status](https://img.shields.io/coveralls/github/solidjs/solid.svg?style=for-the-badge)](https://coveralls.io/github/solidjs/solid?branch=main) - -[![NPM Version](https://img.shields.io/npm/v/solid-js.svg?style=for-the-badge)](https://www.npmjs.com/package/solid-js) -[![](https://img.shields.io/npm/dm/solid-js.svg?style=for-the-badge)](https://www.npmjs.com/package/solid-js) -[![Discord](https://img.shields.io/discord/722131463138705510?style=for-the-badge)](https://discord.com/invite/solidjs) -[![Subreddit subscribers](https://img.shields.io/reddit/subreddit-subscribers/solidjs?style=for-the-badge)](https://www.reddit.com/r/solidjs/) - -**[Website](https://www.solidjs.com/) • [API Docs](https://www.solidjs.com/docs/latest/api) • [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)** - -Solid 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=J70HXl1KhWE&ab_channel=SolidJS) or read on! - -## Key Features - -- Fine-grained updates to the real DOM -- Declarative data: model your state as a system with reactive primitives -- Render-once mental model: your components are regular JavaScript functions that run once to set up your view -- Automatic dependency tracking: accessing your reactive state subscribes to it -- [Small](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f) and [fast](https://krausest.github.io/js-framework-benchmark/current.html) -- Simple: learn a few powerful concepts that can be reused, combined, and built on top of -- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering. -- Naturally debuggable: A `
` is a real div, so you can use your browser's devtools to inspect the rendering -- [Web component friendly](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) and can author custom elements -- Isomorphic: render your components on the client and the server -- Universal: write [custom renderers](https://github.com/solidjs/solid/releases/tag/v1.2.0) to use Solid anywhere -- A growing community and ecosystem with active core team support - -
- -Quick Start - -You can get started with a simple app by running the following in your terminal: - -```sh -> npx degit solidjs/templates/js my-app -> cd my-app -> npm i # or yarn or pnpm -> npm run dev # or yarn or pnpm -``` - -Or for TypeScript: - -```sh -> npx degit solidjs/templates/ts my-app -> cd my-app -> npm i # or yarn or pnpm -> npm run dev # or yarn or pnpm -``` - -This will create a minimal, client-rendered application powered by [Vite](https://vitejs.dev/). - -Or you can install the dependencies in your own setup. To use Solid with JSX (_recommended_), run: - -```sh -> npm i -D babel-preset-solid -> npm i solid-js -``` - -The easiest way to get set up is to add `babel-preset-solid` to your `.babelrc`, babel config for webpack, or rollup configuration: - -```js -"presets": ["solid"] -``` - -For TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX: - -```js -"compilerOptions": { - "jsx": "preserve", - "jsxImportSource": "solid-js", -} -``` - -
- -## Why Solid? - -### Performant - -Meticulously 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://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.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.) - -### Powerful - -Solid 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).) - -### Pragmatic - -Do 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. - -### Productive - -Solid 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://hope-ui.com/), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels). - -
-Show Me! - -```jsx -import { render } from "solid-js/web"; -import { createSignal } from "solid-js"; - -// A component is just a function that (optionally) accepts properties and returns a DOM node -const Counter = props => { - // Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount() - const [count, setCount] = createSignal(props.startingCount || 1); - - // The increment function calls the setter - const increment = () => setCount(count() + 1); - - console.log( - "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." - ); - - // JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax - // The only part of this that will ever rerender is the count() text. - return ( - - ); -}; - -// The render function mounts a component onto your page -render(() => , document.getElementById("app")); -``` - -See it in action in our interactive [Playground](https://playground.solidjs.com/?hash=-894962706&version=1.3.13)! - -Solid 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: - -```js -import { render, createComponent, delegateEvents, insert, template } from "solid-js/web"; -import { createSignal } from "solid-js"; - -const _tmpl$ = /*#__PURE__*/ template(``, 2); - -const Counter = props => { - const [count, setCount] = createSignal(props.startingCount || 1); - const increment = () => setCount(count() + 1); - - console.log("The body of the function runs once . . ."); - - return (() => { - //_el$ is a real DOM node! - const _el$ = _tmpl$.cloneNode(true); - _el$.firstChild; - - _el$.$$click = increment; - - //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button - insert(_el$, count, null); - - return _el$; - })(); -}; - -render( - () => - createComponent(Counter, { - startingCount: 2 - }), - document.getElementById("app") -); - -delegateEvents(["click"]); -``` - -
- -## More - -Check out our official [documentation](https://www.solidjs.com/guide) or browse some [examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md) - -## Browser Support - -SolidJS 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. - -Testing Powered By SauceLabs - -## Community - -Come 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. - -### Contributors - - - -### Open Collective - -Support us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)] - - - - - - - - - - - - - -### Sponsors - -Become 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)] - - - - - - - - - - - - - - +

+ SolidJS +

+ +[![Build Status](https://img.shields.io/github/actions/workflow/status/solidjs/solid/main-ci.yml?branch=main&logo=github&style=for-the-badge)](https://github.com/solidjs/solid/actions/workflows/main-ci.yml) +[![Coverage Status](https://img.shields.io/coveralls/github/solidjs/solid.svg?style=for-the-badge)](https://coveralls.io/github/solidjs/solid?branch=main) + +[![NPM Version](https://img.shields.io/npm/v/solid-js.svg?style=for-the-badge)](https://www.npmjs.com/package/solid-js) +[![](https://img.shields.io/npm/dm/solid-js.svg?style=for-the-badge)](https://www.npmjs.com/package/solid-js) +[![Discord](https://img.shields.io/discord/722131463138705510?style=for-the-badge)](https://discord.com/invite/solidjs) +[![Subreddit subscribers](https://img.shields.io/reddit/subreddit-subscribers/solidjs?style=for-the-badge)](https://www.reddit.com/r/solidjs/) + +**[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)** + +Solid 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=J70HXl1KhWE&ab_channel=SolidJS) or read on! + +## Key Features + +- Fine-grained updates to the real DOM +- Declarative data: model your state as a system with reactive primitives +- Render-once mental model: your components are regular JavaScript functions that run once to set up your view +- Automatic dependency tracking: accessing your reactive state subscribes to it +- [Small](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f) and [fast](https://krausest.github.io/js-framework-benchmark/current.html) +- Simple: learn a few powerful concepts that can be reused, combined, and built on top of +- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering. +- Naturally debuggable: A `
` is a real div, so you can use your browser's devtools to inspect the rendering +- [Web component friendly](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) and can author custom elements +- Isomorphic: render your components on the client and the server +- Universal: write [custom renderers](https://github.com/solidjs/solid/releases/tag/v1.2.0) to use Solid anywhere +- A growing community and ecosystem with active core team support + +
+ +Quick Start + +You can get started with a simple app by running the following in your terminal: + +```sh +> npx degit solidjs/templates/js my-app +> cd my-app +> npm i # or yarn or pnpm +> npm run dev # or yarn or pnpm +``` + +Or for TypeScript: + +```sh +> npx degit solidjs/templates/ts my-app +> cd my-app +> npm i # or yarn or pnpm +> npm run dev # or yarn or pnpm +``` + +This will create a minimal, client-rendered application powered by [Vite](https://vitejs.dev/). + +Or you can install the dependencies in your own setup. To use Solid with JSX (_recommended_), run: + +```sh +> npm i -D babel-preset-solid +> npm i solid-js +``` + +The easiest way to get set up is to add `babel-preset-solid` to your `.babelrc`, babel config for webpack, or rollup configuration: + +```js +"presets": ["solid"] +``` + +For TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX: + +```js +"compilerOptions": { + "jsx": "preserve", + "jsxImportSource": "solid-js", +} +``` + +
+ +## Why Solid? + +### Performant + +Meticulously 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://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.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.) + +### Powerful + +Solid 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).) + +### Pragmatic + +Do 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. + +### Productive + +Solid 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://hope-ui.com/), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels). + +
+Show Me! + +```jsx +import { render } from "solid-js/web"; +import { createSignal } from "solid-js"; + +// A component is just a function that (optionally) accepts properties and returns a DOM node +const Counter = props => { + // Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount() + const [count, setCount] = createSignal(props.startingCount || 1); + + // The increment function calls the setter + const increment = () => setCount(count() + 1); + + console.log( + "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." + ); + + // JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax + // The only part of this that will ever rerender is the count() text. + return ( + + ); +}; + +// The render function mounts a component onto your page +render(() => , document.getElementById("app")); +``` + +See it in action in our interactive [Playground](https://playground.solidjs.com/?hash=-894962706&version=1.3.13)! + +Solid 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: + +```js +import { render, createComponent, delegateEvents, insert, template } from "solid-js/web"; +import { createSignal } from "solid-js"; + +const _tmpl$ = /*#__PURE__*/ template(``, 2); + +const Counter = props => { + const [count, setCount] = createSignal(props.startingCount || 1); + const increment = () => setCount(count() + 1); + + console.log("The body of the function runs once . . ."); + + return (() => { + //_el$ is a real DOM node! + const _el$ = _tmpl$.cloneNode(true); + _el$.firstChild; + + _el$.$$click = increment; + + //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button + insert(_el$, count, null); + + return _el$; + })(); +}; + +render( + () => + createComponent(Counter, { + startingCount: 2 + }), + document.getElementById("app") +); + +delegateEvents(["click"]); +``` + +
+ +## More + +Check out our official [documentation](https://www.solidjs.com/guide) or browse some [examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md) + +## Browser Support + +SolidJS 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. + +Testing Powered By SauceLabs + +## Community + +Come 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. + +### Contributors + + + +### Open Collective + +Support us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)] + + + + + + + + + + + + + +### Sponsors + +Become 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)] + + + + + + + + + + + + + + diff --git a/packages/solid/src/reactive/array.ts b/packages/solid/src/reactive/array.ts index 91af3758a..0597c8262 100644 --- a/packages/solid/src/reactive/array.ts +++ b/packages/solid/src/reactive/array.ts @@ -43,7 +43,7 @@ SOFTWARE. * * similar to `Array.prototype.map`, but gets the index as accessor, transforms only values that changed and returns an accessor and reactively tracks changes to the list. * - * @description https://www.solidjs.com/docs/latest/api#maparray + * @description https://docs.solidjs.com/reference/reactive-utilities/map-array */ export function mapArray( list: Accessor, @@ -180,7 +180,7 @@ export function mapArray( * * similar to `Array.prototype.map`, but gets the value as an accessor, transforms only changed items of the original arrays anew and returns an accessor. * - * @description https://www.solidjs.com/docs/latest/api#indexarray + * @description https://docs.solidjs.com/reference/reactive-utilities/index-array */ export function indexArray( list: Accessor, diff --git a/packages/solid/src/reactive/observable.ts b/packages/solid/src/reactive/observable.ts index 921c51034..47dd05f36 100644 --- a/packages/solid/src/reactive/observable.ts +++ b/packages/solid/src/reactive/observable.ts @@ -41,7 +41,7 @@ export type ObservableObserver = * const obsv$ = from(observable(s)); * obsv$.subscribe((v) => console.log(v)); * ``` - * description https://www.solidjs.com/docs/latest/api#observable + * description https://docs.solidjs.com/reference/reactive-utilities/observable */ export function observable(input: Accessor): Observable { return { diff --git a/packages/solid/src/reactive/signal.ts b/packages/solid/src/reactive/signal.ts index 9935a5488..e22799f23 100644 --- a/packages/solid/src/reactive/signal.ts +++ b/packages/solid/src/reactive/signal.ts @@ -136,7 +136,7 @@ export type RootFunction = (dispose: () => void) => T; * @param detachedOwner optional reactive context to bind the root to * @returns the output of `fn`. * - * @description https://www.solidjs.com/docs/latest/api#createroot + * @description https://docs.solidjs.com/reference/reactive-utilities/create-root */ export function createRoot(fn: RootFunction, detachedOwner?: typeof Owner): T { const listener = Listener, @@ -213,7 +213,7 @@ export interface SignalOptions extends MemoOptions { * setCount(count => count + 1); * ``` * - * @description https://www.solidjs.com/docs/latest/api#createsignal + * @description https://docs.solidjs.com/reference/basic-reactivity/create-signal */ export function createSignal(): Signal; export function createSignal(value: T, options?: SignalOptions): Signal; @@ -274,7 +274,7 @@ export type EffectFunction = (v: Prev) => Next; * @param value an optional initial value for the computation; if set, fn will never receive undefined as first argument * @param options allows to set a name in dev mode for debugging purposes * - * @description https://www.solidjs.com/docs/latest/api#createcomputed + * @description https://docs.solidjs.com/reference/secondary-primitives/create-computed */ export function createComputed(fn: EffectFunction, Next>): void; export function createComputed( @@ -305,7 +305,7 @@ export function createComputed( * @param value an optional initial value for the computation; if set, fn will never receive undefined as first argument * @param options allows to set a name in dev mode for debugging purposes * - * @description https://www.solidjs.com/docs/latest/api#createrendereffect + * @description https://docs.solidjs.com/reference/secondary-primitives/create-render-effect */ export function createRenderEffect(fn: EffectFunction, Next>): void; export function createRenderEffect( @@ -336,7 +336,7 @@ export function createRenderEffect( * @param value an optional initial value for the computation; if set, fn will never receive undefined as first argument * @param options allows to set a name in dev mode for debugging purposes * - * @description https://www.solidjs.com/docs/latest/api#createeffect + * @description https://docs.solidjs.com/reference/basic-reactivity/create-effect */ export function createEffect(fn: EffectFunction, Next>): void; export function createEffect( @@ -368,7 +368,7 @@ export function createEffect( * @param invalidated a function that is called when tracked function is invalidated. * @param options allows to set a name in dev mode for debugging purposes * - * @description https://www.solidjs.com/docs/latest/api#createreaction + * @description https://docs.solidjs.com/reference/secondary-primitives/create-reaction */ export function createReaction(onInvalidate: () => void, options?: EffectOptions) { let fn: (() => void) | undefined; @@ -413,7 +413,7 @@ export interface MemoOptions extends EffectOptions { * @param value an optional initial value for the computation; if set, fn will never receive undefined as first argument * @param options allows to set a name in dev mode for debugging purposes and use a custom comparison function in equals * - * @description https://www.solidjs.com/docs/latest/api#creatememo + * @description https://docs.solidjs.com/reference/basic-reactivity/create-memo */ // The extra Prev generic parameter separates inference of the effect input // parameter type from inference of the effect return type, so that the effect @@ -562,7 +562,7 @@ function isPromise(v: any): v is Promise { * * `mutate` allows to manually overwrite the resource without calling the fetcher * * `refetch` will re-run the fetcher without changing the source, and if called with a value, that value will be passed to the fetcher via the `refetching` property on the fetcher's second parameter * - * @description https://www.solidjs.com/docs/latest/api#createresource + * @description https://docs.solidjs.com/reference/basic-reactivity/create-resource */ export function createResource( fetcher: ResourceFetcher, @@ -752,7 +752,7 @@ export interface DeferredOptions { * @param fn a function that receives its previous or the initial value, if set, and returns a new value used to react on a computation * @param options allows to set the timeout in milliseconds, use a custom comparison function and set a name in dev mode for debugging purposes * - * @description https://www.solidjs.com/docs/latest/api#createdeferred + * @description https://docs.solidjs.com/reference/secondary-primitives/create-deferred */ export function createDeferred(source: Accessor, options?: DeferredOptions) { let t: Task, @@ -804,7 +804,7 @@ export type EqualityCheckerFunction = (a: U, b: T) => boolean; * * This makes the operation O(2) instead of O(n). * - * @description https://www.solidjs.com/docs/latest/api#createselector + * @description https://docs.solidjs.com/reference/secondary-primitives/create-selector */ export function createSelector( source: Accessor, @@ -854,7 +854,7 @@ export function createSelector( * @param fn wraps the reactive updates that should be batched * @returns the return value from `fn` * - * @description https://www.solidjs.com/docs/latest/api#batch + * @description https://docs.solidjs.com/reference/reactive-utilities/batch */ export function batch(fn: Accessor): T { return runUpdates(fn, false) as T; @@ -865,7 +865,7 @@ export function batch(fn: Accessor): T { * @param fn the scope that is out of the tracking context * @returns the return value of `fn` * - * @description https://www.solidjs.com/docs/latest/api#untrack + * @description https://docs.solidjs.com/reference/reactive-utilities/untrack */ export function untrack(fn: Accessor): T { if (!ExternalSourceConfig && Listener === null) return fn(); @@ -925,7 +925,7 @@ export interface OnOptions { * }); * ``` * - * @description https://www.solidjs.com/docs/latest/api#on + * @description https://docs.solidjs.com/reference/jsx-attributes/on_ */ export function on( deps: AccessorArray | Accessor, @@ -965,7 +965,7 @@ export function on( * Runs an effect only after initial render on mount * @param fn an effect that should run only once on mount * - * @description https://www.solidjs.com/docs/latest/api#onmount + * @description https://docs.solidjs.com/reference/lifecycle/on-mount */ export function onMount(fn: () => void) { createEffect(() => untrack(fn)); @@ -977,7 +977,7 @@ export function onMount(fn: () => void) { * * @returns the same {@link fn} function that was passed in * - * @description https://www.solidjs.com/docs/latest/api#oncleanup + * @description https://docs.solidjs.com/reference/lifecycle/on-cleanup */ export function onCleanup any>(fn: T): T { if (Owner === null) @@ -995,7 +995,7 @@ export function onCleanup any>(fn: T): T { * * * If the error is thrown again inside the error handler, it will trigger the next available parent handler * - * @description https://www.solidjs.com/docs/latest/api#catcherror + * @description https://docs.solidjs.com/reference/reactive-utilities/catch-error */ export function catchError(fn: () => T, handler: (err: Error) => void) { ERROR || (ERROR = Symbol("error")); @@ -1044,7 +1044,7 @@ export function enableScheduling(scheduler = requestCallback) { * export function startTransition(fn: () => void) => Promise * ``` * - * @description https://www.solidjs.com/docs/latest/api#usetransition + * @description https://docs.solidjs.com/reference/reactive-utilities/start-transition */ export function startTransition(fn: () => unknown): Promise { if (Transition && Transition.running) { @@ -1090,7 +1090,7 @@ export type Transition = [Accessor, (fn: () => void) => Promise]; * ]; * @returns a tuple; first value is an accessor if the transition is pending and a callback to start the transition * - * @description https://www.solidjs.com/docs/latest/api#usetransition + * @description https://docs.solidjs.com/reference/reactive-utilities/use-transition */ export function useTransition(): Transition { return [transPending, startTransition]; @@ -1161,7 +1161,7 @@ export interface Context { * @param options allows to set a name in dev mode for debugging purposes * @returns The context that contains the Provider Component and that can be used with `useContext` * - * @description https://www.solidjs.com/docs/latest/api#createcontext + * @description https://docs.solidjs.com/reference/component-apis/create-context */ export function createContext( defaultValue?: undefined, @@ -1182,7 +1182,7 @@ export function createContext( * @param context Context object made by `createContext` * @returns the current or `defaultValue`, if present * - * @description https://www.solidjs.com/docs/latest/api#usecontext + * @description https://docs.solidjs.com/reference/component-apis/use-context */ export function useContext(context: Context): T { return Owner && Owner.context && Owner.context[context.id] !== undefined @@ -1200,7 +1200,7 @@ export type ChildrenReturn = Accessor & { toArray: () => Resol * @param fn an accessor for the children * @returns a accessor of the same children, but resolved * - * @description https://www.solidjs.com/docs/latest/api#children + * @description https://docs.solidjs.com/reference/component-apis/children */ export function children(fn: Accessor): ChildrenReturn { const children = createMemo(fn); @@ -1750,7 +1750,7 @@ type TODO = any; * * * If the error is thrown again inside the error handler, it will trigger the next available parent handler * - * @description https://www.solidjs.com/docs/latest/api#onerror + * @description https://www.solidjs.com/docs/latest/api#onerror | https://docs.solidjs.com/reference/reactive-utilities/catch-error */ export function onError(fn: (err: Error) => void): void { ERROR || (ERROR = Symbol("error")); diff --git a/packages/solid/src/render/Suspense.ts b/packages/solid/src/render/Suspense.ts index 056ecb4fc..59584e1cd 100644 --- a/packages/solid/src/render/Suspense.ts +++ b/packages/solid/src/render/Suspense.ts @@ -30,7 +30,7 @@ const SuspenseListContext = createContext(); /** * **[experimental]** Controls the order in which suspended content is rendered * - * @description https://www.solidjs.com/docs/latest/api#suspenselist-experimental + * @description https://docs.solidjs.com/reference/components/suspense-list */ export function SuspenseList(props: { children: JSX.Element; @@ -118,7 +118,7 @@ export function SuspenseList(props: { * * * ``` - * @description https://www.solidjs.com/docs/latest/api#suspense + * @description https://docs.solidjs.com/reference/components/suspense */ export function Suspense(props: { fallback?: JSX.Element; children: JSX.Element }) { let counter = 0, diff --git a/packages/solid/src/render/flow.ts b/packages/solid/src/render/flow.ts index f2049c2bd..2e483b523 100644 --- a/packages/solid/src/render/flow.ts +++ b/packages/solid/src/render/flow.ts @@ -29,7 +29,7 @@ const narrowedError = (name: string) => * ``` * If you have a list with fixed indices and changing values, consider using `` instead. * - * @description https://www.solidjs.com/docs/latest/api#for + * @description https://docs.solidjs.com/reference/components/for */ export function For(props: { each: T | undefined | null | false; @@ -59,7 +59,7 @@ export function For(props: { * ``` * If you have a list with changing indices, better use ``. * - * @description https://www.solidjs.com/docs/latest/api#index + * @description https://docs.solidjs.com/reference/components/index */ export function Index(props: { each: T | undefined | null | false; @@ -81,7 +81,7 @@ export function Index(props: { type RequiredParameter = T extends () => unknown ? never : T; /** * Conditionally render its children or an optional fallback component - * @description https://www.solidjs.com/docs/latest/api#show + * @description https://docs.solidjs.com/reference/components/show */ export function Show< T, @@ -155,7 +155,7 @@ type EvalConditions = readonly [number, unknown?, MatchProps?]; * * * ``` - * @description https://www.solidjs.com/docs/latest/api#switchmatch + * @description https://docs.solidjs.com/reference/components/switch-and-match */ export function Switch(props: { fallback?: JSX.Element; children: JSX.Element }): JSX.Element { let keyed = false; @@ -214,7 +214,7 @@ export type MatchProps = { * * * ``` - * @description https://www.solidjs.com/docs/latest/api#switchmatch + * @description https://docs.solidjs.com/reference/components/switch-and-match */ export function Match< T, @@ -250,7 +250,7 @@ export function resetErrorBoundaries() { * ``` * Errors thrown from the fallback can be caught by a parent ErrorBoundary * - * @description https://www.solidjs.com/docs/latest/api#errorboundary + * @description https://docs.solidjs.com/reference/components/error-boundary */ export function ErrorBoundary(props: { fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element); diff --git a/packages/solid/src/server/rendering.ts b/packages/solid/src/server/rendering.ts index 5e2c6d598..768cc7e47 100644 --- a/packages/solid/src/server/rendering.ts +++ b/packages/solid/src/server/rendering.ts @@ -214,7 +214,7 @@ export function Index(props: { type RequiredParameter = T extends () => unknown ? never : T; /** * Conditionally render its children or an optional fallback component - * @description https://www.solidjs.com/docs/latest/api#show + * @description https://docs.solidjs.com/reference/components/show */ export function Show(props: { when: T | undefined | null | false; diff --git a/packages/solid/store/README.md b/packages/solid/store/README.md index 277e4da3a..2af81b0f7 100644 --- a/packages/solid/store/README.md +++ b/packages/solid/store/README.md @@ -4,7 +4,7 @@ This submodules contains the means for handling deeps nested reactivity. It prov This also contains helper methods `produce` and `reconcile` which augment the behavior of the store setter method to allow for localized mutation and data diffing. -For full documentation, check out the [website](https://www.solidjs.com/docs/latest/api). +For full documentation, check out the [website](https://docs.solidjs.com). ## Example diff --git a/packages/solid/store/src/store.ts b/packages/solid/store/src/store.ts index ab081ab62..0e4524833 100644 --- a/packages/solid/store/src/store.ts +++ b/packages/solid/store/src/store.ts @@ -493,7 +493,7 @@ export interface SetStoreFunction { /** * Creates a reactive store that can be read through a proxy object and written with a setter function * - * @description https://www.solidjs.com/docs/latest/api#createstore + * @description https://docs.solidjs.com/reference/store-utilities/create-store */ export function createStore( ...[store, options]: {} extends T diff --git a/packages/solid/web/README.md b/packages/solid/web/README.md index f6bdcbe13..cb41c381a 100644 --- a/packages/solid/web/README.md +++ b/packages/solid/web/README.md @@ -4,4 +4,4 @@ This submodule contains the web specific APIs for Solid that are mostly internal In 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 ``. -Refer to the [website](https://www.solidjs.com/docs/latest/api) for documentation. \ No newline at end of file +Refer to the [website](https://docs.solidjs.com) for documentation. diff --git a/packages/solid/web/src/index.ts b/packages/solid/web/src/index.ts index bdd33d23e..4d279d8aa 100644 --- a/packages/solid/web/src/index.ts +++ b/packages/solid/web/src/index.ts @@ -51,7 +51,7 @@ export const hydrate: typeof hydrateCore = (...args) => { * * Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted in document.body; it is wrapped in a `
` unless the target is document.head or `isSVG` is true. setting `useShadow` to true places the element in a shadow root to isolate styles. * - * @description https://www.solidjs.com/docs/latest/api#portal + * @description https://docs.solidjs.com/reference/components/portal */ export function Portal(props: { mount?: Node; @@ -119,7 +119,7 @@ export type DynamicProps> = { * ```typescript * * ``` - * @description https://www.solidjs.com/docs/latest/api#dynamic + * @description https://docs.solidjs.com/reference/components/dynamic */ export function Dynamic(props: DynamicProps): JSX.Element { const [p, others] = splitProps(props, ["component"]);