From e0246202f6b8427df9c3b342053b9bf9dee7ab7f Mon Sep 17 00:00:00 2001
From: Sebastian Krupinski <krupinski01@gmail.com>
Date: Sun, 22 Feb 2026 16:51:29 -0500
Subject: [PATCH] refactor: module federation

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
---
 src/components/FileActionsMenu.vue        |  4 +--
 src/components/FilesInfoPanel.vue         |  4 +--
 src/components/views/FilesDetailsView.vue |  4 +--
 src/components/views/FilesGridView.vue    |  4 +--
 src/components/views/FilesListView.vue    |  4 +--
 src/composables/useFileManager.ts         | 12 ++++----
 src/composables/useFileSelection.ts       |  4 +--
 src/composables/useFileUpload.ts          |  4 +--
 src/pages/FilesPage.vue                   |  6 ++--
 src/utils/fileHelpers.ts                  |  2 +-
 tsconfig.app.json                         |  2 +-
 vite.config.ts                            | 37 +++++++++++------------
 12 files changed, 42 insertions(+), 45 deletions(-)

diff --git a/src/components/FileActionsMenu.vue b/src/components/FileActionsMenu.vue
index ffaf80b..28309df 100644
--- a/src/components/FileActionsMenu.vue
+++ b/src/components/FileActionsMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { FileCollectionObject } from '@FileManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileCollectionObject } from '@FilesManager/models/collection'
+import { FileEntityObject } from '@FilesManager/models/entity'
 
 defineProps<{
   item: FileCollectionObject | FileEntityObject
diff --git a/src/components/FilesInfoPanel.vue b/src/components/FilesInfoPanel.vue
index fed381a..839c3ea 100644
--- a/src/components/FilesInfoPanel.vue
+++ b/src/components/FilesInfoPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { FileCollectionObject } from '@FileManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileCollectionObject } from '@FilesManager/models/collection'
+import { FileEntityObject } from '@FilesManager/models/entity'
 import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
 
 const props = defineProps<{
diff --git a/src/components/views/FilesDetailsView.vue b/src/components/views/FilesDetailsView.vue
index 1f02ef9..8196488 100644
--- a/src/components/views/FilesDetailsView.vue
+++ b/src/components/views/FilesDetailsView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { FileCollectionObject } from '@FileManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileCollectionObject } from '@FilesManager/models/collection'
+import { FileEntityObject } from '@FilesManager/models/entity'
 import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
 import { FileActionsMenu } from '@/components'
 
diff --git a/src/components/views/FilesGridView.vue b/src/components/views/FilesGridView.vue
index 1f3b983..c52c2af 100644
--- a/src/components/views/FilesGridView.vue
+++ b/src/components/views/FilesGridView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { FileCollectionObject } from '@FileManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileCollectionObject } from '@FilesManager/models/collection'
+import { FileEntityObject } from '@FilesManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
 import { FileActionsMenu } from '@/components'
 
diff --git a/src/components/views/FilesListView.vue b/src/components/views/FilesListView.vue
index a80f7fe..f06caa0 100644
--- a/src/components/views/FilesListView.vue
+++ b/src/components/views/FilesListView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { FileCollectionObject } from '@FileManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileCollectionObject } from '@FilesManager/models/collection'
+import { FileEntityObject } from '@FilesManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
 import { FileActionsMenu } from '@/components'
 
diff --git a/src/composables/useFileManager.ts b/src/composables/useFileManager.ts
index 51dc82b..ea8a5fc 100644
--- a/src/composables/useFileManager.ts
+++ b/src/composables/useFileManager.ts
@@ -5,12 +5,12 @@
 
 import { computed, ref } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
-import { useProvidersStore } from '@FileManager/stores/providersStore'
-import { useServicesStore } from '@FileManager/stores/servicesStore'
-import { useNodesStore, ROOT_ID } from '@FileManager/stores/nodesStore'
-import type { FilterCondition, SortCondition, RangeCondition } from '@FileManager/types/common'
-import { FileCollectionObject } from '@FileManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { useProvidersStore } from '@FilesManager/stores/providersStore'
+import { useServicesStore } from '@FilesManager/stores/servicesStore'
+import { useNodesStore, ROOT_ID } from '@FilesManager/stores/nodesStore'
+import type { FilterCondition, SortCondition, RangeCondition } from '@FilesManager/types/common'
+import { FileCollectionObject } from '@FilesManager/models/collection'
+import { FileEntityObject } from '@FilesManager/models/entity'
 
 // Base URL for file manager transfer endpoints
 const TRANSFER_BASE_URL = '/m/file_manager'
diff --git a/src/composables/useFileSelection.ts b/src/composables/useFileSelection.ts
index 72b4ef7..259b0d0 100644
--- a/src/composables/useFileSelection.ts
+++ b/src/composables/useFileSelection.ts
@@ -5,8 +5,8 @@
 
 import { ref, computed } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
-import { FileCollectionObject } from '@FileManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileCollectionObject } from '@FilesManager/models/collection'
+import { FileEntityObject } from '@FilesManager/models/entity'
 
 type NodeRecord = FileCollectionObject | FileEntityObject
 
diff --git a/src/composables/useFileUpload.ts b/src/composables/useFileUpload.ts
index 4f7c07f..f76f890 100644
--- a/src/composables/useFileUpload.ts
+++ b/src/composables/useFileUpload.ts
@@ -6,8 +6,8 @@
 
 import { ref, computed } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
-import { useNodesStore, ROOT_ID } from '@FileManager/stores/nodesStore'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { useNodesStore, ROOT_ID } from '@FilesManager/stores/nodesStore'
+import { FileEntityObject } from '@FilesManager/models/entity'
 
 export interface FileUploadProgress {
   file: File
diff --git a/src/pages/FilesPage.vue b/src/pages/FilesPage.vue
index 64d36b6..eac53b2 100644
--- a/src/pages/FilesPage.vue
+++ b/src/pages/FilesPage.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
-import { useModuleStore } from '@KTXC/stores/moduleStore'
+import { useModuleStore } from '@KTXC'
 import { useFileManager, useFileSelection, useFileUpload } from '@/composables'
 import type { ViewMode, SortField, SortOrder, BreadcrumbItem } from '@/types'
-import { FileCollectionObject } from '@FileManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileCollectionObject } from '@FilesManager/models/collection'
+import { FileEntityObject } from '@FilesManager/models/entity'
 
 // Components
 import {
diff --git a/src/utils/fileHelpers.ts b/src/utils/fileHelpers.ts
index 59c95be..84ea19b 100644
--- a/src/utils/fileHelpers.ts
+++ b/src/utils/fileHelpers.ts
@@ -1,4 +1,4 @@
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileEntityObject } from '@FilesManager/models/entity'
 
 /**
  * Get the appropriate icon for a file based on its MIME type
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 509cd17..da2be85 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -7,7 +7,7 @@
     "paths": {
       "@/*": ["./src/*"],
       "@KTXC/*": ["../../core/src/*"],
-      "@FileManager/*": ["../file_manager/src/*"]
+      "@FilesManager/*": ["../file_manager/src/*"]
     }
   },
   "include": [
diff --git a/vite.config.ts b/vite.config.ts
index 2e210a0..ada6914 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
-import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -10,23 +10,13 @@ export default defineConfig({
       name: 'inject-css-filename',
       enforce: 'post',
       generateBundle(_options, bundle) {
-        // Find the CSS file in the bundle
         const cssFile = Object.keys(bundle).find(name => name.endsWith('.css'))
+        if (!cssFile) return
         
-        if (!cssFile) {
-          console.warn('No CSS file found in bundle')
-          return
-        }
-        
-        // Find and update all JS chunks
-        // Prefix with static/ to match nginx location pattern: /modules/{handle}/static/{file}
         for (const fileName of Object.keys(bundle)) {
           const chunk = bundle[fileName]
           if (chunk.type === 'chunk' && chunk.code.includes('__CSS_FILENAME_PLACEHOLDER__')) {
-            chunk.code = chunk.code.replace(
-              /__CSS_FILENAME_PLACEHOLDER__/g,
-              `static/${cssFile}`
-            )
+            chunk.code = chunk.code.replace(/__CSS_FILENAME_PLACEHOLDER__/g, `static/${cssFile}`)
             console.log(`Injected CSS filename "static/${cssFile}" into ${fileName}`)
           }
         }
@@ -35,18 +25,17 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@KTXC': fileURLToPath(new URL('../../core/src', import.meta.url)),
-      '@FileManager': fileURLToPath(new URL('../file_manager/src', import.meta.url)),
+      '@': path.resolve(__dirname, './src'),
+      '@KTXC': path.resolve(__dirname, '../../core/src'),
+      '@filesManager': path.resolve(__dirname, '../files_manager/src'),
     },
   },
   build: {
     outDir: 'static',
     emptyOutDir: true,
-    sourcemap: false,
+    sourcemap: true,
     lib: {
-      entry: fileURLToPath(new URL('./src/main.ts', import.meta.url)),
-      name: 'Files',
+      entry: path.resolve(__dirname, 'src/main.ts'),
       formats: ['es'],
       fileName: () => 'module.mjs',
     },
@@ -55,9 +44,17 @@ export default defineConfig({
         'vue',
         'vue-router',
         'pinia',
+        '@KTXC',
+        /^@FilesManager\//,
       ],
       output: {
-        // Use content hash for CSS files
+        paths: (id) => {
+          if (id === '@KTXC') return '/js/ktxc.mjs'
+          if (id.startsWith('@FilesManager/')) {
+            return '/modules/file_manager/static/module.mjs'
+          }
+          return id
+        },
         assetFileNames: (assetInfo) => {
           if (assetInfo.name?.endsWith('.css')) {
             return 'files-[hash].css'