mini-van-plate - npm Package Compare versions

Comparing version 0.2.12 to 0.3.0

package.json

 {
   "name": "mini-van-plate",
-  "version": "0.2.12",
+  "version": "0.3.0",
   "description": "A Minimalist Template Engine for DOM Generation and Manipulation, Working for Both Client-side and Server-side Rendering",
@@ -5,0 +5,0 @@ "files": [

README.md

@@ -39,3 +39,3 @@ # **Mini-Van**: A Minimalist Template Engine for DOM Generation, Working for Both Client-side and Server-side Rendering
 import { serve } from "https://deno.land/std@0.184.0/http/server.ts"
-import van from "https://deno.land/x/minivan@0.2.12/src/van-plate.js"
+import van from "https://deno.land/x/minivan@0.3.0/src/van-plate.js"
 
@@ -86,3 +86,3 @@ const {a, body, li, p, ul} = van.tags
 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.2.12/src/mini-van.js"
+import van from "https://deno.land/x/minivan@0.3.0/src/mini-van.js"
 
@@ -126,14 +126,109 @@ const document = new DOMParser().parseFromString("", "text/html")!
 
+## Server-Side: Node.js Integration
+
+Similarly, **Mini-Van** can work with Node.js as well, in both `van-plate` mode and `mini-van` mode.
+
+### Install
+
+```shell
+npm install mini-van-plate
+```
+
+### `van-plate` mode
+
+Sample code:
+
+```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
+
+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` mode
+
+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).
+
+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
+
+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}/`))
+```
+
 ## Client-Side: Getting Started
 
-To get started on the client side, download the latest version [`mini-van-0.2.12.min.js`](https://vanjs.org/autodownload?file=mini-van-0.2.12.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.0.min.js`](https://vanjs.org/autodownload?file=mini-van-0.3.0.min.js) and add the line below to your script:
 
 ```javascript
-import van from "./mini-van-0.2.12.min.js"
+import van from "./mini-van-0.3.0.min.js"
 ```
 
-To code without ES6 modules, you can download the bundled version [`mini-van-0.2.12.nomodule.min.js`](https://vanjs.org/autodownload?file=mini-van-0.2.12.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.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:
 
 ```html
-<script type="text/javascript" src="mini-van-0.2.12.nomodule.min.js"></script>
+<script type="text/javascript" src="mini-van-0.3.0.nomodule.min.js"></script>
 ```
@@ -140,0 +235,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19111

increased by13.96%

Number of lines in readme file

242

increased by64.63%

No dependency changes