Skip to content
hypha
Hypha Stack

Solidtype

Typed OCaml front ends on SolidJS and Kobalte.

Source on GitHubLatest: 0.1.0

About

Write your components in OCaml's JSX, and the browser gets the same code Solid's own compiler emits. A reactive read in the wrong place does not compile, and neither does a prop left out, an attribute an element does not take, or a missed case.

Solid and Kobalte are bound whole, server rendering included, with every element's attributes typed from Solid's own JSX types.

Front end

Install

From Hypha's opam repository, on OCaml 5.5 or later:

opam repo add hypha https://github.com/hyphatech/opam-repository.git
opam install solidtype ppx_solidtype mlx

Then in your dune file:

(library
 (name app)
 (modes melange)
 (libraries solidtype melange.dom)
 (preprocess (pps melange.ppx ppx_solidtype)))

In code

  1. A JSX component.

    module Jsx = Solidtype.Jsx
module Solid = Solidtype.Solid

let make () =
  let count, set_count = Solid.create_signal 0 in
  <button type_=`button on_click=(fun _ -> Solid.update set_count succ)>
    "Clicked " (fun () -> Jsx.int (Solid.get count))
  </button>

  2. Seamless integration with Solid.

    import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import solidtype from "vite-plugin-solidtype";

export default defineConfig({ plugins: [solidtype(), solid()] });

Ontology

  • PageComponentis built from
  • ComponentStateshows
  • QueryRoutecalls
  • QueryStatefills
  • FormComponentis a

Build with Hypha.