Vader.js

Vader.js A reactive framework for building fast and scalable web applications

import { useState, Switch, Match } from "vaderjs"

export default function(){
  let [count, setCount] = useState(0)
  return(
    <div>
     <Switch>
      <Match when={count > 10}>
           <h1>Count is greater than 10 </h1>
      </Match>
      <Match when={count < 10}>
       <h1>Count is less than 10 </h1>
      </Match>
     </Switch>
   </div>
  )
}

Installation

bun install vaderjs @latest

Project Setup

Create a pages folder - which allows you to have nextjs page like routing via buns file based router

Note only use this when using production server - not supported by cloudflare, github or vercel

Tip: Each folder can be deep nested up to 4 levels!

/pages/index.jsx = /
/pages/home/[page].jsx  = /home/:page
/pages/path/index.jsx = /path/
/pages/test/[[...catchall]]/index.jsx = /path/test/*
/pages/route/[param1]/[param2].jsx = /path/route/:param1/:param2

Keyword folders - all files are passed from these folders to the build folder

1. app - used for jsx route files 
2. public - used for anything / css / json etc
3. Src - components utilities etc

Define your config

import defineConfig from "vaderjs/config";

export default defineConfig({
    port: 3000,
    host: 'localhost', 
    hot_reload: true,
})