Make code on "Getting Started" page functional #9
Conversation
|
I just noticed that the preview Getting Started page looks no different and still uses the old code rather than including my change. Did I do something wrong? |
|
Hi @1231231231231231231231231, Thanks for reaching out! I believe the code in "Test It Out" section can work regardless of whether you're using |
|
Huh, that's interesting. Does the following code work for you then, if you put it in a file like <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.2.nomodule.min.js"></script>
<script>
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())
</script>For me, in Firefox, this throws the aforementioned exception in the console while showing a blank webpage. Adding |
|
Hi @1231231231231231231231231, I think you need to enclose everything with |
|
Oh, yes indeed, that also fixes it! Interesting observation. I see the Should it be documented, then, that the library depends on the DOM being... built up, or whatever is happening exactly? We could include the |
|
For module inline scripts, you can put it anywhere in the HTML page. But for non-module inline scripts, you need to put the script inside the I understand this might be confusing to newcomers but I don't feel VanJS website should include these nuances (there are just too many in the web standard to include). |
|
Am I really a newcomer after writing web applications with JS for over 15 years? Or do I just have trouble with learning at that point! 😆 Yes, web standards education is beyond the scope of VanJS, but the first Getting Started example does not work when someone copies it as-is Many JS examples depend on other elements, like when you do What if the code would use |
|
Maybe I should add: for me it doesn't matter, I know the solution now so feel free to decline. I can start using VanJS and learn about more modern frameworks as I wanted to. I'm just proposing a solution for those who come after me :) |
|
Hi @1231231231231231231231231, I appreciate your feedback. The code example in "Getting Started" page is intended to work in both module-typed scripts and non-module-typed scripts. Unfortunately the requirements of script placement for module-typed scripts and non-module-typed scripts are subtly different. I'm afraid there isn't a very brief way to describe the requirements for both. This is just one type of nuances of web standard. Another relevant nuance is module-typed scripts only work when the HTML is hosted by HTTP servers, but don't work if you simply open static HTML files. At the end of the day we need to set a boundary. While I understand this kind of nuances are confusing to some people if they're not aware of them, I don't think VanJS website is the place to include all of them. Regarding your suggestion of using
This is technically true. The code example listed in "Getting Started" page is in JavaScript, and you can't open JavaScript file directly in the browser to run it. You have to place the JavaScript code somewhere in an HTML file, one way or another. And the requirements of the placement are different between module-typed scripts and non-module-typed scripts, and can't be explained very briefly. I think the best course of action for me is to provide a link to our current discussion in "Getting Started" page for people who are struggling to make their scripts to work, which I will do shortly. |
Hi! I am new to modern web frameworks (but have some experience with vanilla/classic JS, PHP Python, you name it) and was really struggling to get this working. Thought I had tried everything, going so far as to look at jsfiddle with the element inspector to find differences between why it's working on their platform but not in my own HTML file, or trying to host it on a web server instead of accessing through the file:// protocol. Nothing. Today, I figured out the problem is that the code needs to be placed in a module script tag! The file being included explicitly says
nomodule! I have no idea what this newfangled script property does yet (going to look it up later), but it's required for the example code to work.This pull request proposes to include this necessary context in the basic example to get people started. This makes the example functional, as one can now copy-paste the code and it will simply work.
Without this, the page will say
Uncaught TypeError: dom is nullwith a stack trace leading into the VanJS code, making me initially think your code is broken. (The minified code, even less helpfully, sayse is null.)An alternative, if you prefer, might be to mention in the page text that
type=moduleis needed