turbo_reflex 0.0.1 → 0.0.2

data/app/controllers/concerns/turbo_reflex/controller.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module TurboReflex::Controller
+  extend ActiveSupport::Concern
+
+  included do
+    before_action :perform_turbo_reflex, if: -> { turbo_reflex_requested? && turbo_reflex_valid? }
+    after_action :append_turbo_reflex_turbo_streams, if: :turbo_reflex_performed?
+    after_action :assign_turbo_reflex_token
+    helper_method :turbo_reflex_meta_tag, :turbo_reflex_performed?, :turbo_reflex_requested?
+  end
+
+  def turbo_reflex_meta_tag
+    masked_token = turbo_reflex_message_verifier.generate(new_turbo_reflex_token)
+    options = {id: "turbo-reflex-token", name: "turbo-reflex-token", content: masked_token}
+    view_context.tag("meta", options).html_safe
+  end
+
+  def turbo_reflex_params
+    return ActionController::Parameters.new if params[:turbo_reflex].nil?
+    @turbo_reflex_params ||= begin
+      payload = JSON.parse(params[:turbo_reflex]).deep_transform_keys(&:underscore)
+      ActionController::Parameters.new(payload).permit!
+    end
+  end
+
+  def turbo_reflex_requested?
+    return false unless client_turbo_reflex_token.present?
+    return false unless turbo_reflex_params.present?
+    true
+  end
+
+  def turbo_reflex_element
+    return nil if turbo_reflex_params.blank?
+    @turbo_reflex_element ||= Struct
+      .new(*turbo_reflex_params[:element].keys.map { |key| key.to_s.parameterize.underscore.to_sym })
+      .new(*turbo_reflex_params[:element].values)
+  end
+
+  def turbo_reflex_name
+    return nil unless turbo_reflex_requested?
+    turbo_reflex_element.data_turbo_reflex
+  end
+
+  def turbo_reflex_class_name
+    return nil unless turbo_reflex_requested?
+    turbo_reflex_name.split("#").first
+  end
+
+  def turbo_reflex_method_name
+    return nil unless turbo_reflex_requested?
+    turbo_reflex_name.split("#").last
+  end
+
+  def turbo_reflex_class
+    @turbo_reflex_class ||= turbo_reflex_class_name&.safe_constantize
+  end
+
+  def turbo_reflex_instance
+    @turbo_reflex_instance ||= turbo_reflex_class&.new(self)
+  end
+
+  def turbo_reflex_valid?
+    return false if request.get? && client_turbo_reflex_token.blank?
+    return false unless valid_turbo_reflex_token?
+    return false unless turbo_reflex_instance.is_a?(TurboReflex::Base)
+    turbo_reflex_instance.respond_to? turbo_reflex_method_name
+  end
+
+  def turbo_reflex_performed?
+    !!@turbo_reflex_performed
+  end
+
+  protected
+
+  def perform_turbo_reflex
+    turbo_reflex_instance.public_send turbo_reflex_method_name
+    @turbo_reflex_performed = true
+  end
+
+  def append_turbo_reflex_turbo_streams
+    return unless turbo_reflex_performed?
+    return unless turbo_reflex_instance&.turbo_streams.present?
+    append_turbo_reflex_content turbo_reflex_instance.turbo_streams.map(&:to_s).join
+  end
+
+  private
+
+  def turbo_reflex_message_verifier
+    ActiveSupport::MessageVerifier.new session.id.to_s, digest: "SHA256"
+  end
+
+  def client_turbo_reflex_token
+    (request.headers["Turbo-Reflex"] || turbo_reflex_params[:token]).to_s
+  end
+
+  def new_turbo_reflex_token
+    @new_turbo_reflex_token ||= SecureRandom.urlsafe_base64(32)
+  end
+
+  def current_turbo_reflex_token
+    session[:turbo_reflex_token]
+  end
+
+  def valid_turbo_reflex_token?
+    return false unless turbo_reflex_message_verifier.valid_message?(client_turbo_reflex_token)
+    unmasked_token = turbo_reflex_message_verifier.verify(client_turbo_reflex_token)
+    unmasked_token == current_turbo_reflex_token
+  end
+
+  def assign_turbo_reflex_token
+    return unless turbo_reflex_requested? || client_turbo_reflex_token.blank?
+    session[:turbo_reflex_token] = new_turbo_reflex_token
+    append_turbo_reflex_content turbo_stream.replace("turbo-reflex-token", turbo_reflex_meta_tag)
+  end
+
+  def turbo_reflex_response_type
+    body = response.body.to_s.strip
+    return :stream if body.ends_with?("</turbo-stream>")
+    return :frame if body.ends_with?("</turbo-frame>")
+    :default
+  end
+
+  def append_turbo_reflex_content(content)
+    sanitized_content = TurboReflex::Sanitizer.instance.sanitize(content).html_safe
+    case turbo_reflex_response_type
+    when :stream then response.body << sanitized_content
+    when :frame then response.body.sub!("</turbo-frame>", "#{sanitized_content}</turbo-frame>")
+    when :default then response.body.sub!("</body>", "#{sanitized_content}</body>")
+    end
+  end
+end

data/app/javascript/elements.js

@@ -0,0 +1,87 @@
+import LifecycleEvents from './lifecycle_events'
+
+function findClosestReflex (element) {
+  return element.closest('[data-turbo-reflex]')
+}
+
+function findClosestFrame (element) {
+  return element.closest('turbo-frame')
+}
+
+function findFrameId (element) {
+  let id = element.dataset.turboReflexFrame || 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-reflex-frame' or '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)
+
+  if (!element.multiple)
+    return (payload.value = element.options[element.selectedIndex].value)
+
+  payload.values = Array.from(element.options).reduce((memo, option) => {
+    if (option.selected) memo.push(option.value)
+    return memo
+  }, [])
+}
+
+function buildAttributePayload (element) {
+  const payload = Array.from(element.attributes).reduce((memo, attr) => {
+    memo[attr.name] = attr.value
+    return memo
+  }, {})
+
+  payload.tag = element.tagName
+  payload.checked = element.checked
+  payload.disabled = element.disabled
+  assignElementValueToPayload(element, payload)
+
+  return payload
+}
+
+export {
+  findClosestReflex,
+  findClosestFrame,
+  findFrameId,
+  findFrame,
+  findFrameSrc,
+  buildAttributePayload
+}

data/app/javascript/event_registry.js

@@ -0,0 +1,34 @@
+const registeredEvents = {}
+let eventListener
+
+function registerEventListener (fn) {
+  eventListener = fn
+}
+
+function registerEvent (eventName, tagNames) {
+  registeredEvents[eventName] = tagNames
+  document.addEventListener(eventName, eventListener, true)
+}
+
+function isRegisteredEvent (eventName, tagName) {
+  tagName = tagName.toLowerCase()
+  return (
+    registeredEvents[eventName].includes(tagName) ||
+    (!Object.values(registeredEvents)
+      .flat()
+      .includes(tagName) &&
+      registeredEvents[eventName].includes('*'))
+  )
+}
+
+function logRegisteredEvents () {
+  console.log(registeredEvents)
+}
+
+export {
+  registerEventListener,
+  registerEvent,
+  registeredEvents,
+  isRegisteredEvent,
+  logRegisteredEvents
+}

data/app/javascript/frame_sources.js

@@ -0,0 +1,28 @@
+import LifecycleEvents from './lifecycle_events'
+const frameSources = {}
+
+// fires after receiving a turbo HTTP response
+addEventListener('turbo:before-fetch-response', event => {
+  const frame = event.target
+  frameSources[frame.id] = frame.src
+
+  const { turboReflexActive, turboReflexElementId } = frame.dataset
+  if (!turboReflexActive) return
+
+  const element = document.getElementById(turboReflexElementId)
+  delete frame.dataset.turboReflexActive
+  delete frame.dataset.turboReflexElementId
+
+  LifecycleEvents.dispatch(LifecycleEvents.finish, element || document, {
+    frame,
+    element: element || 'Unknown! Missing id attribute.'
+  })
+})
+
+// fires when a frame element is navigated and finishes loading
+addEventListener('turbo:frame-load', event => {
+  const frame = event.target
+  frame.dataset.turboReflexSrc =
+    frameSources[frame.id] || frame.src || frame.dataset.turboReflexSrc
+  delete frameSources[frame.id]
+})

data/app/javascript/lifecycle_events.js

@@ -0,0 +1,24 @@
+const events = {
+  beforeStart: 'turbo-reflex:before-start',
+  start: 'turbo-reflex:start',
+  finish: 'turbo-reflex:finish',
+  error: 'turbo-reflex:error',
+  missingFrameId: 'turbo-reflex:missing-frame-id',
+  missingFrame: 'turbo-reflex:missing-frame',
+  missingFrameSrc: 'turbo-reflex:missing-frame-src'
+}
+
+function dispatch (name, target = document, detail = {}) {
+  const event = new CustomEvent(name, {
+    detail,
+    cancelable: true,
+    bubbles: true
+  })
+  target.dispatchEvent(event)
+}
+
+function logEventNames () {
+  Object.values(events).forEach(name => console.log(name))
+}
+
+export default { ...events, dispatch, logEventNames }

data/app/javascript/security.js

@@ -0,0 +1,7 @@
+const Security = {
+  get token () {
+    return document.getElementById('turbo-reflex-token').getAttribute('content')
+  }
+}
+
+export default Security

data/app/javascript/turbo_reflex.js

@@ -0,0 +1,111 @@
+import './frame_sources'
+import Security from './security'
+import LifecycleEvents from './lifecycle_events'
+import {
+  findClosestReflex,
+  findClosestFrame,
+  findFrameId,
+  findFrame,
+  findFrameSrc,
+  buildAttributePayload
+} from './elements'
+import {
+  registerEventListener,
+  registerEvent,
+  registeredEvents,
+  isRegisteredEvent,
+  logRegisteredEvents
+} from './event_registry'
+
+// fires before making a turbo HTTP request
+addEventListener('turbo:before-fetch-request', event => {
+  const frame = event.target
+  const { turboReflexActive } = frame.dataset
+  if (!turboReflexActive) return
+  const { fetchOptions } = event.detail
+  fetchOptions.headers['Turbo-Reflex'] = Security.token
+})
+
+function buildURL (urlString) {
+  const a = document.createElement('a')
+  a.href = urlString
+  return new URL(a)
+}
+
+function invokeFormReflex (form, payload = {}) {
+  payload.token = Security.token
+  const input = document.createElement('input')
+  input.type = 'hidden'
+  input.name = 'turbo_reflex'
+  input.value = JSON.stringify(payload)
+  form.appendChild(input)
+}
+
+function invokeReflex (event) {
+  let element, frameId, frame, frameSrc
+  try {
+    element = findClosestReflex(event.target)
+    if (!element) return
+
+    if (!isRegisteredEvent(event.type, element.tagName)) return
+
+    LifecycleEvents.dispatch(LifecycleEvents.beforeStart, element, { element })
+
+    frameId = findFrameId(element)
+    if (!frameId) return
+
+    frame = findFrame(frameId)
+    if (!frame) return
+
+    frameSrc = findFrameSrc(frame)
+    if (!frameSrc) return
+
+    const payload = {
+      frameId: frameId,
+      element: buildAttributePayload(element)
+    }
+
+    LifecycleEvents.dispatch(LifecycleEvents.start, element, {
+      element,
+      frameId,
+      frame,
+      frameSrc,
+      payload
+    })
+    frame.dataset.turboReflexActive = true
+    frame.dataset.turboReflexElementId = element.id
+
+    if (element.tagName.toLowerCase() === 'form')
+      return invokeFormReflex(element, payload)
+
+    event.preventDefault()
+    const frameURL = buildURL(frameSrc)
+    frameURL.searchParams.set('turbo_reflex', JSON.stringify(payload))
+    frame.src = frameURL.toString()
+  } catch (error) {
+    console.error(
+      `TurboReflex encountered an unexpected error!`,
+      { element, frameId, frame, frameSrc, target: event.target },
+      error
+    )
+    LifecycleEvents.dispatch(LifecycleEvents.error, element || document, {
+      element,
+      frameId,
+      frame,
+      frameSrc,
+      error
+    })
+  }
+}
+
+// wire things up and setup default events
+registerEventListener(invokeReflex)
+registerEvent('change', ['input', 'select', 'textarea'])
+registerEvent('submit', ['form'])
+registerEvent('click', ['*'])
+
+export default {
+  registerEvent,
+  logRegisteredEvents,
+  logLifecycleEventNames: LifecycleEvents.logEventNames
+}

data/bin/loc

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-cloc --exclude-dir=Gemfile,Dockerfile,bin,builds,db,docs,log,node_modules,Procfile,public,storage,tmp --exclude-ext=example,json,lock,md,ru,toml,sql,svg,txt,yml "${1:-.}"
+cloc --exclude-dir=assets app lib

data/lib/turbo_reflex/base.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class TurboReflex::Base
+  attr_reader :controller, :turbo_streams
+
+  def initialize(controller)
+    @controller = controller
+    @turbo_streams = Set.new
+  end
+
+  def params
+    controller.turbo_reflex_params
+  end
+
+  def element
+    @element ||= begin
+      keys = params[:element].keys.map { |key| key.to_s.parameterize.underscore.to_sym }
+      values = params[:element].values
+
+      unless keys.include? :value
+        keys << :value
+        values << nil
+      end
+
+      Struct.new(*keys).new(*values)
+    end
+  end
+
+  def turbo_stream
+    @turbo_stream ||= Turbo::Streams::TagBuilder.new(controller.view_context)
+  end
+end

data/lib/turbo_reflex/engine.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "turbo-rails"
+require_relative "version"
+require_relative "sanitizer"
+require_relative "base"
+
+class TurboReflex::Engine < ::Rails::Engine
+end

data/lib/turbo_reflex/sanitizer.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class TurboReflex::Sanitizer
+  include Singleton
+  include ActionView::Helpers::SanitizeHelper
+
+  attr_reader :scrubber
+
+  def sanitize(value)
+    super value, scrubber: scrubber
+  end
+
+  private
+
+  def initialize
+    @scrubber = Loofah::Scrubber.new do |node|
+      node.remove if node.name == "script"
+    end
+  end
+end

data/lib/turbo_reflex/version.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module TurboReflex
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

data/lib/turbo_reflex.rb

@@ -1,6 +1,3 @@
-require "turbo_reflex/version"
-require "turbo_reflex/railtie"
+# frozen_string_literal: true
 
-module TurboReflex
-  # Your code goes here...
-end
+require "turbo_reflex/engine"

data/package.json

@@ -1,7 +1,7 @@
 {
   "name": "turbo_reflex",
-  "version": "0.0.0",
-  "description": "Future home of TurboReflex",
+  "version": "0.0.1",
+  "description": "Reflexes for Turbo Frames that help you build robust reactive applications",
   "main": "app/assets/builds/turbo_reflex.js",
   "repository": "https://github.com/hopsoft/turbo_reflex",
   "author": "Nate Hopkins (hopsoft) <natehop@gmail.com>",
@@ -10,11 +10,11 @@
     "@hotwired/turbo-rails": ">= 7.1"
   },
   "devDependencies": {
-    "esbuild": "^0.14.48",
+    "esbuild": "^0.15.7",
     "eslint": "^8.19.0",
     "prettier-standard": "^16.4.1"
   },
   "scripts": {
-    "build": "esbuild app/javascript/*.* --bundle --minify --sourcemap --format=esm --outdir=app/assets/builds"
+    "build": "esbuild app/javascript/turbo_reflex.js --bundle --minify --sourcemap --format=esm --outfile=app/assets/builds/turbo_reflex.min.js"
   }
 }

data/turbo_reflex.gemspec

@@ -2,27 +2,38 @@
 
 require_relative "lib/turbo_reflex/version"
 
-Gem::Specification.new do |spec|
-  spec.name = "turbo_reflex"
-  spec.version = TurboReflex::VERSION
-  spec.authors = ["Nate Hopkins (hopsoft)"]
-  spec.email = ["natehop@gmail.com"]
-  spec.homepage = "https://github.com/hopsoft/turbo_reflex"
-  spec.summary = "Future home of TurboReflex"
-  spec.description = spec.summary
-  spec.license = "MIT"
+Gem::Specification.new do |s|
+  s.name = "turbo_reflex"
+  s.version = TurboReflex::VERSION
+  s.authors = ["Nate Hopkins (hopsoft)"]
+  s.email = ["natehop@gmail.com"]
+  s.homepage = "https://github.com/hopsoft/turbo_reflex"
+  s.summary = "Reflexes for Turbo Frames that help you build robust reactive applications"
+  s.description = "TurboReflex extends Turbo Frames and adds support for client triggered reflexes (think RPC) which let you sprinkle in functionality and skip the REST boilerplate."
+  s.license = "MIT"
 
-  spec.metadata["homepage_uri"] = spec.homepage
-  spec.metadata["source_code_uri"] = spec.homepage
-  spec.metadata["changelog_uri"] = spec.homepage + "/blob/master/CHANGELOG.md"
+  s.metadata["homepage_uri"] = s.homepage
+  s.metadata["source_code_uri"] = s.homepage
+  s.metadata["changelog_uri"] = s.homepage + "/blob/master/CHANGELOG.md"
 
-  spec.files = Dir["lib/**/*.rb", "app/**/*", "bin/*", "[A-Z]*"]
+  s.files = Dir["lib/**/*.rb", "app/**/*", "bin/*", "[A-Z]*"]
 
-  spec.add_dependency "rails", ">= 7.0"
-  spec.add_dependency "turbo-rails", ">= 1.1"
+  s.add_dependency "rails", ">= 6.1"
+  s.add_dependency "turbo-rails", ">= 1.1"
 
-  spec.add_development_dependency "magic_frozen_string_literal"
-  spec.add_development_dependency "pry-byebug"
-  spec.add_development_dependency "standardrb"
-  spec.add_development_dependency "tocer"
+  s.add_development_dependency "capybara"
+  s.add_development_dependency "cuprite"
+  s.add_development_dependency "importmap-rails"
+  s.add_development_dependency "magic_frozen_string_literal"
+  s.add_development_dependency "minitest-reporters"
+  s.add_development_dependency "net-smtp"
+  s.add_development_dependency "pry-byebug"
+  s.add_development_dependency "puma"
+  s.add_development_dependency "rake"
+  s.add_development_dependency "rexml"
+  s.add_development_dependency "sprockets-rails"
+  s.add_development_dependency "sqlite3"
+  s.add_development_dependency "standardrb"
+  s.add_development_dependency "turbo_ready"
+  s.add_development_dependency "webdrivers"
 end