mini-van-plate
Advanced tools
A Minimalist Template Engine for DOM Generation and Manipulation, Working for Both Client-side and Server-side Rendering
Mini-Van is an ultra-lightweight template engine for DOM composition and manipulation. With only 0.5kB in the minized bundle size, Mini-Van enables you to build comprehensive UI with elegant and expressive vanilla JavaScript code:
// Reusable components can be just pure vanilla JavaScript functions.
// Here we capitalize the first letter to follow React conventions.
const Hello = () => div(
p("👋Hello"),
ul(
li("🗺️World"),
li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
),
)
van.add(document.body, Hello())
// Alternatively, you can write:
// document.body.appendChild(Hello())
You can convert any HTML snippet into Mini-Van code with our online converter.
Mini-Van is the slimmed-down version of VanJS, which aims to provide an ultra-lightweight, zero-dependency, and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM. Compared to VanJS, Mini-Van further reduces the bundle size to 0.5kB and can be used on the server-side as a template engine.
Mini-Van can be used on the server side as a template engine to render dynamic web content for HTTP servers. If you use Deno, the integration is fairly straightforward.
There are 2 modes for server-side integration: van-plate mode (based on text templating, thus doesn't need the DOM dependency), and mini-van mode (based on DOM, thus needs the DOM dependency).
van-plate modeIn van-plate mode, HTML content is generated purely through text templating. It can be easily integrated with your HTTP server to render dynamic web content. See the sample code below:
import { serve } from "https://deno.land/std@0.184.0/http/server.ts"
import van from "https://deno.land/x/minivan@0.3.0/src/van-plate.js"
const {a, body, li, p, ul} = van.tags
const port = 8080
console.log("Testing DOM rendering...")
// Expecting `<a href="https://vanjs.org/">🍦VanJS</a>` in the console
console.log(a({href: "https://vanjs.org/"}, "🍦VanJS").render())
console.log(`HTTP webserver running. Access it at: http://localhost:${port}/`)
await serve(req => new Response(
van.html(
body(
p("Your user-agent is: ", req.headers.get("user-agent") ?? "Unknown"),
p("👋Hello"),
ul(
li("🗺️World"),
li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
),
),
),
{
status: 200,
headers: {"content-type": "text/html; charset=utf-8"},
},
), {port})
As illustrated in the example, render method can be called on the object returned from the tag function to generate a string that can be used for serving.
van.html is a helper function defined in van-plate.js that is equivalent to:
(...args) => "<!DOCTYPE html>" + tags.html(...args).render()
mini-van modeThe behavior in mini-van mode is similar to the behavior in browser context. i.e.: DOM objects will be created by tag functions. As Deno doesn't have the built-in support for DOM objects, you need to provide a 3rd-party Document object before integrating with Mini-Van in this mode.
There are multiple 3rd-party options for the Document object. In the example below, we will demonstrate the integration with the help of deno-dom:
import { serve } from "https://deno.land/std@0.184.0/http/server.ts"
import { DOMParser } from "https://deno.land/x/deno_dom@v0.1.38/deno-dom-wasm.ts"
import van from "https://deno.land/x/minivan@0.3.0/src/mini-van.js"
const document = new DOMParser().parseFromString("", "text/html")!
const {tags, html} = van.vanWithDoc(document)
const {a, body, li, p, ul} = tags
const port = 8080
console.log("Testing DOM rendering...")
const anchorDom = a({href: "https://vanjs.org/"}, "🍦VanJS")
// anchorDom is an HTMLAnchorElement
// Expecting `<a href="https://vanjs.org/">🍦VanJS</a>` printed in the console
console.log(anchorDom.outerHTML)
console.log(`HTTP webserver running. Access it at: http://localhost:${port}/`)
await serve(req => new Response(
html(
body(
p("Your user-agent is: ", req.headers.get("user-agent") ?? "Unknown"),
p("👋Hello"),
ul(
li("🗺️World"),
li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
),
),
),
{
status: 200,
headers: {"content-type": "text/html; charset=utf-8"},
},
), {port})
Similar to van-plate mode, we have a helper function html defined in mini-van.js which is equivalent to:
(...args) => "<!DOCTYPE html>" + tags.html(...args).outerHTML
Similarly, Mini-Van can work with Node.js as well, in both van-plate mode and mini-van mode.
npm install mini-van-plate
van-plate modeSample code:
import http from "node:http"
import van from "mini-van-plate/van-plate"
const {a, body, li, p, ul} = van.tags
const hostname = '127.0.0.1'
const port = 8080
console.log("Testing DOM rendering...")
// Expecting `<a href="https://vanjs.org/">🍦VanJS</a>` in the console
console.log(a({href: "https://vanjs.org/"}, "🍦VanJS").render())
const server = http.createServer((req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'text/html; charset=utf-8')
res.end(van.html(
body(
p("Your user-agent is: ", req.headers["user-agent"] ?? "Unknown"),
p("👋Hello"),
ul(
li("🗺️World"),
li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
),
),
))
})
server.listen(port, hostname, () =>
console.log(`Server running at http://${hostname}:${port}/`))
mini-van modeLikewise, mini-van mode needs a 3rd-party DOM library to provide the Document object. We will show an example with the integration of jsdom.
First, install jsdom:
npm install jsdom
Sample code:
import http from "node:http"
import jsdom from "jsdom"
import van from "mini-van-plate"
const dom = new jsdom.JSDOM("")
const {html, tags} = van.vanWithDoc(dom.window.document)
const {a, body, li, p, ul} = tags
const hostname = '127.0.0.1'
const port = 8080
console.log("Testing DOM rendering...")
const anchorDom = a({href: "https://vanjs.org/"}, "🍦VanJS")
// anchorDom is an HTMLAnchorElement
// Expecting `<a href="https://vanjs.org/">🍦VanJS</a>` printed in the console
console.log(anchorDom.outerHTML)
const server = http.createServer((req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'text/html; charset=utf-8')
res.end(html(
body(
p("Your user-agent is: ", req.headers["user-agent"] ?? "Unknown"),
p("👋Hello"),
ul(
li("🗺️World"),
li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
),
),
))
})
server.listen(port, hostname, () =>
console.log(`Server running at http://${hostname}:${port}/`))
To get started on the client side, download the latest version mini-van-0.3.0.min.js and add the line below to your script:
import van from "./mini-van-0.3.0.min.js"
To code without ES6 modules, you can download the bundled version mini-van-0.3.0.nomodule.min.js and add the following line to your HTML file instead:
<script type="text/javascript" src="mini-van-0.3.0.nomodule.min.js"></script>
You can find all relevant Mini-Van files in this Download Table.
Mini-Van exposes the same set of APIs as VanJS for DOM composition and manipulation. Thus for API reference, you can refer to DOM Composition and Manipulation section of VanJS tutorial. Note that: state and state binding are not supported in Mini-Van.
FAQs
A minimalist template engine for DOM generation and manipulation, working for both client-side and server-side rendering
The npm package mini-van-plate receives a total of 14 weekly downloads. As such, mini-van-plate popularity was classified as not popular.
We found that mini-van-plate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.