From 8a386c1c4b666efac9a0f3a6bc98519da5a7b850 Mon Sep 17 00:00:00 2001 From: Erik Demaine Date: Thu, 27 Jun 2024 09:46:19 -0400 Subject: [PATCH] Add imports to all reference docs, make more uniform --- src/routes/guides/fetching-data.mdx | 4 ++-- .../guides/styling-components/tailwind.mdx | 6 +++--- src/routes/guides/styling-components/uno.mdx | 12 +++++------ src/routes/guides/testing.mdx | 4 ++-- .../basic-reactivity/create-effect.mdx | 2 ++ .../basic-reactivity/create-memo.mdx | 2 ++ .../basic-reactivity/create-resource.mdx | 5 ++++- .../basic-reactivity/create-signal.mdx | 3 +++ .../reference/component-apis/children.mdx | 3 +++ .../component-apis/create-context.mdx | 3 +++ .../component-apis/create-unique-id.mdx | 2 ++ src/routes/reference/component-apis/lazy.mdx | 3 +++ .../reference/component-apis/use-context.mdx | 3 +++ src/routes/reference/components/dynamic.mdx | 3 +++ .../reference/components/error-boundary.mdx | 3 +++ src/routes/reference/components/for.mdx | 3 +++ .../reference/components/index-component.mdx | 3 +++ src/routes/reference/components/portal.mdx | 3 +++ src/routes/reference/components/show.mdx | 3 +++ .../reference/components/suspense-list.mdx | 3 +++ src/routes/reference/components/suspense.mdx | 3 +++ .../reference/components/switch-and-match.mdx | 3 +++ src/routes/reference/lifecycle/on-cleanup.mdx | 4 +++- src/routes/reference/lifecycle/on-mount.mdx | 2 ++ .../reference/reactive-utilities/batch.mdx | 4 +++- .../reactive-utilities/catch-error.mdx | 4 ++-- .../reactive-utilities/create-root.mdx | 2 ++ .../reference/reactive-utilities/from.mdx | 2 ++ .../reactive-utilities/get-owner.mdx | 3 +++ .../reactive-utilities/index-array.mdx | 2 ++ .../reactive-utilities/map-array.mdx | 2 ++ .../reactive-utilities/merge-props.mdx | 2 ++ .../reactive-utilities/observable.mdx | 2 ++ .../reference/reactive-utilities/on.mdx | 4 +++- .../reactive-utilities/run-with-owner.mdx | 5 ++++- .../reactive-utilities/split-props.mdx | 2 ++ .../reactive-utilities/start-transition.mdx | 4 +++- .../reference/reactive-utilities/untrack.mdx | 2 ++ .../reactive-utilities/use-transition.mdx | 2 ++ src/routes/reference/rendering/dev.mdx | 6 ++++-- src/routes/reference/rendering/hydrate.mdx | 10 +++++++++- .../reference/rendering/hydration-script.mdx | 3 +++ src/routes/reference/rendering/is-server.mdx | 2 ++ .../reference/rendering/render-to-stream.mdx | 2 ++ .../rendering/render-to-string-async.mdx | 2 ++ .../reference/rendering/render-to-string.mdx | 2 ++ src/routes/reference/rendering/render.mdx | 11 +++++++--- .../secondary-primitives/create-computed.mdx | 2 ++ .../secondary-primitives/create-deferred.mdx | 2 ++ .../secondary-primitives/create-reaction.mdx | 2 ++ .../create-render-effect.mdx | 2 ++ .../secondary-primitives/create-selector.mdx | 2 ++ .../server-utilities/get-request-event.mdx | 20 +++++++++++++------ .../store-utilities/create-mutable.mdx | 5 ++++- .../store-utilities/create-store.mdx | 4 ++-- .../store-utilities/modify-mutable.mdx | 14 +++++++------ .../reference/store-utilities/produce.mdx | 3 +++ .../reference/store-utilities/reconcile.mdx | 5 ++++- .../reference/store-utilities/unwrap.mdx | 5 +++-- 59 files changed, 186 insertions(+), 45 deletions(-) diff --git a/src/routes/guides/fetching-data.mdx b/src/routes/guides/fetching-data.mdx index 16cc6888a..5350e700f 100644 --- a/src/routes/guides/fetching-data.mdx +++ b/src/routes/guides/fetching-data.mdx @@ -143,7 +143,7 @@ This functionality is particularly valuable in applications like task lists. For example, when users input a new task and click the `Add` button, the list will refresh immediately, regardless of the ongoing data communication with the server. ```jsx -import { For, createResource } from 'solid-js'; +import { For, createResource } from "solid-js" function TodoList() { const [tasks, { mutate }] = createResource(fetchTasksFromServer); @@ -172,7 +172,7 @@ When real-time feedback is necessary, the `refetch` method can be used to reload This method can be particularly useful when data is constantly evolving, such as with real-time financial applications. ```jsx -import { createResource, onCleanup } from 'solid-js'; +import { createResource, onCleanup } from "solid-js" function StockPriceTicker() { const [prices, { refetch }] = createResource(fetchStockPrices); diff --git a/src/routes/guides/styling-components/tailwind.mdx b/src/routes/guides/styling-components/tailwind.mdx index e6bb6b849..7b3fc7fdf 100644 --- a/src/routes/guides/styling-components/tailwind.mdx +++ b/src/routes/guides/styling-components/tailwind.mdx @@ -96,9 +96,9 @@ These directives inform PostCSS that you're using Tailwind and establish the ord Import your `index.css` file into the root `index.jsx` or `index.tsx` file: ```jsx -import { render } from 'solid-js/web'; -import App from './App'; -import "./index.css"; +import { render } from "solid-js/web" +import App from "./App" +import "./index.css" render(() => , document.getElementById('root') as HTMLElement); ``` diff --git a/src/routes/guides/styling-components/uno.mdx b/src/routes/guides/styling-components/uno.mdx index 35e4722f3..37b4a99b3 100644 --- a/src/routes/guides/styling-components/uno.mdx +++ b/src/routes/guides/styling-components/uno.mdx @@ -81,9 +81,9 @@ In your root `index.jsx` or `index.tsx` file, import UnoCSS: ```jsx /* @refresh reload */ import "uno.css" -import { render } from 'solid-js/web'; -import './index.css'; -import App from './App'; +import { render } from "solid-js/web" +import "./index.css" +import App from "./App" render(() => , document.getElementById('root') as HTMLElement); ``` @@ -93,9 +93,9 @@ Alternatively, you can use the alias `import "virtual:uno.css"`: ```jsx /* @refresh reload */ import "virtual:uno.css" -import { render } from 'solid-js/web'; -import './index.css'; -import App from './App'; +import { render } from "solid-js/web" +import "./index.css" +import App from "./App" render(() => , document.getElementById('root') as HTMLElement); ``` diff --git a/src/routes/guides/testing.mdx b/src/routes/guides/testing.mdx index 2d02163ba..d7a538124 100644 --- a/src/routes/guides/testing.mdx +++ b/src/routes/guides/testing.mdx @@ -100,7 +100,7 @@ The purpose of this file is to describe the intended behavior from a user's pers import { test, expect } from "vitest" import { render } from "@solidjs/testing-library" import userEvent from "@testing-library/user-event" -import { Counter } from './Counter' +import { Counter } from "./Counter" const user = userEvent.setup() @@ -248,7 +248,7 @@ Solid allows components to break through the DOM tree structure using [` ```jsx frame="none" import { test, expect } from "vitest" import { render, screen } from "@solidjs/testing-library" -import { Toast } from './Toast' +import { Toast } from "./Toast" test("increments value", async () => { render(() =>

This is a toast

) diff --git a/src/routes/reference/basic-reactivity/create-effect.mdx b/src/routes/reference/basic-reactivity/create-effect.mdx index e95dc34ac..db2a5623e 100644 --- a/src/routes/reference/basic-reactivity/create-effect.mdx +++ b/src/routes/reference/basic-reactivity/create-effect.mdx @@ -3,6 +3,8 @@ title: createEffect --- ```tsx +import { createEffect } from "solid-js" + function createEffect(fn: (v: T) => T, value?: T): void ``` diff --git a/src/routes/reference/basic-reactivity/create-memo.mdx b/src/routes/reference/basic-reactivity/create-memo.mdx index 9f1fc0ef9..58f21b140 100644 --- a/src/routes/reference/basic-reactivity/create-memo.mdx +++ b/src/routes/reference/basic-reactivity/create-memo.mdx @@ -6,6 +6,8 @@ Memos let you efficiently use a derived value in many reactive computations. `createMemo` creates a readonly reactive value equal to the return value of the given function and makes sure that function only gets executed when its dependencies change. ```tsx +import { createMemo } from "solid-js" + function createMemo( fn: (v: T) => T, value?: T, diff --git a/src/routes/reference/basic-reactivity/create-resource.mdx b/src/routes/reference/basic-reactivity/create-resource.mdx index c4d914a15..3c879e393 100644 --- a/src/routes/reference/basic-reactivity/create-resource.mdx +++ b/src/routes/reference/basic-reactivity/create-resource.mdx @@ -5,6 +5,9 @@ title: createResource This creates a signal that returns the result of an async request. ```ts +import { createResource } from "solid-js" +import type { ResourceReturn, ResourceOptions } from "solid-js" + type ResourceReturn = [ { (): T | undefined @@ -19,7 +22,7 @@ type ResourceReturn = [ } ] -export type ResourceOptions = { +type ResourceOptions = { initialValue?: T name?: string deferStream?: boolean diff --git a/src/routes/reference/basic-reactivity/create-signal.mdx b/src/routes/reference/basic-reactivity/create-signal.mdx index 9b56d210f..3b3aac76a 100644 --- a/src/routes/reference/basic-reactivity/create-signal.mdx +++ b/src/routes/reference/basic-reactivity/create-signal.mdx @@ -6,6 +6,8 @@ Signals are the most basic reactive primitive. They track a single value (which can be any JavaScript object) that changes over time. ```tsx +import { createSignal } from "solid-js" + function createSignal( initialValue: T, options?: { @@ -16,6 +18,7 @@ function createSignal( ): [get: () => T, set: (v: T) => T] // available types for return value of createSignal: +import type { Signal, Accessor, Setter } from "solid-js" type Signal = [get: Accessor, set: Setter] type Accessor = () => T type Setter = (v: T | ((prev?: T) => T)) => T diff --git a/src/routes/reference/component-apis/children.mdx b/src/routes/reference/component-apis/children.mdx index 717a8cdac..314e10970 100644 --- a/src/routes/reference/component-apis/children.mdx +++ b/src/routes/reference/component-apis/children.mdx @@ -3,6 +3,9 @@ title: children --- ```tsx +import { children } from "solid-js"; +import type { JSX, ResolvedChildren } from "solid-js"; + function children(fn: () => JSX.Element): () => ResolvedChildren ``` diff --git a/src/routes/reference/component-apis/create-context.mdx b/src/routes/reference/component-apis/create-context.mdx index 89a437406..639649dde 100644 --- a/src/routes/reference/component-apis/create-context.mdx +++ b/src/routes/reference/component-apis/create-context.mdx @@ -4,6 +4,9 @@ order: 5 --- ```tsx +import { createContext } from "solid-js" +import type { Context } from "solid-js" + interface Context { id: symbol Provider: (props: { value: T; children: any }) => any diff --git a/src/routes/reference/component-apis/create-unique-id.mdx b/src/routes/reference/component-apis/create-unique-id.mdx index dfcddf2b1..65088f374 100644 --- a/src/routes/reference/component-apis/create-unique-id.mdx +++ b/src/routes/reference/component-apis/create-unique-id.mdx @@ -3,6 +3,8 @@ title: createUniqueId --- ```ts +import { createUniqueId } from "solid-js" + function createUniqueId(): string ``` diff --git a/src/routes/reference/component-apis/lazy.mdx b/src/routes/reference/component-apis/lazy.mdx index a12c66d14..d6b714433 100644 --- a/src/routes/reference/component-apis/lazy.mdx +++ b/src/routes/reference/component-apis/lazy.mdx @@ -3,6 +3,9 @@ title: lazy --- ```ts +import { lazy } from "solid-js" +import type { Component } from "solid-js" + function lazy>( fn: () => Promise<{ default: T }> ): T & { preload: () => Promise } diff --git a/src/routes/reference/component-apis/use-context.mdx b/src/routes/reference/component-apis/use-context.mdx index 5c084146a..43d7f8b22 100644 --- a/src/routes/reference/component-apis/use-context.mdx +++ b/src/routes/reference/component-apis/use-context.mdx @@ -3,6 +3,9 @@ title: useContext --- ```ts +import { useContext } from "solid-js" +import type { Context } from "solid-js" + function useContext(context: Context): T ``` diff --git a/src/routes/reference/components/dynamic.mdx b/src/routes/reference/components/dynamic.mdx index 23d4ba8e1..d21959508 100644 --- a/src/routes/reference/components/dynamic.mdx +++ b/src/routes/reference/components/dynamic.mdx @@ -6,6 +6,9 @@ order: 5 This component lets you insert an arbitrary Component or tag and passes the props through to it. ```tsx +import { Dynamic } from "solid-js/web" +import type { JSX } from "solid-js" + function Dynamic( props: T & { children?: any diff --git a/src/routes/reference/components/error-boundary.mdx b/src/routes/reference/components/error-boundary.mdx index 97ec4b136..bb5b9c1db 100644 --- a/src/routes/reference/components/error-boundary.mdx +++ b/src/routes/reference/components/error-boundary.mdx @@ -6,6 +6,9 @@ order: 5 Catches uncaught errors and renders fallback content. ```tsx +import { ErrorBoundary } from "solid-js" +import type { JSX } from "solid-js" + function ErrorBoundary(props: { fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element) children: JSX.Element diff --git a/src/routes/reference/components/for.mdx b/src/routes/reference/components/for.mdx index 5923fc9a1..a02434702 100644 --- a/src/routes/reference/components/for.mdx +++ b/src/routes/reference/components/for.mdx @@ -6,6 +6,9 @@ order: 5 The `` component is used to render a list of items. It is similar to the `.map()` function in JavaScript. ```ts +import { For } from "solid-js" +import type { JSX } from "solid-js" + function For(props: { each: readonly T[] fallback?: JSX.Element diff --git a/src/routes/reference/components/index-component.mdx b/src/routes/reference/components/index-component.mdx index de88da5ff..f3f6b6427 100644 --- a/src/routes/reference/components/index-component.mdx +++ b/src/routes/reference/components/index-component.mdx @@ -5,6 +5,9 @@ title: Non-keyed list iteration (rendered nodes are keyed to an array index). This is useful when there is no conceptual key, like if the data consists of primitives and it is the index that is fixed rather than the value. ```ts +import { Index } from "solid-js" +import type { JSX } from "solid-js" + function Index(props: { each: readonly T[]; fallback?: JSX.Element; diff --git a/src/routes/reference/components/portal.mdx b/src/routes/reference/components/portal.mdx index 305ea16a9..1e4984430 100644 --- a/src/routes/reference/components/portal.mdx +++ b/src/routes/reference/components/portal.mdx @@ -7,6 +7,9 @@ title: This is useful when your UI has some elements that need to appear on top of everything else, such as modals and tooltips. ```tsx +import { Portal } from "solid-js/web" +import type { JSX } from "solid-js" + function Portal(props: { mount?: Node useShadow?: boolean diff --git a/src/routes/reference/components/show.mdx b/src/routes/reference/components/show.mdx index 3e675d065..4e0cbc696 100644 --- a/src/routes/reference/components/show.mdx +++ b/src/routes/reference/components/show.mdx @@ -6,6 +6,9 @@ order: 5 The Show control flow is used to conditional render part of the view: it renders children when the when is truthy, a fallback otherwise. It is similar to the ternary operator `(when ? children : fallback)` but is ideal for templating JSX. ```ts +import { Show } from "solid-js" +import type { JSX } from "solid-js" + function Show(props: { when: T | undefined | null | false keyed: boolean diff --git a/src/routes/reference/components/suspense-list.mdx b/src/routes/reference/components/suspense-list.mdx index 9a63a105f..38bc42b37 100644 --- a/src/routes/reference/components/suspense-list.mdx +++ b/src/routes/reference/components/suspense-list.mdx @@ -6,6 +6,9 @@ order: 5 SuspenseList allows for coordinating multiple parallel Suspense and SuspenseList components. It controls the order in which content is revealed to reduce layout thrashing and has an option to collapse or hide fallback states. ```ts +import { SuspenseList } from "solid-js" +import type { JSX } from "solid-js" + function SuspenseList(props: { children: JSX.Element revealOrder: "forwards" | "backwards" | "together" diff --git a/src/routes/reference/components/suspense.mdx b/src/routes/reference/components/suspense.mdx index d71edc7c5..fe3efd23b 100644 --- a/src/routes/reference/components/suspense.mdx +++ b/src/routes/reference/components/suspense.mdx @@ -6,6 +6,9 @@ order: 5 A component that tracks all resources read under it and shows a fallback placeholder state until they are resolved. What makes `Suspense` different than `Show` is it is non-blocking in that both branches exist at the same time even if not currently in the DOM. This means that the fallback can be rendered while the children are loading. This is useful for loading states and other asynchronous operations. ```tsx +import { Suspense } from "solid-js" +import type { JSX } from "solid-js" + function Suspense(props: { fallback?: JSX.Element children: JSX.Element diff --git a/src/routes/reference/components/switch-and-match.mdx b/src/routes/reference/components/switch-and-match.mdx index 5cc9f4690..f733467b5 100644 --- a/src/routes/reference/components/switch-and-match.mdx +++ b/src/routes/reference/components/switch-and-match.mdx @@ -6,6 +6,9 @@ order: 5 Useful for when there are more than 2 mutual exclusive conditions. It is a more flexible version of the if-else-if-else-if-else-... chain. ```ts +import { Switch, Match } from "solid-js" +import type { MatchProps, JSX } from "solid-js" + function Switch(props: { fallback?: JSX.Element children: JSX.Element diff --git a/src/routes/reference/lifecycle/on-cleanup.mdx b/src/routes/reference/lifecycle/on-cleanup.mdx index 827f90f0b..43a464023 100644 --- a/src/routes/reference/lifecycle/on-cleanup.mdx +++ b/src/routes/reference/lifecycle/on-cleanup.mdx @@ -10,6 +10,8 @@ When used in a Component, it runs when the component is unmounted. When used in reactive contexts, such [`createEffect`](/reference/basic-reactivity/create-effect), [`createMemo`](/reference/basic-reactivity/create-memo) or a [`createRoot`](/reference/reactive-utilities/create-root), it runs when the reactive scope is disposed or refreshed. ```ts +import { onCleanup } from "solid-js" + function onCleanup(fn: () => void): void; ``` @@ -17,7 +19,7 @@ Without the `onCleanup` function, the event listener would remain attached to th This can cause memory leaks and other issues. ```tsx -import { createSignal, onCleanup } from "solid-js"; +import { createSignal, onCleanup } from "solid-js" const Component = () => { const [count, setCount] = createSignal(0); diff --git a/src/routes/reference/lifecycle/on-mount.mdx b/src/routes/reference/lifecycle/on-mount.mdx index f6bb7f970..f54e852fc 100644 --- a/src/routes/reference/lifecycle/on-mount.mdx +++ b/src/routes/reference/lifecycle/on-mount.mdx @@ -7,6 +7,8 @@ Registers a method that runs after initial rendering is done and the elements ar Ideal for using [refs](/reference/jsx-attributes/ref) and managing other one-time setup that requires the ```tsx +import { onMount } from "solid-js" + function onMount(fn: () => void): void ``` diff --git a/src/routes/reference/reactive-utilities/batch.mdx b/src/routes/reference/reactive-utilities/batch.mdx index 72c78e680..c13b753a8 100644 --- a/src/routes/reference/reactive-utilities/batch.mdx +++ b/src/routes/reference/reactive-utilities/batch.mdx @@ -3,7 +3,9 @@ title: batch --- ```ts -function batch(fn: () => T): T; +import { batch } from "solid-js" + +function batch(fn: () => T): T ``` This is a low level API that is used by Solid to batch updates. diff --git a/src/routes/reference/reactive-utilities/catch-error.mdx b/src/routes/reference/reactive-utilities/catch-error.mdx index f88dcb0ef..f7b0c86d2 100644 --- a/src/routes/reference/reactive-utilities/catch-error.mdx +++ b/src/routes/reference/reactive-utilities/catch-error.mdx @@ -7,9 +7,9 @@ New in v1.7.0 ```tsx -import { catchError } from "solid-js"; +import { catchError } from "solid-js" -function catchError(tryFn: () => T, onError: (err: any) => void): T; +function catchError(tryFn: () => T, onError: (err: any) => void): T ``` Wraps a `tryFn` with an error handler that fires if an error occurs below that point. diff --git a/src/routes/reference/reactive-utilities/create-root.mdx b/src/routes/reference/reactive-utilities/create-root.mdx index 8092a1099..aab8ce89e 100644 --- a/src/routes/reference/reactive-utilities/create-root.mdx +++ b/src/routes/reference/reactive-utilities/create-root.mdx @@ -3,6 +3,8 @@ title: createRoot --- ```ts +import { createRoot } from "solid-js" + function createRoot(fn: (dispose: () => void) => T): T ``` diff --git a/src/routes/reference/reactive-utilities/from.mdx b/src/routes/reference/reactive-utilities/from.mdx index b774a9f75..35de4054b 100644 --- a/src/routes/reference/reactive-utilities/from.mdx +++ b/src/routes/reference/reactive-utilities/from.mdx @@ -3,6 +3,8 @@ title: from --- ```tsx +import { from } from "solid-js" + function from( producer: | ((setter: (v: T) => T) => () => void) diff --git a/src/routes/reference/reactive-utilities/get-owner.mdx b/src/routes/reference/reactive-utilities/get-owner.mdx index 45b023ef2..1be5c3f78 100644 --- a/src/routes/reference/reactive-utilities/get-owner.mdx +++ b/src/routes/reference/reactive-utilities/get-owner.mdx @@ -3,6 +3,9 @@ title: getOwner --- ```tsx +import { getOwner } from "solid-js" +import type { Owner } from "solid-js" + function getOwner(): Owner ``` diff --git a/src/routes/reference/reactive-utilities/index-array.mdx b/src/routes/reference/reactive-utilities/index-array.mdx index 92c595494..a8b6036ee 100644 --- a/src/routes/reference/reactive-utilities/index-array.mdx +++ b/src/routes/reference/reactive-utilities/index-array.mdx @@ -3,6 +3,8 @@ title: indexArray --- ```tsx +import { indexArray } from "solid-js" + function indexArray( list: () => readonly T[], mapFn: (v: () => T, i: number) => U diff --git a/src/routes/reference/reactive-utilities/map-array.mdx b/src/routes/reference/reactive-utilities/map-array.mdx index 2a85a6abd..78e2dbfd4 100644 --- a/src/routes/reference/reactive-utilities/map-array.mdx +++ b/src/routes/reference/reactive-utilities/map-array.mdx @@ -3,6 +3,8 @@ title: mapArray --- ```ts +import { mapArray } from "solid-js" + function mapArray( list: () => readonly T[], mapFn: (v: T, i: () => number) => U diff --git a/src/routes/reference/reactive-utilities/merge-props.mdx b/src/routes/reference/reactive-utilities/merge-props.mdx index 84f322276..5027201f1 100644 --- a/src/routes/reference/reactive-utilities/merge-props.mdx +++ b/src/routes/reference/reactive-utilities/merge-props.mdx @@ -3,6 +3,8 @@ title: mergeProps --- ```ts +import { mergeProps } from "solid-js" + function mergeProps(...sources: any): any ``` diff --git a/src/routes/reference/reactive-utilities/observable.mdx b/src/routes/reference/reactive-utilities/observable.mdx index 13e44389a..4e1bf23df 100644 --- a/src/routes/reference/reactive-utilities/observable.mdx +++ b/src/routes/reference/reactive-utilities/observable.mdx @@ -3,6 +3,8 @@ title: observable --- ```ts +import { observable } from "solid-js" + function observable(input: () => T): Observable ``` diff --git a/src/routes/reference/reactive-utilities/on.mdx b/src/routes/reference/reactive-utilities/on.mdx index 206f50f9b..33ff2fa32 100644 --- a/src/routes/reference/reactive-utilities/on.mdx +++ b/src/routes/reference/reactive-utilities/on.mdx @@ -3,11 +3,13 @@ title: on --- ```ts +import { on } from "solid-js" + function on any> | (() => any), U>( deps: T, fn: (input: T, prevInput: T, prevValue?: U) => U, options: { defer?: boolean } = {} -): (prevValue?: U) => U | undefined; +): (prevValue?: U) => U | undefined ``` `on` is designed to be passed into a computation to make its dependencies explicit. diff --git a/src/routes/reference/reactive-utilities/run-with-owner.mdx b/src/routes/reference/reactive-utilities/run-with-owner.mdx index 76846c717..1fa7b60a8 100644 --- a/src/routes/reference/reactive-utilities/run-with-owner.mdx +++ b/src/routes/reference/reactive-utilities/run-with-owner.mdx @@ -4,7 +4,10 @@ order: 5 --- ```ts -function runWithOwner(owner: Owner, fn: (() => void) => T): T; +import { runWithOwner } from "solid-js" +import type { Owner } from "solid-js" + +function runWithOwner(owner: Owner, fn: (() => void) => T): T ``` Executes the given function under the provided owner, instead of (and without affecting) the owner of the outer scope. diff --git a/src/routes/reference/reactive-utilities/split-props.mdx b/src/routes/reference/reactive-utilities/split-props.mdx index 0c41b8502..3841792ce 100644 --- a/src/routes/reference/reactive-utilities/split-props.mdx +++ b/src/routes/reference/reactive-utilities/split-props.mdx @@ -3,6 +3,8 @@ title: splitProps --- ```ts +import { splitProps } from "solid-js" + function splitProps( props: T, ...keys: Array<(keyof T)[]> diff --git a/src/routes/reference/reactive-utilities/start-transition.mdx b/src/routes/reference/reactive-utilities/start-transition.mdx index f70f30d82..2abdf9dad 100644 --- a/src/routes/reference/reactive-utilities/start-transition.mdx +++ b/src/routes/reference/reactive-utilities/start-transition.mdx @@ -3,7 +3,9 @@ title: startTransition --- ```ts -function startTransition: (fn: () => void) => Promise; +import { startTransition } from "solid-js" + +function startTransition: (fn: () => void) => Promise ``` diff --git a/src/routes/reference/reactive-utilities/untrack.mdx b/src/routes/reference/reactive-utilities/untrack.mdx index 9e886c5d1..285915159 100644 --- a/src/routes/reference/reactive-utilities/untrack.mdx +++ b/src/routes/reference/reactive-utilities/untrack.mdx @@ -3,6 +3,8 @@ title: untrack --- ```ts +import { untrack } from "solid-js" + function untrack(fn: () => T): T ``` diff --git a/src/routes/reference/reactive-utilities/use-transition.mdx b/src/routes/reference/reactive-utilities/use-transition.mdx index 382fa9b47..97b085731 100644 --- a/src/routes/reference/reactive-utilities/use-transition.mdx +++ b/src/routes/reference/reactive-utilities/use-transition.mdx @@ -3,6 +3,8 @@ title: useTransition --- ```ts +import { useTransition } from "solid-js" + function useTransition(): [ pending: () => boolean, startTransition: (fn: () => void) => Promise diff --git a/src/routes/reference/rendering/dev.mdx b/src/routes/reference/rendering/dev.mdx index 7a7f92382..39cf81e4f 100644 --- a/src/routes/reference/rendering/dev.mdx +++ b/src/routes/reference/rendering/dev.mdx @@ -3,6 +3,8 @@ title: DEV --- ```ts +import { DEV } from "solid-js" + const DEV: object | undefined ``` @@ -13,8 +15,8 @@ If you want code to run only in development mode (most useful in libraries), you Note that it is always defined on the server, so you may want to combine with [isServer](/reference/rendering/is-server): ```ts -import { DEV } from "solid-js"; -import { isServer } from "solid-js/web"; +import { DEV } from "solid-js" +import { isServer } from "solid-js/web" if (DEV && !isServer) { console.log(...); diff --git a/src/routes/reference/rendering/hydrate.mdx b/src/routes/reference/rendering/hydrate.mdx index 208a9cff7..ba63673ba 100644 --- a/src/routes/reference/rendering/hydrate.mdx +++ b/src/routes/reference/rendering/hydrate.mdx @@ -3,7 +3,15 @@ title: hydrate --- ```ts -function hydrate(fn: () => JSX.Element, node: MountableElement, options?: { renderId?: string; owner?: unknown }): () => void +import { hydrate } from "solid-js/web" +import type { JSX } from "solid-js" +import type { MountableElement } from "solid-js/web" + +function hydrate( + fn: () => JSX.Element, + node: MountableElement, + options?: { renderId?: string; owner?: unknown } +): () => void ``` diff --git a/src/routes/reference/rendering/hydration-script.mdx b/src/routes/reference/rendering/hydration-script.mdx index e11d72930..3448d9041 100644 --- a/src/routes/reference/rendering/hydration-script.mdx +++ b/src/routes/reference/rendering/hydration-script.mdx @@ -3,6 +3,9 @@ title: hydrationScript --- ```ts +import { generateHydrationScript, HydrationScript } from "solid-js/web" +import type { JSX } from "solid-js" + function generateHydrationScript(options: { nonce?: string eventNames?: string[] diff --git a/src/routes/reference/rendering/is-server.mdx b/src/routes/reference/rendering/is-server.mdx index 2c59c4868..4a8539ab2 100644 --- a/src/routes/reference/rendering/is-server.mdx +++ b/src/routes/reference/rendering/is-server.mdx @@ -3,6 +3,8 @@ title: isServer --- ```ts +import { isServer } from "solid-js/web" + const isServer: boolean ``` diff --git a/src/routes/reference/rendering/render-to-stream.mdx b/src/routes/reference/rendering/render-to-stream.mdx index 82b37aa5b..f0a61c9d4 100644 --- a/src/routes/reference/rendering/render-to-stream.mdx +++ b/src/routes/reference/rendering/render-to-stream.mdx @@ -3,6 +3,8 @@ title: renderToStream --- ```ts +import { renderToStream } from "solid-js/web" + function renderToStream( fn: () => T, options?: { diff --git a/src/routes/reference/rendering/render-to-string-async.mdx b/src/routes/reference/rendering/render-to-string-async.mdx index 45c541653..5cfb56573 100644 --- a/src/routes/reference/rendering/render-to-string-async.mdx +++ b/src/routes/reference/rendering/render-to-string-async.mdx @@ -3,6 +3,8 @@ title: renderToStringAsync --- ```ts +import { renderToStringAsync } from "solid-js/web" + function renderToStringAsync( fn: () => T, options?: { diff --git a/src/routes/reference/rendering/render-to-string.mdx b/src/routes/reference/rendering/render-to-string.mdx index 159d9a9d2..454b0c971 100644 --- a/src/routes/reference/rendering/render-to-string.mdx +++ b/src/routes/reference/rendering/render-to-string.mdx @@ -3,6 +3,8 @@ title: renderToString --- ```ts +import { renderToString } from "solid-js/web" + function renderToString( fn: () => T, options?: { diff --git a/src/routes/reference/rendering/render.mdx b/src/routes/reference/rendering/render.mdx index a9585858a..f30f5b297 100644 --- a/src/routes/reference/rendering/render.mdx +++ b/src/routes/reference/rendering/render.mdx @@ -3,9 +3,14 @@ title: render --- ```ts -import type { JSX, MountableElement } from "solid-js/web" - -function render(code: () => JSX.Element, element: MountableElement): () => void +import { render } from "solid-js/web" +import type { JSX } from "solid-js" +import type { MountableElement } from "solid-js/web" + +function render( + code: () => JSX.Element, + element: MountableElement +): () => void ``` diff --git a/src/routes/reference/secondary-primitives/create-computed.mdx b/src/routes/reference/secondary-primitives/create-computed.mdx index e4fc87b7b..bd565ff38 100644 --- a/src/routes/reference/secondary-primitives/create-computed.mdx +++ b/src/routes/reference/secondary-primitives/create-computed.mdx @@ -3,6 +3,8 @@ title: createComputed --- ```ts +import { createComputed } from "solid-js" + function createComputed(fn: (v: T) => T, value?: T): void ``` diff --git a/src/routes/reference/secondary-primitives/create-deferred.mdx b/src/routes/reference/secondary-primitives/create-deferred.mdx index 047221fb4..d62f43b08 100644 --- a/src/routes/reference/secondary-primitives/create-deferred.mdx +++ b/src/routes/reference/secondary-primitives/create-deferred.mdx @@ -3,6 +3,8 @@ title: createDeferred --- ```ts +import { createDeferred } from "solid-js" + function createDeferred( source: () => T, options?: { diff --git a/src/routes/reference/secondary-primitives/create-reaction.mdx b/src/routes/reference/secondary-primitives/create-reaction.mdx index 9ce9b5a25..3005c32cf 100644 --- a/src/routes/reference/secondary-primitives/create-reaction.mdx +++ b/src/routes/reference/secondary-primitives/create-reaction.mdx @@ -3,6 +3,8 @@ title: createReaction --- ```ts +import { createReaction } from "solid-js" + function createReaction(onInvalidate: () => void): (fn: () => void) => void ``` diff --git a/src/routes/reference/secondary-primitives/create-render-effect.mdx b/src/routes/reference/secondary-primitives/create-render-effect.mdx index e7f6f239e..bf8a77852 100644 --- a/src/routes/reference/secondary-primitives/create-render-effect.mdx +++ b/src/routes/reference/secondary-primitives/create-render-effect.mdx @@ -3,6 +3,8 @@ title: createRenderEffect --- ```ts +import { createRenderEffect } from "solid-js" + function createRenderEffect(fn: (v: T) => T, value?: T): void ``` diff --git a/src/routes/reference/secondary-primitives/create-selector.mdx b/src/routes/reference/secondary-primitives/create-selector.mdx index aed347960..d48959d10 100644 --- a/src/routes/reference/secondary-primitives/create-selector.mdx +++ b/src/routes/reference/secondary-primitives/create-selector.mdx @@ -3,6 +3,8 @@ title: createSelector --- ```ts +import { createSelector } from "solid-js" + function createSelector( source: () => T, fn?: (a: U, b: T) => boolean diff --git a/src/routes/reference/server-utilities/get-request-event.mdx b/src/routes/reference/server-utilities/get-request-event.mdx index c281a96ab..edbb1ce38 100644 --- a/src/routes/reference/server-utilities/get-request-event.mdx +++ b/src/routes/reference/server-utilities/get-request-event.mdx @@ -3,14 +3,22 @@ title: getRequestEvent --- Solid uses Async Local Storage as a way of injecting the request context anywhere on the server. -This is also the event that shows up in middleware. +The server provides a utility function to access this context +(called a `RequestEvent`). -It can be retrieved by `getRequestEvent` from `"solid-js/web"`. +```js +import { getRequestEvent } from "solid-js/web" +import type { RequestEvent } from "solid-js/web" + +function getRequestEvent(): RequestEvent | undefined +``` + +You can retrieve the request event by calling `getRequestEvent`: ```js -import { getRequestEvent } from "solid-js/web"; +import { getRequestEvent } from "solid-js/web" -const event = getRequestEvent(); +const event = getRequestEvent() ``` ## Request @@ -21,7 +29,7 @@ You can access properties off of it such as `url` and `headers`. `body`, however, does not typically need to be handled directly for things such as server functions or rendering, which already handle mapping. ```js -import { getRequestEvent } from "solid-js/web"; +import { getRequestEvent } from "solid-js/web" const event = getRequestEvent(); if (event) { @@ -35,7 +43,7 @@ The `getRequestEvent` can also be used to stub out the Response - this extends t This is kept up to date so it can be used to read and write headers and status for the current response. ```js -import { getRequestEvent } from "solid-js/web"; +import { getRequestEvent } from "solid-js/web" const event = getRequestEvent(); if (event) { diff --git a/src/routes/reference/store-utilities/create-mutable.mdx b/src/routes/reference/store-utilities/create-mutable.mdx index c69db269e..83be464fb 100644 --- a/src/routes/reference/store-utilities/create-mutable.mdx +++ b/src/routes/reference/store-utilities/create-mutable.mdx @@ -7,6 +7,9 @@ title: createMutable By intercepting property access, it allows automatic tracking of deep nesting via proxy making it useful for integrating external systems or serving as a compatibility layer with frameworks like MobX or Vue. ```tsx +import { createMutable } from "solid-js/store" +import type { Store, StoreNode } from "solid-js/store" + function createMutable(state: T | Store): Store; ``` @@ -18,7 +21,7 @@ function createMutable(state: T | Store): Store; ```tsx -import { createMutable } from "solid-js/store"; +import { createMutable } from "solid-js/store" const state = createMutable({ someValue: 0, diff --git a/src/routes/reference/store-utilities/create-store.mdx b/src/routes/reference/store-utilities/create-store.mdx index cdc53eab2..c084231aa 100644 --- a/src/routes/reference/store-utilities/create-store.mdx +++ b/src/routes/reference/store-utilities/create-store.mdx @@ -7,8 +7,8 @@ Stores were intentionally designed to manage data structures like objects and ar ## Types Signature ```tsx -import { createStore } from "solid-js/store"; -import type { StoreNode, Store, SetStoreFunction } from "solid-js/store"; +import { createStore } from "solid-js/store" +import type { StoreNode, Store, SetStoreFunction } from "solid-js/store" function createStore( state: T | Store diff --git a/src/routes/reference/store-utilities/modify-mutable.mdx b/src/routes/reference/store-utilities/modify-mutable.mdx index 82d426153..e472daff0 100644 --- a/src/routes/reference/store-utilities/modify-mutable.mdx +++ b/src/routes/reference/store-utilities/modify-mutable.mdx @@ -7,7 +7,9 @@ title: modifyMutable It operates within a single [`batch`](/reference/reactive-utilities/batch), ensuring that dependent computations are updated just once, rather than triggering updates for each individual change. ```tsx -function modifyMutable(mutable: T, modifier: (state: T) => T): void; +import { modifyMutable } from "solid-js/store" + +function modifyMutable(mutable: T, modifier: (state: T) => T): void ``` The function takes two arguments: @@ -23,7 +25,7 @@ The function takes two arguments: For example, if the UI depends on multiple fields of a mutable: ```tsx -import { createMutable } from "solid-js/store"; +import { createMutable } from "solid-js/store" const state = createMutable({ user: { @@ -45,7 +47,7 @@ state.user.lastName = "Doe"; To trigger just a single update, the fields can be modified using a `batch`: ```tsx -import { batch } from "solid-js"; +import { batch } from "solid-js" batch(() => { state.user.firstName = "Jane"; @@ -53,10 +55,10 @@ batch(() => { }); ``` -`modifyMutable` combined with `reconcile` or [`produce`](/reference/store-utilities/produce) provides two alternate ways to do similar things: +`modifyMutable` combined with [`reconcile`](/reference/store-utilities/reconcile) or [`produce`](/reference/store-utilities/produce) provides two alternate ways to do similar things: ```tsx -import { modifyMutable, reconcile } from "solid-js/store"; +import { modifyMutable, reconcile } from "solid-js/store" // Replace state.user with the specified object (deleting any other fields) modifyMutable( @@ -69,7 +71,7 @@ modifyMutable( ``` ```tsx -import { modifyMutable, produce } from "solid-js/store"; +import { modifyMutable, produce } from "solid-js/store" // Modify two fields in batch, triggering just one update modifyMutable( diff --git a/src/routes/reference/store-utilities/produce.mdx b/src/routes/reference/store-utilities/produce.mdx index 412f63ad7..4c6b5b2a0 100644 --- a/src/routes/reference/store-utilities/produce.mdx +++ b/src/routes/reference/store-utilities/produce.mdx @@ -5,6 +5,9 @@ title: produce `produce` is an [Immer](https://immerjs.github.io/immer/) inspired API for Solid's Store objects that allow for localized mutation. ```ts +import { produce } from "solid-js/store" +import type { NotWrappable, Store } from "solid-js/store" + function produce( fn: (state: T) => void ): ( diff --git a/src/routes/reference/store-utilities/reconcile.mdx b/src/routes/reference/store-utilities/reconcile.mdx index 6183dedcd..41130ffe0 100644 --- a/src/routes/reference/store-utilities/reconcile.mdx +++ b/src/routes/reference/store-utilities/reconcile.mdx @@ -6,6 +6,9 @@ title: reconcile This is useful when dealing with immutable data from stores or handling large API responses. ```tsx +import { reconcile } from "solid-js/store" +import type { NotWrappable, Store } from "solid-js/store" + function reconcile( value: T | Store, options?: { @@ -14,7 +17,7 @@ function reconcile( } = { key: "id" } ): ( state: T extends NotWrappable ? T : Store -) => T extends NotWrappable ? T : Store; +) => T extends NotWrappable ? T : Store ``` `reconcile` has a key option that can be used when available to match items. diff --git a/src/routes/reference/store-utilities/unwrap.mdx b/src/routes/reference/store-utilities/unwrap.mdx index e055ed095..64742a17e 100644 --- a/src/routes/reference/store-utilities/unwrap.mdx +++ b/src/routes/reference/store-utilities/unwrap.mdx @@ -5,7 +5,8 @@ title: unwrap `unwrap` returns the underlying data in the store without a proxy. ```tsx -import { unwrap } from "solid-js/store"; +import { unwrap } from "solid-js/store" +import type { Store } from "solid-js/store" -function unwrap(store: Store): T; +function unwrap(store: Store): T ```