@raclettejs/core 0.0.1

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

@@ -0,0 +1,62 @@
+import App from "./App.vue"
+import { createApp, type App as VueApp } from "vue"
+import initI18n from "./setup/i18n"
+import initVuetify from "./setup/vuetify"
+import router from "./router"
+import "./assets/styles/main.scss"
+import "./assets/styles/tailwindStyles.css"
+import "./assets/styles/vuetifyStyles.scss"
+import { orchestratorPlugins } from "@racletteCore/setup/plugin-system"
+import DefaultLoginApp from "./LoginApp.vue"
+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
+  if (loginVueApp) {
+    loginVueApp.unmount()
+    loginVueApp = undefined
+  }
+  const vueApp = createApp(App)
+  const { i18nInstance, instanceAdapter, dateLocale } = await initI18n()
+  await initPluginRegistration()
+  const vuetify = initVuetify(instanceAdapter, dateLocale)
+  vueApp.use(i18nInstance)
+  vueApp.use(vuetify)
+  vueApp.use(router)
+
+  if (orchestratorPlugins.length) {
+    log.orchestrator("raclette-vue will use vue plugin", orchestratorPlugins)
+    orchestratorPlugins.forEach((plugin) =>
+      vueApp.use(plugin.dependency, plugin.options),
+    )
+  }
+
+  vueApp.mount(el)
+  return vueApp
+}
+
+export const createLoginVueApp = async (
+  el: string,
+  loginMethod: Function,
+  noUsers: boolean,
+): Promise<VueApp> => {
+  const vueApp = createApp(DefaultLoginApp, { loginMethod, noUsers })
+
+  const { i18nInstance, instanceAdapter, dateLocale } = await initI18n()
+  vueApp.use(i18nInstance)
+
+  const vuetify = initVuetify(instanceAdapter, dateLocale)
+  vueApp.use(vuetify)
+
+  vueApp.mount(el)
+
+  loginVueApp = vueApp
+  return vueApp
+}
+
+export default {
+  createVueApp,
+  createLoginVueApp,
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Create router
+ */
+import { createRouter, createWebHistory } from "vue-router"
+import { afterEach, beforeEach } from "./routerHooks"
+import routes from "./routes"
+
+// create router instance
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+/* Rooter hooks */
+router.beforeEach(beforeEach)
+router.afterEach(afterEach)
+
+export default router

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

@@ -0,0 +1,119 @@
+export interface ComposedRouteState {
+  map: Array<(string | Record<string, string>[])[]> // [ composition, propertyObjects, ...slots]
+  anchor: string | null
+}
+
+// Parses a URL into a structured state object
+export const compose = (url: string): ComposedRouteState => {
+  const [resourcePart, hashStateCommands, anchor] = url.split("#", 3)
+  const tmpURL = new URL(
+    compose.useHash ? resourcePart : url,
+    "http://localhost",
+  )
+  const pathStateCommands = tmpURL.pathname
+  const realAnchor = compose.useHash ? anchor : tmpURL.hash.slice(1)
+
+  const state: ComposedRouteState = {
+    map: [],
+    anchor: realAnchor || null,
+  }
+  const propertyCache = {} as Record<string, Record<string, string>[]>
+
+  const process = (s: string) => {
+    const cmds = s.split("/").filter((e) => e)
+    let currentComposition = ""
+
+    for (const cmd of cmds) {
+      // get the syntactic meaningful characters
+      const eq_i = cmd.indexOf("=")
+      const target = cmd.substr(0, eq_i <= 0 ? cmd.length : eq_i)
+      const cmp_i = target.lastIndexOf(":")
+      const prp_i = target.lastIndexOf(".")
+      const propName = target.substr(Math.max(cmp_i, prp_i) + 1)
+      const propValue = decodeURIComponent(
+        cmd.substr(eq_i >= 0 ? eq_i + 1 : cmd.length),
+      )
+      const obj =
+        eq_i > 0 && target === propName
+          ? currentComposition
+          : target.substr(0, prp_i >= 0 ? prp_i : target.length)
+
+      if (eq_i > 0 && cmp_i < eq_i && cmp_i >= 0 && prp_i < 0) {
+        continue
+      }
+
+      if (eq_i < 0 && obj) {
+        // if you don't assign a property value, you are setting a composition and remember it
+        propertyCache[obj] = (propertyCache[obj] || []).concat({}) // always add a new property Object when a new composition is set
+        currentComposition = obj
+        continue
+      }
+
+      if (eq_i > 0) {
+        // you alway add properties to the last property Object in the composition, if it already exist in the cache
+        // the composition can decide for itself whether to merge all property objects, or whether to use them for different gui elements
+        const compositionProps = propertyCache[obj || currentComposition] || [
+          {},
+        ]
+
+        compositionProps.at(-1)[propName] = propValue
+        propertyCache[obj || currentComposition] = compositionProps
+      }
+    }
+  }
+
+  if (compose.usePath && pathStateCommands) {
+    process(pathStateCommands)
+  }
+  if (compose.useHash && hashStateCommands) {
+    process(hashStateCommands)
+  }
+
+  for (const [key, propObjects] of Object.entries(propertyCache)) {
+    const slots_composition = key.split(":")
+    const composition = slots_composition.at(-1)
+    const slots = slots_composition.slice(0, -1)
+
+    if (!composition && slots.length) {
+      continue
+    }
+    const filtered = propObjects.filter((o) => Object.keys(o).length)
+
+    if (compose.filterNopStates && !filtered.length && !slots.length) {
+      continue
+    }
+    const map = [
+      composition, // composition or widget name
+      filtered.length == 0 ? filtered : propObjects, // property objects, if no properties are set anywhere, empty the list
+      ...slots, // slot realized path
+    ]
+
+    state.map.push(map)
+  }
+
+  return state
+}
+compose.usePath = true
+compose.useHash = false
+compose.filterNopStates = true
+
+export const urlCompose = (state: ComposedRouteState): string => {
+  const cmds = []
+
+  for (const [composition, properties, ...slots] of state.map) {
+    const path = [...slots, composition].join(":")
+
+    if (slots.length && !properties.length) {
+      cmds.push(path)
+    } else {
+      for (const propObject of properties) {
+        cmds.push(path)
+        for (const [prop, value] of Object.entries(propObject)) {
+          cmds.push(prop + "=" + encodeURIComponent(value))
+        }
+      }
+    }
+  }
+
+  return cmds.join("/") + (state.anchor ? "#" + state.anchor : "")
+}

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

@@ -0,0 +1,74 @@
+import { compose, type ComposedRouteState } from "./routeParser"
+import { $store } from "@racletteCore"
+
+export interface CompositionSlot {
+  slotName: string
+  slotValue: string
+  slotParams?: Record<string, string>
+}
+
+// TODO: transform this to an array
+export const DEFAULT_SLOT_NAME = "page"
+export const DEFAULT_MODAL_SLOT_NAME = "modal"
+
+export const parseRouteToCompositionSlots = (
+  route: string,
+  defaultSlotName = DEFAULT_SLOT_NAME,
+  addDefaultSlotIfMissing = false,
+) => {
+  const composed = compose(route)
+
+  return parseComposedToCompositionSlots(
+    composed,
+    defaultSlotName,
+    addDefaultSlotIfMissing,
+  )
+}
+
+export const parseComposedToCompositionSlots = (
+  composed: ComposedRouteState,
+  defaultSlotName = DEFAULT_SLOT_NAME,
+  addDefaultSlotIfMissing = false,
+): CompositionSlot[] => {
+  const composition = composed.map.map(
+    ([slotValue, paramsArray, ...slots]) => ({
+      slotName: (slots[0] as string) || defaultSlotName,
+      slotValue: slotValue as string,
+      slotParams: (paramsArray as Record<string, string>[])[0] || {},
+    }),
+  )
+
+  // add landing page into the compositionSlots, if there is no defaultSlot set
+  const landingPage = $store.getState(["ui", "landingPage"])
+
+  if (
+    !composition.some((slot) => slot.slotName === DEFAULT_SLOT_NAME) &&
+    addDefaultSlotIfMissing &&
+    landingPage
+  ) {
+    composition.push({
+      slotName: DEFAULT_SLOT_NAME,
+      slotValue: landingPage,
+      slotParams: {},
+    })
+  }
+
+  return composition
+}
+
+// TODO: care about the name
+export const transformToOriginalState = (
+  compositionSlots: CompositionSlot[],
+  defaultSlotName = DEFAULT_SLOT_NAME,
+): ComposedRouteState => {
+  const map = compositionSlots.map(({ slotName, slotValue, slotParams }) => {
+    const resolvedSlotName = slotName === defaultSlotName ? "" : slotName
+
+    const paramsArray = slotParams ? [slotParams] : []
+
+    return [slotValue, paramsArray, resolvedSlotName]
+  })
+
+  // TODO: care about anchor
+  return { map, anchor: null }
+}

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

@@ -0,0 +1,118 @@
+import { $store } from "@racletteCore"
+import type { RouteLocationNormalized } from "vue-router"
+import {
+  DEFAULT_SLOT_NAME,
+  parseRouteToCompositionSlots,
+} from "@racletteOrchestrator/router/routeParserHelper"
+import { difference } from "ramda"
+import { getCompositionIdByPath } from "@racletteCore/store/reducers/compositions/selectors"
+
+// TODO: find better filename
+
+export const dispatchSetCompositionAs = (
+  slot: string,
+  compositionPath?: string,
+  compositionParams?: Record<string, string>,
+) => {
+  if (compositionPath) {
+    const compositionId = getCompositionIdByPath(compositionPath)
+
+    if (compositionId) {
+      $store.dispatch({
+        type: "ui/setCompositionAs",
+        payload: {
+          slot,
+          compositionId,
+        },
+      })
+
+      if (compositionParams && Object.keys(compositionParams).length) {
+        $store.dispatch({
+          type: "compositions/update",
+          payload: {
+            compositionId,
+            compositionParams,
+          },
+        })
+      }
+    }
+  } else {
+    $store.dispatch({
+      type: "ui/unsetComposition",
+      payload: {
+        slot,
+      },
+    })
+  }
+}
+
+export const updateActiveCompositions = (
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
+) => {
+  const isInitialRouting = from.name === undefined
+  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,
+    !hasToPageIdParameter,
+  )
+
+  const beforeCompositionSlots = parseRouteToCompositionSlots(
+    from.fullPath,
+    undefined,
+    !isInitialRouting && !hasFromPageIdParameter,
+  )
+
+  const compositionSlotsToRemove = difference(
+    beforeCompositionSlots,
+    compositionSlots,
+  )
+  const compositionSlotsToAdd = difference(
+    compositionSlots,
+    beforeCompositionSlots,
+  )
+
+  compositionSlotsToRemove.forEach((slot) =>
+    dispatchSetCompositionAs(slot.slotName),
+  )
+  compositionSlotsToAdd.forEach((slot) =>
+    dispatchSetCompositionAs(slot.slotName, slot.slotValue, slot.slotParams),
+  )
+}
+
+export const handleRouteChange = (
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
+) => {
+  if (to.name === "app.space.page") {
+    updateActiveCompositions(to, from)
+  } else {
+    dispatchSetCompositionAs(DEFAULT_SLOT_NAME)
+  }
+}
+
+// check, if the user is navigating inside of the dynamic page ("app.space.page") and if the default slot has a change
+export const checkForDefaultSlotChange = (
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
+) => {
+  if (to.name === "app.space.page" && from.name === "app.space.page") {
+    const defaultSlotValueTo = getDefaultSlotValue(to.fullPath)
+    const defaultSlotValueFrom = getDefaultSlotValue(from.fullPath)
+
+    if (defaultSlotValueTo === defaultSlotValueFrom) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export const getDefaultSlotValue = (url: string) =>
+  parseRouteToCompositionSlots(url, undefined, true).find(
+    (slot) => slot.slotName === DEFAULT_SLOT_NAME,
+  )?.slotValue

package/services/frontend/src/orchestrator/router/routerHooks/afterEach.ts

@@ -0,0 +1,26 @@
+import { loadingHold } from "@racletteCore/store/state"
+import { $store } from "@racletteCore"
+import type { RouteLocationNormalized } from "vue-router"
+import { handleRouteChange } from "../routeStore"
+
+/**
+ * afterEachHook
+ * @param { object } store, mini-rx store instance
+ *
+ * removeLoading Animation
+ */
+export default (to: RouteLocationNormalized, from: RouteLocationNormalized) => {
+  const loading = $store.getState(["ui", "loading"])
+  if (loading) {
+    setTimeout(
+      () =>
+        $store.dispatch({
+          type: "ui/update",
+          payload: { loading: false },
+        }),
+      loadingHold,
+    )
+  }
+
+  handleRouteChange(to, from)
+}

package/services/frontend/src/orchestrator/router/routerHooks/beforeEach.ts

@@ -0,0 +1,28 @@
+import { $store } from "@racletteCore"
+import type { RouteLocationNormalized } from "vue-router"
+import { checkForDefaultSlotChange } from "../routeStore"
+
+export default async (
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
+) => {
+  const { redirect, redirectQuery } = to.query
+
+  // check the url for redirect parameter and navigate to it, if set
+  if (redirect) {
+    return {
+      path: redirect,
+      query: redirectQuery ? JSON.parse(redirectQuery as string) : undefined,
+    }
+  }
+
+  // show loading animation only, if the default slot's value changes
+  if (checkForDefaultSlotChange(to, from)) {
+    $store.dispatch({
+      type: "ui/update",
+      payload: { loading: true },
+    })
+  }
+
+  return true
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Gather global router hooks and helper function.
+ * The functions in this file are most likely applied in the main.js
+ */
+
+export { default as afterEach } from "./afterEach"
+export { default as beforeEach } from "./beforeEach"

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

@@ -0,0 +1,26 @@
+import ProductOrchestrator from "../ProductOrchestrator.vue"
+import useAuthentication from "@racletteOrchestrator/composables/useAuthentication"
+
+const routes = [
+  {
+    path: "/:pageId(.*)",
+    name: "app.space.page",
+    props: true,
+    component: ProductOrchestrator,
+  },
+  {
+    path: "/logout",
+    name: "public.logout",
+    beforeEnter: () => {
+      const { clearCookies } = useAuthentication()
+
+      clearCookies()
+
+      if (window.location.href !== window.location.origin + "/login") {
+        window.location.href = window.location.origin + "/login"
+      }
+    },
+  },
+]
+
+export default routes