turbo_live 0.1.3 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c9a249ff75e9eed862b6d2ab3402d5d867368b4d43e5e1f6679ac9bcabfb3eb
-  data.tar.gz: 9d77ef656d61442697be5fb9f060145193636f439e971dd62af36b019354dc22
+  metadata.gz: 973ebc91558a780fcdfc2e8dea4c6b1bc3d090678ee30535768e3b9d7ad1f9aa
+  data.tar.gz: 63e48c4f2b207557d9b111609a3dad42a10f70ea3719ea96a1477ed8f4e952fe
 SHA512:
-  metadata.gz: 6efe19e261f10de079be70b72404fc441d02e34cb795a8a6a632a3390d5afaeb603c2bf43754ade0fafda03013cf947d9bc284fd0b2945e25306e1a73cb66890
-  data.tar.gz: 4abda82e8d71fbcc3275cfec205d0ea4197c814710b7f12e5cae69a5e359455996e6eb207b0035be6e6ad8156aafc6797c854f33d4f25a93e22f9222e8913011
+  metadata.gz: f1118112757bfde64bbdd6417827ad56ea031ba950f2006a8151436f55101ca14543b991317d3825ecd143844417b2fafe84c2d6cccf7d408c9c14d213e18c1f
+  data.tar.gz: 7c1269811dd43b3a80188f9cafefc571c198c0eb9bd5adf9683353b7a67ef4ef915832a29bdf3fc1db710eeeb10a8ebca4b1829d4b05dacb7e2d05468891c01d

data/README.md

@@ -139,9 +139,9 @@ Handle events in the `update` method:
 ```ruby
 def update(input)
   case input
-  in [:increment]
+  in :increment
     self.count += 1
-  in [:decrement]
+  in :decrement
     self.count -= 1
   end
 end
@@ -165,7 +165,21 @@ You can also emit compound events that carry extra data:
 button(**on(click: [:change_value, 1])) { "+" }
 ```
 
-> Note: Currently, only `:click` and `:change` events are supported.
+Certain events carry extra data as well, such as `input` and `change` events.
+
+```ruby
+input(value:, input_value, **on(input: :input_changed))
+```
+
+```ruby
+def update(input)
+  case input
+  in [:input_changed, value]
+    self.input_value = value
+  end
+end
+
+> Note: Currently, only `:click`, `:input` and `:change` events are supported.
 
 ### Timed Events
 
@@ -201,7 +215,7 @@ class CounterComponentTest < ActiveSupport::TestCase
   test "increments count" do
     component = CounterComponent.new
     assert_equal 0, component.count
-    component.update([:increment])
+    component.update(:increment)
     assert_equal 1, component.count
   end
 end

data/examples/flappy_bird_component.rb

@@ -0,0 +1,143 @@
+class FlappyBirdComponent < TurboLive::Component
+  GRAVITY = 0.5
+  JUMP_STRENGTH = -10.0
+  GAME_HEIGHT = 400
+  GAME_WIDTH = 300
+  BIRD_SIZE = 20
+  OBSTACLE_WIDTH = 50
+  GAP_HEIGHT = 100
+  OBSTACLE_SPEED = 2
+
+  state :bird_y, Float do |value|
+    value || 150.0
+  end
+
+  state :bird_velocity, Float do |value|
+    value || 0.0
+  end
+
+  state :obstacles, Array do |value|
+    value || []
+  end
+
+  state :score, Integer do |value|
+    value || 0
+  end
+
+  state :game_over, _Boolean
+
+  state :nonce, Integer do |value|
+    value || 0
+  end
+
+  NONCES = {}
+
+  def initialize(...)
+    super
+    NONCES[live_id] ||= 0
+  end
+
+  def view
+    div(class: "flappy-bird-game") do
+      render_game
+      render_controls
+    end
+  end
+
+  def render_game
+    svg(viewBox: "0 0 #{GAME_WIDTH} #{GAME_HEIGHT}", width: GAME_WIDTH, height: GAME_HEIGHT) do |svg|
+      # Render bird
+      svg.circle(cx: 50, cy: bird_y, r: BIRD_SIZE / 2, fill: "yellow")
+
+      # Render obstacles
+      obstacles.each do |obstacle|
+        svg.rect(x: obstacle[:x], y: 0, width: OBSTACLE_WIDTH, height: obstacle[:top], fill: "green")
+        svg.rect(x: obstacle[:x], y: obstacle[:bottom], width: OBSTACLE_WIDTH, height: GAME_HEIGHT - obstacle[:bottom], fill: "green")
+      end
+
+      # Render score
+      svg.text(x: 10, y: 30, fill: "white", "font-size": "20px") { score.to_s }
+
+      # Render game over message
+      if game_over
+        svg.text(x: GAME_WIDTH / 2, y: GAME_HEIGHT / 2, fill: "red", "font-size": "30px", "text-anchor": "middle") { "Game Over" }
+      else
+        every(1000 / 30.0, :tick)
+      end
+    end
+  end
+
+  def render_controls
+    div(class: "controls") do
+      button(**on(click: :jump)) { "Jump / Restart" }
+    end
+  end
+
+  def update(input)
+    case input
+    in [:jump]
+      if game_over
+        reset_game
+      else
+        self.nonce = NONCES[live_id] = NONCES[live_id] + 1
+        self.bird_velocity = JUMP_STRENGTH
+      end
+    in [:tick]
+      norender! if nonce < NONCES[live_id]
+      update_game_state
+    end
+  end
+
+  private
+
+  def update_game_state
+    return if game_over
+
+    # Update bird position
+    self.bird_velocity += GRAVITY
+    self.bird_y += bird_velocity
+
+    # Add new obstacles
+    if obstacles.empty? || obstacles.last[:x] < GAME_WIDTH - 200
+      add_obstacle
+    end
+
+    # Update obstacle positions
+    self.obstacles = obstacles.map do |obstacle|
+      obstacle[:x] -= OBSTACLE_SPEED
+      obstacle
+    end.reject { |obstacle| obstacle[:x] < -OBSTACLE_WIDTH }
+
+    # Check collisions
+    check_collisions
+
+    # Update score
+    self.score += 1 if obstacles.any? { |obstacle| obstacle[:x] == 48 }  # Bird's x position is 50, width is 20
+  end
+
+  def add_obstacle
+    gap_start = rand(50..(GAME_HEIGHT - GAP_HEIGHT - 50))
+    obstacles << {x: GAME_WIDTH, top: gap_start, bottom: gap_start + GAP_HEIGHT}
+  end
+
+  def check_collisions
+    if bird_y < 0 || bird_y > GAME_HEIGHT
+      self.game_over = true
+    end
+
+    obstacles.each do |obstacle|
+      if (obstacle[:x] < 70 && obstacle[:x] > 30) &&
+          (bird_y < obstacle[:top] + BIRD_SIZE / 2 || bird_y > obstacle[:bottom] - BIRD_SIZE / 2)
+        self.game_over = true
+      end
+    end
+  end
+
+  def reset_game
+    self.bird_y = 150.0
+    self.bird_velocity = 0.0
+    self.obstacles = []
+    self.score = 0
+    self.game_over = false
+  end
+end

data/examples/showcase_component.rb

@@ -1,5 +1,7 @@
 class ShowcaseComponent < TurboLive::Component
-  state :component, Symbol
+  state :component, Symbol do |value|
+    value || :counter
+  end
 
   def view
     div class: "container" do
@@ -9,6 +11,7 @@ class ShowcaseComponent < TurboLive::Component
           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" } }
+          li { button(**on(click: [:change_component, :flappy_bird])) { "Flappy Bird" } }
         end
       end
       div class: "right-column" do
@@ -30,12 +33,14 @@ class ShowcaseComponent < TurboLive::Component
 
   def selected_component
     case component
+    when :counter
+      CounterComponent
     when :countdown
       CountdownComponent
     when :tic_tac_toe
       TicTacToeComponent
-    else
-      CounterComponent
+    when :flappy_bird
+      FlappyBirdComponent
     end
   end
 end

data/lib/turbo_live/component.rb

@@ -23,7 +23,8 @@ module TurboLive
         id: verifiable_live_id,
         style: "display: contents;",
         data_controller: "turbo-live",
-        data_turbo_live_component_value: to_verifiable(serialize)
+        data_turbo_live_component_value: to_verifiable(serialize),
+        data_turbo_live_protocol_version_value: TurboLive::PROTOCOL_VERSION
       ) do
         view
       end
@@ -67,12 +68,13 @@ module TurboLive
 
     private
 
-    def add_meta(type, value)
-      # TODO: turbo morph does some wonky things issues here since it doesn't force a replacement everytime
+    def add_meta(type, data)
       div(
-        data_turbo_live_meta_type: type,
-        data_turbo_live_meta_value: value,
+        data_controller: "turbo-live-meta-data",
         data_turbo_live_target: "meta",
+        data_turbo_live_meta_data_type_value: type,
+        data_turbo_live_meta_data_data_value: data,
+        data_action: "turbo:before-morph-element->turbo-live-meta-data#beforeMorph turbo:morph-element->turbo-live-meta-data#afterMorph",
         style: "display: none;", display: :none
       ) {}
     end

data/lib/turbo_live/renderer.rb

@@ -31,7 +31,7 @@ module TurboLive
         if data[:payload].size == 2
           [payload_event, data[:payload][1]]
         else
-          [payload_event]
+          payload_event
         end
       end
 

data/lib/turbo_live/version.rb

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

data/lib/turbo_live.rb

@@ -12,6 +12,7 @@ module TurboLive
 
   class SkipRender < StandardError; end
 
+  PROTOCOL_VERSION = "0.2.0"
   SKIP_RENDER = :skip_render
 
   class << self

data/package-lock.json

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/turbo-live",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "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/channels/turbo_live_channel.js

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

data/src/js/controllers/register_controllers.js

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

data/src/js/controllers/turbo_live_controller.js

@@ -1,9 +1,13 @@
 import { Controller } from "@hotwired/stimulus"
+import { logger } from "../logger.js"
+
+const SupportedProtocolVersion = "0.2.0"
 
 export default class extends Controller {
   static values = {
     id: String,
     component: String,
+    protocolVersion: String,
   }
   static targets = ["meta"]
 
@@ -11,101 +15,59 @@ export default class extends Controller {
     return this.componentValue
   }
 
-  initialize() {
-    this.metaTargetsMap = new WeakMap()
-    this.metaTargetsCount = 0
-    this.intervals = {}
-  }
-
   connect() {
-    console.log("TurboLiveController connected", this.element.id, this.component)
+    logger.log("TurboLiveController connect", this.element.id, this.protocolVersionValue)
+    if (SupportedProtocolVersion != this.protocolVersionValue) {
+      throw Error(`
+      Protocol version ${this.protocolVersionValue} is not supported
+            (supported version: ${SupportedProtocolVersion})
+      `)
+    }
   }
 
   metaTargetConnected(target) {
-    console.log("TurboLiveController metaTargetConnected", this.element.id, this.#metaTargetId(target))
-    this.#readMetadata(target)
-  }
-
-  metaTargetDisconnected(target) {
-    console.log("TurboLiveController metaTargetDisconnected", this.element.id, this.#metaTargetId(target))
-    this.#teardownInterval(this.#metaTargetId(target))
-  }
-
-  disconnect() {
-    console.log("TurboLiveController disconnected", this.element.id)
-    this.#cleanup()
+    logger.debug("TurboLiveController metaTargetConnected", this.element.id, target)
+    this.application
+      .getControllerForElementAndIdentifier(target, "turbo-live-meta-data")
+      .setComponent(this)
   }
 
   dispatch(event, payload) {
-    console.log("TurboLiveController dispatch", this.element.id, event, payload)
     const data = { id: this.element.id, event, payload, component: this.component }
+    logger.info("TurboLiveController dispatching", this.element.id, data)
 
     if (window.turboLive) {
-      console.log("TurboLiveController dispatching via websockets", this.element.id)
+      logger.debug("TurboLiveController dispatching via", this.element.id, "websockets")
       window.turboLive.send(data)
     } else {
-      console.log("TurboLiveController dispatching via HTTP", this.element.id)
+      logger.debug("TurboLiveController dispatching via", this.element.id, "http")
       this.#dispatchHTTP(data)
     }
   }
 
   onClick(event) {
-    console.log("TurboLiveController onClick", this.element.id)
+    logger.debug("TurboLiveController onClick", this.element.id, event)
     this.#dispatchSimpleEvent("click", event)
   }
 
   onChange(event) {
-    console.log("TurboLiveController onChange", this.element.id)
+    logger.debug("TurboLiveController onChange", this.element.id, event)
     this.#dispatchValueEvent("change", event)
   }
 
   onInput(event) {
-    console.log("TurboLiveController onInput", this.element.id)
+    logger.debug("TurboLiveController onInput", this.element.id, event)
     this.#dispatchValueEvent("input", event)
   }
 
-  #metaTargetId(target) {
-    if (!this.metaTargetsMap.has(target)) {
-      this.metaTargetsMap.set(target, ++this.metaTargetsCount)
-    }
-    return this.metaTargetsMap.get(target)
-  }
-
-  #readMetadata(element) {
-    const type = element.dataset.turboLiveMetaType
-    if (type === "interval") {
-      this.#setupInterval(element)
-    }
-  }
-
-  #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)
-    }
-  }
-
-  #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 }) {
+    logger.debug("TurboLiveController dispatchSimpleEvent", this.element.id, name, params)
     const liveEvent = params[name]
     this.dispatch(name, [liveEvent])
   }
 
   #dispatchValueEvent(name, { params, target }) {
+    logger.debug("TurboLiveController dispatchValueEvent", this.element.id, name, params)
     const value = target.value
     const liveEvent = params[name]
     this.dispatch(name, [liveEvent, value])
@@ -126,11 +88,11 @@ export default class extends Controller {
         return response.text()
       })
       .then(turboStream => {
-        console.log('TurboLiveController dispatch success', this.element.id, turboStream)
+        logger.info('TurboLiveController dispatch success', this.element.id, turboStream)
         if (turboStream) Turbo.renderStreamMessage(turboStream)
       })
       .catch((error) => {
-        console.error('TurboLiveController dispatch error', this.element.id, error)
+        logger.error('TurboLiveController dispatch error', this.element.id, error)
       })
   }
 }

data/src/js/controllers/turbo_live_meta_data_controller.js

@@ -0,0 +1,69 @@
+import { Controller } from "@hotwired/stimulus"
+import { logger } from "../logger.js"
+
+export default class extends Controller {
+  static values = {
+    type: String,
+    data: String,
+  }
+
+  connect() {
+    logger.debug("TurboLiveMetaDataController connected", this.typeValue, this.dataValue)
+    this.#setup(this.typeValue, this.dataValue)
+  }
+
+  disconnect() {
+    logger.debug("TurboLiveMetaDataController disconnected", this.typeValue, this.dataValue)
+    this.#teardown()
+    this.component = null
+  }
+
+  beforeMorph({ detail: { currentElement, newElement } }) {
+    logger.debug("TurboLiveMetaDataController beforeMorph", this.typeValue, this.dataValue)
+    if (currentElement.dataset.turboLiveMetaType != newElement.dataset.turboLiveMetaType ||
+      currentElement.dataset.turboLiveMetaValue != newElement.dataset.turboLiveMetaValue) {
+      logger.info("TurboLiveMetaDataController changed",
+        this.typeValue, this.dataValue,
+        newElement.dataset.turboLiveMetaDataTypeValue, newElement.dataset.turboLiveMetaDataDataValue)
+
+      this.changedDuringMorph = true
+      // teardown here since we still have our current state
+      this.#teardown()
+    }
+  }
+
+  afterMorph() {
+    logger.debug("TurboLiveMetaDataController afterMorph", this.typeValue, this.dataValue)
+    if (this.changedDuringMorph) {
+      this.#setup(this.typeValue, this.dataValue)
+      this.changedDuringMorph = false
+    }
+  }
+
+  setComponent(component) {
+    logger.debug("TurboLiveMetaDataController setComponent", this.typeValue, this.dataValue, component)
+    this.component = component
+  }
+
+  #setup(type, data) {
+    logger.debug("TurboLiveMetaDataController #setup", this.typeValue, this.dataValue, type, data)
+    if (type === "interval") {
+      this.#setupInterval(JSON.parse(data))
+    }
+  }
+
+  #teardown() {
+    logger.debug("TurboLiveMetaDataController #teardown", this.typeValue, this.dataValue)
+    if (this.interval) {
+      clearInterval(this.interval)
+      this.interval = null
+    }
+  }
+
+  #setupInterval(config) {
+    logger.debug("TurboLiveMetaDataController #setupInterval", this.typeValue, this.dataValue, config)
+    this.interval = setInterval(() => {
+      this.component.dispatch("interval", [config.event])
+    }, config.interval)
+  }
+}

data/src/js/core.js

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

data/src/js/logger.js

@@ -0,0 +1,57 @@
+export class Logger {
+    static LOG_LEVELS = {
+        OFF: -1,
+        ERROR: 0,
+        WARN: 1,
+        INFO: 2,
+        DEBUG: 3
+    };
+
+    constructor(level = Logger.LOG_LEVELS.OFF) {
+        this.setLevel(level)
+    }
+
+    setLevel(level) {
+        if (typeof level === 'string' && level in Logger.LOG_LEVELS) {
+            this.level = Logger.LOG_LEVELS[level];
+        } else if (typeof level === 'number' && (level === -1 || Object.values(Logger.LOG_LEVELS).includes(level))) {
+            this.level = level;
+        } else {
+            throw new Error('Invalid log level');
+        }
+    }
+
+    error(...args) {
+        if (this.level >= Logger.LOG_LEVELS.ERROR) console.error('[ERROR]', ...args);
+    }
+
+    warn(...args) {
+        if (this.level >= Logger.LOG_LEVELS.WARN) console.warn('[WARN]', ...args);
+    }
+
+    info(...args) {
+        if (this.level >= Logger.LOG_LEVELS.INFO) console.info('[INFO]', ...args);
+    }
+
+    debug(...args) {
+        if (this.level >= Logger.LOG_LEVELS.DEBUG) console.log('[DEBUG]', ...args);
+    }
+
+    log(...args) {
+        if (this.level > Logger.LOG_LEVELS.OFF) this.info(...args);
+    }
+}
+
+export const logger = new Logger();
+
+// Usage examples:
+// import { Logger, logger } from './logger.js';
+// 
+// logger.setLevel('DEBUG');
+// logger.debug('This is a debug message');
+// 
+// logger.setLevel(-1);
+// logger.error('This error will not be logged');
+// 
+// const customLogger = new Logger(Logger.LOG_LEVELS.OFF);
+// customLogger.error('This error will not be logged either');

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_live
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.2.0
 platform: ruby
 authors:
 - TheDumbTechGuy
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-10-15 00:00:00.000000000 Z
+date: 2024-10-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex-rails
@@ -57,6 +57,7 @@ files:
 - config/routes.rb
 - examples/countdown_component.rb
 - examples/counter_component.rb
+- examples/flappy_bird_component.rb
 - examples/showcase_component.rb
 - examples/tic_tac_toe_component.rb
 - lib/turbo_live.rb
@@ -72,7 +73,9 @@ files:
 - src/js/channels/turbo_live_channel.js
 - src/js/controllers/register_controllers.js
 - src/js/controllers/turbo_live_controller.js
+- src/js/controllers/turbo_live_meta_data_controller.js
 - src/js/core.js
+- src/js/logger.js
 homepage: https://github.com/radioactive-labs/turbo_live
 licenses:
 - MIT