@quiltt/core 2.1.0 → 2.1.2

package/src/api/graphql/links/actioncable/connection_monitor.ts

@@ -0,0 +1,139 @@
+// @ts-nocheck
+import logger from './logger'
+
+// Responsible for ensuring the cable connection is in good health by validating the heartbeat pings sent from the server, and attempting
+// revival reconnections if things go astray. Internal class, not intended for direct user manipulation.
+
+const now = () => new Date().getTime()
+
+const secondsSince = (time) => (now() - time) / 1000
+
+class ConnectionMonitor {
+  constructor(connection) {
+    this.visibilityDidChange = this.visibilityDidChange.bind(this)
+    this.connection = connection
+    this.reconnectAttempts = 0
+  }
+
+  start() {
+    if (!this.isRunning()) {
+      this.startedAt = now()
+      delete this.stoppedAt
+      this.startPolling()
+      addEventListener('visibilitychange', this.visibilityDidChange)
+      logger.log(
+        `ConnectionMonitor started. stale threshold = ${this.constructor.staleThreshold} s`
+      )
+    }
+  }
+
+  stop() {
+    if (this.isRunning()) {
+      this.stoppedAt = now()
+      this.stopPolling()
+      removeEventListener('visibilitychange', this.visibilityDidChange)
+      logger.log('ConnectionMonitor stopped')
+    }
+  }
+
+  isRunning() {
+    return this.startedAt && !this.stoppedAt
+  }
+
+  recordPing() {
+    this.pingedAt = now()
+  }
+
+  recordConnect() {
+    this.reconnectAttempts = 0
+    this.recordPing()
+    delete this.disconnectedAt
+    logger.log('ConnectionMonitor recorded connect')
+  }
+
+  recordDisconnect() {
+    this.disconnectedAt = now()
+    logger.log('ConnectionMonitor recorded disconnect')
+  }
+
+  // Private
+
+  startPolling() {
+    this.stopPolling()
+    this.poll()
+  }
+
+  stopPolling() {
+    clearTimeout(this.pollTimeout)
+  }
+
+  poll() {
+    this.pollTimeout = setTimeout(() => {
+      this.reconnectIfStale()
+      this.poll()
+    }, this.getPollInterval())
+  }
+
+  getPollInterval() {
+    const { staleThreshold, reconnectionBackoffRate } = this.constructor
+    const backoff = Math.pow(1 + reconnectionBackoffRate, Math.min(this.reconnectAttempts, 10))
+    const jitterMax = this.reconnectAttempts === 0 ? 1.0 : reconnectionBackoffRate
+    const jitter = jitterMax * Math.random()
+    return staleThreshold * 1000 * backoff * (1 + jitter)
+  }
+
+  reconnectIfStale() {
+    if (this.connectionIsStale()) {
+      logger.log(
+        `ConnectionMonitor detected stale connection. reconnectAttempts = ${
+          this.reconnectAttempts
+        }, time stale = ${secondsSince(this.refreshedAt)} s, stale threshold = ${
+          this.constructor.staleThreshold
+        } s`
+      )
+      this.reconnectAttempts++
+      if (this.disconnectedRecently()) {
+        logger.log(
+          `ConnectionMonitor skipping reopening recent disconnect. time disconnected = ${secondsSince(
+            this.disconnectedAt
+          )} s`
+        )
+      } else {
+        logger.log('ConnectionMonitor reopening')
+        this.connection.reopen()
+      }
+    }
+  }
+
+  get refreshedAt() {
+    return this.pingedAt ? this.pingedAt : this.startedAt
+  }
+
+  connectionIsStale() {
+    return secondsSince(this.refreshedAt) > this.constructor.staleThreshold
+  }
+
+  disconnectedRecently() {
+    return (
+      this.disconnectedAt && secondsSince(this.disconnectedAt) < this.constructor.staleThreshold
+    )
+  }
+
+  visibilityDidChange() {
+    if (document.visibilityState === 'visible') {
+      setTimeout(() => {
+        if (this.connectionIsStale() || !this.connection.isOpen()) {
+          logger.log(
+            `ConnectionMonitor reopening stale connection on visibilitychange. visibilityState = ${document.visibilityState}`
+          )
+          this.connection.reopen()
+        }
+      }, 200)
+    }
+  }
+}
+
+ConnectionMonitor.staleThreshold = 6 // Server::Connections::BEAT_INTERVAL * 2 (missed two pings)
+ConnectionMonitor.reconnectionBackoffRate = 0.15
+
+export default ConnectionMonitor

package/src/api/graphql/links/actioncable/consumer.ts

@@ -0,0 +1,87 @@
+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 class Consumer {
+  _url: string
+  subscriptions: Subscriptions
+  connection: Connection
+  subprotocols: Array<string>
+
+  constructor(url: string) {
+    this._url = url
+    this.subscriptions = new Subscriptions(this)
+    this.connection = new Connection(this)
+    this.subprotocols = []
+  }
+
+  get url() {
+    return createWebSocketURL(this._url)
+  }
+
+  send(data: object) {
+    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: string) {
+    this.subprotocols = [...this.subprotocols, subprotocol]
+  }
+}
+
+export function createWebSocketURL(url: string | (() => string)): string {
+  if (typeof url === 'function') {
+    url = url()
+  }
+
+  if (url && !/^wss?:/i.test(url)) {
+    const a = document.createElement('a')
+    a.href = url
+    // eslint-disable-next-line no-self-assign
+    a.href = a.href
+    a.protocol = a.protocol.replace('http', 'ws')
+    return a.href
+  } else {
+    return url
+  }
+}
+
+export default Consumer

package/src/api/graphql/links/actioncable/index.ts

@@ -0,0 +1,35 @@
+'use client'
+
+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: string) {
+  const element = document.head.querySelector(`meta[name='action-cable-${name}']`)
+  if (element) {
+    return element.getAttribute('content')
+  }
+}

package/src/api/graphql/links/actioncable/internal.ts

@@ -0,0 +1,19 @@
+const INTERNAL = {
+  message_types: {
+    welcome: 'welcome',
+    disconnect: 'disconnect',
+    ping: 'ping',
+    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'],
+}
+
+export default INTERNAL

package/src/api/graphql/links/actioncable/logger.ts

@@ -0,0 +1,16 @@
+import { debugging } from '../../../../configuration'
+import adapters from './adapters'
+
+class Logger {
+  enabled = debugging
+
+  log(...messages: Array<string>) {
+    if (adapters.logger && this.enabled) {
+      messages.push(Date.now().toString())
+      adapters.logger.log('[ActionCable]', ...messages)
+    }
+  }
+}
+
+export const logger = new Logger()
+export default logger

package/src/api/graphql/links/actioncable/subscription.ts

@@ -0,0 +1,44 @@
+import type { Consumer } from './consumer'
+
+export type Data = { [id: string]: string | object | null | undefined }
+
+const extend = function (object: Data, properties: Data) {
+  if (properties !== null) {
+    for (const key in properties) {
+      const value = properties[key]
+      object[key] = value
+    }
+  }
+  return object
+}
+
+export class Subscription {
+  consumer: Consumer
+  identifier: string
+
+  constructor(consumer: Consumer, params: Data = {}, mixin: Data) {
+    this.consumer = consumer
+    this.identifier = JSON.stringify(params)
+    extend(this as unknown as Data, mixin)
+  }
+
+  // Perform a channel action with the optional data passed as an attribute
+  perform(action: string, data: Data = {}) {
+    data.action = action
+    return this.send(data)
+  }
+
+  send(data: object) {
+    return this.consumer.send({
+      command: 'message',
+      identifier: this.identifier,
+      data: JSON.stringify(data),
+    })
+  }
+
+  unsubscribe() {
+    return this.consumer.subscriptions.remove(this)
+  }
+}
+
+export default Subscription

package/src/api/graphql/links/actioncable/subscription_guarantor.ts

@@ -0,0 +1,54 @@
+import logger from './logger'
+import type { Subscription } from './subscription'
+import type { Subscriptions } from './subscriptions'
+
+// Responsible for ensuring channel subscribe command is confirmed, retrying until confirmation is received.
+// Internal class, not intended for direct user manipulation.
+
+class SubscriptionGuarantor {
+  subscriptions: Subscriptions
+  pendingSubscriptions: Array<Subscription>
+  retryTimeout: ReturnType<typeof setTimeout> | undefined
+
+  constructor(subscriptions: Subscriptions) {
+    this.subscriptions = subscriptions
+    this.pendingSubscriptions = []
+  }
+
+  guarantee(subscription: 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: 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

package/src/api/graphql/links/actioncable/subscriptions.ts

@@ -0,0 +1,113 @@
+import type { Consumer } from './consumer'
+import logger from './logger'
+import type { Data } from './subscription'
+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 class Subscriptions {
+  consumer: Consumer
+  guarantor: SubscriptionGuarantor
+  subscriptions: Array<Subscription>
+
+  constructor(consumer: Consumer) {
+    this.consumer = consumer
+    this.guarantor = new SubscriptionGuarantor(this)
+    this.subscriptions = []
+  }
+
+  create(channelName: string, mixin: Data) {
+    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: Subscription) {
+    this.subscriptions.push(subscription)
+    this.consumer.ensureActiveConnection()
+    this.notify(subscription, 'initialized')
+    this.subscribe(subscription)
+    return subscription
+  }
+
+  remove(subscription: Subscription) {
+    this.forget(subscription)
+    if (!this.findAll(subscription.identifier).length) {
+      this.sendCommand(subscription, 'unsubscribe')
+    }
+    return subscription
+  }
+
+  reject(identifier: string) {
+    return this.findAll(identifier).map((subscription) => {
+      this.forget(subscription)
+      this.notify(subscription, 'rejected')
+      return subscription
+    })
+  }
+
+  forget(subscription: Subscription) {
+    this.guarantor.forget(subscription)
+    this.subscriptions = this.subscriptions.filter((s) => s !== subscription)
+    return subscription
+  }
+
+  findAll(identifier: string) {
+    return this.subscriptions.filter((s) => s.identifier === identifier)
+  }
+
+  reload() {
+    return this.subscriptions.map((subscription) => this.subscribe(subscription))
+  }
+
+  notifyAll(callbackName: string, ...args: any[]) {
+    return this.subscriptions.map((subscription) =>
+      this.notify(subscription, callbackName, ...args)
+    )
+  }
+
+  notify(subscription: Subscription, callbackName: string, ...args: any[]) {
+    let subscriptions
+    if (typeof subscription === 'string') {
+      subscriptions = this.findAll(subscription)
+    } else {
+      subscriptions = [subscription]
+    }
+
+    return subscriptions.map((subscription: any) =>
+      typeof subscription[callbackName] === 'function'
+        ? subscription[callbackName](...args)
+        : undefined
+    )
+  }
+
+  subscribe(subscription: Subscription) {
+    if (this.sendCommand(subscription, 'subscribe')) {
+      this.guarantor.guarantee(subscription)
+    }
+  }
+
+  confirmSubscription(identifier: string) {
+    logger.log(`Subscription confirmed ${identifier}`)
+    this.findAll(identifier).map((subscription) => this.guarantor.forget(subscription))
+  }
+
+  sendCommand(subscription: Subscription, command: string) {
+    const { identifier } = subscription
+    return this.consumer.send({ command, identifier })
+  }
+}
+
+export default Subscriptions

package/src/api/graphql/links/index.ts

@@ -0,0 +1,9 @@
+export * from './AuthLink'
+export * from './BatchHttpLink'
+export * from './ErrorLink'
+export * from './ForwardableLink'
+export * from './HttpLink'
+export * from './RetryLink'
+export * from './SubscriptionLink'
+export * from './TerminatingLink'
+export * from './VersionLink'

package/src/api/index.ts

@@ -0,0 +1,2 @@
+export * from './graphql'
+export * from './rest'

package/src/api/rest/AuthAPI.ts

@@ -0,0 +1,115 @@
+import type { AxiosRequestConfig, AxiosResponse } from 'axios'
+import axios from 'axios'
+
+import { endpointAuth } from '../../configuration'
+
+export enum AuthStrategies {
+  Email = 'email',
+  Phone = 'phone',
+}
+
+interface EmailInput {
+  email: string
+  phone?: never
+}
+
+interface PhoneInput {
+  phone: string
+  email?: never
+}
+
+export type UsernamePayload = EmailInput | PhoneInput
+export type PasscodePayload = UsernamePayload & { passcode: string }
+
+type SessionData = { token: string }
+type NoContentData = void
+type UnauthorizedData = { message: string; instruction: string }
+export type UnprocessableData = { [attribute: string]: Array<string> }
+
+type Ping = SessionData | UnauthorizedData
+type Indentify = SessionData | NoContentData | UnprocessableData
+type Authenticate = SessionData | UnauthorizedData | UnprocessableData
+type Revoke = NoContentData | UnauthorizedData
+
+export type SessionResponse = AxiosResponse<SessionData>
+export type UnprocessableResponse = AxiosResponse<UnprocessableData>
+
+// https://www.quiltt.dev/api-reference/rest/auth#
+export class AuthAPI {
+  clientId: string | undefined
+
+  constructor(clientId?: string | undefined) {
+    this.clientId = clientId
+  }
+
+  /**
+   * Response Statuses:
+   *  - 200: OK           -> Session is Valid
+   *  - 401: Unauthorized -> Session is Invalid
+   */
+  ping = (token: string) => {
+    return axios.get<Ping>(endpointAuth, this.config(token))
+  }
+
+  /**
+   * Response Statuses:
+   *  - 201: Created              -> Profile Created, New Session Returned
+   *  - 202: Accepted             -> Profile Found, MFA Code Sent for `authenticate`
+   *  - 422: Unprocessable Entity -> Invalid Payload
+   */
+  identify = (payload: UsernamePayload) => {
+    return axios.post<Indentify>(endpointAuth, this.body(payload), this.config())
+  }
+
+  /**
+   * Response Statuses:
+   *  - 201: Created              -> MFA Validated, New Session Returned
+   *  - 401: Unauthorized         -> MFA Invalid
+   *  - 422: Unprocessable Entity -> Invalid Payload
+   */
+  authenticate = (payload: PasscodePayload) => {
+    return axios.put<Authenticate>(endpointAuth, this.body(payload), this.config())
+  }
+
+  /**
+   * Response Statuses:
+   *  - 204: No Content   -> Session Revoked
+   *  - 401: Unauthorized -> Session Not Found
+   */
+  revoke = (token: string) => {
+    return axios.delete<Revoke>(endpointAuth, this.config(token))
+  }
+
+  private config = (token?: string): AxiosRequestConfig => {
+    const headers: { [id: string]: string } = {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    }
+
+    if (token) {
+      headers.Authorization = `Bearer ${token}`
+    }
+
+    return {
+      headers: headers,
+      validateStatus: this.validateStatus,
+    }
+  }
+
+  private validateStatus = (status: number) => status < 500
+
+  private body = (payload: any) => {
+    if (!this.clientId) {
+      console.error('Quiltt Client ID is not set. Unable to identify & authenticate')
+    }
+
+    return {
+      session: {
+        deploymentId: this.clientId, // Rename API?
+        ...payload,
+      },
+    }
+  }
+}
+
+export default AuthAPI

package/src/api/rest/index.ts

@@ -0,0 +1 @@
+export * from './AuthAPI'

package/src/configuration.ts

@@ -0,0 +1,45 @@
+import { name as packageName, version as packageVersion } from '../package.json'
+
+const QUILTT_API_INSECURE = (() => {
+  try {
+    return process.env.QUILTT_API_INSECURE
+  } catch {
+    return undefined
+  }
+})()
+
+const QUILTT_API_DOMAIN = (() => {
+  try {
+    return process.env.QUILTT_API_DOMAIN
+  } catch {
+    return undefined
+  }
+})()
+
+const QUILTT_DEBUG = (() => {
+  try {
+    return !!process.env.QUILTT_DEBUG || process.env.NODE_ENV !== 'production'
+  } catch {
+    return false
+  }
+})()
+
+const domain = QUILTT_API_DOMAIN || 'quiltt.io'
+const protocolHttp = `http${QUILTT_API_INSECURE ? '' : 's'}`
+const protocolWebsockets = `ws${QUILTT_API_DOMAIN ? '' : 's'}`
+
+export const debugging = QUILTT_DEBUG
+export const endpointAuth = `${protocolHttp}://auth.${domain}/v1/users/session`
+export const endpointGraphQL = `${protocolHttp}://api.${domain}/v1/graphql`
+export const endpointWebsockets = `${protocolWebsockets}://api.${domain}/websockets`
+export const version = `${packageName}: v${packageVersion}`
+
+const Config = {
+  debugging,
+  endpointAuth,
+  endpointGraphQL,
+  endpointWebsockets,
+  version,
+}
+
+export default Config

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './JsonWebToken'
+export * from './Observable'
+export * from './Storage'
+export * from './Timeoutable'
+export * from './api'
+export * from './types'