@raclettejs/core 0.0.1

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

@@ -0,0 +1,236 @@
+/**
+ * Replace most of this, once we generate the relevant plugin-data for the workbench
+ */
+
+import { forEachObjIndexed } from "ramda"
+import type { ConfigurableParameters, WidgetConf } from "@racletteOrchestrator"
+import { generatePluginKey } from "@shared/helper/pluginHelper"
+import type { PluginMetadata, RegisteredWidgetDeclaration } from "@core"
+
+// Plugin metadata files (unchanged)
+const RACLETTE_PLUGIN_FILES = import.meta.glob<{
+  default: PluginMetadata
+}>(["@racletteCore/../../external-app-plugins/**/raclette.plugin.ts"], {
+  eager: true,
+})
+
+// Discover widget Vue files to get widget names
+const WIDGET_COMPONENT_FILES = import.meta.glob(
+  [
+    "@racletteCore/../../external-app-plugins/**/frontend/widgets/**/*Widget.vue",
+  ],
+  { eager: false },
+)
+
+// Discover widget setup files for metadata
+const WIDGET_SETUP_FILES = import.meta.glob<{
+  details: any
+  config: any
+  default: { details: any; config: any }
+}>(
+  ["@racletteCore/../../external-app-plugins/**/frontend/widgets/**/setup.ts"],
+  {
+    eager: true,
+  },
+)
+
+/**
+ * Extract widget name from Vue component file path
+ * /path/to/widgets/ServerListWidget.vue -> ServerList
+ * /path/to/widgets/MyCustomWidget.vue -> MyCustom
+ */
+const extractWidgetNameFromVueFile = (componentPath: string): string | null => {
+  // Match the file name and remove "Widget.vue"
+  const match = componentPath.match(/\/([^/]+)Widget\.vue$/)
+  return match ? match[1] : null
+}
+
+/**
+ * Get widget declarations by discovering Vue files and their corresponding setup files
+ */
+export const getWidgetDeclacations = () => {
+  const widgets: RegisteredWidgetDeclaration[] = []
+
+  // Process each plugin
+  forEachObjIndexed(({ default: pluginMetadata }, pluginPath) => {
+    const pluginKey = generatePluginKey(
+      pluginMetadata.name,
+      pluginMetadata.author,
+    )
+
+    // Find all widget component files for this plugin
+    const pluginDir = pluginPath.replace("/raclette.plugin.ts", "")
+    const widgetPattern = `${pluginDir}/frontend/widgets/`
+
+    // Look through all discovered widget Vue files to find ones belonging to this plugin
+    Object.keys(WIDGET_COMPONENT_FILES).forEach((componentPath) => {
+      if (componentPath.includes(widgetPattern)) {
+        // Extract widget name from Vue file name
+        const widgetName = extractWidgetNameFromVueFile(componentPath)
+        if (!widgetName) {
+          console.warn(`Could not extract widget name from: ${componentPath}`)
+          return
+        }
+
+        // Find corresponding setup file
+        // /path/to/widgets/SomeDir/ServerListWidget.vue -> /path/to/widgets/SomeDir/setup.ts
+        const setupPath = componentPath.replace(
+          /\/[^/]+Widget\.vue$/,
+          "/setup.ts",
+        )
+        const setupModule = WIDGET_SETUP_FILES[setupPath]
+
+        if (!setupModule) {
+          console.warn(
+            `No setup.ts found for widget: ${pluginKey}/${widgetName} at ${setupPath}`,
+          )
+          return
+        }
+
+        // Extract details and config (handle both default export and named exports)
+        const details = setupModule.details || setupModule.default?.details
+        const config = setupModule.config || setupModule.default?.config
+
+        if (!details) {
+          console.warn(
+            `No widget details found in setup for: ${pluginKey}/${widgetName}`,
+          )
+          return
+        }
+
+        const registeredWidget: RegisteredWidgetDeclaration = {
+          ...details,
+          pluginKey,
+          author: pluginMetadata.author,
+          name: widgetName,
+        }
+
+        if (config && Object.keys(config).length > 0) {
+          registeredWidget.configurableParameters = getConfigurableParameters(
+            registeredWidget,
+            config,
+          )
+        }
+
+        widgets.push(registeredWidget)
+      }
+    })
+  }, RACLETTE_PLUGIN_FILES)
+
+  return widgets
+}
+
+/**
+ * Updated getWidgetConfig to work with setup files
+ */
+export const getWidgetConfig = (widgetName: string, pluginKey?: string) => {
+  if (!pluginKey) {
+    return {}
+  }
+
+  // Find the setup file for this widget
+  const setupPath = findSetupPathForWidget(widgetName, pluginKey)
+  if (!setupPath) {
+    return {}
+  }
+
+  try {
+    const setupModule = WIDGET_SETUP_FILES[setupPath]
+    const config = setupModule?.config || setupModule?.default?.config
+    return config || {}
+  } catch (error) {
+    console.warn(
+      `Error loading widget config for ${pluginKey}/${widgetName}:`,
+      error,
+    )
+    return {}
+  }
+}
+
+/**
+ * Find setup.ts path for a specific widget and plugin
+ */
+const findSetupPathForWidget = (
+  widgetName: string,
+  pluginKey: string,
+): string | null => {
+  // Find the plugin metadata to get the plugin path
+  const pluginEntry = Object.entries(RACLETTE_PLUGIN_FILES).find(
+    ([, module]) => {
+      const metadata = module.default
+      return generatePluginKey(metadata.name, metadata.author) === pluginKey
+    },
+  )
+
+  if (!pluginEntry) {
+    return null
+  }
+
+  const [pluginPath] = pluginEntry
+  const pluginDir = pluginPath.replace("/raclette.plugin.ts", "")
+
+  // Look for a Vue file with this widget name to find the directory structure
+  const widgetPattern = `${pluginDir}/frontend/widgets/`
+  const widgetVueFile = Object.keys(WIDGET_COMPONENT_FILES).find(
+    (path) =>
+      path.includes(widgetPattern) && path.endsWith(`${widgetName}Widget.vue`),
+  )
+
+  if (!widgetVueFile) {
+    return null
+  }
+
+  // Convert Vue file path to setup path
+  const setupPath = widgetVueFile.replace(/\/[^/]+Widget\.vue$/, "/setup.ts")
+
+  // Check if this setup file exists
+  return Object.keys(WIDGET_SETUP_FILES).includes(setupPath) ? setupPath : null
+}
+
+export const getDefaultConfig = (widgetName: string, pluginKey: string) => {
+  const props = getWidgetConfig(widgetName, pluginKey)
+
+  if (props) {
+    return convertToDefaultConfig(props)
+  }
+}
+
+export const getConfigurableParameters = (
+  widgetDeclaration: RegisteredWidgetDeclaration,
+  widgetConf?: WidgetConf,
+) => {
+  const { name, pluginKey } = widgetDeclaration
+
+  const config = widgetConf || getWidgetConfig(name, pluginKey)
+
+  if (config) {
+    return convertToConfigurableParameters(config)
+  }
+}
+
+export const convertToDefaultConfig = (props: WidgetConf) => {
+  const defaultConfig: Record<string, any> = {}
+
+  forEachObjIndexed(({ default: defaultValue }, key) => {
+    defaultConfig[key] = normalizeDefaultValue(defaultValue)
+  }, props)
+
+  return defaultConfig
+}
+
+export const convertToConfigurableParameters = (config: WidgetConf) => {
+  const parameters: ConfigurableParameters = {}
+
+  forEachObjIndexed(({ default: defaultValue, editor }, key) => {
+    parameters[key] = {
+      ...editor,
+      defaultValue: normalizeDefaultValue(defaultValue),
+    }
+  }, config)
+
+  return parameters
+}
+
+export const normalizeDefaultValue = (
+  defaultValue: WidgetConf[keyof WidgetConf]["default"],
+) => (typeof defaultValue === "function" ? defaultValue() : defaultValue)

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

@@ -0,0 +1,18 @@
+import { computed } from "vue"
+
+import * as helperFunctions from "./helperFunctions"
+
+export default () => {
+  const widgets = computed(() => helperFunctions.getWidgetDeclacations())
+
+  const findWidgetByName = (widgetName?: string) =>
+    widgets.value.find((widget) => widget.name === widgetName)
+
+  return {
+    widgets,
+    findWidgetByName,
+    ...helperFunctions,
+  }
+}
+
+export type * from "./types"

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

@@ -0,0 +1,6 @@
+export * as dateFns from "@racletteOrchestrator/helpers/date-fns"
+export * from "@racletteOrchestrator/composables"
+export * from "@racletteOrchestrator/helpers"
+export * from "@racletteOrchestrator/setup/i18n"
+export type * from "./types"
+export * from "./components"

package/services/frontend/src/orchestrator/helpers/date-fns.ts

@@ -0,0 +1,113 @@
+import { de, enGB, sk } from "date-fns/locale"
+import { $store } from "@racletteCore"
+import {
+  format as formatFns,
+  isValid,
+  parseISO,
+  formatDistance as formatDistanceFns,
+  formatDistanceToNow as formatDistanceToNowFns,
+  intervalToDuration,
+  differenceInDays,
+  differenceInMinutes,
+} from "date-fns"
+const locales = {
+  de,
+  en: enGB,
+  enGB,
+  sk,
+}
+
+locales["de-DE"] = de
+locales["de-AT"] = de
+locales["en-UK"] = enGB
+locales["en-US"] = enGB
+const parseDate = (input) => {
+  if (typeof input === "string") {
+    let encodedInput = input
+
+    if (encodedInput.includes("/")) {
+      // fix encoding coming from mustache.js
+      encodedInput = encodedInput.replace(///g, "/")
+    }
+
+    // Handle JSON date representation
+    const match = /\/Date\((\d+)([-+]\d+)?\)\//.exec(encodedInput)
+
+    if (match) {
+      return new Date(parseInt(match[1], 10))
+    }
+
+    // Handle standard date string formats (e.g., ISO 8601)
+    const parsedDate = new Date(input)
+
+    if (!isNaN(parsedDate.getTime())) {
+      return parsedDate
+    }
+  } else if (input instanceof Date) {
+    return input
+  }
+
+  // If input is not a valid date, return null
+  return null
+}
+
+// TODO: expand the functions below with the date-validator & parser like in formatDistanceToNow, to support rendering tempalte syntaxt (see ExternalApiCard.vue)
+// TODO: replace the locale handling
+const format = (date, formatStr = "PP") =>
+  formatFns(date, formatStr, {
+    locale: locales[$store.getState(["ui", "locale"])], // or global.__localeId__
+  })
+
+const formatISO = (dateAsISOString, formatStr = "PP") =>
+  formatFns(parseISO(dateAsISOString), formatStr, {
+    locale: locales[$store.getState(["ui", "locale"])], // or global.__localeId__
+  })
+const formatDistance = (date: Date, baseDate: Date) =>
+  formatDistanceFns(date, baseDate, {
+    locale: locales[$store.getState(["ui", "locale"])], // or global.__localeId__
+  })
+
+const formatDistanceToNow = (dateInput: Date) => {
+  if (!dateInput) {
+    return ""
+  }
+  const date = parseDate(dateInput)
+
+  if (!date) {
+    throw new Error("Invalid date input")
+  }
+
+  return formatDistanceToNowFns(date, {
+    locale: locales[$store.getState(["ui", "locale"])], // or global.__localeId__
+  })
+}
+
+const isTimestamp = (input) => {
+  if (typeof input !== "string") {
+    return false
+  }
+
+  // Regular expression to match common timestamp formats
+  const timestampRegex =
+    /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})?$/
+
+  if (!timestampRegex.test(input)) {
+    return false
+  }
+
+  const parsedAsDate = new Date(input)
+
+  return isValid(parsedAsDate)
+}
+
+export {
+  format,
+  isValid,
+  formatISO,
+  isTimestamp,
+  formatDistance,
+  intervalToDuration,
+  differenceInDays,
+  differenceInMinutes,
+  formatDistanceToNow,
+}

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

@@ -0,0 +1,87 @@
+import { defineComponent, onErrorCaptured, ref, h, type Component } from "vue"
+import type { WidgetBase } from "@racletteCore/store/types"
+import logger from "@racletteCore/lib/logger"
+
+/**
+ * Creates an error boundary wrapper for a widget component
+ */
+export const createErrorBoundary = (
+  originalComponent: Component,
+  widget: Partial<WidgetBase>,
+  errorComponent: Component,
+) =>
+  defineComponent({
+    name: `${widget.name}WithErrorBoundary`,
+    props: originalComponent.props || {},
+    emits: originalComponent.emits || [],
+    setup(props, context) {
+      const hasError = ref(false)
+      const runtimeError = ref<Error | null>(null)
+      const errorCaptured = ref(false)
+
+      onErrorCaptured((err: Error, instance, info) => {
+        if (errorCaptured.value) {
+          return false
+        }
+
+        logger.widgets("Runtime error captured", {
+          pluginKey: widget.pluginKey,
+          name: widget.name,
+          uuid: widget.uuid,
+          error: err.message,
+          info,
+        })
+
+        errorCaptured.value = true
+        hasError.value = true
+        runtimeError.value = err
+
+        context.emit?.("error-captured", {
+          pluginKey: widget.pluginKey,
+          widgetName: widget.name,
+          error: err,
+        })
+
+        return false
+      })
+
+      return () => {
+        if (hasError.value) {
+          return h(errorComponent, {
+            uuid: widget.uuid,
+            pluginKey: widget.pluginKey,
+            widgetName: widget.name,
+            error: runtimeError.value,
+          })
+        }
+
+        try {
+          return h(originalComponent, { ...props }, context.slots)
+        } catch (renderError) {
+          if (!errorCaptured.value) {
+            const error =
+              renderError instanceof Error
+                ? renderError
+                : new Error(String(renderError))
+
+            logger.widgets("Render error", {
+              pluginKey: widget.pluginKey,
+              name: widget.name,
+              error: error.message,
+            })
+
+            errorCaptured.value = true
+            hasError.value = true
+            runtimeError.value = error
+          }
+
+          return h(errorComponent, {
+            uuid: widget.uuid,
+            pluginKey: widget.pluginKey,
+            widgetName: widget.name,
+            error: runtimeError.value,
+          })
+        }
+      }
+    },
+  })

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

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

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

@@ -0,0 +1,19 @@
+import { $store, $eventbus } from "@racletteCore/main"
+
+export default () => {
+  const notifications = $store.getState(["notifications", "items"])
+  if (Object.keys(notifications).length) {
+    const checkTokenNotifications = Object.values(notifications).filter(
+      (item) => {
+        return item.event === "checkToken" && item.state === "unread"
+      },
+    )
+
+    if (checkTokenNotifications.length) {
+      $eventbus.emit("ui_addToSnackBar", checkTokenNotifications[0].message)
+      $store.dispatch({
+        type: "notifications/markAllAsRead",
+      })
+    }
+  }
+}