@gramlot/gramlot-examples 0.2.5 → 0.2.6
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 +8 -10
- package/package.json +1 -1
- package/src/gramlot_examples/catalog.json +1 -1
- package/src/gramlot_examples/pages/README.md +4 -2
- package/src/gramlot_examples/pages/controllers/07_events.md +1 -1
- package/src/gramlot_examples/pages/html_svg/10_cards_with_icons.md +2 -1
- package/src/gramlot_examples/pages/html_svg/13_live_source.md +2 -2
- package/src/gramlot_examples/pages/html_svg/README.md +1 -1
package/README.md
CHANGED
|
@@ -9,13 +9,18 @@ pip install gramlot-examples
|
|
|
9
9
|
npm install @gramlot/gramlot-examples
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
+
[](https://pypi.org/project/gramlot-examples/)
|
|
13
|
+
[](https://www.npmjs.com/package/@gramlot/gramlot-examples)
|
|
14
|
+
|
|
15
|
+
Current release: 0.2.6.
|
|
16
|
+
|
|
12
17
|
The repositories of the family are described in
|
|
13
18
|
[The Gramlot family](https://github.com/gramlot-org/gramlot/blob/main/docs/public/055-family.md)
|
|
14
19
|
(GC-055).
|
|
15
20
|
|
|
16
21
|
## Pages
|
|
17
22
|
|
|
18
|
-
[`src/gramlot_examples/pages/`](src/gramlot_examples/pages/README.md) holds three
|
|
23
|
+
[`src/gramlot_examples/pages/`](https://github.com/gramlot-org/gramlot-examples/blob/main/src/gramlot_examples/pages/README.md) holds three
|
|
19
24
|
families. Each example is a Python page and its JavaScript equivalent, with a
|
|
20
25
|
same-name README:
|
|
21
26
|
|
|
@@ -33,7 +38,7 @@ The gallery page lists the families and opens each example beside its README and
|
|
|
33
38
|
source. `build_gallery` (Python) and `buildGallery` (JavaScript) return its routes and
|
|
34
39
|
static assets; each environment (`gramlot-py-server`, `gramlot-js-server`) serves the
|
|
35
40
|
gallery with its own host and can add its own catalogue. Guide:
|
|
36
|
-
[GE-010](docs/010-gallery.md).
|
|
41
|
+
[GE-010](https://github.com/gramlot-org/gramlot-examples/blob/main/docs/010-gallery.md).
|
|
37
42
|
|
|
38
43
|
```sh
|
|
39
44
|
npm install --no-package-lock
|
|
@@ -42,11 +47,4 @@ npm test
|
|
|
42
47
|
python -m unittest discover -s tests
|
|
43
48
|
```
|
|
44
49
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
[Hello World](apps/hello-world/README.md) stays here until its launchers move to the
|
|
48
|
-
adapters as their quick-start examples. Its JavaScript launchers use
|
|
49
|
-
`@gramlot/gramlot-js-server`; its Python launchers wait for `gramlot-py-server`.
|
|
50
|
-
Database profiles remain placeholders.
|
|
51
|
-
|
|
52
|
-
[Repository map](docs/005-repository-map.md) (GE-005).
|
|
50
|
+
[Repository map](https://github.com/gramlot-org/gramlot-examples/blob/main/docs/005-repository-map.md) (GE-005).
|
package/package.json
CHANGED
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"title": "Live Source playground",
|
|
94
94
|
"folder": "13_live_source",
|
|
95
95
|
"description": "Create, update and remove Source nodes, with a small SVG animation.",
|
|
96
|
-
"explanation": "Builder calls create list items. Source mutations update text, color and structure. A setInterval animates an SVG attribute; removing its section disposes the timer. Works in
|
|
96
|
+
"explanation": "Builder calls create list items. Source mutations update text, color and structure. A setInterval animates an SVG attribute; removing its section disposes the timer. Works in every gallery command and in the static gallery opened from disk."
|
|
97
97
|
}
|
|
98
98
|
]
|
|
99
99
|
},
|
|
@@ -14,8 +14,10 @@ JavaScript, in three families:
|
|
|
14
14
|
Each example is a file page: `NN_name.py`, its JavaScript equivalent `NN_name.js`,
|
|
15
15
|
its README `NN_name.md`, and where needed a same-name stylesheet `NN_name.css`.
|
|
16
16
|
`NN_name.js` exports `Page` and `Logic`: the JavaScript page uses both, the Python
|
|
17
|
-
page takes `Logic` from it. The
|
|
18
|
-
|
|
17
|
+
page takes `Logic` from it. The pages use only what the core `FileHost` serves:
|
|
18
|
+
`Page.css`, the same-name stylesheet and the `Logic` of the page module. The gallery
|
|
19
|
+
adds its own files: the frame script, a staged `<key>_aux.js` per example and its
|
|
20
|
+
assets ([GE-010 §025](https://github.com/gramlot-org/gramlot-examples/blob/main/docs/010-gallery.md#ge-010-025)).
|
|
19
21
|
|
|
20
22
|
The pages depend only on the Gramlot core. Shared visual styling is the
|
|
21
23
|
`gramlot-base` theme shipped in the core package, served by each environment at
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
- The value is inline code with `this` = the declaring node and the parameter `event`. `this.SET('.path', …)` writes relative to the node's context.
|
|
6
6
|
- The handler runs with the declaring node also when the event hits a descendant: a click on a chip reaches the section's handler, and `event.target` names the chip.
|
|
7
|
-
- A value of dotted names, such as `gui.focused`, is named logic of a `js_requires` group instead.
|
|
7
|
+
- A value of dotted names, such as `gui.focused`, is named logic of a `js_requires` group instead. `js_requires` needs a Host with a resource system: the core `FileHost` and the current adapters have none and raise an error for any name, so this page uses inline code. The resource system comes with genro-kajenn, part of Genro.
|
|
8
8
|
- Removing the node removes its listeners.
|
|
9
9
|
|
|
10
10
|
**Try it:** Click the green chip, type a word, then add `connect_onfocus` to the field.
|
|
@@ -10,7 +10,8 @@ Source deletion and removes the corresponding DOM branch, including its SVG.
|
|
|
10
10
|
The action never removes a DOM element directly.
|
|
11
11
|
|
|
12
12
|
Python and JavaScript declare the same page and browser action. It also works
|
|
13
|
-
in the
|
|
13
|
+
in the static gallery of `gramlot-serverless gallery <folder>`, opened from disk,
|
|
14
|
+
offline.
|
|
14
15
|
|
|
15
16
|
**Try it:** Remove the middle card, then the others. Reload to restore all three.
|
|
16
17
|
Add a fourth card to the local dataset and give it a matching icon branch.
|
|
@@ -14,5 +14,5 @@ Named Source paths make the target of each operation explicit. Methods divide
|
|
|
14
14
|
the page into sections and loops construct the initial items and buttons.
|
|
15
15
|
|
|
16
16
|
This example demonstrates live Source, not Data binding, persistence or server
|
|
17
|
-
synchronization. Its scripts
|
|
18
|
-
|
|
17
|
+
synchronization. Its scripts and actions run in every gallery command, and in the
|
|
18
|
+
static gallery of `gramlot-serverless gallery <folder>` opened from disk, offline.
|
|
@@ -7,4 +7,4 @@ Start with **Hello World**, then explore text, lists, tables and form controls.
|
|
|
7
7
|
Compare each preview with its code, then try the small change suggested in the example's notes. Python and JavaScript express the same ideas.
|
|
8
8
|
|
|
9
9
|
Finish with **Live Source playground**: change the page while it is running and
|
|
10
|
-
watch a small SVG animation driven by Source attributes. The live examples also run in the
|
|
10
|
+
watch a small SVG animation driven by Source attributes. The live examples also run in the static gallery of `gramlot-serverless gallery <folder>`, opened from disk, offline.
|