turbo_live 0.1.2 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b117e175ea920117e11f0cd6c3bab5cafc0ca7c1860fb6b890c632a37efe1509
-  data.tar.gz: ca56b1155834dbeb85a29112a2f85b0901dbf14d61909587f698f45cfc25bb34
+  metadata.gz: 973ebc91558a780fcdfc2e8dea4c6b1bc3d090678ee30535768e3b9d7ad1f9aa
+  data.tar.gz: 63e48c4f2b207557d9b111609a3dad42a10f70ea3719ea96a1477ed8f4e952fe
 SHA512:
-  metadata.gz: fce48eb8c3ae06f14fb6bb365004cf399c4f85d4f147776a7b05d6d7ec4b2833182fe6e4fd5d99781ef555daaad2d0bcd4b7b757378c645a7486138c2d356809
-  data.tar.gz: f0b1875a9143f5ca1ca218c05b1dbd3439ff7ebb13b8aabe9d72fcd58746fe41e8cde508f3a41f138ae3acfb25c66247594c1856397eaa89d2b9f6aaf170bea4
+  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
@@ -214,6 +228,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/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

@@ -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
@@ -22,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
@@ -52,27 +54,34 @@ 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, data)
       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_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
 
     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
@@ -28,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.2"
+  VERSION = "0.2.0"
 end

data/lib/turbo_live.rb

@@ -10,6 +10,11 @@ require_relative "../app/channels/components_channel" if defined?(ActionCable)
 module TurboLive
   class Error < StandardError; end
 
+  class SkipRender < StandardError; end
+
+  PROTOCOL_VERSION = "0.2.0"
+  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.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@radioactive-labs/turbo-live",
-      "version": "0.1.2",
+      "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.2",
+  "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,116 +1,98 @@
 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"]
 
   get component() {
     return this.componentValue
   }
 
   connect() {
-    console.log("TurboLiveController connected:", this.element.id, this.component)
-
-    this.intervals = []
-
-    this.#readEmbeddedData()
+    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})
+      `)
+    }
   }
 
-  disconnect() {
-    console.log("TurboLiveController disconnected")
-    this.#clearIntervals()
+  metaTargetConnected(target) {
+    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)
-    let data = { id: this.element.id, event: event, payload: payload, component: this.component }
+    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")
+      logger.debug("TurboLiveController dispatching via", this.element.id, "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);
-        });
+    } else {
+      logger.debug("TurboLiveController dispatching via", this.element.id, "http")
+      this.#dispatchHTTP(data)
     }
   }
 
   onClick(event) {
-    // event.preventDefault();
-    console.log("TurboLiveController onClick")
+    logger.debug("TurboLiveController onClick", this.element.id, event)
     this.#dispatchSimpleEvent("click", event)
   }
 
   onChange(event) {
-    // event.preventDefault();
-    console.log("TurboLiveController onChange")
+    logger.debug("TurboLiveController onChange", this.element.id, event)
     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)
-    })
+  onInput(event) {
+    logger.debug("TurboLiveController onInput", this.element.id, event)
+    this.#dispatchValueEvent("input", event)
   }
 
   #dispatchSimpleEvent(name, { params }) {
-    let live_event = params[name]
-    this.dispatch(name, [live_event])
+    logger.debug("TurboLiveController dispatchSimpleEvent", this.element.id, name, params)
+    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])
+    logger.debug("TurboLiveController dispatchValueEvent", this.element.id, name, params)
+    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 => {
+        logger.info('TurboLiveController dispatch success', this.element.id, turboStream)
+        if (turboStream) Turbo.renderStreamMessage(turboStream)
+      })
+      .catch((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.2
+  version: 0.2.0
 platform: ruby
 authors:
 - TheDumbTechGuy
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-10-13 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