@quiltt/core 2.1.0 → 2.1.2

package/src/Storage/index.ts

@@ -0,0 +1,93 @@
+import type { Maybe } from '../types'
+
+import type { Observer } from '../Observable'
+import { LocalStorage } from './Local'
+import { MemoryStorage } from './Memory'
+
+/**
+ * This is wraps both local and memory storage to create a unified interface, that
+ * allows you to subscribe to all either changes made within this window, or changes
+ * made by other windows.
+ */
+export class Storage<T> {
+  private memoryStore = new MemoryStorage<T>()
+  private localStore = new LocalStorage<T>()
+  private observers: { [key: string]: Observer<T>[] } = {}
+  private monitors: Set<string> = new Set()
+
+  /**
+   * Checks memoryStorage before falling back to localStorage.
+   */
+  get = (key: string): Maybe<T> | undefined => {
+    this.monitorLocalStorageChanges(key)
+
+    let state = this.memoryStore.get(key)
+
+    if (state === undefined) {
+      state = this.localStore.get(key)
+    }
+
+    return state
+  }
+
+  /**
+   * We don't trust localStorage to always be present, so we can't rely on it to
+   * update memoryStorage based on emitted changes. So we manage our own
+   * emitting while using the underlying events to keep memoryStore in sync with
+   * localStore.
+   */
+  set = (key: string, newState: Maybe<T> | undefined) => {
+    this.monitorLocalStorageChanges(key)
+
+    this.localStore.set(key, newState)
+    this.memoryStore.set(key, newState)
+
+    this.observers[key]?.forEach((update) => update(newState))
+  }
+
+  /**
+   * Allows you to subscribe to all changes in memory or local storage as a
+   * single event.
+   */
+  subscribe = (key: string, observer: Observer<T>) => {
+    if (!this.observers[key]) this.observers[key] = []
+
+    this.observers[key].push(observer)
+  }
+
+  unsubscribe = (key: string, observer: Observer<T>) => {
+    this.observers[key] = this.observers[key]?.filter((update) => update !== observer)
+  }
+
+  /**
+   * Sets bubble the changes down the stack starting with memoryStore and then
+   * localStore. memoryStore will emit changes to everything within the current
+   * window context, while localStore will emit changes to every other window
+   * context.
+   *
+   * To ensure that the other windows are updated correctly, changes to localStore
+   * need to be subscribed and updated to in memory store, which then may be subscribed
+   * to outside of storage.
+   */
+  private monitorLocalStorageChanges = (key: string) => {
+    if (this.monitors.has(key)) return
+    this.monitors.add(key)
+
+    this.localStore.subscribe(key, (nextState) => {
+      const prevValue = this.memoryStore.get(key)
+      const newState = nextState instanceof Function ? nextState(prevValue) : nextState
+
+      this.memoryStore.set(key, newState)
+      this.observers[key]?.forEach((update) => update(newState))
+    })
+  }
+}
+
+export * from './Local'
+export * from './Memory'
+
+/**
+ * This is an singleton to share the memory states across all instances; This
+ * basically acts like shared memory when there is no localStorage.
+ */
+export const GlobalStorage = new Storage<any>()

package/src/Timeoutable.ts

@@ -0,0 +1,32 @@
+import type { Observer } from './Observable'
+
+/**
+ * This is designed to support singletons to timeouts that can broadcast
+ * to any observers, preventing race conditions with multiple timeouts.
+ */
+export class Timeoutable {
+  private timeout?: ReturnType<typeof setTimeout>
+  private observers: Observer<void>[] = []
+
+  set = (callback: () => void, delay: number | undefined) => {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+
+    this.observers.push(callback)
+    this.timeout = setTimeout(this.broadcast.bind(this), delay)
+  }
+
+  clear = (observer: Observer<void>) => {
+    this.observers = this.observers.filter((callback) => callback !== observer)
+  }
+
+  // Only sends to the 1st listener, but ensures that someone is notified
+  private broadcast = () => {
+    if (this.observers.length === 0) return
+
+    this.observers[0](undefined)
+  }
+}
+
+export default Timeoutable

package/src/api/graphql/client.ts

@@ -0,0 +1,48 @@
+import type { ApolloClientOptions, Operation } from '@apollo/client/index.js'
+import { ApolloClient, ApolloLink } from '@apollo/client/index.js'
+
+import { debugging } from '../../configuration'
+import {
+  AuthLink,
+  BatchHttpLink,
+  ErrorLink,
+  ForwardableLink,
+  HttpLink,
+  RetryLink,
+  SubscriptionLink,
+  VersionLink,
+} from './links'
+
+export type QuilttClientOptions<T> = Omit<ApolloClientOptions<T>, 'link'>
+
+export class QuilttClient<T> extends ApolloClient<T> {
+  constructor(options: QuilttClientOptions<T>) {
+    if (!options.connectToDevTools) options.connectToDevTools = debugging
+
+    const isSubscriptionOperation = (operation: Operation) => {
+      return operation.query.definitions.some(
+        // @ts-ignore
+        ({ kind, operation }) => kind === 'OperationDefinition' && operation === 'subscription'
+      )
+    }
+
+    const isBatchable = (operation: Operation) => {
+      return operation.getContext().batchable ?? true
+    }
+
+    const authLink = new AuthLink()
+    const subscriptionsLink = new SubscriptionLink()
+
+    const quilttLink = ApolloLink.from([VersionLink, authLink, ErrorLink, RetryLink])
+      .split(isSubscriptionOperation, subscriptionsLink, ForwardableLink)
+      .split(isBatchable, BatchHttpLink, HttpLink)
+
+    super({
+      link: quilttLink,
+      ...options,
+    })
+  }
+}
+
+export { InMemoryCache, gql, useMutation, useQuery, useSubscription } from '@apollo/client/index.js'
+export type { NormalizedCacheObject, OperationVariables } from '@apollo/client/index.js'

package/src/api/graphql/index.ts

@@ -0,0 +1,2 @@
+export * from './links'
+export * from './client'

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

@@ -0,0 +1,93 @@
+import { GlobalStorage } from '@/Storage'
+import type { FetchResult, NextLink, Operation } from '@apollo/client/core/index.js'
+import { ApolloLink, Observable } from '@apollo/client/core/index.js'
+import { print } from 'graphql'
+import { endpointWebsockets } from '../../../configuration'
+import type { Consumer } from './actioncable'
+import { createConsumer } from './actioncable'
+
+type RequestResult = FetchResult<
+  { [key: string]: unknown },
+  Record<string, unknown>,
+  Record<string, unknown>
+>
+type ConnectionParams = object | ((operation: Operation) => object)
+
+class ActionCableLink extends ApolloLink {
+  cables: { [id: string]: Consumer }
+  channelName: string
+  actionName: string
+  connectionParams: ConnectionParams
+
+  constructor(options: {
+    channelName?: string
+    actionName?: string
+    connectionParams?: ConnectionParams
+  }) {
+    super()
+    this.cables = {}
+    this.channelName = options.channelName || 'GraphqlChannel'
+    this.actionName = options.actionName || 'execute'
+    this.connectionParams = options.connectionParams || {}
+  }
+
+  // Interestingly, this link does _not_ call through to `next` because
+  // instead, it sends the request to ActionCable.
+  request(operation: Operation, _next: NextLink): Observable<RequestResult> | null {
+    const token = GlobalStorage.get('session')
+
+    if (!token) {
+      console.warn(`QuilttLink attempted to send an unauthenticated Subscription`)
+      return null
+    }
+
+    if (!this.cables[token]) {
+      this.cables[token] = createConsumer(endpointWebsockets + (token ? `?token=${token}` : ''))
+    }
+
+    return new Observable((observer) => {
+      const channelId = Math.round(Date.now() + Math.random() * 100000).toString(16)
+      const actionName = this.actionName
+      const connectionParams =
+        typeof this.connectionParams === 'function'
+          ? this.connectionParams(operation)
+          : this.connectionParams
+
+      const channel = this.cables[token].subscriptions.create(
+        Object.assign(
+          {},
+          {
+            channel: this.channelName,
+            channelId: channelId,
+          },
+          connectionParams
+        ),
+        {
+          connected: () => {
+            channel.perform(actionName, {
+              query: operation.query ? print(operation.query) : null,
+              variables: operation.variables,
+              // This is added for persisted operation support:
+              operationId: (operation as { operationId?: string }).operationId,
+              operationName: operation.operationName,
+            })
+          },
+
+          received: (payload: { result: RequestResult; more: any }) => {
+            if (payload?.result?.data || payload?.result?.errors) {
+              observer.next(payload.result)
+            }
+
+            if (!payload.more) {
+              observer.complete()
+            }
+          },
+        }
+      )
+      // Make the ActionCable subscription behave like an Apollo subscription
+      return Object.assign(channel, { closed: false })
+    })
+  }
+}
+
+export default ActionCableLink

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

@@ -0,0 +1,32 @@
+import type { FetchResult, NextLink, Observable, Operation } from '@apollo/client/index.js'
+import { ApolloLink } from '@apollo/client/index.js'
+
+import { GlobalStorage } from '@/Storage'
+
+/**
+ * unauthorizedCallback only triggers in the event the token is present, and
+ * returns the token; This allows sessions to be forgotten without race conditions
+ * causing null sessions to kill valid sessions, or invalid sessions for killing
+ * valid sessions during rotation and networking weirdness.
+ */
+export class AuthLink extends ApolloLink {
+  request(operation: Operation, forward: NextLink): Observable<FetchResult> | null {
+    const token = GlobalStorage.get('session')
+
+    if (!token) {
+      console.warn(`QuilttLink attempted to send an unauthenticated Query`)
+      return null
+    }
+
+    operation.setContext(({ headers = {} }) => ({
+      headers: {
+        ...headers,
+        authorization: `Bearer ${token}`,
+      },
+    }))
+
+    return forward(operation)
+  }
+}
+
+export default AuthLink

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

@@ -0,0 +1,12 @@
+import { BatchHttpLink as ApolloHttpLink } from '@apollo/client/link/batch-http/index.js'
+
+import fetch from 'cross-fetch'
+
+import { endpointGraphQL } from '../../../configuration'
+
+export const BatchHttpLink = new ApolloHttpLink({
+  uri: endpointGraphQL,
+  fetch,
+})
+
+export default BatchHttpLink

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

@@ -0,0 +1,23 @@
+import { GlobalStorage } from '@/Storage'
+
+import type { ServerError } from '@apollo/client/index.js'
+import { onError } from '@apollo/client/link/error/index.js'
+
+export const ErrorLink = onError(({ graphQLErrors, networkError }) => {
+  if (graphQLErrors) {
+    graphQLErrors.forEach(({ message, locations, path }) => {
+      console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
+    })
+  }
+
+  if (networkError) {
+    if ((networkError as ServerError).statusCode === 401) {
+      console.warn('[Authentication error]:', networkError)
+      GlobalStorage.set('session', null)
+    } else {
+      console.warn('[Network error]:', networkError)
+    }
+  }
+})
+
+export default ErrorLink

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

@@ -0,0 +1,5 @@
+import { ApolloLink } from '@apollo/client/index.js'
+
+export const ForwardableLink = new ApolloLink((operation, forward) => forward(operation))
+
+export default ForwardableLink

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

@@ -0,0 +1,12 @@
+import { HttpLink as ApolloHttpLink } from '@apollo/client/link/http/index.js'
+
+import fetch from 'cross-fetch'
+
+import { endpointGraphQL } from '../../../configuration'
+
+export const HttpLink = new ApolloHttpLink({
+  uri: endpointGraphQL,
+  fetch,
+})
+
+export default HttpLink

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

@@ -0,0 +1,10 @@
+import type { ServerError } from '@apollo/client/index.js'
+import { RetryLink as ApolloRetryLink } from '@apollo/client/link/retry/index.js'
+
+export const RetryLink = new ApolloRetryLink({
+  attempts: {
+    retryIf: (error: ServerError, _operation) => error.statusCode >= 500,
+  },
+})
+
+export default RetryLink

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

@@ -0,0 +1,11 @@
+'use client'
+
+import ActionCableLink from './ActionCableLink'
+
+export class SubscriptionLink extends ActionCableLink {
+  constructor() {
+    super({ channelName: 'GraphQLChannel' })
+  }
+}
+
+export default SubscriptionLink

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

@@ -0,0 +1,5 @@
+import { ApolloLink } from '@apollo/client/index.js'
+
+export const TerminatingLink = new ApolloLink(() => null)
+
+export default TerminatingLink

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

@@ -0,0 +1,15 @@
+import { ApolloLink } from '@apollo/client/index.js'
+
+import { version } from '../../../configuration'
+
+export const VersionLink = new ApolloLink((operation, forward) => {
+  operation.setContext(({ headers = {} }) => ({
+    headers: {
+      ...headers,
+      'Quiltt-Client-Version': version,
+    },
+  }))
+  return forward(operation)
+})
+
+export default VersionLink

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

@@ -0,0 +1,4 @@
+export default {
+  logger: typeof globalThis !== 'undefined' ? globalThis.console : undefined,
+  WebSocket: typeof globalThis !== 'undefined' ? globalThis.WebSocket : undefined,
+}

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

@@ -0,0 +1,191 @@
+// @ts-nocheck
+import adapters from './adapters'
+import ConnectionMonitor from './connection_monitor'
+import INTERNAL from './internal'
+import logger from './logger'
+
+// Encapsulate the cable connection held by the consumer. This is an internal class not intended for direct user manipulation.
+
+const { message_types, protocols } = INTERNAL
+const supportedProtocols = protocols.slice(0, protocols.length - 1)
+
+const indexOf = [].indexOf
+
+class Connection {
+  constructor(consumer) {
+    this.open = this.open.bind(this)
+    this.consumer = consumer
+    this.subscriptions = this.consumer.subscriptions
+    this.monitor = new ConnectionMonitor(this)
+    this.disconnected = true
+  }
+
+  send(data) {
+    if (this.isOpen()) {
+      this.webSocket.send(JSON.stringify(data))
+      return true
+    } else {
+      return false
+    }
+  }
+
+  open() {
+    if (this.isActive()) {
+      logger.log(`Attempted to open WebSocket, but existing socket is ${this.getState()}`)
+      return false
+    } else {
+      const socketProtocols = [...protocols, ...(this.consumer.subprotocols || [])]
+      logger.log(
+        `Opening WebSocket, current state is ${this.getState()}, subprotocols: ${socketProtocols}`
+      )
+      if (this.webSocket) {
+        this.uninstallEventHandlers()
+      }
+      this.webSocket = new adapters.WebSocket(this.consumer.url, socketProtocols)
+      this.installEventHandlers()
+      this.monitor.start()
+      return true
+    }
+  }
+
+  close({ allowReconnect } = { allowReconnect: true }) {
+    if (!allowReconnect) {
+      this.monitor.stop()
+    }
+    // Avoid closing websockets in a "connecting" state due to Safari 15.1+ bug. See: https://github.com/rails/rails/issues/43835#issuecomment-1002288478
+    if (this.isOpen()) {
+      return this.webSocket.close()
+    }
+  }
+
+  reopen() {
+    logger.log(`Reopening WebSocket, current state is ${this.getState()}`)
+    if (this.isActive()) {
+      try {
+        return this.close()
+      } catch (error) {
+        logger.log('Failed to reopen WebSocket', error)
+      } finally {
+        logger.log(`Reopening WebSocket in ${this.constructor.reopenDelay}ms`)
+        setTimeout(this.open, this.constructor.reopenDelay)
+      }
+    } else {
+      return this.open()
+    }
+  }
+
+  getProtocol() {
+    if (this.webSocket) {
+      return this.webSocket.protocol
+    }
+  }
+
+  isOpen() {
+    return this.isState('open')
+  }
+
+  isActive() {
+    return this.isState('open', 'connecting')
+  }
+
+  triedToReconnect() {
+    return this.monitor.reconnectAttempts > 0
+  }
+
+  // Private
+
+  isProtocolSupported() {
+    return indexOf.call(supportedProtocols, this.getProtocol()) >= 0
+  }
+
+  isState(...states) {
+    return indexOf.call(states, this.getState()) >= 0
+  }
+
+  getState() {
+    if (this.webSocket) {
+      for (const state in adapters.WebSocket) {
+        if (adapters.WebSocket[state] === this.webSocket.readyState) {
+          return state.toLowerCase()
+        }
+      }
+    }
+    return null
+  }
+
+  installEventHandlers() {
+    for (const eventName in this.events) {
+      const handler = this.events[eventName].bind(this)
+      this.webSocket[`on${eventName}`] = handler
+    }
+  }
+
+  uninstallEventHandlers() {
+    for (const eventName in this.events) {
+      this.webSocket[`on${eventName}`] = function () {}
+    }
+  }
+}
+
+Connection.reopenDelay = 500
+
+Connection.prototype.events = {
+  message(event) {
+    if (!this.isProtocolSupported()) {
+      return
+    }
+    const { identifier, message, reason, reconnect, type } = JSON.parse(event.data)
+    switch (type) {
+      case message_types.welcome:
+        if (this.triedToReconnect()) {
+          this.reconnectAttempted = true
+        }
+        this.monitor.recordConnect()
+        return this.subscriptions.reload()
+      case message_types.disconnect:
+        logger.log(`Disconnecting. Reason: ${reason}`)
+        return this.close({ allowReconnect: reconnect })
+      case message_types.ping:
+        return this.monitor.recordPing()
+      case message_types.confirmation:
+        this.subscriptions.confirmSubscription(identifier)
+        if (this.reconnectAttempted) {
+          this.reconnectAttempted = false
+          return this.subscriptions.notify(identifier, 'connected', { reconnected: true })
+        } else {
+          return this.subscriptions.notify(identifier, 'connected', { reconnected: false })
+        }
+      case message_types.rejection:
+        return this.subscriptions.reject(identifier)
+      default:
+        return this.subscriptions.notify(identifier, 'received', message)
+    }
+  },
+
+  open() {
+    logger.log(`WebSocket onopen event, using '${this.getProtocol()}' subprotocol`)
+    this.disconnected = false
+    if (!this.isProtocolSupported()) {
+      logger.log('Protocol is unsupported. Stopping monitor and disconnecting.')
+      return this.close({ allowReconnect: false })
+    }
+  },
+
+  close(_event) {
+    logger.log('WebSocket onclose event')
+    if (this.disconnected) {
+      return
+    }
+    this.disconnected = true
+    this.monitor.recordDisconnect()
+    return this.subscriptions.notifyAll('disconnected', {
+      willAttemptReconnect: this.monitor.isRunning(),
+    })
+  },
+
+  error() {
+    logger.log('WebSocket onerror event')
+  },
+}
+
+export default Connection