@raclettejs/core 0.1.34 → 0.1.36-canary.0

package/services/frontend/src/orchestrator/composables/useWidgetLifecycle.ts

@@ -1,5 +1,5 @@
 import { ref, type Ref } from "vue"
-import getEnvVariable from "@racletteCore/lib/getEnvVariable"
+import { isDevelopmentMode } from "@racletteCore/helpers/devMode"
 import log from "@racletteCore/lib/logger"
 
 export type OnAllWidgetsReady = (callback: () => void) => void
@@ -24,9 +24,7 @@ export function createWidgetLifecycleManager(
   const readyCallbacks = new Set<() => void>()
   const observers = new Map<string, MutationObserver>()
 
-  const DEV_MODE =
-    getEnvVariable("RACLETTE_DEBUG_MODE") === "true" ||
-    !getEnvVariable("RACLETTE_DEBUG_MODE")
+  const DEV_MODE = isDevelopmentMode()
 
   const checkAllReady = () => {
     if (renderedWidgets.value.size === totalWidgets && !allWidgetsReady.value) {

package/services/frontend/src/orchestrator/i18n/de-DE.json

@@ -140,6 +140,7 @@
     "socket_status_0": "Server nicht verbunden",
     "socket_status_1": "Server verbunden",
     "socket_status_2": "Verbindung zum Server wird hergestellt...",
+    "app_loading": "Anwendungsinhalt wird geladen",
     "dataSynced$displayName$type": "{type} \"{displayName}\" wurde synchronisiert",
     "dataCreate$displayName$type": "{type} \"{displayName}\" wurde erstellt",
     "dataUpdate$displayName$type": "{type} \"{displayName}\" wurde aktualisiert",

package/services/frontend/src/orchestrator/i18n/en-EU.json

@@ -140,6 +140,7 @@
     "socket_status_0": "Server not connected",
     "socket_status_1": "Server connected",
     "socket_status_2": "Connecting to server...",
+    "app_loading": "Loading application content",
     "dataSynced$displayName$type": "{type} \"{displayName}\" has been synchronized",
     "dataCreate$displayName$type": "{type} \"{displayName}\" has been created",
     "dataUpdate$displayName$type": "{type} \"{displayName}\" has been updated",

package/services/frontend/src/orchestrator/i18n/sk.json

@@ -140,6 +140,7 @@
     "socket_status_0": "Server nie je pripojený",
     "socket_status_1": "Server je pripojený",
     "socket_status_2": "Pripájanie k serveru...",
+    "app_loading": "Načítava sa obsah aplikácie",
     "dataSynced$displayName$type": "{type} \"{displayName}\" bol synchronizovaný",
     "dataCreate$displayName$type": "{type} \"{displayName}\" bol vytvorený",
     "dataUpdate$displayName$type": "{type} \"{displayName}\" bol aktualizovaný",

package/services/frontend/src/orchestrator/i18n/tl-TL.json

@@ -110,6 +110,7 @@
     "socket_status_0": "Qun Qapbogh",
     "socket_status_1": "Qun QaptaH",
     "socket_status_2": "QunDaq QaptaH…",
+    "app_loading": "App SeHlaw Loading",
     "dataSynced$displayName$type": "{type} “{displayName}” QaptaH",
     "dataCreate$displayName$type": "{type} “{displayName}” botlhutlh",
     "dataUpdate$displayName$type": "{type} “{displayName}” Qapla’",

package/services/frontend/src/orchestrator/index.ts

@@ -1,41 +1,20 @@
 import type { App as VueApp } from "vue"
 import createRacletteApp, { corePluginApi } from "@racletteCore/main"
+import { extractSessionIdFromUrl } from "@racletteCore/lib/workSessionUrl"
 import { createVueApp, createLoginVueApp } from "./main"
 import { initApp } from "./setup/application"
-import { validate } from "uuid"
 export * from "./exports"
 
 const VUE_MOUNTING_ELEMENT = "#app"
 let currentApp: VueApp | undefined
 
-/**
- * Check if URL matches :workSession/id={uuid} pattern and extract sessionId
- * Supports racletteJS route format: /:workSession/id={uuid}
- */
-const extractSessionIdFromUrl = (): string | null => {
-  const path = window.location.pathname + (window.location.hash || "")
-  // Match /:workSession/id={uuid} pattern
-  // The route parser will handle this, but we need to extract it here for bootstrapping
-  const workSessionMatch = path.match(/\/:workSession\/id=([^/&#]+)/)
-
-  if (workSessionMatch && workSessionMatch[1]) {
-    const sessionId = workSessionMatch[1]
-    // Validate UUID format
-    if (validate(sessionId)) {
-      return sessionId
-    }
-  }
-
-  return null
-}
-
 const startApp = async () => {
   try {
     // Check if URL indicates a work session
     const sessionId = extractSessionIdFromUrl()
 
     const res = await createRacletteApp({
-      requireAuth: !sessionId, // Skip auth requirement if sessionId present
+      requireAuth: !sessionId,
       sessionId: sessionId || undefined,
     })
 
@@ -47,7 +26,11 @@ const startApp = async () => {
     if (!res.authenticated && !sessionId) {
       const noUsers = res.code === "RCLT_DB_NO_USERS"
       if (res.login) {
-        currentApp = await createLoginVueApp(VUE_MOUNTING_ELEMENT, res.login, noUsers)
+        currentApp = await createLoginVueApp(
+          VUE_MOUNTING_ELEMENT,
+          res.login,
+          noUsers,
+        )
       }
     } else {
       currentApp = await createVueApp(VUE_MOUNTING_ELEMENT)

package/services/frontend/src/orchestrator/lib/queryParamsSource.ts

@@ -0,0 +1,48 @@
+import { isRef, toValue, type MaybeRefOrGetter } from "vue"
+import type {
+  CustomStoreActionParams,
+  QueryParamsInput,
+} from "@racletteCore/types"
+import { isDevelopmentMode } from "@racletteCore/helpers/devMode"
+import log from "@racletteCore/lib/logger"
+import type { VueQueryParamsInput } from "../types/DataApi"
+
+function isPlainParamsObject(
+  value: unknown,
+): value is CustomStoreActionParams {
+  return value != null && typeof value === "object" && !Array.isArray(value)
+}
+
+function warnInvalidQueryParams(context: string, value: unknown): void {
+  if (!isDevelopmentMode()) return
+  const kind =
+    value == null ? String(value) : Array.isArray(value) ? "array" : typeof value
+  log.warning(
+    "Invalid query params",
+    `${context}: expected a plain object, got ${kind}. Using {}.`,
+  )
+}
+
+/**
+ * Normalize Vue reactive params into core {@link QueryParamsInput}:
+ * a plain object snapshot, or a subscriber re-read on each `execute()`.
+ */
+export function toQueryParamsSource(
+  params?: VueQueryParamsInput,
+): QueryParamsInput {
+  if (params == null) return {}
+
+  if (typeof params === "function" || isRef(params)) {
+    return () => {
+      const resolved = toValue(params as MaybeRefOrGetter)
+      if (isPlainParamsObject(resolved)) return resolved
+      warnInvalidQueryParams("Reactive params subscriber", resolved)
+      return {}
+    }
+  }
+
+  if (isPlainParamsObject(params)) return params
+
+  warnInvalidQueryParams("Query params", params)
+  return {}
+}

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

@@ -12,12 +12,12 @@ import log from "@racletteCore/lib/logger"
 import { initPluginRegistration } from "@racletteCore/main"
 let loginVueApp: VueApp<Element> | undefined
 
-export const createVueApp = async (el: string): VueApp => {
-  // unmount login vue app, if exists
+export const createVueApp = async (el: string): Promise<VueApp> => {
   if (loginVueApp) {
     loginVueApp.unmount()
     loginVueApp = undefined
   }
+
   const vueApp = createApp(App)
   const { i18nInstance, instanceAdapter, dateLocale } = await initI18n()
   await initPluginRegistration()

package/services/frontend/src/orchestrator/router/index.ts

@@ -4,32 +4,13 @@
 import { createRouter, createWebHistory } from "vue-router"
 import { afterEach, beforeEach } from "./routerHooks"
 import routes from "./routes"
-import { $eventbus } from "@racletteCore/main"
-
-// create router instance
 
 const router = createRouter({
   history: createWebHistory(),
   routes,
 })
 
-/* Rooter hooks */
 router.beforeEach(beforeEach)
 router.afterEach(afterEach)
-$eventbus.on("backend/error", (error) => {
-  if (error.name === "AxiosError") {
-    const errorResponse = error.response?.data
-    if (errorResponse?.code === "FST_JWT_AUTHORIZATION_TOKEN_EXPIRED") {
-      // Capture current route path (including query and hash)
-      const currentUrl = router.currentRoute.value.fullPath
-      // Redirect to login with the current URL as a query param
-      if (window.location.href !== window.location.origin + "/login") {
-        window.location.href =
-          window.location.origin + "/login?redirect=" + currentUrl
-      }
 
-      return
-    }
-  }
-})
 export default router

package/services/frontend/src/orchestrator/router/registerEventHandlers.ts

@@ -0,0 +1,29 @@
+import type { Router } from "vue-router"
+import type EventEmitter from "@racletteCore/lib/eventEmitter"
+import { applyCompositionSlotsFromRoute } from "./routeStore"
+
+/**
+ * Wire router reactions to the global event bus.
+ * Kept separate from router creation so it can be invoked from initApp (testable).
+ */
+export const registerRouterEventHandlers = (
+  router: Router,
+  eventbus: EventEmitter,
+) => {
+  eventbus.on("ui/syncRouteCompositions", () => {
+    applyCompositionSlotsFromRoute(router.currentRoute.value)
+  })
+
+  eventbus.on("backend/error", (error) => {
+    if (error.name === "AxiosError") {
+      const errorResponse = error.response?.data
+      if (errorResponse?.code === "FST_JWT_AUTHORIZATION_TOKEN_EXPIRED") {
+        const currentUrl = router.currentRoute.value.fullPath
+        if (window.location.href !== window.location.origin + "/login") {
+          window.location.href =
+            window.location.origin + "/login?redirect=" + currentUrl
+        }
+      }
+    }
+  })
+}

package/services/frontend/src/orchestrator/router/routeStore.ts

@@ -6,6 +6,7 @@ import {
   type CompositionSlot,
 } from "@racletteOrchestrator/router/routeParserHelper"
 import { getCompositionIdByPath } from "@racletteCore/store/reducers/compositions/selectors"
+import logger from "@racletteCore/lib/logger"
 
 // TODO: find better filename
 
@@ -35,6 +36,12 @@ export const dispatchSetCompositionAs = (
           },
         })
       }
+    } else {
+      logger.warning(
+        "compositionNotFound",
+        `No composition for path "${compositionPath}" (slot "${slot}"). ` +
+          "Route may be ahead of socket bootstrap or the composition was removed.",
+      )
     }
   } else {
     $store.dispatch({
@@ -99,36 +106,82 @@ const getCompositionSlotChanges = (
   return { toRemove, toAdd, toUpdate }
 }
 
-export const updateActiveCompositions = (
-  to: RouteLocationNormalized,
-  from: RouteLocationNormalized,
+/**
+ * Same slot name, different composition path — swap in one `setCompositionAs`
+ * instead of unset + set (avoids a frame with no active composition).
+ */
+const partitionSlotChanges = (
+  toRemove: CompositionSlot[],
+  toAdd: CompositionSlot[],
 ) => {
-  const isInitialRouting = from.name === undefined
-  const hasToPageIdParameter = Boolean(to.params.pageId?.length)
-  const hasFromPageIdParameter = Boolean(from.params.pageId?.length)
+  const replacements: CompositionSlot[] = []
+  const stillToRemove: CompositionSlot[] = []
+  const stillToAdd: CompositionSlot[] = []
 
-  const compositionSlots = parseRouteToCompositionSlots(
-    to.fullPath,
-    undefined,
-    !hasToPageIdParameter,
+  const addBySlotName = new Map(
+    toAdd.map((slot) => [slot.slotName, slot]),
   )
 
-  const beforeCompositionSlots = parseRouteToCompositionSlots(
-    from.fullPath,
+  for (const removed of toRemove) {
+    const replacement = addBySlotName.get(removed.slotName)
+    if (replacement) {
+      replacements.push(replacement)
+      addBySlotName.delete(removed.slotName)
+    } else {
+      stillToRemove.push(removed)
+    }
+  }
+
+  stillToAdd.push(...addBySlotName.values())
+
+  return { replacements, stillToRemove, stillToAdd }
+}
+
+export const getCompositionSlotsForRoute = (
+  route: RouteLocationNormalized,
+  options?: { useDefaultSlotFallback?: boolean },
+) => {
+  const hasPageIdParameter = Boolean(route.params.pageId?.length)
+  const useDefaultSlotFallback =
+    options?.useDefaultSlotFallback ?? !hasPageIdParameter
+
+  return parseRouteToCompositionSlots(
+    route.fullPath,
     undefined,
-    !isInitialRouting && !hasFromPageIdParameter,
+    useDefaultSlotFallback,
+  )
+}
+
+export const applyCompositionSlots = (slots: CompositionSlot[]) => {
+  slots.forEach((slot) =>
+    dispatchSetCompositionAs(slot.slotName, slot.slotValue, slot.slotParams),
   )
+}
+
+export const updateActiveCompositions = (
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
+) => {
+  const isInitialRouting = from.name === undefined
+
+  const compositionSlots = getCompositionSlotsForRoute(to)
+  const beforeCompositionSlots = getCompositionSlotsForRoute(from, {
+    useDefaultSlotFallback:
+      !isInitialRouting && !Boolean(from.params.pageId?.length),
+  })
 
   const { toRemove, toAdd, toUpdate } = getCompositionSlotChanges(
     beforeCompositionSlots,
     compositionSlots,
   )
 
-  // Remove slots that are no longer needed
-  toRemove.forEach((slot) => dispatchSetCompositionAs(slot.slotName))
+  const { replacements, stillToRemove, stillToAdd } = partitionSlotChanges(
+    toRemove,
+    toAdd,
+  )
 
-  // Add completely new slots
-  toAdd.forEach((slot) =>
+  // Same slot, new composition path — set directly (no unset in between)
+  replacements.forEach((slot) =>
     dispatchSetCompositionAs(slot.slotName, slot.slotValue, slot.slotParams),
   )
 
@@ -149,6 +202,14 @@ export const updateActiveCompositions = (
       })
     }
   })
+
+  // New slots (slot name was not active before)
+  stillToAdd.forEach((slot) =>
+    dispatchSetCompositionAs(slot.slotName, slot.slotValue, slot.slotParams),
+  )
+
+  // Slots removed without a replacement on the same slot name
+  stillToRemove.forEach((slot) => dispatchSetCompositionAs(slot.slotName))
 }
 
 export const handleRouteChange = (
@@ -183,3 +244,17 @@ export const getDefaultSlotValue = (url: string) =>
   parseRouteToCompositionSlots(url, undefined, true).find(
     (slot) => slot.slotName === DEFAULT_SLOT_NAME,
   )?.slotValue
+
+/**
+ * Re-apply composition slots from the current route without a navigation event.
+ * Used after socket project bootstrap clears ui.page while the URL is unchanged.
+ */
+export const applyCompositionSlotsFromRoute = (
+  route: RouteLocationNormalized,
+) => {
+  if (route.name !== "app.space.page") {
+    return
+  }
+
+  applyCompositionSlots(getCompositionSlotsForRoute(route))
+}

package/services/frontend/src/orchestrator/router/routes.ts

@@ -1,6 +1,7 @@
 import type { RouteRecordRaw } from "vue-router"
 import ProductOrchestrator from "../ProductOrchestrator.vue"
 import useAuthentication from "@racletteOrchestrator/composables/useAuthentication"
+import { $store } from "@racletteCore"
 
 const routes: Readonly<RouteRecordRaw[]> = [
   {
@@ -17,6 +18,10 @@ const routes: Readonly<RouteRecordRaw[]> = [
       const { clearCookies } = useAuthentication()
 
       clearCookies()
+      
+      // Clear project context so a later socket re-join cannot light-rejoin on stale state.
+      $store.dispatch({ type: "projectInit" })
+      $store.dispatch({ type: "project/set", payload: { _id: null } })
 
       if (window.location.href !== window.location.origin + "/login") {
         window.location.href = window.location.origin + "/login"

package/services/frontend/src/orchestrator/setup/application.ts

@@ -1,3 +1,12 @@
-export const initApp = async (corePluginApi) => {
-  console.log("initApp was called")
+import type { CorePluginApi } from "@racletteCore"
+import router from "@racletteOrchestrator/router"
+import { registerRouterEventHandlers } from "@racletteOrchestrator/router/registerEventHandlers"
+
+let routerHandlersRegistered = false
+
+export const initApp = async (corePluginApi: CorePluginApi) => {
+  if (!routerHandlersRegistered) {
+    registerRouterEventHandlers(router, corePluginApi.$eventbus)
+    routerHandlersRegistered = true
+  }
 }

package/services/frontend/src/orchestrator/types/DataApi.ts

@@ -0,0 +1,19 @@
+import type { MaybeRefOrGetter } from "vue"
+import type {
+  CustomStoreActionParams,
+  CustomStoreActionsPayload,
+} from "@racletteCore/types"
+
+/** Params accepted by Vue plugin `$data` methods (refs/computed/getters allowed). */
+export type VueQueryParamsInput =
+  | MaybeRefOrGetter<CustomStoreActionParams | undefined>
+  | CustomStoreActionParams
+  | undefined
+
+/** Vue orchestrator payload — extends core with reactive `params`. */
+export type VueStoreActionsPayload = Omit<
+  CustomStoreActionsPayload,
+  "params"
+> & {
+  params?: MaybeRefOrGetter<CustomStoreActionParams | undefined>
+}

package/services/frontend/src/orchestrator/types/PluginApi.ts

@@ -1,24 +1,21 @@
 import type { useI18n } from "vue-i18n"
 import type { ComputedRef, Ref } from "vue"
-import type { CorePluginApi } from "@racletteCore/main"
-import type {
-  CustomStoreActionsPayload,
-  PluginStoreApi,
-} from "@racletteCore/types"
+import type { PluginStoreApi, CorePluginApi } from "@racletteCore/types"
+import type { VueQueryParamsInput, VueStoreActionsPayload } from "./DataApi"
 import type { Query } from "@racletteCore/store/reducers/queries/reducers"
 import type { actionId } from "@racletteCore"
 import type { Socket } from "socket.io-client"
 import type { User } from "@shared/types"
 // TODO: finalize types
 // TODO: generate this type from index.ts in the plugin & extend it globally
-export type PluginMethod = (payload?: CustomStoreActionsPayload) => {
+export type PluginMethod = (payload?: VueStoreActionsPayload) => {
   isLoading: Boolean
   response: Ref<unknown>
   error: Ref<unknown>
   data: ComputedRef<unknown>
   dataArr: Array<ComputedRef<unknown>>
   execute: (
-    params?: Record<string, any>,
+    params?: VueQueryParamsInput,
   ) => Promise<{ response: any; result: any }>
   // query and uuids only provided from queryObservableHelper
   query?: ComputedRef<Query>

package/services/frontend/src/orchestrator/types/Widgets.ts

@@ -54,6 +54,8 @@ export type WidgetDeclaration = Omit<
   RegisteredWidgetDeclaration,
   "pluginKey" | "author" | "name" // name will be extracted via filename, cannot be overwritten
 > & {
+  title: string
+  description?: string
   color?: string
   icon?: string
   images?: string[]

package/services/frontend/src/orchestrator/types/index.ts

@@ -1,3 +1,4 @@
 export type * from "./PluginApi"
+export type * from "./DataApi"
 export type * from "./Widgets"
 export type * from "./Composables"

package/templates/docker-compose.yml

@@ -56,7 +56,7 @@ services:
         MONGO_HOST=${RACLETTE_MONGODB_HOST:-mongodb://mongodb:${RACLETTE_MONGODB_PORT:-27017}/${RACLETTE_MONGODB_DATABASE:-raclette}}
       - >-
         CACHE_URL=${RACLETTE_CACHE_URL:-redis://cache:${RACLETTE_CACHE_PORT:-6379}}
-      - RACLETTE_DEBUG_MODE=true
+      - RACLETTE_DEBUG_MODE=${RACLETTE_DEBUG_MODE:-true}
       - RACLETTE_APP_PATH=/home/shookie/core-dev/@raclettejs/playground
     volumes:
       - yarn-cache:/usr/local/share/.cache/yarn
@@ -111,9 +111,6 @@ services:
       - RACLETTE_DEBUG_MODE=${RACLETTE_DEBUG_MODE:-true}
       - >-
         RACLETTE_SERVER_BASE_URL=${RACLETTE_SERVER_BASE_URL:-http://localhost:${RACLETTE_SERVER_PORT:-8082}}
-      - >-
-        RACLETTE_SOCKET_URL=${RACLETTE_SOCKET_URL:-http://localhost:${RACLETTE_SERVER_PORT:-8082}}
-      - RACLETTE_DEBUG_MODE=true
       - RACLETTE_APP_PATH=/home/shookie/core-dev/@raclettejs/playground
     volumes:
       - yarn-cache:/usr/local/share/.cache/yarn

package/templates/fs.yml

@@ -17,7 +17,7 @@ patterns:
   ext:     ["**/*.vue", "**/*.ts", "**/*.js", "**/*.json", "**/*.css", "**/*.scss"]
   pkg:     ["**/package.json", "**/yarn.lock"] # changes here require new install anyway
   # always added when globbing, config.root is also always added
-  ignore:  ["**/node_modules/**", "**/.git/**", "**/dist/**", "**/.prettierrc", "**/eslint.config.js"]
+  ignore:  ["**/node_modules/**", "**/.git/**", "**/dist/**", "**/.prettierrc", "**/eslint.config.js", "**/.yarnrc.yml", "**/.yarn/**"]
 
 
 mappings: