@raclettejs/core 0.0.1

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

@@ -0,0 +1,238 @@
+import { registeredPlugins } from "@racletteCore/setup/plugin-system"
+import { getCurrentPluginKey } from "virtual:plugin-key"
+import { useVueQueryObservableHelper } from "@racletteOrchestrator/composables/useVueQueryObservableHelper"
+import { useVueWriteOperationHelper } from "@racletteOrchestrator/composables/useVueWriteOperationHelper"
+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 { useNamespacedI18n } from "@racletteOrchestrator/composables/useNamespacedI18n"
+import { fixDataTypesFromObject } from "@racletteCore/lib/dataHelper"
+
+export const usePluginApi = (
+  params: actionId | PluginApiParams = {},
+): PluginApi => {
+  const subscribers$ = {}
+  const instance = getCurrentInstance()
+  const getState = useVueStateObservableHelper()
+  let pluginKeyOverride: string | undefined
+  let actionIdOverride: string | undefined
+
+  if (typeof params === "string") {
+    pluginKeyOverride = params
+  }
+  if (typeof params === "object") {
+    if (params?.actionId?.length) {
+      actionIdOverride = params.actionId
+    }
+    if (params.pluginKey) {
+      pluginKeyOverride = params.pluginKey
+    }
+  }
+  if (!instance) {
+    throw new Error("usePluginApi must be used within setup()")
+  }
+
+  const pluginKey = getCurrentPluginKey(instance.uid)
+
+  if (!pluginKey && !pluginKeyOverride) {
+    console.error("usePluginApi must be used within a plugin component")
+    return {} as PluginApi
+  }
+  let plugin = pluginKey ? clone(registeredPlugins[pluginKey]) : null
+  if (pluginKeyOverride) {
+    const newPlugin = clone(registeredPlugins[pluginKeyOverride])
+
+    if (!newPlugin) {
+      console.error(
+        `Plugin '${pluginKeyOverride}' not found during usePluginApi() setup`,
+      )
+      return {} as PluginApi
+    }
+
+    // override logger here as we incarnate a foreign api
+    if (plugin) {
+      newPlugin.$api.$log = plugin.$api.$log
+    }
+    plugin = newPlugin
+  }
+  if (!plugin || !plugin.$api) {
+    console.error(`Plugin API not found for plugin: ${pluginKey}`)
+
+    return {} as PluginApi
+  }
+  const $instanceApi = plugin.$api
+
+  if (plugin.initCud) {
+    $instanceApi.$data = plugin.initCud(
+      {
+        read: useVueQueryObservableHelper,
+        write: useVueWriteOperationHelper,
+      },
+      instance.uid,
+      actionIdOverride,
+    )
+  }
+  if (plugin.initSocket) {
+    $instanceApi.$socket = plugin.initSocket()
+  }
+  $instanceApi.$i18n = useNamespacedI18n(pluginKeyOverride ?? pluginKey)
+  if (!pluginKeyOverride) {
+    $instanceApi.$store = {
+      /* Store getter */
+      getWidgetState: (widgetId: string = instance?.props?.uuid || "") => {
+        if (!widgetId.length) {
+          console.error("No widgetId was provided")
+          return {}
+        } else {
+          let lastSubscriber$ = subscribers$["$store_getWidgetState"]
+          const getResult = () => {
+            const { state, observable$ } = getState(["widgets", widgetId])
+            if (lastSubscriber$) {
+              lastSubscriber$.unsubscribe()
+            }
+            lastSubscriber$ = observable$
+            subscribers$["$store_getWidgetState"] = lastSubscriber$
+
+            return state
+          }
+          return getResult()
+        }
+      },
+      getUiState: () => {
+        let lastSubscriber$ = subscribers$["$store_getUiState"]
+        const getResult = () => {
+          const { state, observable$ } = getState(["ui"])
+          if (lastSubscriber$) {
+            lastSubscriber$.unsubscribe()
+          }
+          lastSubscriber$ = observable$
+          subscribers$["$store_getUiState"] = lastSubscriber$
+
+          return state
+        }
+        return getResult()
+      },
+
+      getQueryState: (actionId) => {
+        let lastSubscriber$ = subscribers$["$store_getQueryState"]
+        const getResult = () => {
+          const { state, observable$ } = getState(["queries", actionId])
+          if (lastSubscriber$) {
+            lastSubscriber$.unsubscribe()
+          }
+          lastSubscriber$ = observable$
+          subscribers$["$store_store_getQueryStateget"] = lastSubscriber$
+
+          return state
+        }
+        return getResult()
+      },
+
+      getQueryData: (actionId) => {
+        console.error("not implemented yet")
+      },
+      get: (pathArray, filter) => {
+        let lastSubscriber$ = subscribers$["$store_get"]
+        const getResult = () => {
+          const { state, observable$ } = getState(pathArray, filter)
+          if (lastSubscriber$) {
+            lastSubscriber$.unsubscribe()
+          }
+          lastSubscriber$ = observable$
+          subscribers$["$store_get"] = lastSubscriber$
+          return state
+        }
+        return getResult()
+      },
+      /* Store Setter */
+      setUiState: (payload) =>
+        $store.dispatch({
+          type: "ui/update",
+          payload,
+        }),
+      setWidgetState: (payload, widgetId = "") => {
+        const _widgetId =
+          widgetId.length > 0 ? widgetId : instance?.props?.uuid || false
+
+        $store.dispatch({
+          type: "widgets/update",
+          uuid: _widgetId,
+          payload: fixDataTypesFromObject(payload),
+        })
+      },
+
+      updateWidgetState: (
+        payload: object,
+        widgetId: string = instance?.props?.uuid || "",
+      ) => {
+        if (!widgetId) return false
+        $store.dispatch({
+          type: "widgets/update",
+          uuid: widgetId,
+          payload: payload,
+        })
+      },
+      updateConfig: (
+        payload: object,
+        widgetId: string = instance?.props?.uuid || "",
+      ) => {
+        if (!widgetId) return false
+        $store.dispatch({
+          type: "widgets/update",
+          uuid: widgetId,
+          payload: {
+            config: payload,
+          },
+        })
+      },
+      updatePublic: (
+        payload: object,
+        widgetId: string = instance?.props?.uuid || "",
+      ) => {
+        if (!widgetId) return false
+        $store.dispatch({
+          type: "widgets/update",
+          uuid: widgetId,
+          payload: {
+            public: payload,
+          },
+        })
+      },
+    }
+  }
+  const getUser = () => {
+    let lastSubscriber$ = subscribers$["$user"]
+    const { state, observable$ } = getState("user")
+    if (lastSubscriber$) {
+      lastSubscriber$.unsubscribe()
+    }
+    lastSubscriber$ = observable$
+    subscribers$["$user"] = lastSubscriber$
+    return state
+  }
+  if (plugin.initEventbus) {
+    $instanceApi.$eventbus = plugin.initEventbus()
+  }
+
+  // Retrieve the user for the api
+  $instanceApi.$user = getUser()
+  onUnmounted(() => {
+    if (subscribers$.length) {
+      subscribers$.forEach((subscriber) => {
+        subscriber.unsubscribe()
+      })
+    }
+
+    if ($instanceApi.$socket?.registeredListeners?.length) {
+      // Clean up socket events
+      $instanceApi.$socket.registeredListeners.forEach((listener) => {
+        $instanceApi.$socket.off(listener.eventName, listener.handlerFn)
+      })
+    }
+  })
+
+  return $instanceApi
+}

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

@@ -0,0 +1,129 @@
+import type { CompositionSlot } from "@racletteOrchestrator/router/routeParserHelper"
+import { computed } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import {
+  DEFAULT_SLOT_NAME,
+  parseRouteToCompositionSlots,
+  transformToOriginalState,
+} from "@racletteOrchestrator/router/routeParserHelper"
+import { compose, urlCompose } from "@racletteOrchestrator/router/routeParser"
+import { clone, mergeDeepRight, pick } from "ramda"
+import type { InteractionLink } from "@shared/types"
+import {
+  getCompositionById,
+  getLocalizedName,
+} from "@racletteCore/store/reducers/compositions/selectors"
+import useInteractionLinks from "./useInteractionLinks"
+
+export const useRouteState = () => {
+  const route = useRoute()
+  const router = useRouter()
+  const { state: interactionLinks } = useInteractionLinks()
+
+  const composed = computed(() => compose(route.fullPath))
+
+  const compositionSlots = computed<CompositionSlot[]>(() =>
+    parseRouteToCompositionSlots(route.fullPath, undefined, true),
+  )
+
+  const getInteractionLinkUrl = (slot: CompositionSlot) => {
+    const newSlots = clone(compositionSlots.value)
+    const found = newSlots.find((item) => item.slotName === slot.slotName)
+
+    if (found) {
+      Object.assign(found, slot)
+    } else {
+      newSlots.push(slot)
+    }
+
+    const newState = transformToOriginalState(newSlots)
+    const newUrl = urlCompose(newState)
+
+    return newUrl
+  }
+
+  const getCompositionLinkForSlotName = (slotName) =>
+    computed(() =>
+      compositionSlots.value.find((slot) => slot.slotName === slotName),
+    )
+
+  const updateSlot = (slot: CompositionSlot) => {
+    const newUrl = getInteractionLinkUrl(slot)
+
+    // router.push({ name: "app.space.page", params: { pageId: newUrl } })
+    router.push({ path: "/" + newUrl })
+  }
+
+  const removeSlot = (slotName: string) => {
+    const filteredCompositions = compositionSlots.value.filter(
+      (value) => value.slotName !== slotName,
+    )
+
+    const urlState = transformToOriginalState(filteredCompositions)
+    const newUrl = urlCompose(urlState)
+
+    // router.push({ name: "app.space.page", params: { pageId: newUrl } })
+    router.push({ path: "/" + newUrl })
+  }
+
+  // TODO: think about to move that method into new composable useInteractionLink
+  const triggerInteractionLink = (
+    interactionLink: InteractionLink,
+    requestedParams: Record<string, string> = {},
+  ): CompositionSlot | undefined => {
+    const targetSlotName = interactionLink.slotType ?? DEFAULT_SLOT_NAME
+    const targetComposition = getCompositionById(interactionLink.composition)
+
+    if (!targetComposition) {
+      console.error(
+        `No composition with id ${interactionLink.composition} found.`,
+      )
+      return undefined
+    }
+
+    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)
+    const finalParams = pick(allowedParams, mergedParams)
+
+    const compositionSlot: CompositionSlot = {
+      slotName: targetSlotName,
+      slotValue: getLocalizedName(targetComposition.pathname),
+      slotParams: finalParams,
+    }
+
+    updateSlot(compositionSlot)
+  }
+
+  const triggerInteractionLinkById = (
+    id: string,
+    requestedParams: Record<string, string> = {},
+  ) => {
+    const found = interactionLinks.value.find(
+      (interactionLink) => interactionLink._id === id,
+    )
+
+    if (found) {
+      triggerInteractionLink(found, requestedParams)
+    } else {
+      console.error(`InteractionLink ${id} not found!`)
+    }
+  }
+
+  return {
+    composed,
+    compositionSlots,
+    getCompositionLinkForSlotName,
+    getInteractionLinkUrl,
+    updateSlot,
+    removeSlot,
+    triggerInteractionLink,
+    triggerInteractionLinkById,
+  }
+}
+
+export default useRouteState

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

@@ -0,0 +1,17 @@
+import { computed } from "vue"
+import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
+import { $store } from "@racletteCore"
+
+export default (statePath: string | string[], dispatchType: string) => {
+  const { state } = useStateSubscriber(statePath)
+
+  return <T>(property: string) =>
+    computed<T>({
+      get: () => state.value[property],
+      set: async (newValue: T) =>
+        await $store.dispatch({
+          type: dispatchType,
+          payload: { [property]: newValue },
+        }),
+    })
+}

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

@@ -0,0 +1,33 @@
+import { onUnmounted, ref } from "vue"
+import { clone } from "ramda"
+import getStateObservable from "@racletteCore/lib/observableHelpers/getStateObservable"
+import { $store } from "@racletteCore"
+const useStateSubscriber = <T = any>(
+  statePath: string | string[],
+  callback?: Function,
+  addOnUnmountedHook = true,
+) => {
+  const data = ref<T>(null)
+
+  const subscriber$ = getStateObservable(statePath).subscribe((val) => {
+    if (!$store.hasChanges(data.value, val)) {
+      return
+    }
+    const oldValue = clone(data.value)
+
+    data.value = val
+    if (typeof callback === "function") {
+      callback(val, oldValue)
+    }
+  })
+
+  if (addOnUnmountedHook) {
+    onUnmounted(() => subscriber$?.unsubscribe())
+  }
+
+  // expose managed state as return value
+  return { subscriber$, state: data }
+}
+
+export default useStateSubscriber
+export { useStateSubscriber }

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

@@ -0,0 +1,28 @@
+import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
+import useStateBinding from "./useStateBinding"
+import type { UIState } from "@racletteCore/store/types"
+
+export default () => {
+  const { state } = useStateSubscriber("ui")
+
+  const createUiStateBinding = useStateBinding("ui", "ui/update")
+
+  const locale = createUiStateBinding<string>("locale")
+  const theme = createUiStateBinding<"light" | "dark">("theme")
+  const mobile = createUiStateBinding<boolean>("mobile")
+  const loading = createUiStateBinding<boolean>("loading")
+  const landingPage = createUiStateBinding<string>("landingPage")
+  const availableInterfaces = createUiStateBinding<
+    UIState["availableInterfaces"]
+  >("availableInterfaces")
+
+  return {
+    state,
+    locale,
+    theme,
+    mobile,
+    loading,
+    landingPage,
+    availableInterfaces,
+  }
+}

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

@@ -0,0 +1,75 @@
+import { computed, ref, watch, onUnmounted } from "vue"
+import { useObservable } from "@vueuse/rxjs"
+import { $queryApi } from "@racletteCore/lib/data/dataApi"
+import type {
+  CustomStoreActionsPayload,
+  QueryApiQuery,
+} from "@racletteCore/types"
+import { difference } from "ramda"
+import getStateObservable from "@racletteCore/lib/observableHelpers/getStateObservable"
+import type { Observable } from "rxjs"
+
+const subscriber$ = {}
+// the counter is just here to remember how often we have returned the same subscriber per actionId (in case of shared actions) this is neede for proper unsubscribe
+const subscriberCounter = {}
+export const useVueQueryObservableHelper = (
+  instanceActionId,
+  target,
+  { params = {}, options = {} }: CustomStoreActionsPayload = {},
+) => {
+  const dataObservable$ = ref<Observable<unknown>>()
+
+  const data = computed(() => {
+    if (dataObservable$.value) {
+      const result = useObservable(dataObservable$.value).value
+      return result
+    }
+
+    return null
+  })
+
+  let coreQuery
+
+  if (subscriber$[instanceActionId]) {
+    subscriberCounter[instanceActionId] += 1
+    coreQuery = subscriber$[instanceActionId]
+  } else {
+    subscriberCounter[instanceActionId] = 1
+    coreQuery = $queryApi(instanceActionId, target, { params, options })
+  }
+  subscriber$[instanceActionId] = coreQuery
+  const queryRef = useObservable<QueryApiQuery>(coreQuery.query$)
+  const errorObservable = useObservable(coreQuery.error$)
+
+  watch(queryRef, (value, oldValue) => {
+    const newUUIDS = value?.uuids || []
+    const oldUUIDS = oldValue?.uuids || []
+    if (
+      difference(newUUIDS, oldUUIDS).length ||
+      difference(oldUUIDS || [], newUUIDS).length
+    ) {
+      dataObservable$.value = getStateObservable(["data", newUUIDS, "_source"])
+    }
+  })
+  onUnmounted(() => {
+    subscriberCounter[instanceActionId] -= 1
+    if (subscriberCounter[instanceActionId] === 0) {
+      subscriber$[instanceActionId].remove()
+      delete subscriber$[instanceActionId]
+      delete subscriberCounter[instanceActionId]
+    }
+  })
+  const queryObject = {
+    query: queryRef,
+    isLoading: computed(() => {
+      return queryRef.value?.loading
+    }),
+    data,
+    execute: coreQuery.execute,
+    uuids: coreQuery.uuids$,
+    error: computed(() => {
+      return errorObservable.value
+    }),
+  }
+  return queryObject
+}

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

@@ -0,0 +1,75 @@
+import { computed } from "vue"
+import { useObservable } from "@vueuse/rxjs"
+import getStateObservable from "@racletteCore/lib/observableHelpers/getStateObservable"
+import type { Observable } from "rxjs"
+
+/**
+ * Filters an object of objects based on nested property values
+ * @param data The source data object to filter
+ * @param filter An object where keys are dot-notation paths and values are the expected values
+ * @returns A new object containing only the items that match all filter criteria
+ */
+const filterObjects = <T extends Record<string, any>>(
+  data: Record<string, T>,
+  filter: Record<string, any>,
+): Record<string, T> => {
+  const result: Record<string, T> = {}
+
+  // Helper function to get a nested property using a dot-notation path
+  const getNestedProperty = (obj: any, path: string): any =>
+    path
+      .split(".")
+      .reduce(
+        (prev, curr) =>
+          prev && prev[curr] !== undefined ? prev[curr] : undefined,
+        obj,
+      )
+
+  // Iterate through each item in the data object
+  Object.entries(data).forEach(([key, item]) => {
+    // Check if the item matches all filter criteria
+    const matchesAllCriteria = Object.entries(filter).every(
+      ([filterPath, filterValue]) => {
+        const propertyValue = getNestedProperty(item, filterPath)
+
+        return propertyValue === filterValue
+      },
+    )
+
+    // If the item matches all criteria, add it to the result
+    if (matchesAllCriteria) {
+      result[key] = item
+    }
+  })
+
+  return result
+}
+
+// Example usage:
+// const filteredData = filterObjects(sourceData, {'_source.title': 'ADMIN', '_type': 'tag'});
+
+// TODO find a better way to handle the filter here. It would be nice if the observable would from the beginning only contain what we want want instead of just returning a filtered subset of it
+export const useVueStateObservableHelper =
+  () =>
+  (
+    path: string | string[] = [],
+    filter: Record<string, any> = {},
+  ): { state: Object; observable$: Observable<any> } => {
+    const observable$ = getStateObservable(path)
+
+    const state = computed(() => {
+      if (observable$) {
+        const result = useObservable(observable$).value
+
+        if (Object.keys(result).length > 0 && Object.keys(filter).length > 0) {
+          return filterObjects(result, filter)
+        }
+
+        return result
+      }
+
+      return null
+    })
+
+    return { observable$, state }
+  }

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

@@ -0,0 +1,82 @@
+import { computed, ref, watch, onUnmounted } from "vue"
+import { useObservable } from "@vueuse/rxjs"
+import { $writeDataApi } from "@racletteCore/lib/data/dataApi"
+import type { CustomStoreActionsPayload } from "@racletteCore/types"
+import getStateObservable from "@racletteCore/lib/observableHelpers/getStateObservable"
+import type { Observable } from "rxjs"
+
+const subscriber$ = {}
+// the counter is just here to remember how often we have returned the same subscriber per actionId (in case of shared actions) this is neede for proper unsubscribe
+const subscriberCounter = {}
+export const useVueWriteOperationHelper = (
+  instanceActionId,
+  operationDefinition,
+  { params = {}, options = {} }: CustomStoreActionsPayload = {},
+) => {
+  let writeOperation
+  const dataStoreObservable$ = ref<Observable<unknown>>()
+  const storeData = computed(() => {
+    if (dataStoreObservable$.value) {
+      const result = useObservable(dataStoreObservable$.value).value
+      return result
+    }
+
+    return null
+  })
+  if (subscriber$[instanceActionId]) {
+    subscriberCounter[instanceActionId] += 1
+    writeOperation = subscriber$[instanceActionId]
+  } else {
+    subscriberCounter[instanceActionId] = 1
+    writeOperation = $writeDataApi(instanceActionId, operationDefinition, {
+      params,
+      options,
+    })
+  }
+
+  subscriber$[instanceActionId] = writeOperation
+
+  // Use the observables for reactive state
+  const isLoadingObservable = useObservable(writeOperation.isLoading$)
+  const dataObservable = useObservable(writeOperation.data$)
+  const errorObservable = useObservable(writeOperation.error$)
+
+  onUnmounted(() => {
+    subscriberCounter[instanceActionId] -= 1
+    if (subscriberCounter[instanceActionId] === 0) {
+      // Clean up the observable subject
+      if (subscriber$[instanceActionId]?.destroy) {
+        subscriber$[instanceActionId].destroy()
+      }
+      delete subscriber$[instanceActionId]
+      delete subscriberCounter[instanceActionId]
+    }
+    writeOperation.destroy()
+  })
+
+  const operationObject = {
+    isLoading: computed(() => {
+      return isLoadingObservable.value
+    }),
+    data: computed(() => {
+      const uuids = []
+      if (dataObservable.value && Array.isArray(dataObservable.value)) {
+        dataObservable.value.forEach((item) => {
+          uuids.push(item._id)
+        })
+        dataStoreObservable$.value = getStateObservable([
+          "data",
+          uuids,
+          "_source",
+        ])
+      }
+      return storeData.value || []
+    }),
+    execute: writeOperation.execute,
+    error: computed(() => {
+      return errorObservable.value
+    }),
+  }
+
+  return operationObject
+}