jsgui3-server 0.0.151 → 0.0.152

package/examples/controls/21) mvvm and declarative api/client.js

@@ -0,0 +1,241 @@
+const jsgui = require('jsgui3-html');
+const { Control, controls } = jsgui;
+const { tpl } = require('../../../../jsgui3-html/html-core/html-core');
+const Data_Model_View_Model_Control = require('../../../../jsgui3-html/html-core/Data_Model_View_Model_Control');
+const { ensure_control_models } = require('../../../../jsgui3-html/html-core/control_model_factory');
+const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
+
+// Alias for tpl HTML parser which lowercases tags
+controls.text_input = controls.Text_Input;
+
+class UserProfileEditor extends Data_Model_View_Model_Control {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'user_profile_editor';
+        super(spec);
+
+        // Ensure data.model and view.data.model exist
+        ensure_control_models(this, spec);
+
+        // Raw models
+        this.data.model.set('first_name', spec.first_name || 'Jane');
+        this.data.model.set('last_name', spec.last_name || 'Doe');
+        this.data.model.set('is_active', spec.is_active !== undefined ? spec.is_active : true);
+
+        // Generate full_name transparently via Computed Property
+        this.computed(this.data.model, ['first_name', 'last_name'],
+            (first, last) => `${first || ''} ${last || ''}`.trim(),
+            { propertyName: 'full_name' }
+        );
+
+        // Generate a display status
+        this.computed(this.data.model, ['is_active'],
+            (is_active) => is_active ? 'Active Account' : 'Suspended Account',
+            { propertyName: 'status_text' }
+        );
+
+        this.compose_ui();
+    }
+
+    compose_ui() {
+        // Build the layout entirely declaratively, intercepting view model bindings automatically.
+        // - bind-text reacts to model changes and displays text content
+        // - bind-value builds a two-way binding on input fields
+        // - bind-class reacts to model state to toggle active/inactive CSS hooks
+        // - on-click establishes native event listener routing
+
+        tpl`
+            <div class="profile-card" bind-class=${{ 'active-state': this.mbind('is_active'), 'inactive-state': [this.data.model, 'is_active', v => !v] }}>
+                <div class="profile-header">
+                    <h2 bind-text=${[this.data.model, 'full_name']}></h2>
+                    <span class="badge" bind-text=${[this.data.model, 'status_text']}></span>
+                </div>
+                
+                <div class="profile-body">
+                    <div class="field-row">
+                        <label>First Name:</label>
+                        <Text_Input class="text-input" bind-value=${this.mbind('first_name')} />
+                    </div>
+                    
+                    <div class="field-row">
+                        <label>Last Name:</label>
+                        <Text_Input class="text-input" bind-value=${this.mbind('last_name')} />
+                    </div>
+                </div>
+
+                <div class="profile-footer">
+                    <button class="btn" on-click=${() => this.toggleStatus()}>Toggle Status</button>
+                    <button class="btn primary" on-click=${() => this.saveProfile()}>Save Profile</button>
+                </div>
+            </div>
+        `.mount(this, controls);
+    }
+
+    toggleStatus() {
+        const current = this.data.model.get('is_active').value;
+        this.data.model.set('is_active', !current);
+    }
+
+    saveProfile() {
+        alert("Saved Profile for: " + this.data.model.get('full_name').value);
+        console.log("Saved: ", this.data.model.get('full_name').value);
+    }
+}
+
+UserProfileEditor.css = `
+.profile-card {
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 20px;
+    max-width: 400px;
+    font-family: sans-serif;
+    transition: background-color 0.3s ease;
+}
+
+.profile-card.active-state {
+    background-color: #f9fff9;
+    border-color: #4caf50;
+}
+
+.profile-card.inactive-state {
+    background-color: #fff9f9;
+    border-color: #f44336;
+}
+
+.profile-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+    margin-bottom: 15px;
+}
+
+.profile-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+}
+
+.badge {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+
+.active-state .badge {
+    background-color: #e8f5e9;
+    color: #2e7d32;
+}
+
+.inactive-state .badge {
+    background-color: #ffebee;
+    color: #c62828;
+}
+
+.field-row {
+    margin-bottom: 12px;
+    display: flex;
+    flex-direction: column;
+}
+
+.field-row label {
+    font-size: 0.9rem;
+    color: #555;
+    margin-bottom: 4px;
+}
+
+.text-input {
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+.profile-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+    padding-top: 15px;
+    border-top: 1px solid #eee;
+}
+
+.btn {
+    padding: 8px 16px;
+    border: 1px solid #ccc;
+    background: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.btn:hover {
+    background: #f0f0f0;
+}
+
+.btn.primary {
+    background: #2196f3;
+    color: white;
+    border-color: #1976d2;
+}
+
+.btn.primary:hover {
+    background: #1976d2;
+}
+`;
+
+
+class Demo_Page extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_page_mvvm_declarative';
+        super(spec);
+        const { context } = this;
+
+        if (typeof this.body.add_class === 'function') {
+            this.body.add_class('demo-page');
+        }
+
+        const compose = () => {
+            const h1 = new controls.h1({ context });
+            h1.add('MVVM & Declarative API Demo');
+            this.body.add(h1);
+
+            const container = new controls.div({ context, class: 'params-container' });
+            this.body.add(container);
+
+            const editor = new UserProfileEditor({
+                context,
+                first_name: 'John',
+                last_name: 'Smith',
+                is_active: true
+            });
+            container.add(editor);
+        };
+
+        if (!spec.el) {
+            compose();
+        }
+    }
+}
+
+Demo_Page.css = `
+body {
+    background: #f0f2f5;
+    color: #333;
+    font-family: sans-serif;
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.params-container {
+    margin-top: 30px;
+    width: 100%;
+    max-width: 600px;
+}
+`;
+
+controls.Demo_Page = Demo_Page;
+controls.UserProfileEditor = UserProfileEditor;
+
+module.exports = jsgui;

package/examples/controls/21) mvvm and declarative api/e2e-test.js

@@ -0,0 +1,175 @@
+'use strict';
+
+/**
+ * E2E test for the MVVM & Declarative API Demo using Puppeteer.
+ *
+ * Starts the server as a child process, launches headless Chromium,
+ * and verifies page rendering, structure, and CSS styling.
+ *
+ * NOTE: Client-side `tpl` bindings (bind-text, bind-value, on-click, bind-class)
+ * require full hydration which the current framework activation path does not yet
+ * support for `tpl`-generated controls. The E2E tests below verify what is
+ * currently functional and document known limitations.
+ *
+ * Usage:  node e2e-test.js
+ */
+
+const puppeteer = require('puppeteer');
+const { spawn } = require('child_process');
+const http = require('http');
+const path = require('path');
+
+const PORT = 52199;
+const URL = `http://127.0.0.1:${PORT}`;
+
+let pass = 0, fail = 0;
+function check(label, ok) {
+    if (ok) { console.log(`  ✅ ${label}`); pass++; }
+    else { console.log(`  ❌ ${label}`); fail++; }
+}
+
+function waitForServer(url, timeoutMs = 30000) {
+    const start = Date.now();
+    return new Promise((resolve, reject) => {
+        const attempt = () => {
+            if (Date.now() - start > timeoutMs) return reject(new Error('Server start timeout'));
+            http.get(url, (res) => {
+                res.resume();
+                resolve();
+            }).on('error', () => setTimeout(attempt, 300));
+        };
+        attempt();
+    });
+}
+
+async function run() {
+    console.log('\n═══ MVVM & Declarative API — E2E Puppeteer Test ═══\n');
+
+    // ── Start Server ────────────────────────────────────────────
+    console.log('  Starting server...');
+    const serverProc = spawn('node', ['server.js'], {
+        cwd: __dirname,
+        env: { ...process.env, PORT: String(PORT) },
+        stdio: 'pipe'
+    });
+    serverProc.stdout.resume();
+    serverProc.stderr.resume();
+
+    try {
+        await waitForServer(URL);
+        console.log(`  Server ready on port ${PORT}\n`);
+    } catch (err) {
+        console.error('  Failed to start server:', err.message);
+        serverProc.kill();
+        process.exit(1);
+    }
+
+    let browser;
+    try {
+        // ── Launch Browser ──────────────────────────────────────
+        browser = await puppeteer.launch({
+            headless: 'new',
+            args: ['--no-sandbox', '--disable-setuid-sandbox']
+        });
+        const page = await browser.newPage();
+        await page.setViewport({ width: 800, height: 700 });
+
+        // ── 1. Page Load ────────────────────────────────────────
+        const response = await page.goto(URL, { waitUntil: 'networkidle0', timeout: 15000 });
+        check('Page loads with HTTP 200', response.status() === 200);
+
+        // ── 2. HTML Structure ───────────────────────────────────
+        await page.waitForSelector('.profile-card', { timeout: 10000 });
+        check('Profile card rendered', true);
+
+        const h1Text = await page.$eval('h1', el => el.textContent);
+        check('H1 heading present', h1Text.includes('MVVM'));
+
+        check('Profile header section exists', !!(await page.$('.profile-header')));
+        check('Profile body section exists', !!(await page.$('.profile-body')));
+        check('Profile footer section exists', !!(await page.$('.profile-footer')));
+
+        // ── 3. CSS Styling ──────────────────────────────────────
+        const hasActiveClass = await page.$eval('.profile-card', el => el.classList.contains('active-state'));
+        check('Card has active-state CSS class', hasActiveClass);
+
+        const cardBorderColor = await page.$eval('.profile-card', el =>
+            getComputedStyle(el).borderColor
+        );
+        check('Active card has green border', cardBorderColor.includes('76') || cardBorderColor.includes('175') || cardBorderColor.includes('4caf50'));
+
+        const cardBg = await page.$eval('.profile-card', el =>
+            getComputedStyle(el).backgroundColor
+        );
+        check('Active card has green-tinted background', cardBg !== 'rgb(255, 255, 255)');
+
+        // ── 4. Labels ───────────────────────────────────────────
+        const labels = await page.$$eval('label', els => els.map(l => l.textContent));
+        check('First Name label present', labels.some(l => l.includes('First Name')));
+        check('Last Name label present', labels.some(l => l.includes('Last Name')));
+
+        // ── 5. Input Fields ─────────────────────────────────────
+        const inputs = await page.$$('input[type="text"]');
+        check('Two text inputs rendered', inputs.length === 2);
+
+        // ── 6. Buttons ──────────────────────────────────────────
+        const buttons = await page.$$eval('button', els => els.map(b => b.textContent));
+        check('Toggle Status button present', buttons.includes('Toggle Status'));
+        check('Save Profile button present', buttons.includes('Save Profile'));
+
+        // ── 7. Button Styling ───────────────────────────────────
+        const saveBtnBg = await page.$eval('button.primary', el =>
+            getComputedStyle(el).backgroundColor
+        );
+        check('Save button has blue background', saveBtnBg.includes('33') || saveBtnBg.includes('150') || saveBtnBg.includes('243'));
+
+        // ── 8. Text Input Interaction ───────────────────────────
+        // Even if bind-value doesn't pre-fill, we can type and verify the DOM updates
+        const firstInput = inputs[0];
+        await firstInput.click({ clickCount: 3 });
+        await firstInput.type('TestUser');
+        const typedVal = await page.evaluate(el => el.value, firstInput);
+        check('Typing into First Name works', typedVal.includes('TestUser'));
+
+        // ── 9. CSS Resources ────────────────────────────────────
+        const styles = await page.evaluate(() => {
+            const sheets = Array.from(document.styleSheets);
+            return sheets.length;
+        });
+        check('CSS stylesheet loaded', styles > 0);
+
+        // ── 10. JS Resources ────────────────────────────────────
+        const scripts = await page.$$eval('script[src]', els => els.length);
+        check('JS script tag present', scripts > 0);
+
+        // ── 11. jsgui Data Attributes ───────────────────────────
+        const hasJsguiType = await page.$eval('[data-jsgui-type="user_profile_editor"]', el => !!el).catch(() => false);
+        check('jsgui type attribute on editor', hasJsguiType);
+
+        // ── Screenshot ──────────────────────────────────────────
+        const ssPath = path.join(__dirname, 'e2e-screenshot-final.png');
+        await page.screenshot({ path: ssPath, fullPage: true });
+        console.log(`\n  📸 Screenshot: ${ssPath}\n`);
+
+    } catch (err) {
+        console.error('\n  ⚠️ E2E Error:', err.message, err.stack);
+        fail++;
+    } finally {
+        if (browser) await browser.close();
+        serverProc.kill();
+    }
+
+    // ── Verdict ─────────────────────────────────────────────────
+    console.log('═══════════════════════════════════════════');
+    console.log(`RESULTS: ${pass} passed, ${fail} failed`);
+    if (fail === 0) {
+        console.log('\n✅ VERDICT: All E2E checks passed!');
+    } else {
+        console.log('\n⚠️  VERDICT: Some E2E checks failed — review above');
+    }
+    console.log('═══════════════════════════════════════════\n');
+
+    process.exit(fail > 0 ? 1 : 0);
+}
+
+run();

package/examples/controls/21) mvvm and declarative api/out.html

@@ -0,0 +1 @@
+<div><div class="profile-card active-state"><div class="profile-header"><h2></h2><span class="badge"></span></div><div class="profile-body"><div class="field-row"><label>First Name:</label><input style="--input-height:40px;--input-padding-x:12px;--input-font-size:14px;--input-border-radius:6px;--radius:8px" class="text-input" data-fill-style="outline" data-label-position="top" type="text"></input></div><div class="field-row"><label>Last Name:</label><input style="--input-height:40px;--input-padding-x:12px;--input-font-size:14px;--input-border-radius:6px;--radius:8px" class="text-input" data-fill-style="outline" data-label-position="top" type="text"></input></div></div><div class="profile-footer"><button class="btn">Toggle Status</button><button class="btn primary">Save Profile</button></div></div></div>

package/examples/controls/21) mvvm and declarative api/page_out.html

@@ -0,0 +1 @@
+<html data-jsgui-id="demo_page_mvvm_declarative_0" data-jsgui-data-model-id="data_object_0" data-jsgui-type="demo_page_mvvm_declarative" data-jsgui-data-model="data_object_0"><head data-jsgui-id="head_0" data-jsgui-data-model-id="data_object_1" data-jsgui-data-model="data_object_1"><title data-jsgui-id="title_0" data-jsgui-data-model-id="data_object_2" data-jsgui-type="title" data-jsgui-data-model="data_object_2"></title><link data-jsgui-id="link_0" data-jsgui-data-model-id="data_object_21" data-jsgui-type="link" data-jsgui-data-model="data_object_21" rel="stylesheet" href="/css/css.css"></link></head><body data-jsgui-id="body_0" data-jsgui-data-model-id="data_object_3" data-jsgui-data-model="data_object_3" class="demo-page"><h1 data-jsgui-id="h1_0" data-jsgui-data-model-id="data_object_4" data-jsgui-type="h1" data-jsgui-data-model="data_object_4">MVVM &amp; Declarative API Demo</h1><div data-jsgui-id="div_0" data-jsgui-data-model-id="data_object_5" data-jsgui-type="div" class="params-container" data-jsgui-data-model="data_object_5"><div data-jsgui-id="user_profile_editor_0" data-jsgui-data-model-id="data_object_6" data-jsgui-type="user_profile_editor" data-jsgui-data-model="data_object_6"><div data-jsgui-id="div_6" data-jsgui-data-model-id="data_object_20" data-jsgui-type="div" class="profile-card active-state" data-jsgui-data-model="data_object_20"><div data-jsgui-id="div_1" data-jsgui-data-model-id="data_object_9" data-jsgui-type="div" class="profile-header" data-jsgui-data-model="data_object_9"><h2 data-jsgui-id="h2_0" data-jsgui-data-model-id="data_object_7" data-jsgui-type="h2" data-jsgui-data-model="data_object_7"></h2><span data-jsgui-id="span_0" data-jsgui-data-model-id="data_object_8" data-jsgui-type="span" class="badge" data-jsgui-data-model="data_object_8"></span></div><div data-jsgui-id="div_4" data-jsgui-data-model-id="data_object_16" data-jsgui-type="div" class="profile-body" data-jsgui-data-model="data_object_16"><div data-jsgui-id="div_2" data-jsgui-data-model-id="data_object_12" data-jsgui-type="div" class="field-row" data-jsgui-data-model="data_object_12"><label data-jsgui-id="label_0" data-jsgui-data-model-id="data_object_10" data-jsgui-type="label" data-jsgui-data-model="data_object_10">First Name:</label><input data-jsgui-id="text_input_0" data-jsgui-data-model-id="data_object_11" data-jsgui-type="text_input" style="--input-height:40px;--input-padding-x:12px;--input-font-size:14px;--input-border-radius:6px;--radius:8px" class="text-input" data-jsgui-data-model="data_object_11" data-fill-style="outline" data-label-position="top" type="text"></input></div><div data-jsgui-id="div_3" data-jsgui-data-model-id="data_object_15" data-jsgui-type="div" class="field-row" data-jsgui-data-model="data_object_15"><label data-jsgui-id="label_1" data-jsgui-data-model-id="data_object_13" data-jsgui-type="label" data-jsgui-data-model="data_object_13">Last Name:</label><input data-jsgui-id="text_input_1" data-jsgui-data-model-id="data_object_14" data-jsgui-type="text_input" style="--input-height:40px;--input-padding-x:12px;--input-font-size:14px;--input-border-radius:6px;--radius:8px" class="text-input" data-jsgui-data-model="data_object_14" data-fill-style="outline" data-label-position="top" type="text"></input></div></div><div data-jsgui-id="div_5" data-jsgui-data-model-id="data_object_19" data-jsgui-type="div" class="profile-footer" data-jsgui-data-model="data_object_19"><button data-jsgui-id="button_0" data-jsgui-data-model-id="data_object_17" data-jsgui-type="button" class="btn" data-jsgui-data-model="data_object_17">Toggle Status</button><button data-jsgui-id="button_1" data-jsgui-data-model-id="data_object_18" data-jsgui-type="button" class="btn primary" data-jsgui-data-model="data_object_18">Save Profile</button></div></div></div></div><script data-jsgui-id="script_0" data-jsgui-data-model-id="data_object_22" data-jsgui-type="script" data-jsgui-data-model="data_object_22" src="/js/js.js"></script></body></html>

package/examples/controls/21) mvvm and declarative api/server.js

@@ -0,0 +1,18 @@
+const jsgui = require('./client');
+const Server = require('../../../server');
+const { Demo_Page } = jsgui.controls;
+
+if (require.main === module) {
+    const server = new Server({
+        Ctrl: Demo_Page,
+        src_path_client_js: require.resolve('./client.js')
+    });
+
+    server.on('ready', () => {
+        const port = parseInt(process.env.PORT, 10) || 52101;
+        server.start(port, (err) => {
+            if (err) throw err;
+            console.log(`MVVM & Declarative API Demo running at http://localhost:${port}`);
+        });
+    });
+}

package/examples/data-views/01) query-endpoint/server.js

@@ -0,0 +1,61 @@
+/**
+ * Data Views Example — Query Endpoint
+ *
+ * Demonstrates using the data view infrastructure to serve paginated,
+ * sorted, filtered data from an in-memory array via the standard
+ * query protocol.
+ *
+ * Run:   node examples/data-views/01) query-endpoint/server.js
+ * Test:  curl -X POST http://localhost:8090/api/data/products \
+ *             -H "Content-Type: application/json" \
+ *             -d '{"page":1,"page_size":5,"sort":{"key":"price","dir":"desc"}}'
+ */
+
+const Server = require('../../../server');
+
+// ── Sample data ────────────────────────────────────────────────
+const products = [];
+const categories = ['Electronics', 'Books', 'Clothing', 'Home', 'Sports'];
+const adjectives = ['Premium', 'Classic', 'Modern', 'Vintage', 'Ultra'];
+const nouns = ['Widget', 'Gadget', 'Tool', 'Device', 'Accessory'];
+
+for (let i = 1; i <= 100; i++) {
+    products.push({
+        id: i,
+        name: `${adjectives[i % adjectives.length]} ${nouns[i % nouns.length]} ${i}`,
+        category: categories[i % categories.length],
+        price: Math.round((Math.random() * 200 + 10) * 100) / 100,
+        stock: Math.floor(Math.random() * 500),
+        rating: Math.round((Math.random() * 4 + 1) * 10) / 10
+    });
+}
+
+// ── Serve ──────────────────────────────────────────────────────
+Server.serve({
+    port: 8090,
+    data: {
+        products: {
+            data: products,
+            schema: {
+                columns: [
+                    { key: 'id', label: 'ID', sortable: true },
+                    { key: 'name', label: 'Name', sortable: true, filterable: true },
+                    { key: 'category', label: 'Category', sortable: true, filterable: true },
+                    { key: 'price', label: 'Price', sortable: true },
+                    { key: 'stock', label: 'Stock', sortable: true },
+                    { key: 'rating', label: 'Rating', sortable: true }
+                ],
+                default_page_size: 10
+            }
+        }
+    }
+}).then(() => {
+    console.log('Data views example running at http://localhost:8090');
+    console.log('Query endpoint: POST http://localhost:8090/api/data/products');
+    console.log('');
+    console.log('Example requests:');
+    console.log('  All items:      curl -X POST http://localhost:8090/api/data/products -H "Content-Type: application/json" -d "{}"');
+    console.log('  Page 2:         curl -X POST http://localhost:8090/api/data/products -H "Content-Type: application/json" -d \'{"page":2,"page_size":5}\'');
+    console.log('  Sort by price:  curl -X POST http://localhost:8090/api/data/products -H "Content-Type: application/json" -d \'{"sort":{"key":"price","dir":"desc"}}\'');
+    console.log('  Filter books:   curl -X POST http://localhost:8090/api/data/products -H "Content-Type: application/json" -d \'{"filters":{"category":{"op":"equals","value":"Books"}}}\'');
+});