@ozdao/martyrs 0.2.526 → 0.2.528

package/src/modules/globals/globals.client.js

@@ -1,26 +1,11 @@
-// Components
-// import Client from "./components/layouts/Client.vue"
-
+// Functional imports (needed for initialize function)
 import getBrowserLocale from './views/localization/get-browser-locale.js';
 import scrollBehavior from './views/router/scrollBehavior.js';
 
-import layoutApp from './views/components/layouts/App.vue';
-import layoutClient from './views/components/layouts/Client.vue';
-
-import BlockSearch from '@martyrs/src/modules/globals/views/components/blocks/BlockSearch.vue';
-
-import BottomNavigationBar from '@martyrs/src/modules/globals/views/components/partials/BottomNavigationBar.vue';
-import Header from '@martyrs/src/modules/globals/views/components/partials/Header.vue';
-import Navigation from '@martyrs/src/modules/globals/views/components/partials/Navigation.vue';
-import NavigationBar from '@martyrs/src/modules/globals/views/components/partials/NavigationBar.vue';
-import Sidebar from '@martyrs/src/modules/globals/views/components/partials/Sidebar.vue';
-import Footer from '@martyrs/src/modules/globals/views/components/partials/Footer.vue';
-
-import Walkthrough from '@martyrs/src/modules/globals/views/components/sections/Walkthrough.vue';
-
 import * as mixins from './views/mixins/mixins.js';
 import * as storeGlobals from './views/store/globals.js';
 import * as appRenderer from './views/utils/vue-app-renderer.js';
+import './views/utils/polyfills.js'; // Auto-apply polyfills
 
 import alertPlugin from './views/plugins/alert.plugin.js';
 import popupAuthPlugin from './views/plugins/popup.auth.plugin.js';
@@ -30,6 +15,7 @@ import storeDebuggerPlugin from './views/plugins/store-debugger/store-debugger.p
 import store from './views/classes/store.js';
 import websockets from './views/classes/globals.websocket.js';
 import { i18nManager }  from '@martyrs/src/modules/globals/views/classes/globals.i18n.js';
+import { moduleRegistry } from './views/classes/module-registry.js';
 
 import en from './locales/en.js';
 import ru from './locales/ru.js';
@@ -64,17 +50,8 @@ function initializeGlobals(app, store, router, config, options = {}) {
   // app.use(storeDebuggerPlugin, store);
 
 
-    
-  // Initialize WebSocket for all users (authenticated and anonymous)
-  console.log('Initializing websockets via globals');
-  websockets.initialize({
-    wsUrl: process.env.WSS_URL,
-    maxReconnectAttempts: 10,
-    reconnectDelay: 2000,
-  });
-
-  // Connect without userId - will work for both authenticated (via cookies) and anonymous users
-  websockets.connect();
+  // WebSocket инициализируется в client.js после гидратации
+  // чтобы не блокировать главный поток
 
   // Change Locale to Route Locale if available
   router.beforeEach((to, from, next) => {
@@ -122,43 +99,38 @@ const ModuleGlobals = {
     router: {
       // routerOrders
     },
-    components: {
-      // Pages
-      BlockSearch,
-      layoutClient,
-      layoutApp,
-      Header,
-      Navigation,
-      Footer,
-      Sidebar,
-      BottomNavigationBar,
-      NavigationBar,
-      Walkthrough
-    },
   },
 };
 
+// Component re-exports (enables tree shaking)
+export { default as layoutApp } from './views/components/layouts/App.vue';
+export { default as layoutClient } from './views/components/layouts/Client.vue';
+export { default as BlockSearch } from '@martyrs/src/modules/globals/views/components/blocks/BlockSearch.vue';
+export { default as BottomNavigationBar } from '@martyrs/src/modules/globals/views/components/partials/BottomNavigationBar.vue';
+export { default as Header } from '@martyrs/src/modules/globals/views/components/partials/Header.vue';
+export { default as Navigation } from '@martyrs/src/modules/globals/views/components/partials/Navigation.vue';
+export { default as NavigationBar } from '@martyrs/src/modules/globals/views/components/partials/NavigationBar.vue';
+export { default as Sidebar } from '@martyrs/src/modules/globals/views/components/partials/Sidebar.vue';
+export { default as Footer } from '@martyrs/src/modules/globals/views/components/partials/Footer.vue';
+export { default as Walkthrough } from '@martyrs/src/modules/globals/views/components/sections/Walkthrough.vue';
+
+// Functional exports
 export {
-  BlockSearch,
-  Header,
-  Footer,
-  Navigation,
-  NavigationBar,
-  Sidebar,
-  Walkthrough,
   appRenderer,
   getBrowserLocale,
-  layoutApp,
-  // Components
-  layoutClient,
-  // Client,
   mixins,
+  moduleRegistry,
   scrollBehavior,
   store,
   i18nManager,
-  // Store
   storeGlobals,
   websockets,
 };
 
+// Export client factory
+export { createUniversalApp } from './views/classes/globals.app.js';
+
+// Re-export polyfills for documentation
+export * from './views/utils/polyfills.js';
+
 export default ModuleGlobals;

package/src/modules/globals/views/classes/globals.app.js

@@ -0,0 +1,320 @@
+// client-factory.js - фабрика для создания клиентского приложения
+import { createApp as createVueApp, createSSRApp as createVueSSRApp } from 'vue';
+import { createHead } from '@unhead/vue';
+
+export function createUniversalApp({
+  getConfig,
+  getRouter,
+  getLocales,
+  getStore,
+  getHooks = {}
+}) {
+  // Lazy imports to avoid circular dependencies
+  const getLayoutApp = () => import('../components/layouts/App.vue').then(m => m.default);
+  const getModuleRegistry = () => import('./module-registry.js').then(m => m.moduleRegistry);
+  const getWebsockets = () => import('./globals.websocket.js').then(m => m.default);
+  const getAppRenderer = () => import('../utils/vue-app-renderer.js');
+  
+  // Асинхронная инициализация для избежания циклических зависимостей
+  async function initializeApp() {
+    // Создаем конфигурацию
+    const config = await getConfig();
+    const hooks = getHooks;
+    
+    const [layoutApp, moduleRegistry, globalWebSocket, appRenderer] = await Promise.all([
+      getLayoutApp(),
+      getModuleRegistry(),
+      getWebsockets(),
+      getAppRenderer()
+    ]);
+    
+    // Регистрация модуля globals первым
+    moduleRegistry.register('globals', {
+      loader: () => import('../../globals.client.js'),
+      critical: true,
+      priority: 'critical'
+    });
+    
+    // Регистрация модулей из config
+    Object.entries(config.modules).forEach(([name, module]) => {
+      if (module.loader) {
+        moduleRegistry.register(name, {
+          loader: module.loader,
+          routes: module.routes || [],
+          priority: module.priority || 'normal',
+          critical: module.critical || false,
+          dependencies: module.dependencies || [],
+          preload: module.preload || false
+        });
+      }
+    });
+    
+    // Основная функция создания приложения
+    function createApp() {
+      const store = getStore();
+      const app = process.env.MOBILE_APP 
+        ? createVueApp(layoutApp, config) 
+        : createVueSSRApp(layoutApp, config);
+      
+      const meta = createHead();
+      const i18n = getLocales();
+      
+      const context = {
+        app,
+        store,
+        router: null,
+        config,
+      };
+      
+      // Создаем роутер с контекстом
+      const router = getRouter(context);
+      context.router = router;
+      
+      // Загружаем только критические модули синхронно
+      const initCriticalModules = async () => {
+        // Критические модули одинаковые для всех проектов
+        const criticalModules = ['globals', 'auth', 'organizations', 'backoffice'];
+        
+        for (const moduleName of criticalModules) {
+          try {
+            await moduleRegistry.load(moduleName, context);
+            await moduleRegistry.initialize(moduleName, context);
+          } catch (error) {
+            console.error(`Failed to load critical module ${moduleName}:`, error);
+          }
+        }
+      };
+      
+      // Router guard для загрузки модулей ДО навигации (только на клиенте)
+      if (typeof window !== 'undefined') {
+        router.beforeEach(async (to, from) => {
+          // Получаем модули для маршрута
+          const requiredModules = moduleRegistry.getModulesForRoute(to.path);
+          
+          // Проверяем, какие модули еще не загружены
+          const modulesToLoad = requiredModules.filter(m => !moduleRegistry.initialized.has(m.name));
+          
+          if (modulesToLoad.length > 0) {
+            // Показываем глобальный лоадер
+            if (store.globals && store.globals.state) {
+              store.globals.state.loading = true;
+            }
+            
+            // Загружаем и инициализируем модули
+            for (const module of modulesToLoad) {
+              try {
+                await moduleRegistry.load(module.name, context);
+                await moduleRegistry.initialize(module.name, context);
+              } catch (error) {
+                console.error(`Failed to load module ${module.name}:`, error);
+              }
+            }
+            
+            // Лоадер остается включенным - страница сама выключит через globals.state.loading = false
+            
+            // После загрузки модулей и регистрации их роутов,
+            // возвращаем тот же путь для повторной навигации с новыми роутами
+            return to.fullPath;
+          }
+        });
+      }
+      
+      // Error handler для lazy loaded chunks
+      if (typeof window !== 'undefined') {
+        window.addEventListener('error', (e) => {
+          if (e.message && e.message.includes('Loading chunk')) {
+            console.error('Chunk loading failed:', e);
+            // Можно показать уведомление пользователю
+            // или попытаться перезагрузить
+          }
+        });
+      }
+      
+      // Инициализация в правильном порядке
+      const initialize = async () => {
+        // Хук ДО инициализации
+        if (hooks.beforeInitialize) {
+          await hooks.beforeInitialize(context);
+        }
+        
+        // 1. Критические модули
+        await initCriticalModules();
+        
+        // 2. WebSocket (отложим после гидратации)
+        if (typeof window !== 'undefined') {
+          // Откладываем инициализацию WebSocket после гидратации
+          requestIdleCallback(() => {
+            globalWebSocket.initialize({
+              wsUrl: process.env.WSS_URL || undefined,
+              maxReconnectAttempts: 5,
+              reconnectDelay: 3000,
+              pingInterval: 30000,
+            });
+          });
+          
+          // 3. Предзагрузка важных модулей в фоне
+          requestIdleCallback(() => {
+            moduleRegistry.preloadModules(context);
+          });
+        }
+        
+        // 5. Подключаем Vue плагины
+        app.use(router).use(i18n).use(meta);
+        
+        // 6. Монтируем приложение
+        if (process.env.MOBILE_APP) {
+          app.mount('#app');
+        }
+
+        // Хук ПОСЛЕ инициализации
+        if (hooks.afterInitialize) {
+          await hooks.afterInitialize(context);
+        }
+        
+        return {
+          app,
+          router,
+          store,
+          i18n,
+          meta,
+          moduleRegistry,
+        };
+      };
+      
+      // Возвращаем промис для SSR
+      if (!process.env.MOBILE_APP) {
+        return initialize();
+      }
+      
+      // Для SPA инициализируем сразу
+      initialize();
+    }
+    
+    // FOR SSR / SERVER ENTRY
+    async function renderApp({ url, cookies, languages, ssrContext }) {
+      const { app, router, store, i18n, meta, moduleRegistry } = await createApp();
+      
+      // ВАЖНО: Очищаем состояние moduleRegistry на сервере перед каждым запросом
+      // чтобы избежать загрязнения между запросами
+      if (typeof window === 'undefined') {
+        moduleRegistry.initialized.clear();
+        moduleRegistry.modules.clear();
+        moduleRegistry.loadingPromises.clear();
+        
+        // На сервере загружаем auth для SSR рендеринга (vue-app-renderer требует его)
+        const context = { app, store, router, config };
+        await moduleRegistry.load('auth', context);
+        await moduleRegistry.initialize('auth', context);
+      }
+      
+      const context = {
+        app,
+        store,
+        router,
+        config,
+        ssr: true,
+      };
+      
+      // Для SSR загружаем модули для текущего маршрута
+      const requiredModules = moduleRegistry.getModulesForRoute(url);
+      
+      // Собираем имена модулей которые нужны для текущего роута
+      const currentRouteModules = [];
+      
+      // Загружаем необходимые модули для SSR
+      for (const module of requiredModules) {
+        await moduleRegistry.load(module.name, context);
+        await moduleRegistry.initialize(module.name, context);
+        currentRouteModules.push(module.name);
+      }
+      
+      // После загрузки модулей и регистрации роутов, выполняем навигацию
+      await router.push(url);
+      await router.isReady();
+      
+      const result = await appRenderer.render({
+        url,
+        cookies,
+        createApp: () => ({ app, router, store, i18n, meta }),
+        ssrContext
+      });
+      
+      if (ssrContext?.modules) {
+        result.usedModules = Array.from(ssrContext.modules);
+      }
+      
+      // Передаем только модули текущего роута + критические модули
+      const criticalModules = ['globals', 'auth', 'organizations', 'backoffice'];
+      const allModulesForRoute = [...new Set([...criticalModules, ...currentRouteModules])];
+      
+      result.loadedModules = allModulesForRoute;
+      
+      return result;
+    }
+    
+    // FOR SPA
+    if (typeof window !== 'undefined' && process.env.MOBILE_APP) {
+      createApp();
+    }
+    
+    // FOR SSR / CLIENT ENTRY
+    if (typeof window !== 'undefined' && !process.env.MOBILE_APP) {
+      createApp().then(({ app, router, store, moduleRegistry }) => {
+        // Ждем когда роутер будет готов
+        router.isReady().then(() => {
+          // Хук ДО гидратации
+          if (hooks.beforeHydration) {
+            hooks.beforeHydration({ app, router, store, moduleRegistry });
+          }
+          
+          app.mount('#app');
+          
+          // Хук ПОСЛЕ гидратации
+          if (hooks.afterHydration) {
+            hooks.afterHydration({ app, router, store, moduleRegistry });
+          }
+          
+          // Создаем context для загрузки модулей
+          const context = { app, store, router, config };
+          
+          // Загружаем auth модуль сразу - он критичен
+          moduleRegistry.load('auth', context).then(() => {
+            // Загружаем важные модули в следующем тике
+            setTimeout(async () => {
+              try {
+                await Promise.all([
+                  moduleRegistry.load('organizations', context),
+                  moduleRegistry.load('backoffice', context),
+                ]);
+              } catch (error) {
+                console.error('Error loading core modules:', error);
+              }
+            }, 0);
+            
+            // Загружаем некритичные модули когда браузер idle
+            requestIdleCallback(async () => {
+              try {
+                await moduleRegistry.load('notifications', context);
+                // Маркер для тестов
+                if (typeof window !== 'undefined') {
+                  window.performance.mark('client-ready');
+                }
+              } catch (error) {
+                console.error('Error loading non-critical modules:', error);
+              }
+            });
+          }).catch(error => {
+            console.error('Error loading auth module:', error);
+          });
+        });
+      }).catch(error => {
+        console.error('Hydration failed:', error);
+      });
+    }
+    
+    return { createApp, renderApp };
+  }
+  
+  // Возвращаем промис, который резолвится с функциями
+  return initializeApp();
+}

package/src/modules/globals/views/classes/module-registry.js

@@ -0,0 +1,241 @@
+// module-registry.js - централизованный регистр модулей
+import { ref, readonly } from 'vue';
+
+export class ModuleRegistry {
+  constructor() {
+    this.modules = new Map();
+    this.loaders = new Map();
+    this.initialized = new Map();
+    this.dependencies = new Map();
+    this.loadingPromises = new Map(); // Для предотвращения дублирования загрузки
+  }
+
+  // Регистрация модуля с ленивой загрузкой
+  register(name, config) {
+    this.loaders.set(name, {
+      loader: config.loader,
+      routes: config.routes || [],
+      dependencies: config.dependencies || [],
+      priority: config.priority || 'normal',
+      preload: config.preload || false,
+      critical: config.critical || false,
+    });
+  }
+
+  // Загрузка модуля
+  async load(name, context = {}) {
+    // Если модуль уже загружен
+    if (this.modules.has(name)) {
+      return this.modules.get(name);
+    }
+
+    // Если модуль уже загружается, вернуть существующий промис
+    if (this.loadingPromises.has(name)) {
+      return this.loadingPromises.get(name);
+    }
+
+    const config = this.loaders.get(name);
+    if (!config) {
+      throw new Error(`Module ${name} not registered`);
+    }
+
+    // Создаем промис загрузки и сохраняем его
+    const loadPromise = this._loadModule(name, context, config);
+    this.loadingPromises.set(name, loadPromise);
+
+    try {
+      const module = await loadPromise;
+      this.loadingPromises.delete(name);
+      return module;
+    } catch (error) {
+      this.loadingPromises.delete(name);
+      throw error;
+    }
+  }
+
+  // Внутренний метод для загрузки модуля
+  async _loadModule(name, context, config) {
+    const loadStart = Date.now();
+
+    // Загружаем зависимости
+    if (config.dependencies.length > 0) {
+      await Promise.all(
+        config.dependencies.map(dep => this.load(dep, context))
+      );
+    }
+
+    // Загружаем сам модуль
+    const module = await config.loader();
+    
+    const mod = module.default || module;
+    
+    this.modules.set(name, mod);
+    
+    // Инициализируем если есть контекст
+    if (context.app && !this.initialized.has(name)) {
+      await this.initialize(name, context);
+    }
+
+    return mod;
+  }
+
+  // Инициализация модуля
+  async initialize(name, { app, store, router, config }) {
+    const module = this.modules.get(name);
+    if (!module || this.initialized.has(name)) {
+      return;
+    }
+
+    // Инициализируем зависимости
+    const moduleConfig = this.loaders.get(name);
+    if (moduleConfig.dependencies.length > 0) {
+      for (const dep of moduleConfig.dependencies) {
+        await this.initialize(dep, { app, store, router, config });
+      }
+    }
+
+    // Инициализируем модуль
+    // Поддерживаем оба варианта: module.initialize и module.default.initialize для обратной совместимости
+    const initFunc = module.initialize || (module.default && module.default.initialize);
+    if (initFunc) {
+      await initFunc(app, store, router, config);
+    }
+    
+    this.initialized.set(name, true);
+  }
+
+  // Получить модули для маршрута
+  getModulesForRoute(path) {
+    const modules = [];
+    
+    // Нормализуем путь - убираем trailing slash если это не корень
+    const normalizedPath = path === '/' ? '/' : path.replace(/\/$/, '');
+    
+    for (const [name, config] of this.loaders) {
+      if (config.routes.some(route => {
+        if (typeof route === 'string') {
+          // Для корневого роута проверяем точное совпадение
+          if (route === '/') {
+            return normalizedPath === '/';
+          }
+          // Для остальных роутов проверяем начало пути
+          // но учитываем границы сегментов (не /events должен матчить /event)
+          const normalizedRoute = route.replace(/\/$/, '');
+          return normalizedPath === normalizedRoute || 
+                 normalizedPath.startsWith(normalizedRoute + '/');
+        }
+        if (route instanceof RegExp) {
+          return route.test(normalizedPath);
+        }
+        return false;
+      })) {
+        modules.push({ name, ...config });
+      }
+    }
+
+    // Сортируем по приоритету
+    return modules.sort((a, b) => {
+      const priorities = { critical: 0, high: 1, normal: 2, low: 3 };
+      return (priorities[a.priority] || 2) - (priorities[b.priority] || 2);
+    });
+  }
+  
+  // Получить критические модули для маршрута (для SSR)
+  getCriticalModulesForRoute(path) {
+    const allModules = this.getModulesForRoute(path);
+    
+    // Фильтруем только критические модули и модули с высоким приоритетом
+    const criticalModules = allModules.filter(m => 
+      m.critical || m.priority === 'critical' || m.priority === 'high'
+    );
+    
+    // Добавляем базовые модули, которые всегда критические
+    const baseModules = ['globals', 'auth'];
+    const moduleNames = new Set([...baseModules, ...criticalModules.map(m => m.name)]);
+    
+    // Добавляем зависимости критических модулей
+    for (const moduleName of moduleNames) {
+      const config = this.loaders.get(moduleName);
+      if (config && config.dependencies) {
+        for (const dep of config.dependencies) {
+          moduleNames.add(dep);
+        }
+      }
+    }
+    
+    return Array.from(moduleNames);
+  }
+
+  // Предзагрузка модулей
+  async preloadModules(context) {
+    const toPreload = [];
+    
+    for (const [name, config] of this.loaders) {
+      if (config.preload || config.critical) {
+        toPreload.push({ name, ...config });
+      }
+    }
+
+    // Сортируем по приоритету
+    toPreload.sort((a, b) => {
+      if (a.critical && !b.critical) return -1;
+      if (!a.critical && b.critical) return 1;
+      const priorities = { critical: 0, high: 1, normal: 2, low: 3 };
+      return (priorities[a.priority] || 2) - (priorities[b.priority] || 2);
+    });
+
+    // Загружаем критические синхронно
+    const critical = toPreload.filter(m => m.critical);
+    for (const module of critical) {
+      await this.load(module.name, context);
+    }
+
+    // Остальные в фоне
+    const normal = toPreload.filter(m => !m.critical);
+    if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
+      window.requestIdleCallback(() => {
+        normal.forEach(module => this.load(module.name, context));
+      });
+    } else {
+      setTimeout(() => {
+        normal.forEach(module => this.load(module.name, context));
+      }, 100);
+    }
+  }
+
+}
+
+// Создаем глобальный регистр
+export const moduleRegistry = new ModuleRegistry();
+
+// Утилита для использования в компонентах
+export async function useModule(name) {
+  return moduleRegistry.load(name);
+}
+
+// Composable для Vue
+export function useModuleLoader() {
+  const loading = ref(false);
+  const error = ref(null);
+
+  const loadModule = async (name) => {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      const module = await moduleRegistry.load(name);
+      return module;
+    } catch (e) {
+      error.value = e;
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    loadModule,
+    loading: readonly(loading),
+    error: readonly(error),
+  };
+}