lively 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 193f180461ac23de0fd1401f41e1c3b5c09b5d770326b7c9bab0958e7a3ad1f8
-  data.tar.gz: 716af747f77e13785c2753a0710282828dbfc4d436583fe9b4d53747eb5f2f19
+  metadata.gz: 2eb71ca34e43090f3b06b4577cc5c29ed82d3282df6fb26c69adb02cc5eff5fe
+  data.tar.gz: 7df1288ae0defc42656da59f5a12e92f3619adc9993e54a4b5e55ac7d10cd795
 SHA512:
-  metadata.gz: 38e46574582d3439c82f7d6241103ebaea644f8fd2df4e97e63b970952a8a1d7b5aea49556b9635d6dbb17890bf971ab869cabec023671d083c94f28a6cd0b62
-  data.tar.gz: 9178f2ceeae957d72d85d73590ed2a40edec2de72ba5545048a460bb37596adada9c81ef6844f6e443222e67d2ddc992abfda4fcbdfebfdae36e7fdd5d1535fb
+  metadata.gz: dafdbe14c26702f71de2bc519ac398d141ffc2d1b7f2d1b94f32c44602ea9efc6c083282268f48c7d08798269947322d13bc7005d664b02863fb7bf4f041f031
+  data.tar.gz: d65fd9f4c15cd6992c67bf2ffb1ee21d4d86d15643b71e092f38f55386f438bea86e1aa1b0a535a1c0fbd48836e6ec99e77575e751eec513f7c74f77d89064f5

data/lib/lively/version.rb

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

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

@@ -1,4 +1,3 @@
-
 import morphdom from 'morphdom';
 
 export class Live {
@@ -25,6 +24,39 @@ export class Live {
 		// Track visibility state and connect if required:
 		this.document.addEventListener("visibilitychange", () => this.handleVisibilityChange());
 		this.handleVisibilityChange();
+		
+		// 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.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.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});
+		
+		this.attach();
 	}
 	
 	// -- Connection Handling --
@@ -36,7 +68,7 @@ export class Live {
 		
 		server.onopen = () => {
 			this.failures = 0;
-			this.attach();
+			this.flush();
 		};
 		
 		server.onmessage = (message) => {
@@ -73,11 +105,15 @@ export class Live {
 	}
 	
 	send(message) {
-		try {
-			this.server.send(message);
-		} catch (error) {
-			this.events.push(message);
+		if (this.server) {
+			try {
+				return this.server.send(message);
+			} catch (error) {
+				// Ignore.
+			}
 		}
+		
+		this.events.push(message);
 	}
 	
 	flush() {
@@ -91,20 +127,6 @@ export class Live {
 		}
 	}
 	
-	bind(elements) {
-		for (var element of elements) {
-			this.send(JSON.stringify({bind: element.id, data: element.dataset}));
-		}
-	}
-	
-	bindElementsByClassName(selector = 'live') {
-		this.bind(
-			this.document.getElementsByClassName(selector)
-		);
-		
-		this.flush();
-	}
-	
 	handleVisibilityChange() {
 		if (this.document.hidden) {
 			this.disconnect();
@@ -113,11 +135,21 @@ export class Live {
 		}
 	}
 	
+	bind(element) {
+		console.log("bind", element.id, element.dataset);
+		
+		this.send(JSON.stringify(['bind', element.id, element.dataset]));
+	}
+	
+	unbind(element) {
+		console.log("unbind", element.id, element.dataset);
+		
+		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 +158,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 +225,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.10.0",
   "description": "Live HTML tags for Ruby.",
   "main": "Live.js",
   "repository": {

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

@@ -1,5 +1,5 @@
 import {describe, before, after, it} from 'node:test';
-import {ok, strict, strictEqual} from 'node:assert';
+import {ok, strict, strictEqual, deepStrictEqual} from 'node:assert';
 
 import {WebSocket} from 'ws';
 import {JSDOM} from 'jsdom';
@@ -13,8 +13,9 @@ describe('Live', function () {
 	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>');
@@ -81,7 +82,7 @@ describe('Live', function () {
 		const reply = new Promise((resolve, reject) => {
 			socket.on('message', message => {
 				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
+				if (payload[0] == 'reply') resolve(payload);
 			});
 		});
 		
@@ -96,7 +97,72 @@ describe('Live', function () {
 		live.disconnect();
 	});
 	
+	it('should handle updates with child live elements', async function () {
+		const live = new Live(dom.window, webSocketServerURL);
+		
+		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);
+				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;
+		
+		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();
+		
+		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;
+		
+		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();
@@ -110,7 +176,8 @@ describe('Live', function () {
 		const reply = new Promise((resolve, reject) => {
 			socket.on('message', message => {
 				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
+				if (payload[0] == 'reply') resolve(payload);
+				else console.log("ignoring", payload);
 			});
 		});
 		
@@ -143,7 +210,8 @@ describe('Live', function () {
 		const reply = new Promise((resolve, reject) => {
 			socket.on('message', message => {
 				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
+				if (payload[0] == 'reply') resolve(payload);
+				else console.log("ignoring", payload);
 			});
 		});
 		
@@ -176,7 +244,8 @@ describe('Live', function () {
 		const reply = new Promise((resolve, reject) => {
 			socket.on('message', message => {
 				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
+				if (payload[0] == 'reply') resolve(payload);
+				else console.log("ignoring", payload);
 			});
 		});
 		
@@ -209,7 +278,7 @@ describe('Live', function () {
 		const reply = new Promise((resolve, reject) => {
 			socket.on('message', message => {
 				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
+				if (payload[0] == 'reply') resolve(payload);
 			});
 		});
 		
@@ -238,7 +307,7 @@ describe('Live', function () {
 		const reply = new Promise((resolve, reject) => {
 			socket.on('message', message => {
 				let payload = JSON.parse(message);
-				if (payload.reply) resolve(payload);
+				if (payload[0] == 'reply') resolve(payload);
 			});
 		});
 		
@@ -265,7 +334,7 @@ describe('Live', function () {
 		const reply = new Promise((resolve, reject) => {
 			socket.on('message', message => {
 				let payload = JSON.parse(message);
-				if (payload.event) resolve(payload);
+				if (payload[0] == 'event') resolve(payload);
 			});
 		});
 		
@@ -277,8 +346,8 @@ describe('Live', function () {
 		
 		let payload = await reply;
 		
-		strictEqual(payload.id, 'my');
-		strictEqual(payload.event.type, 'click');
+		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.4.0
 platform: ruby
 authors:
 - Samuel Williams
@@ -43,30 +43,30 @@ dependencies:
   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