-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathstart.html
140 lines (124 loc) · 12.7 KB
/
start.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
<!DOCTYPE html>
<html lang="en"><head>
<link rel="icon" href="/logo.svg">
<title>VanJS - Getting Started</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><script type="text/javascript" src="/code/van-1.5.3.nomodule.min.js" defer></script><script type="text/javascript" src="start.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 current">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">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">Getting Started</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>VanJS</b>: Getting Started</h1><blockquote><i>Truth is ever to be found in the simplicity, and not in the multiplicity and confusion of things.<br><br>-- Isaac Newton</i></blockquote><p>To get started, add the line below to your script:</p><pre><code class="language-js">import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.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/van/public/van-1.5.3.nomodule.min.js"></script></code></pre><p>Alternative, you can download the files (<code class="symbol"><a href="/code/van-1.5.3.min.js" download="van-1.5.3.min.js" style="white-space: nowrap;" title="Download van-1.5.3.min.js">van-1.5.3.min.js</a></code>, <code class="symbol"><a href="/code/van-1.5.3.nomodule.min.js" download="van-1.5.3.nomodule.min.js" style="white-space: nowrap;" title="Download van-1.5.3.nomodule.min.js">van-1.5.3.nomodule.min.js</a></code>) and serve them locally.</p><h2 class="w3-xxlarge w3-text-red" id="npm-integration"><a class="self-link" href="#npm-integration">NPM Integration</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>It's also possible to integrate with <b>VanJS</b> via NPM, making it handy to build web applications with tools like <a href="https://vitejs.dev/" class="w3-hover-opacity">Vite</a> or <a href="https://parceljs.org/" class="w3-hover-opacity">Parcel</a>. You can also build your own NPM packages that depend on <b>VanJS</b>. To get started with <b>VanJS</b> via NPM, run:</p><pre><code class="language-shell">npm install vanjs-core</code></pre><p>To use the <b>VanJS</b> NPM package, add this line to your script:</p><pre><code class="language-js">import van from "vanjs-core"</code></pre><p>or this line if you want to import the debug version of <b>VanJS</b>:</p><pre><code class="language-js">import van from "vanjs-core/debug"</code></pre><p>You can check out the <code class="symbol"><a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/npm-examples/hello?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">Hello World</a></code> app built with <b>VanJS</b> NPM + Vite (<a href="https://github.com/vanjs-org/van/tree/main/npm-examples/hello" class="w3-hover-opacity">source code</a>).</p><h2 class="w3-xxlarge w3-text-red" id="typescript-support-for-non-npm-integration"><a class="self-link" href="#typescript-support-for-non-npm-integration">TypeScript Support for Non-NPM Integration</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><h3 class="w3-large w3-text-red" id="for-esm-modules"><a class="self-link" href="#for-esm-modules">For ESM Modules</a></h3><p>To get TypeScript support for your ESM modules, download the corresponding <code class="symbol">.d.ts</code> file from the <a href="#download-table" class="w3-hover-opacity">Download Table</a> and store it alongside the <code class="symbol">.js</code> source file, and then import the <code class="symbol">.js</code> file as normal:</p><pre><code class="language-js">import van from "./van-1.5.3.min.js"</code></pre><h3 class="w3-large w3-text-red" id="for-script-tag"><a class="self-link" href="#for-script-tag">For Script Tag</a></h3><p>To get TypeScript support for code that would be imported via a <code class="language-html"><script></code> tag, download a <code class="symbol">.d.ts</code> file from the <a href="#download-table" class="w3-hover-opacity">Download Table</a> (any file from the table would work), and then add the following code at the top of your <code class="symbol">.ts</code> file:</p><pre><code class="language-ts">import type { Van } from "./van-1.5.3.d.ts"
declare const van: Van
</code></pre><h2 class="w3-xxlarge w3-text-red" id="test-it-out"><a class="self-link" href="#test-it-out">Test It Out</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>The following code will produce a funnier <code class="symbol">Hello</code> component:</p><pre><code class="language-js">const {button, div, pre} = van.tags
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
const Run = ({sleepMs}) => {
const steps = van.state(0)
;(async () => { for (; steps.val < 40; ++steps.val) await sleep(sleepMs) })()
return pre(() => `${" ".repeat(40 - steps.val)}🚐💨Hello VanJS!${"_".repeat(steps.val)}`)
}
const Hello = () => {
const dom = div()
return div(
dom,
button({onclick: () => van.add(dom, Run({sleepMs: 2000}))}, "Hello 🐌"),
button({onclick: () => van.add(dom, Run({sleepMs: 500}))}, "Hello 🐢"),
button({onclick: () => van.add(dom, Run({sleepMs: 100}))}, "Hello 🚶♂️"),
button({onclick: () => van.add(dom, Run({sleepMs: 10}))}, "Hello 🏎️"),
button({onclick: () => van.add(dom, Run({sleepMs: 2}))}, "Hello 🚀"),
)
}
van.add(document.body, Hello())
</code></pre><p><b>Demo:</b></p><p id="demo-hello-fun"></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/start/hello-fun">Try on jsfiddle</a></p><p><i>If you encounter problems after pasting the code above to your HTML file, be mindful of where to place your script. See <a href="https://github.com/vanjs-org/vanjs-org.github.io/pull/9" class="w3-hover-opacity">#9</a> for a detailed discussion.</i></p><h2 class="w3-xxlarge w3-text-red" id="download-table"><a class="self-link" href="#download-table">Download Table</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><div id="download-table-div"></div></div>
<aside id="toc"><ul><li><a href="#npm-integration" class="w3-hover-opacity">NPM Integration</a></li><li><a href="#typescript-support-for-non-npm-integration" class="w3-hover-opacity">TypeScript Support for Non-NPM Integration</a><ul><li><a href="#for-esm-modules" class="w3-hover-opacity">For ESM Modules</a></li><li><a href="#for-script-tag" class="w3-hover-opacity">For Script Tag</a></li></ul></li><li><a href="#test-it-out" class="w3-hover-opacity">Test It Out</a></li><li><a href="#download-table" class="w3-hover-opacity">Download Table</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>