2023-11-25 08:37:16 +01:00
|
|
|
#+title: Uncluttered
|
|
|
|
#+author: Xavier Brinon
|
|
|
|
#+date: [2023-11-24 Fri]
|
|
|
|
#+startup: indent
|
|
|
|
* Org shortcut
|
|
|
|
- Evaluate the line, apply the config in place :: ~C-c C-c~
|
|
|
|
* Webserver
|
|
|
|
** Guile
|
|
|
|
So we need a webserver to display the HTML page. Since I'm keen on trying fancy
|
|
|
|
pancy standard stuff in Webdev, let's do it to with GNU.
|
|
|
|
Let's try and choose a webserver in [[https://www.gnu.org/software/guile/manual/html_node/index.html][Guile]].
|
|
|
|
|
|
|
|
#+name: install guile
|
|
|
|
#+begin_src shell
|
|
|
|
guix install guile
|
|
|
|
guile --version
|
|
|
|
#+end_src
|
|
|
|
|
|
|
|
#+RESULTS: install guile
|
|
|
|
: guile (GNU Guile) 3.0.9
|
|
|
|
: Copyright (C) 2023 Free Software Foundation, Inc.
|
|
|
|
:
|
|
|
|
: License LGPLv3+: GNU LGPL 3 or later <http://gnu.org/licenses/lgpl.html>.
|
|
|
|
: This is free software: you are free to change and redistribute it.
|
|
|
|
: There is NO WARRANTY, to the extent permitted by law.
|
|
|
|
** or Rust ?
|
|
|
|
We're exploring Rust as well, so maybe there is some fancy stuff here as well. I
|
|
|
|
mean while we wait and learn about Guile anyway.
|
|
|
|
Well, there's [[https://rocket.rs/][Rocket]] for Rust but I guess we can wait.
|
|
|
|
** Nah, let's stick to Esbuild
|
|
|
|
Because this is what the book is doing and we don't want to waste too much time
|
|
|
|
(it's 9:29pm) and I'm too tired for that.
|
|
|
|
* Set up
|
2023-11-25 09:13:09 +01:00
|
|
|
** Repo
|
2023-11-25 08:37:16 +01:00
|
|
|
Setting up the project is done via the repo template on github.[fn:1]
|
|
|
|
Let's clone it from gitlab, or gitea ?
|
2023-11-25 09:13:09 +01:00
|
|
|
** Esbuild
|
|
|
|
Recommended way is via curl, see the [[https://esbuild.github.io/getting-started/#other-ways-to-install][install page]].
|
|
|
|
#+name: curl esbuild
|
|
|
|
#+begin_src shell
|
|
|
|
curl -fsSL https://esbuild.github.io/dl/v0.19.7 | sh
|
|
|
|
#+end_src
|
2023-11-25 08:37:16 +01:00
|
|
|
|
2023-11-25 20:23:17 +01:00
|
|
|
Now that you have ~esbulid~, install it in your local path if you fancy.
|
|
|
|
We can start a server from here.
|
|
|
|
#+name: start server
|
|
|
|
#+begin_src shell
|
|
|
|
esbuild --serve=8888 --servedir=.
|
|
|
|
#+end_src
|
|
|
|
|
|
|
|
#+RESULTS: start server
|
|
|
|
: > Local: http://127.0.0.1:8888/
|
|
|
|
: > Network: http://192.168.1.140:8888/
|
|
|
|
: > Network: http://192.168.122.1:8888/
|
|
|
|
: > Network: http://10.0.3.1:8888/
|
|
|
|
: > Network: http://172.17.0.1:8888/
|
|
|
|
** HTTPS
|
|
|
|
Local servers are considered secure by default. There is no need to
|
|
|
|
over-engineer the setup. At least at this point.
|
|
|
|
As for CORS and other security rules, we will fix them as they arise.
|
|
|
|
No need to fix a problem until it actually becomes a pbm. The solution will be
|
|
|
|
measured agains the reality of the situation. This is the sure way to avoid
|
|
|
|
scope creeps.
|
|
|
|
** Firefox
|
|
|
|
Because you don't want to share the development setup with other projects or
|
|
|
|
the usual browsing, e.g. same cookie origins, indexdb, and localstorage, ...
|
|
|
|
we can launch firefox with a dedicated profile.
|
2023-11-25 22:58:50 +01:00
|
|
|
Assuming we all know where our firefox is launched from and that the esbuild
|
|
|
|
server is running.
|
2023-11-25 20:23:17 +01:00
|
|
|
#+name: firefox launcher
|
|
|
|
#+begin_src shell
|
|
|
|
#!/bin/bash
|
|
|
|
set -eu
|
|
|
|
|
|
|
|
DATA_DIR="$(mktemp -d -t 'firefox_unsafe_data_dir.XXXXXXXXXX')"
|
|
|
|
/usr/local/bin/firefox/firefox-bin \
|
|
|
|
-profile $DATA_DIR \
|
|
|
|
-no-remote \
|
|
|
|
-devtools \
|
|
|
|
-url http://localhost:8888 \
|
|
|
|
> /dev/null 2>&1 &!
|
|
|
|
#+end_src
|
|
|
|
|
|
|
|
#+RESULTS: firefox launcher
|
|
|
|
|
2023-11-25 22:58:50 +01:00
|
|
|
Any good script should be checked against [[https://www.shellcheck.net/][shellcheck]]
|
|
|
|
Looks like there is a [[https://how-to.dev/how-to-set-up-a-dev-server-with-esbuild][good doc]] about esbuild for dev server.
|
|
|
|
** HTML file
|
|
|
|
The html file contains the testing libraries and loads the tools.
|
|
|
|
It is using Mocha and Chai[fn:2].
|
2023-11-26 21:36:58 +01:00
|
|
|
*** And then some
|
2023-11-25 22:58:50 +01:00
|
|
|
Let's create 3 HTML files:
|
2023-11-26 21:36:58 +01:00
|
|
|
- chai+mocha.html
|
2023-11-25 22:58:50 +01:00
|
|
|
- tape.html
|
|
|
|
- qunit.html
|
|
|
|
|
|
|
|
|
|
|
|
And see which one works best.
|
2023-11-26 21:36:58 +01:00
|
|
|
*** Chai+Mocha
|
|
|
|
There is a [[https://mochajs.org/#running-mocha-in-the-browser][page]] that describe the starter HTML page. It's using *unpkg* for both
|
|
|
|
libraries.
|
|
|
|
I'm going to do just that. Let's download the *css* and *js* file from the URL
|
|
|
|
as used in the template html file.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[[https://www.chaijs.com/guide/installation/][Installing]] Chai is done by downloading the =chai.js= file from the repo.
|
|
|
|
Last realease is =4.3.10= as per the [[https://github.com/chaijs/chai/blob/v4.3.10/chai.js][URL]] but the exports says ~4.3.8~ :shrug:
|
|
|
|
Putting that in a folder =test-utils/=
|
|
|
|
#+name: download chai
|
|
|
|
#+begin_src shell
|
|
|
|
cd test-utils
|
|
|
|
curl https://github.com/chaijs/chai/blob/v4.3.10/chai.js -O
|
|
|
|
#+end_src
|
|
|
|
|
|
|
|
#+RESULTS: download chai
|
|
|
|
|
|
|
|
As for mocha, we would use the unpkg URL directly.
|
|
|
|
|
|
|
|
#+begin_src html
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
<title>Mocha Tests</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<link rel="stylesheet" href="/test-utils/mocha.css" />
|
|
|
|
<!--
|
|
|
|
<script type="importmap">
|
|
|
|
{
|
|
|
|
"imports": {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
-->
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="mocha"></div>
|
|
|
|
|
|
|
|
<script src="/test-utils/chai.js"></script>
|
|
|
|
<script src="/test-utils/mocha.js"></script>
|
|
|
|
|
|
|
|
<script class="mocha-init" type="module">
|
|
|
|
mocha.setup({ ui: "tdd", timeout: "2000"})
|
|
|
|
mocha.checkLeaks()
|
|
|
|
window.addEventListener("load", function () {
|
|
|
|
// Callback so that the test results get reported to CI
|
|
|
|
mocha.run(function (failures) {
|
|
|
|
window._testResults = {
|
|
|
|
done: true,
|
|
|
|
failures,
|
|
|
|
succeeded: failures ? false : true,
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<!-- Include the test files as script elements. -->
|
|
|
|
<!-- <script src="/path/to/file.js" type="module"></script> -->
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
#+end_src
|
|
|
|
|
|
|
|
Displaying the file via ~esbuild~ will show 0 tests run.
|
2023-11-25 22:58:50 +01:00
|
|
|
*** Tape
|
|
|
|
*** Qunit
|
|
|
|
|
2023-11-25 08:37:16 +01:00
|
|
|
* Footnotes
|
2023-11-26 21:36:58 +01:00
|
|
|
[fn:2]I don't know, possible alternatives are:
|
2023-11-25 22:58:50 +01:00
|
|
|
- Tape
|
|
|
|
- Qunit
|
|
|
|
They have really good scores in [[https://libraries.io/search?q=&platforms=NPM&sort=dependents_count][libraries.io]]
|
2023-11-25 08:37:16 +01:00
|
|
|
|
|
|
|
[fn:1]Which causes 2 problems:
|
|
|
|
- It's github
|
|
|
|
- I want to set up the project from scratch :shrug:
|