turbo_live 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 374c0f738381bbb9e6b5537e995fedb58f3d6134e2a127d35ee1f9cf5dacc213
-  data.tar.gz: 1219f6ff5ebabfeecbd412a66f54d48744964ab67998137f3d5f1ea746c04e88
+  metadata.gz: b117e175ea920117e11f0cd6c3bab5cafc0ca7c1860fb6b890c632a37efe1509
+  data.tar.gz: ca56b1155834dbeb85a29112a2f85b0901dbf14d61909587f698f45cfc25bb34
 SHA512:
-  metadata.gz: '092dcf7715ef30e5d309c7e6332218098ac190985a4e58b4d26384c26803815bc2029066b4e93afcdf4039f24bdfc51fd8891ccde9add989296e5956d9786408'
-  data.tar.gz: b2bfaa08e8673940757d8673c66b7d2dba11cf5b857c8ea1e66b5e4f2de955e4bcead0ebb6de9db84a9fcb443c9d2e6ed7391fd5cb4a8dbd54945f60fee3aba4
+  metadata.gz: fce48eb8c3ae06f14fb6bb365004cf399c4f85d4f147776a7b05d6d7ec4b2833182fe6e4fd5d99781ef555daaad2d0bcd4b7b757378c645a7486138c2d356809
+  data.tar.gz: f0b1875a9143f5ca1ca218c05b1dbd3439ff7ebb13b8aabe9d72fcd58746fe41e8cde508f3a41f138ae3acfb25c66247594c1856397eaa89d2b9f6aaf170bea4

data/README.md

@@ -1,39 +1,230 @@
 # TurboLive
 
-TODO: Delete this and the text below, and describe your gem
-
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/turbo_live`. To experiment with that code, run `bin/console` for an interactive prompt.
+TurboLive is a Ruby gem that enables the creation of async, progressively enhanced, live components for Ruby applications. It works seamlessly over both WebSockets and HTTPS, providing real-time interactivity with graceful degradation.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Setup](#setup)
+- [Usage](#usage)
+  - [Creating a Component](#creating-a-component)
+  - [Model State](#model-state)
+  - [View](#view)
+  - [Update](#update)
+- [Events](#events)
+  - [Manual Events](#manual-events)
+  - [Timed Events](#timed-events)
+- [Examples](#examples)
+- [Performance Considerations](#performance-considerations)
+- [Testing](#testing)
+- [Troubleshooting](#troubleshooting)
+- [Contributing](#contributing)
+- [Changelog](#changelog)
+- [License](#license)
 
 ## Installation
 
-TODO: Replace `UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG` with your gem name right after releasing it to RubyGems.org. Please do not do it earlier due to security reasons. Alternatively, replace this section with instructions to install your gem from git if you don't plan to release to RubyGems.org.
+Add it to your project with:
+
+```console
+bundle add 'turbo_live'
+```
 
-Install the gem and add to the application's Gemfile by executing:
+Or install it yourself using:
 
-```bash
-bundle add UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+```console
+gem install turbo_live
 ```
 
-If bundler is not being used to manage dependencies, install the gem by executing:
+### JavaScript
+
+TurboLive ships a JavaScript component that comes as an npm package. You can pin it with importmaps or install it as an npm package depending on your asset pipeline:
+
+For importmaps:
 
-```bash
-gem install UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+```console
+bin/importmap pin @radioactive-labs/turbo-live
+```
+
+For npm:
+
+```console
+npm install @radioactive-labs/turbo-live
+```
+
+## Setup
+
+### Stimulus Controller
+
+TurboLive uses a Stimulus controller to manage interactions. In your `app/javascript/controllers/index.js`:
+
+```diff
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
++import * as turboLive from "@radioactive-labs/turbo-live"
+
+eagerLoadControllersFrom("controllers", application)
++turboLive.registerControllers(application)
+```
+
+### ActionCable (Optional)
+
+TurboLive supports WebSockets using ActionCable with automatic failover to HTTPS. If you have ActionCable set up and would like to benefit from better performance, you can set up the integration.
+
+In `app/javascript/channels/index.js`:
+
+```diff
++import consumer from "./consumer"
++import * as turboLive from "@radioactive-labs/turbo-live"
++
++turboLive.registerChannels(consumer)
+```
+
+Then in your `app/javascript/application.js`:
+
+```diff
+import "@hotwired/turbo-rails"
+import "controllers"
++import "channels"
 ```
 
 ## Usage
 
-TODO: Write usage instructions here
+A TurboLive component is a self-contained, interactive unit of a web application that can update in real-time without full page reloads. Components follow [The Elm Architecture](https://guide.elm-lang.org/architecture/) pattern.
+
+### Creating a Component
+
+To create a TurboLive component, inherit from `TurboLive::Component`:
+
+```ruby
+class MyComponent < TurboLive::Component
+  # Component logic goes here
+end
+```
+
+### Model State
+
+Define state variables using the `state` method:
+
+```ruby
+class MyComponent < TurboLive::Component
+  state :count, Integer do |value|
+    value || 0
+  end
+end
+```
+
+> Note: State variables can only be primitive objects and basic collections.
+
+### View
+
+Define the component's HTML structure in the `view` method:
 
-## Development
+```ruby
+def view
+  div do
+    button(**on(click: :increment)) { "+" }
+    span { count }
+    button(**on(click: :decrement)) { "-" }
+  end
+end
+```
+
+Components are [phlex](https://www.phlex.fun/) views, allowing you to write HTML in Ruby.
+
+### Update
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+Handle events in the `update` method:
+
+```ruby
+def update(input)
+  case input
+  in [:increment]
+    self.count += 1
+  in [:decrement]
+    self.count -= 1
+  end
+end
+```
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+## Events
+
+Events are transmitted to the server using the currently active transport (HTTP or WebSockets).
+
+### Manual Events
+
+Use the `on` method to set up manually triggered events:
+
+```ruby
+button(**on(click: :decrement)) { "-" }
+```
+
+You can also emit compound events that carry extra data:
+
+```ruby
+button(**on(click: [:change_value, 1])) { "+" }
+```
+
+> Note: Currently, only `:click` and `:change` events are supported.
+
+### Timed Events
+
+Use the `every` method to set up recurring events:
+
+```ruby
+def view
+  div do
+    h1 { countdown }
+    every(1000, :tick) if countdown > 0
+  end
+end
+```
+
+## Examples
+
+See the [/examples](/examples) folder in for detailed component examples including Counter, Countdown, Showcase and Tic-Tac-Toe components.
+
+## Performance Considerations
+
+- Use fine-grained components to minimize the amount of data transferred and rendered.
+- Implement debouncing for frequently triggered events.
+- Consider using background jobs for heavy computations to keep the UI responsive.
+
+## Testing
+
+TurboLive components can be tested using standard Rails testing tools. Here's a basic example:
+
+```ruby
+require "test_helper"
+
+class CounterComponentTest < ActiveSupport::TestCase
+  test "increments count" do
+    component = CounterComponent.new
+    assert_equal 0, component.count
+    component.update([:increment])
+    assert_equal 1, component.count
+  end
+end
+```
+
+## Troubleshooting
+
+Common issues and their solutions:
+
+1. **Component not updating**: Ensure that your `update` method is correctly handling the event and modifying the state.
+2. **WebSocket connection failing**: Check your ActionCable configuration and ensure that your server supports WebSocket connections.
+3. **JavaScript errors**: Make sure you've correctly set up the TurboLive JavaScript integration in your application.
+
+For more issues, please check our [FAQ](https://github.com/radioactive-labs/turbo_live/wiki/FAQ) or open an issue on GitHub.
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/turbo_live.
+We welcome contributions to TurboLive! Please see our [Contributing Guidelines](CONTRIBUTING.md) for more information on how to get started.
+
+## Changelog
+
+See the [CHANGELOG.md](CHANGELOG.md) file for details on each release.
 
 ## License
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/channels/components_channel.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module TurboLive
+  class ComponentsChannel < ActionCable::Channel::Base
+    def subscribed
+      stream_from stream_name
+    end
+
+    def receive(params)
+      stream = Renderer.render params
+      ActionCable.server.broadcast(stream_name, stream)
+    end
+
+    protected
+
+    def stream_name
+      @stream_name ||= "turbo_live-#{SecureRandom.hex}"
+    end
+  end
+end

data/app/controllers/turbo_live/components_controller.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module TurboLive
+  class ComponentsController < ActionController::API
+    def update
+      stream = Renderer.render params.to_unsafe_hash
+      render plain: stream
+    end
+  end
+end

data/config/routes.rb

@@ -0,0 +1,3 @@
+TurboLive::Engine.routes.draw do
+  post "" => "components#update"
+end

data/examples/countdown_component.rb

@@ -0,0 +1,23 @@
+class CountdownComponent < TurboLive::Component
+  state :countdown, Integer
+
+  def view
+    div do
+      if countdown.nil?
+        button(**on(click: :start)) { "Start!" }
+      else
+        h1 { countdown }
+        every(1000, :countdown) if countdown >= 1
+      end
+    end
+  end
+
+  def update(input)
+    case input
+    in [:countdown]
+      self.countdown -= 1
+    in [:start]
+      self.countdown = 1000
+    end
+  end
+end

data/examples/counter_component.rb

@@ -0,0 +1,26 @@
+class CounterComponent < TurboLive::Component
+  state :count, Integer do |value|
+    value || 0
+  end
+
+  def view
+    div do
+      button(**on(click: :increment)) { "+" }
+      span { " Clicked: #{count} " }
+      button(**on(click: :decrement)) { "-" }
+      plain " "
+      button(**on(click: :reset)) { "Reset" }
+    end
+  end
+
+  def update(input)
+    case input
+    in [:decrement]
+      self.count -= 1
+    in [:increment]
+      self.count += 1
+    in [:reset]
+      self.count = 0
+    end
+  end
+end

data/examples/showcase_component.rb

@@ -0,0 +1,41 @@
+class ShowcaseComponent < TurboLive::Component
+  state :component, Symbol
+
+  def view
+    div class: "container" do
+      div class: "left-column" do
+        h2 { "Components" }
+        ul do
+          li { button(**on(click: [:change_component, :counter])) { "Counter" } }
+          li { button(**on(click: [:change_component, :countdown])) { "Countdown" } }
+          li { button(**on(click: [:change_component, :tic_tac_toe])) { "TicTacToe" } }
+        end
+      end
+      div class: "right-column" do
+        div class: "card" do
+          render selected_component.new
+        end
+      end
+    end
+  end
+
+  def update(input)
+    case input
+    in [[:change_component, component]]
+      self.component = component
+    end
+  end
+
+  private
+
+  def selected_component
+    case component
+    when :countdown
+      CountdownComponent
+    when :tic_tac_toe
+      TicTacToeComponent
+    else
+      CounterComponent
+    end
+  end
+end

data/examples/tic_tac_toe_component.rb

@@ -0,0 +1,93 @@
+class TicTacToeComponent < TurboLive::Component
+  state :board, Array do |value|
+    value || Array.new(9, nil)
+  end
+
+  state :current_player, String do |value|
+    value || "X"
+  end
+
+  state :winner, String do |value|
+    value || nil
+  end
+
+  def view
+    div(class: "tic-tac-toe-container") do
+      render_board
+      render_status
+      render_reset_button
+    end
+  end
+
+  def render_board
+    div(class: "board") do
+      board.each_with_index do |cell, index|
+        button(
+          class: "cell",
+          **on(click: [:make_move, index]),
+          disabled: cell || winner,
+          "data-value": cell
+        ) { cell || "&nbsp;".html_safe }
+      end
+    end
+  end
+
+  def render_status
+    div(class: "status") do
+      if winner
+        "Winner: #{winner}"
+      elsif board.compact.length == 9
+        "It's a draw!"
+      else
+        "Current player: #{current_player}"
+      end
+    end
+  end
+
+  def render_reset_button
+    button(**on(click: :reset_game)) { "Reset Game" }
+  end
+
+  def update(input)
+    case input
+    in [[:make_move, index]]
+      make_move(index)
+    in [:reset_game]
+      reset_game
+    end
+  end
+
+  private
+
+  def make_move(index)
+    return if board[index] || winner
+
+    new_board = board.dup
+    new_board[index] = current_player
+    self.board = new_board
+    self.winner = check_winner
+    self.current_player = (current_player == "X") ? "O" : "X" unless winner
+  end
+
+  def check_winner
+    winning_combinations = [
+      [0, 1, 2], [3, 4, 5], [6, 7, 8], # Rows
+      [0, 3, 6], [1, 4, 7], [2, 5, 8], # Columns
+      [0, 4, 8], [2, 4, 6]             # Diagonals
+    ]
+
+    winning_combinations.each do |combo|
+      if board[combo[0]] && board[combo[0]] == board[combo[1]] && board[combo[0]] == board[combo[2]]
+        return board[combo[0]]
+      end
+    end
+
+    nil
+  end
+
+  def reset_game
+    self.board = Array.new(9, nil)
+    self.current_player = "X"
+    self.winner = nil
+  end
+end

data/lib/turbo_live/component.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+require "phlex"
+
+module TurboLive
+  class Component < Phlex::HTML
+    extend Literal::Properties
+
+    SUPPORTED_EVENTS = %i[click change].freeze
+
+    def self.state(name, type, **options, &block)
+      options = {reader: :public, writer: :protected}.merge(**options).compact
+      prop(name, _Nilable(type), **options, &block)
+    end
+
+    state :live_id, String, writer: nil do |value|
+      value || SecureRandom.hex
+    end
+
+    def view_template
+      div(
+        id: verifiable_live_id,
+        style: "display: contents;",
+        data_controller: "turbo-live",
+        data_turbo_live_component_value: to_verifiable(serialize)
+      ) do
+        view
+      end
+    end
+
+    def update(input)
+    end
+
+    def verifiable_live_id
+      to_verifiable(live_id)
+    end
+
+    protected
+
+    def on(**mappings)
+      actions = []
+      params = []
+      mappings.each do |event, param|
+        raise NotImplementedError, "TurboLive does not support '#{event}' events" unless SUPPORTED_EVENTS.include?(event)
+
+        actions << "#{event}->turbo-live#on#{event.capitalize}"
+        params << [:"data_turbo_live_#{event}_param", to_verifiable(param)]
+      end
+
+      data_action = actions.join(" ")
+      params.to_h.merge(data_action: data_action)
+    end
+
+    def every(milliseconds, event)
+      data = {milliseconds => to_verifiable(event)}.to_json
+      add_data :every, data
+    end
+
+    private
+
+    def add_data(type, value)
+      # Temporary hack to embed data.
+      # Switch to HTML templates
+      div(
+        class: "turbo-live-data",
+        data_turbo_live_id: verifiable_live_id,
+        data_turbo_live_data_type: type,
+        data_turbo_live_data_value: value,
+        style: "display: none;", display: :none
+      ) {}
+    end
+
+    def serialize
+      state = self.class.literal_properties.map do |prop|
+        [prop.name, instance_variable_get(:"@#{prop.name}")]
+      end.to_h
+
+      {klass: self.class.to_s, state: state}
+    end
+
+    def to_verifiable(value)
+      TurboLive.verifier.generate value
+    end
+  end
+end

data/lib/turbo_live/engine.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module TurboLive
+  class Engine < ::Rails::Engine
+    isolate_namespace TurboLive
+
+    initializer "turbo_live.verifier_key" do
+      config.after_initialize do
+        TurboLive.verifier_key = Rails.application.key_generator.generate_key("turbo_live/verifier_key")
+      end
+    end
+  end
+end

data/lib/turbo_live/renderer.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module TurboLive
+  class Renderer
+    class << self
+      def render(data)
+        data = data.symbolize_keys
+        # build the payload
+        payload = extract_payload(data)
+        # create the component
+        component = build_component(data)
+        # run the update function
+        component.update payload
+        # render the replace stream
+        <<~STREAM
+          <turbo-stream action="replace" target="#{data[:id]}">
+            <template>
+              #{component.call}
+            </template>
+          </turbo-stream>
+        STREAM
+      end
+
+      private
+
+      def extract_payload(data)
+        payload_event = from_verifiable(data[:payload][0])
+        if data[:payload].size == 2
+          [payload_event, data[:payload][1]]
+        else
+          [payload_event]
+        end
+      end
+
+      def build_component(data)
+        component_data = from_verifiable(data[:component])
+        component_klass = component_data[:klass].safe_constantize
+        # Ensure we have a correct class
+        unless component_klass.is_a?(Class) && component_klass < Component
+          raise ArgumentError, "[IMPORTANT!!!] Unexpected class: #{component_klass}"
+        end
+
+        component = component_klass.new(**component_data[:state])
+        # rudimentary checksum to ensure id matches
+        raise ArgumentError, "component ID mismatch" unless component.verifiable_live_id == data[:id]
+
+        component
+      end
+
+      def from_verifiable(verifiable)
+        TurboLive.verifier.verified verifiable
+      end
+    end
+  end
+end

data/lib/turbo_live/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TurboLive
-  VERSION = "0.1.0"
+  VERSION = "0.1.2"
 end

data/lib/turbo_live.rb

@@ -1,8 +1,24 @@
 # frozen_string_literal: true
 
 require_relative "turbo_live/version"
+require_relative "turbo_live/component"
+require_relative "turbo_live/renderer"
+
+require_relative "turbo_live/engine" if defined?(Rails)
+require_relative "../app/channels/components_channel" if defined?(ActionCable)
 
 module TurboLive
   class Error < StandardError; end
-  # Your code goes here...
+
+  class << self
+    attr_writer :verifier_key
+
+    def verifier
+      @verifier ||= ActiveSupport::MessageVerifier.new(verifier_key, digest: "SHA256", serializer: YAML)
+    end
+
+    def verifier_key
+      @verifier_key or raise ArgumentError, "Turbo requires a verifier_key"
+    end
+  end
 end

data/package-lock.json

@@ -0,0 +1,33 @@
+{
+  "name": "@radioactive-labs/turbo-live",
+  "version": "0.1.2",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@radioactive-labs/turbo-live",
+      "version": "0.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@hotwired/stimulus": "^3.2.2",
+        "@hotwired/turbo": "^8.0.4"
+      },
+      "devDependencies": {}
+    },
+    "node_modules/@hotwired/stimulus": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.2.tgz",
+      "integrity": "sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==",
+      "license": "MIT"
+    },
+    "node_modules/@hotwired/turbo": {
+      "version": "8.0.10",
+      "resolved": "https://registry.npmjs.org/@hotwired/turbo/-/turbo-8.0.10.tgz",
+      "integrity": "sha512-xen1YhNQirAHlA8vr/444XsTNITC1Il2l/Vx4w8hAWPpI5nQO78mVHNsmFuayETodzPwh25ob2TgfCEV/Loiog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    }
+  }
+}

data/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@radioactive-labs/turbo-live",
+  "version": "0.1.2",
+  "description": "Async, progressively enhanced, live components for Ruby applications that work over Websockets and HTTP.",
+  "type": "module",
+  "main": "src/js/core.js",
+  "files": [
+    "src/"
+  ],
+  "author": "Stefan Froelich (@thedumbtechguy)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/radioactive-labs/turbo_live/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/radioactive-labs/turbo_live.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/radioactive-labs/turbo_live#readme",
+  "dependencies": {
+    "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/turbo": "^8.0.4"
+  },
+  "devDependencies": {},
+  "scripts": {}
+}

data/src/.npmignore

@@ -0,0 +1 @@
+build/

data/src/js/channels/register_channels.js

@@ -0,0 +1,7 @@
+// Import controllers here
+import registerTurboLiveChannel from "./turbo_live_channel.js"
+
+export default function (consumer) {
+  // Register channels here
+  registerTurboLiveChannel(consumer)
+}

data/src/js/channels/turbo_live_channel.js

@@ -0,0 +1,31 @@
+export default function (consumer) {
+  consumer.subscriptions.create({ channel: "TurboLive::ComponentsChannel" }, {
+    // Called once when the subscription is created.
+    initialized() {
+      console.log("TurboLiveChannel initialized")
+    },
+
+    // Called when the subscription is ready for use on the server.
+    connected() {
+      console.log("TurboLiveChannel connected")
+      window.turboLive = this;
+    },
+
+    received(turbo_stream) {
+      console.log("TurboLiveChannel received", turbo_stream)
+      Turbo.renderStreamMessage(turbo_stream);
+    },
+
+    // Called when the WebSocket connection is closed.
+    disconnected() {
+      console.log("TurboLiveChannel disconnected")
+      window.turboLive = null;
+    },
+
+    // Called when the subscription is rejected by the server.
+    rejected() {
+      console.log("TurboLiveChannel rejected")
+      window.turboLive = null;
+    },
+  })
+}

data/src/js/controllers/register_controllers.js

@@ -0,0 +1,7 @@
+// Import controllers here
+import TurboLiveController from "./turbo_live_controller.js"
+
+export default function (application) {
+  // Register controllers here
+  application.register("turbo-live", TurboLiveController)
+}

data/src/js/controllers/turbo_live_controller.js

@@ -0,0 +1,116 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    id: String,
+    component: String,
+  }
+
+  get component() {
+    return this.componentValue
+  }
+
+  connect() {
+    console.log("TurboLiveController connected:", this.element.id, this.component)
+
+    this.intervals = []
+
+    this.#readEmbeddedData()
+  }
+
+  disconnect() {
+    console.log("TurboLiveController disconnected")
+    this.#clearIntervals()
+  }
+
+  dispatch(event, payload) {
+    console.log("TurboLiveController dispatch:", this.element.id, event, payload)
+    let data = { id: this.element.id, event: event, payload: payload, component: this.component }
+    if (window.turboLive) {
+      console.log("TurboLiveController dispatching via websockets")
+      window.turboLive.send(data)
+    }
+    else {
+      console.log("TurboLiveController dispatching via HTTP")
+
+      fetch('/turbo_live', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data)
+      })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`Network response was not OK`);
+          }
+          return response.text();
+        })
+        .then(turbo_stream => {
+          console.log('TurboLiveController dispatch success:', turbo_stream);
+          Turbo.renderStreamMessage(turbo_stream);
+        })
+        .catch((error) => {
+          console.error('TurboLiveController dispatch error:', error);
+        });
+    }
+  }
+
+  onClick(event) {
+    // event.preventDefault();
+    console.log("TurboLiveController onClick")
+    this.#dispatchSimpleEvent("click", event)
+  }
+
+  onChange(event) {
+    // event.preventDefault();
+    console.log("TurboLiveController onChange")
+    this.#dispatchValueEvent("change", event)
+  }
+
+  #readEmbeddedData() {
+    this.element.querySelectorAll(".turbo-live-data").forEach((element) => {
+      if (this.element.id != element.dataset.turboLiveId) return;
+
+      let type = element.dataset.turboLiveDataType
+      let value = JSON.parse(element.dataset.turboLiveDataValue)
+      switch (type) {
+        case "every":
+          this.#setupInterval(value)
+          break;
+      }
+    })
+  }
+
+  #setupInterval(intervalConfig) {
+    try {
+      for (let interval in intervalConfig) {
+        this.intervals.push(
+          setInterval(() => {
+            this.dispatch("every", [intervalConfig[interval]])
+          }, interval)
+        )
+      }
+    }
+    catch (e) {
+      console.error(e)
+    }
+  }
+
+  #clearIntervals() {
+    this.intervals.forEach((interval) => {
+      clearInterval(interval)
+    })
+  }
+
+  #dispatchSimpleEvent(name, { params }) {
+    let live_event = params[name]
+    this.dispatch(name, [live_event])
+  }
+
+  #dispatchValueEvent(name, { params, target }) {
+    let value = target.value
+    let live_event = params[name]
+    this.dispatch(name, [live_event, value])
+  }
+}

data/src/js/core.js

@@ -0,0 +1,5 @@
+import registerControllers from "./controllers/register_controllers.js"
+import registerChannels from "./channels/register_channels.js"
+
+
+export { registerControllers, registerChannels }

metadata

@@ -1,17 +1,45 @@
 --- !ruby/object:Gem::Specification
 name: turbo_live
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - TheDumbTechGuy
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-10-11 00:00:00.000000000 Z
-dependencies: []
-description: Stateless live components for Ruby applications that work over Websockets
-  and HTTP.
+date: 2024-10-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: phlex-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: literal
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Async, progressively enhanced, live components for Ruby applications
+  that work over Websockets and HTTP.
 email:
 - sfroelich01@gmail.com
 executables: []
@@ -24,9 +52,27 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- app/channels/components_channel.rb
+- app/controllers/turbo_live/components_controller.rb
+- config/routes.rb
+- examples/countdown_component.rb
+- examples/counter_component.rb
+- examples/showcase_component.rb
+- examples/tic_tac_toe_component.rb
 - lib/turbo_live.rb
+- lib/turbo_live/component.rb
+- lib/turbo_live/engine.rb
+- lib/turbo_live/renderer.rb
 - lib/turbo_live/version.rb
+- package-lock.json
+- package.json
 - sig/turbo_live.rbs
+- src/.npmignore
+- src/js/channels/register_channels.js
+- src/js/channels/turbo_live_channel.js
+- src/js/controllers/register_controllers.js
+- src/js/controllers/turbo_live_controller.js
+- src/js/core.js
 homepage: https://github.com/radioactive-labs/turbo_live
 licenses:
 - MIT
@@ -53,5 +99,5 @@ requirements: []
 rubygems_version: 3.5.16
 signing_key:
 specification_version: 4
-summary: Stateless live components for Ruby applications
+summary: Async, progressively enhanced, live components for Ruby applications
 test_files: []