npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wolt

v1.2.7

Published

minimalist template engine for Node.js

Downloads

4

Readme

WOLT - minimalist template engine for Node.js.

It allows you to write HTML code directly inside JavaScript (like jsx).

Installation

Starter template (RECOMMENDED):

npm i wolt; npx wolt

or just wolt package

npm i wolt

Example

using with express.js:

// app.js

const { render } = require("wolt");
const app = require("express")();

app.get("/", async (req, res)=>{
  const html = await render("index.jsx", {name: "John"})
  res.send(html)
})

app.listen(8080);

Template:

// index.jsx

<h1>Hello, {name}</h1>

Usage

At the heart of wolt is a very simple compiler, in short, it converts HTML tags into template string:

`<h1>Hello, ${name}</h1>`

You can use `{...}' anywhere in the tags, for example, to make dynamic tag names:

<{tag}>Hello, {name}</{tag}>

Inside {...} you can put any JS expression:

<p>lorem { foo(5, 6) * 2 } ipsum</p>

JSX

It is recommended to use jsx files, but it is not necessary, you can use any files, the script only processes plain text.

Syntax:

Conditions:

if (user) {
  <h2>My name is {user.name}</h2>
}

Iteration:

for (const i of arr) {
  <p>item is {i}</p>
}

Function:

function foo(cnt) {
  <p>{cnt}</p>
}

foo("hello world")

That is, you can use any JS, everything will work:

let link_about = (<a href="/about">about</a>) // html needs to be wrapped in (...) to convert to string only
<p>
  $(link_about) // $(...) will replace and add to the main html 
</p>

Update!

You can now pass data to the script with '% data %', only single or double quotes can be used before and after the % signs.

<script>
  alert("'% some_data %'") // `alert("${ some_data }")`
</script>

In JSX files syntax is not highlighted inside the script tag, to avoid this you can use special tags.

{"script"}
  alert("'% some_data %'") // `alert("${ some_data }")`
{"/script"}

Multiline text

You cannot simply move the tag content to a new line because the script processes the code line by line:

<p>
  hello 
</p>
// hello is not defined

To make multiline content, wrap your content in backticks:

<p>
  `Hello, my name is {user.name}.
  I live in {user.city}.` 
</p>

Components

You can use the special <inc> tag to insert code from another file.

<inc href="product.jsx"/>

If it is a jsx file and it is located in the same folder, then you can use the short version, just the file name with a capital letter (the file itself should be lowercase, like product.jsx).

<Product/>

Slot

You can transfer content to another file.

<inc href="text.jsx">some content</inc>

or

<Text>some content</Text>
// text.jsx
<h1>{$slot}</h1> // $slot will be replaced to 'some content'

Update!

Now the slot can be multi-line

<inc href="file.jsx">
  multi line
  text
</inc>

Props

You can also pass some parameters to another file.

<inc href="user.jsx" name="{user.name}" age="{user.age}"/>

or

<User name={user.name} age={user.age}/>
// or use shorthand
<User {...user}/>
// user.jsx
<h1>My name name is {$prop.name}, I'm {$prop.age} y.o.</h1>

Update!

There are 2 types of writing props:

  • <inc user_id="user_{id}">
    Is converted to `user_${id}`, which always returns the string
  • <inc user_id={`user_${id}`}>
    When using this type, you can transfer data of any type

Helpers

wolt includes some handy helpers you can use in templates:

$html

Accumulates final HTML output:

$html += (<div>)
$html += 'Hello'
$html += (</div>)

$

Alias for $html to append to HTML output:

$(<div>)
$(Hello)
$(</div>)

$fetch

Makes AJAX requests:

let data = await $fetch.json('/api/users');

for(let user of data) {
  <p>{user.name}</p>
}

$timeout

Delays execution:

await $timeout(1000); // wait 1 second

<p>Done!</p>

Update!

Usually, to split a tag into several lines, back quotes are used

<p>
  `multi-line`
</p>

But now you can use the $(...) helper

$(<div>
  text
  <a href="#{product.hash}">
    link
  </a>
  <span>{some_variable}</span>
  foo baz
</div>)

You can also use components inside this helper, the component must be wrapped in {...}

$(<div>
  {<inc href="file.jsx" />}
  or
  {<File />}
</div>);

Using router

Wolt has a router based on expressjs.
To use it, first install expressjs npm i express.
You also need to have a special structure.

pages
├─ index.jsx
├─ about.jsx
└─ user.jsx  
index.html
app.js

There must be 1 index.html file, it is a wrapper for pages (pages/*), it contains an inc tag with a special key $page, it will be replaced with the desired page.

<html>
  <head></head>
  <body>
    <inc href="pages/$page"/>
  </body>
</html

Add the following code to app.js:

const { router } = require('wolt');
const app = require('express')();

router(app, {
  "/": function(req, res) {
    return { page: "index.jsx" }
  },
  "/about": function(req, res) {
    return { page: "about.jsx", data: { cnt: "about page" } }
  },
  "/user/:id": function(req, res) {
    return { page: "user.jsx" }
  }
})

app.listen(8080)

Instead of function(req, res) {...} you can use string "index.jsx", this entry is recommended if your script does not provide any parameters other than page: "..."

router(app, {
  "/": "index.jsx",
  "/about": "about.jsx",
  "/user/:id": "user.jsx"
})

When using a router, you have access to additional helpers:

  • $page - the page you passed in the object, for example: "about.jsx"
  • $path - the current url path, for example: "user/10"
  • $slug - dynamic parameters from the url, for example: { id: 10 }

So you can write some such template in user.jsx:

let user = await $fetch.json('/api/user/' + $slug.id);

<p>{user.name}</p>

Client rendering

Server return that render in browser

await render(file, data, { mode: "client" });

License

WoltJs is released under the MIT License.