@raclettejs/core 0.1.10 → 0.1.12

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

@@ -93,10 +93,10 @@ const createRacletteApp = async (
   store.dispatch({ type: "user/set", payload: user })
 
   // does the core really need to communicate with itself via eventbus?
-  eventbus.emit("socket_joinRoom")
+  eventbus.emit("socket/join/room")
 
   return new Promise<CreateAppResponse>(async (resolve, reject) => {
-    eventbus.on("ui_setupProject", (spaceId: string) => {
+    eventbus.on("ui/setupProject", (spaceId: string) => {
       resolve({
         authenticated: true,
         setupComplete: true,
@@ -152,7 +152,7 @@ const generateLoginCallback =
 
         store.dispatch({ type: "user/set", payload: response.data.user })
 
-        eventbus.emit("socket_joinRoom")
+        eventbus.emit("socket/join/room")
 
         // Return success with token & redirect function
         return {

package/services/frontend/src/core/setup/plugin-system/api/wrappers.ts

@@ -27,12 +27,29 @@ export const wrapFileApi = (
 }
 
 export const wrapEventbusApi = (
+  plugin: RegisteredPlugin,
   $eventbus: any,
   pluginApi: Partial<PluginApi>,
 ): any => {
   if ($eventbus && !pluginApi.$eventbus) {
     const $pluginEventbus = new EventEmitter(false, false)
-    $pluginEventbus.global = $eventbus
+    $pluginEventbus.global = {
+      on: (event: string, listener: Function) => {
+        return $eventbus.on(event, listener)
+      },
+      once: (event: string, listener: Function) => {
+        return $eventbus.once(event, listener)
+      },
+      emit: (event: string, payload: object) => {
+        return $eventbus.emit(event, {
+          sender: plugin.pluginKey,
+          data: payload,
+        })
+      },
+      isValid: (event: string) => {
+        return $eventbus.isValid(event)
+      },
+    }
     return $pluginEventbus
   }
   return pluginApi

package/services/frontend/src/core/setup/plugin-system/registration/index.ts

@@ -113,7 +113,7 @@ export const loadAndRegisterPlugin = async (
 
     if (corePluginApi.$eventbus) {
       currentPlugin.initEventbus = () =>
-        wrapEventbusApi(corePluginApi.$eventbus, pluginApi)
+        wrapEventbusApi(plugin, corePluginApi.$eventbus, pluginApi)
     }
 
     const handleOperations = handlePluginOperations(

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

@@ -6,7 +6,7 @@ import log from "@racletteCore/lib/logger"
 import { getUserToken } from "./sessionHandler"
 import configService from "@racletteCore/lib/configService"
 const registerSocketClient = ($socket, $eventbus) => {
-  $eventbus.on("socket_joinRoom", (roomId?: string) => {
+  $eventbus.on("socket/join/room", (roomId?: string) => {
     const { requireAuthentication } = configService.getConfig()?.global ?? {
       requireAuthentication: true,
     }
@@ -25,7 +25,7 @@ const registerSocketClient = ($socket, $eventbus) => {
     $socket.emit("join", { roomId, token })
   })
 
-  $eventbus.on("socket_leaveRoom", (roomId) => {
+  $eventbus.on("socket/leave/room", (roomId) => {
     log.socket("emitLeave", { roomId })
     $socket.emit("leave", roomId)
   })

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

@@ -206,7 +206,7 @@ const registerSocketEvents = ($socket, $store, $eventbus) => {
         })
         await setupSpace(compositions, interactionLinks, projectConfig)
 
-        $eventbus.emit("ui_setupProject", roomId)
+        $eventbus.emit("ui/setupProject", roomId)
       })
       // Reset all store states which are project dependent.
       $store.dispatch({
@@ -263,7 +263,7 @@ const registerSocketEvents = ($socket, $store, $eventbus) => {
       isOwnRequest: appSessionId === $socket.appSessionId,
     })
     handleServerItem(payload, true, false)
-    $eventbus.emit("socket_dataUpdated", { offline: false, body })
+    $eventbus.emit("socket/data/update", { offline: false, body })
   })
 
   /**

package/services/frontend/src/core/store/reducers/compositions/selectors.ts

@@ -21,8 +21,8 @@ type LocaleObject = {
 // TODO: outsource to a better place
 const getLocalizedName = (localeObject: LocaleObject) => {
   const locale = $store.getState(["ui", "locale"])
-
-  const localeName = localeObject[locale]
+  const localeName =
+    localeObject[locale] || localeObject[locale.split("-")?.[0]]
 
   if (localeName) {
     return localeName

package/services/frontend/src/core/store/reducers/data/index.ts

@@ -6,7 +6,7 @@ import reducerFromMap from "@racletteCore/lib/reducerFromMap"
 const reducerMap = {
   init: reducers.init,
   projectInit: reducers.projectInit,
-  "data/push": reducers.dataPush,
+  "data/push": reducers.dataRead,
   "data/create": reducers.dataCreate,
   "data/update": reducers.dataUpdate,
   "data/deleteFromCache": reducers.deleteFromCache,

package/services/frontend/src/core/store/reducers/data/reducers.ts

@@ -134,7 +134,7 @@ const updateDataCache = (oldCache, newItems) => {
         oldItem,
       )
     }
-    // we will always delete the offline flag as this function will only be called by the dataPush which retrieves synced backend items
+    // we will always delete the offline flag as this function will only be called by the dataRead which retrieves synced backend items
     if (newCache[item._id]) {
       delete newCache[item._id]._offline
     }
@@ -189,7 +189,7 @@ const dataAddFromServer = (state, action) => {
  *   @param {Array} action.payload - An array of items to be added to the state. Each item is an object that must contain an `_id` property.
  * @returns {Object} - Returns the new state after pushing the data from the action payload.
  */
-const dataPush = (state, action) => {
+const dataRead = (state, action) => {
   const { payload } = action
 
   // early return if no data
@@ -540,7 +540,7 @@ const addRequestedFor = (state, action) => {
 export {
   init,
   projectInit,
-  dataPush,
+  dataRead,
   dataUpdate,
   dataMove,
   dataCreate,

package/services/frontend/src/core/store/reducers/queries/effects.ts

@@ -34,7 +34,26 @@ const queriesEffects = (store) => {
     }),
     ignoreElements(),
   )
-  return [queriesAddExecute, queriesExecute]
+  const queryiesSetCacheKey = actions$.pipe(
+    ofType("queries/setCacheKey"),
+    distinctUntilChanged((prev, curr) => !store.hasChanges(prev, curr)),
+
+    tap((action) => {
+      const updatedQuery = action?.actionResult?.updated || null
+      if (updatedQuery) {
+        const { item, itemBefore } = updatedQuery
+        const { actionId } = action
+        if (itemBefore.cacheKey && itemBefore.cacheKey !== item.cacheKey) {
+          store.dispatch({
+            type: "queriesCache/remove",
+            payload: { cacheKey: itemBefore.cacheKey, actionId },
+          })
+        }
+      }
+    }),
+    ignoreElements(),
+  )
+  return [queriesAddExecute, queriesExecute, queryiesSetCacheKey]
 }
 
 export default queriesEffects

package/services/frontend/src/core/store/reducers/queries/index.ts

@@ -15,6 +15,7 @@ const reducerMap = {
   "queries/updateItems": reducers.updateQueryItems,
   "queries/update": reducers.updateQuery,
   "queries/update/loading": reducers.queriesUpdateLoading,
+  "queries/setCacheKey": reducers.queryiesSetCacheKey,
 }
 
 const queriesReducers = reducerFromMap(reducerMap)

package/services/frontend/src/core/store/reducers/queries/reducers.ts

@@ -10,6 +10,8 @@ export type Query = {
   target: string
   actionId: string
   params: Record<string, any>
+  options: Record<string, any>
+  config: Record<string, any>
   loading?: boolean
   backend?: Record<string, any>
   uuids?: Array<string>
@@ -56,6 +58,12 @@ const updateQuery = (state, action) => {
   if (payload.target) {
     query.target = payload.target
   }
+  if (payload.options) {
+    query.options = payload.options
+  }
+  if (payload.config) {
+    query.config = payload.config
+  }
   if (payload.pageItems) {
     const uuids = []
     const results = payload.pageItems || null
@@ -83,7 +91,9 @@ const updateQuery = (state, action) => {
       query.params = mergeDeepRight(query.params || {}, payload.params)
     }
   }
-
+  if (payload.cacheKey) {
+    query.cacheKey = payload.cacheKey
+  }
   if (payload.backend) {
     if (payload.reset) {
       query.backend = payload.backend
@@ -98,7 +108,19 @@ const updateQuery = (state, action) => {
 
   return queries
 }
+const queryiesSetCacheKey = (state, action) => {
+  let queries = structuredClone(state)
+  const payload = action.payload
+  const { actionId, cacheKey } = payload
+  if (!actionId || !state[actionId]) {
+    return state
+  }
 
+  queries[actionId] = { ...queries[actionId], cacheKey }
+  action.actionResult.updated.itemBefore = state[actionId]
+  action.actionResult.updated.item = queries[actionId]
+  return queries
+}
 const queriesUpdateLoading = (state, action) => {
   const payload = action.payload
   const actionId = payload.actionId
@@ -175,11 +197,15 @@ const queriesAdd = (state, action) => {
   const params: CustomStoreActionParams = payload.params || {}
   const actionId = payload.actionId
   const target = payload.target
+  const config = payload.config || {}
+  const options = payload.options || {}
 
   const query: Query = {
     target,
     params,
     actionId,
+    options,
+    config,
   }
 
   action.actionResult.added.push(query)
@@ -216,6 +242,7 @@ const queriesRemove = (state, action) => {
 }
 
 export {
+  queryiesSetCacheKey,
   queriesExecute,
   queriesAdd,
   queriesRemove,

package/services/frontend/src/core/store/reducers/queriesCache/queryCacheHelper.ts

@@ -2,7 +2,7 @@ import createStableHash from "@racletteCore/lib/createStableHash"
 import { $store } from "@racletteCore"
 import log from "@racletteCore/lib/logger"
 
-const isParentResultFresh = (cacheKey: string): boolean => {
+const isParentResultFresh = (cacheKey: string, ttl: number = 1000): boolean => {
   const queriesState = $store.getState("queriesCache")
   const currentTimeStamp = new Date().getTime()
   const parentQuery = queriesState[cacheKey]
@@ -15,16 +15,17 @@ const isParentResultFresh = (cacheKey: string): boolean => {
   ) {
     log.store(
       "queryCacheHelper",
-      `the cache with hash ${cacheKey} has not been executed yet or is still fetching`,
+      `cache #${cacheKey} has not been executed yet or is still fetching`,
+      parentQuery,
     )
     return false
   }
 
-  const isParentResultFresh = parentQuery.lastFetched + 1000 >= currentTimeStamp
+  const isParentResultFresh = parentQuery.lastFetched + ttl >= currentTimeStamp
 
   log.store(
     "queryCacheHelper",
-    `the cache with hash ${cacheKey} is ${isParentResultFresh ? "fresh" : "outdated"}`,
+    `cache #${cacheKey} is ${isParentResultFresh ? "fresh" : "stale"} for ttl of ${ttl}ms`,
   )
 
   return isParentResultFresh

package/services/frontend/src/core/store/reducers/queriesCache/reducers.ts

@@ -22,7 +22,7 @@ const getAffectedCacheQuery = (state, actionId) => {
   })
   return state[removedQueryCacheKey]
 }
-const getChildQueries = (cacheKey: string): Array => {
+const getChildQueries = (cacheKey: string): Array<Record<string, object>> => {
   const queries = $store.getState("queries")
   const childQueries = []
   Object.values(queries).forEach((query) => {
@@ -107,6 +107,7 @@ const cacheRemove = (state, action) => {
 
   return newState
 }
+
 const cacheChildRemove = (state, action) => {
   const newState = structuredClone(state)
   const { actionId } = action.payload
@@ -118,7 +119,7 @@ const cacheChildRemove = (state, action) => {
   }
   const childQueries = getChildQueries(affectedCacheQuery.cacheKey)
   if (childQueries.length === 1) {
-    // if the action which is currently deleted is the last one needing this cache, we will give it a 3sek grace period before we remove the cache
+    // if the action which is currently deleted is the last one needing this cache, we will give it a 2sek grace period before we remove the cache
     newState[affectedCacheQuery.cacheKey].deleted = true
     if (deleteTimeouts[affectedCacheQuery.cacheKey]) {
       clearTimeout(deleteTimeouts[affectedCacheQuery.cacheKey])
@@ -129,7 +130,7 @@ const cacheChildRemove = (state, action) => {
         type: "queriesCache/remove",
         payload: { cacheKey: affectedCacheQuery.cacheKey, actionId },
       })
-    }, 1000)
+    }, 2000)
   }
   delete cacheMap[actionId]
   return newState

package/services/frontend/src/core/store/state.ts

@@ -155,7 +155,7 @@ const storePatterns = {
     // a deeper abstractation level for widgets which are used as tools.
     // ie. type:''add' create a folder called 'add' and create a default.vue
     // or FACE.vue containing your add logic for a given widget
-    type: false,
+    workingState: {},
     version: "0.0.0",
   },
   tools: {

package/services/frontend/src/core/types/ApiClient.ts

@@ -11,7 +11,7 @@ export const cudOperationTypesList = [
 ] as const
 
 export const readOperationTypesList = [
-  "dataPush",
+  "dataRead",
   "dataAdd",
   "dataSync",
 ] as const

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

@@ -7,12 +7,14 @@ export type CustomStoreActionOptions = {
   notify?: boolean // default true, disables notification/snackbar
   responseType?: string // i.e stream
   mode?: string //i.e cors for streaming
+  useCache?: boolean
 }
 
 export type CustomStoreActionsPayload = {
   id?: String // if set this will used as the final namespace giver for the actionId, if not it will be a nanoId
   params?: CustomStoreActionParams
   options?: CustomStoreActionOptions
+  config?: any
 }
 export type QueryApiQuery = QueryState & {
   execute: (params?: Record<string, any>) => Promise<any>
@@ -23,6 +25,8 @@ export type DataApiMethods = {
   response: Object
   isLoading: Boolean
   execute: Function
+  clear: Function
+  remove: Function
 }
 export type QueryMethods = DataApiMethods & {
   uuids: Array<string>

package/services/frontend/src/core/types/Queries.ts

@@ -1 +1,2 @@
 export type actionId = string
+export type pluginKey = string

package/services/frontend/src/orchestrator/ProductOrchestrator.vue

@@ -77,6 +77,8 @@
           class="tw:overflow-y-auto! tw:pb-0"
           :class="{ '!tw:invisible': loading }"
           :widgets-layout="widgetsLayout"
+          slot-type="page"
+          :slot-layout="slotLayout"
           @scroll.passive="onScroll($event)"
         />
 
@@ -133,11 +135,10 @@ import { useRoute } from "vue-router"
 import useUiState from "./composables/useUiState"
 import useRouteState from "./composables/useRouteState"
 import CompositionOverlay from "./components/composition/CompositionOverlay.vue"
-import { useTitle } from "@vueuse/core"
+import { useTitle, useLocalStorage } from "@vueuse/core"
 import loginUserNotifications from "./helpers/loginUserNotifications"
 import configService from "@racletteCore/lib/configService"
 import { isDevelopmentMode } from "@racletteCore/helpers/devMode"
-import { useLocalStorage } from "@vueuse/core"
 import useDragAndDrop from "./composables/useDragAndDrop"
 import { useCurrentComposition } from "./composables"
 import WidgetsLayoutLoader from "./components/composition/WidgetsLayoutLoader.vue"
@@ -151,7 +152,7 @@ const { loading, theme, locale, landingPage, availableInterfaces } =
   useUiState()
 useRouteState()
 const { isDraggingOrResizingAnything } = useDragAndDrop()
-const { widgetsLayout } = useCurrentComposition()
+const { widgetsLayout, slotLayout } = useCurrentComposition()
 
 const showWelcomeScreen = computed(() => {
   const isDynamicPage = route.name === "app.space.page"
@@ -208,20 +209,31 @@ const checkImageExists = async (url: string): Promise<boolean> => {
 const showScrollToTopBtn = ref(false)
 const isDevelopment = ref(false)
 
+const setTheme = (theme: "dark" | "light") => {
+  vuetifyTheme.change(theme)
+
+  // tailwind support
+  if (theme === "dark") {
+    document.body.classList.add("dark")
+  } else {
+    document.body.classList.remove("dark")
+  }
+}
+
 const onScroll = (e) =>
   (showScrollToTopBtn.value = e.currentTarget.scrollTop > 0)
 
 onMounted(async () => {
-  vuetifyTheme.change(theme.value)
+  setTheme(theme.value)
   vuetifyLocale.current.value = locale.value
-  isDevelopment.value = isDevelopmentMode()
+  isDevelopment.value = true || isDevelopmentMode()
   logoExists.value = await checkImageExists(logoSrc.value)
   // check if we have a message from checkToken to display as a snackbar
   loginUserNotifications()
 })
 
 watch(theme, () => {
-  vuetifyTheme.change(theme.value)
+  setTheme(theme.value)
 })
 
 // set vuetify locale here, the rest is done in setup/i18n
@@ -233,7 +245,7 @@ window
   .addEventListener("change", (event) => {
     const newColorScheme = event.matches ? "dark" : "light"
     if (userTheme.value === null) {
-      vuetifyTheme.change(newColorScheme)
+      setTheme(theme.value)
     }
   })
 </script>

package/services/frontend/src/orchestrator/WelcomeScreen.vue

@@ -1,40 +1,29 @@
 <template>
   <div class="welcome-screen">
-    <v-container>
-      <component :is="currentComponent" />
-      <v-row>
-        <v-col cols="12">
-          <h2 class="tw:text-2xl tw:font-semibold tw:mb-4">
-            {{ $t("core.welcomeScreen.builtInFeaturesTitle") }}
-          </h2>
-          <v-expansion-panels flat variant="accordion">
-            <v-expansion-panel v-for="feature in features" :key="feature.key">
-              <v-expansion-panel-title>
-                <v-icon :icon="feature.icon" class="tw:mr-3"></v-icon>
-                {{ $t(`core.welcomeScreen.${feature.key}Title`) }}
-              </v-expansion-panel-title>
-              <v-expansion-panel-text>
-                <div class="tw:py-2">
-                  {{ $t(`core.welcomeScreen.${feature.key}Description`) }}
-                </div>
-                <template v-if="feature.status">
-                  <a
-                    v-if="feature.status.link"
-                    target="_blank"
-                    :href="feature.status.link"
-                  >
-                    <v-chip
-                      v-if="feature.status"
-                      :color="feature.status.color"
-                      size="small"
-                      class="tw:mt-2"
-                    >
-                      <v-icon start :icon="feature.status.icon"></v-icon>
-                      {{ $t(`core.welcomeScreen.${feature.status.key}`) }}
-                    </v-chip>
-                  </a>
+    <component :is="currentComponent" />
+    <v-row>
+      <v-col cols="12">
+        <h2 class="tw:text-2xl tw:font-semibold tw:mb-4">
+          {{ $t("core.welcomeScreen.builtInFeaturesTitle") }}
+        </h2>
+        <v-expansion-panels flat variant="accordion">
+          <v-expansion-panel v-for="feature in features" :key="feature.key">
+            <v-expansion-panel-title>
+              <v-icon :icon="feature.icon" class="tw:mr-3"></v-icon>
+              {{ $t(`core.welcomeScreen.${feature.key}Title`) }}
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <div class="tw:py-2">
+                {{ $t(`core.welcomeScreen.${feature.key}Description`) }}
+              </div>
+              <template v-if="feature.status">
+                <a
+                  v-if="feature.status.link"
+                  target="_blank"
+                  :href="feature.status.link"
+                >
                   <v-chip
-                    v-else
+                    v-if="feature.status"
                     :color="feature.status.color"
                     size="small"
                     class="tw:mt-2"
@@ -42,13 +31,22 @@
                     <v-icon start :icon="feature.status.icon"></v-icon>
                     {{ $t(`core.welcomeScreen.${feature.status.key}`) }}
                   </v-chip>
-                </template>
-              </v-expansion-panel-text>
-            </v-expansion-panel>
-          </v-expansion-panels>
-        </v-col>
-      </v-row>
-    </v-container>
+                </a>
+                <v-chip
+                  v-else
+                  :color="feature.status.color"
+                  size="small"
+                  class="tw:mt-2"
+                >
+                  <v-icon start :icon="feature.status.icon"></v-icon>
+                  {{ $t(`core.welcomeScreen.${feature.status.key}`) }}
+                </v-chip>
+              </template>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-col>
+    </v-row>
   </div>
 </template>
 

package/services/frontend/src/orchestrator/assets/styles/tailwindStyles.css

@@ -11,6 +11,9 @@
 /* @import "tailwindcss/preflight.css" layer(base) prefix(tw); */
 /* @import "tailwindcss/utilities.css" layer(utilities) prefix(tw);  */
 
+/* enable dark mode via class */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* safelist for the resizing in the composition editor */
 @source inline('tw:col-span-{1..12}');
 @source inline('tw:grid-cols-{1..12}');

package/services/frontend/src/orchestrator/assets/styles/themes/dark.ts

@@ -4,7 +4,7 @@
 export default {
   background: "#212121",
   surface: "#212121",
-  primary: "#148dbc",
+  primary: "#0b6487",
   "primary-darken-1": "#1279a2",
   "primary-darken-2": "#106689",
   "primary-darken-3": "#0e5470",
@@ -19,7 +19,7 @@ export default {
   "primary-lighten-5": "#9dd8f2",
   "primary-lighten-6": "#c4e7f7",
   "primary-lighten-7": "#ebf5fc",
-  secondary: "#03DAC6",
+  secondary: "#017f73",
   "secondary-darken-1": "#02b7a6",
   "secondary-darken-2": "#029487",
   error: "#FF5252",

package/services/frontend/src/orchestrator/assets/styles/vuetifyStyles.scss

@@ -13,7 +13,6 @@ button,
 [type="submit"],
 [role="button"] {
   cursor: pointer;
-  color: inherit;
 }
 
 /* Specify the pointer cursor of trigger elements */

package/services/frontend/src/orchestrator/components/composition/CompositionOverlay.vue

@@ -1,6 +1,13 @@
 <template>
   <DefaultModal v-model="showModal">
-    <WidgetsLayoutLoader v-if="widgetsLayout" :widgets-layout="widgetsLayout" />
+    <div class="tw:p-5 tw:h-full">
+      <WidgetsLayoutLoader
+        v-if="widgetsLayout"
+        :widgets-layout="widgetsLayout"
+        :slot-layout="slotLayout"
+        slot-type="modal"
+      />
+    </div>
   </DefaultModal>
 </template>
 
@@ -11,7 +18,9 @@ import { computed } from "vue"
 import useRouteState from "@racletteOrchestrator/composables/useRouteState"
 import { DEFAULT_MODAL_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
 
-const { widgetsLayout } = useCurrentComposition(DEFAULT_MODAL_SLOT_NAME)
+const { widgetsLayout, slotLayout } = useCurrentComposition(
+  DEFAULT_MODAL_SLOT_NAME,
+)
 const { removeSlot } = useRouteState()
 
 const showModal = computed({