@gramlot/gramlot-examples 0.2.2 → 0.2.4

package/README.md

@@ -21,9 +21,12 @@ same-name README:
 
 - `html_svg/`: thirteen HTML and SVG pages, without binding (`e01`–`e13`);
 - `binding/`: eleven pages whose DOM follows the Data (`b01`–`b11`);
-- `controllers/`: nine pages with formulas, controllers, logic companions, events and
+- `controllers/`: nine pages with formulas, controllers, named logic, events and
   remote Source (`c01`–`c09`).
 
+Each `NN_name.js` exports `Page` and `Logic`; the Python page `NN_name.py` takes its
+`Logic` from the module beside it.
+
 ## Gallery
 
 The gallery page lists the families and opens each example beside its README and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gramlot/gramlot-examples",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Gramlot example pages, the gallery page and its catalogue.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
     "prepack": "node scripts/build-browser.mjs"
   },
   "dependencies": {
-    "@gramlot/gramlot": ">=0.2.2"
+    "@gramlot/gramlot": ">=0.2.5"
   },
   "devDependencies": {
     "@genrojs/bag": ">=0.10.1",

package/src/gramlot_examples/catalog.json

@@ -202,8 +202,8 @@
           "key": "c03",
           "title": "Named logic",
           "folder": "03_named_logic",
-          "description": "Formula and controller bodies in the companion 03_named_logic_aux.js.",
-          "explanation": "The companion exports class Logic. func names one of its methods; the method receives the resolved parameters, and a controller also its node. Named logic runs under a strict CSP."
+          "description": "Formula and controller bodies in class Logic of 03_named_logic.js.",
+          "explanation": "The page module exports class Logic beside Page. func names one of its methods; the method receives the resolved parameters, and a controller also its node. Named logic runs under a strict CSP."
         },
         {
           "key": "c04",

package/src/gramlot_examples/gallery/dist/gallery.js

@@ -14387,6 +14387,15 @@
       if (!node.resolver && value instanceof Bag) yield* serializationNodes(value, path);
     }
   }
+  function xmlDateText(value) {
+    const iso = value.toISOString();
+    const isEpochDate = value.getUTCFullYear() === 1970 && value.getUTCMonth() === 0 && value.getUTCDate() === 1;
+    const isMidnight = value.getUTCHours() === 0 && value.getUTCMinutes() === 0 && value.getUTCSeconds() === 0 && value.getUTCMilliseconds() === 0;
+    if (isMidnight && !isEpochDate) return iso.slice(0, iso.indexOf("T"));
+    const timestamp = iso.replace(/\.000Z$/, "Z");
+    if (isEpochDate && !isMidnight) return timestamp.slice(timestamp.indexOf("T") + 1);
+    return timestamp;
+  }
   var Bag = class _Bag {
     static tytxSuffix = "X";
     /**
@@ -16147,6 +16156,7 @@
      * Serialize Bag to XML format.
      *
      * All values are converted to strings without type information.
+     * Date values use ISO 8601 text in UTC (date, time, or datetime).
      * For type-preserving serialization, use toTytx() instead.
      *
      * @param {Object} [options={}] - Serialization options.
@@ -16224,7 +16234,8 @@ ${"  ".repeat(depth)}</${tag2}>`;
         }
         return `<${tag2}${attrsStr}></${tag2}>`;
       }
-      const text2 = this._escapeXml(String(value));
+      const scalar = value instanceof Date && !Number.isNaN(value.getTime()) ? xmlDateText(value) : String(value);
+      const text2 = this._escapeXml(scalar);
       return `<${tag2}${attrsStr}>${text2}</${tag2}>`;
     }
     /**

package/src/gramlot_examples/gallery/gallery-page.js

@@ -89,7 +89,7 @@ export class GalleryPage extends GramlotPage {
         codepane.pre().code(example.source, {class: 'language-javascript',
             id: `code-${key}`});
         if (example.logic != null) {
-            codepane.h3(`Companion · ${example.folder}_aux.js`);
+            codepane.h3(`Logic · ${example.folder}_aux.js`);
             codepane.pre().code(example.logic, {class: 'language-javascript',
                 id: `logic-${key}`});
         }

package/src/gramlot_examples/gallery/page.js

@@ -1,5 +1,5 @@
 /** Node integration: provide original example text to the browser-safe gallery UI. */
-import {existsSync, readFileSync} from 'node:fs';
+import {readFileSync} from 'node:fs';
 import {join} from 'node:path';
 import {buildGallery} from '../index.js';
 import {GalleryPage} from './gallery-page.js';
@@ -10,7 +10,8 @@ export class Page extends GalleryPage {
     static catalogs = [];
 
     static get families() {
-        return buildGallery({catalogs: this.catalogs}).families.map(({key, title, path, examples}) => {
+        const {families, routes} = buildGallery({catalogs: this.catalogs});
+        return families.map(({key, title, path, examples}) => {
             const read = name => readFileSync(join(path, name), 'utf8');
             return {
                 key, title, readme: read('README.md'),
@@ -18,7 +19,9 @@ export class Page extends GalleryPage {
                     key: example.key, title: example.title, folder: example.folder, frameUrl: example.key,
                     readme: read(`${example.folder}.md`),
                     source: read(`${example.folder}.js`),
-                    logic: existsSync(join(path, `${example.folder}_aux.js`)) ? read(`${example.folder}_aux.js`) : null,
+                    // The page module shows its own Logic; only a companion NN_name_aux.js is shown apart.
+                    logic: routes[example.key].logic === routes[example.key].page
+                        ? null : readFileSync(routes[example.key].logic, 'utf8'),
                 })),
             };
         });

package/src/gramlot_examples/index.js

@@ -35,8 +35,10 @@ function readCatalog(catalog, pages, common) {
  * Return the families, routes and static assets of the common gallery plus `catalogs`.
  *
  * Each item of `catalogs` is a pair `[catalog.json, pages folder]` of one environment.
- * `routes` maps each key to its JavaScript page and same-name companions; `assets` maps
- * each URL to its file and media type. Nothing is written or served here.
+ * `routes` maps each key to its JavaScript page, its same-name stylesheet and its logic
+ * module: `NN_name_aux.js`, else `NN_name.js`, the page module itself, whose `Logic` export
+ * the host takes (the host throws when both hold a `Logic`). `assets` maps each URL to its
+ * file and media type. Nothing is written or served here.
  */
 export function buildGallery({catalogs = []} = {}) {
     const families = readCatalog(join(PACKAGE, 'catalog.json'), join(PACKAGE, 'pages'), true);
@@ -66,9 +68,8 @@ export function buildGallery({catalogs = []} = {}) {
             const page = join(folder, `${example.folder}.js`);
             if (!existsSync(page)) throw new Error(`Missing page: ${page}`);
             const stylesheet = join(folder, `${example.folder}.css`);
-            const logic = join(folder, `${example.folder}_aux.js`);
-            routes[example.key] = {page, stylesheet: existsSync(stylesheet) ? stylesheet : null,
-                logic: existsSync(logic) ? logic : null};
+            const logic = [join(folder, `${example.folder}_aux.js`), page].find(path => existsSync(path));
+            routes[example.key] = {page, stylesheet: existsSync(stylesheet) ? stylesheet : null, logic};
             for (const suffix of SUFFIXES) {
                 const source = join(folder, `${example.folder}${suffix}`);
                 if (existsSync(source)) assets[`/pages/${family.key}/${basename(source)}`] = {file: source, type: mediaType(source)};

package/src/gramlot_examples/pages/README.md

@@ -8,13 +8,14 @@ JavaScript, in three families:
   editing, booleans, style, SVG and freeze. The last three take the content of
   `html_svg` examples 06, 08 and 12 and add the binding.
 - [`controllers/`](controllers/): nine pages with formulas, controllers, named
-  logic in a companion `NN_name_aux.js`, inline expressions, node methods, buttons,
+  logic in the `Logic` class of the page module, inline expressions, node methods, buttons,
   events, remote Source and the end-to-end story of Gramlot 0.2.0.
 
 Each example is a file page: `NN_name.py`, its JavaScript equivalent `NN_name.js`,
-its README `NN_name.md`, and where needed a same-name stylesheet `NN_name.css` and a
-logic companion `NN_name_aux.js`. The gallery uses only what the minimal `FileHost`
-serves: `Page.css`, the same-name companions and the companion's root logic group.
+its README `NN_name.md`, and where needed a same-name stylesheet `NN_name.css`.
+`NN_name.js` exports `Page` and `Logic`: the JavaScript page uses both, the Python
+page takes `Logic` from it. The gallery uses only what the minimal `FileHost`
+serves: `Page.css`, the same-name stylesheet and the root logic group.
 
 The pages depend only on the Gramlot core. Shared visual styling is the
 `gramlot-base` theme shipped in the core package, served by each environment at

package/src/gramlot_examples/pages/binding/01_pointers.js

@@ -33,3 +33,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: 'person.name', value: 'Ada Lovelace', role: 'Mathematician'});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/binding/02_variable_datapath.js

@@ -31,3 +31,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: 'current', value: 'people.ada'});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/binding/03_setters_and_defaults.js

@@ -40,3 +40,6 @@ export class Page extends BasePage {
         later.dataSetter({destination_path: '.shipping', value: {city: 'London', zone: 'EU'}});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/binding/04_native_editing.js

@@ -51,3 +51,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.topics', value: ['html', 'data']});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/binding/05_checkbox_radio.js

@@ -39,3 +39,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.plan.plus', value: true});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/binding/06_style_and_visibility.js

@@ -49,3 +49,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.style', value: 'border: 4px dashed #ffc400'});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/binding/07_bound_svg.js

@@ -31,3 +31,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.bar', value: '#456bc4'});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/binding/08_freeze.js

@@ -24,3 +24,30 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.frozen', value: false});
     }
 }
+
+/** Logic of 08_freeze.py and 08_freeze.js: each button's nested controller calls one method. */
+export class Logic {
+    sourceNode(nodeId) {
+        return this.page.source.getNodeByAttr('node_id', nodeId);
+    }
+
+    freeze(node) {
+        this.page.renderer.freeze(this.sourceNode('board'));
+        node.SET('.frozen', true);
+    }
+
+    add(node) {
+        node.SET('.count', node.GET('.count') + 1);
+    }
+
+    removeLast() {
+        const items = this.sourceNode('items').value;
+        const last = items.getNodes().at(-1);
+        if (last) items.popNode(last.label);
+    }
+
+    thaw(node) {
+        this.page.renderer.unfreeze(this.sourceNode('board'));
+        node.SET('.frozen', false);
+    }
+}

package/src/gramlot_examples/pages/binding/08_freeze.md

@@ -2,7 +2,7 @@
 
 `renderer.freeze(node)` suspends the DOM work of a branch; `renderer.unfreeze(node)` resumes it and builds the current Source of the branch once.
 
-The four buttons call methods of the companion `08_freeze_aux.js`, through a `dataController` nested in each button.
+The four buttons call methods of the `Logic` class in `08_freeze.js`, through a `dataController` nested in each button.
 
 - While the board is frozen, **Add one** still changes the counter: the elements already built keep following the Data.
 - **Remove last item** removes a Source node at once, but its `<li>` stays on screen until the thaw.

package/src/gramlot_examples/pages/binding/09_forms.js

@@ -77,3 +77,6 @@ export class Page extends BasePage {
         parent.input({type: kind, id: key, name: key, value: `^.${key}`, ...attrs});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/binding/10_svg_shapes.js

@@ -40,3 +40,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.label', value: 'rectangle · circle · ellipse · line · polyline · polygon'});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/binding/11_complete_page.js

@@ -125,3 +125,6 @@ export class Page extends BasePage {
         }
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/controllers/01_formula.js

@@ -32,3 +32,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.vat', value: 0.2});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/controllers/02_controller.js

@@ -42,3 +42,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.interval', value: '1'});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/controllers/03_named_logic.js

@@ -7,7 +7,7 @@ export class Page extends BasePage {
     main(root) {
         const pane = root.div({class: 'example-page stack', datapath: 'cart'});
         pane.h1('Named logic');
-        pane.p('The formula and the controller name methods of class Logic in 03_named_logic_aux.js.',
+        pane.p('The formula and the controller name methods of class Logic in 03_named_logic.js.',
             {class: 'muted'});
         const form = pane.form({class: 'card stack'});
         form.html_label('Price', {for: 'price'});
@@ -26,3 +26,23 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.price', value: 80});
     }
 }
+
+/**
+ * Logic of 03_named_logic.py and 03_named_logic.js. The minimal FileHost serves this module as the
+ * root group of the page logic: `func='finalPrice'` names the method below.
+ */
+export class Logic {
+    /** A formula method receives the resolved parameters and returns the result. */
+    finalPrice(kwargs) {
+        const {price, threshold} = kwargs;
+        if (price == null) return null;
+        return price >= threshold ? Math.round(price * 90) / 100 : price;
+    }
+
+    /** A controller method receives its node and the parameters; `this` is the group. */
+    countChange(node, kwargs) {
+        this.changes = (this.changes ?? 0) + 1;
+        node.SET('.changes', this.changes);
+        node.SET('.reason', `${kwargs._reason}: price ${kwargs.price}`);
+    }
+}

package/src/gramlot_examples/pages/controllers/03_named_logic.md

@@ -1,6 +1,6 @@
 # 03 · Named logic
 
-The code of this page lives in its companion `03_named_logic_aux.js`, a JavaScript module beside the page that exports `class Logic`. The minimal FileHost serves it for the Python page and for the JavaScript page alike.
+The code of this page lives in `class Logic`, which `03_named_logic.js` exports beside `Page`. The minimal FileHost serves that module as the page logic for the JavaScript page and for the Python page `03_named_logic.py` alike.
 
 - `func='finalPrice'` names a method of `Logic`. A formula method receives one object with the resolved parameters and returns the result: 10% off from the `threshold`.
 - A controller method receives its Source node and the parameters. `node.SET('.changes', …)` writes relative to the node's context.

package/src/gramlot_examples/pages/controllers/04_inline_expressions.js

@@ -36,3 +36,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.started', value: false});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/controllers/05_node_methods.js

@@ -37,3 +37,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.pings', value: 0});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/controllers/06_button_controller.js

@@ -34,3 +34,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.clicks', value: 0});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/controllers/07_events.js

@@ -36,3 +36,6 @@ export class Page extends BasePage {
         pane.dataSetter({destination_path: '.length', value: 0});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/controllers/07_events.md

@@ -4,7 +4,7 @@
 
 - The value is inline code with `this` = the declaring node and the parameter `event`. `this.SET('.path', …)` writes relative to the node's context.
 - 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.
-- A value of dotted names, such as `gui.focused`, is named logic of a `js_requires` group instead. The minimal FileHost serves only the companion root group, so this page uses inline code.
+- A value of dotted names, such as `gui.focused`, is named logic of a `js_requires` group instead. The minimal FileHost serves only the root logic group, so this page uses inline code.
 - Removing the node removes its listeners.
 
 **Try it:** Click the green chip, type a word, then add `connect_onfocus` to the field.

package/src/gramlot_examples/pages/controllers/08_remote_source.js

@@ -32,3 +32,12 @@ export class Page extends BasePage {
     }
 }
 source(Page.prototype.details);
+
+/** Logic of 08_remote_source.py and 08_remote_source.js. */
+export class Logic {
+    /** The button's controller: ask the server for the Source method `details` of this Page. */
+    load(node, kwargs) {
+        const target = this.page.source.getNodeByAttr('node_id', 'details');
+        return this.page.remoteSource(target, 'details', {topic: kwargs.topic});
+    }
+}

package/src/gramlot_examples/pages/controllers/08_remote_source.md

@@ -3,7 +3,7 @@
 `gramlot.remoteSource(target, method, params)` asks the host to run a Source method of the Page and replaces the children of `target` with the returned branch.
 
 - The Page declares the method with `@source` in Python and `source(Page.prototype.details)` in JavaScript. It builds into its own `root` and runs on the server.
-- The button's nested controller names `load` in the companion `08_remote_source_aux.js`. It finds the target by its `node_id` and passes the chosen topic.
+- The button's nested controller names `load` in the `Logic` class of `08_remote_source.js`. It finds the target by its `node_id` and passes the chosen topic.
 - The new branch carries its own `dataSetter` nodes. They run before the branch is built, so its heading and summary show their values at the first render.
 - The request lives as long as the target: if the target is removed first, the late answer is ignored. When two requests overlap, the latest wins.
 

package/src/gramlot_examples/pages/controllers/09_end_to_end.js

@@ -65,3 +65,39 @@ export class Page extends BasePage {
     }
 }
 source(Page.prototype.extras);
+
+/** Logic of 09_end_to_end.py and 09_end_to_end.js: the named logic of the story. */
+export class Logic {
+    sourceNode(nodeId) {
+        return this.page.source.getNodeByAttr('node_id', nodeId);
+    }
+
+    /** Controller of the total: the circle turns red above 10. */
+    paint(node, kwargs) {
+        node.SET('.color', kwargs.total > 10 ? '#b13d48' : '#23745b');
+    }
+
+    /** The button's nested controller: one call per click, with its counter and modifiers. */
+    press(node, kwargs) {
+        node.SET('.presses', `Pressed ${kwargs.button_counter} times`);
+        node.SET('.modifiers', kwargs.button_shift ? 'with Shift' : 'without modifiers');
+    }
+
+    loadExtras() {
+        return this.page.remoteSource(this.sourceNode('extras'), 'extras');
+    }
+
+    freeze() {
+        this.page.renderer.freeze(this.sourceNode('later'));
+    }
+
+    removeNote() {
+        const notes = this.sourceNode('notes').value;
+        const last = notes.getNodes().at(-1);
+        if (last) notes.popNode(last.label);
+    }
+
+    thaw() {
+        this.page.renderer.unfreeze(this.sourceNode('later'));
+    }
+}

package/src/gramlot_examples/pages/controllers/09_end_to_end.md

@@ -1,6 +1,6 @@
 # 09 · End-to-end story
 
-The acceptance page of Gramlot 0.2.0 (unified plan §8.1), in Python and JavaScript with one companion.
+The acceptance page of Gramlot 0.2.0 (unified plan §8.1), in Python and JavaScript with one `Logic` class in `09_end_to_end.js`.
 
 1. **First render.** The `dataSetter` nodes sit after some controls and in the later branch; `.settings.caption` is written twice and the later setter wins. The quantity has no setter and starts from its `default`. The first DOM already shows every final value.
 2. **Editing.** The caption field writes at `change`; after checking `live` it writes at every keystroke.

package/src/gramlot_examples/pages/controllers/README.md

@@ -2,10 +2,10 @@
 
 The pages of this family run code when the Data changes.
 
-`dataFormula` computes a value and writes it to its result path. `dataController` runs code for its effects. A button runs a nested controller at every click; `connect_on<event>` attributes connect other DOM events. The code is inline in the page, or a method of the `Logic` class in the page companion `NN_name_aux.js`.
+`dataFormula` computes a value and writes it to its result path. `dataController` runs code for its effects. A button runs a nested controller at every click; `connect_on<event>` attributes connect other DOM events. The code is inline in the page, or a method of the `Logic` class that the page module `NN_name.js` exports; the Python page takes it from there.
 
-Inline code needs a Content Security Policy that allows it. Named logic in the companion also runs under a strict policy.
+Inline code needs a Content Security Policy that allows it. Named logic in the `Logic` class also runs under a strict policy.
 
-Start with **Formula** and **Controller**, then move the code to the companion with **Named logic**. The last page is the end-to-end story of Gramlot 0.2.0: every piece of the two families on one page.
+Start with **Formula** and **Controller**, then move the code to the `Logic` class with **Named logic**. The last page is the end-to-end story of Gramlot 0.2.0: every piece of the two families on one page.
 
-Each example has a Python page and its JavaScript equivalent. Both share the same companion.
+Each example has a Python page and its JavaScript equivalent. Both use the `Logic` class of the JavaScript module.

package/src/gramlot_examples/pages/html_svg/01_hello_world.js

@@ -10,3 +10,6 @@ export class Page extends BasePage {
         page.p('This heading and paragraph come from a Source tree.');
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/02_text_and_links.js

@@ -26,3 +26,6 @@ export class Page extends BasePage {
         page.a('Jump back to the heading', {href: '#destination'});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/03_lists.js

@@ -27,3 +27,6 @@ export class Page extends BasePage {
         groups.li('SVG');
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/04_semantic_page.js

@@ -23,3 +23,6 @@ export class Page extends BasePage {
         page.footer().small('Built with Gramlot Source.');
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/05_tables.js

@@ -25,3 +25,6 @@ export class Page extends BasePage {
         for (const value of [ROWS.reduce((n, row) => n + row[1], 0), ROWS.reduce((n, row) => n + row[2], 0), ROWS.reduce((n, row) => n + row[1] + row[2], 0)]) total.td(String(value));
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/06_forms.js

@@ -61,3 +61,6 @@ export class Page extends BasePage {
         parent.input({type: kind, id: key, name: key, ...attrs});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/07_native_disclosure.js

@@ -25,3 +25,6 @@ export class Page extends BasePage {
         measures.p('These numbers are fixed page content; no live progress is implied.', {class: 'muted'});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/08_svg_shapes.js

@@ -21,3 +21,6 @@ export class Page extends BasePage {
         figure.figcaption('The shape attributes are part of the Source tree.');
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/09_svg_composition.js

@@ -40,3 +40,6 @@ export class Page extends BasePage {
         group.circle({cx: 0, cy: 184, r: 4, fill: 'var(--gramlot-brand-yellow)'});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/10_cards_with_icons.js

@@ -18,7 +18,7 @@ export class Page extends BasePage {
         for (const [title, description, kind] of CARDS) {
             const card = cards.article({node_label: kind, class: 'card stack'});
             card.button('×', {type: 'button', class: 'card-remove', aria_label: `Remove ${title}`,
-                onclick: `window.gramlot.builder.source.getItem('main.page.cards').popNode('${kind}')`});
+                connect_onclick: `window.gramlot.builder.source.getItem('main.page.cards').popNode('${kind}')`});
             const icon = card.svg({viewBox: '0 0 64 64', width: 64, height: 64, aria_hidden: 'true'});
             this.icon(icon, kind);
             card.h2(title);
@@ -38,3 +38,6 @@ export class Page extends BasePage {
         }
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/11_static_report.js

@@ -66,3 +66,6 @@ export class Page extends BasePage {
         card.p(value, {class: 'report-number'});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/12_complete_page.js

@@ -118,3 +118,6 @@ export class Page extends BasePage {
         }
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/html_svg/13_live_source.js

@@ -34,7 +34,7 @@ export class Page extends BasePage {
     }
 
     button(root, title, action) {
-        root.button(title, {type: 'button', onclick: ACTIONS[action]});
+        root.button(title, {type: 'button', connect_onclick: ACTIONS[action]});
     }
 
     workspace(page) {
@@ -62,3 +62,6 @@ export class Page extends BasePage {
         motion.p('Removing this section also clears its interval through renderer.onDispose.', {class: 'muted'});
     }
 }
+
+/** The page logic: this page names no methods. */
+export class Logic {}

package/src/gramlot_examples/pages/binding/08_freeze_aux.js

@@ -1,26 +0,0 @@
-/** Logic of 08_freeze.py and 08_freeze.js: each button's nested controller calls one method. */
-export class Logic {
-    sourceNode(nodeId) {
-        return this.page.source.getNodeByAttr('node_id', nodeId);
-    }
-
-    freeze(node) {
-        this.page.renderer.freeze(this.sourceNode('board'));
-        node.SET('.frozen', true);
-    }
-
-    add(node) {
-        node.SET('.count', node.GET('.count') + 1);
-    }
-
-    removeLast() {
-        const items = this.sourceNode('items').value;
-        const last = items.getNodes().at(-1);
-        if (last) items.popNode(last.label);
-    }
-
-    thaw(node) {
-        this.page.renderer.unfreeze(this.sourceNode('board'));
-        node.SET('.frozen', false);
-    }
-}

package/src/gramlot_examples/pages/controllers/03_named_logic_aux.js

@@ -1,19 +0,0 @@
-/**
- * Companion of 03_named_logic.py and 03_named_logic.js. The minimal FileHost serves it as the
- * root group of the page logic: `func='finalPrice'` names the method below.
- */
-export class Logic {
-    /** A formula method receives the resolved parameters and returns the result. */
-    finalPrice(kwargs) {
-        const {price, threshold} = kwargs;
-        if (price == null) return null;
-        return price >= threshold ? Math.round(price * 90) / 100 : price;
-    }
-
-    /** A controller method receives its node and the parameters; `this` is the group. */
-    countChange(node, kwargs) {
-        this.changes = (this.changes ?? 0) + 1;
-        node.SET('.changes', this.changes);
-        node.SET('.reason', `${kwargs._reason}: price ${kwargs.price}`);
-    }
-}

package/src/gramlot_examples/pages/controllers/08_remote_source_aux.js

@@ -1,8 +0,0 @@
-/** Companion of 08_remote_source.py and 08_remote_source.js. */
-export class Logic {
-    /** The button's controller: ask the server for the Source method `details` of this Page. */
-    load(node, kwargs) {
-        const target = this.page.source.getNodeByAttr('node_id', 'details');
-        return this.page.remoteSource(target, 'details', {topic: kwargs.topic});
-    }
-}

package/src/gramlot_examples/pages/controllers/09_end_to_end_aux.js

@@ -1,35 +0,0 @@
-/** Companion of 09_end_to_end.py and 09_end_to_end.js: the named logic of the story. */
-export class Logic {
-    sourceNode(nodeId) {
-        return this.page.source.getNodeByAttr('node_id', nodeId);
-    }
-
-    /** Controller of the total: the circle turns red above 10. */
-    paint(node, kwargs) {
-        node.SET('.color', kwargs.total > 10 ? '#b13d48' : '#23745b');
-    }
-
-    /** The button's nested controller: one call per click, with its counter and modifiers. */
-    press(node, kwargs) {
-        node.SET('.presses', `Pressed ${kwargs.button_counter} times`);
-        node.SET('.modifiers', kwargs.button_shift ? 'with Shift' : 'without modifiers');
-    }
-
-    loadExtras() {
-        return this.page.remoteSource(this.sourceNode('extras'), 'extras');
-    }
-
-    freeze() {
-        this.page.renderer.freeze(this.sourceNode('later'));
-    }
-
-    removeNote() {
-        const notes = this.sourceNode('notes').value;
-        const last = notes.getNodes().at(-1);
-        if (last) notes.popNode(last.label);
-    }
-
-    thaw() {
-        this.page.renderer.unfreeze(this.sourceNode('later'));
-    }
-}