{props.children}
+ {props.children}
+
+
Outcome 1
-Outcome 2
-Outcome 1
+Outcome 2
+Outcome 2
My Element
+ const myElement =My Element
; - returnMy Element
{ - myElement = el // el is created but not yet added to the DOM - }}> +
{ + myElement = el; // el is created but not yet added to the DOM + }} +> My Element
``` @@ -69,6 +85,7 @@ confirm it. ```tsx let myElement!: HTMLDivElement; ``` + ::: ### Signals as refs @@ -114,21 +131,21 @@ To access the `ref` in the child component, it is passed as a prop: ```tsx // Parent component -import { Canvas } from "./Canvas.jsx" +import { Canvas } from "./Canvas.jsx"; function ParentComponent() { - let canvasRef + let canvasRef; const animateCanvas = () => { // Manipulate the canvas using canvasRef... - } + }; return (I have a {animal.breed} named {animal.name}!
- ) -} + ); +}; ``` This means JavaScript content can be rendered on web pages based on an application's state or logic. @@ -98,6 +112,7 @@ In JSX files, HTML attributes are used much like regular HTML, with a few key di Click me! ``` + ::: ### JSX properties (props) @@ -110,17 +125,17 @@ They connect the component with the data it requires, for seamless data flows an - **Static props**: In Solid's JSX, static props are integrated directly into the HTML by cloning the template and using them as attributes. - - **Dynamic props**: - Dynamic props rely on state, allowing the content or properties to be dynamic. - An example is changing the style of an element in response to interactions within an application. - This can be expressed in the form of signals (`value={value()}`). +- **Dynamic props**: + Dynamic props rely on state, allowing the content or properties to be dynamic. + An example is changing the style of an element in response to interactions within an application. + This can be expressed in the form of signals (`value={value()}`). - **Data transfer**: Props are also used to fill components with data that comes from resources, like [`createResource`](/reference/basic-reactivity/create-resource) calls. This results in components that react in real-time to data changes. :::note -Expressions, whether fixed or dynamic, get applied *in the order defined within the JSX*. +Expressions, whether fixed or dynamic, get applied _in the order defined within the JSX_. This works for a wide range of DOM elements, but will not work with elements that require attributes to be defined in a special order, such as input types with `type='range'`. When order influences an element's behavior, users must define the expressions in the order that the element is expected. diff --git a/src/routes/configuration/environment-variables.mdx b/src/routes/configuration/environment-variables.mdx index 292a9210a..6ccf8813f 100644 --- a/src/routes/configuration/environment-variables.mdx +++ b/src/routes/configuration/environment-variables.mdx @@ -1,5 +1,19 @@ --- title: Environment variables +use_cases: >- + api keys, configuration, secrets management, build-time config, + environment-specific settings +tags: + - environment + - variables + - config + - vite + - secrets + - deployment +version: "1.0" +description: >- + Configure public and private environment variables in Solid apps using Vite's + built-in support for secure configuration. --- Solid is built on top of [Vite](https://vitejs.dev/), which offers a convenient way to handle environment variables. @@ -62,8 +76,8 @@ function MyComponent() { These variables should only be accessed in your backend code, so it's best not to use the `VITE_` prefix for them. Instead, use `process.env` to access them. Depending on the [Nitro preset](https://nitro.build/deploy) chosen, they'll be made available automatically or they will require an external dependency such as [dotenv](https://www.npmjs.com/package/dotenv). ```jsx -DB_HOST="somedb://192.110.0" -DB_PASSWORD = super_secret_password_hash +DB_HOST = "somedb://192.110.0"; +DB_PASSWORD = super_secret_password_hash; ``` To access them, within your backend code, use `process.env`. @@ -82,11 +96,10 @@ For an example, check the pseudo-code below. It is also possible to make `process.env` type-safe via the same `env.d.ts` file. ```typescript - declare namespace NodeJS { interface ProcessEnv { - readonly DB_URL: string - readonly DB_PASSWORD: string + readonly DB_URL: string; + readonly DB_PASSWORD: string; } } ``` diff --git a/src/routes/configuration/typescript.mdx b/src/routes/configuration/typescript.mdx index 61b1a82af..6206710e7 100644 --- a/src/routes/configuration/typescript.mdx +++ b/src/routes/configuration/typescript.mdx @@ -1,5 +1,20 @@ --- title: TypeScript +use_cases: >- + type safety, code reliability, large projects, team collaboration, api + documentation, migrating from javascript +tags: + - typescript + - types + - migration + - configuration + - jsx + - development + - tooling +version: "1.0" +description: >- + Learn to configure TypeScript with SolidJS for enhanced type safety, better + IDE support, and reliable component development. --- [TypeScript](https://www.typescriptlang.org/) is a superset of JavaScript that enhances code reliability and predictability through the introduction of [static types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html). @@ -58,7 +73,6 @@ typescript 2. Run the following command to generate a `tsconfig.json` file. - ```package-exec tsc --init ``` @@ -645,6 +659,7 @@ declare module "solid-js" { ``` :::note + New in v1.9.0 ::: @@ -685,8 +700,10 @@ To include specific native events, you can choose certain events (e.g. `mousemov ```ts declare module "solid-js" { namespace JSX { - interface CustomEvents - extends PickLoading...
-Loading...
+
-
- );
+ return (
+ <>
+
+
+ );
}
```
This is ideal when you want to have human-readable, stable references to static assets.
This can be useful for assets such as:
+
- documents
- service workers
- images, audio, and video
@@ -52,18 +67,18 @@ Vite provides a way to import assets directly into your Solid components:
import logo from "./solid.png";
export default function About() {
- return (
- <>
- 
-
- );
+ return (
+ <>
+
+
+ );
}
```
-When you use imports, Vite will create a hashed filename.
+When you use imports, Vite will create a hashed filename.
For example, `solid.png` will become `solid.2d8efhg.png`.
## Public directory versus imports
@@ -71,8 +86,8 @@ For example, `solid.png` will become `solid.2d8efhg.png`.
The public directory and imports are both valid ways to include static assets in your project.
The driver to use one over the other is based on your use case.
-For dynamic updates to your assets, using the public directory is the best choice.
+For dynamic updates to your assets, using the public directory is the best choice.
It allows you to maintain full control over the asset URL paths, ensuring that the links remain consistent even when the assets are updated.
-When using imports, the filename is hashed and therefore will not be predictable over time.
+When using imports, the filename is hashed and therefore will not be predictable over time.
This can be beneficial for cache busting but detrimental if you want to send someone a link to the asset.
diff --git a/src/routes/solid-start/data.json b/src/routes/solid-start/data.json
index aac47ac2c..7457ff697 100644
--- a/src/routes/solid-start/data.json
+++ b/src/routes/solid-start/data.json
@@ -3,6 +3,7 @@
"pages": [
"index.mdx",
"getting-started.mdx",
+ "migrating-from-v1.mdx",
"building-your-application",
"advanced",
"guides"
diff --git a/src/routes/solid-start/getting-started.mdx b/src/routes/solid-start/getting-started.mdx
index 3cd0f1761..d883b18f6 100644
--- a/src/routes/solid-start/getting-started.mdx
+++ b/src/routes/solid-start/getting-started.mdx
@@ -1,5 +1,19 @@
---
-title: "Getting started"
+title: Getting started
+use_cases: >-
+ new project, initial setup, project creation, starter template, first app,
+ quick start, bootstrapping
+tags:
+ - setup
+ - installation
+ - starter
+ - template
+ - quickstart
+ - init
+version: "1.0"
+description: >-
+ Start your first SolidStart project with templates and step-by-step setup.
+ Create, configure, and run your Solid application.
---
The easiest way to get started with Solid is to use the SolidStart starter.
@@ -7,25 +21,33 @@ This starter contains a collection of templates that can be used to quickly boot
**1. Install SolidStart**
-Once you have created a directory for your new application, you can initialize SolidStart with the following command:
+To start a new project you can initialize SolidStart with the following command:
```package-create
solid@latest
```
+This will create a new directory for your project based on the name you enter.
+
**2. Choose a template**
When you run the command above, SolidStart will prompt you to choose a template for your new application.
-You can see a [list of these options in the SolidStart repository](https://github.com/solidjs/solid-start/tree/main/examples).
+You can see a [list of these options in the templates repository](https://github.com/solidjs/templates/tree/main/solid-start).
```bash frame="terminal"
-? Which template do you want to use? βΊ - Use arrow-keys. Return to submit.
-β― bare
- hackernews
- with-auth
- with-mdx
- with-tailwindcss
- with-vitest
+β Which template would you like to use?
+β β basic
+β β bare
+β β with-solidbase
+β β with-auth
+β β with-authjs
+β β with-drizzle
+β β with-mdx
+β β with-prisma
+β β with-solid-styled
+β β with-tailwindcss
+β ...
+β
```
Following the prompts, you might be asked questions like whether you want to use Server Side Rendering or TypeScript.
@@ -36,6 +58,7 @@ Choose your desired options to continue.
Once you have chosen your template and configuration options, you can navigate to the directory you created and run the following command to install dependencies:
```package-install-local
+
```
After this command has finished, your new SolidStart application is ready to go!
@@ -52,11 +75,12 @@ Your application should now be running locally on port 3000.
You can view it by navigating to [http://localhost:3000](http://localhost:3000).
:::note
- SolidStart uses [Vinxi](https://vinxi.vercel.app/) both for starting a development server with [Vite](https://vitejs.dev/) and for building and starting a production server with [Nitro](https://nitro.build/).
+SolidStart uses [Vinxi](https://vinxi.vercel.app/) both for starting a development server with [Vite](https://vitejs.dev/) and for building and starting a production server with [Nitro](https://nitro.build/).
When you run your application, you are actually running `vinxi dev` under the hood.
You can read more about the [Vinxi CLI and how it is configured in the Vinxi documentation](https://vinxi.vercel.app/api/cli.html).
+
:::
## Project files
@@ -79,14 +103,15 @@ src/
For example, if you chose to use JavaScript rather than TypeScript, your file extensions will be `.jsx` instead of `.tsx`.
Each directory and file in this structure serves a specific purpose in your SolidStart application:
+
- `public/` - contains the publicly-accessible assets for your application.
-This is where images, fonts, and other files that you want to be accessible to the public should be placed.
+ This is where images, fonts, and other files that you want to be accessible to the public should be placed.
- `src/` - where your Start application code will live.
-It is aliased to `~/` for importing in your code.
+ It is aliased to `~/` for importing in your code.
- `src/routes/` - any files or pages will be located in this directory.
-You can learn more about the [`routes` folder in the routing section](/solid-start/building-your-application/routing).
+ You can learn more about the [`routes` folder in the routing section](/solid-start/building-your-application/routing).
- [`src/entry-client.tsx`](/solid-start/reference/entrypoints/entry-client) - this file is what loads and _hydrates_ the JavaScript for our application on the client side (in browser).
-In most cases, you will **not** need to modify this file.
+ In most cases, you will **not** need to modify this file.
- [`src/entry-server.tsx`](/solid-start/reference/entrypoints/entry-server) - this file will handle requests on the server.
-Like `entry-client.tsx`, in most cases you will **not** need to modify this file.
+ Like `entry-client.tsx`, in most cases you will **not** need to modify this file.
- [`app.tsx`](/solid-start/reference/entrypoints/app) - this is the HTML root of your application both for client and server rendering. You can think of this as the shell inside which your application will be rendered.
diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 5a1a4c38a..859a1f6bb 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -1,18 +1,25 @@
---
-title: "Data fetching"
+title: Data fetching
+use_cases: >-
+ api calls, database queries, loading states, error handling, preloading data,
+ client fetching, orm integration
+tags:
+ - fetch
+ - data
+ - api
+ - async
+ - loading
+ - query
+ - database
+version: "1.0"
+description: >-
+ Master data fetching in SolidStart with practical examples. Handle loading
+ states, errors, preloading, and database queries.
---
-SolidStart is built on top of [Solid](/) and uses [Solid Router](/solid-router) by default.
-This means you can leverage their respective data-fetching primitives within SolidStart.
-Since SolidStart itself provides minimal data-fetching APIs, most functionality comes from Solid and Solid Router.
+This guide provides practical examples of common data-fetching tasks in SolidStart.
-This guide provides practical examples of common data-fetching tasks using these primitives.
-
-:::note
-For detailed API information, refer to the [Solid](/) and [Solid Router](/solid-router) documentation.
-:::
-
-Here's a simple example:
+Here's an example showing how to create a [`query`](/solid-router/reference/data-apis/query) and access its data with the [`createAsync` primitive](/solid-router/reference/data-apis/create-async):
```tsx tab title="TypeScript"
// src/routes/index.tsx
@@ -54,12 +61,9 @@ export default function Page() {
}
```
-In this example, a [`query`](/solid-router/reference/data-apis/query) is created.
-In order to access it's data within the component, the [`createAsync`](/solid-router/reference/data-apis/create-async) primitive was used.
-
## Showing loading UI
-To show a loading UI during data-fetching:
+To show a loading UI during data fetching:
1. Import [`Suspense`](/reference/components/suspense) from `solid-js`.
2. Wrap your data rendering in `
{props.children}
diff --git a/src/ui/button-link.tsx b/src/ui/button-link.tsx
index e9058e12d..5bfe0d0b5 100644
--- a/src/ui/button-link.tsx
+++ b/src/ui/button-link.tsx
@@ -1,3 +1,4 @@
+import { splitProps } from "solid-js";
import { A, type RouterLinkProps } from "./i18n-anchor";
type ButtonLinkProps = RouterLinkProps & {
@@ -5,16 +6,18 @@ type ButtonLinkProps = RouterLinkProps & {
};
export const ButtonLink = (props: ButtonLinkProps) => {
+ const [localProps, otherProps] = splitProps(props, ["variant"]);
+
return (
);
};
diff --git a/src/ui/callout.tsx b/src/ui/callout.tsx
index 9878c4266..4f9fd060d 100644
--- a/src/ui/callout.tsx
+++ b/src/ui/callout.tsx
@@ -1,4 +1,3 @@
-import { Alert } from "@kobalte/core";
import { Icon } from "solid-heroicons";
import { mergeProps, type JSX, Show, untrack } from "solid-js";
import {
@@ -91,7 +90,7 @@ export function Callout(props: CalloutProps) {
const IconComponent = icons[iconType];
return (
-