vanu

v0.2.0

Published

3 years ago

Lightweight library for creating UI without build tools.

Downloads

0High
0Medium
0Low

herudi

Vanilla app 2kb vanilla app

Vanu

Lightweight library for creating UI without build tools.

See examples

Demo SSR => https://vanilla-ssr-gilt.vercel.app

status => under development.

Features

Just ~2kb gzipped, ~5kb minified.
No build tools.
Router support.
Middleware support.
LazyLoad js support.
Listener before and after load.

Install

npm or yarn

npm i vanu
// or
yarn add vanu

Browser

<!-- non module -->
<script src="//unpkg.com/vanu"></script>

<!-- es module -->
<script type="module">
  import vanu from "https://unpkg.com/vanu/dist/index.esm.js";
  const app = vanu();
  //other code
</script>

Usage

<html>
<head>
  <!-- add vanu -->
  <script src="//unpkg.com/vanu"></script>
</head>
<body>

  <!-- target id app -->
  <div id="app"></div>

  <!-- your js -->
  <script>
    const { useValue, render, html, toAction } = vanu({ target: "#app" });

    const count = useValue(0);
    const myClick = () => count.value++;
    render(() => html`
      <button onclick="${toAction(myClick)}">click !</button>
      <h2>Counter: ${count.value}</h2>
    `)
  </script>
</body>
</html>

Extension vscode for literal html lit-html

For custom element as WebComponent web-component

Router

...
<nav>
  <a href="#/" u-link>Home</a>
  <a href="#/about" u-link>About</a>
</nav>
<div id="app"></div>
<script>
    const app = vanu({ target: "#app" });

    app.get("/", ({ render, html, useValue }) => {
      render(() => html`
        <h1>Welcome Home</h1>
      `)
    });

    app.get("/about", ({ render, html, useValue }) => {
      render(() => html`
        <h1>Welcome About</h1>
      `)
    });

    // listen router
    app.listen();
</script>
...

The router is a app.get(path, (context) => {...})

Context

context is a single object for render, html, useValue, params, query and more.

useValue

...
const text = useValue();
const onChangeText = (e) => {
  text.value = e.target.value;
}
render(() => html`
  <input value="${text.value}" oninput="${toAction(onChangeText)}" />
`)
...

toAction

Simple wrapper function to string in global window/url. toAction(fn: Function, key?: string). The key is required when function without name.

...
render(() => html`
  <button onclick="${toAction(() => {...})}">Click !!</button>
`)
...

Params And Query

const app = vanu({ target: "#app" });

// example query => /user?name=vanu
app.get("/user", ({ render, html, query }) => {
  render(() => html`
    <h1>Welcome name ${query.name}</h1>
  `)
});

// example params => /user/123
app.get("/user/:id", ({ render, html, params }) => {
  render(() => html`
    <h1>Welcome id ${params.id}</h1>
  `)
});

app.listen();

Watch useValue

watch value

...
const text = useValue('', (value) => {
  if (value === 'hello') {
    alert(value + ' world');
  }
}); 
const onChangeText = (e) => {
  text.value = e.target.value;
}
render(() => html`
  <input value="${text.value}" oninput="${toAction(onChangeText)}" />
`)
...

Router Without Hash

...
<nav>
  <a href="/" u-link>Home</a>
  <a href="/about" u-link>About</a>
</nav>
<div id="app"></div>
<script>
    const app = vanu({ target: "#app" });

    app.get("/", (ctx) => {...});
    app.get("/about", (ctx) => {...});

    app.listen();
</script>
...

Default Route

...
<nav>
  <a href="#/home" u-link>Home</a>
  <a href="#/about" u-link>About</a>
</nav>
<div id="app"></div>
<script>
    const app = vanu({ target: "#app" });

    app.get("/", (ctx) => {
      window.location.href = '#/home';
      // now home is default route
    });
    app.get("/home", (ctx) => {...});
    app.get("/about", (ctx) => {...});

    app.listen();
</script>
...

Lazy Load

...
const app = vanu({ target: "#app" });
app.get("/", (ctx) => ctx.lazy("./path/to/home.js"));
app.listen();
...

...
// /path/to/home.js
function home(ctx) {...}
...

With Base Href (for XAMPP or laragon or electron)

...
<html>
<head>
  <!-- add base href before vanu -->
  <base href="/myapp">
  <script src="//unpkg.com/vanu"></script>
</head>
<body>
  ...
</body>
</html>
...

Middleware


function fooMidd(ctx, next) {
  ctx.foo = "foo";
  next();
};
function barMidd(ctx, next) {
  ctx.bar = "bar";
  next();
};

const app = vanu({ target: "#app" });
app.use(fooMidd);
app.get("/", barMidd, ({ render, html, foo, bar }) => {
  render(() => html`<h1>${foo + bar}</h1>`);
});
app.listen();

Listener like start, end and error

...
//on page start
app.on("vanu:start", (event) => {
  console.log("Start");
});

//on page end
app.on("vanu:end", (event) => {
  console.log("End");
});

//on handle error
app.on("vanu:error", (error, { render, html }) => {
  console.log(error.message);
  render(() => html`<h1>${error.message || "Something went wrong"}</h1>`);
});
...

See example with ssr

Config

const app = vanu({
  //parseQuery
  parse?: (str: string) => Record<string, any>,

  //base url
  base?: string,

  //timeout for load page vanu:start and vanu:end default 300.
  timeout?: number
});

License

MIT