diff --git a/src/routes/concepts/understanding-jsx.mdx b/src/routes/concepts/understanding-jsx.mdx index 9acda4e03e..efe8ce664f 100644 --- a/src/routes/concepts/understanding-jsx.mdx +++ b/src/routes/concepts/understanding-jsx.mdx @@ -31,7 +31,7 @@ const element =

I'm JSX!!

; It offers a distinct advantage, however: to copy/paste solutions from resources like Stack Overflow; and to allow direct usage of templates from design tools. Solid sets itself apart by using JSX immediately as it returns [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) elements. -This lets you use dynamic expressions within your HTML by allowing variables and functions to be references with the use of curly braces (`{ }`): +This lets you use dynamic expressions within your HTML by allowing variables and functions to be referenced with the use of curly braces (`{ }`): ```jsx const Component = () => { @@ -54,7 +54,7 @@ This updates only the necessary parts of the DOM when changes occur in the under ### Return a single root element -Where HTML lets you have disconnected tags at the top level, JSX requires that a component to return a single root element. +Where HTML lets you have disconnected tags at the top level, JSX requires that a component return a single root element. :::advanced When working with JSX, parts of your code are translated into structured HTML that is placed at the start of the file. diff --git a/src/routes/guides/deployment-options/netlify.mdx b/src/routes/guides/deployment-options/netlify.mdx index 8df46a3433..b5fc802203 100644 --- a/src/routes/guides/deployment-options/netlify.mdx +++ b/src/routes/guides/deployment-options/netlify.mdx @@ -23,8 +23,8 @@ For detailed guidance on build procedures, deployment options, and the range of ## Using the Netlify web interface -1. Begin by navigating to [Netlify's website](https://app.netlify.com/) and logging in or creating a new Netlify. - Once logged in, you will be take to your dashboard. Click the `New site from Git` button to start a new project. +1. Begin by navigating to [Netlify's website](https://app.netlify.com/) and logging in or creating a new Netlify account. + Once logged in, you will be taken to your dashboard. Click the `New site from Git` button to start a new project. { In the `test.jsx` file, [the `render` call from `@solidjs/testing-library`](https://testing-library.com/docs/solid-testing-library/api#render) is used to render the component and supply the props and context. To mimic a user interaction, `@testing-library/user-event` is used. -The [`expect` function provided by `vitest`](https://vitest.dev/api/expect.html) is extended with a [`.ToHaveTextContent("content")` matcher from `@testing-library/jest-dom`](https://github.com/testing-library/jest-dom?tab=readme-ov-file#tohavetextcontent) to supply what the expected behavior is for this component. +The [`expect` function provided by `vitest`](https://vitest.dev/api/expect.html) is extended with a [`.toHaveTextContent("content")` matcher from `@testing-library/jest-dom`](https://github.com/testing-library/jest-dom?tab=readme-ov-file#tohavetextcontent) to supply what the expected behavior is for this component. To run this test, use the following command: @@ -211,7 +211,7 @@ If possible, try to select for accessible attributes (roughly in the following o - **DisplayValue**: form elements showing the given value (e.g. select elements) - **AltText**: images with alt text - **Title**: HTML elements with the `title` attribute or SVGs with the `` tag containing the given text -- **TestId**: queries by the `data-testid` attribute; a different data attribute can be setup via `configure({testIdAttribute: 'data-my-test-attribute'})`; TestId-queries are _not accessible_, so use them only as a last resort. +- **TestId**: queries by the `data-testid` attribute; a different data attribute can be set up via `configure({testIdAttribute: 'data-my-test-attribute'})`; TestId-queries are _not accessible_, so use them only as a last resort. For more information, check the [testing-library documentation](https://testing-library.com/docs/queries/about). @@ -335,7 +335,7 @@ describe("pre-login: sign-in", () => { #### Validating assertions -`vitest` comes with the `expect` function to facilitate assertions that works like: +`vitest` comes with the `expect` function to facilitate assertions that work like: ```tsx frame="none" expect(subject)[assertion](value); @@ -412,7 +412,7 @@ To avoid this, there is a [`renderHook` utility](https://testing-library.com/doc ```ts frame="none" const renderResult = renderHook(hook, { initialProps, // an array with arguments being supplied to the hook - wrapper, // same as the wrapper optionss for `render` + wrapper, // same as the wrapper options for `render` }); const { result, // return value of the hook (mutable, destructuring fixes it) diff --git a/src/routes/index.mdx b/src/routes/index.mdx index 57da3f8483..ff083187bb 100644 --- a/src/routes/index.mdx +++ b/src/routes/index.mdx @@ -27,7 +27,7 @@ It prioritizes a simple and predictable development experience, making it a grea As a JavaScript framework, Solid embraces reactivity and fine-grained updates. -Reactivity, in programming, refers to an applications' ability to respond to changes in data or user interactions. +Reactivity, in programming, refers to an application's ability to respond to changes in data or user interactions. Traditionally, when a change occurs, the entire web page would need to reload to display the updated information. In contrast, when using a fine-grained reactive system, updates are only applied to the parts of the page that need to be updated. diff --git a/src/routes/reference/jsx-attributes/attr.mdx b/src/routes/reference/jsx-attributes/attr.mdx index 5775c48019..a0f9ba7bba 100644 --- a/src/routes/reference/jsx-attributes/attr.mdx +++ b/src/routes/reference/jsx-attributes/attr.mdx @@ -15,7 +15,7 @@ description: >- :::note[Strong-Typing Custom Attributes] Type definitions are required when using TypeScript. -See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples. +See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples. ::: ## Syntax diff --git a/src/routes/solid-router/concepts/actions.mdx b/src/routes/solid-router/concepts/actions.mdx index d7801c50c0..6c76f04cf3 100644 --- a/src/routes/solid-router/concepts/actions.mdx +++ b/src/routes/solid-router/concepts/actions.mdx @@ -57,7 +57,7 @@ In this example, an action is defined that creates a support ticket using a remo ## Using actions -Actions can be triggered in two ways: using a HTML [`<form>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form) or programmatically using the [`useAction` primitive](/solid-router/reference/data-apis/use-action). +Actions can be triggered in two ways: using an HTML [`<form>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form) or programmatically using the [`useAction` primitive](/solid-router/reference/data-apis/use-action). The recommended approach is to use a `<form>` element. This ensures a robust user experience with progressive enhancement, since the form works even without JavaScript. @@ -97,7 +97,7 @@ function FeedbackForm() { In this example, when the form is submitted, `submitFeedbackAction` will be triggered with the `FormData` containing the form values. :::tip[Uploading files] -If a form that includes file inputs, the `<form>` element must have `enctype="multipart/form-data"` to correctly send the file data. +If a form includes file inputs, the `<form>` element must have `enctype="multipart/form-data"` to correctly send the file data. ```tsx <form action={uploadFileAction} method="post" enctype="multipart/form-data"> @@ -280,7 +280,7 @@ To prevent this, ensure every code path in an action returns a value, such as `{ ## Automatic data revalidation -After server data changes, the application's can become stale. +After server data changes, the application's data can become stale. To solve this, Solid Router automatically revalidates all [queries](/solid-router/data-fetching/queries) used in the same page after a successful action. This ensures any component using that data is automatically updated with the freshest information. diff --git a/src/routes/solid-router/concepts/alternative-routers.mdx b/src/routes/solid-router/concepts/alternative-routers.mdx index 53ded3fcbc..71a2f7698c 100644 --- a/src/routes/solid-router/concepts/alternative-routers.mdx +++ b/src/routes/solid-router/concepts/alternative-routers.mdx @@ -25,7 +25,7 @@ This includes: ## Hash mode Hash mode routing uses the hash portion of the URL to manage an application's state and navigation. -Unlike the [default router](/solid-router/reference/components/router), the hash portion of the URL will not be handled by the server meaning this is a client-side only routing. +Unlike the [default router](/solid-router/reference/components/router), the hash portion of the URL will not be handled by the server, meaning this is a client-side only routing. To use hash mode, replace the `<Router />` component in the application with [`<HashRouter />`](/solid-router/reference/components/hash-router). ```jsx del={3, 16} ins={4,17} diff --git a/src/routes/solid-router/reference/primitives/use-before-leave.mdx b/src/routes/solid-router/reference/primitives/use-before-leave.mdx index 3d0bf20ab0..ee41de0527 100644 --- a/src/routes/solid-router/reference/primitives/use-before-leave.mdx +++ b/src/routes/solid-router/reference/primitives/use-before-leave.mdx @@ -20,8 +20,8 @@ description: >- The function will be called with: - from (_Location_): current location (before change). -- to (_string | number_}: path passed to `navigate.` -- options (_NavigateOptions_}: options passed to `navigate.` +- to (_string | number_): path passed to `navigate.` +- options (_NavigateOptions_): options passed to `navigate.` - preventDefault (_void function_): call to block the route change. - defaultPrevented (_readonly boolean_): `true` if any previously called leave handlers called `preventDefault()`. - retry (_void function_, _force?: boolean_ ): call to retry the same navigation. diff --git a/src/routes/solid-router/rendering-modes/ssr.mdx b/src/routes/solid-router/rendering-modes/ssr.mdx index ba9a73d88b..35666a60c7 100644 --- a/src/routes/solid-router/rendering-modes/ssr.mdx +++ b/src/routes/solid-router/rendering-modes/ssr.mdx @@ -28,4 +28,4 @@ import { Router } from "@solidjs/router"; <Router url={isServer ? req.url : ""} />; ``` -Solid Router also provides a way to define a `preload` function that loads parallel to the routes [render-as-you-fetch](https://epicreact.dev/render-as-you-fetch/). +Solid Router also provides a way to define a `preload` function that loads in parallel to the routes [render-as-you-fetch](https://epicreact.dev/render-as-you-fetch/). diff --git a/src/routes/solid-start/guides/security.mdx b/src/routes/solid-start/guides/security.mdx index 8d663ff892..ee55557bfa 100644 --- a/src/routes/solid-start/guides/security.mdx +++ b/src/routes/solid-start/guides/security.mdx @@ -19,7 +19,7 @@ description: >- ## XSS (Cross Site Scripting) -Solid automatically escape values passed to JSX expressions to reduce the risk of XSS attacks. +Solid automatically escapes values passed to JSX expressions to reduce the risk of XSS attacks. However, this protection does not apply when using [`innerHTML`](/reference/jsx-attributes/innerhtml). To protect your application from XSS attacks: diff --git a/src/routes/solid-start/reference/server/http-header.mdx b/src/routes/solid-start/reference/server/http-header.mdx index bec110da14..f2a06c6e91 100644 --- a/src/routes/solid-start/reference/server/http-header.mdx +++ b/src/routes/solid-start/reference/server/http-header.mdx @@ -16,7 +16,7 @@ description: >- CORS, and SEO headers for server-rendered pages. --- -`HttpHeader` provides a way to set headers on HTTPs response sent by the server. +`HttpHeader` provides a way to set headers on HTTP responses sent by the server. ```tsx import { HttpHeader } from "@solidjs/start"; diff --git a/src/routes/solid-start/reference/server/use-server.mdx b/src/routes/solid-start/reference/server/use-server.mdx index e228d23736..49accd9593 100644 --- a/src/routes/solid-start/reference/server/use-server.mdx +++ b/src/routes/solid-start/reference/server/use-server.mdx @@ -42,7 +42,7 @@ const logHello = async (message: string) => { ## Basic usage -When using `"use server"`, regardless of whether server rendering is enabled, the functions it apply to will only run on the server. +When using `"use server"`, regardless of whether server rendering is enabled, the functions it applies to will only run on the server. To do this, compilation is used to transform the `"use server"` function into an RPC call to the server.