Socket
Socket
Sign inDemoInstall

mini-van-plate

Package Overview
Dependencies
0
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.3.0 to 0.3.1

4

package.json
{
"name": "mini-van-plate",
"version": "0.3.0",
"description": "A Minimalist Template Engine for DOM Generation and Manipulation, Working for Both Client-side and Server-side Rendering",
"version": "0.3.1",
"description": "A minimalist template engine for DOM generation and manipulation, working for both client-side and server-side rendering",
"files": [

@@ -6,0 +6,0 @@ "src/mini-van.js",

183

README.md

@@ -1,2 +0,2 @@

# **Mini-Van**: A Minimalist Template Engine for DOM Generation, Working for Both Client-side and Server-side Rendering
# **Mini-Van**: A Minimalist Template Engine for Client/Server-side Rendering without JSX

@@ -27,8 +27,14 @@ **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:

## Server-Side: Deno Integration
## Server-Side: Npm Integration
**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.
**Mini-Van** can be used on the server side as a template engine to render dynamic web content for HTTP servers. An NPM package was published here: [www.npmjs.com/package/mini-van-plate](https://www.npmjs.com/package/mini-van-plate). Thus it can be used in [Node.js](https://nodejs.org/) or [Bun](https://bun.sh/).
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).
### Install
```shell
npm install mini-van-plate
```
### `van-plate` mode

@@ -38,8 +44,9 @@

```typescript
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"
```javascript
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

@@ -51,7 +58,8 @@

console.log(`HTTP webserver running. Access it at: http://localhost:${port}/`)
await serve(req => new Response(
van.html(
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.get("user-agent") ?? "Unknown"),
p("Your user-agent is: ", req.headers["user-agent"] ?? "Unknown"),
p("👋Hello"),

@@ -63,8 +71,7 @@ ul(

),
),
{
status: 200,
headers: {"content-type": "text/html; charset=utf-8"},
},
), {port})
))
})
server.listen(port, hostname, () =>
console.log(`Server running at http://${hostname}:${port}/`))
```

@@ -82,15 +89,26 @@

The behavior in `mini-van` mode is similar to the behavior in browser context. i.e.: DOM objects will be created by [`tag functions`](https://vanjs.org/tutorial#api-tags). 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.
The behavior in `mini-van` mode is similar to the behavior in browser context. i.e.: DOM objects will be created by [`tag functions`](https://vanjs.org/tutorial#api-tags). As Node.js 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](https://deno.com/manual@v1.28.1/advanced/jsx_dom/deno_dom):
There are multiple 3rd-party options for the `Document` object. In the example below, we will demonstrate the integration with the help of [`jsdom`](https://www.npmjs.com/package/jsdom).
```typescript
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"
Note that, mini-van mode doesn't work in Bun yet due to the integration issue with `jsdom`.
const document = new DOMParser().parseFromString("", "text/html")!
const {tags, html} = van.vanWithDoc(document)
First, install `jsdom`:
```shell
npm install jsdom
```
Sample code:
```javascript
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

@@ -104,7 +122,8 @@

console.log(`HTTP webserver running. Access it at: http://localhost:${port}/`)
await serve(req => new Response(
html(
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.get("user-agent") ?? "Unknown"),
p("Your user-agent is: ", req.headers["user-agent"] ?? "Unknown"),
p("👋Hello"),

@@ -116,8 +135,7 @@ ul(

),
),
{
status: 200,
headers: {"content-type": "text/html; charset=utf-8"},
},
), {port})
))
})
server.listen(port, hostname, () =>
console.log(`Server running at http://${hostname}:${port}/`))
```

@@ -131,23 +149,15 @@

## Server-Side: Node.js Integration
## Server-Side: Deno Integration
Similarly, **Mini-Van** can work with Node.js as well, in both `van-plate` mode and `mini-van` mode.
Similarly, **Mini-Van** can work with Deno as well, in both `van-plate` mode and `mini-van` mode. A Deno module was published here: [deno.land/x/minivan](https://deno.land/x/minivan).
### Install
```shell
npm install mini-van-plate
```
### `van-plate` mode
Sample code:
```typescript
import { serve } from "https://deno.land/std@0.184.0/http/server.ts"
import van from "https://deno.land/x/minivan@0.3.1/src/van-plate.js"
```javascript
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

@@ -159,8 +169,7 @@

const server = http.createServer((req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'text/html; charset=utf-8')
res.end(van.html(
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["user-agent"] ?? "Unknown"),
p("Your user-agent is: ", req.headers.get("user-agent") ?? "Unknown"),
p("👋Hello"),

@@ -172,7 +181,8 @@ ul(

),
))
})
server.listen(port, hostname, () =>
console.log(`Server running at http://${hostname}:${port}/`))
),
{
status: 200,
headers: {"content-type": "text/html; charset=utf-8"},
},
), {port})
```

@@ -182,22 +192,15 @@

Likewise, `mini-van` mode needs a 3rd-party DOM library to provide the `Document` object. We will show an example with the integration of [`jsdom`](https://github.com/jsdom/jsdom).
Likewise, `mini-van` mode needs a 3rd-party DOM library to provide the `Document` object. We will show an example with the integration of [deno-dom](https://deno.com/manual@v1.28.1/advanced/jsx_dom/deno_dom).
First, install `jsdom`:
```shell
npm install jsdom
```
Sample code:
```javascript
import http from "node:http"
import jsdom from "jsdom"
import van from "mini-van-plate"
```typescript
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.1/src/mini-van.js"
const dom = new jsdom.JSDOM("")
const {html, tags} = van.vanWithDoc(dom.window.document)
const document = new DOMParser().parseFromString("", "text/html")!
const {tags, html} = van.vanWithDoc(document)
const {a, body, li, p, ul} = tags
const hostname = '127.0.0.1'
const port = 8080

@@ -211,8 +214,7 @@

const server = http.createServer((req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'text/html; charset=utf-8')
res.end(html(
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["user-agent"] ?? "Unknown"),
p("Your user-agent is: ", req.headers.get("user-agent") ?? "Unknown"),
p("👋Hello"),

@@ -224,7 +226,8 @@ ul(

),
))
})
server.listen(port, hostname, () =>
console.log(`Server running at http://${hostname}:${port}/`))
),
{
status: 200,
headers: {"content-type": "text/html; charset=utf-8"},
},
), {port})
```

@@ -234,15 +237,15 @@

To get started on the client side, download the latest version [`mini-van-0.3.0.min.js`](https://vanjs.org/autodownload?file=mini-van-0.3.0.min.js) and add the line below to your script:
To get started on the client side, download the latest version [`mini-van-0.3.1.min.js`](https://vanjs.org/autodownload?file=mini-van-0.3.1.min.js) and add the line below to your script:
```javascript
import van from "./mini-van-0.3.0.min.js"
import van from "./mini-van-0.3.1.min.js"
```
To code without ES6 modules, you can download the bundled version [`mini-van-0.3.0.nomodule.min.js`](https://vanjs.org/autodownload?file=mini-van-0.3.0.nomodule.min.js) and add the following line to your HTML file instead:
To code without ES6 modules, you can download the bundled version [`mini-van-0.3.1.nomodule.min.js`](https://vanjs.org/autodownload?file=mini-van-0.3.1.nomodule.min.js) and add the following line to your HTML file instead:
```html
<script type="text/javascript" src="mini-van-0.3.0.nomodule.min.js"></script>
<script type="text/javascript" src="mini-van-0.3.1.nomodule.min.js"></script>
```
You can find all relevant **Mini-Van** files in this [Download Table](https://vanjs.org/minivan#download-table).
You can find all relevant **Mini-Van** files in this [Download Table](https://vanjs.org/minivan#download-table).

@@ -253,4 +256,8 @@ ## API Reference

## Contact Us
## Support & Feedback
[tao@vanjs.org](mailto:tao@vanjs.org)
🙏 **VanJS** aims to build a better world by reducing the entry barrier for UI programming, with no intention or plan on commercialization whatsoever. If you find **VanJS** interesting, or could be useful for you some day, please consider starring the project. It takes just one seconds but your support means the world to us and helps spread **VanJS** to a wider audience.
We're looking for the 1.0 milestone (commitment to API stability) soon, your precious feedback will be greatly appreciated. You can submit your feedback by [creating issues](https://github.com/vanjs-org/mini-van/issues/new).
Contact us: [tao@vanjs.org](mailto:tao@vanjs.org)
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc