-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathminivan.html
255 lines (225 loc) · 26.7 KB
/
minivan.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html lang="en"><head>
<link rel="icon" href="/logo.svg">
<title>Mini-Van - A Minimalist Template Engine for Client/Server-side Rendering</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfedw.ttf) format('truetype');
}
</style>
<link rel="stylesheet" href="/code/w3-v1.css">
<link rel="stylesheet" href="/code/prism-v1.css">
<link rel="stylesheet" href="/vanjs.css">
</head>
<body class="line-numbers" data-prismjs-copy="📋">
<!-- Gurubase Widget -->
<script async src="https://widget.gurubase.io/widget.latest.min.js" id="guru-widget-id" data-widget-id="f0WMAZ_-X7VX2FTx6oGbm_FvuhgEyJTZKjTrEqCDlQ0" data-text="Ask AI" data-bg-color="rgba(244, 67, 54, 0.3)" data-light-mode="true">
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Q0NB75RY7E"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Q0NB75RY7E');
</script>
<script type="text/javascript" src="/code/prism-v1.js" defer></script>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:280px;font-weight:bold;" id="mySidebar"><br>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Close Menu</a>
<div class="w3-container">
<h1 class="w3-padding-16 w3-xxxlarge">
<img src="/logo.svg" alt="VanJS" width="192px" height="192px">
</h1>
</div>
<div id="nav" class="w3-bar-block"><a href="/" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a><a href="/start" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Getting Started</a><a href="/tutorial" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Tutorial</a><a href="/demo" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">VanJS by Example</a><a href="/convert" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">HTML/MD to VanJS</a><a href="/vanui" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">VanUI</a><a href="/minivan" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white current">Mini-Van</a><a href="/ssr" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">SSR & Hydration</a><a href="/x" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">X</a><a href="/advanced" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Advanced Topics</a><a href="/media" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Media Coverage</a><a href="/about" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">About</a></div>
</nav>
<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">
<a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()">☰</a>
<span id="title-bar">Mini-Van</span>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px;">
<div id="page">
<div id="content"><h1 class="w3-xxlarge"><b>Mini-Van</b>: A Minimalist Template Engine for Client/Server-side Rendering without JSX</h1><p><b>Mini-Van</b> is an <b><i>ultra-lightweight</i></b> template engine for DOM composition and manipulation. With only 0.7kB in the minified bundle size (0.5kB gzipped), <b>Mini-Van</b> enables you to build comprehensive UI with elegant and expressive vanilla JavaScript code:</p><pre><code class="language-js">// 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())
</code></pre><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/minivan/hello">Try on jsfiddle</a></p><p>You can convert any HTML snippet into <b>Mini-Van</b> code with our online <a href="/convert" class="w3-hover-opacity">converter</a>.</p><p><b>Mini-Van</b> is the slimmed-down version of <a href="/" class="w3-hover-opacity"><b>VanJS</b></a>, which aims to provide an <b><i>ultra-lightweight</i></b>, <b><i>zero-dependency</i></b>, and <b><i>unopinionated</i></b> Reactive UI framework based on pure vanilla JavaScript and DOM. Compared to <b>VanJS</b>, <b>Mini-Van</b> further reduces the gzipped minified bundle size to 0.5kB and (<i>more importantly</i>) can be used on the server-side as a <a href="https://en.wikipedia.org/wiki/Web_template_system" class="w3-hover-opacity">template engine</a>.</p><h2 class="w3-xxlarge w3-text-red" id="server-side-npm-integration"><a class="self-link" href="#server-side-npm-integration">Server-Side: NPM Integration</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p><b>Mini-Van</b> 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: <a href="https://www.npmjs.com/package/mini-van-plate" class="w3-hover-opacity">www.npmjs.com/package/mini-van-plate</a>. Thus it can be used in <a href="https://nodejs.org/" class="w3-hover-opacity">Node.js</a> or <a href="https://bun.sh/" class="w3-hover-opacity">Bun</a>.</p><p>There are 2 modes for server-side integration: <code class="symbol">van-plate</code> mode (based on text templating, thus doesn't need the DOM dependency), and <code class="symbol">mini-van</code> mode (based on DOM, thus needs the DOM dependency).</p><h3 class="w3-large w3-text-red" id="install"><a class="self-link" href="#install">Install</a></h3><pre><code class="language-shell">npm install mini-van-plate</code></pre><h3 class="w3-large w3-text-red" id="npm-van-plate"><a class="self-link" href="#npm-van-plate"><code class="symbol">van-plate</code> mode</a></h3><p>In <code class="symbol">van-plate</code> 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:</p><pre><code class="language-js">import http from "node:http"
import van from "mini-van-plate/van-plate"
const {a, body, button, input, li, p, ul} = van.tags
const port = 8080
console.log("Testing DOM rendering...")
// Expecting `<a href="https://vanjs.org/">🍦VanJS</a>` printed in the console
console.log(a({href: "https://vanjs.org/"}, "🍦VanJS").render())
// Expecting `<button onclick="alert(&quot;Hello&quot;)">Click</button>` printed in the console
console.log(button({onclick: 'alert("Hello")'}, "Click").render())
// Expecting `<input type="text" value="value">` printed in the console
console.log(input({type: "text", value: "value"}).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, () => console.log(`Server running at http://localhost:${port}/`))
</code></pre><p>Preview via <a href="https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/node-examples/van-plate-server?file=%2Fvan-plate-server.mjs%3A1%2C1" class="w3-hover-opacity">CodeSandbox</a>.</p><p>As illustrated in the example, <code class="symbol">render</code> method can be called on the object returned from the <code class="symbol"><a href="/tutorial#api-tags" class="w3-hover-opacity">tag function</a></code> to generate a <code class="symbol">string</code> that can be used for serving.</p><p><code class="symbol">van.html</code> is a helper function defined in <code class="symbol">van-plate.js</code> that is equivalent to:</p><pre><code class="language-js">(...args) => "<!DOCTYPE html>" + tags.html(...args).render()</code></pre><p></p><h3 class="w3-large w3-text-red" id="npm-mini-van"><a class="self-link" href="#npm-mini-van"><code class="symbol">mini-van</code> mode</a></h3><p>The behavior in <code class="symbol">mini-van</code> mode is similar to the behavior in browser context. i.e.: DOM objects will be created by <code class="symbol"><a href="/tutorial#api-tags" class="w3-hover-opacity">tag functions</a></code>. As Node doesn't have the built-in support for DOM objects, you need to provide a 3rd-party <code class="symbol">Document</code> object before integrating with <b>Mini-Van</b> in this mode.</p><p>There are multiple 3rd-party options for the <code class="symbol">Document</code> object. In the example below, we will demonstrate the integration with the help of <code class="symbol"><a href="https://www.npmjs.com/package/jsdom" class="w3-hover-opacity">jsdom</a></code>.</p><p>Note that, <code class="symbol">mini-van</code> mode doesn't work in Bun yet due to the integration issue with <code class="symbol">jsdom</code>.</p><p>First, install <code class="symbol">jsdom</code>:</p><pre><code class="language-shell">npm install jsdom</code></pre><p>Sample code:</p><pre><code class="language-js">import http from "node:http"
import jsdom from "jsdom"
import van from "mini-van-plate"
const dom = new jsdom.JSDOM("")
const {html, tags: {a, body, button, input, li, p, ul}} = van.vanWithDoc(dom.window.document)
const port = 8080
console.log("Testing DOM rendering...")
// Expecting `<a href="https://vanjs.org/">🍦VanJS</a>` printed in the console
console.log(a({href: "https://vanjs.org/"}, "🍦VanJS").outerHTML)
// Expecting `<button onclick="alert(&quot;Hello&quot;)">Click</button>` printed in the console
console.log(button({onclick: 'alert("Hello")'}, "Click").outerHTML)
// Expecting `<input type="text" value="value">` printed in the console
console.log(input({type: "text", value: "value"}).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, () => console.log(`Server running at http://localhost:${port}/`))
</code></pre><p>Preview via <a href="https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/node-examples/mini-van-server?file=%2Fmini-van-server.mjs%3A1%2C1" class="w3-hover-opacity">CodeSandbox</a>.</p><p>Similar to <code class="symbol">van-plate</code> mode, we have a helper function <code class="symbol">html</code> defined in <code class="symbol">mini-van.js</code> which is equivalent to:</p><pre><code class="language-js">(...args) => "<!DOCTYPE html>" + tags.html(...args).outerHTML</code></pre><h2 class="w3-xxlarge w3-text-red" id="server-side-deno-integration"><a class="self-link" href="#server-side-deno-integration">Server-Side: Deno Integration</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Similarly, <b>Mini-Van</b> can work with Deno as well, in both <code class="symbol">van-plate</code> mode and <code class="symbol">mini-van</code> mode. A Deno module was published here: <code class="symbol"><a href="https://deno.land/x/minivan" class="w3-hover-opacity">deno.land/x/minivan</a></code>.</p><h3 class="w3-large w3-text-red" id="deno-van-plate"><a class="self-link" href="#deno-van-plate"><code class="symbol">van-plate</code> mode</a></h3><p>Sample code:</p><div style="font-size: 0.9em;"><i>Requires Deno <code class="symbol">1.35</code> or later.</i></div><pre><code class="language-ts">import van from "https://deno.land/x/[email protected]/src/van-plate.js"
const {a, body, button, input, li, p, ul} = van.tags
const port = 8080
console.log("Testing DOM rendering...")
// Expecting `<a href="https://vanjs.org/">🍦VanJS</a>` printed in the console
console.log(a({href: "https://vanjs.org/"}, "🍦VanJS").render())
// Expecting `<button onclick="alert(&quot;Hello&quot;)">Click</button>` printed in the console
console.log(button({onclick: 'alert("Hello")'}, "Click").render())
// Expecting `<input type="text" value="value">` printed in the console
console.log(input({type: "text", value: "value"}).render())
console.log(`HTTP webserver running. Access it at: http://localhost:${port}/`)
Deno.serve({port}, 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"},
},
))
</code></pre><p>Preview via <a href="https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/deno-examples/van-plate-server?file=%2Fvan-plate-server.ts%3A1%2C1" class="w3-hover-opacity">CodeSandbox</a>.</p><h3 class="w3-large w3-text-red" id="deno-mini-van"><a class="self-link" href="#deno-mini-van"><code class="symbol">mini-van</code> mode</a></h3><p>Likewise, <b>Mini-Van</b> mode needs a 3rd-party DOM library to provide the <code class="symbol">Document</code> object. We will show an example with the integration of <code class="symbol"><a href="https://deno.com/[email protected]/advanced/jsx_dom/deno_dom" class="w3-hover-opacity">deno-dom</a></code>.</p><div style="font-size: 0.9em;"><i>Requires Deno <code class="symbol">1.35</code> or later.</i></div><pre><code class="language-ts">import { DOMParser } from "https://deno.land/x/[email protected]/deno-dom-wasm.ts"
import van from "https://deno.land/x/[email protected]/src/mini-van.js"
const document = new DOMParser().parseFromString("", "text/html")!
const {tags: {a, body, button, input, li, p, ul}, html} = van.vanWithDoc(document)
const port = 8080
console.log("Testing DOM rendering...")
// Expecting `<a href="https://vanjs.org/">🍦VanJS</a>` printed in the console
console.log(a({href: "https://vanjs.org/"}, "🍦VanJS").outerHTML)
// Expecting `<button onclick="alert(&quot;Hello&quot;)">Click</button>` printed in the console
console.log(button({onclick: 'alert("Hello")'}, "Click").outerHTML)
// Expecting `<input type="text" value="value">` printed in the console
console.log(input({type: "text", value: "value"}).outerHTML)
console.log(`HTTP webserver running. Access it at: http://localhost:${port}/`)
Deno.serve({port}, 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"},
},
))
</code></pre><p>Preview via <a href="https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/deno-examples/mini-van-server?file=%2Fmini-van-server.ts%3A1%2C1" class="w3-hover-opacity">CodeSandbox</a>.</p><h2 class="w3-xxlarge w3-text-red" id="client-side-getting-started"><a class="self-link" href="#client-side-getting-started">Client-Side: Getting Started</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>To get started on the client side, add the line below to your script:</p><pre><code class="language-js">import van from "https://cdn.jsdelivr.net/gh/vanjs-org/mini-van/public/mini-van-0.6.3.min.js"</code></pre><p>To code without ES6 modules, add the following line to your HTML file instead:</p><pre><code class="language-html"><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/mini-van/public/mini-van-0.6.3.nomodule.min.js"></script></code></pre><p>Alternative, you can download the files (<code class="symbol"><a href="/code/mini-van-0.6.3.min.js" download="mini-van-0.6.3.min.js" style="white-space: nowrap;" title="Download mini-van-0.6.3.min.js">mini-van-0.6.3.min.js</a></code>, <code class="symbol"><a href="/code/mini-van-0.6.3.nomodule.min.js" download="mini-van-0.6.3.nomodule.min.js" style="white-space: nowrap;" title="Download mini-van-0.6.3.nomodule.min.js">mini-van-0.6.3.nomodule.min.js</a></code>) and serve them locally.</p><h3 class="w3-large w3-text-red" id="download-table"><a class="self-link" href="#download-table">Download Table</a></h3><p>You can find all relevant <b>Mini-Van</b> files to download in the table below:</p><div>Click the link to download the file, or 📋 to copy the import line from CDN.</div><table class="download-table"><thead><tr><th>Files</th><th>Description</th></tr></thead><tbody><tr><td><pre style="margin: 0;"><code class="symbol"><a href="/code/mini-van-0.6.3.min.js" download="mini-van-0.6.3.min.js" style="white-space: nowrap;" title="Download mini-van-0.6.3.min.js">mini-van-0.6.3.min.js</a><a class="copy" onclick="copy(this)" onmouseout="resetTooltip(this)"><span class="tooltip">Copy import line</span>📋</a></code></pre><pre style="margin: 0;"><code class="symbol"><a href="/code/mini-van-0.6.3.min.d.ts" download="mini-van-0.6.3.min.d.ts" style="white-space: nowrap;" title="Download mini-van-0.6.3.min.d.ts">mini-van-0.6.3.min.d.ts</a></code></pre></td><td>Minified script file for ES6 modules, optimized for bundle size.</td></tr><tr><td><pre style="margin: 0;"><code class="symbol"><a href="/code/mini-van-0.6.3.js" download="mini-van-0.6.3.js" style="white-space: nowrap;" title="Download mini-van-0.6.3.js">mini-van-0.6.3.js</a><a class="copy" onclick="copy(this)" onmouseout="resetTooltip(this)"><span class="tooltip">Copy import line</span>📋</a></code></pre><pre style="margin: 0;"><code class="symbol"><a href="/code/mini-van-0.6.3.d.ts" download="mini-van-0.6.3.d.ts" style="white-space: nowrap;" title="Download mini-van-0.6.3.d.ts">mini-van-0.6.3.d.ts</a></code></pre></td><td>The source file without minification.</td></tr><tr><td><pre style="margin: 0;"><code class="symbol"><a href="/code/van-0.6.3.nomodule.min.js" download="van-0.6.3.nomodule.min.js" style="white-space: nowrap;" title="Download van-0.6.3.nomodule.min.js">van-0.6.3.nomodule.min.js</a><a class="copy" onclick="copy(this)" onmouseout="resetTooltip(this)"><span class="tooltip">Copy import line</span>📋</a></code></pre></td><td>Similar to <code class="symbol">mini-van-0.6.3.min.js</code>, but designed to work in non-module context, such as inline JavaScript or <code class="symbol"><script type="text/javascript"></code>.</td></tr><tr><td><pre style="margin: 0;"><code class="symbol"><a href="/code/van-0.6.3.nomodule.js" download="van-0.6.3.nomodule.js" style="white-space: nowrap;" title="Download van-0.6.3.nomodule.js">van-0.6.3.nomodule.js</a><a class="copy" onclick="copy(this)" onmouseout="resetTooltip(this)"><span class="tooltip">Copy import line</span>📋</a></code></pre></td><td>Similar to <code class="symbol">mini-van-0.6.3.js</code>, but designed to work in non-module context, such as inline JavaScript or <code class="symbol"><script type="text/javascript"></code>.</td></tr></tbody></table><h2 class="w3-xxlarge w3-text-red" id="api-reference"><a class="self-link" href="#api-reference">API Reference</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p><b>Mini-Van</b> exposes the same set of APIs as <b>VanJS</b> for DOM composition and manipulation. Thus for API reference, you can refer to <a href="/tutorial#dom" class="w3-hover-opacity">DOM Composition and Manipulation</a> section of <b>VanJS</b> tutorial. Note that: state and state binding are not supported in <b>Mini-Van</b>.</p><h2 class="w3-xxlarge w3-text-red" id="source-code"><a class="self-link" href="#source-code">Source Code</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p style="display: flex; align-items: center;"><svg height="16" aria-hidden="true" viewbox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-mark-github v-align-middle" style="margin-right: 6px;"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path></svg><a href="https://github.com/vanjs-org/mini-van" class="w3-hover-opacity">github.com/vanjs-org/mini-van</a></p><h2 class="w3-xxlarge w3-text-red" id="support-feedback"><a class="self-link" href="#support-feedback">Support & Feedback</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>🙏 <b>VanJS</b> aims to build a better world by reducing the entry barrier of UI programming, with no intention or plan on commercialization whatsoever. If you find <b>VanJS</b> interesting, or could be useful for you some day, please consider starring the project on <a href="https://github.com/vanjs-org/mini-van" class="w3-hover-opacity">GitHub</a>. It takes just a few seconds but your support means the world to us and helps spread <b>VanJS</b> to a wider audience.</p><p>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 with the link below:</p><p><a class="github-button" href="https://github.com/vanjs-org/mini-van" data-icon="octicon-star" data-show-count="true" aria-label="Star vanjs-org/van on GitHub">Star</a> <a class="github-button" href="https://github.com/vanjs-org/mini-van/subscription" data-icon="octicon-eye" aria-label="Watch vanjs-org/van on GitHub">Watch</a> <a class="github-button" href="https://github.com/vanjs-org/mini-van/issues" data-icon="octicon-issue-opened" aria-label="Issue vanjs-org/van on GitHub">Issue</a> <a class="github-button" href="https://github.com/vanjs-org" aria-label="Follow @vanjs-org on GitHub">Follow @vanjs-org</a></p><p>Contact us: <a href="mailto:[email protected]" class="w3-hover-opacity">[email protected]</a></p></div>
<aside id="toc"><ul><li><a href="#server-side-npm-integration" class="w3-hover-opacity">Server-Side: NPM Integration</a><ul><li><a href="#install" class="w3-hover-opacity">Install</a></li><li><a href="#npm-van-plate" class="w3-hover-opacity">van-plate mode</a></li><li><a href="#npm-mini-van" class="w3-hover-opacity">mini-van mode</a></li></ul></li><li><a href="#server-side-deno-integration" class="w3-hover-opacity">Server-Side: Deno Integration</a><ul><li><a href="#deno-van-plate" class="w3-hover-opacity">van-plate mode</a></li><li><a href="#deno-mini-van" class="w3-hover-opacity">mini-van mode</a></li></ul></li><li><a href="#client-side-getting-started" class="w3-hover-opacity">Client-Side: Getting Started</a><ul><li><a href="#download-table" class="w3-hover-opacity">Download Table</a></li></ul></li><li><a href="#api-reference" class="w3-hover-opacity">API Reference</a></li><li><a href="#source-code" class="w3-hover-opacity">Source Code</a></li><li><a href="#support-feedback" class="w3-hover-opacity">Support & Feedback</a></li></ul></aside>
</div>
</div>
<script>
// Script to open and close sidebar
const w3_open = () => {
document.getElementById("mySidebar").style.display = "block"
document.getElementById("myOverlay").style.display = "block"
}
const w3_close = () => {
document.getElementById("mySidebar").style.display = "none"
document.getElementById("myOverlay").style.display = "none"
}
const tocDom = document.getElementById("toc")
// Tracks the current toc item
const trackToc = () => {
const allHeadings = [...document.querySelectorAll("h2,h3")]
const currentHeadingIndex = allHeadings.findIndex(h => h.getBoundingClientRect().top >= 0)
let currentHeading
if (currentHeadingIndex < 0) currentHeading = allHeadings[allHeadings.length - 1]; else {
currentHeading = allHeadings[currentHeadingIndex]
if (currentHeadingIndex > 0 && currentHeading.getBoundingClientRect().top > innerHeight)
currentHeading = allHeadings[currentHeadingIndex - 1]
}
for (const e of document.querySelectorAll("#toc li a"))
if (e.href.split("#")[1] === currentHeading?.id) {
e.classList.add("current-heading")
const {top: tocTop, bottom: tocBottom} = tocDom.getBoundingClientRect()
const {top: eTop, bottom: eBottom} = e.getBoundingClientRect()
if (eBottom > tocBottom) tocDom.scrollTop += eBottom - tocBottom
else if (eTop < tocTop) tocDom.scrollTop -= tocTop - eTop
} else
e.classList.remove("current-heading")
}
trackToc()
document.addEventListener("scroll", trackToc)
addEventListener("resize", trackToc)
const copy = e => {
const file = e.previousElementSibling.innerText
const importLine = file.includes("nomodule") ?
`<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/${file}"><\/script>` :
`import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/${file}"`
navigator.clipboard.writeText(importLine)
.then(() => e.querySelector(".tooltip").innerText = "Copied")
.catch(() => e.querySelector(".tooltip").innerText = "Copy failed")
}
const resetTooltip = e => e.querySelector(".tooltip").innerText = "Copy import line"
</script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async src="https://buttons.github.io/buttons.js"></script>
<link rel="prefetch" href="/code/prism-v1.js" as="script"><link rel="prefetch" href="https://www.gstatic.com/charts/loader.js" as="script"><link rel="prefetch" href="/code/diff.min.js" as="script"><link rel="prefetch" href="/code/van-1.5.3.nomodule.min.js" as="script"><link rel="prefetch" href="/code/van-x-0.6.2.nomodule.min.js" as="script"></body></html>