vanjs-org.github.io/start.js at master · vanjs-org/vanjs-org.github.io · GitHub

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
const {a, button, code, div, option, p, pre, select, span, table, tbody, td, th, thead, tr} = 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.getElementById("demo-hello-fun"), Hello())
}

{
  const Symbol = (...children) => code({class: "symbol"}, children)

  const CopyButton = () => a(
    {class: "copy", onclick() {copy(this)}, onmouseout() {resetTooltip(this)}},
    span({class: "tooltip"}, "Copy import line"),
    "📋",
  )

  const Download = (file, hasCopyButton) => Symbol(
    a({href: "/code/" + file, download: file, style: "white-space: nowrap;", title: "Download " + file}, file),
    hasCopyButton && CopyButton(),
  )

  const DownloadRow = ({version, suffix, hasDts, description}) => tr(
    td(pre({style: "margin: 0;"}, Download(`van-${version}${suffix}.js`, true)),
      hasDts && pre({style: "margin: 0;"}, Download(`van-${version}${suffix}.d.ts`)),
    ),
    td(description),
  )

  const versionToAnnouncement = {
    "1.6.1": "https://github.com/vanjs-org/van/discussions/482",
    "1.6.0": "https://github.com/vanjs-org/van/discussions/466",
    "1.5.5": "https://github.com/vanjs-org/van/discussions/290#discussioncomment-12956581",
    "1.5.3": "https://github.com/vanjs-org/van/discussions/290#discussioncomment-11744512",
    "1.5.2": "https://github.com/vanjs-org/van/discussions/290#discussioncomment-10388691",
    "1.5.1": "https://github.com/vanjs-org/van/discussions/290#discussioncomment-10088503",
    "1.5.0": "https://github.com/vanjs-org/van/discussions/290",
    "1.4.1": "https://github.com/vanjs-org/van/discussions/280#discussioncomment-8725692",
    "1.4.0": "https://github.com/vanjs-org/van/discussions/280",
    "1.3.0": "https://github.com/vanjs-org/van/discussions/275",
    "1.2.8": "https://github.com/vanjs-org/van/discussions/246",
    "1.2.7": "https://github.com/vanjs-org/van/discussions/114#discussioncomment-7849992",
    "1.2.6": "https://github.com/vanjs-org/van/discussions/114#discussioncomment-7447600",
    "1.2.5": "https://github.com/vanjs-org/van/discussions/114#discussioncomment-7399324",
    "1.2.4": "https://github.com/vanjs-org/van/discussions/114#discussioncomment-7361441",
    "1.2.3": "https://github.com/vanjs-org/van/discussions/114#discussioncomment-7330296",
    "1.2.1": "https://github.com/vanjs-org/van/discussions/120",
    "1.2.0": "https://github.com/vanjs-org/van/discussions/114",
    "1.1.3": "https://github.com/vanjs-org/van/discussions/81#discussioncomment-6849913",
    "1.1.0": "https://github.com/vanjs-org/van/discussions/81",
    "1.0.2": "https://github.com/vanjs-org/van/discussions/72#discussioncomment-6718307",
    "1.0.1": "https://github.com/vanjs-org/van/discussions/72#discussioncomment-6652959",
    "1.0.0": "https://github.com/vanjs-org/van/discussions/72",
    "0.12.4": "https://github.com/vanjs-org/van/discussions/53#discussioncomment-6463621",
    "0.12.3": "https://github.com/vanjs-org/van/discussions/53#discussioncomment-6223903",
    "0.12.2": "https://github.com/vanjs-org/van/discussions/53#discussioncomment-6142154",
    "0.12.1": "https://github.com/vanjs-org/van/discussions/53#discussioncomment-6137688",
    "0.12.0": "https://github.com/vanjs-org/van/discussions/53",
    "0.11.11": "https://github.com/vanjs-org/van/discussions/44",
    "0.11.10": "https://github.com/vanjs-org/van/discussions/6",
    "0.11.9": "https://www.linkedin.com/posts/taoxin_github-vanjs-orgvan-vanjs-an-ultra-lightweight-activity-7062813716383219713-wPGd",
  }

  const DownloadTable = ({version}) => div(
    div("Click the link to download the file, or 📋 to copy the import line from CDN."),
    table({class: "download-table"},
      thead(tr(th("Files"), th("Description"))),
      tbody(
        DownloadRow({
          version,
          suffix: ".min",
          hasDts: true,
          description: "Minified script file for ES6 modules, optimized for bundle size.",
        }),
        DownloadRow({
          version,
          suffix: "",
          hasDts: true,
          description: "The source file without minification.",
        }),
        DownloadRow({
          version,
          suffix: ".debug",
          hasDts: true,
          description: ["The script file for debugging purpose, compared to ", Symbol(`van-${version}.js`), ", it adds additional sanity checks, such as type-checking, including the checkings that are impossible to do with TypeScript. Using this file for development purpose will detect issues earlier and produce more meaningful error messages."],
        }),
        DownloadRow({
          version,
          suffix: ".nomodule.min",
          description: ["Similar to ", Symbol(`van-${version}.min.js`), ", but designed to work in non-module context, such as inline JavaScript or ", Symbol('<script type="text/javascript">'), "."],
        }),
        DownloadRow({
          version,
          suffix: ".nomodule",
          description: ["Similar to ", Symbol(`van-${version}.js`), ", but designed to work in non-module context, such as inline JavaScript or ", Symbol('<script type="text/javascript">'), "."],
        }),
        DownloadRow({
          version,
          suffix: ".nomodule.debug",
          description: ["Similar to ", Symbol(`van-${version}.debug.js`), ", but designed to work in non-module context, such as inline JavaScript or ", Symbol('<script type="text/javascript">'), "."],
        }),
      ),
    ),
  )

  const version = van.state(Object.keys(versionToAnnouncement)[0])
  van.add(document.getElementById("download-table-div"),
    p(
      "Version: ",
      select({value: version, oninput: e => version.val = e.target.value},
        Object.keys(versionToAnnouncement).map(v => option({value: v}, v)),
      ),
      " ",
      () => a({href: versionToAnnouncement[version.val]}, "release announcement"),
    ),
    () => DownloadTable({version: version.val}),
  )
}