lively 0.23.0 → 0.24.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02c1d603877c33f60d054f04e6d9ef68d5385b23d3f165b23520e2ea47eefa80
-  data.tar.gz: 6a48a1a8753f2a35adb4da6abb5527a7f95c2462903499f4a4b2ae968f0e0ebb
+  metadata.gz: 38b69265a34b5238872eb7b99d919dd4134b87beae41b567bc6623ad37780df2
+  data.tar.gz: ae5ff6d1ad55757801ca32f3f36437048a72e000317110db8473514ed85b3bf0
 SHA512:
-  metadata.gz: 63c191f0001969c89b0b8b7f0fcf6de08757b202a7d53423d6d2ddd91aa05eea34f8b66f4e2e7c9363546b6c1064afa35878904722bd19f9d82436c58f6f5c62
-  data.tar.gz: efd50bf88258523e7a95dbec278ec95a448ded6849ab77209cf6fc1158805dc0b0f06ed3228b0b616806ff8af2bc27124171eb56ff10d6f277d4143c78b8989a
+  metadata.gz: 0c7df91edb0e4f0db3a48dee5d7c7fb778dfaa2332ccb00ee036f24fd4d0d67db5706a629fbb8701667157c09e1df6503e316b3813742410b12e9f348d685fd8
+  data.tar.gz: eb0ecb1ec543d765c7ce561b026c430b3f08a22fbb7597b8b0d38f3a0f15ce8ee0cb847778e0352f975db46824be2db8d1bac54e0f0a8a2976cbf71cf6410f80

data/context/client-javascript-packages.md

@@ -0,0 +1,135 @@
+# Client JavaScript Packages
+
+This guide explains how to organize, test, and deploy client-side JavaScript packages in a Lively application.
+
+## Package Boundaries
+
+Small application entry points can live directly in `public/`. As client behavior grows, keeping reusable modules, their dependencies, and their tests in a workspace package gives that code an explicit boundary independent of the Ruby application.
+
+Lively uses `web-packages` to maintain three distinct layers:
+
+~~~ text
+components/                 # Authored JavaScript packages and their tests.
+node_modules/               # Package-manager installation.
+public/_components/         # Generated browser-facing projection.
+public/application.js       # Application entry point.
+~~~
+
+Only files in `components/` and `public/application.js` are authored directly. Treat `node_modules/` and `public/_components/` as generated output.
+
+## Create a Package
+
+For example, an application can place its presentation behavior in an internal package:
+
+~~~ text
+components/
+  presentation/
+    package.json
+    Presentation.js
+    test/
+      Presentation.js
+~~~
+
+Define the package entry point and test command in `components/presentation/package.json`:
+
+~~~ json
+{
+  "name": "@example/presentation",
+  "private": true,
+  "type": "module",
+  "exports": "./Presentation.js",
+  "scripts": {
+    "test": "node --test test/*.js"
+  }
+}
+~~~
+
+The package can use any browser-ready JavaScript modules. `web-packages` projects those modules for static delivery; it does not require a bundling or transpilation step.
+
+## Configure the Workspace
+
+Register internal packages as workspaces in the application's root `package.json`, then select the files and browser import names that should be deployed:
+
+~~~ json
+{
+  "private": true,
+  "workspaces": [
+    "components/*"
+  ],
+  "scripts": {
+    "test": "npm test --workspaces --if-present"
+  },
+  "web-packages": {
+    "packages": {
+      "@example/presentation": {
+        "include": [
+          "Presentation.js"
+        ],
+        "imports": {
+          "@example/presentation": "Presentation.js"
+        }
+      }
+    }
+  }
+}
+~~~
+
+Install dependencies and generate the browser-facing projection:
+
+~~~ bash
+$ bundle exec bake web:packages:install
+$ bundle exec bake web:packages:update
+~~~
+
+The package is now available at `/_components/@example/presentation/Presentation.js`.
+
+## Add the Package to a Page
+
+Lively pages expose JavaScript packages through an import map. A custom page can extend the default imports and load an application entry point:
+
+~~~ ruby
+class ApplicationPage < Lively::Page
+	IMPORTS = Lively::Pages::Index::IMPORTS.merge(
+		"@example/presentation" => "/_components/@example/presentation/Presentation.js"
+	).freeze
+	
+	def initialize(body:)
+		super(
+			title: "Presentation",
+			body: body,
+			imports: IMPORTS,
+			modules: ["/application.js"]
+		)
+	end
+end
+~~~
+
+The application entry point can then use the package by name:
+
+~~~ javascript
+import {Presentation} from '@example/presentation';
+
+const presentation = new Presentation(document);
+presentation.start();
+~~~
+
+Keep application startup and page-specific integration in `public/application.js`. Put reusable behavior in the package so it can be tested without starting the Ruby application.
+
+## Test and Verify Packages
+
+Run the workspace tests directly with the package manager:
+
+~~~ bash
+$ npm test
+~~~
+
+When generated packages are committed or deployed with the application, verify that they match the lock file and package configuration:
+
+~~~ bash
+$ bundle exec bake web:packages:install frozen=true
+$ bundle exec bake web:packages:check
+~~~
+
+The first command checks that dependency installation is reproducible. The second checks both the generated manifest and the contents of `public/_components`.
+
+For details about package selection, import maps, and alternative package managers, see the [Web Packages documentation](https://socketry.github.io/web-packages/).

data/context/index.yaml

@@ -3,6 +3,8 @@
 ---
 description: A simple client-server SPA framework.
 metadata:
+  bug_tracker_uri: https://github.com/socketry/lively/issues
+  changelog_uri: https://github.com/socketry/lively/blob/main/releases.md
   documentation_uri: https://socketry.github.io/lively/
   source_code_uri: https://github.com/socketry/lively.git
 files:
@@ -10,6 +12,10 @@ files:
   title: Getting Started
   description: This guide will help you get started with Lively, a framework for building
     real-time applications in Ruby.
+- path: client-javascript-packages.md
+  title: Client JavaScript Packages
+  description: This guide explains how to organize, test, and deploy client-side JavaScript
+    packages in a Lively application.
 - path: worms-tutorial.md
   title: Building a Worms Game with Lively
   description: This tutorial will guide you through creating a Worms-style game using

data/lib/lively/assets.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 # Released under the MIT License.
-# Copyright, 2021-2025, by Samuel Williams.
+# Copyright, 2021-2026, by Samuel Williams.
 
 require "uri"
 require "protocol/http/middleware"

data/lib/lively/environment/http.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 # Released under the MIT License.
-# Copyright, 2021-2026, by Samuel Williams.
+# Copyright, 2026, by Samuel Williams.
 
 require_relative "middleware"
 require "falcon/environment/server"

data/lib/lively/environment/middleware.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 # Released under the MIT License.
-# Copyright, 2021-2026, by Samuel Williams.
+# Copyright, 2026, by Samuel Williams.
 
 require_relative "../application"
 require_relative "../assets"

data/lib/lively/hello_world.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 # Released under the MIT License.
-# Copyright, 2024-2025, by Samuel Williams.
+# Copyright, 2024-2026, by Samuel Williams.
 
 # @namespace
 module Lively

data/lib/lively/version.rb

@@ -5,5 +5,5 @@
 
 # @namespace
 module Lively
-	VERSION = "0.23.0"
+	VERSION = "0.24.0"
 end

data/lib/lively.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 # Released under the MIT License.
-# Copyright, 2021-2024, by Samuel Williams.
+# Copyright, 2021-2026, by Samuel Williams.
 
 require_relative "lively/version"
 

data/public/_components/.manifest.json

@@ -0,0 +1,38 @@
+{
+  "format": 1,
+  "base": "/_components/",
+  "imports": {
+    "live": "/_components/@socketry/live/Live.js",
+    "live-audio": "/_components/@socketry/live-audio/Live/Audio.js",
+    "morphdom": "/_components/morphdom/morphdom-esm.js"
+  },
+  "packages": {
+    "@socketry/live": {
+      "version": "0.17.0",
+      "source": ".",
+      "files": {
+        "Live.js": "c036db246f9530240788b499c197d65356e81c9022bf927e260a267b7729f256"
+      }
+    },
+    "@socketry/live-audio": {
+      "version": "0.5.1",
+      "source": ".",
+      "files": {
+        "Live/Audio.js": "786d04e3fef1ae228bbf9784c013c63f6a77fad3ec97e38de4627b7b6fae5fc6",
+        "Live/Audio/Controller.js": "808e70ce652227cf2db50f7a4a86c328026d8bd2d2971ed4b9cbab47c139b587",
+        "Live/Audio/Library.js": "5c42c2f88c80241f03e791627934ce4f4a07094d1e36b1a5e01a56c5ac657498",
+        "Live/Audio/Output.js": "7d38b7a8fea6c3225ff854c8fcc671e783fbe95bcfb7edaae37886d430cd52e0",
+        "Live/Audio/Sound.js": "5b43b81409bee5dc4a4ee78bf70fcfcf84014e8f1c6237fa4978760be4ff4b83",
+        "Live/Audio/Visualizer.js": "9d0fd06fb3d9dca70e3e1a29445ec34dc1818d0132f50b358450c44953a60a22"
+      }
+    },
+    "morphdom": {
+      "version": "2.7.8",
+      "source": "dist",
+      "files": {
+        "morphdom-esm.js": "b5ecceffde9493a3e5f6d1ca80277f580a1146ca3b3e0091cb3c398d6b2754b3"
+      }
+    }
+  },
+  "digest": "fdddf14f8aab179ed60bceeb4767c45132426324d05eb94301936397ca78e402"
+}

data/public/_components/morphdom/morphdom-esm.js

@@ -266,6 +266,11 @@ var specialElHandlers = {
                 if (nodeName === 'OPTGROUP') {
                     optgroup = curChild;
                     curChild = optgroup.firstChild;
+                    // handle empty optgroups
+                    if (!curChild) {
+                        curChild = optgroup.nextSibling;
+                        optgroup = null;
+                    }
                 } else {
                     if (nodeName === 'OPTION') {
                         if (curChild.hasAttribute('selected')) {
@@ -308,10 +313,19 @@ function morphdomFactory(morphAttrs) {
     }
 
     if (typeof toNode === 'string') {
-      if (fromNode.nodeName === '#document' || fromNode.nodeName === 'HTML' || fromNode.nodeName === 'BODY') {
+      if (fromNode.nodeName === '#document' || fromNode.nodeName === 'HTML') {
         var toNodeHtml = toNode;
         toNode = doc.createElement('html');
         toNode.innerHTML = toNodeHtml;
+      } else if (fromNode.nodeName === 'BODY') {
+        var toNodeBody = toNode;
+        toNode = doc.createElement('html');
+        toNode.innerHTML = toNodeBody;
+        // Extract the body element from the created HTML structure
+        var bodyElement = toNode.querySelector('body');
+        if (bodyElement) {
+          toNode = bodyElement;
+        }
       } else {
         toNode = toElement(toNode);
       }
@@ -491,8 +505,16 @@ function morphdomFactory(morphAttrs) {
 
       if (!childrenOnly) {
         // optional
-        if (onBeforeElUpdated(fromEl, toEl) === false) {
+        var beforeUpdateResult = onBeforeElUpdated(fromEl, toEl);
+        if (beforeUpdateResult === false) {
           return;
+        } else if (beforeUpdateResult instanceof HTMLElement) {
+          fromEl = beforeUpdateResult;
+          // reindex the new fromEl in case it's not in the same
+          // tree as the original fromEl
+          // (Phoenix LiveView sometimes returns a cloned tree,
+          //  but keyed lookups would still point to the original tree)
+          indexTree(fromEl);
         }
 
         // update attributes on original DOM element first

data/readme.md

@@ -10,6 +10,8 @@ Please see the [project documentation](https://socketry.github.io/lively/) for m
 
   - [Getting Started](https://socketry.github.io/lively/guides/getting-started/index) - This guide will help you get started with Lively, a framework for building real-time applications in Ruby.
 
+  - [Client JavaScript Packages](https://socketry.github.io/lively/guides/client-javascript-packages/index) - This guide explains how to organize, test, and deploy client-side JavaScript packages in a Lively application.
+
   - [Building a Worms Game with Lively](https://socketry.github.io/lively/guides/worms-tutorial/index) - This tutorial will guide you through creating a Worms-style game using Lively, a Ruby framework for building real-time applications.
 
   - [Building a Flappy Bird Game with Live Views](https://socketry.github.io/lively/guides/flappy-bird-tutorial/index) - This tutorial will guide you through creating a complete Flappy Bird-style game using Live Views, a Ruby framework for building real-time interactive applications.
@@ -20,6 +22,10 @@ Please see the [project documentation](https://socketry.github.io/lively/) for m
 
 Please see the [project releases](https://socketry.github.io/lively/releases/index) for all releases.
 
+### v0.24.0
+
+  - [Web Packages](https://socketry.github.io/lively/releases/index#web-packages)
+
 ### v0.18.0
 
   - Add support for HTTY.
@@ -57,10 +63,6 @@ Please see the [project releases](https://socketry.github.io/lively/releases/ind
 
   - Fixed guide rendering and test suite.
 
-### v0.13.1
-
-  - Tidied up gem dependencies.
-
 ## See Also
 
   - [live](https://github.com/socketry/live) — Provides client-server communication using websockets.
@@ -70,26 +72,26 @@ Please see the [project releases](https://socketry.github.io/lively/releases/ind
 
 We welcome contributions to this project.
 
-1.  Fork it.
+1.  Fork the repository.
 2.  Create your feature branch (`git checkout -b my-new-feature`).
-3.  Commit your changes (`git commit -am 'Add some feature'`).
+3.  Commit your changes (`git commit -am 'Add some feature.'`).
 4.  Push to the branch (`git push origin my-new-feature`).
-5.  Create new Pull Request.
+5.  Create a new pull request.
 
 ### Running Tests
 
 To run the test suite:
 
-``` shell
-bundle exec sus
+``` bash
+$ bundle exec sus
 ```
 
 ### Making Releases
 
 To make a new release:
 
-``` shell
-bundle exec bake gem:release:patch # or minor or major
+``` bash
+$ bundle exec bake gem:release:patch # or minor or major
 ```
 
 ### Developer Certificate of Origin

data/releases.md

@@ -1,5 +1,11 @@
 # Releases
 
+## v0.24.0
+
+### Web Packages
+
+Lively now uses `web-packages` v0.2 after the project was renamed from `bake-node`. Client package configuration now uses the `web-packages` key, package projections are managed through the `web:packages` Bake namespace, and the unchanged projection manifest is now stored as `.manifest.json`.
+
 ## v0.18.0
 
   - Add support for HTTY.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lively
 version: !ruby/object:Gem::Version
-  version: 0.23.0
+  version: 0.24.0
 platform: ruby
 authors:
 - Samuel Williams
@@ -136,6 +136,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '0.19'
+- !ruby/object:Gem::Dependency
+  name: web-packages
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
 - !ruby/object:Gem::Dependency
   name: xrb
   requirement: !ruby/object:Gem::Requirement
@@ -156,6 +170,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - bin/lively
+- context/client-javascript-packages.md
 - context/flappy-bird-tutorial.md
 - context/game-audio-tutorial.md
 - context/getting-started.md
@@ -176,22 +191,15 @@ files:
 - lib/lively/router.rb
 - lib/lively/version.rb
 - license.md
+- public/_components/.manifest.json
 - public/_components/@socketry/live-audio/Live/Audio.js
 - public/_components/@socketry/live-audio/Live/Audio/Controller.js
 - public/_components/@socketry/live-audio/Live/Audio/Library.js
 - public/_components/@socketry/live-audio/Live/Audio/Output.js
 - public/_components/@socketry/live-audio/Live/Audio/Sound.js
 - public/_components/@socketry/live-audio/Live/Audio/Visualizer.js
-- public/_components/@socketry/live-audio/package.json
-- public/_components/@socketry/live-audio/readme.md
 - public/_components/@socketry/live/Live.js
-- public/_components/@socketry/live/package.json
-- public/_components/@socketry/live/readme.md
 - public/_components/morphdom/morphdom-esm.js
-- public/_components/morphdom/morphdom-factory.js
-- 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
@@ -203,6 +211,8 @@ homepage: https://github.com/socketry/lively
 licenses:
 - MIT
 metadata:
+  bug_tracker_uri: https://github.com/socketry/lively/issues
+  changelog_uri: https://github.com/socketry/lively/blob/main/releases.md
   documentation_uri: https://socketry.github.io/lively/
   source_code_uri: https://github.com/socketry/lively.git
 rdoc_options: []

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

@@ -1,39 +0,0 @@
-{
-  "name": "@socketry/live",
-  "type": "module",
-  "version": "0.17.0",
-  "description": "Live HTML tags for Ruby.",
-  "main": "Live.js",
-  "exports": {
-    ".": "./Live.js"
-  },
-  "files": [
-    "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"
-}