turbo_reflex 0.0.6 → 0.0.7

data/app/javascript/elements.js

@@ -1,55 +1,14 @@
-import LifecycleEvents from './lifecycle_events'
+import schema from './schema.js'
+import lifecycle from './lifecycle'
 
 function findClosestReflex (element) {
-  return element.closest('[data-turbo-reflex]')
+  return element.closest(`[${schema.reflexAttribute}]`)
 }
 
 function findClosestFrame (element) {
   return element.closest('turbo-frame')
 }
 
-function findFrameId (element) {
-  let id = element.dataset.turboFrame
-  if (!id) {
-    const frame = findClosestFrame(element)
-    if (frame) id = frame.id
-  }
-  if (!id) {
-    console.error(
-      `The reflex element does not specify a frame!`,
-      `Please move the reflex element inside a <turbo-frame> or set the 'data-turbo-frame' attribute.`,
-      element
-    )
-    LifecycleEvents.dispatch(LifecycleEvents.missingFrameId, element, {
-      element
-    })
-  }
-  return id
-}
-
-function findFrame (id) {
-  const frame = document.getElementById(id)
-  if (!frame) {
-    console.error(`The frame '${id}' does not exist!`)
-    LifecycleEvents.dispatch(LifecycleEvents.missingFrame, document, { id })
-  }
-  return frame
-}
-
-function findFrameSrc (frame) {
-  const frameSrc = frame.dataset.turboReflexSrc || frame.src
-  if (!frameSrc) {
-    console.error(
-      `The the 'src' for <turbo-frame id='${frame.id}'> is unknown!`,
-      `TurboReflex uses 'src' to (re)render frame content after the reflex is invoked.`,
-      `Please set the 'src' or 'data-turbo-reflex-src' attribute on the <turbo-frame> element.`,
-      frame
-    )
-    LifecycleEvents.dispatch(LifecycleEvents.missingFrameSrc, frame, { frame })
-  }
-  return frameSrc
-}
-
 function assignElementValueToPayload (element, payload = {}) {
   if (element.tagName.toLowerCase() !== 'select')
     return (payload.value = element.value)
@@ -64,8 +23,16 @@ function assignElementValueToPayload (element, payload = {}) {
 }
 
 function buildAttributePayload (element) {
+  // truncate long values to optimize payload size
+  // TODO: revisit this decision
+  const maxAttributeLength = 100
+  const maxValueLength = 500
+
   const payload = Array.from(element.attributes).reduce((memo, attr) => {
-    memo[attr.name] = attr.value
+    let value = attr.value
+    if (typeof value === 'string' && value.length > maxAttributeLength)
+      value = value.slice(0, maxAttributeLength) + '...'
+    memo[attr.name] = value
     return memo
   }, {})
 
@@ -74,14 +41,26 @@ function buildAttributePayload (element) {
   payload.disabled = element.disabled
   assignElementValueToPayload(element, payload)
 
+  if (
+    typeof payload.value === 'string' &&
+    payload.value.length > maxValueLength
+  )
+    payload.value = payload.value.slice(0, maxValueLength) + '...'
+
+  delete payload.class
+  delete payload[schema.reflexAttribute]
+  delete payload[schema.frameAttribute]
   return payload
 }
 
-export {
+export default {
+  buildAttributePayload,
   findClosestReflex,
   findClosestFrame,
-  findFrameId,
-  findFrame,
-  findFrameSrc,
-  buildAttributePayload
+  get metaElement () {
+    return document.getElementById('turbo-reflex')
+  },
+  get metaElementToken () {
+    return document.getElementById('turbo-reflex').getAttribute('content')
+  }
 }

data/app/javascript/index.js

@@ -0,0 +1,72 @@
+import './turbo'
+import schema from './schema.js'
+import activity from './activity'
+import delegates from './delegates'
+import drivers from './drivers'
+import elements from './elements'
+import lifecycle from './lifecycle'
+import logger from './logger'
+import urls from './urls'
+import uuids from './uuids'
+
+function invokeReflex (event) {
+  let element
+  let payload = {}
+
+  try {
+    element = elements.findClosestReflex(event.target)
+    if (!element) return
+    if (!delegates.isRegistered(event.type, element.tagName)) return
+
+    const driver = drivers.find(element)
+
+    // payload sent to server (also used for lifecycle event.detail)
+    payload = {
+      id: `reflex-${uuids.v4()}`,
+      name: element.dataset.turboReflex,
+      driver: driver.name,
+      src: driver.src,
+      frameId: driver.frame ? driver.frame.id : null,
+      elementId: element.id.length > 0 ? element.id : null,
+      elementAttributes: elements.buildAttributePayload(element),
+      startedAt: new Date().getTime()
+    }
+
+    activity.add(payload)
+    lifecycle.dispatch(lifecycle.events.start, element, payload)
+
+    if (driver.name !== 'form') event.preventDefault()
+
+    switch (driver.name) {
+      case 'form':
+        return driver.invokeReflex(element, payload)
+      case 'frame':
+        return driver.invokeReflex(driver.frame, payload)
+      case 'window':
+        return driver.invokeReflex(payload)
+    }
+  } catch (error) {
+    lifecycle.dispatch(lifecycle.events.clientError, element, {
+      error,
+      ...payload
+    })
+  }
+}
+
+// wire things up and setup defaults for event delegation
+delegates.handler = invokeReflex
+delegates.register('change', ['input', 'select', 'textarea'])
+delegates.register('submit', ['form'])
+delegates.register('click', ['*'])
+
+export default {
+  schema,
+  logger,
+  registerEventDelegate: delegates.register,
+  get eventDelegates () {
+    return { ...delegates.events }
+  },
+  get lifecycleEvents () {
+    return [...Object.values(lifecycle.events)]
+  }
+}

data/app/javascript/lifecycle.js

@@ -0,0 +1,40 @@
+import activity from './activity'
+
+const events = {
+  start: 'turbo-reflex:start',
+  success: 'turbo-reflex:success',
+  finish: 'turbo-reflex:finish',
+  abort: 'turbo-reflex:abort',
+  clientError: 'turbo-reflex:client-error',
+  serverError: 'turbo-reflex:server-error'
+}
+
+function dispatch (name, target = document, detail = {}, raise = false) {
+  try {
+    target = target || document
+    const event = new CustomEvent(name, {
+      detail,
+      cancelable: false,
+      bubbles: true
+    })
+    target.dispatchEvent(event)
+  } catch (error) {
+    if (raise) throw error
+    dispatch(events.clientError, target, { error, ...detail }, true)
+  }
+}
+
+function finish (event) {
+  event.detail.endedAt = new Date().getTime()
+  event.detail.milliseconds = event.detail.endedAt - event.detail.startedAt
+  setTimeout(() => dispatch(events.finish, event.target, event.detail), 10)
+}
+
+addEventListener(events.serverError, finish)
+addEventListener(events.success, finish)
+addEventListener(events.finish, event => activity.remove(event.detail.id), true)
+
+export default {
+  dispatch,
+  events
+}

data/app/javascript/logger.js

@@ -0,0 +1,34 @@
+import lifecycle from './lifecycle'
+
+let currentLevel = 'unknown'
+
+const logLevels = {
+  debug: Object.values(lifecycle.events),
+  info: Object.values(lifecycle.events),
+  warn: [
+    lifecycle.events.abort,
+    lifecycle.events.clientError,
+    lifecycle.events.serverError
+  ],
+  error: [lifecycle.events.clientError, lifecycle.events.serverError],
+  unknown: []
+}
+
+Object.values(lifecycle.events).forEach(name => {
+  addEventListener(name, event => {
+    if (logLevels[currentLevel].includes(event.type)) {
+      const level = currentLevel === 'debug' ? 'log' : currentLevel
+      console[level](event.type, event.detail)
+    }
+  })
+})
+
+export default {
+  get level () {
+    return currentLevel
+  },
+  set level (value) {
+    if (!Object.keys(logLevels).includes(value)) value = 'unknown'
+    return (currentLevel = value)
+  }
+}

data/app/javascript/schema.js

@@ -0,0 +1,6 @@
+const schema = {
+  frameAttribute: 'data-turbo-frame',
+  reflexAttribute: 'data-turbo-reflex'
+}
+
+export default { ...schema }

data/app/javascript/turbo.js

@@ -0,0 +1,24 @@
+import elements from './elements'
+
+const frameSources = {}
+
+// fires before making a turbo HTTP request
+addEventListener('turbo:before-fetch-request', event => {
+  const frame = event.target.closest('turbo-frame')
+  const { fetchOptions } = event.detail
+  fetchOptions.headers['TurboReflex-Token'] = elements.metaElementToken
+})
+
+// fires after receiving a turbo HTTP response
+addEventListener('turbo:before-fetch-response', event => {
+  const frame = event.target.closest('turbo-frame')
+  if (frame) frameSources[frame.id] = frame.src
+})
+
+// fires when a frame element is navigated and finishes loading
+addEventListener('turbo:frame-load', event => {
+  const frame = event.target.closest('turbo-frame')
+  frame.dataset.turboReflexSrc =
+    frameSources[frame.id] || frame.src || frame.dataset.turboReflexSrc
+  delete frameSources[frame.id]
+})

data/app/javascript/urls.js

@@ -0,0 +1,9 @@
+function build (urlString, payload = {}) {
+  const a = document.createElement('a')
+  a.href = urlString
+  const url = new URL(a)
+  url.searchParams.set('turbo_reflex', JSON.stringify(payload))
+  return url
+}
+
+export default { build }

data/app/javascript/uuids.js

@@ -0,0 +1,10 @@
+function v4 () {
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+    (
+      c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+    ).toString(16)
+  )
+}
+
+export default { v4 }

data/lib/turbo_reflex/base.rb

@@ -1,23 +1,77 @@
 # frozen_string_literal: true
 
+# Reflex instances have access to the following methods and properties.
+#
+# * controller ........ The Rails controller processing the HTTP request
+# * element ........... A struct that represents the DOM element that triggered the reflex
+# * hijack_response ... Hijacks the response, must be called last (halts further request handling by the controller)
+# * params ............ Reflex specific params (frame_id, element, etc.)
+# * render ............ Renders Rails templates, partials, etc. (doesn't halt controller request handling)
+# * renderer .......... An ActionController::Renderer
+# * turbo_stream ...... A Turbo Stream TagBuilder
+# * turbo_streams ..... A list of Turbo Streams to append to the response
+#
 class TurboReflex::Base
+  class << self
+    def response_hijackers
+      @response_hijackers ||= Set.new
+    end
+
+    def hijack_response(options = {})
+      response_hijackers << options.with_indifferent_access
+    end
+
+    def should_hijack_response?(reflex, method_name)
+      method_name = method_name.to_s
+      match = response_hijackers.find do |options|
+        only = options[:only] || []
+        only = [only] unless only.is_a?(Array)
+        only.map!(&:to_s)
+
+        except = options[:except] || []
+        except = [except] unless except.is_a?(Array)
+        except.map!(&:to_s)
+
+        options.blank? || only.include?(method_name) || except.exclude?(method_name)
+      end
+
+      return false if match.nil?
+
+      if match[:if].present?
+        case match[:if]
+        when Symbol then reflex.public_send(match[:if])
+        when Proc then reflex.instance_exec { match[:if].call reflex }
+        end
+      elsif match[:unless].present?
+        case match[:unless]
+        when Symbol then !reflex.public_send(match[:unless])
+        when Proc then !(reflex.instance_exec { match[:unless].call(reflex) })
+        end
+      else
+        true
+      end
+    end
+  end
+
   attr_reader :controller, :turbo_streams
 
   delegate :render, to: :renderer
+  delegate :hijack_response, :turbo_stream, to: :@runner
 
-  def initialize(controller)
-    @controller = controller
+  def initialize(runner)
+    @runner = runner
+    @controller = runner.controller
     @turbo_streams = Set.new
   end
 
   def params
-    controller.turbo_reflex_params
+    @runner.reflex_params
   end
 
   def element
     @element ||= begin
-      keys = params[:element].keys.map { |key| key.to_s.parameterize.underscore.to_sym }
-      values = params[:element].values
+      keys = params[:element_attributes].keys.map { |key| key.to_s.parameterize.underscore.to_sym }
+      values = params[:element_attributes].values
 
       unless keys.include? :value
         keys << :value
@@ -28,10 +82,6 @@ class TurboReflex::Base
     end
   end
 
-  def turbo_stream
-    @turbo_stream ||= Turbo::Streams::TagBuilder.new(controller.view_context)
-  end
-
   def renderer
     ActionController::Renderer.for controller.class, controller.request.env
   end

data/lib/turbo_reflex/engine.rb

@@ -2,23 +2,15 @@
 
 require "turbo-rails"
 require_relative "version"
-require_relative "errors"
 require_relative "sanitizer"
+require_relative "runner"
 require_relative "base"
 
 class TurboReflex::Engine < ::Rails::Engine
-  # isolate_namespace TurboReflex
-
   config.turbo_reflex = ActiveSupport::OrderedOptions.new
   initializer "turbo_reflex.configuration" do
     config.to_prepare do |app|
       ::ActionController::Base.send :include, TurboReflex::Controller
     end
-
-    config.after_initialize do |app|
-      app.routes.draw do
-        mount TurboReflex::Engine => "/turbo_reflex"
-      end
-    end
   end
 end

data/lib/turbo_reflex/runner.rb

@@ -0,0 +1,199 @@
+# frozen_string_literal: true
+
+class TurboReflex::Runner
+  attr_reader :controller
+
+  delegate_missing_to :controller
+
+  def initialize(controller)
+    @controller = controller
+  end
+
+  def meta_tag
+    masked_token = message_verifier.generate(new_token)
+    options = {
+      id: "turbo-reflex",
+      name: "turbo-reflex",
+      content: masked_token,
+      data: {busy: false}
+    }
+    view_context.tag("meta", options).html_safe
+  end
+
+  def reflex_requested?
+    reflex_params.present?
+  end
+
+  def reflex_valid?
+    return false unless reflex_requested?
+    return false unless valid_client_token?
+    return false unless reflex_instance.is_a?(TurboReflex::Base)
+    reflex_instance.respond_to? reflex_method_name
+  end
+
+  def reflex_params
+    return ActionController::Parameters.new if params[:turbo_reflex].nil?
+    @reflex_params ||= begin
+      payload = parsed_reflex_params.deep_transform_keys(&:underscore)
+      ActionController::Parameters.new(payload).permit!
+    end
+  end
+
+  def reflex_element
+    return nil if reflex_params.blank?
+    @reflex_element ||= Struct
+      .new(*reflex_params[:element_attributes].keys.map { |key| key.to_s.parameterize.underscore.to_sym })
+      .new(*reflex_params[:element_attributes].values)
+  end
+
+  def reflex_name
+    return nil unless reflex_requested?
+    reflex_params[:name]
+  end
+
+  def reflex_class_name
+    return nil unless reflex_requested?
+    reflex_name.split("#").first
+  end
+
+  def reflex_method_name
+    return nil unless reflex_requested?
+    reflex_name.split("#").last
+  end
+
+  def reflex_class
+    @reflex_class ||= reflex_class_name&.safe_constantize
+  end
+
+  def reflex_instance
+    @reflex_instance ||= reflex_class&.new(self)
+  end
+
+  def reflex_performed?
+    !!@reflex_performed
+  end
+
+  def reflex_errored?
+    !!@reflex_errored
+  end
+
+  def reflex_succeeded?
+    reflex_performed? && !reflex_errored?
+  end
+
+  def run
+    return unless reflex_valid?
+    return if reflex_performed?
+    @reflex_performed = true
+    reflex_instance.public_send reflex_method_name
+    hijack_response if reflex_class.should_hijack_response?(reflex_instance, reflex_method_name)
+  rescue => e
+    response.status = :internal_server_error
+    @reflex_errored = true
+    message = "Error in #{reflex_name}! #{e.inspect}"
+    Rails.logger.error message
+    append_error_event_to_response_body message
+  end
+
+  def hijack_response
+    response.set_header "TurboReflex-Hijacked", true
+    render html: "", layout: false
+    append_to_response
+  end
+
+  def append_to_response
+    append_turbo_streams_to_response_body
+    append_meta_tag_to_response_body
+    append_success_event_to_response_body
+  end
+
+  def turbo_stream
+    @turbo_stream ||= Turbo::Streams::TagBuilder.new(controller.view_context)
+  end
+
+  private
+
+  def parsed_reflex_params
+    @parsed_reflex_params ||= JSON.parse(params[:turbo_reflex])
+  end
+
+  def message_verifier
+    ActiveSupport::MessageVerifier.new session.id.to_s, digest: "SHA256"
+  end
+
+  def content_sanitizer
+    TurboReflex::Sanitizer.instance
+  end
+
+  def new_token
+    @new_token ||= SecureRandom.urlsafe_base64(32)
+  end
+
+  def server_token
+    session[:turbo_reflex_token]
+  end
+
+  def client_token
+    (request.headers["TurboReflex-Token"] || reflex_params[:token]).to_s
+  end
+
+  def valid_client_token?
+    return false unless client_token.present?
+    return false unless message_verifier.valid_message?(client_token)
+    unmasked_client_token = message_verifier.verify(client_token)
+    unmasked_client_token == server_token
+  end
+
+  def response_type
+    body = response.body.to_s.strip
+    return :body if body.match?(/<\/\s*body.*>/i)
+    return :frame if body.match?(/<\/\s*turbo-frame.*>/i)
+    return :stream if body.match?(/<\/\s*turbo-stream.*>/i)
+    :unknown
+  end
+
+  def append_turbo_streams_to_response_body
+    return unless reflex_succeeded?
+    return unless reflex_instance&.turbo_streams.present?
+    append_to_response_body reflex_instance.turbo_streams.map(&:to_s).join.html_safe
+  end
+
+  def append_meta_tag_to_response_body
+    session[:turbo_reflex_token] = new_token
+    append_to_response_body turbo_stream.replace("turbo-reflex", meta_tag)
+  end
+
+  def append_success_event_to_response_body
+    return unless reflex_succeeded?
+    args = ["turbo-reflex:success", {bubbles: true, cancelable: false, detail: parsed_reflex_params}]
+    event = if reflex_element.try(:id).present?
+      turbo_stream.invoke :dispatch_event, args: args, selector: "##{reflex_element.id}"
+    else
+      turbo_stream.invoke :dispatch_event, args: args
+    end
+    append_to_response_body event
+  end
+
+  def append_error_event_to_response_body(message)
+    return unless reflex_errored?
+    args = ["turbo-reflex:server-error", {bubbles: true, cancelable: false, detail: parsed_reflex_params.merge(error: message)}]
+    event = if reflex_element.try(:id).present?
+      turbo_stream.invoke :dispatch_event, args: args, selector: "##{reflex_element.id}"
+    else
+      turbo_stream.invoke :dispatch_event, args: args
+    end
+    append_to_response_body event
+  end
+
+  def append_to_response_body(content)
+    sanitized_content = content_sanitizer.sanitize(content).html_safe
+
+    return if sanitized_content.blank?
+
+    case response_type
+    when :body then response.body.sub!(/<\/\s*body.*>/i, "#{sanitized_content}</body>")
+    when :frame then response.body.sub!(/<\/\s*turbo-frame.*>/i, "#{sanitized_content}</turbo-frame>")
+    else response.body << sanitized_content
+    end
+  end
+end

data/lib/turbo_reflex/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TurboReflex
-  VERSION = "0.0.6"
+  VERSION = "0.0.7"
 end

data/package.json

@@ -1,13 +1,14 @@
 {
   "name": "turbo_reflex",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Reflexes for Turbo Frames that help you build robust reactive applications",
-  "main": "app/javascript/turbo_reflex.js",
+  "main": "app/javascript/index.js",
   "repository": "https://github.com/hopsoft/turbo_reflex",
   "author": "Nate Hopkins (hopsoft) <natehop@gmail.com>",
   "license": "MIT",
   "peerDependencies": {
-    "@hotwired/turbo-rails": ">= 7.1"
+    "@hotwired/turbo-rails": ">= 7.1",
+    "turbo_ready": ">= 0.1"
   },
   "devDependencies": {
     "esbuild": "^0.15.7",
@@ -17,6 +18,6 @@
     "rustywind": "^0.15.1"
   },
   "scripts": {
-    "build": "esbuild app/javascript/turbo_reflex.js --bundle --minify --sourcemap --format=esm --outfile=app/assets/builds/turbo_reflex.js"
+    "build": "esbuild app/javascript/index.js --bundle --minify --sourcemap --format=esm --outfile=app/assets/builds/turbo_reflex.js"
   }
 }

data/turbo_reflex.gemspec

@@ -20,6 +20,7 @@ Gem::Specification.new do |s|
 
   s.add_dependency "rails", ">= 6.1"
   s.add_dependency "turbo-rails", ">= 1.1"
+  s.add_dependency "turbo_ready", ">= 0.1"
 
   s.add_development_dependency "capybara"
   s.add_development_dependency "cuprite"