@markout-lang/bootstrap-kit 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -48
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,54 +33,10 @@ Bootstrap out:
|
|
|
33
33
|
<:import src="/npm/@markout-lang/bootstrap-kit/parts/card.htm" />
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
That serves [the site](../../sites/site/), which is where the pages built on
|
|
43
|
-
this kit live: `/demos/kitchen-sink.html`, every component one after another;
|
|
44
|
-
and `/demos/orbit.html`, an operations dashboard built out of them, which is
|
|
45
|
-
what they look like wired to one page's data.
|
|
46
|
-
|
|
47
|
-
The site is a plain Express app rather than markout's `Server`, because Orbit
|
|
48
|
-
is a whole application: it has an API of its own, served from a fake
|
|
49
|
-
in-memory database (`orbit-db.ts`), and markout is the middleware that
|
|
50
|
-
renders its pages. Orbit reads that API with `std-data` from the std kit,
|
|
51
|
-
which fetches while the page renders — so the served console is complete and
|
|
52
|
-
the browser asks for nothing.
|
|
53
|
-
|
|
54
|
-
Orbit is four files, which is the shape an application takes:
|
|
55
|
-
`demos/orbit.html` for its state, layout and logic; `demos/orbit/components.htm`
|
|
56
|
-
for the tags it defines on top of the kit's; `demos/orbit/sources.htm` for
|
|
57
|
-
where its data comes from; and `server.ts` for its API. The first is imported,
|
|
58
|
-
the second included — a definition wants to arrive once per page however often
|
|
59
|
-
it is named, and an instance wants to be spliced exactly where it is written,
|
|
60
|
-
because that is where its name resolves.
|
|
61
|
-
|
|
62
|
-
`orbit/sources.htm` also shows the token pattern working for an application's
|
|
63
|
-
own fragment: its root carries `:apiBase="/api"`, which lands on whatever
|
|
64
|
-
contains the `<:include>` unless that element declares it, so a page points
|
|
65
|
-
Orbit at another host without the fragment changing. That is the same
|
|
66
|
-
mechanism as `bsCssUrl` below — not something kits get and applications
|
|
67
|
-
don't.
|
|
68
|
-
|
|
69
|
-
## Tests
|
|
70
|
-
|
|
71
|
-
`packages/cli/test/kits/bootstrap-kit.test.ts`, in two tiers:
|
|
72
|
-
|
|
73
|
-
- **compiled**, which is most of it: every part compiles on its own, the
|
|
74
|
-
showcase compiles and server-renders with nothing reported, and the id
|
|
75
|
-
wiring is checked mechanically — every `aria-controls`, `aria-labelledby`,
|
|
76
|
-
`for`, `data-bs-target` and `data-bs-parent` has to name an element that
|
|
77
|
-
exists. That last one is the kit's whole reason for existing, so it is
|
|
78
|
-
worth a test that can't be argued with.
|
|
79
|
-
- **live**, in Playwright: the value-driven components actually driven, and
|
|
80
|
-
a stubbed Bootstrap asserting the plugin calls. Skipped when no browser is
|
|
81
|
-
installed (`npx playwright install chromium`).
|
|
82
|
-
|
|
83
|
-
Nothing reaches the network: the tests set the URL tokens to local files.
|
|
36
|
+
Every component below is shown one after another in the [kitchen
|
|
37
|
+
sink](https://markout.dev/demos/kitchen-sink), and
|
|
38
|
+
[Orbit](https://markout.dev/demos/orbit) is an operations dashboard built out
|
|
39
|
+
of them — what they look like wired to one page's data.
|
|
84
40
|
|
|
85
41
|
## What is and isn't a component
|
|
86
42
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@markout-lang/bootstrap-kit",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Bootstrap 5.3 as Markout components: one part per component, with the id wiring, the ARIA attributes and the repetition written once",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|