SolidStart

Light bindings for @solidjs/start. They live in the Partas.Solid.Start namespace, which ships inside the Partas.Solid package. They do not cover the whole library.

open Partas.Solid
open Partas.Solid.Start

Partas.Solid does not install the npm package:

npm install @solidjs/start

SolidStart's configuration and entry files need fixed names and extensions, such as app.config.ts and entry-server.tsx, but Fable writes .fs.jsx. Write those files in JavaScript and keep your components in F#.

Solid 2 changes that affect SolidStart code

Solid 2 moved several server helpers into @solidjs/web. Partas.Solid 3.0 binds them in Partas.Solid.Web:

SolidStart binding	`@solidjs/web` binding
`HttpStatusCode` component	`httpStatus(code: System.Net.HttpStatusCode, ?text: string): unit`
`HttpHeader` component	`httpHeader(name: string, value: string, ?append: bool): unit`
`clientOnly(importFunc: unit -> Promise<HtmlElement>): TagValue`	`clientOnly(fn: unit -> Promise<'T>, ?lazy: bool): unit -> 'T`

Both clientOnlys are in scope when you open Partas.Solid.Start and Partas.Solid.Web together. They import from different packages and return different types, so qualify the one you mean.

isServer, renderToString and renderToStream are in Partas.Solid.Web too, no longer in core Partas.Solid. See Migrating to Solid 2.

Functions

useServer

Emits a "use server" directive.

useServer

"use server";

useServer is a static property, not a function, so write it without ().

getServerFunctionMeta

Read it inside a server function. Like useServer, it is a property, and it returns the metadata's id field as a string.

defineConfig

defineConfig(config: obj): obj
defineConfig(objList: (string * obj) list): obj

Imports from @solidjs/start/config. The list overload builds the object with createObj. Rarely useful, since the config file needs a fixed name and extension.

Client.mount

Client.mount(fn: unit -> HtmlElement, el: obj)

Imports from @solidjs/start/client, for the client entry:

Client.mount ((fun () -> StartClient()), document.getElementById "app")

clientOnly

clientOnly(importFunc: unit -> JS.Promise<HtmlElement>): TagValue

Takes a lambda that dynamically imports a component, so the component only renders on the client. See the table above for the @solidjs/web version.

createHandler

createHandler(fn: unit -> StartServer, ?mode: string): unit

Imports from @solidjs/start/server. mode is passed in an options object.

Components

Component	Imported from	Properties
`StartServer`	`@solidjs/start/server`	`document` (see below)
`StartClient`	`@solidjs/start/client`
`HttpStatusCode`	`@solidjs/start`	`code: HttpStatusCode`
`HttpHeader`	`@solidjs/start`	`name: string`, `value: string`
`FileRoutes`	`@solidjs/start/router`

StartServer.document renders the HTML shell:

val mutable document: {| children: HtmlElement; assets: link; scripts: script |} -> html

The HttpStatusCode component's code is the Partas.Solid.Start.HttpStatusCode enum, a copy of System.Net.HttpStatusCode that shares the component's name.

FileRoutes has a ToRoute() member that casts it to a router Route, so you can yield it inside a Router. This type-checks, but no test pins the JSX it produces:

open Partas.Solid.Router

[<SolidComponent>]
let App () =
    Router() {
        FileRoutes().ToRoute()
    }

Edit this page