Solid Meta

Bindings for @solidjs/meta. They live in the Partas.Solid.Meta namespace, which ships inside the Partas.Solid package.

open Partas.Solid
open Partas.Solid.Meta

Partas.Solid does not install the npm package:

npm install @solidjs/meta

Components

Each component inherits the matching HTML tag, so it takes the same attributes.

Component	Inherits	Upstream docs
`MetaProvider`	`FragmentNode`	MetaProvider
`Title`	`title`	Title
`Style`	`style`	Style
`Link`	`link`	Link
`Meta`	`meta`	Meta
`Base`	`base'`	Base

[<SolidComponent>]
let App () =
    MetaProvider() {
        Title() { "My page" }
        Meta().attr("name", "description").attr("content", "A page about things")
        div () { "Hello" }
    }

useHead from @solidjs/web

Bound in Partas.Solid.Web. It needs no extra package and no provider. The runtime tests cover it: tags reach document.head, a reactive title updates, and the tags are removed when the component is disposed.

open Partas.Solid.Web

useHead(tag: HeadTag): unit
useHead(tag: HeadTag[]): unit
useHead(tag: unit -> HeadTag): unit
useHead(tag: unit -> HeadTag[]): unit

HeadTag is a [<Pojo>]: HeadTag(tag: HeadTag.Tag, props: obj, ?key: U2<string, unit -> string>). HeadTag.Tag is Title, Meta, Link, Style, Script or Base. Put the element's children, such as a title's text, in props under "children".

open Partas.Solid.Web

[<SolidComponent>]
let ReactiveTitle () =
    let count, setCount = createSignal 0
    useHead (fun () -> HeadTag(HeadTag.Tag.Title, createObj [ "children", box ("Count " + string (count ())) ]))
    useHead (HeadTag(HeadTag.Tag.Meta, createObj [ "name", box "description"; "content", box "A counter" ]))
    button (onClick = fun _ -> setCount (count () + 1)) { count () }

export function ReactiveTitle() {
    const patternInput = createSignal(0);
    const count = patternInput[0];
    useHead(() => ({
        tag: "title",
        props: {
            children: "Count " + int32ToString(count()),
        },
    }));
    useHead({
        tag: "meta",
        props: {
            name: "description",
            content: "A counter",
        },
    });
    return <button onClick={(_arg) => {
            patternInput[1](count() + 1);
        }}>
        {count()}
    </button>;
}

Pass a function when a tag depends on reactive state, as the title does here.

Edit this page