chrono_cable 0.0.1

data/app/javascript/action_cable/consumer.js

@@ -0,0 +1,80 @@
+import Connection from "./connection"
+import Subscriptions from "./subscriptions"
+
+// The ActionCable.Consumer establishes the connection to a server-side Ruby Connection object. Once established,
+// the ActionCable.ConnectionMonitor will ensure that its properly maintained through heartbeats and checking for stale updates.
+// The Consumer instance is also the gateway to establishing subscriptions to desired channels through the #createSubscription
+// method.
+//
+// The following example shows how this can be set up:
+//
+//   App = {}
+//   App.cable = ActionCable.createConsumer("ws://example.com/accounts/1")
+//   App.appearance = App.cable.subscriptions.create("AppearanceChannel")
+//
+// For more details on how you'd configure an actual channel subscription, see ActionCable.Subscription.
+//
+// When a consumer is created, it automatically connects with the server.
+//
+// To disconnect from the server, call
+//
+//   App.cable.disconnect()
+//
+// and to restart the connection:
+//
+//   App.cable.connect()
+//
+// Any channel subscriptions which existed prior to disconnecting will
+// automatically resubscribe.
+
+export default class Consumer {
+  constructor(url) {
+    this._url = url
+    this.subscriptions = new Subscriptions(this)
+    this.connection = new Connection(this)
+    this.subprotocols = []
+  }
+
+  get url() {
+    return createWebSocketURL(this._url)
+  }
+
+  send(data) {
+    return this.connection.send(data)
+  }
+
+  connect() {
+    return this.connection.open()
+  }
+
+  disconnect() {
+    return this.connection.close({allowReconnect: false})
+  }
+
+  ensureActiveConnection() {
+    if (!this.connection.isActive()) {
+      return this.connection.open()
+    }
+  }
+
+  addSubProtocol(subprotocol) {
+    this.subprotocols = [...this.subprotocols, subprotocol]
+  }
+}
+
+export function createWebSocketURL(url) {
+  if (typeof url === "function") {
+    url = url()
+  }
+
+  if (url && !/^wss?:/i.test(url)) {
+    const a = document.createElement("a")
+    a.href = url
+    // Fix populating Location properties in IE. Otherwise, protocol will be blank.
+    a.href = a.href // eslint-disable-line
+    a.protocol = a.protocol.replace("http", "ws")
+    return a.href
+  } else {
+    return url
+  }
+}

data/app/javascript/action_cable/index.js

@@ -0,0 +1,33 @@
+import adapters from "./adapters"
+import Connection from "./connection"
+import ConnectionMonitor from "./connection_monitor"
+import Consumer, { createWebSocketURL } from "./consumer"
+import INTERNAL from "./internal"
+import logger from "./logger"
+import Subscription from "./subscription"
+import SubscriptionGuarantor from "./subscription_guarantor"
+import Subscriptions from "./subscriptions"
+
+export {
+  Connection,
+  ConnectionMonitor,
+  Consumer,
+  INTERNAL,
+  Subscription,
+  Subscriptions,
+  SubscriptionGuarantor,
+  adapters,
+  createWebSocketURL,
+  logger,
+}
+
+export function createConsumer(url = getConfig("url") || INTERNAL.default_mount_path) {
+  return new Consumer(url)
+}
+
+export function getConfig(name) {
+  const element = document.head.querySelector(`meta[name='action-cable-${name}']`)
+  if (element) {
+    return element.getAttribute("content")
+  }
+}

data/app/javascript/action_cable/internal.js

@@ -0,0 +1,21 @@
+export default {
+  "message_types": {
+    "welcome": "welcome",
+    "disconnect": "disconnect",
+    "ping": "ping",
+    "history": "history",
+    "confirmation": "confirm_subscription",
+    "rejection": "reject_subscription"
+  },
+  "disconnect_reasons": {
+    "unauthorized": "unauthorized",
+    "invalid_request": "invalid_request",
+    "server_restart": "server_restart",
+    "remote": "remote"
+  },
+  "default_mount_path": "/cable",
+  "protocols": [
+    "actioncable-v1-json",
+    "actioncable-unsupported"
+  ]
+}

data/app/javascript/action_cable/logger.js

@@ -0,0 +1,22 @@
+import adapters from "./adapters"
+
+// The logger is disabled by default. You can enable it with:
+//
+//   ActionCable.logger.enabled = true
+//
+//   Example:
+//
+//   import * as ActionCable from '@rails/actioncable'
+//
+//   ActionCable.logger.enabled = true
+//   ActionCable.logger.log('Connection Established.')
+//
+
+export default {
+  log(...messages) {
+    if (this.enabled) {
+      messages.push(Date.now())
+      adapters.logger.log("[ActionCable]", ...messages)
+    }
+  },
+}

data/app/javascript/action_cable/stream.js

@@ -0,0 +1,73 @@
+export default class Stream {
+  constructor(subscription, broadcasting, id) {
+    this.subscription = subscription
+    this.broadcasting = broadcasting
+    this.id = id
+    this.recovering = false
+    this.queue = []
+  }
+
+  isBehind(id) {
+    return this.id != null && this.id < id
+  }
+
+  recover(subscriptions, id, message) {
+    this.queue.push({id, message})
+    this.requestHistory(subscriptions)
+  }
+
+  requestHistory(subscriptions) {
+    if (!this.recovering) {
+      this.recovering = true
+      subscriptions.sendCommand(this.subscription, "history",
+        {broadcasting: this.broadcasting, id: this.id})
+    }
+  }
+
+  restartRecovery(subscriptions) {
+    this.recovering = false
+    this.requestHistory(subscriptions)
+  }
+
+  processMessage(id, payload, callback) {
+    if (this.id != null && id <= this.id) return true
+
+    if (this.id == null || id === this.id + 1) {
+      this.id = id
+      callback(payload)
+      return true
+    }
+
+    return false
+  }
+
+  processMessages(messages, callback) {
+    const history = messages.map(({ id, payload }) => ({ id, message: JSON.parse(payload) }))
+    this.queue = history.concat(this.queue)
+
+    this.queue.sort((a, b) => a.id - b.id).forEach(({ id, message }) => {
+      if (this.id == null || id > this.id) {
+        this.id = id
+        callback(message)
+      }
+    })
+
+    this.queue = []
+    this.recovering = false
+
+    return this.subscription
+  }
+
+  processQueue(callback) {
+    const remaining = []
+
+    this.queue
+      .sort((a, b) => a.id - b.id)
+      .filter(({id}) => id > this.id)
+      .forEach(({ id, message }) => {
+        if (!this.processMessage(id, message, callback)) remaining.push({id, message})
+      })
+
+    this.queue = remaining
+  }
+}

data/app/javascript/action_cable/subscription.js

@@ -0,0 +1,103 @@
+import Stream from "./stream"
+
+// A new subscription is created through the ActionCable.Subscriptions instance available on the consumer.
+// It provides a number of callbacks and a method for calling remote procedure calls on the corresponding
+// Channel instance on the server side.
+//
+// An example demonstrates the basic functionality:
+//
+//   App.appearance = App.cable.subscriptions.create("AppearanceChannel", {
+//     connected() {
+//       // Called once the subscription has been successfully completed
+//     },
+//
+//     disconnected({ willAttemptReconnect: boolean }) {
+//       // Called when the client has disconnected with the server.
+//       // The object will have an `willAttemptReconnect` property which
+//       // says whether the client has the intention of attempting
+//       // to reconnect.
+//     },
+//
+//     appear() {
+//       this.perform('appear', {appearing_on: this.appearingOn()})
+//     },
+//
+//     away() {
+//       this.perform('away')
+//     },
+//
+//     appearingOn() {
+//       $('main').data('appearing-on')
+//     }
+//   })
+//
+// The methods #appear and #away forward their intent to the remote AppearanceChannel instance on the server
+// by calling the `perform` method with the first parameter being the action (which maps to AppearanceChannel#appear/away).
+// The second parameter is a hash that'll get JSON encoded and made available on the server in the data parameter.
+//
+// This is how the server component would look:
+//
+//   class AppearanceChannel < ApplicationActionCable::Channel
+//     def subscribed
+//       current_user.appear
+//     end
+//
+//     def unsubscribed
+//       current_user.disappear
+//     end
+//
+//     def appear(data)
+//       current_user.appear on: data['appearing_on']
+//     end
+//
+//     def away
+//       current_user.away
+//     end
+//   end
+//
+// The "AppearanceChannel" name is automatically mapped between the client-side subscription creation and the server-side Ruby class name.
+// The AppearanceChannel#appear/away public methods are exposed automatically to client-side invocation through the perform method.
+
+const extend = function(object, properties) {
+  if (properties != null) {
+    for (let key in properties) {
+      const value = properties[key]
+      object[key] = value
+    }
+  }
+  return object
+}
+
+export default class Subscription {
+  constructor(consumer, params = {}, mixin) {
+    this.consumer = consumer
+    this.identifier = JSON.stringify(params)
+    this.streams = {}
+    extend(this, mixin)
+  }
+
+  // Perform a channel action with the optional data passed as an attribute
+  perform(action, data = {}) {
+    data.action = action
+    return this.send(data)
+  }
+
+  send(data) {
+    return this.consumer.send({command: "message", identifier: this.identifier, data: JSON.stringify(data)})
+  }
+
+  unsubscribe() {
+    return this.consumer.subscriptions.remove(this)
+  }
+
+  reset() {
+    this.streams = {}
+  }
+
+  findOrCreateStream(broadcasting, id = null) {
+    if (this.streams[broadcasting] == null) {
+      this.streams[broadcasting] = new Stream(this, broadcasting, id)
+    }
+    return this.streams[broadcasting]
+  }
+}

data/app/javascript/action_cable/subscription_guarantor.js

@@ -0,0 +1,50 @@
+import logger from "./logger"
+
+// Responsible for ensuring channel subscribe command is confirmed, retrying until confirmation is received.
+// Internal class, not intended for direct user manipulation.
+
+class SubscriptionGuarantor {
+  constructor(subscriptions) {
+    this.subscriptions = subscriptions
+    this.pendingSubscriptions = []
+  }
+
+  guarantee(subscription) {
+    if(this.pendingSubscriptions.indexOf(subscription) == -1){ 
+      logger.log(`SubscriptionGuarantor guaranteeing ${subscription.identifier}`)
+      this.pendingSubscriptions.push(subscription) 
+    }
+    else {
+      logger.log(`SubscriptionGuarantor already guaranteeing ${subscription.identifier}`)
+    }
+    this.startGuaranteeing()
+  }
+
+  forget(subscription) {
+    logger.log(`SubscriptionGuarantor forgetting ${subscription.identifier}`)
+    this.pendingSubscriptions = (this.pendingSubscriptions.filter((s) => s !== subscription))
+  }
+
+  startGuaranteeing() {
+    this.stopGuaranteeing()
+    this.retrySubscribing()
+  }
+  
+  stopGuaranteeing() {
+    clearTimeout(this.retryTimeout)
+  }
+
+  retrySubscribing() {
+    this.retryTimeout = setTimeout(() => {
+      if (this.subscriptions && typeof(this.subscriptions.subscribe) === "function") {
+        this.pendingSubscriptions.map((subscription) => {
+          logger.log(`SubscriptionGuarantor resubscribing ${subscription.identifier}`)
+          this.subscriptions.subscribe(subscription)
+        })
+      }
+    }
+    , 500)
+  }
+}
+
+export default SubscriptionGuarantor

data/app/javascript/action_cable/subscriptions.js

@@ -0,0 +1,141 @@
+import logger from "./logger"
+import Subscription from "./subscription"
+import SubscriptionGuarantor from "./subscription_guarantor"
+
+// Collection class for creating (and internally managing) channel subscriptions.
+// The only method intended to be triggered by the user is ActionCable.Subscriptions#create,
+// and it should be called through the consumer like so:
+//
+//   App = {}
+//   App.cable = ActionCable.createConsumer("ws://example.com/accounts/1")
+//   App.appearance = App.cable.subscriptions.create("AppearanceChannel")
+//
+// For more details on how you'd configure an actual channel subscription, see ActionCable.Subscription.
+
+export default class Subscriptions {
+  constructor(consumer) {
+    this.consumer = consumer
+    this.guarantor = new SubscriptionGuarantor(this)
+    this.subscriptions = []
+  }
+
+  create(channelName, mixin) {
+    const channel = channelName
+    const params = typeof channel === "object" ? channel : {channel}
+    const subscription = new Subscription(this.consumer, params, mixin)
+    return this.add(subscription)
+  }
+
+  // Private
+
+  add(subscription) {
+    this.subscriptions.push(subscription)
+    this.consumer.ensureActiveConnection()
+    this.notify(subscription, "initialized")
+    this.subscribe(subscription)
+    return subscription
+  }
+
+  remove(subscription) {
+    this.forget(subscription)
+    if (!this.findAll(subscription.identifier).length) {
+      this.sendCommand(subscription, "unsubscribe")
+    }
+    return subscription
+  }
+
+  reject(identifier) {
+    return this.findAll(identifier).map((subscription) => {
+      this.forget(subscription)
+      this.notify(subscription, "rejected")
+      return subscription
+    })
+  }
+
+  forget(subscription) {
+    this.guarantor.forget(subscription)
+    subscription.reset()
+    this.subscriptions = (this.subscriptions.filter((s) => s !== subscription))
+    return subscription
+  }
+
+  findAll(identifier) {
+    return this.subscriptions.filter((s) => s.identifier === identifier)
+  }
+
+  reload() {
+    return this.subscriptions.map((subscription) =>
+      this.subscribe(subscription))
+  }
+
+  notifyAll(callbackName, ...args) {
+    return this.subscriptions.map((subscription) =>
+      this.notify(subscription, callbackName, ...args))
+  }
+
+  notify(subscription, callbackName, ...args) {
+    let subscriptions
+    if (typeof subscription === "string") {
+      subscriptions = this.findAll(subscription)
+    } else {
+      subscriptions = [subscription]
+    }
+
+    return subscriptions.map((subscription) =>
+      (typeof subscription[callbackName] === "function" ? subscription[callbackName](...args) : undefined))
+  }
+
+  subscribe(subscription) {
+    if (this.sendCommand(subscription, "subscribe")) {
+      this.guarantor.guarantee(subscription)
+    }
+  }
+
+  confirmSubscription(identifier, ids) {
+    logger.log(`Subscription confirmed ${identifier}`)
+    this.findAll(identifier).forEach((subscription) => {
+      if (ids != null) {
+        Object.entries(ids).forEach(([broadcasting, id]) => {
+          const stream = subscription.findOrCreateStream(broadcasting, id)
+          if (stream.isBehind(id)) stream.restartRecovery(this)
+        })
+      }
+      this.guarantor.forget(subscription)
+    })
+  }
+
+  sendCommand(subscription, command, data = {}) {
+    const {identifier} = subscription
+    return this.consumer.send({command, identifier, ...data})
+  }
+
+  receive(identifier, message, id, broadcasting) {
+    if (id == null || broadcasting == null) {
+      return this.notify(identifier, "received", message)
+    }
+
+    return this.findAll(identifier).map((subscription) => {
+      const stream = subscription.findOrCreateStream(broadcasting)
+      const receive = (message) => this.notify(subscription, "received", message)
+
+      if (stream.processMessage(id, message, receive)) {
+        stream.processQueue(receive)
+      } else {
+        stream.recover(this, id, message)
+      }
+
+      return subscription
+    })
+  }
+
+  ingestHistory(identifier, broadcasting, {messages = [], id}) {
+    return this.findAll(identifier).map((subscription) => {
+      const stream = subscription.findOrCreateStream(broadcasting, id)
+
+      stream.processMessages(messages,
+        (message) => this.notify(subscription, "received", message))
+
+      return subscription
+    })
+  }
+}

data/app/javascript/turbo/cable.js

@@ -0,0 +1,19 @@
+import { createConsumer as createActionCableConsumer } from "../action_cable"
+let consumer
+
+export async function getConsumer() {
+  return consumer || setConsumer(createConsumer().then(setConsumer))
+}
+
+export function setConsumer(newConsumer) {
+  return consumer = newConsumer
+}
+
+export async function createConsumer(...args) {
+  return createActionCableConsumer(...args)
+}
+
+export async function subscribeTo(channel, mixin) {
+  const { subscriptions } = await getConsumer()
+  return subscriptions.create(channel, mixin)
+}

data/app/javascript/turbo/cable_stream_source_element.js

@@ -0,0 +1,53 @@
+import { connectStreamSource, disconnectStreamSource } from "@hotwired/turbo"
+import { subscribeTo } from "./cable"
+import snakeize from "./snakeize"
+
+class TurboCableStreamSourceElement extends HTMLElement {
+  static observedAttributes = ["channel", "signed-stream-name"]
+
+  async connectedCallback() {
+    connectStreamSource(this)
+    this.subscription = await subscribeTo(this.channel, {
+      received: this.dispatchMessageEvent.bind(this),
+      connected: this.subscriptionConnected.bind(this),
+      disconnected: this.subscriptionDisconnected.bind(this)
+    })
+  }
+
+  disconnectedCallback() {
+    disconnectStreamSource(this)
+    if (this.subscription) this.subscription.unsubscribe()
+    this.subscriptionDisconnected()
+  }
+
+  attributeChangedCallback() {
+    if (this.subscription) {
+      this.disconnectedCallback()
+      this.connectedCallback()
+    }
+  }
+
+  dispatchMessageEvent(data) {
+    const event = new MessageEvent("message", { data })
+    return this.dispatchEvent(event)
+  }
+
+  subscriptionConnected() {
+    this.setAttribute("connected", "")
+  }
+
+  subscriptionDisconnected() {
+    this.removeAttribute("connected")
+  }
+
+  get channel() {
+    const channel = this.getAttribute("channel")
+    const signed_stream_name = this.getAttribute("signed-stream-name")
+    return { channel, signed_stream_name, ...snakeize({ ...this.dataset }) }
+  }
+}
+
+
+if (customElements.get("turbo-cable-stream-source") === undefined) {
+  customElements.define("turbo-cable-stream-source", TurboCableStreamSourceElement)
+}

data/app/javascript/turbo/fetch_requests.js

@@ -0,0 +1,59 @@
+export function encodeMethodIntoRequestBody(event) {
+  if (event.target instanceof HTMLFormElement) {
+    const { target: form, detail: { fetchOptions } } = event
+
+    form.addEventListener("turbo:submit-start", ({ detail: { formSubmission: { submitter } } }) => {
+      const body = isBodyInit(fetchOptions.body) ? fetchOptions.body : new URLSearchParams()
+      const method = determineFetchMethod(submitter, body, form)
+
+      if (!/get/i.test(method)) {
+        if (/post/i.test(method)) {
+          body.delete("_method")
+        } else {
+          body.set("_method", method)
+        }
+
+        fetchOptions.method = "post"
+      }
+    }, { once: true })
+  }
+}
+
+function determineFetchMethod(submitter, body, form) {
+  const formMethod = determineFormMethod(submitter)
+  const overrideMethod = body.get("_method")
+  const method = form.getAttribute("method") || "get"
+
+  if (typeof formMethod == "string") {
+    return formMethod
+  } else if (typeof overrideMethod == "string") {
+    return overrideMethod
+  } else {
+    return method
+  }
+}
+
+function determineFormMethod(submitter) {
+  if (submitter instanceof HTMLButtonElement || submitter instanceof HTMLInputElement) {
+    // Rails 7 ActionView::Helpers::FormBuilder#button method has an override
+    // for formmethod if the button does not have name or value attributes
+    // set, which is the default. This means that if you use <%= f.button
+    // formmethod: :delete %>, it will generate a <button name="_method"
+    // value="delete" formmethod="post">. Therefore, if the submitter's name
+    // is already _method, it's value attribute already contains the desired
+    // method.
+    if (submitter.name === '_method') {
+      return submitter.value
+    } else if (submitter.hasAttribute("formmethod")) {
+      return submitter.formMethod
+    } else {
+      return null
+    }
+  } else {
+    return null
+  }
+}
+
+function isBodyInit(body) {
+  return body instanceof FormData || body instanceof URLSearchParams
+}

data/app/javascript/turbo/index.js

@@ -0,0 +1,13 @@
+import "./cable_stream_source_element"
+
+import * as Turbo from "@hotwired/turbo"
+export { Turbo }
+
+import * as cable from "./cable"
+export { cable }
+
+import { encodeMethodIntoRequestBody } from "./fetch_requests"
+
+window.Turbo = Turbo
+
+addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody)