MetalbolicX / vanrs

🍦 VanRS: 1:1 bindings from ReScript to 🍦VanJS (an ultra-lightweight , zero-dependency , and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM without React/JSX)

VanRS

VanRS provides bindings for VanJS, which is lightest, zero-dependency reactive UI framework in the JavaScript ecosystem. By taking the advantage of the strongly-typed system of the ReScript programming language.

Supported Versions:

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.

🚀 Quick Installation

1. Create a ReScript Application

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

npm create rescript-app@latest

📝 Note: 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 i vanjs-core vanrs

3. Update Configuration rescript.json file

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

{
  "bs-dependencies": ["vanrs"]
}

🙌 Hello World Example

Here's a simple example of how to use VanRS 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")
}

let hello: unit => Dom.element = () => {
  Van.Tag.make("div")
  ->Van.Tags.addChild(Text("Hello, World!"))
  ->Van.Tags.build
}

Van.add(root, [Dom(hello())])->ignore

🛠 Build and Run

To build and run your ReScript application, see the Compile and Run section.

📚 Documentation

✍ Do you want to learn more?

• Check out the VanJS documentation for more information on how to use VanJS effectively.
• Explore the ReScript documentation for a deeper understanding of ReScript.

Contributing

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

Technologies used

VanJS

ReScript

License

Released under MIT by @MetalbolicX.