redweb 0.13.1 → 0.13.3

package/examples/live-html/chatroom.js

@@ -1,207 +1,207 @@
-"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.ChatroomComponent = exports.chatInputs = void 0;
-exports.createChatroomPage = createChatroomPage;
-const jsx_runtime_1 = require('../../jsx-runtime');
-const redweb_1 = require('../..');
-const zod_1 = require("zod");
-const MAX_VISIBLE_MEMBERS = 100;
-const visibleText = (maximum) => zod_1.z.string()
-    .transform(value => value.normalize('NFKC').trim())
-    .pipe(zod_1.z.string().min(1).max(maximum).regex(/^[^\p{Cc}\p{Cf}]+$/u));
-exports.chatInputs = {
-    join: zod_1.z.object({ name: visibleText(40) }).strict(),
-    send: zod_1.z.object({ message: visibleText(500) }).strict(),
-};
-class ChatRoom {
-    history = [];
-    nextMessageId = 0;
-    participants = new Set();
-    online = new Set();
-    join(participant) {
-        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(this.history);
-        this.publishPresence();
-        return true;
-    }
-    disconnect(participant) {
-        if (this.online.delete(participant))
-            this.publishPresence();
-    }
-    leave(participant) {
-        this.online.delete(participant);
-        if (this.participants.delete(participant))
-            this.publishPresence();
-    }
-    send(participant, text) {
-        if (!this.online.has(participant))
-            return false;
-        this.history = [...this.history, { id: ++this.nextMessageId, sender: participant.displayName, text }].slice(-100);
-        for (const member of this.participants)
-            member.updateMessages(this.history);
-        return true;
-    }
-    publishPresence() {
-        const members = [...this.online].map(participant => participant.displayName);
-        for (const participant of this.participants)
-            participant.updatePresence(members);
-    }
-}
-let ChatroomComponent = (() => {
-    let _classDecorators = [(0, redweb_1.component)()];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _instanceExtraInitializers = [];
-    let _displayName_decorators;
-    let _displayName_initializers = [];
-    let _displayName_extraInitializers = [];
-    let _feedback_decorators;
-    let _feedback_initializers = [];
-    let _feedback_extraInitializers = [];
-    let _messages_decorators;
-    let _messages_initializers = [];
-    let _messages_extraInitializers = [];
-    let _members_decorators;
-    let _members_initializers = [];
-    let _members_extraInitializers = [];
-    let _join_decorators;
-    let _send_decorators;
-    let _leave_decorators;
-    var ChatroomComponent = class {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _displayName_decorators = [(0, redweb_1.state)()];
-            _feedback_decorators = [(0, redweb_1.state)()];
-            _messages_decorators = [(0, redweb_1.state)()];
-            _members_decorators = [(0, redweb_1.state)()];
-            _join_decorators = [(0, redweb_1.action)({ input: exports.chatInputs.join })];
-            _send_decorators = [(0, redweb_1.action)({ input: exports.chatInputs.send })];
-            _leave_decorators = [(0, redweb_1.action)()];
-            __esDecorate(this, null, _join_decorators, { kind: "method", name: "join", static: false, private: false, access: { has: obj => "join" in obj, get: obj => obj.join }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _send_decorators, { kind: "method", name: "send", static: false, private: false, access: { has: obj => "send" in obj, get: obj => obj.send }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _leave_decorators, { kind: "method", name: "leave", static: false, private: false, access: { has: obj => "leave" in obj, get: obj => obj.leave }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(null, null, _displayName_decorators, { kind: "field", name: "displayName", static: false, private: false, access: { has: obj => "displayName" in obj, get: obj => obj.displayName, set: (obj, value) => { obj.displayName = value; } }, metadata: _metadata }, _displayName_initializers, _displayName_extraInitializers);
-            __esDecorate(null, null, _feedback_decorators, { kind: "field", name: "feedback", static: false, private: false, access: { has: obj => "feedback" in obj, get: obj => obj.feedback, set: (obj, value) => { obj.feedback = value; } }, metadata: _metadata }, _feedback_initializers, _feedback_extraInitializers);
-            __esDecorate(null, null, _messages_decorators, { kind: "field", name: "messages", static: false, private: false, access: { has: obj => "messages" in obj, get: obj => obj.messages, set: (obj, value) => { obj.messages = value; } }, metadata: _metadata }, _messages_initializers, _messages_extraInitializers);
-            __esDecorate(null, null, _members_decorators, { kind: "field", name: "members", static: false, private: false, access: { has: obj => "members" in obj, get: obj => obj.members, set: (obj, value) => { obj.members = value; } }, metadata: _metadata }, _members_initializers, _members_extraInitializers);
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            ChatroomComponent = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        room = __runInitializers(this, _instanceExtraInitializers);
-        displayName = __runInitializers(this, _displayName_initializers, '');
-        feedback = (__runInitializers(this, _displayName_extraInitializers), __runInitializers(this, _feedback_initializers, ''));
-        messages = (__runInitializers(this, _feedback_extraInitializers), __runInitializers(this, _messages_initializers, []));
-        members = (__runInitializers(this, _messages_extraInitializers), __runInitializers(this, _members_initializers, []));
-        constructor(room) {
-            __runInitializers(this, _members_extraInitializers);
-            this.room = room;
-        }
-        connected() { if (this.displayName)
-            this.room.join(this); }
-        disconnected() { this.room.disconnect(this); }
-        disposed() { this.room.leave(this); }
-        join({ name }) {
-            if (this.displayName)
-                return false;
-            this.displayName = name;
-            if (!this.room.join(this)) {
-                this.displayName = '';
-                this.feedback = 'That display name is already in use.';
-                return false;
-            }
-            this.feedback = '';
-            return true;
-        }
-        send({ message }) {
-            return this.room.send(this, message);
-        }
-        leave() {
-            this.room.leave(this);
-            this.displayName = '';
-            this.feedback = '';
-            this.messages = [];
-            this.members = [];
-        }
-        updateMessages(messages) { this.messages = messages; }
-        updatePresence(members) { this.members = members; }
-        render() {
-            return (0, jsx_runtime_1.jsx)("section", { class: "chatroom", children: this.displayName ? this.roomScreen() : this.joinScreen() });
-        }
-        joinScreen() {
-            return ((0, jsx_runtime_1.jsxs)("section", { class: "join-panel", children: [(0, jsx_runtime_1.jsx)("p", { class: "eyebrow", children: "Live room" }), (0, jsx_runtime_1.jsx)("h1", { children: "Join the chatroom" }), (0, jsx_runtime_1.jsx)("p", { children: "Choose a name once, then chat in realtime with everyone currently in the room." }), this.feedback && (0, jsx_runtime_1.jsx)("p", { class: "form-error", role: "alert", children: this.feedback }), (0, jsx_runtime_1.jsxs)("form", { "rw-submit": "join", class: "join-form", children: [(0, jsx_runtime_1.jsx)("label", { for: "display-name", children: "Display name" }), (0, jsx_runtime_1.jsxs)("div", { class: "input-row", children: [(0, jsx_runtime_1.jsx)("input", { id: "display-name", name: "name", maxlength: "40", autocomplete: "nickname", required: true, autofocus: true }), (0, jsx_runtime_1.jsx)("button", { type: "submit", children: "Join room" })] })] })] }));
-        }
-        roomScreen() {
-            const remaining = this.members.length - MAX_VISIBLE_MEMBERS;
-            return ((0, jsx_runtime_1.jsxs)("div", { class: "room-layout", children: [(0, jsx_runtime_1.jsxs)("section", { class: "conversation", children: [(0, jsx_runtime_1.jsxs)("header", { class: "room-header", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { class: "eyebrow", children: "Connected as" }), (0, jsx_runtime_1.jsx)("h1", { children: this.displayName })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", class: "quiet-button", "rw-click": "leave", children: "Leave" })] }), (0, jsx_runtime_1.jsx)("ol", { class: "message-list", "aria-live": "polite", children: this.messages.length ? this.messages.map(entry => ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: entry.sender }), (0, jsx_runtime_1.jsx)("p", { children: entry.text })] }, entry.id))) : (0, jsx_runtime_1.jsx)("li", { class: "empty-message", children: "No messages yet. Say hello." }) }), (0, jsx_runtime_1.jsxs)("form", { "rw-submit": "send", class: "composer", children: [(0, jsx_runtime_1.jsx)("label", { class: "sr-only", for: "chat-message", children: "Message" }), (0, jsx_runtime_1.jsx)("input", { id: "chat-message", name: "message", maxlength: "500", autocomplete: "off", placeholder: "Message the room\u2026", required: true, autofocus: true }), (0, jsx_runtime_1.jsx)("button", { type: "submit", children: "Send" })] })] }), (0, jsx_runtime_1.jsxs)("aside", { class: "presence", "aria-label": "People in the room", children: [(0, jsx_runtime_1.jsxs)("p", { class: "eyebrow", children: ["Online \u00B7 ", this.members.length] }), (0, jsx_runtime_1.jsxs)("ul", { children: [this.members.slice(0, MAX_VISIBLE_MEMBERS).map(member => (0, jsx_runtime_1.jsx)("li", { children: member }, member)), remaining > 0 && (0, jsx_runtime_1.jsxs)("li", { class: "more-members", children: ["+", remaining, " more"] })] })] })] }));
-        }
-    };
-    return ChatroomComponent = _classThis;
-})();
-exports.ChatroomComponent = ChatroomComponent;
-function createChatroomPage() {
-    const room = new ChatRoom();
-    let ChatroomPage = (() => {
-        let _classDecorators = [(0, redweb_1.page)('/', { css: 'chatroom.css' })];
-        let _classDescriptor;
-        let _classExtraInitializers = [];
-        let _classThis;
-        var ChatroomPage = 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);
-                ChatroomPage = _classThis = _classDescriptor.value;
-                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                __runInitializers(_classThis, _classExtraInitializers);
-            }
-            chat = new ChatroomComponent(room);
-            render() { return (0, jsx_runtime_1.jsx)("main", { children: this.chat }); }
-        };
-        return ChatroomPage = _classThis;
-    })();
-    return ChatroomPage;
-}
-if (require.main === module)
-    (0, redweb_1.start)(createChatroomPage(), { port: 8080 });
+"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.ChatroomComponent = exports.chatInputs = void 0;
+exports.createChatroomPage = createChatroomPage;
+const jsx_runtime_1 = require('../../jsx-runtime');
+const redweb_1 = require('../..');
+const zod_1 = require("zod");
+const MAX_VISIBLE_MEMBERS = 100;
+const visibleText = (maximum) => zod_1.z.string()
+    .transform(value => value.normalize('NFKC').trim())
+    .pipe(zod_1.z.string().min(1).max(maximum).regex(/^[^\p{Cc}\p{Cf}]+$/u));
+exports.chatInputs = {
+    join: zod_1.z.object({ name: visibleText(40) }).strict(),
+    send: zod_1.z.object({ message: visibleText(500) }).strict(),
+};
+class ChatRoom {
+    history = [];
+    nextMessageId = 0;
+    participants = new Set();
+    online = new Set();
+    join(participant) {
+        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(this.history);
+        this.publishPresence();
+        return true;
+    }
+    disconnect(participant) {
+        if (this.online.delete(participant))
+            this.publishPresence();
+    }
+    leave(participant) {
+        this.online.delete(participant);
+        if (this.participants.delete(participant))
+            this.publishPresence();
+    }
+    send(participant, text) {
+        if (!this.online.has(participant))
+            return false;
+        this.history = [...this.history, { id: ++this.nextMessageId, sender: participant.displayName, text }].slice(-100);
+        for (const member of this.participants)
+            member.updateMessages(this.history);
+        return true;
+    }
+    publishPresence() {
+        const members = [...this.online].map(participant => participant.displayName);
+        for (const participant of this.participants)
+            participant.updatePresence(members);
+    }
+}
+let ChatroomComponent = (() => {
+    let _classDecorators = [(0, redweb_1.component)()];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _instanceExtraInitializers = [];
+    let _displayName_decorators;
+    let _displayName_initializers = [];
+    let _displayName_extraInitializers = [];
+    let _feedback_decorators;
+    let _feedback_initializers = [];
+    let _feedback_extraInitializers = [];
+    let _messages_decorators;
+    let _messages_initializers = [];
+    let _messages_extraInitializers = [];
+    let _members_decorators;
+    let _members_initializers = [];
+    let _members_extraInitializers = [];
+    let _join_decorators;
+    let _send_decorators;
+    let _leave_decorators;
+    var ChatroomComponent = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _displayName_decorators = [(0, redweb_1.state)()];
+            _feedback_decorators = [(0, redweb_1.state)()];
+            _messages_decorators = [(0, redweb_1.state)()];
+            _members_decorators = [(0, redweb_1.state)()];
+            _join_decorators = [(0, redweb_1.action)({ input: exports.chatInputs.join })];
+            _send_decorators = [(0, redweb_1.action)({ input: exports.chatInputs.send })];
+            _leave_decorators = [(0, redweb_1.action)()];
+            __esDecorate(this, null, _join_decorators, { kind: "method", name: "join", static: false, private: false, access: { has: obj => "join" in obj, get: obj => obj.join }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _send_decorators, { kind: "method", name: "send", static: false, private: false, access: { has: obj => "send" in obj, get: obj => obj.send }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _leave_decorators, { kind: "method", name: "leave", static: false, private: false, access: { has: obj => "leave" in obj, get: obj => obj.leave }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _displayName_decorators, { kind: "field", name: "displayName", static: false, private: false, access: { has: obj => "displayName" in obj, get: obj => obj.displayName, set: (obj, value) => { obj.displayName = value; } }, metadata: _metadata }, _displayName_initializers, _displayName_extraInitializers);
+            __esDecorate(null, null, _feedback_decorators, { kind: "field", name: "feedback", static: false, private: false, access: { has: obj => "feedback" in obj, get: obj => obj.feedback, set: (obj, value) => { obj.feedback = value; } }, metadata: _metadata }, _feedback_initializers, _feedback_extraInitializers);
+            __esDecorate(null, null, _messages_decorators, { kind: "field", name: "messages", static: false, private: false, access: { has: obj => "messages" in obj, get: obj => obj.messages, set: (obj, value) => { obj.messages = value; } }, metadata: _metadata }, _messages_initializers, _messages_extraInitializers);
+            __esDecorate(null, null, _members_decorators, { kind: "field", name: "members", static: false, private: false, access: { has: obj => "members" in obj, get: obj => obj.members, set: (obj, value) => { obj.members = value; } }, metadata: _metadata }, _members_initializers, _members_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ChatroomComponent = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        room = __runInitializers(this, _instanceExtraInitializers);
+        displayName = __runInitializers(this, _displayName_initializers, '');
+        feedback = (__runInitializers(this, _displayName_extraInitializers), __runInitializers(this, _feedback_initializers, ''));
+        messages = (__runInitializers(this, _feedback_extraInitializers), __runInitializers(this, _messages_initializers, []));
+        members = (__runInitializers(this, _messages_extraInitializers), __runInitializers(this, _members_initializers, []));
+        constructor(room) {
+            __runInitializers(this, _members_extraInitializers);
+            this.room = room;
+        }
+        connected() { if (this.displayName)
+            this.room.join(this); }
+        disconnected() { this.room.disconnect(this); }
+        disposed() { this.room.leave(this); }
+        join({ name }) {
+            if (this.displayName)
+                return false;
+            this.displayName = name;
+            if (!this.room.join(this)) {
+                this.displayName = '';
+                this.feedback = 'That display name is already in use.';
+                return false;
+            }
+            this.feedback = '';
+            return true;
+        }
+        send({ message }) {
+            return this.room.send(this, message);
+        }
+        leave() {
+            this.room.leave(this);
+            this.displayName = '';
+            this.feedback = '';
+            this.messages = [];
+            this.members = [];
+        }
+        updateMessages(messages) { this.messages = messages; }
+        updatePresence(members) { this.members = members; }
+        render() {
+            return (0, jsx_runtime_1.jsx)("section", { class: "chatroom", children: this.displayName ? this.roomScreen() : this.joinScreen() });
+        }
+        joinScreen() {
+            return ((0, jsx_runtime_1.jsxs)("section", { class: "join-panel", children: [(0, jsx_runtime_1.jsx)("p", { class: "eyebrow", children: "Live room" }), (0, jsx_runtime_1.jsx)("h1", { children: "Join the chatroom" }), (0, jsx_runtime_1.jsx)("p", { children: "Choose a name once, then chat in realtime with everyone currently in the room." }), this.feedback && (0, jsx_runtime_1.jsx)("p", { class: "form-error", role: "alert", children: this.feedback }), (0, jsx_runtime_1.jsxs)("form", { "rw-submit": "join", class: "join-form", children: [(0, jsx_runtime_1.jsx)("label", { for: "display-name", children: "Display name" }), (0, jsx_runtime_1.jsxs)("div", { class: "input-row", children: [(0, jsx_runtime_1.jsx)("input", { id: "display-name", name: "name", maxlength: "40", autocomplete: "nickname", required: true, autofocus: true }), (0, jsx_runtime_1.jsx)("button", { type: "submit", children: "Join room" })] })] })] }));
+        }
+        roomScreen() {
+            const remaining = this.members.length - MAX_VISIBLE_MEMBERS;
+            return ((0, jsx_runtime_1.jsxs)("div", { class: "room-layout", children: [(0, jsx_runtime_1.jsxs)("section", { class: "conversation", children: [(0, jsx_runtime_1.jsxs)("header", { class: "room-header", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { class: "eyebrow", children: "Connected as" }), (0, jsx_runtime_1.jsx)("h1", { children: this.displayName })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", class: "quiet-button", "rw-click": "leave", children: "Leave" })] }), (0, jsx_runtime_1.jsx)("ol", { class: "message-list", "aria-live": "polite", children: this.messages.length ? this.messages.map(entry => ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: entry.sender }), (0, jsx_runtime_1.jsx)("p", { children: entry.text })] }, entry.id))) : (0, jsx_runtime_1.jsx)("li", { class: "empty-message", children: "No messages yet. Say hello." }) }), (0, jsx_runtime_1.jsxs)("form", { "rw-submit": "send", class: "composer", children: [(0, jsx_runtime_1.jsx)("label", { class: "sr-only", for: "chat-message", children: "Message" }), (0, jsx_runtime_1.jsx)("input", { id: "chat-message", name: "message", maxlength: "500", autocomplete: "off", placeholder: "Message the room\u2026", required: true, autofocus: true }), (0, jsx_runtime_1.jsx)("button", { type: "submit", children: "Send" })] })] }), (0, jsx_runtime_1.jsxs)("aside", { class: "presence", "aria-label": "People in the room", children: [(0, jsx_runtime_1.jsxs)("p", { class: "eyebrow", children: ["Online \u00B7 ", this.members.length] }), (0, jsx_runtime_1.jsxs)("ul", { children: [this.members.slice(0, MAX_VISIBLE_MEMBERS).map(member => (0, jsx_runtime_1.jsx)("li", { children: member }, member)), remaining > 0 && (0, jsx_runtime_1.jsxs)("li", { class: "more-members", children: ["+", remaining, " more"] })] })] })] }));
+        }
+    };
+    return ChatroomComponent = _classThis;
+})();
+exports.ChatroomComponent = ChatroomComponent;
+function createChatroomPage() {
+    const room = new ChatRoom();
+    let ChatroomPage = (() => {
+        let _classDecorators = [(0, redweb_1.page)('/', { css: 'chatroom.css' })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        var ChatroomPage = 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);
+                ChatroomPage = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            chat = new ChatroomComponent(room);
+            render() { return (0, jsx_runtime_1.jsx)("main", { children: this.chat }); }
+        };
+        return ChatroomPage = _classThis;
+    })();
+    return ChatroomPage;
+}
+if (require.main === module)
+    (0, redweb_1.start)(createChatroomPage(), { port: 8080 });

package/examples/live-html/jsx-page.js

@@ -67,7 +67,7 @@ let JsxPage = (() => {
             this.count += 1;
         }
         render() {
-            return ((0, jsx_runtime_1.jsxs)("main", { class: "page-shell", children: [(0, jsx_runtime_1.jsx)("h1", { children: "Redweb JSX" }), (0, jsx_runtime_1.jsxs)(Card, { title: "Server rendered", children: [(0, jsx_runtime_1.jsx)("p", { children: "Plain TSX, escaped by default, with no browser framework." }), (0, jsx_runtime_1.jsxs)("button", { type: "button", "rw-click": "increment", children: ["Count ", (0, jsx_runtime_1.jsx)("output", { children: this.count })] })] })] }));
+            return ((0, jsx_runtime_1.jsxs)("main", { class: "page-shell", children: [(0, jsx_runtime_1.jsx)("h1", { children: "Redweb JSX" }), (0, jsx_runtime_1.jsxs)(Card, { title: "Server rendered", children: [(0, jsx_runtime_1.jsx)("p", { children: "Plain TSX, escaped by default, with no browser framework." }), (0, jsx_runtime_1.jsxs)("button", { type: "button", "rw-click": "increment", children: ["Count ", this.count] })] })] }));
         }
         constructor() {
             super(...arguments);

package/examples/live-html/jsx-page.tsx

@@ -30,7 +30,7 @@ export class JsxPage extends LivePage {
                 <Card title="Server rendered">
                     <p>Plain TSX, escaped by default, with no browser framework.</p>
                     <button type="button" rw-click="increment">
-                        Count <output>{this.count}</output>
+                        Count {this.count}
                     </button>
                 </Card>
             </main>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redweb",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "description": "A small Node.js foundation for HTTP, WebSockets, multiplayer services, and server-rendered HTML",
   "main": "index.js",
   "types": "index.d.ts",
@@ -44,6 +44,7 @@
   "scripts": {
     "pretest": "node scripts/build-live-html-examples.js --check && node scripts/generate-protocol-types.js --check && node scripts/generate-docs.js --check && tsc -p tests/types/tsconfig.json && tsc -p tests/types/tsconfig.jsxdev.json && tsc -p tests/types/tsconfig.standard.json",
     "prepack": "node scripts/build-live-html-examples.js --check && node scripts/generate-docs.js --check",
+    "prepublishOnly": "node scripts/generate-docs.js --release-check",
     "generate:docs": "node scripts/generate-docs.js",
     "verify:docs:mcp": "npm --prefix integrations/docs-mcp test",
     "verify:cli": "c8 --all --src=bin --include=bin/redweb.js --reporter=text --reporter=json --reports-dir=coverage/cli-entrypoint --check-coverage --lines=100 --branches=100 --functions=100 --statements=100 node node_modules/jest/bin/jest.js tests/integration/init-cli.integration.test.js tests/integration/add-cli.integration.test.js --testNamePattern=\"redweb init CLI integration|human and subprocess CLI\" --runInBand --coverage=false",

package/recipes/add/artifact.test.cjs

@@ -32,7 +32,7 @@ test('__NAME__ generated __KIND__ works over the network', { timeout: 10000 }, a
         const response = await fetch(`${origin}${'__KIND__' === 'page' ? '/__NAME__' : '/'}`);
         assert.equal(response.status, 200);
         const document = await response.text();
-        assert.match(document, /<output>0<\/output>/);
+        assert.match(document, /Count 0/);
         config = JSON.parse(document.match(/id="__redweb_page">([^<]+)</)[1]);
     }
     const endpoint = config
@@ -49,7 +49,7 @@ test('__NAME__ generated __KIND__ works over the network', { timeout: 10000 }, a
         } }));
     } else await artifact.contract.client(socket).send('ping', { text: 'Hello' }, { requestId: 'probe' });
     const success = message => config
-        ? message.type === 'redweb:patch' && message.payload.patches.some(patch => patch.html?.includes('<output>1</output>'))
+        ? message.type === 'redweb:patch' && message.payload.patches.some(patch => patch.html?.includes('Count 1'))
         : message.type === 'pong' && message.payload.text === 'Hello' && message.requestId === 'probe';
     const deadline = Date.now() + 3000;
     while (!received.some(success) && Date.now() < deadline) await new Promise(resolve => setTimeout(resolve, 10));

package/recipes/add/live.tsx

@@ -11,7 +11,7 @@ export class __CLASS__ {
         return (
             <section>
                 <h1>__TITLE__</h1>
-                <button rw-click="increment">Count <output>{this.count}</output></button>
+                <button rw-click="increment">Count {this.count}</button>
             </section>
         );
     }

package/recipes/realtime/README.md

@@ -4,5 +4,5 @@
 The browser button invokes only the decorated `increment` action; it does not supply the new count.
 Open two tabs to check the broadcast. State is in memory and resets when the server restarts.
 
-`<output>{this.count}</output>` updates automatically because the page reads decorated state during rendering.
+`{this.count}` updates automatically because the page reads decorated state during rendering; no wrapper element is required.
 No repeated binding name or browser-side state is needed. State changes are assignment-driven; render methods must not modify state.

package/recipes/realtime/app.test.cjs

@@ -6,10 +6,10 @@ test('one server action updates both visitors', { timeout: 10000 }, async t => {
     const origin = await listen(t);
     const first = await live(t, origin);
     const second = await live(t, origin);
-    await first.patch(patch => patch.html.includes('<output>0</output>'));
-    await second.patch(patch => patch.html.includes('<output>0</output>'));
+    await first.patch(patch => patch.html.includes('Count 0'));
+    await second.patch(patch => patch.html.includes('Count 0'));
     first.action('increment');
-    await first.patch(patch => patch.html.includes('<output>1</output>'));
-    await second.patch(patch => patch.html.includes('<output>1</output>'));
-    assert.match(await (await fetch(origin)).text(), /<output>1<\/output>/);
+    await first.patch(patch => patch.html.includes('Count 1'));
+    await second.patch(patch => patch.html.includes('Count 1'));
+    assert.match(await (await fetch(origin)).text(), /Count 1/);
 });

package/recipes/realtime/app.tsx

@@ -14,7 +14,7 @@ export class CounterPage {
                 <h1>A counter owned by the server</h1>
                 <p>Open this page in two tabs. Either button updates both.</p>
                 <button rw-click="increment">
-                    Count <output>{this.count}</output>
+                    Count {this.count}
                 </button>
             </main>
         );