lively 0.3.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 193f180461ac23de0fd1401f41e1c3b5c09b5d770326b7c9bab0958e7a3ad1f8
-  data.tar.gz: 716af747f77e13785c2753a0710282828dbfc4d436583fe9b4d53747eb5f2f19
+  metadata.gz: 1fe993ef2758a622d5da68c03094ea040678f62618b26bd8f888ab6127366300
+  data.tar.gz: 4919d6e2ec9fd70f2388d838a98740a6f911875ee233e3d351e55e59f426fa46
 SHA512:
-  metadata.gz: 38e46574582d3439c82f7d6241103ebaea644f8fd2df4e97e63b970952a8a1d7b5aea49556b9635d6dbb17890bf971ab869cabec023671d083c94f28a6cd0b62
-  data.tar.gz: 9178f2ceeae957d72d85d73590ed2a40edec2de72ba5545048a460bb37596adada9c81ef6844f6e443222e67d2ddc992abfda4fcbdfebfdae36e7fdd5d1535fb
+  metadata.gz: 1b8e0c1657776e309f5e164f79ad66e345aac9a455ef604bf2c326dfef9ce06e2a8f8370cd6052706a825bbf159ce5e5f60ade6b3cfd5f651c38aa2ee3c15bc6
+  data.tar.gz: 2f2e3e3043956ae4ce65c5a82e82c62af462d1b750ef51d0aa4dc71c9ffc0f731ad80779517fe44263b5c9f57a1d187f84e2cb9d0a325c46855c799c9d404c3d

data/lib/lively/version.rb

@@ -4,5 +4,5 @@
 # Copyright, 2021-2024, by Samuel Williams.
 
 module Lively
-	VERSION = "0.3.0"
+	VERSION = "0.5.0"
 end

data/public/_components/@socketry/live/Live.js

@@ -1,4 +1,3 @@
-
 import morphdom from 'morphdom';
 
 export class Live {
@@ -21,21 +20,67 @@ export class Live {
 		this.events = [];
 		
 		this.failures = 0;
+		this.reconnectTimer = null;
 		
 		// Track visibility state and connect if required:
 		this.document.addEventListener("visibilitychange", () => this.handleVisibilityChange());
 		this.handleVisibilityChange();
+		
+		const elementNodeType = this.window.Node.ELEMENT_NODE;
+		
+		// Create a MutationObserver to watch for removed nodes
+		this.observer = new this.window.MutationObserver((mutationsList, observer) => {
+			for (let mutation of mutationsList) {
+				if (mutation.type === 'childList') {
+					for (let node of mutation.removedNodes) {
+						if (node.nodeType !== elementNodeType) continue;
+						
+						if (node.classList?.contains('live')) {
+							this.unbind(node);
+						}
+						
+						// Unbind any child nodes:
+						for (let child of node.getElementsByClassName('live')) {
+							this.unbind(child);
+						}
+					}
+					
+					for (let node of mutation.addedNodes) {
+						if (node.nodeType !== elementNodeType) continue;
+						
+						if (node.classList.contains('live')) {
+							this.bind(node);
+						}
+						
+						// Bind any child nodes:
+						for (let child of node.getElementsByClassName('live')) {
+							this.bind(child);
+						}
+					}
+				}
+			}
+		});
+		
+		this.observer.observe(this.document.body, {childList: true, subtree: true});
 	}
 	
 	// -- Connection Handling --
 	
 	connect() {
-		if (this.server) return this.server;
+		if (this.server) {
+			return this.server;
+		}
 		
 		let server = this.server = new this.window.WebSocket(this.url);
 		
+		if (this.reconnectTimer) {
+			clearTimeout(this.reconnectTimer);
+			this.reconnectTimer = null;
+		}
+		
 		server.onopen = () => {
 			this.failures = 0;
+			this.flush();
 			this.attach();
 		};
 		
@@ -52,13 +97,18 @@ export class Live {
 		
 		server.addEventListener('close', () => {
 			// Explicit disconnect will clear `this.server`:
-			if (this.server) {
+			if (this.server && !this.reconnectTimer) {
 				// We need a minimum delay otherwise this can end up immediately invoking the callback:
 				const delay = Math.max(100 * (this.failures + 1) ** 2, 60000);
-				setTimeout(() => this.connect(), delay);
+				this.reconnectTimer = setTimeout(() => {
+					this.reconnectTimer = null;
+					this.connect();
+				}, delay);
 			}
 			
-			this.server = null;
+			if (this.server === server) {
+				this.server = null;
+			}
 		});
 		
 		return server;
@@ -70,14 +120,23 @@ export class Live {
 			this.server = null;
 			server.close();
 		}
+		
+		if (this.reconnectTimer) {
+			clearTimeout(this.reconnectTimer);
+			this.reconnectTimer = null;
+		}
 	}
 	
 	send(message) {
-		try {
-			this.server.send(message);
-		} catch (error) {
-			this.events.push(message);
+		if (this.server) {
+			try {
+				return this.server.send(message);
+			} catch (error) {
+				// console.log("Live.send", "failed to send message to server", error);
+			}
 		}
+		
+		this.events.push(message);
 	}
 	
 	flush() {
@@ -91,33 +150,31 @@ export class Live {
 		}
 	}
 	
-	bind(elements) {
-		for (var element of elements) {
-			this.send(JSON.stringify({bind: element.id, data: element.dataset}));
+	handleVisibilityChange() {
+		if (this.document.hidden) {
+			this.disconnect();
+		} else {
+			this.connect();
 		}
 	}
 	
-	bindElementsByClassName(selector = 'live') {
-		this.bind(
-			this.document.getElementsByClassName(selector)
-		);
+	bind(element) {
+		console.log("bind", element.id, element.dataset);
 		
-		this.flush();
+		this.send(JSON.stringify(['bind', element.id, element.dataset]));
 	}
 	
-	handleVisibilityChange() {
-		if (this.document.hidden) {
-			this.disconnect();
-		} else {
-			this.connect();
+	unbind(element) {
+		console.log("unbind", element.id, element.dataset);
+		
+		if (this.server) {
+			this.send(JSON.stringify(['unbind', element.id]));
 		}
 	}
 	
 	attach() {
-		if (this.document.readyState === 'loading') {
-			this.document.addEventListener('DOMContentLoaded', () => this.bindElementsByClassName());
-		} else {
-			this.bindElementsByClassName();
+		for (let node of this.document.getElementsByClassName('live')) {
+			this.bind(node);
 		}
 	}
 	
@@ -126,8 +183,8 @@ export class Live {
 	}
 	
 	reply(options) {
-		if (options && options.reply) {
-			this.send(JSON.stringify({reply: options.reply}));
+		if (options?.reply) {
+			this.send(JSON.stringify(['reply', options.reply]));
 		}
 	}
 	
@@ -193,7 +250,7 @@ export class Live {
 		this.connect();
 		
 		this.send(
-			JSON.stringify({id: id, event: event})
+			JSON.stringify(['event', id, event])
 		);
 	}
 	

data/public/_components/@socketry/live/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@socketry/live",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.11.0",
   "description": "Live HTML tags for Ruby.",
   "main": "Live.js",
   "repository": {

data/public/_components/@socketry/live/test/Live.js

@@ -1,29 +1,80 @@
-import {describe, before, after, it} from 'node:test';
-import {ok, strict, strictEqual} from 'node:assert';
+import {describe, before, beforeEach, after, it} from 'node:test';
+import {ok, strict, strictEqual, deepStrictEqual} from 'node:assert';
 
 import {WebSocket} from 'ws';
 import {JSDOM} from 'jsdom';
 import {Live} from '../Live.js';
 
+class Queue {
+	constructor() {
+		this.items = [];
+		this.waiting = [];
+	}
+
+	push(item) {
+		if (this.waiting.length > 0) {
+			let resolve = this.waiting.shift();
+			resolve(item);
+		} else {
+			this.items.push(item);
+		}
+	}
+
+	pop() {
+		return new Promise(resolve => {
+			if (this.items.length > 0) {
+				resolve(this.items.shift());
+			} else {
+				this.waiting.push(resolve);
+			}
+		});
+	}
+	
+	async popUntil(callback) {
+		while (true) {
+			let item = await this.pop();
+			if (callback(item)) return item;
+		}
+	}
+	
+	clear() {
+		this.items = [];
+		this.waiting = [];
+	}
+}
+
 describe('Live', function () {
 	let dom;
 	let webSocketServer;
+	let messages = new Queue();
 
 	const webSocketServerConfig = {port: 3000};
 	const webSocketServerURL = `ws://localhost:${webSocketServerConfig.port}/live`;
 
 	before(async function () {
-		const listening = new Promise(resolve => {
+		const listening = new Promise((resolve, reject) => {
 			webSocketServer = new WebSocket.Server(webSocketServerConfig, resolve);
+			webSocketServer.on('error', reject);
 		});
 		
-		dom = new JSDOM('<!DOCTYPE html><html><body><div id="my"><p>Hello World</p></div></body></html>');
+		dom = new JSDOM('<!DOCTYPE html><html><body><div id="my" class="live"><p>Hello World</p></div></body></html>');
 		// Ensure the WebSocket class is available:
 		dom.window.WebSocket = WebSocket;
 		
 		await new Promise(resolve => dom.window.addEventListener('load', resolve));
 		
 		await listening;
+		
+		webSocketServer.on('connection', socket => {
+			socket.on('message', message => {
+				let payload = JSON.parse(message);
+				messages.push(payload);
+			});
+		});
+	});
+	
+	beforeEach(function () {
+		messages.clear();
 	});
 	
 	after(function () {
@@ -48,23 +99,31 @@ describe('Live', function () {
 		live.disconnect();
 	});
 	
-	it('should handle visibility changes', function () {
+	it('should handle visibility changes', async function () {
 		const live = new Live(dom.window, webSocketServerURL);
 		
-		var hidden = false;
+		let hidden = false;
 		Object.defineProperty(dom.window.document, "hidden", {
 			get() {return hidden},
 		});
 		
+		// The document starts out hidden... we have defined a property to make it not hidden, let's propagate that change:
 		live.handleVisibilityChange();
 		
-		ok(live.server);
+		// We should receive a bind message for the live element:
+		deepStrictEqual(await messages.pop(), ['bind', 'my', {}]);
 		
 		hidden = true;
+		live.handleVisibilityChange();
+		ok(!live.server);
 		
+		hidden = false;
 		live.handleVisibilityChange();
+		ok(live.server);
 		
-		ok(!live.server);
+		deepStrictEqual(await messages.pop(), ['bind', 'my', {}]);
+		
+		live.disconnect();
 	});
 	
 	it('should handle updates', async function () {
@@ -78,25 +137,18 @@ describe('Live', function () {
 		
 		let socket = await connected;
 		
-		const reply = new Promise((resolve, reject) => {
-			socket.on('message', message => {
-				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
-			});
-		});
-		
 		socket.send(
 			JSON.stringify(['update', 'my', '<div id="my"><p>Goodbye World!</p></div>', {reply: true}])
 		);
 		
-		await reply;
+		await messages.popUntil(message => message[0] == 'reply');
 		
 		strictEqual(dom.window.document.getElementById('my').innerHTML, '<p>Goodbye World!</p>');
 		
 		live.disconnect();
 	});
 	
-	it('should handle replacements', async function () {
+	it('should handle updates with child live elements', async function () {
 		const live = new Live(dom.window, webSocketServerURL);
 		
 		live.connect();
@@ -107,19 +159,49 @@ describe('Live', function () {
 		
 		let socket = await connected;
 		
-		const reply = new Promise((resolve, reject) => {
-			socket.on('message', message => {
-				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
-			});
+		socket.send(
+			JSON.stringify(['update', 'my', '<div id="my"><div id="mychild" class="live"></div></div>'])
+		);
+		
+		let payload = await messages.popUntil(message => message[0] == 'bind');
+		deepStrictEqual(payload, ['bind', 'mychild', {}]);
+		
+		live.disconnect();
+	});
+	
+	it('can unbind removed elements', async function () {
+		dom.window.document.body.innerHTML = '<div id="my" class="live"><p>Hello World</p></div>';
+		
+		const live = new Live(dom.window, webSocketServerURL);
+		
+		live.connect();
+		
+		dom.window.document.getElementById('my').remove();
+		
+		let payload = await messages.popUntil(message => message[0] == 'unbind');
+		deepStrictEqual(payload, ['unbind', 'my']);
+		
+		live.disconnect();
+	});
+	
+	it('should handle replacements', async function () {
+		dom.window.document.body.innerHTML = '<div id="my"><p>Hello World</p></div>';
+		
+		const live = new Live(dom.window, webSocketServerURL);
+		
+		live.connect();
+		
+		const connected = new Promise(resolve => {
+			webSocketServer.on('connection', resolve);
 		});
 		
+		let socket = await connected;
+		
 		socket.send(
 			JSON.stringify(['replace', '#my p', '<p>Replaced!</p>', {reply: true}])
 		);
 		
-		await reply;
-		
+		await messages.popUntil(message => message[0] == 'reply');
 		strictEqual(dom.window.document.getElementById('my').innerHTML, '<p>Replaced!</p>');
 		
 		live.disconnect();
@@ -140,19 +222,11 @@ describe('Live', function () {
 			JSON.stringify(['update', 'my', '<div id="my"><p>Middle</p></div>'])
 		);
 		
-		const reply = new Promise((resolve, reject) => {
-			socket.on('message', message => {
-				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
-			});
-		});
-		
 		socket.send(
 			JSON.stringify(['prepend', '#my', '<p>Prepended!</p>', {reply: true}])
 		);
 		
-		await reply;
-		
+		await messages.popUntil(message => message[0] == 'reply');
 		strictEqual(dom.window.document.getElementById('my').innerHTML, '<p>Prepended!</p><p>Middle</p>');
 		
 		live.disconnect();
@@ -173,19 +247,11 @@ describe('Live', function () {
 			JSON.stringify(['update', 'my', '<div id="my"><p>Middle</p></div>'])
 		);
 		
-		const reply = new Promise((resolve, reject) => {
-			socket.on('message', message => {
-				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
-			});
-		});
-		
 		socket.send(
 			JSON.stringify(['append', '#my', '<p>Appended!</p>', {reply: true}])
 		);
 		
-		await reply;
-		
+		await messages.popUntil(message => message[0] == 'reply');
 		strictEqual(dom.window.document.getElementById('my').innerHTML, '<p>Middle</p><p>Appended!</p>');
 		
 		live.disconnect();
@@ -206,19 +272,11 @@ describe('Live', function () {
 			JSON.stringify(['update', 'my', '<div id="my"><p>Middle</p></div>'])
 		);
 		
-		const reply = new Promise((resolve, reject) => {
-			socket.on('message', message => {
-				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
-			});
-		});
-		
 		socket.send(
 			JSON.stringify(['remove', '#my p', {reply: true}])
 		);
 		
-		await reply;
-		
+		await messages.popUntil(message => message[0] == 'reply');
 		strictEqual(dom.window.document.getElementById('my').innerHTML, '');
 		
 		live.disconnect();
@@ -235,18 +293,11 @@ describe('Live', function () {
 		
 		let socket = await connected;
 		
-		const reply = new Promise((resolve, reject) => {
-			socket.on('message', message => {
-				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
-			});
-		});
-		
 		socket.send(
 			JSON.stringify(['dispatchEvent', '#my', 'click', {reply: true}])
 		);
 		
-		await reply;
+		await messages.popUntil(message => message[0] == 'reply');
 		
 		live.disconnect();
 	});
@@ -262,23 +313,15 @@ describe('Live', function () {
 		
 		let socket = await connected;
 		
-		const reply = new Promise((resolve, reject) => {
-			socket.on('message', message => {
-				let payload = JSON.parse(message);
-				if (payload.event) resolve(payload);
-			});
-		});
-		
 		dom.window.document.getElementById('my').addEventListener('click', event => {
 			live.forwardEvent('my', event);
 		});
 		
 		dom.window.document.getElementById('my').click();
 		
-		let payload = await reply;
-		
-		strictEqual(payload.id, 'my');
-		strictEqual(payload.event.type, 'click');
+		let payload = await messages.popUntil(message => message[0] == 'event');
+		strictEqual(payload[1], 'my');
+		strictEqual(payload[2].type, 'click');
 		
 		live.disconnect();
 	});

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lively
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Samuel Williams
@@ -37,36 +37,36 @@ cert_chain:
   Q2K9NVun/S785AP05vKkXZEFYxqG6EW012U4oLcFl5MySFajYXRYbuUpH6AY+HP8
   voD0MPg1DssDLKwXyt1eKD/+Fq0bFWhwVM/1XiAXL7lyYUyOq24KHgQ2Csg=
   -----END CERTIFICATE-----
-date: 2024-05-05 00:00:00.000000000 Z
+date: 2024-05-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: falcon
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '0.47'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '0.47'
 - !ruby/object:Gem::Dependency
   name: live
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.7.0
+        version: '0.8'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.7.0
+        version: '0.8'
 - !ruby/object:Gem::Dependency
   name: xrb
   requirement: !ruby/object:Gem::Requirement