turbo_live 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 374c0f738381bbb9e6b5537e995fedb58f3d6134e2a127d35ee1f9cf5dacc213
-  data.tar.gz: 1219f6ff5ebabfeecbd412a66f54d48744964ab67998137f3d5f1ea746c04e88
+  metadata.gz: be283fc00ae2733bc0459e7c394e48b96359614de335b4d15cefec53a2134763
+  data.tar.gz: 7cc650231d0bc1537af64d27ebd748422b722a94be71108809d18024640472a8
 SHA512:
-  metadata.gz: '092dcf7715ef30e5d309c7e6332218098ac190985a4e58b4d26384c26803815bc2029066b4e93afcdf4039f24bdfc51fd8891ccde9add989296e5956d9786408'
-  data.tar.gz: b2bfaa08e8673940757d8673c66b7d2dba11cf5b857c8ea1e66b5e4f2de955e4bcead0ebb6de9db84a9fcb443c9d2e6ed7391fd5cb4a8dbd54945f60fee3aba4
+  metadata.gz: de85e08541c5fb65b2ecace8785f3688fc3b121f01a4a73991e7f25a21f935f7f4584913ca5c9a54ce99700da247ec1850d5898722fb44bd926a878d4eb84e33
+  data.tar.gz: e0d1b93943354bbde2cb5e0654966bb0be5f27bcc68d54b2772440e67ff70697742554b9dd116146c4146dcb52b657f092856dd4512fd0d2bd6a1fe5f2f1e644

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/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.1"
 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.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@radioactive-labs/turbo-live",
+      "version": "0.1.1",
+      "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.1",
+  "description": "Stateless live components for Ruby applications",
+  "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,15 +1,43 @@
 --- !ruby/object:Gem::Specification
 name: turbo_live
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - TheDumbTechGuy
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-10-11 00:00:00.000000000 Z
-dependencies: []
+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: Stateless live components for Ruby applications that work over Websockets
   and HTTP.
 email:
@@ -24,9 +52,23 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- app/channels/components_channel.rb
+- app/controllers/turbo_live/components_controller.rb
+- config/routes.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