lively 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1fe993ef2758a622d5da68c03094ea040678f62618b26bd8f888ab6127366300
-  data.tar.gz: 4919d6e2ec9fd70f2388d838a98740a6f911875ee233e3d351e55e59f426fa46
+  metadata.gz: 5792cd3cb017762c79c0c8efcf99724db21dd444aa0e6e1f0c7f4f8e0e61774a
+  data.tar.gz: 0275c27630c5e0af1408771737e9fa87276ce3b6e2f06de788eaa9e45d60a6a5
 SHA512:
-  metadata.gz: 1b8e0c1657776e309f5e164f79ad66e345aac9a455ef604bf2c326dfef9ce06e2a8f8370cd6052706a825bbf159ce5e5f60ade6b3cfd5f651c38aa2ee3c15bc6
-  data.tar.gz: 2f2e3e3043956ae4ce65c5a82e82c62af462d1b750ef51d0aa4dc71c9ffc0f731ad80779517fe44263b5c9f57a1d187f84e2cb9d0a325c46855c799c9d404c3d
+  metadata.gz: 3c0f91c91d6d25d138aa78332cfb9c51d4f5793f5134c059bed8d1b6d1dd4b327a70f3d8e47106a49965534157d58913952b60f7508e903b461d3e15d48381bb
+  data.tar.gz: c4b7817e61109d157bb68c157e8c50590776db6c1eca1c4d7f65936339ba2d02da62f07dfc903cd939d8807231dc382e6b7f18702ef0096266b3bd458b25f4cd

data/bin/lively

@@ -0,0 +1,16 @@
+#!/usr/bin/env ruby
+
+require 'async/service'
+require_relative '../lib/lively/environment/application'
+
+ARGV.each do |path|
+	require(path)
+end
+
+configuration = Async::Service::Configuration.build do
+	service "lively" do
+		include Lively::Environment::Application
+	end	
+end
+
+Async::Service::Controller.run(configuration)

data/lib/lively/application.rb

@@ -4,12 +4,32 @@
 # Copyright, 2021-2024, by Samuel Williams.
 
 require 'live'
+require 'protocol/http/middleware'
 require 'async/websocket/adapters/http'
 
 require_relative 'pages/index'
+require_relative 'hello_world'
 
 module Lively
 	class Application < Protocol::HTTP::Middleware
+		def self.[](tag)
+			klass = Class.new(self)
+			
+			klass.define_singleton_method(:resolver) do
+				Live::Resolver.allow(tag)
+			end
+			
+			klass.define_method(:body) do
+				tag.new
+			end
+			
+			return klass
+		end
+		
+		def self.resolver
+			Live::Resolver.allow(HelloWorld)
+		end
+		
 		def initialize(delegate, resolver: self.class.resolver)
 			super(delegate)
 			
@@ -24,19 +44,23 @@ module Lively
 			self.class.name
 		end
 		
-		def body
-			"Hello World"
+		def body(...)
+			HelloWorld.new(...)
+		end
+		
+		def index(...)
+			Pages::Index.new(title: self.title, body: self.body(...))
 		end
 		
-		def index
-			Pages::Index.new(title: self.title, body: self.body)
+		def handle(request, ...)
+			return Protocol::HTTP::Response[200, [], [self.index(...).call]]
 		end
 		
 		def call(request)
 			if request.path == '/live'
 				return Async::WebSocket::Adapters::HTTP.open(request, &self.method(:live)) || Protocol::HTTP::Response[400]
 			else
-				return Protocol::HTTP::Response[200, [], [self.index.call]]
+				return handle(request)
 			end
 		end
 	end

data/lib/lively/environment/application.rb

@@ -3,13 +3,18 @@
 # Released under the MIT License.
 # Copyright, 2021-2024, by Samuel Williams.
 
+require_relative '../application'
+require_relative '../assets'
+
+require 'falcon/environment/server'
+
 module Lively
 	module Environment
 		module Application
 			include Falcon::Environment::Server
 			
 			def application
-				if Object.const_defined?(:Application, false)
+				if Object.const_defined?(:Application)
 					::Application
 				else
 					Console.warn(self, "No Application class defined, using default.")

data/lib/lively/hello_world.rb

@@ -0,0 +1,59 @@
+module Lively
+	class HelloWorld < Live::View
+		def initialize(...)
+			super
+			
+			@clock = nil
+		end
+		
+		def bind(page)
+			super
+			
+			@clock ||= Async do
+				while true
+					self.update!
+					
+					sleep 1
+				end
+			end
+		end
+		
+		def close
+			@clock&.stop
+			
+			super
+		end
+		
+		def render(builder)
+			builder.tag(:h1) do
+				builder.text("Hello, I'm Lively!")
+			end
+			
+			builder.tag(:p) do
+				builder.text("The time is #{Time.now}.")
+			end
+			
+			builder.tag(:p) do
+				builder.text(<<~TEXT)
+					Lively is a simple client-server SPA framework. It is designed to be easy to use and understand, while providing a solid foundation for building interactive web applications. Create an `application.rb` file and define your own `Application` class to get started.
+				TEXT
+			end
+			
+			builder.inline_tag(:pre) do
+				builder.text(<<~TEXT)
+					#!/usr/bin/env lively
+					
+					class Application < Lively::Application
+						def body
+							Lively::HelloWorld.new
+						end
+					end
+				TEXT
+			end
+			
+			builder.tag(:p) do
+				builder.text("Check the `examples/` directory for... you guessed it... more examples.")
+			end
+		end
+	end
+end

data/lib/lively/version.rb

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

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

@@ -1,6 +1,13 @@
 import morphdom from 'morphdom';
 
 export class Live {
+	#window;
+	#document;
+	#server;
+	#events;
+	#failures;
+	#reconnectTimer;
+	
 	static start(options = {}) {
 		let window = options.window || globalThis;
 		let path = options.path || 'live'
@@ -13,35 +20,37 @@ export class Live {
 	}
 	
 	constructor(window, url) {
-		this.window = window;
-		this.document = window.document;
+		this.#window = window;
+		this.#document = window.document;
 		
 		this.url = url;
-		this.events = [];
+		this.#server = null;
+		this.#events = [];
 		
-		this.failures = 0;
-		this.reconnectTimer = null;
+		this.#failures = 0;
+		this.#reconnectTimer = null;
 		
 		// Track visibility state and connect if required:
-		this.document.addEventListener("visibilitychange", () => this.handleVisibilityChange());
-		this.handleVisibilityChange();
+		this.#document.addEventListener("visibilitychange", () => this.#handleVisibilityChange());
+		
+		this.#handleVisibilityChange();
 		
-		const elementNodeType = this.window.Node.ELEMENT_NODE;
+		const elementNodeType = this.#window.Node.ELEMENT_NODE;
 		
 		// Create a MutationObserver to watch for removed nodes
-		this.observer = new this.window.MutationObserver((mutationsList, observer) => {
+		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);
+							this.#unbind(node);
 						}
 						
 						// Unbind any child nodes:
 						for (let child of node.getElementsByClassName('live')) {
-							this.unbind(child);
+							this.#unbind(child);
 						}
 					}
 					
@@ -49,65 +58,65 @@ export class Live {
 						if (node.nodeType !== elementNodeType) continue;
 						
 						if (node.classList.contains('live')) {
-							this.bind(node);
+							this.#bind(node);
 						}
 						
 						// Bind any child nodes:
 						for (let child of node.getElementsByClassName('live')) {
-							this.bind(child);
+							this.#bind(child);
 						}
 					}
 				}
 			}
 		});
 		
-		this.observer.observe(this.document.body, {childList: true, subtree: true});
+		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);
+		let server = this.#server = new this.#window.WebSocket(this.url);
 		
-		if (this.reconnectTimer) {
-			clearTimeout(this.reconnectTimer);
-			this.reconnectTimer = null;
+		if (this.#reconnectTimer) {
+			clearTimeout(this.#reconnectTimer);
+			this.#reconnectTimer = null;
 		}
 		
 		server.onopen = () => {
-			this.failures = 0;
-			this.flush();
-			this.attach();
+			this.#failures = 0;
+			this.#flush();
+			this.#attach();
 		};
 		
 		server.onmessage = (message) => {
-			const [name, ..._arguments] = JSON.parse(message.data);
+			const [name, ...args] = JSON.parse(message.data);
 			
-			this[name](..._arguments);
+			this[name](...args);
 		};
 		
 		// The remote end has disconnected:
 		server.addEventListener('error', () => {
-			this.failures += 1;
+			this.#failures += 1;
 		});
 		
 		server.addEventListener('close', () => {
-			// Explicit disconnect will clear `this.server`:
-			if (this.server && !this.reconnectTimer) {
+			// Explicit disconnect will clear `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);
-				this.reconnectTimer = setTimeout(() => {
-					this.reconnectTimer = null;
+				const delay = Math.max(100 * (this.#failures + 1) ** 2, 60000);
+				this.#reconnectTimer = setTimeout(() => {
+					this.#reconnectTimer = null;
 					this.connect();
 				}, delay);
 			}
 			
-			if (this.server === server) {
-				this.server = null;
+			if (this.#server === server) {
+				this.#server = null;
 			}
 		});
 		
@@ -115,133 +124,149 @@ export class Live {
 	}
 	
 	disconnect() {
-		if (this.server) {
-			const server = this.server;
-			this.server = null;
+		if (this.#server) {
+			const server = this.#server;
+			this.#server = null;
 			server.close();
 		}
 		
-		if (this.reconnectTimer) {
-			clearTimeout(this.reconnectTimer);
-			this.reconnectTimer = null;
+		if (this.#reconnectTimer) {
+			clearTimeout(this.#reconnectTimer);
+			this.#reconnectTimer = null;
 		}
 	}
 	
-	send(message) {
-		if (this.server) {
+	#send(message) {
+		if (this.#server) {
 			try {
-				return this.server.send(message);
+				return this.#server.send(message);
 			} catch (error) {
 				// console.log("Live.send", "failed to send message to server", error);
 			}
 		}
 		
-		this.events.push(message);
+		this.#events.push(message);
 	}
 	
-	flush() {
-		if (this.events.length === 0) return;
+	#flush() {
+		if (this.#events.length === 0) return;
 		
-		let events = this.events;
-		this.events = [];
+		let events = this.#events;
+		this.#events = [];
 		
 		for (var event of events) {
-			this.send(event);
+			this.#send(event);
 		}
 	}
 	
-	handleVisibilityChange() {
-		if (this.document.hidden) {
+	#handleVisibilityChange() {
+		if (this.#document.hidden) {
 			this.disconnect();
 		} else {
 			this.connect();
 		}
 	}
 	
-	bind(element) {
+	#bind(element) {
 		console.log("bind", element.id, element.dataset);
 		
-		this.send(JSON.stringify(['bind', element.id, element.dataset]));
+		this.#send(JSON.stringify(['bind', element.id, element.dataset]));
 	}
 	
-	unbind(element) {
+	#unbind(element) {
 		console.log("unbind", element.id, element.dataset);
 		
-		if (this.server) {
-			this.send(JSON.stringify(['unbind', element.id]));
+		if (this.#server) {
+			this.#send(JSON.stringify(['unbind', element.id]));
 		}
 	}
 	
-	attach() {
-		for (let node of this.document.getElementsByClassName('live')) {
-			this.bind(node);
+	#attach() {
+		for (let node of this.#document.getElementsByClassName('live')) {
+			this.#bind(node);
 		}
 	}
 	
-	createDocumentFragment(html) {
-		return this.document.createRange().createContextualFragment(html);
+	#createDocumentFragment(html) {
+		return this.#document.createRange().createContextualFragment(html);
 	}
 	
-	reply(options) {
+	#reply(options, ...args) {
 		if (options?.reply) {
-			this.send(JSON.stringify(['reply', options.reply]));
+			this.#send(JSON.stringify(['reply', options.reply, ...args]));
 		}
 	}
 	
 	// -- RPC Methods --
 	
+	script(id, code, options) {
+		let element = this.#document.getElementById(id);
+		
+		try {
+			let result = this.#window.Function(code).call(element);
+			
+			this.#reply(options, result);
+		} catch (error) {
+			this.#reply(options, null, {name: error.name, message: error.message, stack: error.stack});
+		}
+	}
+	
 	update(id, html, options) {
-		let element = this.document.getElementById(id);
-		let fragment = this.createDocumentFragment(html);
+		let element = this.#document.getElementById(id);
+		let fragment = this.#createDocumentFragment(html);
 		
 		morphdom(element, fragment);
 		
-		this.reply(options);
+		this.#reply(options);
 	}
 	
 	replace(selector, html, options) {
-		let elements = this.document.querySelectorAll(selector);
-		let fragment = this.createDocumentFragment(html);
+		let elements = this.#document.querySelectorAll(selector);
+		let fragment = this.#createDocumentFragment(html);
 		
 		elements.forEach(element => morphdom(element, fragment.cloneNode(true)));
 		
-		this.reply(options);
+		this.#reply(options);
 	}
 	
 	prepend(selector, html, options) {
-		let elements = this.document.querySelectorAll(selector);
-		let fragment = this.createDocumentFragment(html);
+		let elements = this.#document.querySelectorAll(selector);
+		let fragment = this.#createDocumentFragment(html);
 		
 		elements.forEach(element => element.prepend(fragment.cloneNode(true)));
 		
-		this.reply(options);
+		this.#reply(options);
 	}
 	
 	append(selector, html, options) {
-		let elements = this.document.querySelectorAll(selector);
-		let fragment = this.createDocumentFragment(html);
+		let elements = this.#document.querySelectorAll(selector);
+		let fragment = this.#createDocumentFragment(html);
 		
 		elements.forEach(element => element.append(fragment.cloneNode(true)));
 		
-		this.reply(options);
+		this.#reply(options);
 	}
 	
 	remove(selector, options) {
-		let elements = this.document.querySelectorAll(selector);
+		let elements = this.#document.querySelectorAll(selector);
 		
 		elements.forEach(element => element.remove());
 		
-		this.reply(options);
+		this.#reply(options);
 	}
 	
 	dispatchEvent(selector, type, options) {
-		let elements = this.document.querySelectorAll(selector);
+		let elements = this.#document.querySelectorAll(selector);
 		
 		elements.forEach(element => element.dispatchEvent(
-			new this.window.CustomEvent(type, options)
+			new this.#window.CustomEvent(type, options)
 		));
 		
-		this.reply(options);
+		this.#reply(options);
+	}
+	
+	error(message) {
+		console.error("Live.error", ...arguments);
 	}
 	
 	// -- Event Handling --
@@ -249,19 +274,19 @@ export class Live {
 	forward(id, event) {
 		this.connect();
 		
-		this.send(
+		this.#send(
 			JSON.stringify(['event', id, event])
 		);
 	}
 	
-	forwardEvent(id, event, detail) {
-		event.preventDefault();
+	forwardEvent(id, event, detail, preventDefault = false) {
+		if (preventDefault) event.preventDefault();
 		
 		this.forward(id, {type: event.type, detail: detail});
 	}
 	
-	forwardFormEvent(id, event, detail) {
-		event.preventDefault();
+	forwardFormEvent(id, event, detail, preventDefault = true) {
+		if (preventDefault) event.preventDefault();
 		
 		let form = event.form;
 		let formData = new FormData(form);

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

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

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

@@ -85,9 +85,9 @@ describe('Live', function () {
 		const live = Live.start({window: dom.window, base: 'http://localhost/'});
 		ok(live);
 		
-		strictEqual(live.window, dom.window);
-		strictEqual(live.document, dom.window.document);
 		strictEqual(live.url.href, 'ws://localhost/live');
+		
+		live.disconnect();
 	});
 	
 	it('should connect to the WebSocket server', function () {
@@ -102,26 +102,46 @@ describe('Live', function () {
 	it('should handle visibility changes', async function () {
 		const live = new Live(dom.window, webSocketServerURL);
 		
-		let hidden = false;
-		Object.defineProperty(dom.window.document, "hidden", {
-			get() {return hidden},
-		});
+		// It's tricky to test the method directly.
+		// - Changing document.hidden is a hack.
+		// - Sending custom events seems to cause a hang.
+		
+		live.connect();
+		deepStrictEqual(await messages.pop(), ['bind', 'my', {}]);
 		
-		// The document starts out hidden... we have defined a property to make it not hidden, let's propagate that change:
-		live.handleVisibilityChange();
+		live.disconnect();
 		
-		// We should receive a bind message for the live element:
+		live.connect()
 		deepStrictEqual(await messages.pop(), ['bind', 'my', {}]);
 		
-		hidden = true;
-		live.handleVisibilityChange();
-		ok(!live.server);
+		live.disconnect();
+	});
+	
+	it('can execute scripts', async function () {
+		const live = new Live(dom.window, webSocketServerURL);
 		
-		hidden = false;
-		live.handleVisibilityChange();
-		ok(live.server);
+		live.connect();
 		
-		deepStrictEqual(await messages.pop(), ['bind', 'my', {}]);
+		const connected = new Promise(resolve => {
+			webSocketServer.on('connection', resolve);
+		});
+		
+		let socket = await connected;
+		
+		socket.send(
+			JSON.stringify(['script', 'my', 'return 1+2', {reply: true}])
+		);
+		
+		let successReply = await messages.popUntil(message => message[0] == 'reply');
+		strictEqual(successReply[2], 3);
+		
+		socket.send(
+			JSON.stringify(['script', 'my', 'throw new Error("Test Error")', {reply: true}])
+		);
+		
+		let errorReply = await messages.popUntil(message => message[0] == 'reply');
+		strictEqual(errorReply[2], null);
+		console.log(errorReply);
 		
 		live.disconnect();
 	});
@@ -178,7 +198,10 @@ describe('Live', function () {
 		
 		dom.window.document.getElementById('my').remove();
 		
-		let payload = await messages.popUntil(message => message[0] == 'unbind');
+		let payload = await messages.popUntil(message => {
+			return message[0] == 'unbind' && message[1] == 'my';
+		});
+		
 		deepStrictEqual(payload, ['unbind', 'my']);
 		
 		live.disconnect();
@@ -325,4 +348,10 @@ describe('Live', function () {
 		
 		live.disconnect();
 	});
+	
+	it ('can log errors', function () {
+		const live = new Live(dom.window, webSocketServerURL);
+		
+		live.error('my', 'Test Error');
+	});
 });

data/public/_static/index.css

@@ -1 +1,5 @@
-/* Default Stylesheet */
+/*
+
+Create your own `public/static/index.css` to override the default stylesheet.
+
+*/

data/public/_static/site.css

@@ -1,6 +1,6 @@
 
 html {
-	font-family: Monaco, monospace;
+	font-family: Arial, sans-serif;
 	font-size: 16px;
 	
 	/* Fix odd text-size in `display: flex` elements on Safari iOS */

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lively
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Samuel Williams
@@ -59,14 +59,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.8'
+        version: '0.9'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.8'
+        version: '0.9'
 - !ruby/object:Gem::Dependency
   name: xrb
   requirement: !ruby/object:Gem::Requirement
@@ -83,14 +83,17 @@ dependencies:
         version: '0'
 description:
 email:
-executables: []
+executables:
+- lively
 extensions: []
 extra_rdoc_files: []
 files:
+- bin/lively
 - lib/lively.rb
 - lib/lively/application.rb
 - lib/lively/assets.rb
 - lib/lively/environment/application.rb
+- lib/lively/hello_world.rb
 - lib/lively/pages/index.rb
 - lib/lively/pages/index.xrb
 - lib/lively/version.rb
@@ -104,6 +107,7 @@ files:
 - public/_components/morphdom/morphdom-umd.js
 - public/_components/morphdom/morphdom-umd.min.js
 - public/_components/morphdom/morphdom.js
+- public/_static/Falcon.png
 - public/_static/icon.png
 - public/_static/index.css
 - public/_static/site.css