From f22f96469e03f865ec8d90de7b240298bce6fd44 Mon Sep 17 00:00:00 2001 From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com> Date: Mon, 17 Mar 2025 12:38:14 +0330 Subject: [PATCH] Switch to SolidBase callout syntax --- src/routes/concepts/context.mdx | 8 ++++---- src/routes/guides/styling-components/tailwind.mdx | 6 ++---- .../reference/component-apis/create-context.mdx | 7 ++++--- src/routes/reference/jsx-attributes/attr.mdx | 8 ++++---- src/routes/reference/jsx-attributes/bool.mdx | 8 ++++---- src/routes/reference/jsx-attributes/prop.mdx | 8 ++++---- src/routes/reference/jsx-attributes/use.mdx | 4 ++-- src/routes/solid-router/concepts/actions.mdx | 6 ++---- .../solid-router/reference/data-apis/action.mdx | 6 ++---- .../solid-router/reference/data-apis/use-action.mdx | 7 +++---- .../reference/data-apis/use-submission.mdx | 6 ++---- .../reference/data-apis/use-submissions.mdx | 11 ++++------- .../reference/response-helpers/redirect.mdx | 7 ++++--- .../reference/response-helpers/revalidate.mdx | 4 ++-- src/routes/solid-start/guides/data-fetching.mdx | 12 ++++-------- src/routes/solid-start/guides/data-mutation.mdx | 6 ++---- .../reference/server/create-middleware.mdx | 6 ++---- 17 files changed, 51 insertions(+), 69 deletions(-) diff --git a/src/routes/concepts/context.mdx b/src/routes/concepts/context.mdx index 2499928e64..40cb23dd18 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 32dc3057b4..7c3f4333d5 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 64a335c2aa..fb16345759 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 4faaed5138..67e469bb75 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 b881e77e9c..78a2080715 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 a13c553e0c..72f8b86f90 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 cce2a68272..b622f82c23 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 d194d75dee..57e7357e17 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 84b604c180..8f3a5e666a 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 a35b350582..c63c1c064e 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 55c046dd2b..777dff79af 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 817a95703f..2dad465b4d 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 fbc3335814..85c605357c 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 178e497608..be8b092abc 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 082b93deb2..5bdc6866c3 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 a551cb607b..99e6a3509c 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 c00ae90af7..a454fbc6c1 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).