Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/routes/concepts/understanding-jsx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const element = <h1>I'm JSX!!</h1>;

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 = () => {
Expand All @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions src/routes/guides/deployment-options/netlify.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<EraserLink
href="https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=VMzcD7r0uwLqgogfyqiZZg"
Expand Down
2 changes: 1 addition & 1 deletion src/routes/guides/deployment-options/zerops.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ services:

## Add zerops.yml to your repository

The `zerops.yml` configuration file is used to tell Zerops how to build and run your application, it should be placed to the root of your appplication's repository.
The `zerops.yml` configuration file is used to tell Zerops how to build and run your application, it should be placed at the root of your appplication's repository.

Example for **SSR (Server-Side Rendering)** Apps:

Expand Down
8 changes: 4 additions & 4 deletions src/routes/guides/testing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export const Counter = () => {

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:

Expand Down Expand Up @@ -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 `<title>` 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).

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion src/routes/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/routes/reference/jsx-attributes/attr.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions src/routes/solid-router/concepts/actions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion src/routes/solid-router/concepts/alternative-routers.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/routes/solid-router/rendering-modes/ssr.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
2 changes: 1 addition & 1 deletion src/routes/solid-start/guides/security.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion src/routes/solid-start/reference/server/http-header.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
2 changes: 1 addition & 1 deletion src/routes/solid-start/reference/server/use-server.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Loading