turbo_live 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b117e175ea920117e11f0cd6c3bab5cafc0ca7c1860fb6b890c632a37efe1509
-  data.tar.gz: ca56b1155834dbeb85a29112a2f85b0901dbf14d61909587f698f45cfc25bb34
+  metadata.gz: 5c9a249ff75e9eed862b6d2ab3402d5d867368b4d43e5e1f6679ac9bcabfb3eb
+  data.tar.gz: 9d77ef656d61442697be5fb9f060145193636f439e971dd62af36b019354dc22
 SHA512:
-  metadata.gz: fce48eb8c3ae06f14fb6bb365004cf399c4f85d4f147776a7b05d6d7ec4b2833182fe6e4fd5d99781ef555daaad2d0bcd4b7b757378c645a7486138c2d356809
-  data.tar.gz: f0b1875a9143f5ca1ca218c05b1dbd3439ff7ebb13b8aabe9d72fcd58746fe41e8cde508f3a41f138ae3acfb25c66247594c1856397eaa89d2b9f6aaf170bea4
+  metadata.gz: 6efe19e261f10de079be70b72404fc441d02e34cb795a8a6a632a3390d5afaeb603c2bf43754ade0fafda03013cf947d9bc284fd0b2945e25306e1a73cb66890
+  data.tar.gz: 4abda82e8d71fbcc3275cfec205d0ea4197c814710b7f12e5cae69a5e359455996e6eb207b0035be6e6ad8156aafc6797c854f33d4f25a93e22f9222e8913011

data/README.md

@@ -214,6 +214,7 @@ 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.
+3. **My timed events won't go away**: Due to the use of morphing, there might be instances where your some meta attributes are not removed.
 
 For more issues, please check our [FAQ](https://github.com/radioactive-labs/turbo_live/wiki/FAQ) or open an issue on GitHub.
 

data/app/channels/components_channel.rb

@@ -7,8 +7,8 @@ module TurboLive
     end
 
     def receive(params)
-      stream = Renderer.render params
-      ActionCable.server.broadcast(stream_name, stream)
+      stream = Renderer.render params.symbolize_keys
+      ActionCable.server.broadcast(stream_name, stream) if stream
     end
 
     protected

data/app/controllers/turbo_live/components_controller.rb

@@ -4,7 +4,7 @@ module TurboLive
   class ComponentsController < ActionController::API
     def update
       stream = Renderer.render params.to_unsafe_hash
-      render plain: stream
+      render plain: stream if stream
     end
   end
 end

data/lib/turbo_live/component.rb

@@ -1,12 +1,13 @@
 # frozen_string_literal: true
 
 require "phlex"
+require "literal"
 
 module TurboLive
   class Component < Phlex::HTML
     extend Literal::Properties
 
-    SUPPORTED_EVENTS = %i[click change].freeze
+    SUPPORTED_EVENTS = %i[click change input].freeze
 
     def self.state(name, type, **options, &block)
       options = {reader: :public, writer: :protected}.merge(**options).compact
@@ -52,27 +53,33 @@ module TurboLive
     end
 
     def every(milliseconds, event)
-      data = {milliseconds => to_verifiable(event)}.to_json
-      add_data :every, data
+      data = {interval: milliseconds, event: to_verifiable(event)}.to_json
+      add_meta :interval, data
+    end
+
+    def norender
+      SKIP_RENDER
+    end
+
+    def norender!
+      raise SkipRender
     end
 
     private
 
-    def add_data(type, value)
-      # Temporary hack to embed data.
-      # Switch to HTML templates
+    def add_meta(type, value)
+      # TODO: turbo morph does some wonky things issues here since it doesn't force a replacement everytime
       div(
-        class: "turbo-live-data",
-        data_turbo_live_id: verifiable_live_id,
-        data_turbo_live_data_type: type,
-        data_turbo_live_data_value: value,
+        data_turbo_live_meta_type: type,
+        data_turbo_live_meta_value: value,
+        data_turbo_live_target: "meta",
         style: "display: none;", display: :none
       ) {}
     end
 
     def serialize
       state = self.class.literal_properties.map do |prop|
-        [prop.name, instance_variable_get(:"@#{prop.name}")]
+        [prop.name, public_send(prop.name)]
       end.to_h
 
       {klass: self.class.to_s, state: state}

data/lib/turbo_live/renderer.rb

@@ -4,21 +4,24 @@ 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
+        result = component.update payload
+        return if result == TurboLive::SKIP_RENDER
+
         # render the replace stream
         <<~STREAM
-          <turbo-stream action="replace" target="#{data[:id]}">
+          <turbo-stream action="replace" method="morph" target="#{data[:id]}">
             <template>
               #{component.call}
             </template>
           </turbo-stream>
         STREAM
+      rescue SkipRender
+        nil
       end
 
       private

data/lib/turbo_live/version.rb

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

data/lib/turbo_live.rb

@@ -10,6 +10,10 @@ require_relative "../app/channels/components_channel" if defined?(ActionCable)
 module TurboLive
   class Error < StandardError; end
 
+  class SkipRender < StandardError; end
+
+  SKIP_RENDER = :skip_render
+
   class << self
     attr_writer :verifier_key
 

data/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@radioactive-labs/turbo-live",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@radioactive-labs/turbo-live",
-      "version": "0.1.2",
+      "version": "0.1.3",
       "license": "MIT",
       "dependencies": {
         "@hotwired/stimulus": "^3.2.2",

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/turbo-live",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Async, progressively enhanced, live components for Ruby applications that work over Websockets and HTTP.",
   "type": "module",
   "main": "src/js/core.js",

data/src/js/controllers/turbo_live_controller.js

@@ -5,112 +5,132 @@ export default class extends Controller {
     id: String,
     component: String,
   }
+  static targets = ["meta"]
 
   get component() {
     return this.componentValue
   }
 
+  initialize() {
+    this.metaTargetsMap = new WeakMap()
+    this.metaTargetsCount = 0
+    this.intervals = {}
+  }
+
   connect() {
-    console.log("TurboLiveController connected:", this.element.id, this.component)
+    console.log("TurboLiveController connected", this.element.id, this.component)
+  }
 
-    this.intervals = []
+  metaTargetConnected(target) {
+    console.log("TurboLiveController metaTargetConnected", this.element.id, this.#metaTargetId(target))
+    this.#readMetadata(target)
+  }
 
-    this.#readEmbeddedData()
+  metaTargetDisconnected(target) {
+    console.log("TurboLiveController metaTargetDisconnected", this.element.id, this.#metaTargetId(target))
+    this.#teardownInterval(this.#metaTargetId(target))
   }
 
   disconnect() {
-    console.log("TurboLiveController disconnected")
-    this.#clearIntervals()
+    console.log("TurboLiveController disconnected", this.element.id)
+    this.#cleanup()
   }
 
   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 }
+    console.log("TurboLiveController dispatch", this.element.id, event, payload)
+    const data = { id: this.element.id, event, payload, component: this.component }
+
     if (window.turboLive) {
-      console.log("TurboLiveController dispatching via websockets")
+      console.log("TurboLiveController dispatching via websockets", this.element.id)
       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);
-        });
+    } else {
+      console.log("TurboLiveController dispatching via HTTP", this.element.id)
+      this.#dispatchHTTP(data)
     }
   }
 
   onClick(event) {
-    // event.preventDefault();
-    console.log("TurboLiveController onClick")
+    console.log("TurboLiveController onClick", this.element.id)
     this.#dispatchSimpleEvent("click", event)
   }
 
   onChange(event) {
-    // event.preventDefault();
-    console.log("TurboLiveController onChange")
+    console.log("TurboLiveController onChange", this.element.id)
     this.#dispatchValueEvent("change", event)
   }
 
-  #readEmbeddedData() {
-    this.element.querySelectorAll(".turbo-live-data").forEach((element) => {
-      if (this.element.id != element.dataset.turboLiveId) return;
+  onInput(event) {
+    console.log("TurboLiveController onInput", this.element.id)
+    this.#dispatchValueEvent("input", event)
+  }
 
-      let type = element.dataset.turboLiveDataType
-      let value = JSON.parse(element.dataset.turboLiveDataValue)
-      switch (type) {
-        case "every":
-          this.#setupInterval(value)
-          break;
-      }
-    })
+  #metaTargetId(target) {
+    if (!this.metaTargetsMap.has(target)) {
+      this.metaTargetsMap.set(target, ++this.metaTargetsCount)
+    }
+    return this.metaTargetsMap.get(target)
   }
 
-  #setupInterval(intervalConfig) {
-    try {
-      for (let interval in intervalConfig) {
-        this.intervals.push(
-          setInterval(() => {
-            this.dispatch("every", [intervalConfig[interval]])
-          }, interval)
-        )
-      }
+  #readMetadata(element) {
+    const type = element.dataset.turboLiveMetaType
+    if (type === "interval") {
+      this.#setupInterval(element)
     }
-    catch (e) {
+  }
+
+  #setupInterval(element) {
+    try {
+      const config = JSON.parse(element.dataset.turboLiveMetaValue)
+      this.intervals[this.#metaTargetId(element)] = setInterval(() => {
+        this.dispatch("interval", [config.event])
+      }, config.interval)
+    } catch (e) {
       console.error(e)
     }
   }
 
-  #clearIntervals() {
-    this.intervals.forEach((interval) => {
-      clearInterval(interval)
-    })
+  #teardownInterval(id) {
+    if (this.intervals[id]) {
+      clearInterval(this.intervals[id])
+      delete this.intervals[id]
+    }
+  }
+
+  #cleanup() {
+    Object.keys(this.intervals).forEach(this.#teardownInterval.bind(this))
   }
 
   #dispatchSimpleEvent(name, { params }) {
-    let live_event = params[name]
-    this.dispatch(name, [live_event])
+    const liveEvent = params[name]
+    this.dispatch(name, [liveEvent])
   }
 
   #dispatchValueEvent(name, { params, target }) {
-    let value = target.value
-    let live_event = params[name]
-    this.dispatch(name, [live_event, value])
+    const value = target.value
+    const liveEvent = params[name]
+    this.dispatch(name, [liveEvent, value])
+  }
+
+  #dispatchHTTP(data) {
+    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(turboStream => {
+        console.log('TurboLiveController dispatch success', this.element.id, turboStream)
+        if (turboStream) Turbo.renderStreamMessage(turboStream)
+      })
+      .catch((error) => {
+        console.error('TurboLiveController dispatch error', this.element.id, error)
+      })
   }
-}
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_live
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - TheDumbTechGuy
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-10-13 00:00:00.000000000 Z
+date: 2024-10-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex-rails