redweb 0.9.0 → 0.10.0

package/examples/live-html/chatroom.ts

@@ -0,0 +1,217 @@
+import { action, component, each, html, page, start, state, type HtmlFragment } from 'redweb';
+
+const MAX_VISIBLE_MEMBERS = 100;
+const UNSAFE_TEXT = /[\p{Cc}\p{Cf}]/u;
+
+interface JoinForm {
+    name?: string;
+}
+
+interface MessageForm {
+    message?: string;
+}
+
+interface StoredMessage {
+    sender: string;
+    text: string;
+}
+
+interface RoomParticipant {
+    readonly displayName: string;
+    updateMessages(messages: HtmlFragment): void;
+    updatePresence(presence: HtmlFragment): void;
+}
+
+function messageView(messages: readonly StoredMessage[]) {
+    return messages.length
+        ? each([...messages], entry => html`<li><strong>${entry.sender}</strong><p>${entry.text}</p></li>`)
+        : html`<li class="empty-message">No messages yet. Say hello.</li>`;
+}
+
+function presenceView(members: readonly string[]) {
+    const visible = members.slice(0, MAX_VISIBLE_MEMBERS);
+    const remaining = members.length - visible.length;
+    return html`
+        <p class="eyebrow">Online · ${members.length}</p>
+        <ul>
+            ${each([...visible], member => html`<li>${member}</li>`)}
+            ${remaining ? html`<li class="more-members">+${remaining} more</li>` : html``}
+        </ul>
+    `;
+}
+
+class ChatRoom {
+    private history: StoredMessage[] = [];
+    private readonly participants = new Set<RoomParticipant>();
+    private readonly online = new Set<RoomParticipant>();
+
+    join(participant: RoomParticipant) {
+        const name = participant.displayName.toLocaleLowerCase();
+        if ([...this.participants].some(member => member !== participant && member.displayName.toLocaleLowerCase() === name)) {
+            return false;
+        }
+        this.participants.add(participant);
+        this.online.add(participant);
+        participant.updateMessages(messageView(this.history));
+        this.publishPresence();
+        return true;
+    }
+
+    disconnect(participant: RoomParticipant) {
+        if (!this.online.delete(participant)) return;
+        this.publishPresence();
+    }
+
+    leave(participant: RoomParticipant) {
+        this.online.delete(participant);
+        if (!this.participants.delete(participant)) return;
+        this.publishPresence();
+    }
+
+    send(participant: RoomParticipant, text: string) {
+        if (!this.online.has(participant)) return false;
+        this.history = [...this.history, { sender: participant.displayName, text }].slice(-100);
+        const messages = messageView(this.history);
+        for (const member of this.participants) member.updateMessages(messages);
+        return true;
+    }
+
+    private publishPresence() {
+        const members = [...this.online].map(participant => participant.displayName);
+        const presence = presenceView(members);
+        for (const participant of this.participants) participant.updatePresence(presence);
+    }
+}
+
+@component()
+export class ChatroomComponent implements RoomParticipant {
+    displayName = '';
+
+    @state()
+    screen = this.joinScreen();
+
+    @state()
+    messages = messageView([]);
+
+    @state()
+    presence = presenceView([]);
+
+    constructor(private readonly room: ChatRoom) {}
+
+    connected() {
+        if (this.displayName) this.room.join(this);
+    }
+
+    disconnected() {
+        this.room.disconnect(this);
+    }
+
+    disposed() {
+        this.room.leave(this);
+    }
+
+    @action()
+    join({ name }: JoinForm) {
+        if (this.displayName) return false;
+        if (typeof name !== 'string') {
+            this.screen = this.joinScreen('Display name must be text.');
+            return false;
+        }
+        const displayName = name.normalize('NFKC').trim();
+        if (!displayName || displayName.length > 40 || UNSAFE_TEXT.test(displayName)) {
+            this.screen = this.joinScreen('Choose a visible display name of at most 40 characters.');
+            return false;
+        }
+        this.displayName = displayName;
+        if (this.room.join(this)) {
+            this.screen = this.roomScreen();
+            return true;
+        }
+        this.displayName = '';
+        this.screen = this.joinScreen('That display name is already in use.');
+        return false;
+    }
+
+    @action()
+    send({ message }: MessageForm) {
+        if (typeof message !== 'string') return false;
+        const text = message.normalize('NFKC').trim();
+        if (!text || text.length > 500 || UNSAFE_TEXT.test(text)) return false;
+        return this.room.send(this, text);
+    }
+
+    @action()
+    leave() {
+        this.room.leave(this);
+        this.displayName = '';
+        this.screen = this.joinScreen();
+    }
+
+    updateMessages(messages: HtmlFragment) {
+        this.messages = messages;
+    }
+
+    updatePresence(presence: HtmlFragment) {
+        this.presence = presence;
+    }
+
+    render() {
+        return html`<section class="chatroom" data-rw-state="screen">${this.screen}</section>`;
+    }
+
+    private joinScreen(error = '') {
+        const feedback = error ? html`<p class="form-error" role="alert">${error}</p>` : html``;
+        return html`
+            <section class="join-panel">
+                <p class="eyebrow">Live room</p>
+                <h1>Join the chatroom</h1>
+                <p>Choose a name once, then chat in realtime with everyone currently in the room.</p>
+                ${feedback}
+                <form rw-submit="join" class="join-form">
+                    <label for="display-name">Display name</label>
+                    <div class="input-row">
+                        <input id="display-name" name="name" maxlength="40" autocomplete="nickname" required autofocus>
+                        <button type="submit">Join room</button>
+                    </div>
+                </form>
+            </section>
+        `;
+    }
+
+    private roomScreen() {
+        return html`
+            <div class="room-layout">
+                <section class="conversation">
+                    <header class="room-header">
+                        <div><p class="eyebrow">Connected as</p><h1>${this.displayName}</h1></div>
+                        <button type="button" class="quiet-button" rw-click="leave">Leave</button>
+                    </header>
+                    <ol class="message-list" aria-live="polite" data-rw-state="messages">${this.messages}</ol>
+                    <form rw-submit="send" class="composer">
+                        <label class="sr-only" for="chat-message">Message</label>
+                        <input id="chat-message" name="message" maxlength="500" autocomplete="off" placeholder="Message the room…" required autofocus>
+                        <button type="submit">Send</button>
+                    </form>
+                </section>
+                <aside class="presence" aria-label="People in the room" data-rw-state="presence">${this.presence}</aside>
+            </div>
+        `;
+    }
+}
+
+export function createChatroomPage() {
+    const room = new ChatRoom();
+
+    @page('/', { css: 'chatroom.css' })
+    class ChatroomPage {
+        chat = new ChatroomComponent(room);
+
+        render() {
+            return html`<main>${this.chat}</main>`;
+        }
+    }
+
+    return ChatroomPage;
+}
+
+if (require.main === module) start(createChatroomPage(), { port: 8080 });

package/examples/live-html/components.css

@@ -0,0 +1,7 @@
+:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #07111f; color: #e2e8f0; }
+body { margin: 0; }
+main { width: min(54rem, calc(100% - 2rem)); margin: 4rem auto; }
+.counter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
+.counter-card { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid #334155; border-radius: 1rem; background: #111827; }
+output { font-size: 2rem; font-weight: 700; color: #67e8f9; }
+button { border: 0; border-radius: .65rem; padding: .75rem 1rem; background: #22d3ee; color: #082f49; font-weight: 700; cursor: pointer; }

package/examples/live-html/components.js

@@ -0,0 +1,113 @@
+"use strict";
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentsPage = exports.CounterComponent = void 0;
+const redweb_1 = require('../..');
+let CounterComponent = (() => {
+    let _classDecorators = [(0, redweb_1.component)()];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _instanceExtraInitializers = [];
+    let _count_decorators;
+    let _count_initializers = [];
+    let _count_extraInitializers = [];
+    let _increment_decorators;
+    var CounterComponent = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _count_decorators = [(0, redweb_1.state)()];
+            _increment_decorators = [(0, redweb_1.action)()];
+            __esDecorate(this, null, _increment_decorators, { kind: "method", name: "increment", static: false, private: false, access: { has: obj => "increment" in obj, get: obj => obj.increment }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _count_decorators, { kind: "field", name: "count", static: false, private: false, access: { has: obj => "count" in obj, get: obj => obj.count, set: (obj, value) => { obj.count = value; } }, metadata: _metadata }, _count_initializers, _count_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            CounterComponent = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        label = __runInitializers(this, _instanceExtraInitializers);
+        count = __runInitializers(this, _count_initializers, 0);
+        constructor(label) {
+            __runInitializers(this, _count_extraInitializers);
+            this.label = label;
+        }
+        increment() {
+            this.count += 1;
+        }
+        render() {
+            return (0, redweb_1.html) `
+            <article class="counter-card">
+                <h2>${this.label}</h2>
+                <output data-rw-state="count">${this.count}</output>
+                <button type="button" rw-click="increment">Increment on the server</button>
+            </article>
+        `;
+        }
+    };
+    return CounterComponent = _classThis;
+})();
+exports.CounterComponent = CounterComponent;
+let ComponentsPage = (() => {
+    let _classDecorators = [(0, redweb_1.page)('/', { css: 'components.css' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var ComponentsPage = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ComponentsPage = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        primary = new CounterComponent('Primary counter');
+        secondary = new CounterComponent('Independent counter');
+        render() {
+            return (0, redweb_1.html) `
+            <main>
+                <h1>Reusable server components</h1>
+                <section class="counter-grid">${this.primary}${this.secondary}</section>
+            </main>
+        `;
+        }
+    };
+    return ComponentsPage = _classThis;
+})();
+exports.ComponentsPage = ComponentsPage;
+if (require.main === module)
+    (0, redweb_1.start)(ComponentsPage, { port: 8080 });

package/examples/live-html/components.ts

@@ -0,0 +1,41 @@
+import { action, component, html, page, start, state } from 'redweb';
+
+@component()
+export class CounterComponent {
+    @state()
+    count = 0;
+
+    constructor(private readonly label: string) {}
+
+    @action()
+    increment() {
+        this.count += 1;
+    }
+
+    render() {
+        return html`
+            <article class="counter-card">
+                <h2>${this.label}</h2>
+                <output data-rw-state="count">${this.count}</output>
+                <button type="button" rw-click="increment">Increment on the server</button>
+            </article>
+        `;
+    }
+}
+
+@page('/', { css: 'components.css' })
+export class ComponentsPage {
+    primary = new CounterComponent('Primary counter');
+    secondary = new CounterComponent('Independent counter');
+
+    render() {
+        return html`
+            <main>
+                <h1>Reusable server components</h1>
+                <section class="counter-grid">${this.primary}${this.secondary}</section>
+            </main>
+        `;
+    }
+}
+
+if (require.main === module) start(ComponentsPage, { port: 8080 });

package/examples/live-html/counter.css

@@ -0,0 +1,24 @@
+:root {
+    color-scheme: dark;
+    font-family: system-ui, sans-serif;
+    background: #111827;
+    color: #f9fafb;
+}
+
+body {
+    min-height: 100vh;
+    margin: 0;
+    display: grid;
+    place-items: center;
+}
+
+main {
+    text-align: center;
+}
+
+output {
+    display: block;
+    color: #67e8f9;
+    font-size: 6rem;
+    font-weight: 700;
+}

package/examples/live-html/counter.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+<head><meta charset="utf-8"><title>Redweb server counter</title></head>
+<body>
+    <main>
+        <h1>Server-side counter</h1>
+        <output aria-live="polite" data-rw-state="count"></output>
+    </main>
+</body>
+</html>

package/examples/live-html/counter.js

@@ -0,0 +1,73 @@
+"use strict";
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CounterPage = void 0;
+const redweb_1 = require('../..');
+let CounterPage = (() => {
+    let _classDecorators = [(0, redweb_1.page)('/', { template: 'counter.html', css: 'counter.css' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _count_decorators;
+    let _count_initializers = [];
+    let _count_extraInitializers = [];
+    var CounterPage = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _count_decorators = [(0, redweb_1.state)()];
+            __esDecorate(null, null, _count_decorators, { kind: "field", name: "count", static: false, private: false, access: { has: obj => "count" in obj, get: obj => obj.count, set: (obj, value) => { obj.count = value; } }, metadata: _metadata }, _count_initializers, _count_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            CounterPage = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        count = __runInitializers(this, _count_initializers, 0);
+        ticker = (__runInitializers(this, _count_extraInitializers), null);
+        connected() {
+            this.ticker = setInterval(() => { this.count += 1; }, 1000);
+        }
+        disconnected() {
+            if (this.ticker)
+                clearInterval(this.ticker);
+            this.ticker = null;
+        }
+    };
+    return CounterPage = _classThis;
+})();
+exports.CounterPage = CounterPage;
+if (require.main === module)
+    (0, redweb_1.start)(CounterPage, { port: 8080 });

package/examples/live-html/counter.ts

@@ -0,0 +1,21 @@
+import { page, start, state } from 'redweb';
+
+@page('/', { template: 'counter.html', css: 'counter.css' })
+export class CounterPage {
+    @state()
+    count = 0;
+
+    private ticker: NodeJS.Timeout | null = null;
+
+    connected() {
+        this.ticker = setInterval(() => { this.count += 1; }, 1000);
+    }
+
+    disconnected() {
+        if (this.ticker) clearInterval(this.ticker);
+        this.ticker = null;
+    }
+
+}
+
+if (require.main === module) start(CounterPage, { port: 8080 });

package/examples/live-html/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "strict": true,
+    "experimentalDecorators": false,
+    "useDefineForClassFields": true,
+    "skipLibCheck": false,
+    "baseUrl": "../..",
+    "paths": {
+      "redweb": ["."]
+    }
+  },
+  "files": ["counter.ts", "chatroom.ts", "cards.ts", "components.ts"]
+}