@raclettejs/core 0.0.1

package/services/frontend/devTools/eslint/groupByRuleFormatter.cjs

@@ -0,0 +1,109 @@
+/**
+ * This is a custom formatter for eslint, to print the output grouped by rules.
+ * It is also possible, to filter by a specific rule.
+ * Run this command via `RULE=no-prototype-builtins yarn lint:grouped`
+ * (no-prototype-builtins is the rule you want to filter for)
+ * or without a specific rule via `yarn lint:grouped`.
+ *
+ * { This code was proudly generated by chatGPT }
+ *
+ * #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### ####
+ *
+ * TLDR:
+ * usage:             `yarn lint:grouped`
+ * usage (with rule): `RULE=no-prototype-builtins yarn lint:grouped`
+ */
+module.exports = (results) => {
+  const filterRule = process.env.FILTER_RULE
+  const grouped = {}
+  const ruleCount = {}
+
+  results.forEach((result) =>
+    result.messages.forEach((message) => {
+      const ruleId = message.ruleId || "unknown"
+
+      if (filterRule && ruleId !== filterRule) {
+        return
+      }
+
+      if (!grouped[ruleId]) {
+        grouped[ruleId] = []
+      }
+
+      const shortenedPath = result.filePath.replace(
+        /^.*\/frontend\//,
+        "client/",
+      )
+
+      grouped[ruleId].push({
+        filePath: shortenedPath,
+        line: message.line,
+        column: message.column,
+        message: message.message,
+        severity: message.severity === 2 ? "error" : "warning",
+      })
+
+      // Zähle Vorkommnisse pro Regel
+      if (!ruleCount[ruleId]) {
+        ruleCount[ruleId] = 0
+      }
+      ruleCount[ruleId]++
+    }),
+  )
+
+  let output = ""
+
+  Object.entries(grouped).forEach(([ruleId, messages]) => {
+    // Nehme den ersten Fehler und setze ihn hinter dem Rule-Namen
+    const firstMessage = messages[0]
+    const ruleMessage = firstMessage.message // Fehlernachricht aus der ersten Nachricht
+    const severity = firstMessage.severity === "error" ? "\x1b[31m" : "\x1b[33m"
+
+    // Rule in Lila (Magenta) und Fehlernachricht in Klammern
+    output += `\n\x1b[35m${ruleId} (${severity}${ruleMessage}\x1b[0m)\n`
+
+    // Durchlaufe alle Nachrichten und zeige nur den Pfad mit Zeile und Spalte
+    messages.forEach((msg) => {
+      const location = `\x1b[34m${msg.filePath}\x1b[0m:${msg.line}:${msg.column}`
+
+      output += `  ${location}  \x1b[90m${msg.message}\n`
+    })
+  })
+
+  const totalErrors = results.reduce(
+    (sum, file) =>
+      sum +
+      file.messages.filter(
+        (msg) =>
+          msg.severity === 2 && (!filterRule || msg.ruleId === filterRule),
+      ).length,
+    0,
+  )
+  const totalWarnings = results.reduce(
+    (sum, file) =>
+      sum +
+      file.messages.filter(
+        (msg) =>
+          msg.severity === 1 && (!filterRule || msg.ruleId === filterRule),
+      ).length,
+    0,
+  )
+
+  output += `\n\x1b[37m${totalErrors} error${totalErrors !== 1 ? "s" : ""}, ${totalWarnings} warning${totalWarnings !== 1 ? "s" : ""} found.\x1b[0m\n`
+
+  // Sortiere die Regeln nach Vorkommnissen (absteigend)
+  const sortedRuleCount = Object.entries(ruleCount).sort((a, b) => b[1] - a[1])
+
+  if (!filterRule) {
+    // Ausgabe der Regeln nach Häufigkeit sortiert
+    output += `\n\x1b[37mRules with occurrences (sorted by count):\x1b[0m\n`
+    sortedRuleCount.forEach(([ruleId, count]) => {
+      output += `  \x1b[35m${ruleId}\x1b[0m  \x1b[37m${count} occurrence${count !== 1 ? "s" : ""}\x1b[0m\n`
+    })
+
+    output +=
+      "use RULE=no-prototype-builtins yarn lint:grouped to filter for rules now"
+  }
+
+  return output.trim()
+}

package/services/frontend/eslint.config.js

@@ -0,0 +1,95 @@
+import parentConfig from "../../eslint.config.mjs"
+import pluginVue from "eslint-plugin-vue"
+import globals from "globals"
+// TODO: bring back tailwind with v4 support
+
+export default [
+  ...parentConfig,
+
+  // Vue config
+  ...pluginVue.configs["flat/recommended"],
+  {
+    files: ["**/*.vue"],
+    languageOptions: {
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+      },
+    },
+    rules: {
+      // Essential Vue rules (from ESLint plugin Vue)
+      "vue/multi-word-component-names": "off",
+      "vue/no-mutating-props": "error",
+      "vue/no-reserved-component-names": "error",
+      "vue/no-use-v-if-with-v-for": "error",
+      "vue/require-v-for-key": "error",
+      "vue/valid-template-root": "error",
+      "vue/valid-v-bind": "error",
+      "vue/valid-v-cloak": "error",
+      "vue/valid-v-else-if": "error",
+      "vue/valid-v-else": "error",
+      "vue/valid-v-for": "error",
+      "vue/valid-v-html": "error",
+      "vue/valid-v-if": "error",
+      "vue/valid-v-model": "error",
+      "vue/valid-v-on": "error",
+      "vue/valid-v-once": "error",
+      "vue/valid-v-pre": "error",
+      "vue/valid-v-show": "error",
+      "vue/valid-v-slot": "error",
+      "vue/valid-v-text": "error",
+      //   ...tailwindcss.configs.recommended.rules,
+    },
+  },
+
+  // Vue recommended config
+  {
+    files: ["**/*.vue"],
+    rules: {
+      // Recommended Vue rules
+      "vue/component-name-in-template-casing": ["error", "PascalCase"],
+      "vue/match-component-file-name": [
+        "error",
+        {
+          extensions: ["vue"],
+          shouldMatchCase: true,
+        },
+      ],
+      "vue/match-component-import-name": "error",
+      "vue/attribute-hyphenation": "error",
+      "vue/component-definition-name-casing": ["error", "PascalCase"],
+      "vue/html-closing-bracket-newline": "error",
+      "vue/html-closing-bracket-spacing": "error",
+      "vue/html-end-tags": "error",
+      "vue/html-indent": ["error", 2],
+      "vue/html-quotes": "error",
+      "vue/html-self-closing": [
+        "error",
+        {
+          html: {
+            void: "any",
+            normal: "any",
+            component: "always",
+          },
+        },
+      ],
+      "vue/max-attributes-per-line": [
+        "error",
+        {
+          singleline: 3,
+          multiline: 1,
+        },
+      ],
+      "vue/no-multi-spaces": "error",
+      "vue/no-spaces-around-equal-signs-in-attribute": "error",
+      "vue/no-template-shadow": "error",
+      "vue/one-component-per-file": "error",
+      "vue/prop-name-casing": ["error", "camelCase"],
+      "vue/require-default-prop": "error",
+      "vue/require-prop-types": "error",
+      "vue/v-bind-style": "error",
+      "vue/v-on-style": "error",
+      "vue/v-slot-style": "error",
+    },
+  },
+]

package/services/frontend/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html class="tw:overscroll-none">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>raclette - Come in and have some Cheese</title>
+    <link rel="manifest" href="./manifest.json" accept-version="*" />
+    <script>
+      window.configs = false
+    </script>
+  </head>
+
+  <body class="tw:overscroll-none">
+    <div id="app"></div>
+    <script type="module" src="/src/orchestrator/index.ts"></script>
+  </body>
+</html>

package/services/frontend/manifest.json

@@ -0,0 +1,15 @@
+{
+  "name": "Pacifico Digital Explorations GmbH",
+  "short_name": "raclette - Vue Orchestrator",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "icons": [
+    {
+      "src": "splash.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    }
+  ],
+  "related_applications": []
+}

package/services/frontend/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "frontend",
+  "version": "0.0.1",
+  "type": "module",
+  "repository": "https://gitlab.com/raclettejs/raclette-core",
+  "author": "Pacifico Digital Explorations GmbH <info@raclettejs.com>",
+  "license": "AGPL-3.0-only",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview --host",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . ",
+    "lint:fix": "eslint . --fix",
+    "lint:grouped": "FILTER_RULE=$RULE eslint . --fix --format ./devTools/eslint/groupByRuleFormatter.cjs",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@date-io/date-fns": "^3.2.1",
+    "@mdi/font": "7.4.47",
+    "@tailwindcss/vite": "^4.1.11",
+    "@tsconfig/node20": "^20.1.6",
+    "@vueuse/core": "13.5.0",
+    "@vueuse/rxjs": "^13.5.0",
+    "axios": "1.10.0",
+    "date-fns": "4.1.0",
+    "esm": "3.x",
+    "interactjs": "^1.10.27",
+    "mini-rx-store": "6.1.2",
+    "nanoid": "5.1.5",
+    "ramda": "0.31.3",
+    "rxjs": "7.x",
+    "sass": "^1.90.0",
+    "socket.io-client": "4.x",
+    "tailwindcss": "^4.1.11",
+    "uuid": "11.1.0",
+    "vue": "^3.5.17",
+    "vue-i18n": "11.1.9",
+    "vue-konva": "^3.2.1",
+    "vue-router": "4.5.1",
+    "vuetify": "3.9.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.13",
+    "@types/ramda": "^0.30.0",
+    "@vitejs/plugin-vue": "6.0.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-config-standard": "17.1.0",
+    "eslint-plugin-arrowsmith": "^1.1.0",
+    "eslint-plugin-cypress": "5.1.0",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-node": "11.x",
+    "eslint-plugin-prefer-arrow-functions": "^3.4.1",
+    "eslint-plugin-promise": "7.2.1",
+    "eslint-plugin-storybook": "^9.0.16",
+    "eslint-plugin-tailwindcss": "^4.0.0-beta.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "eslint-plugin-vue": "^10.4.0",
+    "globals": "^16.3.0",
+    "prettier": "^3.6.2",
+    "prettier-eslint": "^16.4.2",
+    "typescript": "^5.8.3",
+    "vite": "7.0.4",
+    "vitest": "3.2.4",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.0.1"
+  }
+}

package/services/frontend/provision/entrypoint.sh

@@ -0,0 +1,104 @@
+#!/bin/sh
+
+#######################################
+# PART 1: NGINX CONFIG TEMPLATE HANDLING
+#######################################
+
+# Get nginx config template if it exists
+CONFIG_TEMPLATE="/etc/nginx/conf.d/default.conf.template"
+CONFIG_FILE="/etc/nginx/conf.d/default.conf"
+
+# If template exists, generate config
+if [ -f "$CONFIG_TEMPLATE" ]; then
+  echo "-----------------------------"
+  echo "Generating nginx config using PORT: $PORT"
+  
+  # Replace the PORT variable in the template
+  envsubst '$PORT' < "$CONFIG_TEMPLATE" > "$CONFIG_FILE"
+  
+  echo "Nginx configuration generated."
+fi
+
+#######################################
+# PART 2: ENVIRONMENT VARIABLE HANDLING
+#######################################
+
+# Set debug mode based on NODE_ENV
+if [ "$NODE_ENV" = "production" ]; then
+  DEBUG_MODE="false"
+else
+  DEBUG_MODE="true"
+fi
+
+echo "-----------------------------"
+echo "Processing environment variables..."
+
+# Initialize the configs object
+CONFIG_STRING="window.configs = { RACLETTE_DEBUG_MODE: '${DEBUG_MODE}'"
+
+# Automatically add all RACLETTE_ prefixed environment variables
+for VAR in $(env | grep ^RACLETTE_ | cut -d= -f1); do
+  # Get the value of the variable
+  VALUE=$(eval echo \$$VAR)
+  # Escape single quotes in the value to prevent JavaScript syntax errors
+  ESCAPED_VALUE=$(echo "$VALUE" | sed "s/'/\\\\'/g")
+  # Append to config string
+  CONFIG_STRING="$CONFIG_STRING, $VAR: '$ESCAPED_VALUE'"
+done
+
+# Close the config object
+CONFIG_STRING="$CONFIG_STRING }"
+
+echo "Injecting config: $CONFIG_STRING"
+
+# Determine the correct index.html location
+if [ -f /usr/share/nginx/html/index.html ]; then
+  INDEX_PATH="/usr/share/nginx/html/index.html"
+elif [ -f /app/dist/index.html ]; then
+  # For vite preview mode
+  INDEX_PATH="/app/dist/index.html"
+else
+  echo "Error: Could not find index.html"
+  exit 1
+fi
+
+# Check if window.configs already exists in the HTML
+if grep -q "window\.configs" "$INDEX_PATH"; then
+  # Replace existing window.configs
+  sed -i "s@window\.configs.*@${CONFIG_STRING}@" "$INDEX_PATH"
+  echo "✅ Replaced existing environment config in $INDEX_PATH"
+else
+  # Add new script tag before </head>
+  SCRIPT_TAG="<script>${CONFIG_STRING}</script>"
+  sed -i "s@</head>@${SCRIPT_TAG}\n</head>@" "$INDEX_PATH"
+  echo "✅ Added new environment config to $INDEX_PATH"
+fi
+
+echo "Environment variables successfully injected into $INDEX_PATH"
+
+#######################################
+# PART 3: DEPLOYMENT TRIGGER (Optional for production)
+#######################################
+
+# Only trigger deployment notification if API backend URL is provided
+if [ -n "$RACLETTE_API_BASE_URL" ]; then
+  echo "-----------------------------"
+  echo "Triggering deployment notification..."
+  
+  API_SERVER_URL="${RACLETTE_API_BASE_URL}/core/system/deploy"
+  echo "Call Deploy Endpoint: $API_SERVER_URL"
+  
+  # Call the deploy endpoint to notify backend (optional, non-blocking)
+  curl -X GET -H 'Accept-Version: 1.0' "$API_SERVER_URL" || echo "Deploy notification failed (non-critical)"
+  echo "Deployment notification completed."
+  echo "-----------------------------"
+fi
+
+#######################################
+# PART 4: START MAIN PROCESS
+#######################################
+
+echo "Starting main application process..."
+
+# Execute the main command (nginx)
+exec "$@"

package/services/frontend/provision/nginx.conf

@@ -0,0 +1,22 @@
+# In order to allow the history in the vue router we need to add some simple
+# configuration to the nginx instance
+# port will be replaced in entrypoint.sh
+server {
+  listen ${PORT} default_server;
+  listen [::]:${PORT} default_server;
+
+  root /usr/share/nginx/html;
+
+  index index.html;
+
+  location ~* \.(html|html)$ {
+    expires -1;
+  }
+
+  location / {
+    # Support the HTML5 History mode of the vue-router.
+    # https://router.vuejs.org/en/essentials/history-mode.html
+    try_files $uri $uri/ /index.html;
+  }
+}
+

package/services/frontend/public/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>raclette App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/services/frontend/raclette.config.js

@@ -0,0 +1,23 @@
+export const racletteConfig = {
+  name: "raclette-core-project",
+  env: {
+    development: {
+      RACLETTE_DEBUG_MODE: true,
+    },
+  },
+  modules: [],
+  plugins: [],
+  global: {
+    requireAuthentication: true,
+  },
+  service: "frontend",
+  framework: "vue",
+  vue: {
+    plugins: ["vue-router"],
+  },
+  meta: {
+    title: "raclette core project",
+  },
+}
+
+export default racletteConfig

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

@@ -0,0 +1,11 @@
+export const cudOperationTypesList = [
+  "dataCreate",
+  "dataUpdate",
+  "dataMove",
+  "projectUpdate",
+  "projectConfigUpdate",
+  "userConfigUpdate",
+  "dataDelete",
+  "dataHardDeleted",
+] as const
+export const readOperationTypesList = ["dataPush", "dataAdd", "dataSync"]

package/services/frontend/src/core/constants/index.ts

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

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

@@ -0,0 +1,9 @@
+export type * from "./types"
+
+export * from "./lib/createStableHash"
+export * from "./main"
+export * from "./lib/dataHelper"
+export * as userNotifier from "./lib/userNotifier"
+export * from "./constants"
+export * from "./setup/plugin-system"
+export * from "./lib/eggs/chadsay"

package/services/frontend/src/core/helpers/devMode.ts

@@ -0,0 +1,14 @@
+import getEnvVariable from "@racletteCore/lib/getEnvVariable"
+
+/**
+ * Check if the application is running in development mode
+ * Development mode is enabled when:
+ * - RACLETTE_DEBUG_MODE is explicitly set to "true"
+ * - RACLETTE_DEBUG_MODE is not set at all (default dev behavior)
+ */
+export const isDevelopmentMode = (): boolean => {
+  return (
+    getEnvVariable("RACLETTE_DEBUG_MODE") === "true" ||
+    !getEnvVariable("RACLETTE_DEBUG_MODE")
+  )
+}

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

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

package/services/frontend/src/core/lib/configService.ts

@@ -0,0 +1,101 @@
+type PreventNotifications = {
+  [key: string]: true | PreventNotifications
+}
+type RacletteFrontendConfig = {
+  name?: string
+  meta?: {
+    title?: string
+  }
+  i18n: {
+    locales: string[]
+    priorities: Record<string, number>
+  }
+  pleaseLetUsAdvertiseOurselves?: boolean
+  advertiseYourself?: string
+  preventNotifications?: PreventNotifications
+  global?: {
+    requireAuthentication: boolean
+    authTokenExpiryDays: number
+  }
+  plugins?: string[]
+  additionalPluginPaths?: string[]
+}
+
+// Cache for configuration
+let cachedConfig: RacletteFrontendConfig
+
+export class ConfigService {
+  private config: RacletteFrontendConfig
+
+  constructor() {
+    this.config = {}
+  }
+
+  async init() {
+    await this.refreshConfig()
+
+    return this
+  }
+
+  // Refresh the config (useful for hot reloading)
+  public async refreshConfig(): Promise<void> {
+    try {
+      // TODO: revisit caching topic here
+      const configModule = await import("../../../raclette.config.js")
+
+      this.config = configModule.racletteConfig
+
+      cachedConfig = this.config
+    } catch (error) {
+      console.warn(
+        `Error loading config: ${error instanceof Error ? error.message : String(error)}`,
+      )
+      // Keep using cached config if it exists
+      this.config = cachedConfig
+    }
+  }
+
+  // Get the entire config
+  public getConfig() {
+    if (!this.config) {
+      if (!cachedConfig) {
+        console.error("Failed to load Raclette configuration")
+      }
+      this.config = cachedConfig
+    }
+
+    return this.config
+  }
+
+  public getPlugins(): string[] {
+    return this.config.plugins || []
+  }
+  public getAuthTokenExpiryDays(): number {
+    return this.config.global?.authTokenExpiryDays ?? 7
+  }
+  public getAdditonalPluginPaths(): string[] {
+    return this.config.additionalPluginPaths?.map((e) => `${e}`) || []
+  }
+  public getPreventNotifications(): PreventNotifications {
+    return this.config.preventNotifications || {}
+  }
+  public getPleaseLetUsAdvertiseOurselves(): boolean {
+    return this.config.pleaseLetUsAdvertiseOurselves ?? true
+  }
+  public getAdvertiseYourself(): string {
+    return this.config.advertiseYourself || ""
+  }
+  public getRequireAuthentication(): boolean {
+    return this.config.global?.requireAuthentication || false
+  }
+  public getApplicationTitle(): string | undefined {
+    return this.config.meta?.title ?? this.config.name
+  }
+  public getI18nConfig(): RacletteFrontendConfig["i18n"] {
+    return this.config.i18n || {}
+  }
+}
+
+const configService = new ConfigService()
+
+export default configService

package/services/frontend/src/core/lib/createStableHash.ts

@@ -0,0 +1,44 @@
+import {
+  pipe,
+  sortBy,
+  toPairs,
+  fromPairs,
+  map,
+  identity,
+  cond,
+  is,
+  T,
+} from "ramda"
+
+// First declare the function
+let sortObjectKeys
+
+// Then define it
+sortObjectKeys = cond([
+  [is(Array), map((x) => sortObjectKeys(x))],
+  [
+    is(Object),
+    pipe(
+      toPairs,
+      sortBy(([key]) => key),
+      map(([key, val]) => [key, sortObjectKeys(val)]),
+      fromPairs,
+    ),
+  ],
+  [T, identity],
+])
+const hash = (str) => {
+  // FNV-1a hash algorithm (32-bit)
+  let hash = 2166136261 // FNV offset basis
+  for (let i = 0; i < str.length; i++) {
+    hash ^= str.charCodeAt(i)
+    // Multiply by the FNV prime
+    hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24)
+  }
+
+  // Convert to alphanumeric string (base 36)
+  return (hash >>> 0).toString(36)
+}
+const createStableHash = pipe(sortObjectKeys, JSON.stringify, hash)
+export default createStableHash
+export { createStableHash }