diff --git a/src/routes/concepts/context.mdx b/src/routes/concepts/context.mdx index 2499928e6..40cb23dd1 100644 --- a/src/routes/concepts/context.mdx +++ b/src/routes/concepts/context.mdx @@ -60,9 +60,9 @@ const Provider = (props) => ( ); ``` - +:::tip[Complex Types] When passing multiple values (as an `array` or `object`), it is recommended to use a [store](/reference/component-apis/create-context#usage). - +::: ## Consuming context @@ -257,9 +257,9 @@ function Child() { If no default value is passed to `createContext`, it is possible for `useContext` to return `undefined`. - +:::info[More on default values] Read more about default values in the [`createContext`](/reference/component-apis/create-context) entry. - +::: Because of this, if an initial value was not passed to `createContext`, the TS type signature of `useContext` will indicate that the value returned might be `undefined` (as mentioned above). diff --git a/src/routes/guides/styling-components/tailwind.mdx b/src/routes/guides/styling-components/tailwind.mdx index 32dc3057b..7c3f4333d 100644 --- a/src/routes/guides/styling-components/tailwind.mdx +++ b/src/routes/guides/styling-components/tailwind.mdx @@ -4,11 +4,9 @@ order: 5 mainNavExclude: true --- - - +:::info[Note] This guide is for Tailwind CSS v4. For **Tailwind CSS v3** refer to [Tailwind CSS v3](/guides/styling-components/tailwind-v3). - - +::: [Tailwind CSS](https://tailwindcss.com/) is an on-demand utility CSS library that integrates seamlessly with Solid as a built-in PostCSS plugin. diff --git a/src/routes/reference/component-apis/create-context.mdx b/src/routes/reference/component-apis/create-context.mdx index 64a335c2a..fb1634575 100644 --- a/src/routes/reference/component-apis/create-context.mdx +++ b/src/routes/reference/component-apis/create-context.mdx @@ -13,9 +13,10 @@ The default value is used when no Provider is found above in the hierarchy. To avoid reinstatiating a new context when Hot-Module Replacement (HMR) occurs, it is recommended to use `createContext` in its own module (file). - -When using HMR, the context is lost when the module is reloaded. Which will cause an error to be thrown as `useContext` will try to access it while it is still reloading. - +:::danger[Hot-Module Replacement] +When using HMR, the context is lost when the module is reloaded. +Which will cause an error to be thrown as `useContext` will try to access it while it is still reloading. +::: For example: diff --git a/src/routes/reference/jsx-attributes/attr.mdx b/src/routes/reference/jsx-attributes/attr.mdx index 4faaed513..67e469bb7 100644 --- a/src/routes/reference/jsx-attributes/attr.mdx +++ b/src/routes/reference/jsx-attributes/attr.mdx @@ -9,7 +9,7 @@ Useful for Web Components where you want to set attributes. ``` - - Type definitions are required when using TypeScript. - See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples. - +:::info[Strong-Typing Custom Attributes] +Type definitions are required when using TypeScript. +See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples. +::: diff --git a/src/routes/reference/jsx-attributes/bool.mdx b/src/routes/reference/jsx-attributes/bool.mdx index b881e77e9..78a208071 100644 --- a/src/routes/reference/jsx-attributes/bool.mdx +++ b/src/routes/reference/jsx-attributes/bool.mdx @@ -20,7 +20,7 @@ This attribute is most useful for Web Components. ``` - - Type definitions are required when using TypeScript. - See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples. - +:::info[Strong-Typing Custom Boolean Attributes] +Type definitions are required when using TypeScript. +See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples. +::: diff --git a/src/routes/reference/jsx-attributes/prop.mdx b/src/routes/reference/jsx-attributes/prop.mdx index a13c553e0..72f8b86f9 100644 --- a/src/routes/reference/jsx-attributes/prop.mdx +++ b/src/routes/reference/jsx-attributes/prop.mdx @@ -9,7 +9,7 @@ Forces the prop to be treated as a property instead of an attribute.
``` - - Type definitions are required when using TypeScript. - See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples. - \ No newline at end of file +:::info[Strong-Typing Custom Properties] +Type definitions are required when using TypeScript. +See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples. +::: \ No newline at end of file diff --git a/src/routes/reference/jsx-attributes/use.mdx b/src/routes/reference/jsx-attributes/use.mdx index cce2a6827..b622f82c2 100644 --- a/src/routes/reference/jsx-attributes/use.mdx +++ b/src/routes/reference/jsx-attributes/use.mdx @@ -35,7 +35,7 @@ declare module "solid-js" { } ``` - +:::caution[Limitations] Directives only work with native HTML elements (HTML/SVG/MathML/Custom Elements). Directives are not forwarded and **won't work in user defined components**, such as `` [see also](https://github.com/solidjs/solid/discussions/722) - +::: diff --git a/src/routes/solid-router/concepts/actions.mdx b/src/routes/solid-router/concepts/actions.mdx index d194d75de..57e7357e1 100644 --- a/src/routes/solid-router/concepts/actions.mdx +++ b/src/routes/solid-router/concepts/actions.mdx @@ -43,11 +43,9 @@ In this example, the `echo` action simulates a fetch call with a 1 second delay The `echo` action will act as a backend, however, it can be substituted for any API provided it can be run on the client. Typically, route actions are used with some sort of solution like fetch or GraphQL. - - +:::tip In [SolidStart](/solid-start) apps, it's recommended to use the [`"use server"`](/solid-start/reference/server/use-server) directive to leverage server-side caching. - - +::: ### Using actions diff --git a/src/routes/solid-router/reference/data-apis/action.mdx b/src/routes/solid-router/reference/data-apis/action.mdx index 84b604c18..8f3a5e666 100644 --- a/src/routes/solid-router/reference/data-apis/action.mdx +++ b/src/routes/solid-router/reference/data-apis/action.mdx @@ -59,11 +59,9 @@ const deleteTodo = action(async (id: number) => { ``` - - +:::tip In [SolidStart](/solid-start) apps, it's recommended to use the [`"use server"`](/solid-start/reference/server/use-server) directive to leverage server-side caching. - - +::: ## Notes of `
` implementation and SSR diff --git a/src/routes/solid-router/reference/data-apis/use-action.mdx b/src/routes/solid-router/reference/data-apis/use-action.mdx index a35b35058..c63c1c064 100644 --- a/src/routes/solid-router/reference/data-apis/use-action.mdx +++ b/src/routes/solid-router/reference/data-apis/use-action.mdx @@ -13,10 +13,9 @@ const updateName = useAction(updateNameAction); const result = updateName("John Wick"); ``` - - `useAction` requires client-side JavaScript and is not progressively - enhanceable. - +:::info[Note] +`useAction` requires client-side JavaScript and is not progressively enhanceable. +::: ## Parameters diff --git a/src/routes/solid-router/reference/data-apis/use-submission.mdx b/src/routes/solid-router/reference/data-apis/use-submission.mdx index 55c046dd2..777dff79a 100644 --- a/src/routes/solid-router/reference/data-apis/use-submission.mdx +++ b/src/routes/solid-router/reference/data-apis/use-submission.mdx @@ -24,11 +24,9 @@ function Component() { } ``` - - +:::info Learn more about actions in the [`action`](/solid-router/reference/data-apis/action) docs. - - +::: ## Filtering Submissions diff --git a/src/routes/solid-router/reference/data-apis/use-submissions.mdx b/src/routes/solid-router/reference/data-apis/use-submissions.mdx index 817a95703..2dad465b4 100644 --- a/src/routes/solid-router/reference/data-apis/use-submissions.mdx +++ b/src/routes/solid-router/reference/data-apis/use-submissions.mdx @@ -5,9 +5,9 @@ title: useSubmissions This helper is used to handle form submissions and can provide optimistic updates while actions are in flight as well as pending state feedback. This method will return an iterable of all submitted actions while its component is mounted. With an optional second parameter for a filter function. - +:::tip If you only care for the latest submission, you can use the [`useSubmission`](/solid-router/reference/data-apis/use-submission) helper. - +::: It's important to note that it requires the form method to be **post** otherwise it will trigger a browser navigation and will not work. @@ -42,12 +42,9 @@ function Component() { } ``` - - +:::info To trigger a submission, [actions](https://docs.solidjs.com/) can be used. - - - +::: ## Filtering Submissions diff --git a/src/routes/solid-router/reference/response-helpers/redirect.mdx b/src/routes/solid-router/reference/response-helpers/redirect.mdx index fbc333581..85c605357 100644 --- a/src/routes/solid-router/reference/response-helpers/redirect.mdx +++ b/src/routes/solid-router/reference/response-helpers/redirect.mdx @@ -14,9 +14,10 @@ Other useful redirect codes: | `307` | Temporary Redirect | | `308` | Permanent redirect | - -307 and 308 won't allow the browser to change the method of the request. If you want to change the method, you should use 301 or 302. - +:::tip[Redirect Methods] +307 and 308 won't allow the browser to change the method of the request. +If you want to change the method, you should use 301 or 302. +::: A common use-case for throwing a redirect is when a user is not authenticated and needs to be sent to the login page or another public route. diff --git a/src/routes/solid-router/reference/response-helpers/revalidate.mdx b/src/routes/solid-router/reference/response-helpers/revalidate.mdx index 178e49760..be8b092ab 100644 --- a/src/routes/solid-router/reference/response-helpers/revalidate.mdx +++ b/src/routes/solid-router/reference/response-helpers/revalidate.mdx @@ -4,9 +4,9 @@ title: revalidate Revalidate will receive the either a cache key or an array of cache keys and invalidate those queries. - +:::tip[Firing Queries Again] If you intend to re-fire the queries immediately, check the [reload](/solid-router/reference/response-helpers/reload) helper. - +::: The code below will revalidate the `getTodo` query with the cache key. diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx index 082b93deb..5bdc6866c 100644 --- a/src/routes/solid-start/guides/data-fetching.mdx +++ b/src/routes/solid-start/guides/data-fetching.mdx @@ -8,11 +8,9 @@ Since SolidStart itself provides minimal data-fetching APIs, most functionality This guide provides practical examples of common data-fetching tasks using these primitives. - - +:::info[Note] For detailed API information, refer to the [Solid](/) and [Solid Router](/solid-router) documentation. - - +::: Here's a simple example: @@ -438,8 +436,6 @@ export default function Page() { See the [`createResource`](/reference/basic-reactivity/create-resource) API reference for more information. - - +:::info[Advanced Data Handling] For advanced features like automatic background re-fetching or infinite queries, you can use [Tanstack Query](https://tanstack.com/query/latest/docs/framework/solid/overview). - - +::: diff --git a/src/routes/solid-start/guides/data-mutation.mdx b/src/routes/solid-start/guides/data-mutation.mdx index a551cb607..99e6a3509 100644 --- a/src/routes/solid-start/guides/data-mutation.mdx +++ b/src/routes/solid-start/guides/data-mutation.mdx @@ -423,11 +423,9 @@ export default function Page() {
- - +:::info[Multiple Submissions] If you want to display optimistic UI for multiple concurrent submissions, you can use the [`useSubmissions`](/solid-router/reference/data-apis/use-submissions) primitive. - - +::: ## Redirecting diff --git a/src/routes/solid-start/reference/server/create-middleware.mdx b/src/routes/solid-start/reference/server/create-middleware.mdx index c00ae90af..a454fbc6c 100644 --- a/src/routes/solid-start/reference/server/create-middleware.mdx +++ b/src/routes/solid-start/reference/server/create-middleware.mdx @@ -9,12 +9,10 @@ There are two lifecycle events available: `onRequest` and `onBeforeResponse`. - The `onRequest` event is triggered at the beginning of the request lifecycle, before the request is handled by the route handler. - The `onBeforeResponse` event is triggered after a request has been processed by the route handler but before the response is sent to the client. - - +:::info[Note] SolidStart will only execute the middleware functions if the path to the middleware file is configured within `app.config.ts` using the `middleware` option. This file must export the configuration using `export default`. - - +::: Learn more about middleware in the [Middleware documentation](/solid-start/advanced/middleware).