@raclettejs/core 0.0.1

package/services/frontend/src/core/lib/eventEmitter.ts

@@ -0,0 +1,148 @@
+import log from "@racletteCore/lib/logger"
+const onceTimeoutMs = 5000
+/**
+ * EventEmiter
+ * @class
+ *
+ * This class mimicks the nodejs EventEmitter. It is primarily used as the
+ * global eventbus so different parts of the application can communicate with
+ * each other without being tightly coupled.
+ * e.g. store -> http client, component -> http client, component -> socket etc.
+ */
+
+class EventEmitter {
+  /**
+   * @param {array} eventWhitelist
+   * @param {array} eventWildcards
+   */
+  constructor(eventWhitelist, eventWildcards) {
+    /**
+     * @type {object} events - container to hold key valye pairs of events/functions
+     */
+    this.events = {}
+    /**
+     * @type {object} eventWhitelist - map of available events
+     * For the default eventbus see ./lib/eventWhitelist.ts
+     */
+    this.eventWhitelist = eventWhitelist
+    this.eventWildcards = eventWildcards
+  }
+
+  /**
+   * on
+   *
+   * @param {string} event - event name
+   * @param {function} listener - callback function
+   */
+  on(event, listener) {
+    if (!this.isValid(event)) {
+      return false
+    }
+    // log.event(`${event} on registered`)
+    if (typeof this.events[event] !== "object") {
+      this.events[event] = []
+    }
+    this.events[event].push(listener)
+
+    return () => this.removeListener(event, listener)
+  }
+
+  /**
+   * removeListener
+   *
+   * @param {string} event - event name
+   * @param {function} listener - callback function
+   */
+  removeListener(event, listener) {
+    // log.event(`${event} listener removed`)
+    if (typeof this.events[event] === "object") {
+      const idx = this.events[event].indexOf(listener)
+
+      if (idx > -1) {
+        this.events[event].splice(idx, 1)
+      }
+    }
+  }
+
+  /**
+   * emit
+   *
+   * @param {string} event - event name
+   * @param {string|object|boolean} - arbitrary arguements
+   */
+  emit(event, ...args) {
+    if (!this.isValid(event)) {
+      return false
+    }
+    if (typeof this.events[event] === "object") {
+      this.events[event].forEach((listener) => listener.apply(this, args))
+    }
+  }
+
+  /**
+   * once
+   *
+   * @param {string} event - event name
+   * @param {string|object|boolean} - arbitrary arguements
+   */
+  once(event, listener): Function | boolean {
+    if (!this.isValid(event)) {
+      return false
+    }
+    let remove
+    // Create a timeout to log an error if not triggered
+    const timeoutId = setTimeout(() => {
+      log.event(
+        `Once listener for ${event} not triggered within ${onceTimeoutMs / 1000} second, will now be removed`,
+      )
+      remove()
+      listener.apply(this, { error: "notTriggered" })
+    }, onceTimeoutMs)
+
+    log.event(`${event} once registered`)
+    remove = this.on(event, (...args) => {
+      log.event(`${event} once received`, args)
+      // Clear the timeout when the event is received
+      clearTimeout(timeoutId)
+      remove()
+      listener.apply(this, args)
+    })
+  }
+
+  /**
+   * isValid
+   *
+   * If an eventWhitelist is present this method checks if the given event exists as
+   * key in the map.
+   * @param {string} event - event name
+   */
+  isValid(event) {
+    // early return if we don't have an eventWhitelist
+    if (!this.eventWhitelist) {
+      return true
+    }
+    if (this.eventWildcards) {
+      let isValid = false
+
+      this.eventWildcards.forEach((namePartial) => {
+        if (event.indexOf(namePartial) > -1) {
+          isValid = true
+        }
+      })
+      if (isValid) {
+        return true
+      }
+    }
+    // throw error if the event is unknown
+    if (!this.eventWhitelist.indexOf(event) < 0) {
+      throw new Error(
+        `Unkown event ${event}, please check or update ./lib/eventWhitelist.ts`,
+      )
+    }
+
+    // return true if the event exists in the eventWhitelist
+    return true
+  }
+}
+
+export default EventEmitter

package/services/frontend/src/core/lib/eventWhitelist.ts

@@ -0,0 +1,28 @@
+/**
+ * Event Dictionary
+ *
+ * we keep a map of all events the app with some documentation, Since we use
+ * events for internal communication between components, some events report
+ * change of state, others represent a request addressed to a specific actor,
+ * e.g. 'asks the http client to get x'
+ *
+ * @TODO
+ * - find clear naming policy
+ * - use speaking event names, even though they are longer
+ * - distinguish between a information and request (e.g. store_dispatch is a request to the store)
+ */
+const eventWhitelist = [
+  "socket_joinRoom",
+  "socket_leaveRoom",
+  "socket_dataUpdated",
+  "ui_setupProject",
+  "ui_addToSnackBar",
+]
+const eventWildcards = [
+  "query_deleted",
+  "store_actionResolved",
+  "socket_created",
+  "socket_deleted",
+]
+
+export { eventWhitelist, eventWildcards }

package/services/frontend/src/core/lib/getEnvVariable.ts

@@ -0,0 +1,50 @@
+/**
+ * Environment variable helper that works with window.configs system for production
+ */
+import logger from "@racletteCore/lib/logger"
+declare global {
+  interface Window {
+    configs?: {
+      RACLETTE_DEBUG_MODE?: string
+      RACLETTE_SERVER_BASE_URL?: string
+      RACLETTE_SOCKET_URL?: string
+      [key: string]: string | undefined
+    }
+  }
+}
+
+const getEnvVariable = (name: string): string => {
+  // First check runtime injected config (production)
+  if (window.configs && window.configs[name] !== undefined) {
+    const value = window.configs[name]
+    return value
+  }
+
+  // Fallback to Vite build-time variables (development)
+  if (typeof import.meta !== "undefined" && import.meta.env) {
+    const buildTimeValue = import.meta.env[name]
+    if (buildTimeValue !== undefined) {
+      return buildTimeValue
+    }
+  }
+
+  // Final defaults
+  const defaults: Record<string, string> = {
+    RACLETTE_SERVER_BASE_URL: "/api",
+    RACLETTE_SOCKET_URL:
+      typeof window !== "undefined" ? window.location.origin : "",
+    RACLETTE_DEBUG_MODE: "false",
+  }
+
+  if (defaults[name]) {
+    return defaults[name]
+  }
+
+  logger.error(
+    `❌ Environment variable ${name} is not defined and has no default value`,
+  )
+
+  return ""
+}
+
+export default getEnvVariable

package/services/frontend/src/core/lib/httpClient.ts

@@ -0,0 +1,391 @@
+/**
+ * this file holds functions to manage the http client
+ */
+import axios from "axios"
+import log from "../lib/logger"
+import { rememberLastDataUpdateRetrieval } from "@racletteCore/lib/dataHelper"
+
+const DEFAULT_TIMEOUT = 10000
+
+// Axios client (existing implementation)
+const axiosClient = axios.create({
+  headers: {
+    "Accept-Version": "*",
+  },
+  validateStatus: (status) => status >= 200 && status < 300,
+})
+
+// Fetch client configuration
+interface FetchConfig {
+  baseURL?: string
+  headers?: Record<string, string>
+  timeout?: number
+}
+
+interface FetchInterceptors {
+  request: ((
+    config: RequestInit & { url?: string },
+  ) => RequestInit & { url?: string })[]
+  response: ((response: Response) => Response | Promise<Response>)[]
+}
+
+interface FetchClientInterface {
+  defaults: {
+    baseURL: string
+    headers: {
+      common: Record<string, string>
+    }
+    timeout: number
+  }
+  interceptors: {
+    request: {
+      use: (
+        interceptor: (
+          config: RequestInit & { url?: string },
+        ) => RequestInit & { url?: string },
+      ) => void
+    }
+    response: {
+      use: (
+        interceptor: (response: Response) => Response | Promise<Response>,
+      ) => void
+    }
+  }
+  get(url: string, config?: RequestInit): Promise<Response>
+  post(url: string, data?: any, config?: RequestInit): Promise<Response>
+  put(url: string, data?: any, config?: RequestInit): Promise<Response>
+  patch(url: string, data?: any, config?: RequestInit): Promise<Response>
+  delete(url: string, config?: RequestInit): Promise<Response>
+}
+
+export type { FetchClientInterface }
+
+class FetchClient implements FetchClientInterface {
+  private config: FetchConfig = {
+    headers: {
+      "Accept-Version": "*",
+    },
+    timeout: DEFAULT_TIMEOUT,
+  }
+
+  private interceptorHandlers: FetchInterceptors = {
+    request: [],
+    response: [],
+  }
+
+  defaults = {
+    baseURL: "",
+    headers: {
+      common: {} as Record<string, string>,
+    },
+    timeout: DEFAULT_TIMEOUT,
+  }
+
+  private isStreamingRequest(
+    options: RequestInit & { responseType?: string },
+  ): boolean {
+    return options.responseType === "stream"
+  }
+
+  private isStreamingResponse(response: Response): boolean {
+    const contentType = response.headers.get("content-type") || ""
+
+    return (
+      contentType.includes("text/event-stream") ||
+      contentType.includes("text/plain")
+    )
+  }
+
+  private async request(
+    url: string,
+    options: RequestInit & { responseType?: string } = {},
+  ): Promise<Response> {
+    // Check if this is a streaming request
+    const isStreaming = this.isStreamingRequest(options)
+
+    // Prepare full URL
+    const fullUrl = url.startsWith("http")
+      ? url
+      : `${this.defaults.baseURL}${url}`
+
+    // Merge headers
+    const headers = {
+      ...this.config.headers,
+      ...this.defaults.headers.common,
+      ...options.headers,
+    }
+
+    // Remove responseType from options as it's not a standard fetch option
+    const { responseType, ...fetchOptions } = options
+
+    // Prepare request config
+    let requestConfig = {
+      ...fetchOptions,
+      url: fullUrl,
+      headers,
+      credentials: "include",
+    }
+
+    // Apply request interceptors
+    for (const interceptor of this.interceptorHandlers.request) {
+      requestConfig = interceptor(requestConfig)
+    }
+
+    // Extract url back from config (in case interceptor modified it)
+    const { url: finalUrl, ...finalFetchOptions } = requestConfig
+
+    // Create AbortController for timeout (but use longer timeout for streaming)
+    const controller = new AbortController()
+    const timeoutDuration = isStreaming ? 300000 : this.defaults.timeout // 5 minutes for streaming
+    const timeoutId = setTimeout(() => controller.abort(), timeoutDuration)
+
+    try {
+      let response = await fetch(finalUrl, {
+        ...finalFetchOptions,
+        signal: controller.signal,
+      })
+
+      clearTimeout(timeoutId)
+
+      // For streaming responses, skip response interceptors and validation
+      // to avoid consuming the stream
+      if (isStreaming || this.isStreamingResponse(response)) {
+        log.api(`streaming response ${response.url}`, response)
+        return response
+      }
+
+      // Apply response interceptors for non-streaming responses
+      for (const interceptor of this.interceptorHandlers.response) {
+        response = await interceptor(response)
+      }
+
+      // Validate status (similar to axios validateStatus)
+      if (response.status < 200 || response.status >= 300) {
+        throw new Error(`HTTP Error: ${response.status} ${response.statusText}`)
+      }
+
+      return response
+    } catch (error) {
+      clearTimeout(timeoutId)
+      if (error.name === "AbortError") {
+        throw new Error(`Request timeout after ${timeoutDuration}ms`)
+      }
+      throw error
+    }
+  }
+
+  async get(
+    url: string,
+    config?: RequestInit & { responseType?: string },
+  ): Promise<Response> {
+    return this.request(url, { ...config, method: "GET" })
+  }
+
+  async post(
+    url: string,
+    data?: any,
+    config?: RequestInit & { responseType?: string },
+  ): Promise<Response> {
+    const body = data ? JSON.stringify(data) : undefined
+    const headers = {
+      "Content-Type": "application/json",
+      ...config?.headers,
+    }
+    return this.request(url, { ...config, method: "POST", body, headers })
+  }
+
+  async put(
+    url: string,
+    data?: any,
+    config?: RequestInit & { responseType?: string },
+  ): Promise<Response> {
+    const body = data ? JSON.stringify(data) : undefined
+    const headers = {
+      "Content-Type": "application/json",
+      ...config?.headers,
+    }
+    return this.request(url, { ...config, method: "PUT", body, headers })
+  }
+
+  async patch(
+    url: string,
+    data?: any,
+    config?: RequestInit & { responseType?: string },
+  ): Promise<Response> {
+    const body = data ? JSON.stringify(data) : undefined
+    const headers = {
+      "Content-Type": "application/json",
+      ...config?.headers,
+    }
+    return this.request(url, { ...config, method: "PATCH", body, headers })
+  }
+
+  async delete(
+    url: string,
+    config?: RequestInit & { responseType?: string },
+  ): Promise<Response> {
+    return this.request(url, { ...config, method: "DELETE" })
+  }
+
+  // Interceptor management (similar to axios)
+  public interceptors = {
+    request: {
+      use: (
+        interceptor: (
+          config: RequestInit & { url?: string },
+        ) => RequestInit & { url?: string },
+      ) => {
+        this.interceptorHandlers.request.push(interceptor)
+      },
+    },
+    response: {
+      use: (
+        interceptor: (response: Response) => Response | Promise<Response>,
+      ) => {
+        this.interceptorHandlers.response.push(interceptor)
+      },
+    },
+  }
+}
+
+const fetchClient = new FetchClient()
+
+const configureHttpInterceptors = ($store) => {
+  // Configure axios interceptors
+  axiosClient.interceptors.request.use((request) => {
+    request.headers["current-project"] = $store.getState(["project", "_id"])
+    log.api(`request ${request.method}:${request.url}`, request)
+    return request
+  })
+
+  axiosClient.interceptors.response.use((response) => {
+    log.api(`response ${response.request.responseURL}`, response)
+    const projectId = $store.getState(["project", "_id"])
+    if (response?.status === 200 && response?.data?.appRequestCode) {
+      rememberLastDataUpdateRetrieval(projectId)
+      log.api("Last Update Timestamp set for " + projectId, "")
+    }
+    return response
+  })
+
+  // Configure fetch interceptors
+  fetchClient.interceptors.request.use((config) => {
+    config.headers = {
+      ...config.headers,
+      "current-project": $store.getState(["project", "_id"]),
+    }
+    log.api(`request ${config.url}`, config)
+    return config
+  })
+
+  fetchClient.interceptors.response.use(async (response) => {
+    log.api(`response ${response.url}`, response)
+    const projectId = $store.getState(["project", "_id"])
+
+    if (response.status === 200) {
+      // Clone response to read body without consuming it
+      const clonedResponse = response.clone()
+      try {
+        const data = await clonedResponse.json()
+        if (data?.appRequestCode) {
+          rememberLastDataUpdateRetrieval(projectId)
+          log.api("Last Update Timestamp set for " + projectId, "")
+        }
+      } catch (e) {
+        // Ignore JSON parsing errors for non-JSON responses
+      }
+    }
+
+    return response
+  })
+}
+
+const configureClient = (
+  baseURL: string,
+  appSessionId: string,
+  authToken?: string | null,
+) => {
+  // Configure axios
+  axiosClient.defaults.baseURL = baseURL
+  axiosClient.defaults.headers.common["app-session-id"] = appSessionId
+  axiosClient.defaults.headers.common["Accept-Version"] = "*"
+  axiosClient.defaults.headers.common["HTTP-CLIENT-USED"] = "axios"
+
+  // Configure fetch
+  fetchClient.defaults.baseURL = baseURL
+  fetchClient.defaults.headers.common["app-session-id"] = appSessionId
+  fetchClient.defaults.headers.common["Accept-Version"] = "*"
+  fetchClient.defaults.headers.common["HTTP-CLIENT-USED"] = "fetch"
+
+  if (authToken) {
+    setHttpToken(authToken)
+  }
+}
+
+/**
+ * @param {object} client - axios instance
+ */
+const apiHealthcheck = async (store) => {
+  try {
+    const healthcheckResponse = await axiosClient.get("/health")
+
+    if (healthcheckResponse.data?.stats) {
+      store.dispatch({
+        type: "backend/socket/status",
+        payload: { status: 1, health: 1 },
+      })
+    }
+  } catch (err) {
+    store.dispatch({
+      type: "backend/socket/status",
+      payload: { status: 0 },
+    })
+    console.error("Can't connect to API")
+    console.error(err)
+  }
+}
+
+/**
+ * Set JWT token in http client so we don't have to care about it
+ * @param {string} token - the JWT token
+ */
+const setHttpToken = (token) => {
+  // Set for axios
+  axiosClient.defaults.headers.common.Authorization = `Bearer ${token}`
+  axiosClient.defaults.headers.Authorization = `Bearer ${token}`
+
+  // Set for fetch
+  fetchClient.defaults.headers.common.Authorization = `Bearer ${token}`
+}
+
+/**
+ * Unset a previously set token
+ */
+const unsetHttpToken = () => {
+  // Unset for axios
+  axiosClient.defaults.headers.common.Authorization = null
+  axiosClient.defaults.headers.Authorization = null
+
+  // Unset for fetch
+  delete fetchClient.defaults.headers.common.Authorization
+}
+
+// Main export object with both clients
+const httpClient: {
+  axios: typeof axiosClient
+  fetch: FetchClientInterface
+} = {
+  axios: axiosClient,
+  fetch: fetchClient,
+}
+
+export default httpClient
+export {
+  httpClient,
+  configureClient,
+  apiHealthcheck,
+  setHttpToken,
+  unsetHttpToken,
+  configureHttpInterceptors,
+  DEFAULT_TIMEOUT,
+}