lively 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2eb71ca34e43090f3b06b4577cc5c29ed82d3282df6fb26c69adb02cc5eff5fe
-  data.tar.gz: 7df1288ae0defc42656da59f5a12e92f3619adc9993e54a4b5e55ac7d10cd795
+  metadata.gz: 1fe993ef2758a622d5da68c03094ea040678f62618b26bd8f888ab6127366300
+  data.tar.gz: 4919d6e2ec9fd70f2388d838a98740a6f911875ee233e3d351e55e59f426fa46
 SHA512:
-  metadata.gz: dafdbe14c26702f71de2bc519ac398d141ffc2d1b7f2d1b94f32c44602ea9efc6c083282268f48c7d08798269947322d13bc7005d664b02863fb7bf4f041f031
-  data.tar.gz: d65fd9f4c15cd6992c67bf2ffb1ee21d4d86d15643b71e092f38f55386f438bea86e1aa1b0a535a1c0fbd48836e6ec99e77575e751eec513f7c74f77d89064f5
+  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.4.0"
+	VERSION = "0.5.0"
 end

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

@@ -20,16 +20,21 @@ 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);
 						}
@@ -41,7 +46,9 @@ export class Live {
 					}
 					
 					for (let node of mutation.addedNodes) {
-						if (node.classList?.contains('live')) {
+						if (node.nodeType !== elementNodeType) continue;
+						
+						if (node.classList.contains('live')) {
 							this.bind(node);
 						}
 						
@@ -55,20 +62,26 @@ export class Live {
 		});
 		
 		this.observer.observe(this.document.body, {childList: true, subtree: true});
-		
-		this.attach();
 	}
 	
 	// -- 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();
 		};
 		
 		server.onmessage = (message) => {
@@ -84,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;
@@ -102,6 +120,11 @@ export class Live {
 			this.server = null;
 			server.close();
 		}
+		
+		if (this.reconnectTimer) {
+			clearTimeout(this.reconnectTimer);
+			this.reconnectTimer = null;
+		}
 	}
 	
 	send(message) {
@@ -109,7 +132,7 @@ export class Live {
 			try {
 				return this.server.send(message);
 			} catch (error) {
-				// Ignore.
+				// console.log("Live.send", "failed to send message to server", error);
 			}
 		}
 		
@@ -144,7 +167,9 @@ export class Live {
 	unbind(element) {
 		console.log("unbind", element.id, element.dataset);
 		
-		this.send(JSON.stringify(['unbind', element.id]));
+		if (this.server) {
+			this.send(JSON.stringify(['unbind', element.id]));
+		}
 	}
 	
 	attach() {

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

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

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

@@ -1,13 +1,52 @@
-import {describe, before, after, it} from 'node:test';
+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`;
@@ -18,13 +57,24 @@ describe('Live', function () {
 			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 () {
@@ -49,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 () {
@@ -79,18 +137,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[0] == '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>');
 		
@@ -108,21 +159,11 @@ describe('Live', function () {
 		
 		let socket = await connected;
 		
-		const reply = new Promise((resolve, reject) => {
-			socket.on('message', message => {
-				let payload = JSON.parse(message);
-				console.log("message", payload);
-				if (payload[0] == 'bind') resolve(payload);
-				else console.log("ignoring", payload);
-			});
-		});
-		
 		socket.send(
 			JSON.stringify(['update', 'my', '<div id="my"><div id="mychild" class="live"></div></div>'])
 		);
 		
-		let payload = await reply;
-		
+		let payload = await messages.popUntil(message => message[0] == 'bind');
 		deepStrictEqual(payload, ['bind', 'mychild', {}]);
 		
 		live.disconnect();
@@ -135,26 +176,9 @@ describe('Live', function () {
 		
 		live.connect();
 		
-		const connected = new Promise(resolve => {
-			webSocketServer.on('connection', resolve);
-		});
-		
-		let socket = await connected;
-		
-		const reply = new Promise((resolve, reject) => {
-			socket.on('message', message => {
-				let payload = JSON.parse(message);
-				if (payload[0] == 'unbind') resolve(payload);
-				else console.log("ignoring", payload);
-			});
-		});
-		
-		live.attach();
-		
 		dom.window.document.getElementById('my').remove();
 		
-		let payload = await reply;
-		
+		let payload = await messages.popUntil(message => message[0] == 'unbind');
 		deepStrictEqual(payload, ['unbind', 'my']);
 		
 		live.disconnect();
@@ -173,20 +197,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[0] == 'reply') resolve(payload);
-				else console.log("ignoring", payload);
-			});
-		});
-		
 		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();
@@ -207,20 +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[0] == 'reply') resolve(payload);
-				else console.log("ignoring", 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();
@@ -241,20 +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[0] == 'reply') resolve(payload);
-				else console.log("ignoring", 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();
@@ -275,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[0] == '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();
@@ -304,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[0] == 'reply') resolve(payload);
-			});
-		});
-		
 		socket.send(
 			JSON.stringify(['dispatchEvent', '#my', 'click', {reply: true}])
 		);
 		
-		await reply;
+		await messages.popUntil(message => message[0] == 'reply');
 		
 		live.disconnect();
 	});
@@ -331,21 +313,13 @@ describe('Live', function () {
 		
 		let socket = await connected;
 		
-		const reply = new Promise((resolve, reject) => {
-			socket.on('message', message => {
-				let payload = JSON.parse(message);
-				if (payload[0] == '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;
-		
+		let payload = await messages.popUntil(message => message[0] == 'event');
 		strictEqual(payload[1], 'my');
 		strictEqual(payload[2].type, 'click');
 		

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lively
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Samuel Williams
@@ -37,7 +37,7 @@ 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