Add imports to all reference docs, make more uniform

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);

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(() => <App />, document.getElementById('root') as HTMLElement);
 ```

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(() => <App />, 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(() => <App />, document.getElementById('root') as HTMLElement);
 ```

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 [`<Portal>
 ```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(() => <Toast><p>This is a toast</p></Toast>)

src/routes/reference/basic-reactivity/create-effect.mdx

@@ -3,6 +3,8 @@ title: createEffect
 ---
 
 ```tsx
+import { createEffect } from "solid-js"
+
 function createEffect<T>(fn: (v: T) => T, value?: T): void
 
 ```

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<T>(
 	fn: (v: T) => T,
 	value?: T,

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> = [
 	{
 		(): T | undefined
@@ -19,7 +22,7 @@ type ResourceReturn<T> = [
 	}
 ]
 
-export type ResourceOptions<T, S = unknown> = {
+type ResourceOptions<T, S = unknown> = {
 	initialValue?: T
 	name?: string
 	deferStream?: boolean

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<T>(
 	initialValue: T,
 	options?: {
@@ -16,6 +18,7 @@ function createSignal<T>(
 ): [get: () => T, set: (v: T) => T]
 
 // available types for return value of createSignal:
+import type { Signal, Accessor, Setter } from "solid-js"
 type Signal<T> = [get: Accessor<T>, set: Setter<T>]
 type Accessor<T> = () => T
 type Setter<T> = (v: T | ((prev?: T) => T)) => T

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
 
 ```

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<T> {
 	id: symbol
 	Provider: (props: { value: T; children: any }) => any

src/routes/reference/component-apis/create-unique-id.mdx

@@ -3,6 +3,8 @@ title: createUniqueId
 ---
 
 ```ts
+import { createUniqueId } from "solid-js"
+
 function createUniqueId(): string
 
 ```

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<T extends Component<any>>(
 	fn: () => Promise<{ default: T }>
 ): T & { preload: () => Promise<T> }

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<T>(context: Context<T>): T
 
 ```

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<T>(
 	props: T & {
 		children?: any

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

src/routes/reference/components/for.mdx

@@ -6,6 +6,9 @@ order: 5
 The `<For>` 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<T, U extends JSX.Element>(props: {
 	each: readonly T[]
 	fallback?: JSX.Element

src/routes/reference/components/index-component.mdx

@@ -5,6 +5,9 @@ title: <Index>
 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<T, U extends JSX.Element>(props: {
   each: readonly T[];
   fallback?: JSX.Element;

src/routes/reference/components/portal.mdx

@@ -7,6 +7,9 @@ title: <Portal>
 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

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<T>(props: {
 	when: T | undefined | null | false
 	keyed: boolean

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"

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

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

src/routes/reference/lifecycle/on-cleanup.mdx

@@ -10,14 +10,16 @@ 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;
 ```
 
 Without the `onCleanup` function, the event listener would remain attached to the `document` even after the component is removed from the page.
 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);

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
 
 ```

src/routes/reference/reactive-utilities/batch.mdx

@@ -3,7 +3,9 @@ title: batch
 ---
 
 ```ts
-function batch<T>(fn: () => T): T;
+import { batch } from "solid-js"
+
+function batch<T>(fn: () => T): T
 ```
 
 This is a low level API that is used by Solid to batch updates.

src/routes/reference/reactive-utilities/catch-error.mdx

@@ -7,9 +7,9 @@ New in v1.7.0
 </Callout>
 
 ```tsx
-import { catchError } from "solid-js";
+import { catchError } from "solid-js"
 
-function catchError<T>(tryFn: () => T, onError: (err: any) => void): T;
+function catchError<T>(tryFn: () => T, onError: (err: any) => void): T
 ```
 
 Wraps a `tryFn` with an error handler that fires if an error occurs below that point. 

src/routes/reference/reactive-utilities/create-root.mdx

@@ -3,6 +3,8 @@ title: createRoot
 ---
 
 ```ts
+import { createRoot } from "solid-js"
+
 function createRoot<T>(fn: (dispose: () => void) => T): T
 
 ```

src/routes/reference/reactive-utilities/from.mdx

@@ -3,6 +3,8 @@ title: from
 ---
 
 ```tsx
+import { from } from "solid-js"
+
 function from<T>(
 	producer:
 		| ((setter: (v: T) => T) => () => void)

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
 
 ```

src/routes/reference/reactive-utilities/index-array.mdx

@@ -3,6 +3,8 @@ title: indexArray
 ---
 
 ```tsx
+import { indexArray } from "solid-js"
+
 function indexArray<T, U>(
 	list: () => readonly T[],
 	mapFn: (v: () => T, i: number) => U

src/routes/reference/reactive-utilities/map-array.mdx

@@ -3,6 +3,8 @@ title: mapArray
 ---
 
 ```ts
+import { mapArray } from "solid-js"
+
 function mapArray<T, U>(
 	list: () => readonly T[],
 	mapFn: (v: T, i: () => number) => U

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
 
 ```

src/routes/reference/reactive-utilities/observable.mdx

@@ -3,6 +3,8 @@ title: observable
 ---
 
 ```ts
+import { observable } from "solid-js"
+
 function observable<T>(input: () => T): Observable<T>
 
 ```

src/routes/reference/reactive-utilities/on.mdx

@@ -3,11 +3,13 @@ title: on
 ---
 
 ```ts
+import { on } from "solid-js"
+
 function on<T extends Array<() => 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.