@ozdao/martyrs 0.2.550 → 0.2.552

package/src/modules/core/views/store/core.store.js

@@ -1,173 +1,50 @@
 // Vue modules
 import { Preferences } from '@capacitor/preferences';
 import { isReactive, reactive } from 'vue';
-import Session from '../classes/session.js';
 
-// ============================================================================
-// CORE MODULE STATE
-// ============================================================================
-
-// State
-const state = reactive({
-  loading: false,
-
-  isOpenLocationPopup: false,
-  isOpenSidebar: false,
-
-  position: null,
-  search: null,
-
-  theme: {
-    darkmode: false,
-  },
-
-  navigation_bar: {
-    name: null,
-    actions: null,
-  },
-
-  error: {
-    status: '',
-    headers: '',
-    data: '',
-    show: false,
-    name: '',
-    message: '',
-  },
-  snack: {
-    show: false,
-    type: 'notification',
-    message: '',
-    duration: 3000
-  },
-
-  // Session state - данные сессии хранятся здесь
-  session: {
-    token: null,
-    userId: null,
-    roles: null,
-    accesses: []
-  },
-});
-
-// Session class instance - управляет state.session
-const session = new Session(state.session);
-
-// Actions
-const actions = {
-  setLoading(status) {
-    state.loading = status;
-  },
-
-  // Black/White Theme
-  async setTheme(isDarkMode) {
-    // Cache root element
-    if (!state.theme.rootElement) {
-      state.theme.rootElement = document.documentElement;
-    }
-    const root = state.theme.rootElement;
-
-    state.theme.darkmode = isDarkMode;
-
-    await Preferences.set({
-      key: 'darkmode',
-      value: JSON.stringify(state.theme.darkmode),
-    });
-
-    if (isDarkMode) {
-      root.classList.add('dark-theme');
-    } else {
-      root.classList.remove('dark-theme');
-    }
+import SessionManager from '../classes/session.manager.js';
 
-    const variableNames = ['--white', '--light', '--grey', '--dark', '--black'];
+// AsyncLocalStorage для изоляции SSR store per-request (только Node.js)
+let asyncLocalStorage = null;
 
-    // Проверяем, сохранены ли оригинальные цвета
-    if (!state.theme.originalColors) {
-      // Сохраняем оригинальные цвета один раз
-      state.theme.originalColors = {};
-      const computedStyle = getComputedStyle(root);
-      variableNames.forEach(variableName => {
-        state.theme.originalColors[variableName] = computedStyle.getPropertyValue(variableName).trim();
-      });
-    }
-
-    if (isDarkMode) {
-      invertColors(variableNames, state.theme.originalColors);
-    } else {
-      // Восстанавливаем оригинальные цвета батчем
-      variableNames.forEach(variableName => {
-        root.style.setProperty(variableName, state.theme.originalColors[variableName]);
-      });
-    }
-  },
+if (typeof window === 'undefined') {
+  // Top-level await для динамического импорта на сервере
+  const { AsyncLocalStorage } = await import('async_hooks');
+  asyncLocalStorage = new AsyncLocalStorage();
+}
 
-  toggleTheme() {
-    this.setTheme(!state.theme.darkmode);
-  },
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
 
-  add(array, item) {
-    const existingItemIndex = array.findIndex(i => i._id === item._id);
+function invertColors(variableNames, originalColors, isDarkMode) {
+  variableNames.forEach(variableName => {
+    const baseColor = originalColors[variableName];
+    const colorArray = baseColor.split(',').map(Number);
 
-    if (existingItemIndex === -1) {
-      array.push(item);
-    } else {
-      array[existingItemIndex] = item;
-    }
-  },
+    let invertedColor;
 
-  update(array, item) {
-    const existingItemIndex = array.findIndex(i => i._id === item._id);
-    if (existingItemIndex === -1) {
-      // If the item doesn't exist, push it to the array
-      array.push(item);
+    if (variableName === '--white') {
+      invertedColor = colorArray.map(value => 255 - value / 1.075);
+    } else if (variableName === '--black') {
+      invertedColor = colorArray.map(value => 255 - value);
+    } else if (variableName === '--grey') {
+      invertedColor = colorArray.map(value => 255 - value * 2);
     } else {
-      // Update the item in the array without creating a new array
-      Object.assign(array[existingItemIndex], item);
-    }
-  },
-
-  delete(array, item) {
-    const existingItemIndex = array.findIndex(c => c._id === item._id);
-
-    if (existingItemIndex !== -1) {
-      array.splice(existingItemIndex, 1);
-    }
-  },
-
-  increment(array, item) {
-    console.log(array);
-    console.log(item);
-    const arrayItem = array.find(i => i._id === item._id);
-
-    if (arrayItem) {
-      arrayItem.quantity++;
-    }
-  },
-
-  decrement(array, item) {
-    const arrayItem = array.find(i => i._id === item._id);
-
-    const arrayItemIndex = array.indexOf(arrayItem);
-
-    if (arrayItemIndex > -1) {
-      arrayItem.quantity--;
-
-      if (arrayItem.quantity < 1) array.splice(arrayItemIndex, 1);
+      invertedColor = colorArray.map(value => 255 - value / 1.075);
     }
-  },
-
-  reset(array) {
-    array = [];
-  },
-};
+    // Устанавливаем новые значения переменных CSS
+    document.documentElement.style.setProperty(variableName, isDarkMode ? invertedColor.join(', ') : baseColor);
+  });
+}
 
 // ============================================================================
-// GLOBAL FUNCTIONS
+// GLOBAL FUNCTIONS (используют useStore() для доступа к state)
 // ============================================================================
 
 // Mutations
-function setError(error) {
+export function setError(error) {
+  const state = useStore().core.state;
   state.error.show = true;
   let errorData;
 
@@ -210,7 +87,9 @@ function setError(error) {
   }
 }
 
-function setSnack(data) {
+export function setSnack(data) {
+  const state = useStore().core.state;
+
   // Handle different input formats
   let type = 'notification'
   let message = ''
@@ -248,28 +127,6 @@ function setSnack(data) {
   } else {
     setTimeout(() => {state.snack.show = false }, duration)
   }
-
-}
-
-function invertColors(variableNames, originalColors) {
-  variableNames.forEach(variableName => {
-    const baseColor = originalColors[variableName];
-    const colorArray = baseColor.split(',').map(Number);
-
-    let invertedColor;
-
-    if (variableName === '--white') {
-      invertedColor = colorArray.map(value => 255 - value / 1.075);
-    } else if (variableName === '--black') {
-      invertedColor = colorArray.map(value => 255 - value);
-    } else if (variableName === '--grey') {
-      invertedColor = colorArray.map(value => 255 - value * 2);
-    } else {
-      invertedColor = colorArray.map(value => 255 - value / 1.075);
-    }
-    // Устанавливаем новые значения переменных CSS
-    document.documentElement.style.setProperty(variableName, state.theme.darkmode ? invertedColor.join(', ') : baseColor);
-  });
 }
 
 // ============================================================================
@@ -278,11 +135,166 @@ function invertColors(variableNames, originalColors) {
 
 // Фабрика для создания store
 export function createStore() {
+  // State создается для каждого store instance (изоляция SSR)
+  const state = reactive({
+    loading: false,
+
+    isOpenLocationPopup: false,
+    isOpenSidebar: false,
+
+    position: null,
+    search: null,
+
+    theme: {
+      darkmode: false,
+    },
+
+    navigation_bar: {
+      name: null,
+      actions: null,
+    },
+
+    error: {
+      status: '',
+      headers: '',
+      data: '',
+      show: false,
+      name: '',
+      message: '',
+    },
+    snack: {
+      show: false,
+      type: 'notification',
+      message: '',
+      duration: 3000
+    },
+
+    // Session state - данные сессии хранятся здесь
+    session: {
+      token: null,
+      userId: null,
+      roles: null,
+      accesses: []
+    },
+  });
+
+  // Actions с closure на локальный state
+  const actions = {
+    setLoading(status) {
+      state.loading = status;
+    },
+
+    // Black/White Theme
+    async setTheme(isDarkMode) {
+      // Cache root element
+      if (!state.theme.rootElement) {
+        state.theme.rootElement = document.documentElement;
+      }
+      const root = state.theme.rootElement;
+
+      state.theme.darkmode = isDarkMode;
+
+      await Preferences.set({
+        key: 'darkmode',
+        value: JSON.stringify(state.theme.darkmode),
+      });
+
+      if (isDarkMode) {
+        root.classList.add('dark-theme');
+      } else {
+        root.classList.remove('dark-theme');
+      }
+
+      const variableNames = ['--white', '--light', '--grey', '--dark', '--black'];
+
+      // Проверяем, сохранены ли оригинальные цвета
+      if (!state.theme.originalColors) {
+        // Сохраняем оригинальные цвета один раз
+        state.theme.originalColors = {};
+        const computedStyle = getComputedStyle(root);
+        variableNames.forEach(variableName => {
+          state.theme.originalColors[variableName] = computedStyle.getPropertyValue(variableName).trim();
+        });
+      }
+
+      if (isDarkMode) {
+        invertColors(variableNames, state.theme.originalColors, isDarkMode);
+      } else {
+        // Восстанавливаем оригинальные цвета батчем
+        variableNames.forEach(variableName => {
+          root.style.setProperty(variableName, state.theme.originalColors[variableName]);
+        });
+      }
+    },
+
+    toggleTheme() {
+      this.setTheme(!state.theme.darkmode);
+    },
+
+    add(array, item) {
+      const existingItemIndex = array.findIndex(i => i._id === item._id);
+
+      if (existingItemIndex === -1) {
+        array.push(item);
+      } else {
+        array[existingItemIndex] = item;
+      }
+    },
+
+    update(array, item) {
+      const existingItemIndex = array.findIndex(i => i._id === item._id);
+      if (existingItemIndex === -1) {
+        // If the item doesn't exist, push it to the array
+        array.push(item);
+      } else {
+        // Update the item in the array without creating a new array
+        Object.assign(array[existingItemIndex], item);
+      }
+    },
+
+    delete(array, item) {
+      const existingItemIndex = array.findIndex(c => c._id === item._id);
+
+      if (existingItemIndex !== -1) {
+        array.splice(existingItemIndex, 1);
+      }
+    },
+
+    increment(array, item) {
+      console.log(array);
+      console.log(item);
+      const arrayItem = array.find(i => i._id === item._id);
+
+      if (arrayItem) {
+        arrayItem.quantity++;
+      }
+    },
+
+    decrement(array, item) {
+      const arrayItem = array.find(i => i._id === item._id);
+
+      const arrayItemIndex = array.indexOf(arrayItem);
+
+      if (arrayItemIndex > -1) {
+        arrayItem.quantity--;
+
+        if (arrayItem.quantity < 1) array.splice(arrayItemIndex, 1);
+      }
+    },
+
+    reset(array) {
+      array = [];
+    },
+  };
+
+  // SessionManager создается внутри createStore для правильной изоляции в SSR
+  const sessionManager = new SessionManager(state.session);
+
   const store = reactive({
     modules: [],
 
     // Core module registered by default
-    core: { state, actions },
+    core: { state, actions, session: sessionManager },
 
     addStore(name, storage) {
       this[name] = storage;
@@ -346,21 +358,28 @@ export function createStore() {
 // Синглтон для клиента
 let clientStore = null;
 
-// Store для SSR должен создаваться в createApp и передаваться сюда
-let ssrStore = null;
-
+// AsyncLocalStorage для SSR (изоляция per-request)
 export function setSSRStore(store) {
-  ssrStore = store;
+  if (typeof window === 'undefined') {
+    asyncLocalStorage.enterWith(store);
+  }
+}
+
+export function clearSSRStore() {
+  if (typeof window === 'undefined') {
+    asyncLocalStorage.enterWith(null);
+  }
 }
 
 export function useStore() {
   if (typeof window === 'undefined') {
-    // SSR: используем переданный store
-    if (ssrStore) {
-      return ssrStore;
+    // SSR: используем store из AsyncLocalStorage
+    const store = asyncLocalStorage.getStore();
+    if (store) {
+      return store;
     }
     // Fallback для обратной совместимости
-    console.warn('[WARN] SSR store not set, creating new store instance');
+    console.warn('[WARN] SSR store not in AsyncLocalStorage, creating new store instance');
     return createStore();
   }
   // Client: синглтон
@@ -370,9 +389,22 @@ export function useStore() {
   return clientStore;
 }
 
+// ============================================================================
+// SESSION ACCESSOR
+// ============================================================================
+
+/**
+ * Получить текущий экземпляр SessionManager
+ * Использовать вместо прямого импорта session для правильной работы с SSR
+ */
+export function useSession() {
+  const store = useStore();
+  return store.core.session;
+}
+
 // ============================================================================
 // EXPORTS
 // ============================================================================
 
-export { actions, session, setError, setSnack, state };
+// Не экспортируем singleton state/actions - теперь используется useStore()
 export default useStore();

package/src/modules/core/views/utils/vue-app-renderer.js

@@ -4,7 +4,11 @@ import { renderToString } from '@vue/server-renderer';
 
 export function renderAndMountApp({ createApp, hooks = {} }) {
   const start = async () => {
-    const { app, router, store, moduleRegistry, config } = await createApp();
+    // [LOADING 22] Starting client-side hydration
+    performance.mark('loading-22-start');
+    console.log('[LOADING 22] Starting client-side hydration...');
+
+    const { app, router, store, moduleManager, config } = await createApp();
     
     let serverModules = [];
     
@@ -20,21 +24,35 @@ export function renderAndMountApp({ createApp, hooks = {} }) {
       }
       
       const context = { app, store, router, config };
+
+      // [LOADING 23] Loading server modules for hydration
+      performance.mark('loading-23-start');
+      console.log(`[LOADING 23] Loading ${serverModules.length} server modules for hydration...`);
+
       for (const moduleName of serverModules) {
         try {
-          await moduleRegistry.load(moduleName, context);
-          await moduleRegistry.initialize(moduleName, context);
+          await moduleManager.load(moduleName, context);
+          await moduleManager.initialize(moduleName, context);
         } catch (error) {
           console.error(`Failed to load module ${moduleName}:`, error);
         }
       }
+
+      performance.mark('loading-23-end');
+      performance.measure('loading-23', 'loading-23-start', 'loading-23-end');
+      const measure23 = performance.getEntriesByName('loading-23')[0];
+      console.log(`[LOADING 23] Server modules loaded in ${measure23?.duration?.toFixed(2)}ms`);
     }
     
     // Call beforeHydration hook if provided
     if (hooks.beforeHydration) {
-      hooks.beforeHydration({ app, router, store, moduleRegistry });
+      hooks.beforeHydration({ app, router, store, moduleManager });
     }
 
+    // [LOADING 24] Parsing and applying initialState
+    performance.mark('loading-24-start');
+    console.log('[LOADING 24] Parsing and applying initialState...');
+
     let initialState;
 
     try {
@@ -62,11 +80,22 @@ export function renderAndMountApp({ createApp, hooks = {} }) {
 
 
     if (initialState) {
+      console.log('[AUTH COOKIE DEBUG] Browser initialState.auth:', initialState.auth);
+      console.log('[AUTH COOKIE DEBUG] Has token?', !!initialState?.auth?.access?.token);
+      console.log('[AUTH COOKIE DEBUG] Has auth but no status?', !!initialState?.auth && !initialState.auth.access?.status);
+
       // Применяем начальное состояние ко всем модулям (true = гидратация)
       store.setInitialState(initialState, true);
-      
+
       if (initialState?.auth?.access?.token) {
+        console.log('[AUTH COOKIE DEBUG] Setting auth token from initialState');
         setAuthToken(initialState.auth.access.token);
+      } else if (initialState?.auth && !initialState.auth.access?.status) {
+        // Если SSR сбросил auth (из-за ошибки), удаляем куку в браузере
+        console.log('[AUTH COOKIE DEBUG] SSR reset auth, removing cookie in browser');
+        if (store.auth && store.auth.removeCookie) {
+          await store.auth.removeCookie('user');
+        }
       }
     } else {
       // Если нет initialState, сбрасываем авторизацию (если модуль auth загружен)
@@ -84,17 +113,35 @@ export function renderAndMountApp({ createApp, hooks = {} }) {
     //   app.config.globalProperties.$i18n.locale = browserLocale;
     // }
 
+    performance.mark('loading-24-end');
+    performance.measure('loading-24', 'loading-24-start', 'loading-24-end');
+    const measure24 = performance.getEntriesByName('loading-24')[0];
+    console.log(`[LOADING 24] InitialState parsed and applied in ${measure24?.duration?.toFixed(2)}ms`);
+
     await router.isReady();
-    
+
+    // [LOADING 25] Mounting the application
+    performance.mark('loading-25-start');
+    console.log('[LOADING 25] Mounting the application...');
+
     app.mount('#app');
-    
+
+    performance.mark('loading-25-end');
+    performance.measure('loading-25', 'loading-25-start', 'loading-25-end');
+    const measure25 = performance.getEntriesByName('loading-25')[0];
+    console.log(`[LOADING 25] Application mounted in ${measure25?.duration?.toFixed(2)}ms`);
+
     // Return the objects for further use
-    return { app, router, store, moduleRegistry };
+    return { app, router, store, moduleManager };
   };
   return start();
 }
 
 export async function render({ url, cookies,  ssrContext, createApp}) {
+  // [LOADING 26] SSR render starting
+  performance.mark('loading-26-start');
+  console.log('[LOADING 26] SSR render starting...');
+
   const { app, router, store, meta } = createApp();
 
   await router.push(url);
@@ -125,11 +172,28 @@ export async function render({ url, cookies,  ssrContext, createApp}) {
   }
 
   if (user) {
+    // [LOADING 27] SSR auth initialization
+    performance.mark('loading-27-start');
+    console.log('[LOADING 27] SSR auth initialization...');
+
     if (store.auth && store.auth.actions) {
-      await store.auth.actions.initialize(user);
+      try {
+        await store.auth.actions.initialize(user);
+      } catch (error) {
+        console.error('[SSR] Auth initialization failed, continuing without auth:', error);
+        // Сбрасываем состояние если инициализация упала
+        if (store.auth.actions.resetState) {
+          store.auth.actions.resetState();
+        }
+      }
     } else {
       console.warn('[SSR] Auth module not loaded, cannot initialize user');
     }
+
+    performance.mark('loading-27-end');
+    performance.measure('loading-27', 'loading-27-start', 'loading-27-end');
+    const measure27 = performance.getEntriesByName('loading-27')[0];
+    console.log(`[LOADING 27] SSR auth initialized in ${measure27?.duration?.toFixed(2)}ms`);
   } else {
     if (store.auth && store.auth.actions) {
       store.auth.actions.resetState();
@@ -138,11 +202,25 @@ export async function render({ url, cookies,  ssrContext, createApp}) {
     }
   }
 
+  // [LOADING 28] SSR renderToString
+  performance.mark('loading-28-start');
+  console.log('[LOADING 28] SSR renderToString starting...');
+
   // After render, ctx.modules will be populated with used module identifiers
   const html = await renderToString(app, ctx);
   const payload = await renderSSRHead(meta, {});
   const initialState = await store.getInitialState();
 
+  performance.mark('loading-28-end');
+  performance.measure('loading-28', 'loading-28-start', 'loading-28-end');
+  const measure28 = performance.getEntriesByName('loading-28')[0];
+  console.log(`[LOADING 28] SSR renderToString completed in ${measure28?.duration?.toFixed(2)}ms`);
+
+  // Total SSR render time
+  performance.measure('loading-26-total', 'loading-26-start', 'loading-28-end');
+  const measure26Total = performance.getEntriesByName('loading-26-total')[0];
+  console.log(`[LOADING 26] Total SSR render completed in ${measure26Total?.duration?.toFixed(2)}ms`);
+
   return {
     html,
     meta: payload,

package/src/modules/events/components/pages/EditEventTickets.vue

@@ -54,7 +54,7 @@
       </div>
 
       <!-- Timeline Graph -->
-      <div v-if="attendance.timeline && attendance.timeline.length" class="flex-nowrap flex flex-justify-around gap-micro o-y-hidden o-x-scroll mn-t-big">
+      <div v-if="attendance.timeline && attendance.timeline.length" class="flex-nowrap flex flex-justify-around gap-micro scroll-hide o-y-hidden o-x-scroll mn-t-big">
         <div
           v-for="slot in attendance.timeline"
           :key="slot.time"
@@ -195,7 +195,7 @@
           <section class="bg-black flex-column flex gap-thin pd-thin radius-small">
             <button
               @click="sendTicketEmail(ticket._id)"
-              class="w-100 bg-black br-solid br-1px br-white-transp-20 t-white button-small button"
+              class="w-100 t-nowrap bg-black br-solid br-1px br-white-transp-20 t-white button-small button"
             >
               Send Email
             </button>

package/src/modules/gallery/store/gallery.js

@@ -1,5 +1,5 @@
-import Store from '@martyrs/src/modules/core/views/classes/core.store.js';
+import StoreManager from '@martyrs/src/modules/core/views/classes/store.manager.js';
 
-const gallery = new Store(`${process.env.API_URL}/api/gallery`);
+const gallery = new StoreManager(`${process.env.API_URL}/api/gallery`);
 
 export default gallery;

package/src/modules/governance/views/components/pages/VotingCreate.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-import { votingsActions } from '../../store/votings';
+import { votesActions } from '../../store/votings';
 import FormVotingDetails from '../sections/FormVotingDetails.vue';
 
 const newVoting = ref({
@@ -11,7 +11,7 @@ const newVoting = ref({
 });
 
 const createVoting = async () => {
-  await votingsActions.createVoting(newVoting.value);
+  await votesActions.createVoting(newVoting.value);
   // Redirect or show success message
 };
 </script>