lively 0.2.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 25c5a24a2c298b43882809b4ef1f42e59ad1ab64a9bd4873351506c435e6fd07
-  data.tar.gz: c2defb6ca553cce597f0093f8b345f71d13f26b4d100b70593b8dab9aac9457d
+  metadata.gz: 2eb71ca34e43090f3b06b4577cc5c29ed82d3282df6fb26c69adb02cc5eff5fe
+  data.tar.gz: 7df1288ae0defc42656da59f5a12e92f3619adc9993e54a4b5e55ac7d10cd795
 SHA512:
-  metadata.gz: a5b2e54d74e5a7101eba9c8a8e6a6c81c2d43396e493267d4d6aad0531b05a0911ec939e6a5c64db59886aef539c6fd02435f56fdc203946db793c5e6ca5797e
-  data.tar.gz: 2ef972d3dd1154f6d69b3c31cf0ef8a520d85424fe1eb49716c5c35be28016eb0ecf7c1fd288cd4b26199d070bfdd8c1319b4cc2924f8b5113b43d7c26cde525
+  metadata.gz: dafdbe14c26702f71de2bc519ac398d141ffc2d1b7f2d1b94f32c44602ea9efc6c083282268f48c7d08798269947322d13bc7005d664b02863fb7bf4f041f031
+  data.tar.gz: d65fd9f4c15cd6992c67bf2ffb1ee21d4d86d15643b71e092f38f55386f438bea86e1aa1b0a535a1c0fbd48836e6ec99e77575e751eec513f7c74f77d89064f5

data/lib/lively/application.rb

@@ -1,24 +1,7 @@
 # frozen_string_literal: true
 
-# Copyright, 2021, by Samuel G. D. Williams. <http://www.codeotaku.com>
-# 
-# Permission is hereby granted, free of charge, to any person obtaining a copy
-# of this software and associated documentation files (the "Software"), to deal
-# in the Software without restriction, including without limitation the rights
-# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-# copies of the Software, and to permit persons to whom the Software is
-# furnished to do so, subject to the following conditions:
-# 
-# The above copyright notice and this permission notice shall be included in
-# all copies or substantial portions of the Software.
-# 
-# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-# THE SOFTWARE.
+# Released under the MIT License.
+# Copyright, 2021-2024, by Samuel Williams.
 
 require 'live'
 require 'async/websocket/adapters/http'

data/lib/lively/assets.rb

@@ -1,24 +1,7 @@
 # frozen_string_literal: true
 
-# Copyright, 2021, by Samuel G. D. Williams. <http://www.codeotaku.com>
-# 
-# Permission is hereby granted, free of charge, to any person obtaining a copy
-# of this software and associated documentation files (the "Software"), to deal
-# in the Software without restriction, including without limitation the rights
-# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-# copies of the Software, and to permit persons to whom the Software is
-# furnished to do so, subject to the following conditions:
-# 
-# The above copyright notice and this permission notice shall be included in
-# all copies or substantial portions of the Software.
-# 
-# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-# THE SOFTWARE.
+# Released under the MIT License.
+# Copyright, 2021-2024, by Samuel Williams.
 
 module Lively
 	class Assets < Protocol::HTTP::Middleware

data/lib/lively/environment/application.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+# Released under the MIT License.
+# Copyright, 2021-2024, by Samuel Williams.
+
+module Lively
+	module Environment
+		module Application
+			include Falcon::Environment::Server
+			
+			def application
+				if Object.const_defined?(:Application, false)
+					::Application
+				else
+					Console.warn(self, "No Application class defined, using default.")
+					::Lively::Application
+				end
+			end
+			
+			def middleware
+				::Protocol::HTTP::Middleware.build do |builder|
+					builder.use Lively::Assets, root: File.expand_path('public', self.root)
+					builder.use Lively::Assets, root: File.expand_path('../../../public', __dir__)
+					builder.use self.application
+				end
+			end
+		end
+	end
+end

data/lib/lively/pages/index.rb

@@ -1,5 +1,9 @@
+# frozen_string_literal: true
 
-require 'trenni/template'
+# Released under the MIT License.
+# Copyright, 2021-2024, by Samuel Williams.
+
+require 'xrb/template'
 
 module Lively
 	module Pages
@@ -8,8 +12,8 @@ module Lively
 				@title = title
 				@body = body
 				
-				path = File.expand_path("index.trenni", __dir__)
-				@template = Trenni::Template.load_file(path)
+				path = File.expand_path("index.xrb", __dir__)
+				@template = XRB::Template.load_file(path)
 			end
 			
 			attr :title

data/lib/lively/pages/{index.trenni → index.xrb}

@@ -10,10 +10,21 @@
 		<link rel="stylesheet" href="/_static/site.css" type="text/css" media="screen" />
 		<link rel="stylesheet" href="/_static/index.css" type="text/css" media="screen" />
 		
-		<script src="/_components/morphdom/morphdom-umd.js"></script>
-		<script src="/_components/@socketry/live/live.js"></script>
+		<script type="importmap">
+		{
+			"imports": {
+				"live": "/_components/@socketry/live/Live.js",
+				"morphdom": "/_components/morphdom/morphdom-esm.js"
+			}
+		}
+		</script>
+		
+		<script type="module">
+			import {Live} from 'live';
+			window.live = Live.start();
+		</script>
 	</head>
-
+	
 	<body>
 		#{self.body&.to_html || "No body specified!"}
 	</body>

data/lib/lively/version.rb

@@ -1,5 +1,8 @@
 # frozen_string_literal: true
 
+# Released under the MIT License.
+# Copyright, 2021-2024, by Samuel Williams.
+
 module Lively
-	VERSION = "0.2.1"
+	VERSION = "0.4.0"
 end

data/lib/lively.rb

@@ -1,28 +1,11 @@
 # frozen_string_literal: true
 
-# Copyright, 2021, by Samuel G. D. Williams. <http://www.codeotaku.com>
-# 
-# Permission is hereby granted, free of charge, to any person obtaining a copy
-# of this software and associated documentation files (the "Software"), to deal
-# in the Software without restriction, including without limitation the rights
-# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-# copies of the Software, and to permit persons to whom the Software is
-# furnished to do so, subject to the following conditions:
-# 
-# The above copyright notice and this permission notice shall be included in
-# all copies or substantial portions of the Software.
-# 
-# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-# THE SOFTWARE.
+# Released under the MIT License.
+# Copyright, 2021-2024, by Samuel Williams.
 
 require_relative 'lively/version'
 
 require_relative 'lively/assets'
 require_relative 'lively/application'
 
-require_relative 'lively/environments/application'
+require_relative 'lively/environment/application'

data/license.md

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright, 2021-2024, by Samuel Williams.  
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,246 @@
+import morphdom from 'morphdom';
+
+export class Live {
+	static start(options = {}) {
+		let window = options.window || globalThis;
+		let path = options.path || 'live'
+		let base = options.base || window.location.href;
+		
+		let url = new URL(path, base);
+		url.protocol = url.protocol.replace('http', 'ws');
+		
+		return new this(window, url);
+	}
+	
+	constructor(window, url) {
+		this.window = window;
+		this.document = window.document;
+		
+		this.url = url;
+		this.events = [];
+		
+		this.failures = 0;
+		
+		// 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 --
+	
+	connect() {
+		if (this.server) return this.server;
+		
+		let server = this.server = new this.window.WebSocket(this.url);
+		
+		server.onopen = () => {
+			this.failures = 0;
+			this.flush();
+		};
+		
+		server.onmessage = (message) => {
+			const [name, ..._arguments] = JSON.parse(message.data);
+			
+			this[name](..._arguments);
+		};
+		
+		// The remote end has disconnected:
+		server.addEventListener('error', () => {
+			this.failures += 1;
+		});
+		
+		server.addEventListener('close', () => {
+			// Explicit disconnect will clear `this.server`:
+			if (this.server) {
+				// 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.server = null;
+		});
+		
+		return server;
+	}
+	
+	disconnect() {
+		if (this.server) {
+			const server = this.server;
+			this.server = null;
+			server.close();
+		}
+	}
+	
+	send(message) {
+		if (this.server) {
+			try {
+				return this.server.send(message);
+			} catch (error) {
+				// Ignore.
+			}
+		}
+		
+		this.events.push(message);
+	}
+	
+	flush() {
+		if (this.events.length === 0) return;
+		
+		let events = this.events;
+		this.events = [];
+		
+		for (var event of events) {
+			this.send(event);
+		}
+	}
+	
+	handleVisibilityChange() {
+		if (this.document.hidden) {
+			this.disconnect();
+		} else {
+			this.connect();
+		}
+	}
+	
+	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() {
+		for (let node of this.document.getElementsByClassName('live')) {
+			this.bind(node);
+		}
+	}
+	
+	createDocumentFragment(html) {
+		return this.document.createRange().createContextualFragment(html);
+	}
+	
+	reply(options) {
+		if (options?.reply) {
+			this.send(JSON.stringify(['reply', options.reply]));
+		}
+	}
+	
+	// -- RPC Methods --
+	
+	update(id, html, options) {
+		let element = this.document.getElementById(id);
+		let fragment = this.createDocumentFragment(html);
+		
+		morphdom(element, fragment);
+		
+		this.reply(options);
+	}
+	
+	replace(selector, html, options) {
+		let elements = this.document.querySelectorAll(selector);
+		let fragment = this.createDocumentFragment(html);
+		
+		elements.forEach(element => morphdom(element, fragment.cloneNode(true)));
+		
+		this.reply(options);
+	}
+	
+	prepend(selector, html, options) {
+		let elements = this.document.querySelectorAll(selector);
+		let fragment = this.createDocumentFragment(html);
+		
+		elements.forEach(element => element.prepend(fragment.cloneNode(true)));
+		
+		this.reply(options);
+	}
+	
+	append(selector, html, options) {
+		let elements = this.document.querySelectorAll(selector);
+		let fragment = this.createDocumentFragment(html);
+		
+		elements.forEach(element => element.append(fragment.cloneNode(true)));
+		
+		this.reply(options);
+	}
+	
+	remove(selector, options) {
+		let elements = this.document.querySelectorAll(selector);
+		
+		elements.forEach(element => element.remove());
+		
+		this.reply(options);
+	}
+	
+	dispatchEvent(selector, type, options) {
+		let elements = this.document.querySelectorAll(selector);
+		
+		elements.forEach(element => element.dispatchEvent(
+			new this.window.CustomEvent(type, options)
+		));
+		
+		this.reply(options);
+	}
+	
+	// -- Event Handling --
+	
+	forward(id, event) {
+		this.connect();
+		
+		this.send(
+			JSON.stringify(['event', id, event])
+		);
+	}
+	
+	forwardEvent(id, event, detail) {
+		event.preventDefault();
+		
+		this.forward(id, {type: event.type, detail: detail});
+	}
+	
+	forwardFormEvent(id, event, detail) {
+		event.preventDefault();
+		
+		let form = event.form;
+		let formData = new FormData(form);
+		
+		this.forward(id, {type: event.type, detail: detail, formData: [...formData]});
+	}
+}

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

@@ -0,0 +1,33 @@
+{
+  "name": "@socketry/live",
+  "type": "module",
+  "version": "0.10.0",
+  "description": "Live HTML tags for Ruby.",
+  "main": "Live.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/socketry/live-js.git"
+  },
+  "scripts": {
+    "test": "node --test"
+  },
+  "devDependencies": {
+    "jsdom": "^24.0",
+    "ws": "^8.17"
+  },
+  "dependencies": {
+    "morphdom": "^2.7"
+  },
+  "keywords": [
+    "live",
+    "dynamic",
+    "html",
+    "ruby"
+  ],
+  "author": "Samuel Williams <samuel.williams@oriontransfer.co.nz> (http://www.codeotaku.com/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/socketry/live-js/issues"
+  },
+  "homepage": "https://github.com/socketry/live-js#readme"
+}

data/public/_components/@socketry/live/readme.md

@@ -0,0 +1,58 @@
+# Live (JavaScript)
+
+This is the JavaScript library for implementing the Ruby gem of the same name.
+
+## Document Manipulation
+
+### `live.update(id, html, options)`
+
+Updates the content of the element with the given `id` with the given `html`. The `options` parameter is optional and can be used to pass additional options to the update method.
+
+- `options.reply` - If truthy, the server will reply with `{reply: options.reply}`.
+
+### `live.replace(selector, html, options)`
+
+Replaces the element(s) selected by the given `selector` with the given `html`. The `options` parameter is optional and can be used to pass additional options to the replace method.
+
+- `options.reply` - If truthy, the server will reply with `{reply: options.reply}`.
+
+### `live.prepend(selector, html, options)`
+
+Prepends the given `html` to the element(s) selected by the given `selector`. The `options` parameter is optional and can be used to pass additional options to the prepend method.
+
+- `options.reply` - If truthy, the server will reply with `{reply: options.reply}`.
+
+### `live.append(selector, html, options)`
+
+Appends the given `html` to the element(s) selected by the given `selector`. The `options` parameter is optional and can be used to pass additional options to the append method.
+
+- `options.reply` - If truthy, the server will reply with `{reply: options.reply}`.
+
+### `live.remove(selector, options)`
+
+Removes the element(s) selected by the given `selector`. The `options` parameter is optional and can be used to pass additional options to the remove method.
+
+- `options.reply` - If truthy, the server will reply with `{reply: options.reply}`.
+
+### `live.dispatchEvent(selector, type, options)`
+
+Dispatches an event of the given `type` on the element(s) selected by the given `selector`. The `options` parameter is optional and can be used to pass additional options to the dispatchEvent method.
+
+- `options.detail` - The detail object to pass to the event.
+- `options.bubbles` - A boolean indicating whether the event should bubble up through the DOM.
+- `options.cancelable` - A boolean indicating whether the event can be canceled.
+- `options.composed` - A boolean indicating whether the event will trigger listeners outside of a shadow root.
+
+## Event Handling
+
+### `live.forward(id, event)`
+
+Connect and forward an event on the element with the given `id`. If the connection can't be established, the event will be buffered.
+
+### `live.forwardEvent(id, event, details)`
+
+Forward a HTML DOM event to the server. The `details` parameter is optional and can be used to pass additional details to the server.
+
+### `live.forwardFormEvent(id, event, details)`
+
+Forward an event which has form data to the server. The `details` parameter is optional and can be used to pass additional details to the server.