@raclettejs/core 0.1.19 → 0.1.20

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

@@ -7,11 +7,22 @@ import {
   transformToOriginalState,
 } from "@racletteOrchestrator/router/routeParserHelper"
 import { compose, urlCompose } from "@racletteOrchestrator/router/routeParser"
-import { clone, mergeDeepRight, pick } from "ramda"
+import {
+  clone,
+  mergeDeepRight,
+  pick,
+  evolve,
+  when,
+  is,
+  pickBy,
+  complement,
+  isNil,
+} from "ramda"
 import type { InteractionLink } from "@shared/types"
 import {
   getCompositionById,
   getLocalizedName,
+  getCompositionIdByPath,
 } from "@racletteCore/store/reducers/compositions/selectors"
 import useInteractionLinks from "./useInteractionLinks"
 
@@ -48,9 +59,14 @@ export const useRouteState = () => {
     )
 
   const updateSlot = (slot: CompositionSlot) => {
-    const newUrl = getInteractionLinkUrl(slot)
+    const cleanedSlot = evolve(
+      {
+        slotParams: when(is(Object), pickBy(complement(isNil))),
+      },
+      slot,
+    )
 
-    // router.push({ name: "app.space.page", params: { pageId: newUrl } })
+    const newUrl = getInteractionLinkUrl(cleanedSlot)
     router.push({ path: "/" + newUrl })
   }
 
@@ -112,7 +128,9 @@ export const useRouteState = () => {
       console.error(`InteractionLink ${id} not found!`)
     }
   }
-
+  const getCurrentCompositionId = (compositionPath: string): string => {
+    return getCompositionIdByPath(compositionPath)
+  }
   return {
     composed,
     compositionSlots,
@@ -122,6 +140,7 @@ export const useRouteState = () => {
     removeSlot,
     triggerInteractionLink,
     triggerInteractionLinkById,
+    getCurrentCompositionId,
   }
 }
 

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

@@ -0,0 +1,166 @@
+import { ref, type Ref } from "vue"
+import getEnvVariable from "@racletteCore/lib/getEnvVariable"
+import log from "@racletteCore/lib/logger"
+
+export type OnAllWidgetsReady = (callback: () => void) => void
+
+interface WidgetLifecycleHooks {
+  onAllWidgetsReady: OnAllWidgetsReady
+  onWidgetRendered: (element: HTMLElement) => void
+  onWidgetUnmounted: () => void
+}
+
+interface WidgetLifecycleManager {
+  createLifecycleHooks: (widgetId: string) => WidgetLifecycleHooks
+  allWidgetsReady: Ref<boolean>
+  reset: () => void
+}
+
+export function createWidgetLifecycleManager(
+  totalWidgets: number,
+): WidgetLifecycleManager {
+  const renderedWidgets = ref(new Set<string>())
+  const allWidgetsReady = ref(false)
+  const readyCallbacks = new Set<() => void>()
+  const observers = new Map<string, MutationObserver>()
+
+  const DEV_MODE =
+    getEnvVariable("RACLETTE_DEBUG_MODE") === "true" ||
+    !getEnvVariable("RACLETTE_DEBUG_MODE")
+
+  const checkAllReady = () => {
+    if (renderedWidgets.value.size === totalWidgets && !allWidgetsReady.value) {
+      allWidgetsReady.value = true
+
+      if (DEV_MODE) {
+        log.widgets(
+          "useWidgetLifecycle",
+          `✅ All ${totalWidgets} widgets are fully rendered`,
+        )
+      }
+
+      readyCallbacks.forEach((callback) => callback())
+      readyCallbacks.clear()
+    }
+  }
+
+  const hasVisibleContent = (element: HTMLElement): boolean => {
+    // Check if element has any child nodes
+    if (element.childNodes.length === 0) {
+      return false
+    }
+
+    // Check if element has visible dimensions
+    const rect = element.getBoundingClientRect()
+    if (rect.width === 0 && rect.height === 0) {
+      return false
+    }
+
+    // Check for text content or child elements
+    const hasTextContent = element.textContent?.trim().length > 0
+    const hasChildElements = element.children.length > 0
+
+    return hasTextContent || hasChildElements
+  }
+
+  const registerWidgetAsRendered = (id: string) => {
+    if (!renderedWidgets.value.has(id)) {
+      renderedWidgets.value.add(id)
+
+      if (DEV_MODE) {
+        log.widgets(
+          "useWidgetLifecycle",
+          `📦 Widget rendered: ${id} (${renderedWidgets.value.size}/${totalWidgets})`,
+        )
+      }
+
+      checkAllReady()
+    }
+  }
+
+  const unregisterWidget = (id: string) => {
+    if (DEV_MODE) {
+      log.widgets("useWidgetLifecycle", `📤 Widget unregistered: ${id}`)
+    }
+
+    // Clean up observer
+    const observer = observers.get(id)
+    if (observer) {
+      observer.disconnect()
+      observers.delete(id)
+    }
+
+    renderedWidgets.value.delete(id)
+
+    if (renderedWidgets.value.size < totalWidgets) {
+      allWidgetsReady.value = false
+    }
+  }
+
+  const observeWidgetRendering = (id: string, element: HTMLElement) => {
+    // Check immediately if content is already rendered
+    if (hasVisibleContent(element)) {
+      registerWidgetAsRendered(id)
+      return
+    }
+
+    // Otherwise, observe for changes
+    const observer = new MutationObserver(() => {
+      if (hasVisibleContent(element)) {
+        registerWidgetAsRendered(id)
+        observer.disconnect()
+        observers.delete(id)
+      }
+    })
+
+    observer.observe(element, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["style", "class"],
+    })
+
+    observers.set(id, observer)
+
+    if (DEV_MODE) {
+      log.widgets(
+        "useWidgetLifecycle",
+        `👀 Observing widget for content: ${id}`,
+      )
+    }
+  }
+
+  const createLifecycleHooks = (widgetId: string): WidgetLifecycleHooks => ({
+    onAllWidgetsReady: (callback: () => void) => {
+      if (allWidgetsReady.value) {
+        callback()
+      } else {
+        readyCallbacks.add(callback)
+      }
+    },
+    onWidgetRendered: (element: HTMLElement) => {
+      observeWidgetRendering(widgetId, element)
+    },
+    onWidgetUnmounted: () => unregisterWidget(widgetId),
+  })
+
+  const reset = () => {
+    // Disconnect all observers
+    observers.forEach((observer) => observer.disconnect())
+    observers.clear()
+    renderedWidgets.value.clear()
+    allWidgetsReady.value = false
+    readyCallbacks.clear()
+
+    if (DEV_MODE) {
+      log.widgets("useWidgetLifecycle", "🔄 Widget lifecycle manager reset")
+    }
+  }
+
+  return {
+    createLifecycleHooks,
+    allWidgetsReady,
+    reset,
+  }
+}

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

@@ -1 +1,2 @@
 export * from "./loginUserNotifications"
+export * from "./widgetLoader"

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

@@ -5,7 +5,7 @@
       "subtitle": "Konfiguriere eine Landingpage in der Workbench, damit diese Seite verschwindet! Sieh dir den Dialog zur Erstellung/Bearbeitung von InteractionLinks für den Landingpage-Umschalter an.",
       "subtitleUser": "Deine Schnittstelle zur käsigen Seite der Dinge",
       "noLandingPage": "Keine Landingpage konfiguriert",
-      "visitWorkbench": "Besuche die Raclette-Workbench, um dein Portal zu konfigurieren und deine bevorzugte Landingpage einzurichten.",
+      "visitWorkbench": "Besuche die racletteJS-Workbench, um dein Portal zu konfigurieren und deine bevorzugte Landingpage einzurichten.",
       "goToWorkbench": "Workbench öffnen",
       "configurationsTitle": "Was du in der Workbench konfigurieren kannst",
       "compositionInfoTitle": "Kompositionen",

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

@@ -5,7 +5,7 @@
       "subtitle": "Configure a Landingpage in the Workbench to make this Page disapear! See the InteractionLink Creation/Edit Dialogue for the landingpage toggle",
       "subtitleUser": "Your interface to the cheesy side of things",
       "noLandingPage": "No landing page configured",
-      "visitWorkbench": "Visit the Raclette Workbench to configure your portal and set up your preferred landing page.",
+      "visitWorkbench": "Visit the racletteJS Workbench to configure your portal and set up your preferred landing page.",
       "goToWorkbench": "Open Workbench",
       "configurationsTitle": "What you can configure in the Workbench",
       "compositionInfoTitle": "Compositions",

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

@@ -5,7 +5,7 @@
       "subtitle": "Nakonfigurujte vstupnú stránku vo Workbench, aby táto stránka zmizla! Pozrite si dialóg na vytváranie/upravenie InteractionLink pre prepínač vstupnej stránky.",
       "subtitleUser": "Vaše rozhranie k syrovej strane vecí",
       "noLandingPage": "Vstupná stránka nie je nakonfigurovaná",
-      "visitWorkbench": "Navštívte Raclette Workbench na konfiguráciu vášho portálu a nastavenie preferovanej vstupnej stránky.",
+      "visitWorkbench": "Navštívte racletteJS Workbench na konfiguráciu vášho portálu a nastavenie preferovanej vstupnej stránky.",
       "goToWorkbench": "Otvoriť Workbench",
       "configurationsTitle": "Čo môžete nakonfigurovať vo Workbench",
       "compositionInfoTitle": "Kompozície",

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

@@ -2,25 +2,55 @@ import type { App as VueApp } from "vue"
 import createRacletteApp, { corePluginApi } from "@racletteCore/main"
 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 {
-    const res = await createRacletteApp()
+    // Check if URL indicates a work session
+    const sessionId = extractSessionIdFromUrl()
+
+    const res = await createRacletteApp({
+      requireAuth: !sessionId, // Skip auth requirement if sessionId present
+      sessionId: sessionId || undefined,
+    })
 
     if (currentApp) {
       currentApp.unmount()
       currentApp = undefined
     }
 
-    if (!res.authenticated) {
+    if (!res.authenticated && !sessionId) {
       const noUsers = res.code === "RCLT_DB_NO_USERS"
-      currentApp = createLoginVueApp(VUE_MOUNTING_ELEMENT, res.login, noUsers) // No await needed
+      if (res.login) {
+        currentApp = await createLoginVueApp(VUE_MOUNTING_ELEMENT, res.login, noUsers)
+      }
     } else {
-      currentApp = createVueApp(VUE_MOUNTING_ELEMENT) // No await needed
+      currentApp = await createVueApp(VUE_MOUNTING_ELEMENT)
       await initApp(corePluginApi)
     }
   } catch (err) {

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

@@ -1,5 +1,8 @@
 import { compose, type ComposedRouteState } from "./routeParser"
 import { $store } from "@racletteCore"
+import { validate } from "uuid"
+import type { Composition } from "@shared/types/core/Composition.types"
+import type { InteractionLink } from "@shared/types/core/InteractionLink.types"
 
 export type WidgetLayoutType = "default" | "spaced" | "card" | "border" | "full"
 
@@ -15,11 +18,50 @@ export const DEFAULT_SLOT_NAME = "page"
 export const DEFAULT_MODAL_SLOT_NAME = "modal"
 export const DEFAULT_INLINE_SLOT_NAME = "inline"
 
+/**
+ * Reserved composition name for work sessions
+ * When detected, triggers special handling for shared sessions
+ */
+export const WORK_SESSION_COMPOSITION_NAME = "workSession"
+
+/**
+ * Extract sessionId from workSession composition route
+ * Handles URLs like /workSession/id={uuid}
+ * Returns the UUID if found, null otherwise
+ */
+const extractWorkSessionId = (route: string): string | null => {
+  // Parse the route to check if it contains workSession composition
+  const composed = compose(route)
+
+  // Check if any composition in the route is "workSession"
+  for (const [composition, paramsArray] of composed.map) {
+    if (composition === WORK_SESSION_COMPOSITION_NAME) {
+      // Extract id parameter from the first params object
+      const params =
+        Array.isArray(paramsArray) && paramsArray.length > 0
+          ? paramsArray[0]
+          : {}
+
+      if (typeof params === "object" && params !== null && "id" in params) {
+        const sessionId = params.id as string
+        // Validate UUID format
+        if (validate(sessionId)) {
+          return sessionId
+        }
+      }
+    }
+  }
+
+  return null
+}
+
 export const parseRouteToCompositionSlots = (
   route: string,
   defaultSlotName = DEFAULT_SLOT_NAME,
   addDefaultSlotIfMissing = false,
 ) => {
+  // If it's a workSession route, we'll handle it specially
+  // For now, parse normally - the composition will be updated after socket connection
   const composed = compose(route)
   return parseComposedToCompositionSlots(
     composed,
@@ -27,6 +69,25 @@ export const parseRouteToCompositionSlots = (
     addDefaultSlotIfMissing,
   )
 }
+// Fix number and boolean params
+const coerceParams = (
+  params: Record<string, string>,
+): Record<string, string | number | boolean> =>
+  Object.fromEntries(
+    Object.entries(params).map(([key, value]) => {
+      if (value === "true") return [key, true]
+      if (value === "false") return [key, false]
+      if (value !== "" && !isNaN(Number(value))) return [key, Number(value)]
+      return [key, value]
+    }),
+  )
+/**
+ * Check if a route contains a workSession composition
+ * Returns the sessionId if found, null otherwise
+ */
+export const getWorkSessionIdFromRoute = (route: string): string | null => {
+  return extractWorkSessionId(route)
+}
 
 export const parseComposedToCompositionSlots = (
   composed: ComposedRouteState,
@@ -37,7 +98,9 @@ export const parseComposedToCompositionSlots = (
     ([slotValue, paramsArray, ...slots]) => ({
       slotName: (slots[0] as string) || defaultSlotName,
       slotValue: slotValue as string,
-      slotParams: (paramsArray as Record<string, string>[])[0] || {},
+      slotParams: coerceParams(
+        (paramsArray as Record<string, string>[])[0] || {},
+      ),
     }),
   )
 
@@ -75,3 +138,45 @@ export const transformToOriginalState = (
   // TODO: care about anchor
   return { map, anchor: null }
 }
+export const findInteractionLinkByPathname = (
+  pathname: string,
+): InteractionLink | null => {
+  const interactionLinks = $store.getState("interactionLinks")
+  const composition =
+    $store.selectors.compositions.getCompositionByPath(pathname)
+
+  if (!composition) {
+    return null
+  }
+
+  // Find interactionLink that references this composition
+  const found = Object.values(interactionLinks).find(
+    (link: InteractionLink) => link.composition === composition._id,
+  )
+
+  return found || null
+}
+/**
+ * Get active compositions from current route
+ */
+export const getActiveCompositionsFromRoute = (
+  fullPath: string,
+): Composition[] => {
+  const compositionSlots = parseRouteToCompositionSlots(
+    fullPath,
+    undefined,
+    true,
+  )
+  const compositions: Composition[] = []
+
+  compositionSlots.forEach((slot) => {
+    const composition = $store.selectors.compositions.getCompositionByPath(
+      slot.slotValue,
+    )
+    if (composition) {
+      compositions.push(composition)
+    }
+  })
+
+  return compositions
+}

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

@@ -31,6 +31,8 @@ export type WidgetConf = {
   }
 }
 
+export type OnAllWidgetsReady = (callback: () => void) => void
+
 export type ConfigurableParameters = Record<
   string,
   EditorSettings & { defaultValue: any }

package/services/frontend/types.ts

@@ -1,2 +1,3 @@
 export type * from "./src/core/types"
 export type * from "./src/orchestrator/types"
+export type * from "./src/core/store/types"