@ozdao/martyrs 0.2.526 → 0.2.528

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

@@ -1,62 +1,82 @@
 import { isReactive, reactive } from 'vue';
 
-class Store {
-  constructor() {
-    if (!Store.instance) {
-      this.store = reactive({
-        modules: [], // Инициализация пустого объекта для модулей
-        addStore: this.addStore.bind(this), // Привязка контекста
-        getInitialState: this.getInitialState.bind(this), // Метод получения начального состояния
-        setInitialState: this.setInitialState.bind(this), // Метод установки начального состояния
-      });
-
-      Store.instance = this;
-    }
-    return Store.instance;
-  }
-
-  addStore(name, storage) {
-    this.store[name] = storage;
-    this.store.modules.push(name);
-  }
-
-  async getInitialState() {
-    const initialState = {};
-    for (const [moduleName, moduleStore] of Object.entries(this.store)) {
-      if (moduleName !== 'modules' && moduleName !== 'addStore' && moduleName !== 'getInitialState' && moduleName !== 'setInitialState') {
-        if (moduleStore.state) {
-          initialState[moduleName] = JSON.parse(JSON.stringify(moduleStore.state));
+// Фабрика для создания store
+export function createStore() {
+  const store = reactive({
+    modules: [],
+    addStore(name, storage) {
+      this[name] = storage;
+      this.modules.push(name);
+    },
+    async getInitialState() {
+      const initialState = {};
+      for (const [moduleName, moduleStore] of Object.entries(this)) {
+        if (moduleName !== 'modules' && moduleName !== 'addStore' && moduleName !== 'getInitialState' && moduleName !== 'setInitialState') {
+          if (moduleStore.state) {
+            initialState[moduleName] = JSON.parse(JSON.stringify(moduleStore.state));
+          }
         }
       }
-    }
-    return initialState;
-  }
-
-  async setInitialState(initialState) {
-    for (const [moduleName, moduleState] of Object.entries(initialState)) {
-      if (this.store[moduleName] && this.store[moduleName].state) {
-        this.mergeReactive(this.store[moduleName].state, moduleState);
+      return initialState;
+    },
+    async setInitialState(initialState, isHydration = false) {
+      console.time('[PERF] Store.setInitialState');
+      const modules = Object.entries(initialState);
+      console.log(`[PERF] Setting initial state for ${modules.length} modules (hydration: ${isHydration})`);
+      
+      for (const [moduleName, moduleState] of modules) {
+        if (this[moduleName] && this[moduleName].state) {
+          console.time(`[PERF] Merge state: ${moduleName}`);
+          
+          // При гидратации просто заменяем state целиком для скорости
+          if (isHydration) {
+            Object.assign(this[moduleName].state, moduleState);
+          } else {
+            mergeReactive(this[moduleName].state, moduleState);
+          }
+          
+          console.timeEnd(`[PERF] Merge state: ${moduleName}`);
+        }
       }
+      console.timeEnd('[PERF] Store.setInitialState');
     }
-  }
+  });
 
-  mergeReactive(target, source) {
-    for (const key in source) {
-      if (isReactive(target[key]) && typeof source[key] === 'object') {
-        this.mergeReactive(target[key], source[key]);
+  function mergeReactive(target, source) {
+    // Оптимизированная версия слияния
+    const keys = Object.keys(source);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const sourceValue = source[key];
+      
+      if (sourceValue !== null && typeof sourceValue === 'object' && !Array.isArray(sourceValue)) {
+        if (isReactive(target[key])) {
+          mergeReactive(target[key], sourceValue);
+        } else {
+          target[key] = sourceValue;
+        }
       } else {
-        target[key] = source[key];
+        target[key] = sourceValue;
       }
     }
   }
-}
 
-const instance = new Store();
+  return store;
+}
 
-Object.freeze(instance);
+// Синглтон для клиента
+let clientStore = null;
 
 export function useStore() {
-  return instance.store;
+  if (typeof window === 'undefined') {
+    // SSR: новый store каждый раз
+    return createStore();
+  }
+  // Client: синглтон
+  if (!clientStore) {
+    clientStore = createStore();
+  }
+  return clientStore;
 }
 
-export default instance.store;
+export default useStore();

package/src/modules/globals/views/components/layouts/Client.vue

@@ -9,7 +9,7 @@
   	}"
 	>
 		<transition name="moveFromTop" appear>
-			<Loader v-if="!page || isPageLoading" class="pos-fixed"/>
+			<Loader v-if="!page || globals.state.loading" class="pos-fixed"/>
 		</transition>
 
 
@@ -160,7 +160,7 @@
 			    />
 			  	<transition @before-enter="scrollTop" name="scaleTransition" mode="out-in" appear>
 		        <component
-							v-if="!MOBILE_APP && route.meta.footer && !route.meta.hideFooter && page && !isPageLoading"
+							v-if="!MOBILE_APP && route.meta.footer && !route.meta.hideFooter && page && !globals.state.loading"
 				      ref="footer" 
 				      :is="route.meta.footer"
 				      :theme="headerTheme"
@@ -236,15 +236,15 @@
   const page = ref(null)
    const scrollview = ref(null)
 
-  const isPageLoading = ref(true);
+  // isPageLoading убран - используем globals.state.loading
   
   // Обработчики событий загрузки
   function handlePageLoading() {
-    isPageLoading.value = true;
+    globals.state.loading = true;
   }
   
   function handlePageLoaded() {
-    isPageLoading.value = false;
+    globals.state.loading = false;
   }
   
   // Обработка события разрешения Suspense (когда async setup компонента завершается)
@@ -252,7 +252,7 @@
     // Если страница не отправляет событие page-loaded, этот обработчик 
     // может служить запасным вариантом для отключения лоадера
     // Можно оставить закомментированным, если все страницы будут явно вызывать handlePageLoaded
-    isPageLoading.value = false;
+    globals.state.loading = false;
   }
 	/////////////////////////////
 	// CREATED

package/src/modules/globals/views/components/sections/Walkthrough.vue

@@ -249,57 +249,60 @@
 	  selectedIndex.value = emblaApi.value.selectedScrollSnap();
 	};
 
+	let scrollRAF = null;
 	const onScroll = (embla) => {
-    const engine = emblaApi.value.internalEngine()
-    const scrollProgress = emblaApi.value.scrollProgress()
-
-    const stylesOpacity = emblaApi.value.scrollSnapList().map((scrollSnap, index) => {
-	    let diffToTarget = scrollSnap - scrollProgress
-
-	    if (engine.options.loop) {
-	      engine.slideLooper.loopPoints.forEach((loopItem) => {
-	        const target = loopItem.target()
-	        if (index === loopItem.index && target !== 0) {
-	          const sign = Math.sign(target)
-	          if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)
-	          if (sign === 1) diffToTarget = scrollSnap + (1 - scrollProgress)
-	        }
-	      })
-	    }
-	    const tweenValue = 1 - Math.abs(diffToTarget * TWEEN_FACTOR)
-	    return  Math.min(Math.max(tweenValue, 0), 1)
-	  })
-
-		tweenSlides.value = stylesOpacity
-
-    const styles = emblaApi.value.scrollSnapList().map((scrollSnap, index) => {
-      let diffToTarget = scrollSnap - scrollProgress
-
-      if (engine.options.loop) {
-        engine.slideLooper.loopPoints.forEach((loopItem) => {
-          const target = loopItem.target()
-          if (index === loopItem.index && target !== 0) {
-            const sign = Math.sign(target)
-            if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)
-            if (sign === 1) diffToTarget = scrollSnap + (1 - scrollProgress)
-          }
-        })
-      }
-      return diffToTarget * (1 / TWEEN_FACTOR) * 100
-    })
-
-    tweenValues.value = styles
-  }
-
+		// Cancel previous frame if exists
+		if (scrollRAF) cancelAnimationFrame(scrollRAF);
+		
+		scrollRAF = requestAnimationFrame(() => {
+			const engine = emblaApi.value.internalEngine()
+			const scrollProgress = emblaApi.value.scrollProgress()
+			// Cache snapList to avoid calling it twice
+			const snapList = emblaApi.value.scrollSnapList()
+
+			const stylesOpacity = snapList.map((scrollSnap, index) => {
+				let diffToTarget = scrollSnap - scrollProgress
+
+				if (engine.options.loop) {
+					engine.slideLooper.loopPoints.forEach((loopItem) => {
+						const target = loopItem.target()
+						if (index === loopItem.index && target !== 0) {
+							const sign = Math.sign(target)
+							if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)
+							if (sign === 1) diffToTarget = scrollSnap + (1 - scrollProgress)
+						}
+					})
+				}
+				const tweenValue = 1 - Math.abs(diffToTarget * TWEEN_FACTOR)
+				return  Math.min(Math.max(tweenValue, 0), 1)
+			})
+
+			const styles = snapList.map((scrollSnap, index) => {
+				let diffToTarget = scrollSnap - scrollProgress
+
+				if (engine.options.loop) {
+					engine.slideLooper.loopPoints.forEach((loopItem) => {
+						const target = loopItem.target()
+						if (index === loopItem.index && target !== 0) {
+							const sign = Math.sign(target)
+							if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)
+							if (sign === 1) diffToTarget = scrollSnap + (1 - scrollProgress)
+						}
+					})
+				}
+				return diffToTarget * (1 / TWEEN_FACTOR) * 100
+			})
+
+			// Batch updates together
+			tweenSlides.value = stylesOpacity
+			tweenValues.value = styles
+		});
+	}
 
-	onMounted(async() => {
-	  onInit(emblaApi);
-	  onSelect(emblaApi);
-	  onScroll(emblaApi);
 
-	  emblaApi.value.on('reInit', onInit);
-	  emblaApi.value.on('reInit', onSelect);
-	  emblaApi.value.on('select', onSelect);
+	onMounted(() => {
+	  emblaApi.value.on('init', onInit)
+	  emblaApi.value.on('select', onSelect)
 	  emblaApi.value.on('scroll', onScroll)
 	});
 

package/src/modules/globals/views/plugins/alert.plugin.js

@@ -1,7 +1,10 @@
 // alertPlugin.js
-import { h, reactive, render } from 'vue';
-  
-import AlertDialog from '@martyrs/src/modules/globals/views/components/blocks/AlertDialog.vue';
+import { h, reactive, render, defineAsyncComponent } from 'vue';
+
+// Dynamic import for better tree shaking and lazy loading
+const AlertDialog = defineAsyncComponent(() => 
+  import('@martyrs/src/modules/globals/views/components/blocks/AlertDialog.vue')
+);
 
 // Глобальное реактивное состояние для алерта
 const alertState = reactive({

package/src/modules/globals/views/plugins/date-picker.plugin.js

@@ -1,8 +1,12 @@
 // date-selector.plugin.js
-import { reactive, markRaw, defineComponent, h, render } from 'vue'
-import PopupDateSelector from '@martyrs/src/modules/globals/views/components/blocks/PopupDateSelector.vue'
+import { reactive, markRaw, defineComponent, h, render, defineAsyncComponent } from 'vue'
 import * as globals from '@martyrs/src/modules/globals/views/store/globals.js'
 
+// Dynamic import for better tree shaking and lazy loading
+const PopupDateSelector = defineAsyncComponent(() => 
+  import('@martyrs/src/modules/globals/views/components/blocks/PopupDateSelector.vue')
+)
+
 // 1) Общее состояние и API
 const state = reactive({
   isOpen: false,

package/src/modules/globals/views/plugins/popup.auth.plugin.js

@@ -1,6 +1,10 @@
 // @martyrs/src/modules/auth/views/plugins/authPlugin.js
-import { reactive, defineComponent, h, render } from 'vue';
-import PopupAuth from '@martyrs/src/modules/globals/views/components/blocks/PopupAuth.vue';
+import { reactive, defineComponent, h, render, defineAsyncComponent } from 'vue';
+
+// Dynamic import for better tree shaking and lazy loading
+const PopupAuth = defineAsyncComponent(() => 
+  import('@martyrs/src/modules/globals/views/components/blocks/PopupAuth.vue')
+);
 
 // 1) Общее состояние и API
 const state = reactive({

package/src/modules/globals/views/plugins/store-debugger/StoreDebugger.vue

@@ -54,7 +54,6 @@
 
 <script setup>
 import { ref, reactive, computed, watch } from 'vue'
-import { format } from 'date-fns'
 
 const props = defineProps({
   store: { type: Object, required: true }
@@ -71,7 +70,11 @@ const toggleTheme = () => { theme.value = theme.value === 'light' ? 'dark' : 'li
 // capture timestamp
 const lastUpdated = ref('')
 function updateTimestamp() {
-  lastUpdated.value = format(new Date(), 'PPpp')
+  const now = new Date()
+  lastUpdated.value = now.toLocaleString('en-US', { 
+    dateStyle: 'medium', 
+    timeStyle: 'medium' 
+  })
 }
 
 // modules state for UI

package/src/modules/globals/views/plugins/store-debugger/store-debugger.plugin.js

@@ -1,6 +1,10 @@
 // src/plugins/storeDebuggerPlugin.js
-import { createVNode, render } from 'vue'
-import StoreDebugger from './StoreDebugger.vue'
+import { createVNode, render, defineAsyncComponent } from 'vue'
+
+// Dynamic import for better tree shaking and lazy loading
+const StoreDebugger = defineAsyncComponent(() => 
+  import('./StoreDebugger.vue')
+)
 
 export default {
   install(app, store) {

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

@@ -47,7 +47,11 @@ const actions = {
 
   // Black/White Theme
   async setTheme(isDarkMode) {
-    let root = document.querySelector(':root');
+    // Cache root element
+    if (!state.theme.rootElement) {
+      state.theme.rootElement = document.documentElement;
+    }
+    const root = state.theme.rootElement;
 
     state.theme.darkmode = isDarkMode;
 
@@ -66,20 +70,20 @@ const actions = {
 
     // Проверяем, сохранены ли оригинальные цвета
     if (!state.theme.originalColors) {
-      // Сохраняем оригинальные цвета
+      // Сохраняем оригинальные цвета один раз
       state.theme.originalColors = {};
+      const computedStyle = getComputedStyle(root);
       variableNames.forEach(variableName => {
-        const currentColor = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
-        state.theme.originalColors[variableName] = currentColor;
+        state.theme.originalColors[variableName] = computedStyle.getPropertyValue(variableName).trim();
       });
     }
 
     if (isDarkMode) {
       invertColors(variableNames, state.theme.originalColors);
     } else {
-      // Восстанавливаем оригинальные цвета
+      // Восстанавливаем оригинальные цвета батчем
       variableNames.forEach(variableName => {
-        document.documentElement.style.setProperty(variableName, state.theme.originalColors[variableName]);
+        root.style.setProperty(variableName, state.theme.originalColors[variableName]);
       });
     }
   },
@@ -179,7 +183,9 @@ function setError(error) {
 
   state.error.show = true;
 
-  setTimeout(() => (state.error.show = false), 3000);
+  requestAnimationFrame(() => {
+    setTimeout(() => (state.error.show = false), 5000);
+  });
 }
 
 function setSnack(data) {
@@ -213,9 +219,10 @@ function setSnack(data) {
   }
 
   // Auto-hide
-  setTimeout(() => {
-    state.snack.show = false
-  }, duration)
+  requestAnimationFrame(() => {
+    setTimeout(() => {state.snack.show = false }, duration)
+  });
+  
 }
 
 function invertColors(variableNames, originalColors) {

package/src/modules/globals/views/utils/polyfills.js

@@ -0,0 +1,28 @@
+// Polyfills for browser compatibility
+
+// requestIdleCallback polyfill для Safari
+if (typeof window !== 'undefined' && !window.requestIdleCallback) {
+  window.requestIdleCallback = function(callback, options) {
+    const start = Date.now();
+    return setTimeout(function() {
+      callback({
+        didTimeout: false,
+        timeRemaining: function() {
+          return Math.max(0, 50 - (Date.now() - start));
+        }
+      });
+    }, options?.timeout || 1);
+  };
+}
+
+if (typeof window !== 'undefined' && !window.cancelIdleCallback) {
+  window.cancelIdleCallback = function(id) {
+    clearTimeout(id);
+  };
+}
+
+// Export for documentation purposes
+export const polyfills = {
+  requestIdleCallback: true,
+  cancelIdleCallback: true
+};

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

@@ -31,19 +31,21 @@ export function renderAndMountApp({ createApp }) {
       initialState = null;
     }
 
+
     if (initialState) {
-      // Применяем начальное состояние ко всем модулям
-      store.setInitialState(initialState);
+      // Применяем начальное состояние ко всем модулям (true = гидратация)
+      store.setInitialState(initialState, true);
       
-      console.log('auth', initialState?.auth);
       if (initialState?.auth?.access?.token) {
         setAuthToken(initialState.auth.access.token);
       }
     } else {
-      // Если нет initialState, сбрасываем авторизацию
-      store.auth.actions.resetState();
-      // await store.auth.removeCookie('user');
-      await store.auth.actions.logout();
+      // Если нет initialState, сбрасываем авторизацию (если модуль auth загружен)
+      if (store.auth && store.auth.actions) {
+        store.auth.actions.resetState();
+        // await store.auth.removeCookie('user');
+        await store.auth.actions.logout();
+      }
     }
 
     // app.config.globalProperties.$i18n.locale = router.currentRoute.value.params.locale
@@ -54,12 +56,13 @@ export function renderAndMountApp({ createApp }) {
     // }
 
     await router.isReady();
+    
     app.mount('#app');
   };
   start();
 }
 
-export async function render({ url, cookies, createApp }) {
+export async function render({ url, cookies,  ssrContext, createApp}) {
   const { app, router, store, meta } = createApp();
 
   await router.push(url);
@@ -70,13 +73,12 @@ export async function render({ url, cookies, createApp }) {
   //   app.config.globalProperties.$i18n.locale = language
   // }
 
-  // console.log(router.currentRoute.value.params.locale)
   // app.config.globalProperties.$i18n.locale = router.currentRoute.value.params.locale
 
-  const sharedContext = {};
+  const ctx = ssrContext || {};
 
   if (router.currentRoute.value.name?.toLowerCase() === 'notfound') {
-    sharedContext.notFound = true;
+    ctx.notFound = true;
   }
 
   let user = null;
@@ -91,12 +93,21 @@ export async function render({ url, cookies, createApp }) {
   }
 
   if (user) {
-    await store.auth.actions.initialize(user);
+    if (store.auth && store.auth.actions) {
+      await store.auth.actions.initialize(user);
+    } else {
+      console.warn('[SSR] Auth module not loaded, cannot initialize user');
+    }
   } else {
-    store.auth.actions.resetState();
+    if (store.auth && store.auth.actions) {
+      store.auth.actions.resetState();
+    } else {
+      console.warn('[SSR] Auth module not loaded, cannot reset state');
+    }
   }
 
-  const html = await renderToString(app, sharedContext);
+  // 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();
 
@@ -105,5 +116,6 @@ export async function render({ url, cookies, createApp }) {
     meta: payload,
     state: initialState,
     statusCode: router.currentRoute?.value?.name?.toLowerCase() === 'notfound' ? 404 : 200,
+    usedModules: Array.from(ctx.modules || new Set()), // Return used modules
   };
 }

package/src/modules/icons/components/IconSearchPopup.vue

@@ -241,13 +241,13 @@ function closePopup() {
   width: 90vw;
 }
 
-:deep(.feed-enter-active),
-:deep(.feed-leave-active) {
+::v-deep(.feed-enter-active),
+::v-deep(.feed-leave-active) {
   transition: all 0.3s ease;
 }
 
-:deep(.feed-enter-from),
-:deep(.feed-leave-to) {
+::v-deep(.feed-enter-from),
+::v-deep(.feed-leave-to) {
   opacity: 0;
   transform: scale(0.9);
 }

package/src/modules/icons/icons.client.js

@@ -238,4 +238,4 @@ const ModuleIcons = {
   },
 };
 
-export default ModuleIcons;
+export default ModuleIcons;

package/src/modules/inventory/inventory.client.js

@@ -62,4 +62,4 @@ function initializeInventory(app, store, router, options = {}) {
 // Экспорт модуля
 export default {
   initialize: initializeInventory
-};
+};

package/src/modules/inventory/router/inventory.router.js

@@ -9,7 +9,7 @@ const inventoryRoutes = [
       },
       authorize: [],
     },
-    component: () => import(/* webpackChunkName: 'Inventory' */ '../components/pages/Inventory.vue'),
+    component: () => import(/* webpackChunkName: 'inventory-list' */ '../components/pages/Inventory.vue'),
   },
   {
     path: 'audit',
@@ -21,7 +21,7 @@ const inventoryRoutes = [
       },
       authorize: [],
     },
-    component: () => import(/* webpackChunkName: 'InventoryEdit' */ '../components/pages/InventoryEdit.vue'),
+    component: () => import(/* webpackChunkName: 'inventory-audit' */ '../components/pages/InventoryEdit.vue'),
   },
 ];
 

package/src/modules/landing/components/sections/SectionEarn.vue

@@ -42,7 +42,7 @@
         }"
         class="z-index-3 pos-relative w-100"
       />
-      <div style="background-image: url(/spiral.jpg)" class="mn-b-extra z-index-1 spiral"/>
+      <img :src="'/spiral.webp'" loading="lazy" alt="" class="mn-b-extra z-index-1 spiral"/>
     </div>
   </section>
 </template>
@@ -80,7 +80,7 @@ const { t, te } = useI18n({
 
 <style lang="scss" scoped>
   .spiral {
-    background-size: cover;
+    object-fit: cover;
     width: 100rem;
     height: 100rem;
     position: absolute;