@raclettejs/core 0.1.10 → 0.1.12

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

@@ -5,18 +5,44 @@ import { useVueWriteOperationHelper } from "@racletteOrchestrator/composables/us
 import { useVueStateObservableHelper } from "@racletteOrchestrator/composables/useVueStateObservableHelper"
 import { getCurrentInstance, onUnmounted } from "vue"
 import { clone } from "ramda"
-import { $store } from "@racletteCore"
-import type { actionId } from "@racletteCore"
-import type { PluginApi, PluginApiParams } from "@racletteOrchestrator"
+import { $store, createStableHash } from "@racletteCore"
+import type { pluginKey } from "@racletteCore"
+import {
+  useRouteState,
+  type PluginApi,
+  type PluginApiParams,
+} from "@racletteOrchestrator"
 import { useNamespacedI18n } from "@racletteOrchestrator/composables/useNamespacedI18n"
-import { fixDataTypesFromObject } from "@racletteCore/lib/dataHelper"
+import { getCompositionByPath } from "@racletteCore/store/reducers/compositions/selectors"
+
+//TODO move this into a $store api module
+const findWidgetUUIDs = (obj: any): string[] => {
+  const uuids: string[] = []
+
+  const recurse = (value: any): void => {
+    if (Array.isArray(value)) {
+      value.forEach(recurse)
+    } else if (value && typeof value === "object") {
+      if (value.widget?.uuid) {
+        uuids.push(value.widget.uuid)
+      }
+      Object.values(value).forEach(recurse)
+    }
+  }
+
+  recurse(obj.widgetsLayout)
+  return uuids
+}
 
 export const usePluginApi = (
-  params: actionId | PluginApiParams = {},
+  params: pluginKey | PluginApiParams = {},
 ): PluginApi => {
   const subscribers$ = {}
+
   const instance = getCurrentInstance()
   const getState = useVueStateObservableHelper()
+
+  const routeState = useRouteState()
   let pluginKeyOverride: string | undefined
   let actionIdOverride: string | undefined
 
@@ -80,21 +106,74 @@ export const usePluginApi = (
   }
   $instanceApi.$i18n = useNamespacedI18n(pluginKeyOverride ?? pluginKey)
   if (!pluginKeyOverride) {
+    const getSiblingWidgetStates = (compositionId: string = "byRoute") => {
+      const currentSlotType = instance.props?.slotType
+      let siblingWidgetIds = []
+      const activeCompositionPaths = []
+
+      if (compositionId === "byRoute") {
+        const { compositionSlots } = routeState
+        compositionSlots.value.forEach((slot) => {
+          if (currentSlotType) {
+            if (slot.slotName === currentSlotType) {
+              activeCompositionPaths.push(slot.slotValue)
+            }
+          } else {
+            activeCompositionPaths.push(slot.slotValue)
+          }
+        })
+        activeCompositionPaths?.forEach((path) => {
+          const composition = getCompositionByPath(path)
+          siblingWidgetIds = siblingWidgetIds.concat(
+            findWidgetUUIDs(composition),
+          )
+        })
+      } else {
+        // TODO implement widget retrieval from state via compositionId
+        console.log("not implemented yet")
+      }
+
+      if (!siblingWidgetIds.length) {
+        console.error("There is no sibling widgets")
+        return {}
+      } else {
+        let lastSubscriber$ =
+          subscribers$["$store_getSiblingWidgetStates_" + compositionId]
+        const getResult = () => {
+          const { state, observable$ } = getState(["widgets", siblingWidgetIds])
+          if (lastSubscriber$) {
+            lastSubscriber$.unsubscribe()
+          }
+          lastSubscriber$ = observable$
+          subscribers$["$store_getSiblingWidgetStates_" + compositionId] =
+            lastSubscriber$
+
+          return state
+        }
+        return getResult()
+      }
+    }
+    const getWidgetId = () => {
+      return instance?.props?.widgetId || instance?.props?.uuid || ""
+    }
     $instanceApi.$store = {
+      hasChanges: $store.hasChanges,
+      getSiblingWidgetStates,
       /* Store getter */
-      getWidgetState: (widgetId: string = instance?.props?.uuid || "") => {
+      getWidgetState: (widgetId: string = getWidgetId()) => {
         if (!widgetId.length) {
           console.error("No widgetId was provided")
           return {}
         } else {
-          let lastSubscriber$ = subscribers$["$store_getWidgetState"]
+          let lastSubscriber$ =
+            subscribers$["$store_getWidgetState_" + widgetId]
           const getResult = () => {
             const { state, observable$ } = getState(["widgets", widgetId])
             if (lastSubscriber$) {
               lastSubscriber$.unsubscribe()
             }
             lastSubscriber$ = observable$
-            subscribers$["$store_getWidgetState"] = lastSubscriber$
+            subscribers$["$store_getWidgetState_" + widgetId] = lastSubscriber$
 
             return state
           }
@@ -117,14 +196,15 @@ export const usePluginApi = (
       },
 
       getQueryState: (actionId) => {
-        let lastSubscriber$ = subscribers$["$store_getQueryState"]
+        if (!actionId) return {}
+        let lastSubscriber$ = subscribers$["$store_getQueryState_" + actionId]
         const getResult = () => {
           const { state, observable$ } = getState(["queries", actionId])
           if (lastSubscriber$) {
             lastSubscriber$.unsubscribe()
           }
           lastSubscriber$ = observable$
-          subscribers$["$store_store_getQueryStateget"] = lastSubscriber$
+          subscribers$["$store_getQueryState_" + actionId] = lastSubscriber$
 
           return state
         }
@@ -132,17 +212,19 @@ export const usePluginApi = (
       },
 
       getQueryData: (actionId) => {
+        if (!actionId) return {}
         console.error("not implemented yet")
       },
       get: (pathArray, filter) => {
-        let lastSubscriber$ = subscribers$["$store_get"]
+        const cacheString = createStableHash({ pathArray, filter })
+        let lastSubscriber$ = subscribers$["$store_get_" + cacheString]
         const getResult = () => {
           const { state, observable$ } = getState(pathArray, filter)
           if (lastSubscriber$) {
             lastSubscriber$.unsubscribe()
           }
           lastSubscriber$ = observable$
-          subscribers$["$store_get"] = lastSubscriber$
+          subscribers$["$store_get_" + cacheString] = lastSubscriber$
           return state
         }
         return getResult()
@@ -153,20 +235,18 @@ export const usePluginApi = (
           type: "ui/update",
           payload,
         }),
-      setWidgetState: (payload, widgetId = "") => {
-        const _widgetId =
-          widgetId.length > 0 ? widgetId : instance?.props?.uuid || false
-
+      setWidgetState: (payload, widgetId = getWidgetId()) => {
         $store.dispatch({
           type: "widgets/update",
-          uuid: _widgetId,
-          payload: fixDataTypesFromObject(payload),
+          uuid: widgetId,
+          override: true,
+          payload,
         })
       },
 
       updateWidgetState: (
         payload: object,
-        widgetId: string = instance?.props?.uuid || "",
+        widgetId: string = getWidgetId(),
       ) => {
         if (!widgetId) return false
         $store.dispatch({
@@ -175,10 +255,7 @@ export const usePluginApi = (
           payload: payload,
         })
       },
-      updateConfig: (
-        payload: object,
-        widgetId: string = instance?.props?.uuid || "",
-      ) => {
+      updateConfig: (payload: object, widgetId: string = getWidgetId()) => {
         if (!widgetId) return false
         $store.dispatch({
           type: "widgets/update",
@@ -188,19 +265,41 @@ export const usePluginApi = (
           },
         })
       },
-      updatePublic: (
+      updatePublic: (payload: object, widgetId: string = getWidgetId()) => {
+        if (!widgetId) return false
+        $store.dispatch({
+          type: "widgets/update",
+          uuid: widgetId,
+          payload: {
+            public: payload,
+          },
+        })
+      },
+      publishWorkingState: (
         payload: object,
-        widgetId: string = instance?.props?.uuid || "",
+        widgetId: string = getWidgetId(),
       ) => {
         if (!widgetId) return false
         $store.dispatch({
           type: "widgets/update",
           uuid: widgetId,
           payload: {
-            public: payload,
+            workingState: payload,
           },
         })
       },
+      updateDataItem: (
+        uuid: string,
+        payload: object,
+        override: boolean = false,
+      ) => {
+        $store.dispatch({
+          type: "data/update",
+          docId: uuid,
+          override,
+          payload: payload,
+        })
+      },
     }
   }
   const getUser = () => {

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

@@ -84,7 +84,6 @@ export const useRouteState = () => {
     const currentSlotParams =
       compositionSlots.value.find((slot) => slot.slotName === targetSlotName)
         ?.slotParams ?? {}
-
     // Merge current and requested parameters, then filter to only allowed ones
     const allowedParams = interactionLink.queryParameters ?? []
     const mergedParams = mergeDeepRight(currentSlotParams, requestedParams)

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

@@ -79,6 +79,8 @@ export const useVueQueryObservableHelper = (
     response: responseRef,
     execute: coreQuery.execute,
     uuids: coreQuery.uuids$,
+    remove: coreQuery.remove,
+    clear: coreQuery.clear,
     error: computed(() => {
       return errorObservable.value
     }),

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

@@ -66,13 +66,13 @@ export const useVueWriteOperationHelper = (
     subscriberCounter[instanceActionId] -= 1
     if (subscriberCounter[instanceActionId] === 0) {
       // Clean up the observable subject
-      if (subscriber$[instanceActionId]?.destroy) {
-        subscriber$[instanceActionId].destroy()
+      if (subscriber$[instanceActionId]?.remove) {
+        subscriber$[instanceActionId].remove()
       }
       delete subscriber$[instanceActionId]
       delete subscriberCounter[instanceActionId]
     }
-    writeOperation.destroy()
+    writeOperation.remove()
   })
 
   const operationObject = {
@@ -85,6 +85,8 @@ export const useVueWriteOperationHelper = (
     }),
     response: responseRef,
     execute: writeOperation.execute,
+    remove: writeOperation.remove,
+    clear: writeOperation.clear,
     error: computed(() => {
       return errorObservable.value
     }),

package/services/frontend/src/orchestrator/composables/useWidgets/helperFunctions.ts

@@ -19,7 +19,10 @@ const WIDGET_COMPONENT_FILES = import.meta.glob(
   [
     "@racletteCore/../../external-app-plugins/**/frontend/widgets/**/*Widget.vue",
   ],
-  { eager: false },
+  {
+    eager: false,
+    as: "url",
+  },
 )
 
 // Discover widget setup files for metadata

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

@@ -10,7 +10,7 @@ export default () => {
     )
 
     if (checkTokenNotifications.length) {
-      $eventbus.emit("ui_addToSnackBar", checkTokenNotifications[0].message)
+      $eventbus.emit("ui/addToSnackbar", checkTokenNotifications[0].message)
       $store.dispatch({
         type: "notifications/markAllAsRead",
       })

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

@@ -2,7 +2,7 @@ import { $eventbus } from "@racletteCore/main"
 
 const copyToClipboard = (name: string, value: string) => {
   navigator.clipboard.writeText(value)
-  $eventbus.emit("ui_addToSnackBar", {
+  $eventbus.emit("ui/addToSnackbar", {
     i18n: "core.copiedToClipboard$name",
     content: { name },
     color: "info",

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

@@ -107,7 +107,7 @@
     "color": "Farbe",
     "versionUpdate": "Eine neue Version ist verfügbar. Laden Sie die Seite neu, um alle neuen Features zu nutzen.",
     "eggcontrols": {
-      "asteroids": "Nutzen sie die Pfeiltasten zum Navigieren und die Leertaste zum Schießen. Viel Spaß!"
+      "asteroids": "Nutzen sie die Pfeiltasten zum Navigieren und die Leertaste zum Schießen. Mit escape beenden sie das Spiel, Viel Spaß!"
     },
     "languages": {
       "tl-TL": "Klingonisch",
@@ -198,6 +198,7 @@
       "yi-IL": "Jiddisch (Israel)",
       "zu-ZA": "Zulu (Südafrika)",
       "sk": "Slowakisch (Slowakei)",
+      "sk-SK": "Slowakisch (Slowakei)",
       "sl-SL": "Slowenisch (Slowenien)"
     }
   }

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

@@ -107,7 +107,7 @@
     "color": "Color",
     "versionUpdate": "A new version is available. Reload the page to use all new features.",
     "eggcontrols": {
-      "asteroids": "Use the arrow keys to navigate and the spacebar to shoot. Have fun!"
+      "asteroids": "Use the arrow keys to navigate and the spacebar to shoot. Press Escape to exit the game. Have fun!"
     },
     "languages": {
       "tl-TL": "Klingon",
@@ -198,6 +198,7 @@
       "yi-IL": "Yiddish (Israel)",
       "zu-ZA": "Zulu (South Africa)",
       "sk": "Slovak (Slovakia)",
+      "sk-SK": "Slovak (Slovakia)",
       "sl-SL": "Slovenian (Slovenia)"
     }
   }

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

@@ -107,7 +107,7 @@
     "color": "Farba",
     "versionUpdate": "Je dostupná nová verzia. Obnovte stránku pre použitie všetkých nových funkcií.",
     "eggcontrols": {
-      "asteroids": "Použite šípky na navigáciu a medzerník na streľbu. Bavte sa!"
+      "asteroids": "Použite šípky na navigáciu a medzerník na streľbu. Stlačením klávesu Escape ukončíte hru. Bavte sa!"
     },
     "languages": {
       "tl-TL": "Klingončina",
@@ -198,6 +198,7 @@
       "yi-IL": "Jidiš (Izrael)",
       "zu-ZA": "Zulu (Južná Afrika)",
       "sk": "Slovenčina (Slovensko)",
+      "sk-SK": "Slovenčina (Slovensko)",
       "sl-SL": "Slovinčina (Slovinsko)"
     }
   }

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

@@ -107,7 +107,7 @@
     "color": "ngem",
     "versionUpdate": "veS wov ’oH. paq reload chel pagh SoH Hoch tlhab!",
     "eggcontrols": {
-      "asteroids": "QuQ navmey Dalo'nIS, 'ej bachmeH patlh yIlo'. yIchep!"
+      "asteroids": "navigatmeH 'arrow keys' yIlo' 'ej bachmeH 'spacebar' yIlo'. QujmeH 'Escape' yIlo'. yIchegh 'ej yIbel!"
     }
   }
 }

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

@@ -1,15 +1,19 @@
 import { compose, type ComposedRouteState } from "./routeParser"
 import { $store } from "@racletteCore"
 
+export type WidgetLayoutType = "default" | "spaced" | "card" | "border" | "full"
+
 export interface CompositionSlot {
   slotName: string
   slotValue: string
   slotParams?: Record<string, string>
+  slotLayout?: WidgetLayoutType
 }
 
 // TODO: transform this to an array
 export const DEFAULT_SLOT_NAME = "page"
 export const DEFAULT_MODAL_SLOT_NAME = "modal"
+export const DEFAULT_INLINE_SLOT_NAME = "inline"
 
 export const parseRouteToCompositionSlots = (
   route: string,
@@ -17,7 +21,6 @@ export const parseRouteToCompositionSlots = (
   addDefaultSlotIfMissing = false,
 ) => {
   const composed = compose(route)
-
   return parseComposedToCompositionSlots(
     composed,
     defaultSlotName,

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

@@ -3,8 +3,8 @@ import type { RouteLocationNormalized } from "vue-router"
 import {
   DEFAULT_SLOT_NAME,
   parseRouteToCompositionSlots,
+  type CompositionSlot,
 } from "@racletteOrchestrator/router/routeParserHelper"
-import { difference } from "ramda"
 import { getCompositionIdByPath } from "@racletteCore/store/reducers/compositions/selectors"
 
 // TODO: find better filename
@@ -46,6 +46,59 @@ export const dispatchSetCompositionAs = (
   }
 }
 
+/**
+ * Compares two arrays of composition slots and returns the differences
+ * Returns an object with three arrays: toRemove, toAdd, toUpdate
+ */
+const getCompositionSlotChanges = (
+  oldSlots: CompositionSlot[],
+  newSlots: CompositionSlot[],
+) => {
+  // Helper: Create a comparison key for slots (ignoring slotParams)
+  const getSlotKey = (slot: CompositionSlot) =>
+    `${slot.slotName}:${slot.slotValue}`
+
+  // Helper: Check if slotParams are different
+  const hasDifferentSlotParams = (
+    slotA: CompositionSlot,
+    slotB: CompositionSlot,
+  ) => {
+    const paramsA = slotA.slotParams || {}
+    const paramsB = slotB.slotParams || {}
+    return JSON.stringify(paramsA) !== JSON.stringify(paramsB)
+  }
+
+  const oldSlotMap = new Map(oldSlots.map((slot) => [getSlotKey(slot), slot]))
+  const newSlotMap = new Map(newSlots.map((slot) => [getSlotKey(slot), slot]))
+
+  const toRemove: CompositionSlot[] = []
+  const toAdd: CompositionSlot[] = []
+  const toUpdate: CompositionSlot[] = []
+
+  // Find slots to remove (exist in old but not in new)
+  for (const [key, oldSlot] of oldSlotMap) {
+    if (!newSlotMap.has(key)) {
+      toRemove.push(oldSlot)
+    }
+  }
+
+  // Find slots to add or update (exist in new)
+  for (const [key, newSlot] of newSlotMap) {
+    if (!oldSlotMap.has(key)) {
+      // Completely new slot
+      toAdd.push(newSlot)
+    } else {
+      // Slot exists in both, check if slotParams changed
+      const oldSlot = oldSlotMap.get(key)!
+      if (hasDifferentSlotParams(oldSlot, newSlot)) {
+        toUpdate.push(newSlot)
+      }
+    }
+  }
+
+  return { toRemove, toAdd, toUpdate }
+}
+
 export const updateActiveCompositions = (
   to: RouteLocationNormalized,
   from: RouteLocationNormalized,
@@ -54,7 +107,6 @@ export const updateActiveCompositions = (
   const hasToPageIdParameter = Boolean(to.params.pageId?.length)
   const hasFromPageIdParameter = Boolean(from.params.pageId?.length)
 
-  // TODO: write helper method to combine compose & parseRouteToCompositionSlots
   const compositionSlots = parseRouteToCompositionSlots(
     to.fullPath,
     undefined,
@@ -67,21 +119,36 @@ export const updateActiveCompositions = (
     !isInitialRouting && !hasFromPageIdParameter,
   )
 
-  const compositionSlotsToRemove = difference(
+  const { toRemove, toAdd, toUpdate } = getCompositionSlotChanges(
     beforeCompositionSlots,
     compositionSlots,
   )
-  const compositionSlotsToAdd = difference(
-    compositionSlots,
-    beforeCompositionSlots,
-  )
 
-  compositionSlotsToRemove.forEach((slot) =>
-    dispatchSetCompositionAs(slot.slotName),
-  )
-  compositionSlotsToAdd.forEach((slot) =>
+  // Remove slots that are no longer needed
+  toRemove.forEach((slot) => dispatchSetCompositionAs(slot.slotName))
+
+  // Add completely new slots
+  toAdd.forEach((slot) =>
     dispatchSetCompositionAs(slot.slotName, slot.slotValue, slot.slotParams),
   )
+
+  // Update existing slots with new slotParams (without removing/adding)
+  toUpdate.forEach((slot) => {
+    const compositionId = getCompositionIdByPath(slot.slotValue)
+    if (
+      compositionId &&
+      slot.slotParams &&
+      Object.keys(slot.slotParams).length
+    ) {
+      $store.dispatch({
+        type: "compositions/update",
+        payload: {
+          compositionId,
+          compositionParams: slot.slotParams,
+        },
+      })
+    }
+  })
 }
 
 export const handleRouteChange = (

package/services/frontend/tsconfig.app.json

@@ -8,6 +8,7 @@
     "paths": {
       "@shared/*": ["../backend/src/shared/*"],
       "@core": ["../.."],
+      "@app/*": ["./src/app/*"],
       "@racletteCore/*": ["./src/core/*"],
       "@racletteCore": ["./src/core"],
       "@racletteOrchestrator": ["./src/orchestrator"],