@raclettejs/core 0.1.35 → 0.1.36-canary.0

package/services/frontend/.dockerignore

@@ -10,4 +10,6 @@ package.json
 yarn.lock
 devTools
 provision
-.DS_Store
+.DS_Store
+.yarnrc.yml
+.yarn

package/services/frontend/src/core/lib/data/dataApi.ts

@@ -5,16 +5,19 @@ import getData from "@racletteCore/lib/data/fetchDataHandler"
 import handleServerItem from "./responseTypeHandler"
 import $queryApi from "./queryApi"
 import writeData from "./writeDataHandler"
-import type { CustomStoreActionsPayload } from "@racletteCore/types"
+import type {
+  CustomStoreActionsPayload,
+  QueryParamsInput,
+} from "@racletteCore/types"
+import { resolveQueryParams } from "@racletteCore/lib/dataHelper"
 import { BehaviorSubject } from "rxjs"
-import { clone, mergeDeepRight } from "ramda"
+import { mergeDeepRight } from "ramda"
 
 const $writeDataApi = (
   actionId: String,
   operationDefinition: object,
   { params = {}, options = {} }: CustomStoreActionsPayload = {},
 ) => {
-  const _params = clone(params)
   // Create BehaviorSubjects for state management
   const isLoadingSubject$ = new BehaviorSubject<boolean>(false)
   const dataSubject$ = new BehaviorSubject([])
@@ -25,18 +28,26 @@ const $writeDataApi = (
     data$: dataSubject$.asObservable(),
     error$: errorSubject$.asObservable(),
     response$: responseSubject$.asObservable(),
-    execute: async (executeParams = {}) => {
-      const _executeParams = clone(executeParams)
+    execute: async (executeParams?: QueryParamsInput | FormData | unknown[]) => {
+      const isFormData =
+        typeof FormData !== "undefined" && executeParams instanceof FormData
       errorSubject$.next(null)
       responseSubject$.next({})
       let queryParams
-      if (Array.isArray(_executeParams)) {
-        if (Array.isArray(_params)) {
-          queryParams = _params.concat(_executeParams)
-        }
-        queryParams = _executeParams
+      if (isFormData) {
+        queryParams = executeParams
+      } else if (Array.isArray(executeParams)) {
+        const baseParams = resolveQueryParams(params)
+        queryParams = Array.isArray(baseParams)
+          ? baseParams.concat(executeParams)
+          : executeParams
+      } else if (executeParams === undefined) {
+        queryParams = resolveQueryParams(params)
       } else {
-        queryParams = mergeDeepRight(_params, _executeParams)
+        queryParams = mergeDeepRight(
+          resolveQueryParams(params),
+          resolveQueryParams(executeParams as QueryParamsInput),
+        )
       }
 
       if (options.responseType === "stream") {
@@ -53,16 +64,16 @@ const $writeDataApi = (
         errorSubject$.next(e.response)
         isLoadingSubject$.next(false)
       })
-      responseSubject$.next(resultData?.response)
 
       // Update both boolean and observable on success
+      responseSubject$.next(resultData?.response)
       isLoadingSubject$.next(false)
 
       // Update data if resultData is available
-      if (resultData?.result) {
-        const dataArray = Array.isArray(resultData.result)
-          ? resultData.result
-          : [resultData.result]
+      if (resultData?.response) {
+        const dataArray = Array.isArray(resultData.response)
+          ? resultData.response
+          : [resultData.response]
         dataSubject$.next(dataArray)
       }
 

package/services/frontend/src/core/lib/data/queryApi.ts

@@ -2,11 +2,14 @@
  * data api for the store
  */
 import { getData } from "@racletteCore/lib/data/dataApi"
-import { fixQueryParamTypes } from "@racletteCore/lib/dataHelper"
+import { resolveQueryParams } from "@racletteCore/lib/dataHelper"
 import { $store, $eventbus } from "@racletteCore"
-import type { CustomStoreActionsPayload } from "@racletteCore/types"
+import type {
+  CustomStoreActionsPayload,
+  QueryParamsInput,
+} from "@racletteCore/types"
 import { BehaviorSubject } from "rxjs"
-import { mergeDeepRight, clone } from "ramda"
+import { mergeDeepRight } from "ramda"
 
 const callbacks = {}
 const queryApis = {}
@@ -22,7 +25,6 @@ export const $queryApi = (
   }
   const errorSubject$ = new BehaviorSubject(null)
   const responseSubject$ = new BehaviorSubject({})
-  const cleanedParams = fixQueryParamTypes(params)
   // check if we have a query fullfilling the needs of the one requested
   // here. If not we will update the one with this actionId
   let actionType = "queries/add"
@@ -39,7 +41,10 @@ export const $queryApi = (
     payload: {
       actionId,
       target,
-      params: cleanedParams,
+      // TODO: subscriber params are re-resolved on execute(), but this registration
+      // snapshot may leave store query params stale until the next execute()
+      // we should check the query behaviour for the store and how to deal with changing queries
+      params: resolveQueryParams(params),
       options,
       config,
     },
@@ -66,11 +71,15 @@ export const $queryApi = (
       responseSubject$.complete()
       errorSubject$.complete()
     },
-    execute: async (executeParams = {}) => {
-      const _executeParams = clone(executeParams)
+    execute: async (executeParams?: QueryParamsInput) => {
       errorSubject$.next(null)
       responseSubject$.next({})
-      const queryParams = mergeDeepRight(cleanedParams, _executeParams)
+      // `params` may be a subscriber () => {...} from the orchestrator — always resolve here.
+      const baseParams = resolveQueryParams(params)
+      const queryParams =
+        executeParams === undefined
+          ? baseParams
+          : mergeDeepRight(baseParams, resolveQueryParams(executeParams))
       await $store.dispatch({
         type: "queries/update",
         payload: {

package/services/frontend/src/core/lib/data/responseTypeHandler.ts

@@ -7,6 +7,15 @@ import * as userNotifier from "@racletteCore/lib/userNotifier"
 import { $store, markDataAsModified } from "@racletteCore"
 
 const handledRequests = {}
+
+const resolveDeletedIds = (data) => {
+  if (data.deleted?.length) {
+    return data.deleted
+  }
+  return (data.items || [])
+    .map((item) => (typeof item === "string" ? item : item?._id))
+    .filter(Boolean)
+}
 const hasBeenHandled = (requestId, appRequestCode) => {
   if (requestId === "system") {
     return false
@@ -137,13 +146,13 @@ const handler = {
       requestId,
       data,
     })
-    const deleted = data.items || []
-    $store.dispatch({ type: "data/hardDelete", payload: deleted })
+    const deletedIds = resolveDeletedIds(data)
+    $store.dispatch({ type: "data/hardDelete", payload: deletedIds })
     if (notify) {
-      userNotifier.dataDelete(isOwnRequest, isSystemAction, deleted)
+      userNotifier.dataDelete(isOwnRequest, isSystemAction, data.items || [])
     }
 
-    return deleted
+    return deletedIds
   },
   dataHardDeleted: (
     data,
@@ -162,12 +171,12 @@ const handler = {
       requestId,
       data,
     })
-    const deleted = data.items || []
-    $store.dispatch({ type: "data/hardDelete", payload: deleted })
+    const deletedIds = resolveDeletedIds(data)
+    $store.dispatch({ type: "data/hardDelete", payload: deletedIds })
     if (notify) {
-      userNotifier.dataDelete(isOwnRequest, isSystemAction, deleted)
+      userNotifier.dataDelete(isOwnRequest, isSystemAction, data.items || [])
     }
-    return deleted
+    return deletedIds
   },
   dataMove: (
     data,

package/services/frontend/src/core/lib/data/writeDataHandler.ts

@@ -73,7 +73,9 @@ const storeActions = {
 }
 const getAxiosPromise = async (method, target, source, config) => {
   if (method === "delete") {
-    return await $api.axios.delete(target, config, { data: { source } })
+    const deleteConfig =
+      source != null ? { ...config, data: source } : config
+    return await $api.axios.delete(target, deleteConfig)
   }
   return await $api.axios[method](target, source, config)
 }

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

@@ -3,6 +3,8 @@
  *
  */
 import { clone, path } from "ramda"
+import type { QueryParamsInput } from "@racletteCore/types"
+import { isDevelopmentMode } from "@racletteCore/helpers/devMode"
 import log from "@racletteCore/lib/logger"
 import { $eventbus } from "@racletteCore/main"
 import { $store } from "@racletteCore/main"
@@ -225,6 +227,10 @@ const replaceLast = (str, pattern, replacement) => {
  *
  */
 const removeCacheAttributes = (item) => {
+  if (typeof FormData !== "undefined" && item instanceof FormData) {
+    return item
+  }
+
   const _item = clone(item)
 
   if (_item.__requestedFor) {
@@ -417,25 +423,57 @@ const getValueFromNestedAttributeString = (attrString, item) => {
 const isAnswerToOwnRequest = (appSessionId) =>
   appSessionId == $store.appSessionId
 
-const fixQueryParamTypes = (params) => {
-  const fixedParams = clone(params)
+const NUMERIC_QUERY_OPTIONS = ["from", "skip", "size", "limit"] as const
 
-  if (params?.options?.from) {
-    fixedParams.options.from = parseInt(params.options.from)
-  }
-  if (params?.options?.skip) {
-    fixedParams.options.skip = parseInt(params.options.skip)
-  }
-  if (params?.options?.size) {
-    fixedParams.options.size = parseInt(params.options.size)
+/** Clone query params and coerce `options.from|skip|size|limit` to integers (often strings from URLs/forms). */
+const fixQueryParamTypes = (params: Record<string, unknown> = {}) => {
+  const fixedParams = clone(params) as Record<string, unknown>
+  const options = fixedParams.options
+
+  if (options == null || typeof options !== "object" || Array.isArray(options)) {
+    return fixedParams
   }
-  if (params?.options?.limit) {
-    fixedParams.options.limit = parseInt(params.options.limit)
+
+  const opts = options as Record<string, unknown>
+  for (const key of NUMERIC_QUERY_OPTIONS) {
+    if (opts[key] != null) {
+      opts[key] = parseInt(String(opts[key]), 10)
+    }
   }
 
   return fixedParams
 }
 
+const isPlainParamsRecord = (
+  value: unknown,
+): value is Record<string, unknown> =>
+  value != null && typeof value === "object" && !Array.isArray(value)
+
+const warnInvalidResolvedQueryParams = (value: unknown): void => {
+  if (!isDevelopmentMode()) return
+  const kind =
+    value == null ? String(value) : Array.isArray(value) ? "array" : typeof value
+  log.warning(
+    "Invalid query params",
+    `Params subscriber resolved to ${kind}, expected a plain object. Using {}.`,
+  )
+}
+
+/** Resolve plain params or subscriber, then normalize query param types. */
+const resolveQueryParams = (
+  params?: QueryParamsInput,
+): Record<string, unknown> => {
+  let resolved: unknown = params
+  if (typeof resolved === "function") {
+    resolved = resolved()
+  }
+  if (!isPlainParamsRecord(resolved)) {
+    warnInvalidResolvedQueryParams(resolved)
+    return fixQueryParamTypes({})
+  }
+  return fixQueryParamTypes(resolved)
+}
+
 const promisifyActionResolve = (resolveId: string, callback?: Function) => {
   const handleCleanup = (result = {}) => {
     if (typeof callback === "function") {
@@ -473,6 +511,7 @@ export {
   debounceHelper,
   isAnswerToOwnRequest,
   fixQueryParamTypes,
+  resolveQueryParams,
   fixDataTypesFromObject,
   getItemsFromLookup,
   getItemFromLookup,

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

@@ -14,6 +14,8 @@ const eventWhitelist = [
   "widgets/reset/workingState",
   "ui/addToSnackbar",
   "ui/setupProject",
+  "ui/bootstrapFailed",
+  "ui/syncRouteCompositions",
   "socket/data/update",
   "socket/join/room",
   "socket/leave/room",

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

@@ -56,7 +56,7 @@ interface FetchClientInterface {
   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>
+  delete(url: string, data?: any, config?: RequestInit): Promise<Response>
 }
 
 export type { FetchClientInterface }
@@ -223,9 +223,23 @@ class FetchClient implements FetchClientInterface {
 
   async delete(
     url: string,
+    data?: any,
     config?: RequestInit & { responseType?: string },
   ): Promise<Response> {
-    return this.request(url, { ...config, method: "DELETE" })
+    const isFormData =
+      typeof FormData !== "undefined" && data instanceof FormData
+    const body = data
+      ? isFormData
+        ? data
+        : JSON.stringify(data)
+      : undefined
+    const headers = isFormData
+      ? { ...config?.headers }
+      : {
+          "Content-Type": "application/json",
+          ...config?.headers,
+        }
+    return this.request(url, { ...config, method: "DELETE", body, headers })
   }
 
   // Interceptor management (similar to axios)

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

@@ -32,6 +32,24 @@ const setServerDisconnected = () => {
   })
 }
 
+const setServerConnecting = () => {
+  $store.dispatch({
+    type: "backend/socket/status",
+    payload: { status: 2 },
+  })
+}
+
+const setServerConnected = () => {
+  $store.dispatch({
+    type: "backend/socket/status",
+    payload: { status: 1, health: 1 },
+  })
+  $store.dispatch({
+    type: "backend/search/status",
+    payload: { status: 1 },
+  })
+}
+
 const dataCreate = (isAnswerToOwnRequest, isSystemAction, items) => {
   items.forEach((item) => {
     if (isAnswerToOwnRequest) {
@@ -348,5 +366,7 @@ export {
   userConfigUpdate,
   newVersionAvailable,
   setServerDisconnected,
+  setServerConnecting,
+  setServerConnected,
   checkToken,
 }

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

@@ -0,0 +1,16 @@
+import { validate } from "uuid"
+
+/**
+ * Extract work-session id from the current URL.
+ * Supports racletteJS route format: /:workSession/id={uuid}
+ */
+export const extractSessionIdFromUrl = (): string | null => {
+  const path = window.location.pathname + (window.location.hash || "")
+  const workSessionMatch = path.match(/\/:workSession\/id=([^/&#]+)/)
+
+  if (workSessionMatch?.[1] && validate(workSessionMatch[1])) {
+    return workSessionMatch[1]
+  }
+
+  return null
+}

package/services/frontend/src/core/main.ts

@@ -26,8 +26,16 @@ import { AUTH_TOKEN_KEY } from "@racletteCore/setup/sessionHandler"
 import $log from "@racletteCore/lib/logger"
 import { awaitTime } from "@racletteCore/lib/dataHelper"
 import type { User } from "@shared/types/core/User.types"
-import { checkToken } from "@racletteCore/lib/userNotifier"
+import {
+  checkToken,
+  setServerConnecting,
+} from "@racletteCore/lib/userNotifier"
 import configService from "@racletteCore/lib/configService"
+import { isDevelopmentMode } from "@racletteCore/helpers/devMode"
+import {
+  setActiveSocket,
+  teardownSocket,
+} from "@racletteCore/setup/socketRegistry"
 import {
   registerPlugins,
   registeredPlugins,
@@ -36,6 +44,12 @@ import {
 const SOCKET_URL = getEnvVariable("RACLETTE_SOCKET_URL")
 const API_BASE_URL = getEnvVariable("RACLETTE_SERVER_BASE_URL")
 
+/** First warning while waiting for socket bootstrap to finish. */
+const SETUP_PROJECT_WARN_MS = 5_000
+/** Hard timeout in production (dev mode never rejects — easier backend debugging). */
+const SETUP_PROJECT_TIMEOUT_MS = 60_000
+const SETUP_PROJECT_DEV_WARN_INTERVAL_MS = 10_000
+
 export type CreateAppResponse = {
   authenticated: boolean
   setupComplete: boolean
@@ -81,7 +95,6 @@ const createRacletteApp = async (
   let user: User | null = null
   await configService.init()
 
-  // If sessionId is provided, skip authentication
   if (options.requireAuth && !options.sessionId) {
     const { authenticated, error, user: _user, code } = await checkAuthStatus()
 
@@ -102,20 +115,65 @@ const createRacletteApp = async (
 
   store.dispatch({ type: "user/set", payload: user })
 
-  // does the core really need to communicate with itself via eventbus?
-  eventbus.emit("socket/join/room")
+  setServerConnecting()
+
+  return new Promise<CreateAppResponse>((resolve, reject) => {
+    let settled = false
 
-  return new Promise<CreateAppResponse>(async (resolve, reject) => {
-    eventbus.on("ui/setupProject", (spaceId: string) => {
+    const onSetupProject = (spaceId: string) => {
+      if (settled) {
+        return
+      }
+
+      settled = true
+      eventbus.removeListener("ui/setupProject", onSetupProject)
       resolve({
         authenticated: !!user || !!options.sessionId,
         setupComplete: true,
         spaceId,
       })
       console.log(chadsayFE("racletteJS is up and running!"))
-    })
-    await awaitTime(2000)
-    reject("timeouted")
+    }
+
+    eventbus.on("ui/setupProject", onSetupProject)
+
+    void (async () => {
+      await awaitTime(SETUP_PROJECT_WARN_MS)
+      if (settled) {
+        return
+      }
+
+      console.warn(
+        "[bootstrap] Still waiting for ui/setupProject (socket bootstrap). " +
+          "Check server joinConfirmation / projectInit in the network tab.",
+      )
+
+      if (isDevelopmentMode()) {
+        while (!settled) {
+          await awaitTime(SETUP_PROJECT_DEV_WARN_INTERVAL_MS)
+          if (settled) {
+            return
+          }
+          console.warn(
+            "[bootstrap] Bootstrap still pending (dev mode — no timeout).",
+          )
+        }
+        return
+      }
+
+      await awaitTime(SETUP_PROJECT_TIMEOUT_MS - SETUP_PROJECT_WARN_MS)
+      if (settled) {
+        return
+      }
+
+      settled = true
+      eventbus.removeListener("ui/setupProject", onSetupProject)
+      reject(
+        new Error(
+          `createRacletteApp timed out after ${SETUP_PROJECT_TIMEOUT_MS / 1000}s waiting for ui/setupProject`,
+        ),
+      )
+    })()
   })
 }
 
@@ -162,8 +220,6 @@ const generateLoginCallback =
 
         store.dispatch({ type: "user/set", payload: response.data.user })
 
-        eventbus.emit("socket/join/room")
-
         // Return success with token & redirect function
         return {
           success: true,
@@ -263,12 +319,23 @@ const setupDependencies = async (sessionId?: string) => {
   configureHttpInterceptors(store)
   apiHealthcheck(store)
 
-  // socket
-  socket = createSocket(SOCKET_URL, appSessionId, { sessionId })
+  // socket — replace connection; detach old listeners before disconnect to avoid
+  // a stale disconnect handler marking the server offline after the new socket connects
+  const previousSocket = socket
 
-  registerSocketEvents(socket, store, eventbus)
-  // listen to eventbus and send messages to the socket server
+  socket = createSocket(SOCKET_URL, appSessionId, { sessionId })
+  setActiveSocket(socket)
+  setServerConnecting()
   registerSocketClient(socket, eventbus)
+  registerSocketEvents(socket, store, eventbus)
+
+  if (previousSocket) {
+    teardownSocket(previousSocket)
+  }
+
+  if (socket.connected) {
+    eventbus.emit("socket/join/room")
+  }
 
   // TODO: improve this code
   corePluginApi = {

package/services/frontend/src/core/setup/socketBootstrap.ts

@@ -0,0 +1,83 @@
+/**
+ * Socket project bootstrap
+ *
+ * Flow:
+ * 1. Server emits joinConfirmation → client dispatches projectInit (resets project-scoped store slices)
+ * 2. projectInit completes → store emits store_actionResolved_{resolveId}
+ * 3. onProjectInitResolved runs setupSpace, syncs route compositions, emits ui/setupProject
+ */
+import type { Composition } from "@shared/types/core/Composition.types"
+import type { InteractionLink } from "@shared/types/core/InteractionLink.types"
+import { setupSpace } from "@racletteCore/lib/projectDataHelper"
+import type { ProjectConfiguration } from "../store/types"
+import type EventEmitter from "@racletteCore/lib/eventEmitter"
+import type { RacletteStore } from "@racletteCore"
+
+export type ProjectBootstrapPayload = {
+  compositions?: Composition[]
+  interactionLinks?: InteractionLink[]
+  projectConfig?: ProjectConfiguration
+  project?: { _id: string; account: string }
+  roomId: string
+  /** Runs after setupSpace (e.g. work-session fullscreen UI). */
+  afterSetup?: () => void | Promise<void>
+}
+
+type BootstrapDeps = {
+  store: RacletteStore
+  eventbus: EventEmitter
+}
+
+/**
+ * Registers the post-projectInit handler, then resets project-scoped store state.
+ */
+export const startProjectBootstrap = (
+  { store, eventbus }: BootstrapDeps,
+  resolveId: string,
+  payload: ProjectBootstrapPayload,
+) => {
+  const {
+    compositions,
+    interactionLinks,
+    projectConfig,
+    project,
+    roomId,
+    afterSetup,
+  } = payload
+
+  eventbus.once(`store_actionResolved_${resolveId}`, async () => {
+    if (project) {
+      store.dispatch({
+        type: "project/set",
+        payload: project,
+      })
+    }
+
+    store.dispatch({
+      type: "ui/update",
+      payload: { loading: true },
+    })
+
+    // Same setupSpace as logged-in users (landing page detection, etc.)
+    await setupSpace(
+      compositions || [],
+      interactionLinks || [],
+      projectConfig || {},
+    )
+    // Re-apply route composition slots after projectInit cleared ui.page
+    eventbus.emit("ui/syncRouteCompositions")
+    await afterSetup?.()
+
+    store.dispatch({
+      type: "ui/update",
+      payload: { loading: false },
+    })
+
+    eventbus.emit("ui/setupProject", roomId)
+  })
+
+  store.dispatch({
+    type: "projectInit",
+    resolveId,
+  })
+}