rescript-vanjs

Description

ReScript-VanJS provides bindings for VanJS, an ultra-lightweight, zero-dependency reactive UI framework. This project enables developers to create web applications using ReScript, a strongly-typed programming language that compiles to JavaScript, in combination with the simplicity and efficiency of VanJS.

Features

• Seamless integration of ReScript with VanJS.
• Type-safe bindings for VanJS functionality.
• Reactive UI components with minimal overhead.
• Easy-to-use API for creating dynamic web applications.

Installation

1. Create a ReScript Application

First, create a new ReScript application using one of the following commands:

npm create rescript-app@latest

pnpm create rescript-app

bun create rescript-app

For more information on setting up a ReScript project, refer to the official ReScript documentation.

2. Install Dependencies

Add the required dependencies to your project:

npm install vanjs-core rescript-vanjs

pnpm add vanjs-core rescript-vanjs

bun add vanjs-core rescript-vanjs

3. Update Configuration

In your rescript.json file, add the following dependency:

{
  "bs-dependencies": ["rescript-vanjs"]
}

Usage

Here's a simple example of how to use ReScript-VanJS to create a reactive UI component:

1. Create a file named Main.res in your src folder.
2. Add the following code to Main.res:

@val @scope("document") @return(nullable)
external getElementById: string => option<Dom.element> = "getElementById"

let root = switch getElementById("root") {
| Some(el) => el
| None => Exn.raiseError("Root element not found")
}

@get external getEventTarget: Dom.event => Dom.eventTarget = "target"
@get external getInputValue: Dom.eventTarget => string = "value"

let deriveState: unit => Dom.element = () => {
  let vanText = Van.state("VanJs")
  let length = Van.derive(() => vanText.val->String.length)

  open Van.Child
  Van.Dom.createElement("span")
  ->Van.Dom.addChildren([
    "The length of the text is: "->toText,
    Van.Dom.createElement("input")
    ->Van.Dom.setAttrs({
      "type": "text",
      "value": vanText,
      "oninput": (event: Dom.event) => vanText.val = event->getEventTarget->getInputValue,
    })
    ->Van.Dom.build
    ->toDom,
    length->toState,
  ])
  ->Van.Dom.build
}

Van.add(root, deriveState())->ignore

This example creates a reactive input field that displays the length of its content in real-time.

Build and Run

Follow these steps to build and run your rescript-vanjs application:

1. Start the ReScript development server:

   npm run res:dev

2. If there are no errors, build the JavaScript files:

   npm run res:build

3. Build the JavaScript bundle for browser use. For example, using Bun (you can use any other JavaScript bundler):

   bun build ./src/Main.res.mjs --outdir ./out --format esm

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

Technologies used

• ReScript a type-safe language that compiles in JavaScript.
• VanJS for the lightweight reactive UI framework of JavaScript.