<div id="
content"
><h1 class="
w3-xxlarge"
><strong>VanX: The 1.0 kB Official VanJS Extension
</strong></h1><p><b>VanX
</b> is the official extension of
<b>VanJS
</b>, which provides handy utility functions.
<b>VanX
</b> makes
<b>VanJS
</b> more ergonomic for certain use cases and its developer experience closer to other popular UI frameworks. Like
<b>VanJS
</b>,
<b>VanX
</b> is also ultra-lightweight, with just 1.0kB in the gzipped minified bundle.
</p><h2 class="
w3-xxlarge w3-text-red"
id="
installation"
><a class="
self-link"
href="
#installation"
>Installation
</a></h2><hr style="
width:50px;border:5px solid red"
class="
w3-round"
><h3 class="
w3-large w3-text-red"
id="
via-npm"
><a class="
self-link"
href="
#via-npm"
>Via NPM
</a></h3><p><b>VanX
</b> is published as NPM package
<a href="
https://www.npmjs.com/package/vanjs-ext"
class="
w3-hover-opacity"
>vanjs-ext
</a>. Run the following command to install the package:
</p><pre><code class="
language-shell"
>npm install vanjs-ext
</code></pre><p>Add this line to your script to import the package:
</p><pre><code class="
language-js"
>import * as vanX from "vanjs-ext"
</code></pre><p>You can also import individual utility functions you're going to use:
</p><pre><code class="
language-js"
>import { <functions you want to use> } from "vanjs-ext"
</code></pre><h3 class="
w3-large w3-text-red"
id="
via-a-script-tag"
><a class="
self-link"
href="
#via-a-script-tag"
>Via a Script Tag
</a></h3><p>Alternatively, you can import
<b>VanX
</b> from CDN via a
<code class="
language-js"
><script type="text/javascript">
</code> tag:
</p><pre><code class="
language-html"
><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/van-x.nomodule.min.js"></script>
</code></pre><p><code class="
symbol"
>https://cdn.jsdelivr.net/npm/
[email protected]/dist/van-x.nomodule.js
</code> can be used for the non-minified version.
</p><p>Note that:
<b>VanJS
</b> needs to be
<a href="
/start"
class="
w3-hover-opacity"
>imported
</a> via a
<code class="
language-js"
><script type="text/javascript">
</code> tag for
<b>VanX
</b> to work properly.
</p><h3 class="
w3-large w3-text-red"
id="
typescript-support-for-script-tag-integration"
><a class="
self-link"
href="
#typescript-support-for-script-tag-integration"
>TypeScript Support for Script Tag Integration
</a></h3><p>To get TypeScript support for
<code class="
language-html"
><script>
</code> tag integration, download
<code class="
symbol"
><a href="
/code/van-x-0.2.5.d.ts"
download="
van-x-0.2.5.d.ts"
style="
white-space: nowrap;"
title="
Download van-x-0.2.5.d.ts"
>van-x-0.2.5.d.ts
</a></code> and add the following code at the top of your
<code class="
symbol"
>.ts
</code> file:
</p><pre><code class="
language-ts"
>import type * as vanXType from "./van-x-0.2.5.d.ts"
0 commit comments