refactor: module federation

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/FileActionsMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileCollectionObject } from '@FilesManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileEntityObject } from '@FilesManager/models/entity'
 
 defineProps<{
   item: FileCollectionObject | FileEntityObject

src/components/FilesInfoPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileCollectionObject } from '@FilesManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileEntityObject } from '@FilesManager/models/entity'
 import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
 
 const props = defineProps<{

src/components/views/FilesDetailsView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileCollectionObject } from '@FilesManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileEntityObject } from '@FilesManager/models/entity'
 import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
 import { FileActionsMenu } from '@/components'
 

src/components/views/FilesGridView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileCollectionObject } from '@FilesManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileEntityObject } from '@FilesManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
 import { FileActionsMenu } from '@/components'
 

src/components/views/FilesListView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileCollectionObject } from '@FilesManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileEntityObject } from '@FilesManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
 import { FileActionsMenu } from '@/components'
 

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 { useProvidersStore } from '@FilesManager/stores/providersStore'
-import { useServicesStore } from '@FileManager/stores/servicesStore'
+import { useServicesStore } from '@FilesManager/stores/servicesStore'
-import { useNodesStore, ROOT_ID } from '@FileManager/stores/nodesStore'
+import { useNodesStore, ROOT_ID } from '@FilesManager/stores/nodesStore'
-import type { FilterCondition, SortCondition, RangeCondition } from '@FileManager/types/common'
+import type { FilterCondition, SortCondition, RangeCondition } from '@FilesManager/types/common'
-import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileCollectionObject } from '@FilesManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileEntityObject } from '@FilesManager/models/entity'
 
 // Base URL for file manager transfer endpoints
 const TRANSFER_BASE_URL = '/m/file_manager'

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 { FileCollectionObject } from '@FilesManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileEntityObject } from '@FilesManager/models/entity'
 
 type NodeRecord = FileCollectionObject | FileEntityObject
 

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 { useNodesStore, ROOT_ID } from '@FilesManager/stores/nodesStore'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileEntityObject } from '@FilesManager/models/entity'
 
 export interface FileUploadProgress {
   file: File

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 { FileCollectionObject } from '@FilesManager/models/collection'
-import { FileEntityObject } from '@FileManager/models/entity'
+import { FileEntityObject } from '@FilesManager/models/entity'
 
 // Components
 import {

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

tsconfig.app.json

@@ -7,7 +7,7 @@
     "paths": {
       "@/*": ["./src/*"],
       "@KTXC/*": ["../../core/src/*"],
-      "@FileManager/*": ["../file_manager/src/*"]
+      "@FilesManager/*": ["../file_manager/src/*"]
     }
   },
   "include": [

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(
+            chunk.code = chunk.code.replace(/__CSS_FILENAME_PLACEHOLDER__/g, `static/${cssFile}`)
-              /__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)),
+      '@': path.resolve(__dirname, './src'),
-      '@KTXC': fileURLToPath(new URL('../../core/src', import.meta.url)),
+      '@KTXC': path.resolve(__dirname, '../../core/src'),
-      '@FileManager': fileURLToPath(new URL('../file_manager/src', import.meta.url)),
+      '@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)),
+      entry: path.resolve(__dirname, 'src/main.ts'),
-      name: 'Files',
       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'