@vnejs/plugins.views.screens.loading 0.2.3 → 0.2.4

package/dist/index.js

@@ -2,6 +2,7 @@ import "@vnejs/contracts.views.screens.loading";
 import { regPlugin } from "@vnejs/shared";
 import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.screens.loading";
 import { LoadingController } from "./modules/controller.js";
+import { LoadingControllerBg } from "./modules/controller.bg.js";
 import { Loading } from "./modules/loading.js";
 import { LoadingView } from "./modules/view.js";
-regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [LoadingController, Loading, LoadingView]);
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [LoadingController, LoadingControllerBg, Loading, LoadingView]);

package/dist/modules/controller.bg.d.ts

@@ -0,0 +1,16 @@
+import { ModuleControllerBg } from "@vnejs/module.controller.bg";
+import type { LoadingPluginConstants, LoadingPluginEvents, LoadingPluginParams, LoadingPluginSettings } from "../types.js";
+import type { LoadingPluginState } from "../utils/loading.js";
+export declare class LoadingControllerBg extends ModuleControllerBg<LoadingPluginEvents, LoadingPluginConstants, LoadingPluginSettings, LoadingPluginParams, LoadingPluginState> {
+    name: string;
+    EVENT_SHOW: "vne:loading:show";
+    EVENT_HIDE: "vne:loading:hide";
+    EVENT_SHOW_BEFORE: "vne:loading:show_before";
+    EVENT_STATE_UPDATE: "vne:loading:state_update";
+    EVENT_UPDATE_FAST: "vne:loading:update_fast";
+    BGNAME: string;
+    QUALITY_SETTING: "vne:canvas:quality";
+    IS_START_PRELOAD_ENABLED: boolean;
+    IS_MEMORY_CLEARED_PRELOAD_ENABLED: boolean;
+    IS_MEMORY_CLEARED_UPDATE_ENABLED: boolean;
+}

package/dist/modules/controller.bg.js

@@ -0,0 +1,14 @@
+import { ModuleControllerBg } from "@vnejs/module.controller.bg";
+export class LoadingControllerBg extends ModuleControllerBg {
+    name = "loading.controller.bg";
+    EVENT_SHOW = this.EVENTS.LOADING.SHOW;
+    EVENT_HIDE = this.EVENTS.LOADING.HIDE;
+    EVENT_SHOW_BEFORE = this.EVENTS.LOADING.SHOW_BEFORE;
+    EVENT_STATE_UPDATE = this.EVENTS.LOADING.STATE_UPDATE;
+    EVENT_UPDATE_FAST = this.EVENTS.LOADING.UPDATE_FAST;
+    BGNAME = this.PARAMS.LOADING.BACKGROUND;
+    QUALITY_SETTING = this.SETTINGS.LAYER.QUALITY;
+    IS_START_PRELOAD_ENABLED = true;
+    IS_MEMORY_CLEARED_PRELOAD_ENABLED = true;
+    IS_MEMORY_CLEARED_UPDATE_ENABLED = true;
+}

package/dist/modules/controller.d.ts

@@ -4,11 +4,8 @@ import type { LoadingPluginState } from "../utils/loading.js";
 export declare class LoadingController extends ModuleController<LoadingPluginEvents, LoadingPluginConstants, LoadingPluginSettings, LoadingPluginParams, LoadingPluginState> {
     name: string;
     EVENT_UPDATE_VIEW: "vne:loading:update";
-    BGNAME: string;
     CONTROLS: {};
     CONTROLS_INDEX: number;
     subscribe: () => void;
-    start: () => Promise<HTMLImageElement>;
     beforeShow: () => Promise<void>;
-    onMemoryCleared: () => Promise<unknown[] | undefined>;
 }

package/dist/modules/controller.js

@@ -2,15 +2,15 @@ import { ModuleController } from "@vnejs/module.components";
 export class LoadingController extends ModuleController {
     name = "loading.controller";
     EVENT_UPDATE_VIEW = this.EVENTS.LOADING.UPDATE;
-    BGNAME = this.PARAMS.LOADING.BACKGROUND;
     CONTROLS = {};
     CONTROLS_INDEX = this.PARAMS.LOADING.ZINDEX;
     subscribe = () => {
         this.on(this.EVENTS.LOADING.SHOW, this.onShow);
         this.on(this.EVENTS.LOADING.HIDE, this.onHide);
-        this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+        this.on(this.EVENTS.LOADING.STATE_UPDATE, this.updateState);
+        this.on(this.EVENTS.LOADING.UPDATE_FAST, this.updateViewFast);
+    };
+    beforeShow = async () => {
+        await this.emit(this.EVENTS.LOADING.SHOW_BEFORE);
     };
-    start = () => this.loadBgMedia();
-    beforeShow = async () => this.updateState({ bgSrc: (await this.loadBgMedia()).src });
-    onMemoryCleared = async () => this.updateStateAndViewFast({ bgSrc: (await this.loadBgMedia()).src });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.views.screens.loading",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -35,6 +35,8 @@
   "peerDependencies": {
     "@vnejs/module.core": "~0.2.0",
     "@vnejs/module.components": "~0.2.0",
+    "@vnejs/module.controller.bg": "~0.2.0",
+    "@vnejs/contracts.canvas.layer": "~0.2.0",
     "@vnejs/contracts.text.locs": "~0.2.0",
     "@vnejs/shared": "~0.2.0",
     "@vnejs/uis.react": "~0.2.0"
@@ -43,10 +45,12 @@
     "@vnejs/configs.ts-common": "~0.2.0",
     "@vnejs/configs.vitest": "~0.2.0",
     "@vnejs/test-utils": "~0.2.0",
+    "@vnejs/contracts.canvas.layer": "~0.2.0",
     "@vnejs/contracts.text.locs": "~0.2.0",
     "@vnejs/contracts.views.screens.loading": "~0.2.0",
     "@vnejs/module.core": "~0.2.0",
     "@vnejs/module.components": "~0.2.0",
+    "@vnejs/module.controller.bg": "~0.2.0",
     "@vnejs/shared": "~0.2.0",
     "@vnejs/uis.react": "~0.2.0"
   }

package/src/index.ts

@@ -4,7 +4,8 @@ import { regPlugin } from "@vnejs/shared";
 import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.screens.loading";
 
 import { LoadingController } from "./modules/controller.js";
+import { LoadingControllerBg } from "./modules/controller.bg.js";
 import { Loading } from "./modules/loading.js";
 import { LoadingView } from "./modules/view.js";
 
-regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [LoadingController, Loading, LoadingView]);
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [LoadingController, LoadingControllerBg, Loading, LoadingView]);

package/src/modules/controller.bg.ts

@@ -0,0 +1,27 @@
+import { ModuleControllerBg } from "@vnejs/module.controller.bg";
+
+import type { LoadingPluginConstants, LoadingPluginEvents, LoadingPluginParams, LoadingPluginSettings } from "../types.js";
+import type { LoadingPluginState } from "../utils/loading.js";
+
+export class LoadingControllerBg extends ModuleControllerBg<
+  LoadingPluginEvents,
+  LoadingPluginConstants,
+  LoadingPluginSettings,
+  LoadingPluginParams,
+  LoadingPluginState
+> {
+  name = "loading.controller.bg";
+
+  EVENT_SHOW = this.EVENTS.LOADING.SHOW;
+  EVENT_HIDE = this.EVENTS.LOADING.HIDE;
+  EVENT_SHOW_BEFORE = this.EVENTS.LOADING.SHOW_BEFORE;
+  EVENT_STATE_UPDATE = this.EVENTS.LOADING.STATE_UPDATE;
+  EVENT_UPDATE_FAST = this.EVENTS.LOADING.UPDATE_FAST;
+
+  BGNAME = this.PARAMS.LOADING.BACKGROUND;
+  QUALITY_SETTING = this.SETTINGS.LAYER.QUALITY;
+
+  IS_START_PRELOAD_ENABLED = true;
+  IS_MEMORY_CLEARED_PRELOAD_ENABLED = true;
+  IS_MEMORY_CLEARED_UPDATE_ENABLED = true;
+}

package/src/modules/controller.ts

@@ -14,21 +14,17 @@ export class LoadingController extends ModuleController<
 
   EVENT_UPDATE_VIEW = this.EVENTS.LOADING.UPDATE;
 
-  BGNAME = this.PARAMS.LOADING.BACKGROUND;
-
   CONTROLS = {};
   CONTROLS_INDEX = this.PARAMS.LOADING.ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.LOADING.SHOW, this.onShow);
     this.on(this.EVENTS.LOADING.HIDE, this.onHide);
-
-    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+    this.on(this.EVENTS.LOADING.STATE_UPDATE, this.updateState);
+    this.on(this.EVENTS.LOADING.UPDATE_FAST, this.updateViewFast);
   };
 
-  start = () => this.loadBgMedia();
-
-  beforeShow = async () => this.updateState({ bgSrc: (await this.loadBgMedia()).src });
-
-  onMemoryCleared = async () => this.updateStateAndViewFast({ bgSrc: (await this.loadBgMedia()).src });
+  beforeShow = async () => {
+    await this.emit(this.EVENTS.LOADING.SHOW_BEFORE);
+  };
 }

package/src/tests/controller.bg.test.ts

@@ -0,0 +1,40 @@
+import { beforeEach, describe, expect, it } from "vitest";
+
+import { SUBSCRIBE_EVENTS as MEDIA_EVENTS } from "@vnejs/contracts.core.media";
+import { SUBSCRIBE_EVENTS as MEMORY_EVENTS } from "@vnejs/contracts.core.memory";
+import { spyEvent, stubEvent } from "@vnejs/test-utils";
+
+import { LoadingControllerBg } from "../modules/controller.bg.js";
+import { createLoadingTestModule, PARAMS, registerLoadingPluginVne, SUBSCRIBE_EVENTS } from "./setup.js";
+
+describe("LoadingControllerBg", () => {
+  beforeEach(() => {
+    registerLoadingPluginVne();
+  });
+
+  it("SHOW_BEFORE loads bg and emits STATE_UPDATE with bgSrc", async () => {
+    const { observer } = createLoadingTestModule(LoadingControllerBg);
+    stubEvent(observer, MEDIA_EVENTS.LOAD, () => ({ src: "bg.png" }));
+    const mediaLoad = spyEvent(observer, MEDIA_EVENTS.LOAD);
+    const stateUpdate = spyEvent(observer, SUBSCRIBE_EVENTS.STATE_UPDATE);
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW_BEFORE);
+
+    expect(mediaLoad).toHaveBeenCalledOnce();
+    expect(mediaLoad.mock.calls[0][0]).toMatchObject({ name: `bg/${PARAMS.BACKGROUND}`, mediaType: "view" });
+    expect(stateUpdate).toHaveBeenCalledWith({ bgSrc: "bg.png" });
+  });
+
+  it("MEMORY.CLEARED updates bgSrc when shown", async () => {
+    const { observer } = createLoadingTestModule(LoadingControllerBg);
+    stubEvent(observer, MEDIA_EVENTS.LOAD, () => ({ src: "bg.png" }));
+    const stateUpdate = spyEvent(observer, SUBSCRIBE_EVENTS.STATE_UPDATE);
+    const updateFast = spyEvent(observer, SUBSCRIBE_EVENTS.UPDATE_FAST);
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW);
+    await observer.emit(MEMORY_EVENTS.CLEARED);
+
+    expect(stateUpdate).toHaveBeenCalledWith({ bgSrc: "bg.png" });
+    expect(updateFast).toHaveBeenCalledOnce();
+  });
+});

package/src/tests/setup.ts

@@ -1,8 +1,11 @@
+import { CONSTANTS as LAYER_CONST, PLUGIN_NAME as LAYER, SETTINGS_KEYS as LAYER_SETTINGS } from "@vnejs/contracts.canvas.layer";
+import { SUBSCRIBE_EVENTS as MEDIA_EVENTS } from "@vnejs/contracts.core.media";
 import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.screens.loading";
-import { createTestModule as baseCreateTestModule, registerCoreVne, registerVnePlugin, stubSilentEvent } from "@vnejs/test-utils";
+import { createTestModule as baseCreateTestModule, registerCoreVne, registerVnePlugin, stubEvent, stubSilentEvent } from "@vnejs/test-utils";
 
 export const registerLoadingPluginVne = () => {
   registerCoreVne();
+  registerVnePlugin(LAYER, { constants: LAYER_CONST, settings: LAYER_SETTINGS });
   registerVnePlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS });
 };
 
@@ -15,12 +18,20 @@ export const createLoadingTestModule = <T extends Parameters<typeof baseCreateTe
       loading: { isShow: false },
       ...(options.state ?? {}),
     },
+    shared: {
+      settings: { [LAYER_SETTINGS.QUALITY]: LAYER_CONST.QUALITIES.FHD },
+      ...(options.shared ?? {}),
+    },
     ...options,
   });
 
+  stubEvent(result.observer, MEDIA_EVENTS.LOAD, () => ({ src: "bg.png" }));
   stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.SHOW);
   stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.HIDE);
+  stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.SHOW_BEFORE);
   stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.UPDATE);
+  stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.UPDATE_FAST);
+  stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.STATE_UPDATE);
 
   return result;
 };