Merge pull request #13 from Explicit12/FN-1816_Remove-stores-from-loa…

…ders_Dmytro-Holdobin

Remove stores from loaders

.storybook/preview.js

@@ -4,27 +4,16 @@ import { backgrounds, docs, layout } from "./configs/main.config";
 import { vue3SourceDecorator } from "./decorators/vue3SourceDecorator";
 
 // Vue plugins
-import { createStore } from "vuex";
 import { createVueless } from "vueless";
 
 // Tailwind styles
 import "./index.pcss";
 
-// Common stores
-import loader from "vueless/ui.loader-rendering/store";
-import loaderTop from "vueless/ui.other-loader-top/store";
-
-// Create store instance
-const store = createStore({
-  modules: { loader, loaderTop },
-});
-
 // Create vueless instance
 const vueless = createVueless();
 
 // Create storybook app instance
 const storybookApp = (app) => {
-  app.use(store);
   app.use(vueless);
 };
 

package.json

@@ -34,8 +34,7 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "vue-tippy": "^6.0.0-beta.0",
-    "vuedraggable": "^4.1.0",
-    "vuex": "^4.1.0"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@release-it/bumper": "^6.0.1",

src/ui.loader-rendering/composables/useLoaderRendering.js

@@ -0,0 +1,19 @@
+import { readonly, ref } from "vue";
+
+const isRenderingPage = ref(true);
+
+function setRenderingStarted() {
+  isRenderingPage.value = true;
+}
+
+function setRenderingFinished() {
+  isRenderingPage.value = false;
+}
+
+export default function useLoaderRendering() {
+  return {
+    isRenderingPage: readonly(isRenderingPage),
+    setRenderingStarted,
+    setRenderingFinished,
+  };
+}

src/ui.loader-rendering/index.vue

@@ -9,27 +9,26 @@
   </transition>
 </template>
 
-<script>
-import { mapState } from "vuex";
+<script setup>
+import { computed } from "vue";
 
-export default {
-  name: "ULoaderRendering",
+import useLoaderRendering from "./composables/useLoaderRendering";
 
-  props: {
-    loading: {
-      type: Boolean,
-      default: false,
-    },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "ULoaderRendering", inheritAttrs: false });
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
   },
+});
 
-  computed: {
-    ...mapState("loader", ["isRenderingPage"]),
+const { isRenderingPage } = useLoaderRendering();
 
-    showLoader() {
-      return this.loading || this.isRenderingPage;
-    },
-  },
-};
+const showLoader = computed(() => {
+  return props.loading || isRenderingPage.value;
+});
 </script>
 
 <style lang="postcss" scoped>

src/ui.other-loader-top/composables/useLoaderTop.js

@@ -0,0 +1,57 @@
+import { ref, readonly } from "vue";
+
+const isLoading = ref(false);
+const requestQueue = ref([]);
+const loaderRequestQueue = ref([]);
+const loaderRequestTimeout = ref(0);
+const componentLoaderRequestQueue = ref([]);
+
+function setLoadingOn(url) {
+  loaderRequestQueue.value.push(url);
+
+  isLoading.value = true;
+
+  clearTimeout(loaderRequestTimeout.value);
+}
+
+function setLoadingOff(url) {
+  loaderRequestQueue.value = url ? loaderRequestQueue.value.filter((item) => item !== url) : [];
+
+  loaderRequestTimeout.value = setTimeout(() => {
+    if (!loaderRequestQueue.value.length) {
+      isLoading.value = false;
+    }
+  }, 50);
+}
+
+function addRequestUrl(url) {
+  requestQueue.value.push(url);
+}
+
+function removeRequestUrl(url) {
+  requestQueue.value = requestQueue.value.filter((item) => item !== url);
+}
+
+function setComponentRequestQueue(requests) {
+  componentLoaderRequestQueue.value = [...componentLoaderRequestQueue, ...requests];
+}
+
+function removeComponentRequestQueue() {
+  componentLoaderRequestQueue.value = [];
+}
+
+export default function useLoaderTop() {
+  return {
+    isLoading: readonly(isLoading),
+    requestQueue: readonly(requestQueue),
+    loaderRequestQueue: readonly(loaderRequestQueue),
+    loaderRequestTimeout: readonly(loaderRequestTimeout),
+    componentLoaderRequestQueue: readonly(componentLoaderRequestQueue),
+    setLoadingOn,
+    setLoadingOff,
+    addRequestUrl,
+    removeRequestUrl,
+    setComponentRequestQueue,
+    removeComponentRequestQueue,
+  };
+}

src/ui.other-loader-top/index.vue

@@ -7,16 +7,16 @@
 <script setup>
 import { computed, onBeforeUnmount, watch, ref } from "vue";
 
-import { useStore } from "vuex";
-
 import UIService, { isMobileApp } from "../service.ui";
 import { clamp, queue } from "./services/loaderTop.service";
+import useLoaderTop from "./composables/useLoaderTop";
 
 import { ULoaderTop, MAXIMUM, SPEED } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
 
-defineOptions({ name: "ULoaderTop" });
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "ULoaderTop", inheritAttrs: false });
 
 const props = defineProps({
   /**
@@ -46,22 +46,21 @@ const props = defineProps({
   },
 });
 
-const store = useStore();
-
 const error = ref(false);
 const show = ref(false);
 const progress = ref(0);
 const opacity = ref(1);
 const status = ref(null);
 
+const {
+  loaderRequestQueue,
+  isLoading,
+  componentLoaderRequestQueue,
+  setComponentRequestQueue,
+  removeComponentRequestQueue,
+} = useLoaderTop();
 const { progressAttrs } = useAttrs(props, { error, isMobileApp });
 
-const loaderRequestQueue = computed(() => store.state.loaderTop.loaderRequestQueue);
-const isLoading = computed(() => store.state.loaderTop.isLoading);
-const componentLoaderRequestQueue = computed(
-  () => store.state.loaderTop.componentLoaderRequestQueue,
-);
-
 const isStarted = computed(() => {
   return typeof status.value === "number";
 });
@@ -81,12 +80,12 @@ watch(loaderRequestQueue, onChangeRequestsQueue, { deep: true });
 watch(isLoading, onChangeLoadingState, { deep: true });
 
 if (props.resourceNames) {
-  store.commit("loaderTop/SET_COMPONENT_REQUEST_QUEUE", resourceNamesArray.value);
+  setComponentRequestQueue(resourceNamesArray.value);
 }
 
 onBeforeUnmount(() => {
   if (props.resourceNames) {
-    store.commit("loaderTop/REMOVE_COMPONENT_REQUEST_QUEUE");
+    removeComponentRequestQueue();
   }
 });
 

yarn.lock

@@ -2754,11 +2754,6 @@
     "@vue/compiler-dom" "3.4.25"
     "@vue/shared" "3.4.25"
 
-"@vue/devtools-api@^6.0.0-beta.11":
-  version "6.6.1"
-  resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz"
-  integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==
-
 "@vue/eslint-config-prettier@^9.0.0":
   version "9.0.0"
   resolved "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz"
@@ -8340,6 +8335,7 @@ stream-shift@^1.0.0:
   integrity sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8402,6 +8398,7 @@ string_decoder@^1.1.1, string_decoder@~1.1.1:
     safe-buffer "~5.1.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9176,13 +9173,6 @@ vuedraggable@^4.1.0:
   dependencies:
     sortablejs "1.14.0"
 
-vuex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz"
-  integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
-  dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.11"
-
 watchpack@^2.2.0:
   version "2.4.1"
   resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz"