turbo_boost-commands 0.2.2 → 0.3.1

data/app/javascript/drivers/index.js

@@ -23,7 +23,7 @@ function find(element) {
       invokeCommand: formDriver.invokeCommand
     }
 
-  if (turboMethod && turboMethod.length > 0)
+  if (turboMethod?.length)
     return {
       name: 'method',
       reason: 'Element defines data-turbo-method.',

data/app/javascript/elements.js

@@ -1,5 +1,4 @@
 import schema from './schema'
-import lifecycle from './lifecycle'
 
 function findClosestCommand(element) {
   return element.closest(`[${schema.commandAttribute}]`)

data/app/javascript/events.js

@@ -8,11 +8,14 @@ export const commandEvents = {
 }
 
 export const stateEvents = {
-  stateLoad: 'turbo-boost:state:load',
-  stateChange: 'turbo-boost:state:change'
+  stateChange: 'turbo-boost:state:change',
+  stateInitialize: 'turbo-boost:state:initialize'
 }
 
-export const allEvents = { ...commandEvents, ...stateEvents }
+export const turboEvents = {
+  frameLoad: 'turbo:frame-load',
+  load: 'turbo:load'
+}
 
 export function dispatch(name, target, options = {}) {
   return new Promise(resolve => {

data/app/javascript/headers.js

@@ -33,8 +33,8 @@ const prepare = (headers = {}) => {
 // Tokenizes the 'TurboBoost-Command' HTTP response header value
 const tokenize = value => {
   if (value) {
-    const [status, strategy, name] = value.split(', ')
-    return { status, strategy, name }
+    const [name, status, strategy] = value.split(', ')
+    return { name, status, strategy }
   }
 
   return {}

data/app/javascript/index.js

@@ -6,7 +6,7 @@ import confirmation from './confirmation'
 import delegates from './delegates'
 import drivers from './drivers'
 import elements from './elements'
-import lifecycle from './lifecycle'
+import './lifecycle'
 import logger from './logger'
 import state from './state'
 import uuids from './uuids'
@@ -29,14 +29,17 @@ const Commands = {
 
 function buildCommandPayload(id, element) {
   return {
-    id, // uniquely identifies the command
-    name: element.getAttribute(schema.commandAttribute),
-    elementId: element.id.length > 0 ? element.id : null,
-    elementAttributes: elements.buildAttributePayload(element),
-    startedAt: Date.now(),
-    changedState: state.changed, // changed-state (delta of optimistic updates)
-    clientState: state.current, // client-side state
-    signedState: state.signed // server-side state
+    csrfToken: document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'), // -- Rails CSRF token
+    id, //-------------------------------------------------------------------------------------- Uniquely identifies the command invocation
+    name: element.getAttribute(schema.commandAttribute), //------------------------------------- Command name
+    elementId: element.id.length ? element.id : null, //---------------------------------------- ID of the element that triggered the command
+    elementAttributes: elements.buildAttributePayload(element), //------------------------------ Attributes of the element that triggered the command
+    startedAt: Date.now(), //------------------------------------------------------------------- Start time of when the command was invoked
+    state: {
+      page: state.buildPageState(),
+      signed: state.signed,
+      unsigned: state.unsigned
+    }
   }
 }
 
@@ -49,7 +52,7 @@ async function invokeCommand(event) {
     if (!element) return
     if (!delegates.isRegisteredForElement(event.type, element)) return
 
-    const commandId = `turbo-command-${uuids.v4()}`
+    const commandId = uuids.v4()
     let driver = drivers.find(element)
     let payload = {
       ...buildCommandPayload(commandId, element),
@@ -108,6 +111,7 @@ if (!self.TurboBoost.Commands) {
   delegates.handler = invokeCommand
   delegates.register('click', [`[${schema.commandAttribute}]`])
   delegates.register('submit', [`form[${schema.commandAttribute}]`])
+  delegates.register('toggle', [`details[${schema.commandAttribute}]`])
   delegates.register('change', [
     `input[${schema.commandAttribute}]`,
     `select[${schema.commandAttribute}]`,
@@ -115,7 +119,12 @@ if (!self.TurboBoost.Commands) {
   ])
 
   self.TurboBoost.Commands = Commands
-  self.TurboBoost.State = state
+  self.TurboBoost.State = {
+    initialize: state.initialize,
+    get current() {
+      return state.unsigned
+    }
+  }
 }
 
 export default Commands

data/app/javascript/invoker.js

@@ -1,24 +1,16 @@
 import headers from './headers'
 import lifecycle from './lifecycle'
-import state from './state'
 import urls from './urls'
 import { dispatch } from './events'
 import { render } from './renderer'
 
 const parseError = error => {
-  const errorMessage = `Unexpected error performing a TurboBoost Command! ${error.message}`
-  dispatch(lifecycle.events.clientError, document, { detail: { error: errorMessage } }, true)
+  const message = `Unexpected error performing a TurboBoost Command! ${error.message}`
+  dispatch(lifecycle.events.clientError, document, { detail: { message, error } }, true)
 }
 
 const parseAndRenderResponse = response => {
   const { strategy } = headers.tokenize(response.headers.get(headers.RESPONSE_HEADER))
-
-  // FAIL: Status outside the range of 200-399
-  if (response.status < 200 || response.status > 399) {
-    const error = `Server returned a ${response.status} status code! TurboBoost Commands require 2XX-3XX status codes.`
-    dispatch(lifecycle.events.serverError, document, { detail: { error, response } }, true)
-  }
-
   response.text().then(content => render(strategy, content))
 }
 

data/app/javascript/lifecycle.js

@@ -2,14 +2,11 @@ import activity from './activity'
 import { dispatch, commandEvents } from './events'
 
 function finish(event) {
-  event.detail.endedAt = Date.now()
-  event.detail.milliseconds = event.detail.endedAt - event.detail.startedAt
-  setTimeout(() => dispatch(commandEvents.finish, event.target, { detail: event.detail }), 25)
+  setTimeout(() => dispatch(commandEvents.finish, event.target, { detail: event.detail }))
 }
 
-// TODO: forward source event to finish (error or success)
-addEventListener(commandEvents.serverError, finish)
-addEventListener(commandEvents.success, finish)
+const events = [commandEvents.abort, commandEvents.serverError, commandEvents.success]
+events.forEach(name => addEventListener(name, finish))
 addEventListener(commandEvents.finish, event => activity.remove(event.detail.id), true)
 
 export default { events: commandEvents }

data/app/javascript/logger.js

@@ -1,4 +1,5 @@
-import { allEvents as events } from './events'
+// TODO: Move Logger to its own library (i.e. TurboBoost.Logger)
+import { commandEvents as events } from './events'
 
 let currentLevel = 'unknown'
 let initialized = false
@@ -28,10 +29,36 @@ const shouldLogEvent = event => {
   return true
 }
 
+const logMethod = event => {
+  if (logLevels.error.includes(event.type)) return 'error'
+  if (logLevels.warn.includes(event.type)) return 'warn'
+  if (logLevels.info.includes(event.type)) return 'info'
+  if (logLevels.debug.includes(event.type)) return 'debug'
+  return 'log'
+}
+
 const logEvent = event => {
   if (shouldLogEvent(event)) {
     const { target, type, detail } = event
-    console[currentLevel](type, detail.id || '', { target, detail })
+    const id = detail.id || ''
+    const commandName = detail.name || ''
+
+    let duration = ''
+    if (detail.startedAt) duration = `${Date.now() - detail.startedAt}ms `
+
+    const typeParts = type.split(':')
+    const lastPart = typeParts.pop()
+    const eventName = `%c${typeParts.join(':')}:%c${lastPart}`
+    const message = [`%c${commandName}`, `%c${duration}`, eventName]
+
+    console[logMethod(event)](
+      message.join(' ').replace(/\s{2,}/g, ' '),
+      'color:deepskyblue',
+      'color:lime',
+      'color:darkgray',
+      eventName.match(/abort|error/i) ? 'color:red' : 'color:deepskyblue',
+      { id, detail, target }
+    )
   }
 }
 

data/app/javascript/renderer.js

@@ -1,5 +1,3 @@
-import uuids from './uuids'
-
 const append = content => {
   document.body.insertAdjacentHTML('beforeend', content)
 }
@@ -7,12 +5,20 @@ const append = content => {
 const replace = content => {
   const parser = new DOMParser()
   const doc = parser.parseFromString(content, 'text/html')
-  TurboBoost.Streams.morph.method(document.documentElement, doc.documentElement)
+  const head = document.querySelector('head')
+  const body = document.querySelector('body')
+  const newHead = doc.querySelector('head')
+  const newBody = doc.querySelector('body')
+  if (head && newHead) TurboBoost?.Streams?.morph?.method(head, newHead)
+  if (body && newBody) TurboBoost?.Streams?.morph?.method(body, newBody)
 }
 
+// TODO: dispatch events after append/replace so we can apply page state
 export const render = (strategy, content) => {
-  if (strategy.match(/^Append$/i)) return append(content)
-  if (strategy.match(/^Replace$/i)) return replace(content)
+  if (strategy && content) {
+    if (strategy.match(/^Append$/i)) return append(content)
+    if (strategy.match(/^Replace$/i)) return replace(content)
+  }
 }
 
 export default { render }

data/app/javascript/schema.js

@@ -3,7 +3,8 @@ const schema = {
   frameAttribute: 'data-turbo-frame',
   methodAttribute: 'data-turbo-method',
   commandAttribute: 'data-turbo-command',
-  confirmAttribute: 'data-turbo-confirm'
+  confirmAttribute: 'data-turbo-confirm',
+  stateAttributesAttribute: 'data-turbo-boost-state-attributes'
 }
 
 export default { ...schema }

data/app/javascript/state/index.js

@@ -1,44 +1,61 @@
-// TODO: Consider moving State to its own library
+// TODO: Move State to its own library
 import observable from './observable'
-import { dispatch, commandEvents, stateEvents } from '../events'
-
-let initialState, currentState, changedState, signedState
-
-function initialize(initial, signed) {
-  const json = JSON.parse(initial)
-  initialState = { ...json }
-  signedState = signed
-  currentState = observable(json)
-  changedState = {}
-  setTimeout(() =>
-    dispatch(stateEvents.stateLoad, document, {
-      detail: { state: currentState }
-    })
-  )
+import page from './page'
+import storage from './storage'
+import { dispatch, stateEvents } from '../events'
+
+const key = 'TurboBoost::State'
+const stub = { pages: {}, signed: null, unsigned: {} }
+
+let signed = null // signed state <string>
+let unsigned = {} // unsigned state (optimistic) <object>
+
+const restore = () => {
+  const saved = { ...stub, ...storage.find(key) }
+  signed = saved.signed
+  unsigned = observable(saved.unsigned)
+  saved.pages[location.pathname] = saved.pages[location.pathname] || {}
+  page.restoreState(saved.pages[location.pathname])
 }
 
-addEventListener(stateEvents.stateChange, event => {
-  for (const [key, value] of Object.entries(currentState))
-    if (initialState[key] !== value) changedState[key] = value
-})
+const save = () => {
+  const saved = { ...stub, ...storage.find(key) }
+  const fresh = {
+    signed: signed || saved.signed,
+    unsigned: { ...saved.unsigned, ...unsigned },
+    pages: { ...saved.pages }
+  }
 
-export default {
-  initialize,
-  events: stateEvents,
+  // update the current page's state entry
+  const pageKey = location.pathname
+  const pageState = page.buildState()
+  Object.values(pageState).length ? (fresh.pages[pageKey] = pageState) : delete fresh.pages[pageKey]
 
-  get initial() {
-    return initialState
-  },
+  storage.save(key, fresh)
+}
 
-  get current() {
-    return currentState
-  },
+const initialize = json => {
+  const state = { ...stub, ...JSON.parse(json) }
+  signed = state.signed
+  unsigned = observable(state.unsigned)
+  save()
+  dispatch(stateEvents.stateInitialize, document, { detail: unsigned })
+}
 
-  get changed() {
-    return changedState
-  },
+// setup
+addEventListener('DOMContentLoaded', restore)
+addEventListener('turbo:morph', restore)
+addEventListener('turbo:render', restore)
+addEventListener('turbo:before-fetch-request', save)
+addEventListener('beforeunload', save)
 
+export default {
+  initialize,
+  buildPageState: page.buildState,
   get signed() {
-    return signedState
+    return signed
+  },
+  get unsigned() {
+    return unsigned
   }
 }

data/app/javascript/state/observable.js

@@ -12,7 +12,7 @@ function observable(object, parent = null) {
       return true
     },
 
-    set(target, key, value, receiver) {
+    set(target, key, value, _receiver) {
       target[key] = observable(value, this)
       dispatch(events.stateChange, document, { detail: { state: head } })
       return true

data/app/javascript/state/page.js

@@ -0,0 +1,34 @@
+import schema from '../schema.js'
+
+const updateElement = (id, attribute, value, attempts = 1) => {
+  if (attempts > 20) return
+  const element = document.getElementById(id)
+  if (element?.isConnected) return element.setAttribute(attribute, value)
+  setTimeout(() => updateElement(id, attribute, value, attempts + 1), attempts * 5)
+}
+
+const buildState = () => {
+  const elements = Array.from(document.querySelectorAll(`[id][${schema.stateAttributesAttribute}]`))
+  return elements.reduce((memo, element) => {
+    const attributes = JSON.parse(element.getAttribute(schema.stateAttributesAttribute))
+    if (element.id) {
+      const stateAttributes = attributes.reduce((acc, name) => {
+        if (element.hasAttribute(name)) acc[name] = element.getAttribute(name) || name
+        return acc
+      }, {})
+      if (Object.values(stateAttributes).length) memo[element.id] = stateAttributes
+    }
+    return memo
+  }, {})
+}
+
+const restoreState = (state = {}) => {
+  for (const [id, attributes] of Object.entries(state)) {
+    for (const [attribute, value] of Object.entries(attributes)) updateElement(id, attribute, value)
+  }
+}
+
+export default {
+  buildState,
+  restoreState
+}

data/app/javascript/state/storage.js

@@ -0,0 +1,11 @@
+function save(name, value) {
+  if (typeof value !== 'object') value = {}
+  return localStorage.setItem(String(name), JSON.stringify(value))
+}
+
+function find(name) {
+  const stored = localStorage.getItem(String(name))
+  return stored ? JSON.parse(stored) : {}
+}
+
+export default { save, find }

data/app/javascript/turbo.js

@@ -1,6 +1,4 @@
 import headers from './headers'
-import lifecycle from './lifecycle'
-import { dispatch } from './events'
 import { render } from './renderer'
 
 const frameSources = {}
@@ -17,15 +15,7 @@ addEventListener('turbo:before-fetch-response', event => {
 
   // We'll take it from here Hotwire...
   event.preventDefault()
-  const { statusCode } = response
   const { strategy } = headers.tokenize(header)
-
-  // FAIL: Status outside the range of 200-399
-  if (statusCode < 200 || statusCode > 399) {
-    const error = `Server returned a ${status} status code! TurboBoost Commands require 2XX-3XX status codes.`
-    dispatch(lifecycle.events.clientError, document, { detail: { error, response } }, true)
-  }
-
   response.responseHTML.then(content => render(strategy, content))
 })
 

data/app/javascript/version.js

@@ -1 +1 @@
-export default '0.2.2'
+export default '0.3.1'

data/lib/turbo_boost/commands/attribute_set.rb

@@ -36,6 +36,14 @@ class TurboBoost::Commands::AttributeSet
     end
   end
 
+  def include?(key)
+    instance_variable_defined?(:"@#{key}")
+  end
+
+  alias_method :has_key?, :include?
+  alias_method :key?, :include?
+  alias_method :member?, :include?
+
   def to_h
     instance_variables.each_with_object({}.with_indifferent_access) do |name, memo|
       value = instance_variable_get(name)

data/lib/turbo_boost/commands/command.rb

@@ -2,6 +2,7 @@
 
 require_relative "attribute_set"
 require_relative "command_callbacks"
+require_relative "command_validator"
 
 # TurboBoost::Commands::Command superclass.
 # All command classes should inherit from this class.
@@ -88,13 +89,17 @@ class TurboBoost::Commands::Command
     @state = state
     @params = params
     @turbo_streams = Set.new
+    resolve_state if TurboBoost::Commands.config.resolve_state
   end
 
-  # Abstract method to resolve state (default noop), override in subclassed commands
-  def resolve_state(client_state)
+  # Abstract method to resolve state (default: noop)
+  # Override in subclassed commands to resolve unsigned/optimistic client state with signed/server state
+  def resolve_state
   end
 
-  # Abstract `perform` method, override in subclassed commands
+  # Abstract `perform` method
+  # Override in subclassed commands
+  # @raise [NotImplementedError]
   def perform
     raise NotImplementedError, "#{self.class.name} must implement the `perform` method!"
   end

data/lib/turbo_boost/commands/command_callbacks.rb

@@ -86,15 +86,28 @@ module TurboBoost::Commands::CommandCallbacks
   end
 
   def perform_with_callbacks(method_name)
+    # Setup a temporary `rescue_from` handler on the controller to trap command errors because commands are
+    # run in a controller `before_action` callback. This allows us to properly handle command errors here
+    # instead of letting Rails return the normal 500 error page.
+    command = self
+    controller.class.rescue_from Exception, with: ->(error) { command.send :internal_error_handler, error }
+
     @performing_method_name = method_name
-    run_callbacks NAME do
-      public_send method_name
-      performed!
+    begin
+      run_callbacks NAME do
+        public_send method_name
+        performed!
+      end
+    ensure
+      @performing_method_name = nil
+    end
+
+    # Tear down the temporary `rescue_from` handler
+    controller.rescue_handlers.reject! do |handler|
+      handler.to_s.include? "turbo_boost/commands/command_callbacks.rb"
     end
   rescue => error
-    errored! TurboBoost::Commands::PerformError.new(command: self, cause: error)
-  ensure
-    @performing_method_name = nil
+    internal_error_handler error
   end
 
   def aborted?
@@ -147,4 +160,8 @@ module TurboBoost::Commands::CommandCallbacks
     changed @performed = true
     notify_observers :performed
   end
+
+  def internal_error_handler(error)
+    errored! TurboBoost::Commands::PerformError.new(command: self, cause: error)
+  end
 end

data/lib/turbo_boost/commands/command_validator.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+class TurboBoost::Commands::CommandValidator
+  def initialize(command, method_name)
+    @command = command
+    @method_name = method_name.to_sym
+  end
+
+  attr_reader :command, :method_name
+
+  def validate
+    valid_class? && valid_method?
+  end
+  alias_method :valid?, :validate
+
+  def validate!
+    message = "`#{command.class.name}` is not a subclass of `#{TurboBoost::Commands::Command.name}`!"
+    raise TurboBoost::Commands::InvalidClassError.new(message, command: command.class) unless valid_class?
+
+    message = "`#{command.class.name}` does not define the public method `#{method_name}`!"
+    raise TurboBoost::Commands::InvalidMethodError.new(message, command: command.class) unless valid_method?
+
+    true
+  end
+
+  private
+
+  def command_ancestors
+    range = 0..(command.class.ancestors.index(TurboBoost::Commands::Command).to_i - 1)
+    command.class.ancestors.[](range) || []
+  end
+
+  def valid_class?
+    command.class.ancestors.include? TurboBoost::Commands::Command
+  end
+
+  def valid_method?
+    return false unless valid_class?
+    return false unless command_ancestors.any? { |a| a.public_instance_methods(false).any? method_name }
+
+    method = command.class.public_instance_method(method_name)
+    method&.parameters&.none?
+  end
+end

data/lib/turbo_boost/commands/controller_pack.rb

@@ -5,27 +5,27 @@ require_relative "runner"
 class TurboBoost::Commands::ControllerPack
   include TurboBoost::Commands::AttributeHydration
 
+  def initialize(controller)
+    @runner = TurboBoost::Commands::Runner.new(controller)
+    @command = runner.command_instance
+  end
+
   attr_reader :runner, :command
 
   delegate(
-    :command_state,
     :command_aborted?,
     :command_errored?,
     :command_performed?,
     :command_performing?,
     :command_requested?,
     :command_succeeded?,
-    :controller,
+    :state,
     to: :runner
   )
 
-  def initialize(controller)
-    @runner = TurboBoost::Commands::Runner.new(controller)
-    @command = runner.command_instance
-  end
-
-  def state
-    ActiveSupport::Deprecation.warn "The `state` method has been deprecated. Please update to `command_state`."
-    command_state
+  # DEPRECATED: This method will removed in a future release
+  def controller
+    ActiveSupport::Deprecation.warn "This method will removed in a future release."
+    runner.controller
   end
 end

data/lib/turbo_boost/commands/engine.rb

@@ -7,7 +7,9 @@ require_relative "version"
 require_relative "http_status_codes"
 require_relative "errors"
 require_relative "patches"
-require_relative "middleware"
+require_relative "sanitizer"
+require_relative "middlewares/entry_middleware"
+require_relative "middlewares/exit_middleware"
 require_relative "command"
 require_relative "controller_pack"
 require_relative "../../../app/controllers/concerns/turbo_boost/commands/controller"
@@ -20,16 +22,18 @@ module TurboBoost::Commands
 
   class Engine < ::Rails::Engine
     config.turbo_boost_commands = ActiveSupport::OrderedOptions.new
-    config.turbo_boost_commands[:protect_from_forgery] = true
-    config.turbo_boost_commands[:precompile_assets] = true
-
-    # must opt-in to state overrides
-    config.turbo_boost_commands[:apply_client_state_overrides] = false
-    config.turbo_boost_commands[:apply_server_state_overrides] = false
-
-    initializer "turbo_boost_commands.configuration" do |app|
+    config.turbo_boost_commands[:alert_on_abort] = false # (true, false, "development", "test", "production")
+    config.turbo_boost_commands[:alert_on_error] = false # (true, false, "development", "test", "production")
+    config.turbo_boost_commands[:precompile_assets] = true # (true, false)
+    config.turbo_boost_commands[:protect_from_forgery] = false # (true, false) TODO: Support override in Commands
+    config.turbo_boost_commands[:raise_on_invalid_command] = "development" # (true, false, "development", "test", "production")
+    config.turbo_boost_commands[:resolve_state] = false # (true, false)
+
+    initializer "turbo_boost_commands.configuration", before: :build_middleware_stack do |app|
       Mime::Type.register "text/vnd.turbo-boost.html", :turbo_boost
-      app.middleware.insert 0, TurboBoost::Commands::Middleware
+
+      app.middleware.insert 0, TurboBoost::Commands::EntryMiddleware
+      app.middleware.use TurboBoost::Commands::ExitMiddleware
 
       ActiveSupport.on_load :action_controller_base do
         # `self` is ActionController::Base