@vnejs/module.components 0.0.12 → 0.0.13

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "./types.js";
+export type { ModuleControllerState } from "./modules/controller.js";
+export type { ComponentInjectResult, ControlsPopPayload, ControlsPushPayload, MediaLoadPayload, ViewActionPayload, ViewRenderFunc, ViewUpdatePayload, ViewUpdateState, } from "./utils/components.js";
+export { ModuleController } from "./modules/controller.js";
+export { ModuleView } from "./modules/view.js";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { ModuleController } from "./modules/controller.js";
+export { ModuleView } from "./modules/view.js";

package/dist/modules/controller.d.ts

@@ -0,0 +1,43 @@
+import { Module, type ModuleGlobalStateRegistry } from "@vnejs/module";
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "../types.js";
+import type { ViewActionPayload } from "../utils/components.js";
+export type ModuleControllerState = {
+    isShow: boolean;
+    isForce: boolean;
+    currentItem?: number | null;
+};
+export declare abstract class ModuleController<TEvents extends ModuleComponentsEvents = ModuleComponentsEvents, TConstants extends ModuleComponentsConstants = ModuleComponentsConstants, TSettings extends ModuleComponentsSettings = ModuleComponentsSettings, TParams extends ModuleComponentsParams = ModuleComponentsParams, TState extends ModuleControllerState = ModuleControllerState> extends Module<TEvents, TConstants, TSettings, TParams, TState> {
+    abstract name: string;
+    currentItem: number | null;
+    maxCurrentItem: number;
+    beforeShow: ((args: ViewActionPayload) => void | Promise<void>) | null;
+    afterShow: ((args: ViewActionPayload) => void | Promise<void>) | null;
+    beforeHide: ((args: ViewActionPayload) => void | Promise<void>) | null;
+    afterHide: ((args: ViewActionPayload) => void | Promise<void>) | null;
+    bgName: string | null;
+    updateEvent: string;
+    controls: Record<string, () => void | Promise<void>> | null;
+    controlsIndex: number;
+    controlsCheckNext: boolean;
+    isOnlyLocalState: boolean;
+    onClose?: () => void;
+    onHide: ({ isForce, ...args }?: ViewActionPayload) => Promise<void>;
+    onShow: ({ isForce, onClose, ...args }?: ViewActionPayload) => Promise<void>;
+    onHideForce: (args?: ViewActionPayload) => Promise<void>;
+    onShowForce: (args?: ViewActionPayload) => Promise<void>;
+    onUpdateStateFromGlobalState: ({ [this.name]: state }?: ModuleGlobalStateRegistry) => Promise<unknown[]> | undefined;
+    setShow: (value: boolean, isForce?: boolean) => Promise<unknown[]> | undefined;
+    loadImageMedia: (name: string, mediaType: string, quality: string | number) => Promise<unknown> | undefined;
+    loadBgMedia: () => Promise<unknown> | undefined;
+    updateView: (isForce?: boolean, isFast?: boolean) => Promise<unknown[]> | undefined;
+    updateViewForce: () => Promise<unknown[]> | undefined;
+    updateViewFast: () => Promise<unknown[]> | undefined;
+    updateStateAndView: (state: Partial<TState>, isForce?: boolean, isFast?: boolean) => Promise<unknown[]> | undefined;
+    updateStateAndViewForce: (state: Partial<TState>) => Promise<unknown[]> | undefined;
+    updateStateAndViewFast: (state: Partial<TState>) => Promise<unknown[]> | undefined;
+    incCurrentItem: () => Promise<void>;
+    decCurrentItem: () => Promise<void>;
+    setCurrentItem: (value: number, defaultValue: number) => Promise<void>;
+    unsetCurrentItem: () => void;
+    getDefaultState: () => TState;
+}

package/dist/modules/controller.js

@@ -0,0 +1,92 @@
+import { Module } from "@vnejs/module";
+export class ModuleController extends Module {
+    currentItem = null;
+    maxCurrentItem = 0;
+    beforeShow = null;
+    afterShow = null;
+    beforeHide = null;
+    afterHide = null;
+    bgName = null;
+    updateEvent;
+    controls = null;
+    controlsIndex = 0;
+    controlsCheckNext = false;
+    isOnlyLocalState = true;
+    onClose;
+    onHide = async ({ isForce = false, ...args } = {}) => {
+        if (!this.state.isShow)
+            return;
+        this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "hide" } });
+        if (this.beforeHide)
+            await this.beforeHide(args);
+        if (this.controls)
+            await this.emit(this.EVENTS.CONTROLS.POP, { key: this.name });
+        await this.setShow(false, Boolean(isForce || this.shared.viewForceAnimationSources.length));
+        if (this.onClose) {
+            this.onClose();
+            delete this.onClose;
+        }
+        if (this.afterHide)
+            await this.afterHide(args);
+        this.unsetCurrentItem();
+    };
+    onShow = async ({ isForce = false, onClose, ...args } = {}) => {
+        if (this.state.isShow)
+            return;
+        this.currentItem = null;
+        this.state = { ...this.state, currentItem: null };
+        this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "show" } });
+        if (onClose)
+            this.onClose = onClose;
+        if (this.beforeShow)
+            await this.beforeShow(args);
+        await this.setShow(true, Boolean(isForce || this.shared.viewForceAnimationSources.length));
+        if (this.controls)
+            await this.emit(this.EVENTS.CONTROLS.PUSH, {
+                key: this.name,
+                controls: this.controls,
+                index: this.controlsIndex,
+                checkNext: this.controlsCheckNext,
+            });
+        if (this.afterShow)
+            await this.afterShow(args);
+    };
+    onHideForce = (args = {}) => this.onHide({ ...args, isForce: true });
+    onShowForce = (args = {}) => this.onShow({ ...args, isForce: true });
+    onUpdateStateFromGlobalState = ({ [this.name]: state } = {}) => this.updateStateAndViewForce(state);
+    setShow = (value, isForce = false) => this.updateStateAndView({ isShow: value }, isForce);
+    loadImageMedia = (name, mediaType, quality) => {
+        const [type, priority] = [this.CONST.MEDIA.TYPES.IMAGE, this.CONST.MEDIA.PRIORITIES.HIGH];
+        return this.emitOne(this.EVENTS.MEDIA.LOAD, { type, priority, quality, name, mediaType });
+    };
+    loadBgMedia = () => this.loadImageMedia(`bg/${this.bgName}`, "view", this.shared.settings[this.SETTINGS.LAYER.QUALITY]);
+    updateView = (isForce = false, isFast = false) => this.emit(this.updateEvent, { ...this.state, isForce, isFast });
+    updateViewForce = () => this.emit(this.updateEvent, { ...this.state, isForce: true });
+    updateViewFast = () => this.emit(this.updateEvent, { ...this.state, isFast: true });
+    updateStateAndView = (state, isForce = false, isFast = false) => {
+        this.updateState(state);
+        return this.updateView(isForce, isFast);
+    };
+    updateStateAndViewForce = (state) => this.updateStateAndView(state, true, false);
+    updateStateAndViewFast = (state) => this.updateStateAndView(state, false, true);
+    incCurrentItem = () => this.setCurrentItem((this.currentItem ?? 0) + 1, 0);
+    decCurrentItem = () => this.setCurrentItem((this.currentItem ?? 0) - 1, this.maxCurrentItem);
+    setCurrentItem = async (value, defaultValue) => {
+        if (this.currentItem === null) {
+            this.currentItem = defaultValue;
+        }
+        else {
+            this.currentItem = value;
+            if (this.currentItem > this.maxCurrentItem)
+                this.currentItem = 0;
+            if (this.currentItem < 0)
+                this.currentItem = this.maxCurrentItem;
+        }
+        this.updateStateAndViewFast({ currentItem: this.currentItem });
+    };
+    unsetCurrentItem = () => {
+        this.currentItem = null;
+        this.updateStateAndViewFast({ currentItem: this.currentItem });
+    };
+    getDefaultState = () => ({ isShow: false, isForce: false });
+}

package/dist/modules/view.d.ts

@@ -0,0 +1,16 @@
+import { Module, type ModuleInitResult } from "@vnejs/module";
+import { type StoreApi } from "zustand/vanilla";
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "../types.js";
+import type { ViewRenderFunc, ViewUpdateState } from "../utils/components.js";
+export declare abstract class ModuleView<TEvents extends ModuleComponentsEvents = ModuleComponentsEvents, TConstants extends ModuleComponentsConstants = ModuleComponentsConstants, TSettings extends ModuleComponentsSettings = ModuleComponentsSettings, TParams extends ModuleComponentsParams = ModuleComponentsParams, TState extends ViewUpdateState = ViewUpdateState> extends Module<TEvents, TConstants, TSettings, TParams, TState> {
+    abstract name: string;
+    animationTime: number;
+    renderFunc: ViewRenderFunc | null;
+    updateEvent: string;
+    updateHandler: ((state?: TState) => Promise<void>) | null;
+    locLabel: string | null;
+    store: StoreApi<TState>;
+    subscribe: () => void;
+    init: () => ModuleInitResult;
+    onUpdateStoreComponent: (state?: TState) => Promise<void>;
+}

package/dist/modules/view.js

@@ -0,0 +1,38 @@
+import { Module } from "@vnejs/module";
+import { createStore } from "zustand/vanilla";
+export class ModuleView extends Module {
+    animationTime = 0;
+    renderFunc = null;
+    updateEvent;
+    updateHandler = null;
+    locLabel = null;
+    store = createStore(() => ({}));
+    subscribe = () => {
+        if (this.updateEvent && this.updateHandler)
+            this.on(this.updateEvent, this.updateHandler);
+    };
+    init = () => {
+        if (!this.renderFunc)
+            return;
+        return this.emitOne(this.EVENTS.COMPONENTS.RENDER, { name: this.name, renderFunc: this.renderFunc, store: this.store });
+    };
+    onUpdateStoreComponent = async (state = {}) => {
+        if (!this.isReady)
+            await this.waitIsReady();
+        const injects = (await this.emitOne(this.EVENTS.COMPONENTS.INJECT, this));
+        const mutableState = state;
+        injects.forEach(({ field, value } = {}) => {
+            if (field)
+                mutableState[field] = value;
+        });
+        if (state.isForce) {
+            this.store.setState(state);
+            await this.waitTimeout(100);
+            this.store.setState({ ...this.store.getState(), isForce: false });
+            return;
+        }
+        this.store.setState(state);
+        if (!state.isFast)
+            await this.waitTimeout(this.animationTime);
+    };
+}

package/dist/types.d.ts

@@ -0,0 +1,22 @@
+import "@vnejs/plugins.core.components.contract";
+import type { VnePluginConstantsMapRegistry, VnePluginEventsMapRegistry, VnePluginParamsMapRegistry, VnePluginSettingsMapRegistry } from "@vnejs/shared";
+import type { Constants as ComponentsConstants, PluginName as ComponentsPluginName, SubscribeEvents as ComponentsSubscribeEvents } from "@vnejs/plugins.core.components.contract";
+import type { PluginName as LogsPluginName, SubscribeEvents as LogsSubscribeEvents } from "@vnejs/plugins.core.logs.contract";
+import type { Constants as MediaConstants, PluginName as MediaPluginName, SubscribeEvents as MediaSubscribeEvents } from "@vnejs/plugins.core.media.contract";
+export declare const CONTROLS_EVENTS: {
+    readonly EMIT: "vne:controls:emit";
+    readonly PUSH: "vne:controls:push";
+    readonly POP: "vne:controls:pop";
+};
+export declare const LAYER_SETTINGS_KEYS: {
+    readonly WIDTH: "vne:canvas:width";
+    readonly HEIGHT: "vne:canvas:height";
+    readonly QUALITY: "vne:canvas:quality";
+};
+type ControlsPluginName = "CONTROLS";
+type LayerPluginName = "LAYER";
+export type ModuleComponentsEvents = VnePluginEventsMapRegistry & Record<ComponentsPluginName, ComponentsSubscribeEvents> & Record<LogsPluginName, LogsSubscribeEvents> & Record<MediaPluginName, MediaSubscribeEvents> & Record<ControlsPluginName, typeof CONTROLS_EVENTS>;
+export type ModuleComponentsConstants = VnePluginConstantsMapRegistry & Record<ComponentsPluginName, ComponentsConstants> & Record<MediaPluginName, MediaConstants>;
+export type ModuleComponentsSettings = VnePluginSettingsMapRegistry & Record<LayerPluginName, typeof LAYER_SETTINGS_KEYS>;
+export type ModuleComponentsParams = VnePluginParamsMapRegistry;
+export {};

package/dist/types.js

@@ -0,0 +1,11 @@
+import "@vnejs/plugins.core.components.contract";
+export const CONTROLS_EVENTS = {
+    EMIT: "vne:controls:emit",
+    PUSH: "vne:controls:push",
+    POP: "vne:controls:pop",
+};
+export const LAYER_SETTINGS_KEYS = {
+    WIDTH: "vne:canvas:width",
+    HEIGHT: "vne:canvas:height",
+    QUALITY: "vne:canvas:quality",
+};

package/dist/utils/components.d.ts

@@ -0,0 +1,38 @@
+import type { Module } from "@vnejs/module";
+export type ViewActionPayload = {
+    isForce?: boolean;
+    onClose?: () => void;
+    [key: string]: unknown;
+};
+export type ViewUpdateState = {
+    isForce?: boolean;
+    isFast?: boolean;
+    [key: string]: unknown;
+};
+export type ComponentInjectResult = {
+    field?: string;
+    value?: unknown;
+};
+export type ViewRenderProps = Record<string, unknown> & {
+    onMount?: () => void;
+    store?: unknown;
+};
+export type ViewRenderFunc = (props: ViewRenderProps, root: HTMLDivElement) => void;
+export type MediaLoadPayload = {
+    type?: string;
+    priority?: number;
+    quality?: string | number;
+    name?: string;
+    mediaType?: string;
+};
+export type ControlsPushPayload = {
+    key?: string;
+    controls?: Record<string, () => void | Promise<void>>;
+    index?: number;
+    checkNext?: boolean;
+};
+export type ControlsPopPayload = {
+    key?: string;
+};
+export type ViewUpdatePayload = ViewUpdateState;
+export type ComponentsInjectHandler = (component: Module) => ComponentInjectResult | Promise<ComponentInjectResult>;

package/dist/utils/components.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,18 +1,44 @@
 {
   "name": "@vnejs/module.components",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "publish:major": "npm version major && npm publish --access public",
-    "publish:minor": "npm version minor && npm publish --access public",
-    "publish:patch": "npm version patch && npm publish --access public"
+    "build": "npx @vnejs/monorepo package",
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@vnejs/module": "~0.0.1",
     "zustand": "5.0.10"
+  },
+  "peerDependencies": {
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/shared": "~0.0.9"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.0.1",
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/plugins.core.components.contract": "~0.0.1",
+    "@vnejs/plugins.core.logs.contract": "~0.0.1",
+    "@vnejs/plugins.core.media.contract": "~0.0.1",
+    "@vnejs/shared": "~0.0.9"
   }
 }

package/src/index.ts

@@ -0,0 +1,15 @@
+export type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "./types.js";
+export type { ModuleControllerState } from "./modules/controller.js";
+export type {
+  ComponentInjectResult,
+  ControlsPopPayload,
+  ControlsPushPayload,
+  MediaLoadPayload,
+  ViewActionPayload,
+  ViewRenderFunc,
+  ViewUpdatePayload,
+  ViewUpdateState,
+} from "./utils/components.js";
+
+export { ModuleController } from "./modules/controller.js";
+export { ModuleView } from "./modules/view.js";

package/src/modules/controller.ts

@@ -0,0 +1,122 @@
+import { Module, type ModuleGlobalStateRegistry } from "@vnejs/module";
+
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "../types.js";
+import type { ControlsPopPayload, ControlsPushPayload, MediaLoadPayload, ViewActionPayload, ViewUpdatePayload } from "../utils/components.js";
+
+export type ModuleControllerState = {
+  isShow: boolean;
+  isForce: boolean;
+  currentItem?: number | null;
+};
+
+export abstract class ModuleController<
+  TEvents extends ModuleComponentsEvents = ModuleComponentsEvents,
+  TConstants extends ModuleComponentsConstants = ModuleComponentsConstants,
+  TSettings extends ModuleComponentsSettings = ModuleComponentsSettings,
+  TParams extends ModuleComponentsParams = ModuleComponentsParams,
+  TState extends ModuleControllerState = ModuleControllerState,
+> extends Module<TEvents, TConstants, TSettings, TParams, TState> {
+  abstract override name: string;
+
+  currentItem: number | null = null;
+  maxCurrentItem = 0;
+
+  beforeShow: ((args: ViewActionPayload) => void | Promise<void>) | null = null;
+  afterShow: ((args: ViewActionPayload) => void | Promise<void>) | null = null;
+  beforeHide: ((args: ViewActionPayload) => void | Promise<void>) | null = null;
+  afterHide: ((args: ViewActionPayload) => void | Promise<void>) | null = null;
+
+  bgName: string | null = null;
+  updateEvent!: string;
+
+  controls: Record<string, () => void | Promise<void>> | null = null;
+  controlsIndex = 0;
+  controlsCheckNext = false;
+
+  override isOnlyLocalState = true;
+
+  onClose?: () => void;
+
+  onHide = async ({ isForce = false, ...args }: ViewActionPayload = {}) => {
+    if (!this.state.isShow) return;
+
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "hide" } });
+    if (this.beforeHide) await this.beforeHide(args);
+    if (this.controls) await this.emit(this.EVENTS.CONTROLS.POP, { key: this.name } satisfies ControlsPopPayload);
+    await this.setShow(false, Boolean(isForce || this.shared.viewForceAnimationSources.length));
+    if (this.onClose) {
+      this.onClose();
+      delete this.onClose;
+    }
+    if (this.afterHide) await this.afterHide(args);
+    this.unsetCurrentItem();
+  };
+
+  onShow = async ({ isForce = false, onClose, ...args }: ViewActionPayload = {}) => {
+    if (this.state.isShow) return;
+
+    this.currentItem = null;
+    this.state = { ...this.state, currentItem: null };
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "show" } });
+    if (onClose) this.onClose = onClose;
+    if (this.beforeShow) await this.beforeShow(args);
+    await this.setShow(true, Boolean(isForce || this.shared.viewForceAnimationSources.length));
+    if (this.controls)
+      await this.emit(this.EVENTS.CONTROLS.PUSH, {
+        key: this.name,
+        controls: this.controls,
+        index: this.controlsIndex,
+        checkNext: this.controlsCheckNext,
+      } satisfies ControlsPushPayload);
+    if (this.afterShow) await this.afterShow(args);
+  };
+
+  onHideForce = (args: ViewActionPayload = {}) => this.onHide({ ...args, isForce: true });
+  onShowForce = (args: ViewActionPayload = {}) => this.onShow({ ...args, isForce: true });
+  onUpdateStateFromGlobalState = ({ [this.name]: state }: ModuleGlobalStateRegistry = {}) => this.updateStateAndViewForce(state as Partial<TState>);
+
+  setShow = (value: boolean, isForce = false) => this.updateStateAndView({ isShow: value } as Partial<TState>, isForce);
+
+  loadImageMedia = (name: string, mediaType: string, quality: string | number) => {
+    const [type, priority] = [this.CONST.MEDIA.TYPES.IMAGE, this.CONST.MEDIA.PRIORITIES.HIGH];
+
+    return this.emitOne(this.EVENTS.MEDIA.LOAD, { type, priority, quality, name, mediaType } satisfies MediaLoadPayload);
+  };
+
+  loadBgMedia = () => this.loadImageMedia(`bg/${this.bgName}`, "view", this.shared.settings[this.SETTINGS.LAYER.QUALITY] as string | number);
+
+  updateView = (isForce = false, isFast = false) => this.emit(this.updateEvent, { ...this.state, isForce, isFast } satisfies ViewUpdatePayload);
+  updateViewForce = () => this.emit(this.updateEvent, { ...this.state, isForce: true } satisfies ViewUpdatePayload);
+  updateViewFast = () => this.emit(this.updateEvent, { ...this.state, isFast: true } satisfies ViewUpdatePayload);
+
+  updateStateAndView = (state: Partial<TState>, isForce = false, isFast = false) => {
+    this.updateState(state);
+
+    return this.updateView(isForce, isFast);
+  };
+
+  updateStateAndViewForce = (state: Partial<TState>) => this.updateStateAndView(state, true, false);
+  updateStateAndViewFast = (state: Partial<TState>) => this.updateStateAndView(state, false, true);
+
+  incCurrentItem = () => this.setCurrentItem((this.currentItem ?? 0) + 1, 0);
+  decCurrentItem = () => this.setCurrentItem((this.currentItem ?? 0) - 1, this.maxCurrentItem);
+
+  setCurrentItem = async (value: number, defaultValue: number) => {
+    if (this.currentItem === null) {
+      this.currentItem = defaultValue;
+    } else {
+      this.currentItem = value;
+      if (this.currentItem > this.maxCurrentItem) this.currentItem = 0;
+      if (this.currentItem < 0) this.currentItem = this.maxCurrentItem;
+    }
+
+    this.updateStateAndViewFast({ currentItem: this.currentItem } as Partial<TState>);
+  };
+
+  unsetCurrentItem = () => {
+    this.currentItem = null;
+    this.updateStateAndViewFast({ currentItem: this.currentItem } as Partial<TState>);
+  };
+
+  getDefaultState = (): TState => ({ isShow: false, isForce: false } as TState);
+}

package/src/modules/view.ts

@@ -0,0 +1,57 @@
+import { Module, type ModuleInitResult } from "@vnejs/module";
+import { createStore, type StoreApi } from "zustand/vanilla";
+
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "../types.js";
+import type { ComponentInjectResult, ViewRenderFunc, ViewUpdateState } from "../utils/components.js";
+
+export abstract class ModuleView<
+  TEvents extends ModuleComponentsEvents = ModuleComponentsEvents,
+  TConstants extends ModuleComponentsConstants = ModuleComponentsConstants,
+  TSettings extends ModuleComponentsSettings = ModuleComponentsSettings,
+  TParams extends ModuleComponentsParams = ModuleComponentsParams,
+  TState extends ViewUpdateState = ViewUpdateState,
+> extends Module<TEvents, TConstants, TSettings, TParams, TState> {
+  abstract override name: string;
+
+  animationTime = 0;
+  renderFunc: ViewRenderFunc | null = null;
+  updateEvent!: string;
+  updateHandler: ((state?: TState) => Promise<void>) | null = null;
+  locLabel: string | null = null;
+
+  store: StoreApi<TState> = createStore<TState>(() => ({} as TState));
+
+  subscribe = () => {
+    if (this.updateEvent && this.updateHandler) this.on(this.updateEvent, this.updateHandler);
+  };
+
+  init = (): ModuleInitResult => {
+    if (!this.renderFunc) return;
+
+    return this.emitOne(this.EVENTS.COMPONENTS.RENDER, { name: this.name, renderFunc: this.renderFunc, store: this.store });
+  };
+
+  onUpdateStoreComponent = async (state: TState = {} as TState) => {
+    if (!this.isReady) await this.waitIsReady();
+
+    const injects = (await this.emitOne(this.EVENTS.COMPONENTS.INJECT, this)) as ComponentInjectResult[];
+
+    const mutableState = state as ViewUpdateState;
+
+    injects.forEach(({ field, value } = {}) => {
+      if (field) mutableState[field] = value;
+    });
+
+    if (state.isForce) {
+      this.store.setState(state);
+      await this.waitTimeout(100);
+      this.store.setState({ ...this.store.getState(), isForce: false } as TState);
+
+      return;
+    }
+
+    this.store.setState(state);
+
+    if (!state.isFast) await this.waitTimeout(this.animationTime);
+  };
+}

package/src/types.ts

@@ -0,0 +1,33 @@
+import "@vnejs/plugins.core.components.contract";
+
+import type { VnePluginConstantsMapRegistry, VnePluginEventsMapRegistry, VnePluginParamsMapRegistry, VnePluginSettingsMapRegistry } from "@vnejs/shared";
+import type { Constants as ComponentsConstants, PluginName as ComponentsPluginName, SubscribeEvents as ComponentsSubscribeEvents } from "@vnejs/plugins.core.components.contract";
+import type { Constants as LogsConstants, PluginName as LogsPluginName, SubscribeEvents as LogsSubscribeEvents } from "@vnejs/plugins.core.logs.contract";
+import type { Constants as MediaConstants, PluginName as MediaPluginName, SubscribeEvents as MediaSubscribeEvents } from "@vnejs/plugins.core.media.contract";
+
+export const CONTROLS_EVENTS = {
+  EMIT: "vne:controls:emit",
+  PUSH: "vne:controls:push",
+  POP: "vne:controls:pop",
+} as const;
+
+export const LAYER_SETTINGS_KEYS = {
+  WIDTH: "vne:canvas:width",
+  HEIGHT: "vne:canvas:height",
+  QUALITY: "vne:canvas:quality",
+} as const;
+
+type ControlsPluginName = "CONTROLS";
+type LayerPluginName = "LAYER";
+
+export type ModuleComponentsEvents = VnePluginEventsMapRegistry &
+  Record<ComponentsPluginName, ComponentsSubscribeEvents> &
+  Record<LogsPluginName, LogsSubscribeEvents> &
+  Record<MediaPluginName, MediaSubscribeEvents> &
+  Record<ControlsPluginName, typeof CONTROLS_EVENTS>;
+
+export type ModuleComponentsConstants = VnePluginConstantsMapRegistry & Record<ComponentsPluginName, ComponentsConstants> & Record<MediaPluginName, MediaConstants>;
+
+export type ModuleComponentsSettings = VnePluginSettingsMapRegistry & Record<LayerPluginName, typeof LAYER_SETTINGS_KEYS>;
+
+export type ModuleComponentsParams = VnePluginParamsMapRegistry;

package/src/utils/components.ts

@@ -0,0 +1,48 @@
+import type { Module } from "@vnejs/module";
+
+export type ViewActionPayload = {
+  isForce?: boolean;
+  onClose?: () => void;
+  [key: string]: unknown;
+};
+
+export type ViewUpdateState = {
+  isForce?: boolean;
+  isFast?: boolean;
+  [key: string]: unknown;
+};
+
+export type ComponentInjectResult = {
+  field?: string;
+  value?: unknown;
+};
+
+export type ViewRenderProps = Record<string, unknown> & {
+  onMount?: () => void;
+  store?: unknown;
+};
+
+export type ViewRenderFunc = (props: ViewRenderProps, root: HTMLDivElement) => void;
+
+export type MediaLoadPayload = {
+  type?: string;
+  priority?: number;
+  quality?: string | number;
+  name?: string;
+  mediaType?: string;
+};
+
+export type ControlsPushPayload = {
+  key?: string;
+  controls?: Record<string, () => void | Promise<void>>;
+  index?: number;
+  checkNext?: boolean;
+};
+
+export type ControlsPopPayload = {
+  key?: string;
+};
+
+export type ViewUpdatePayload = ViewUpdateState;
+
+export type ComponentsInjectHandler = (component: Module) => ComponentInjectResult | Promise<ComponentInjectResult>;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["dist", "node_modules"]
+}

package/index.d.ts

@@ -1,58 +0,0 @@
-import { GlobalState, Module } from "@vnejs/module";
-
-export class ModuleController extends Module {
-  currentItem: number | null;
-  maxCurrentItem: number;
-
-  beforeShow?: () => Promise<void>;
-  afterShow?: () => Promise<void>;
-  beforeHide?: () => Promise<void>;
-  afterHide?: () => Promise<void>;
-
-  bgName?: string;
-  updateEvent: string;
-
-  controls?: Record<string, any>;
-  controlsIndex?: number;
-  controlsCheckNext?: Boolean;
-
-  onHide: (...args: any[]) => Promise<void>;
-  onShow: (...args: any[]) => Promise<void>;
-  onHideForce: (...args: any[]) => Promise<void>;
-  onShowForce: (...args: any[]) => Promise<void>;
-  onUpdateStateFromGlobalState: (state: GlobalState) => Promise<void>;
-
-  setShow: (value: Boolean, isForce?: Boolean) => Promise<void>;
-
-  loadImageMedia: (name: string, mediaType: string, quality: string) => Promise<void>;
-  loadBgMedia: () => Promise<void>;
-
-  updateView: (isForce: Boolean, isFast: Boolean) => Promise<void>;
-
-  updateViewForce: () => Promise<void>;
-  updateViewFast: () => Promise<void>;
-  updateStateAndView: (state: any, isForce: Boolean, isFast: Boolean) => Promise<void>;
-  updateStateAndViewForce: (state: any) => Promise<void>;
-  updateStateAndViewFast: (state: any) => Promise<void>;
-
-  incCurrentItem: () => void;
-  decCurrentItem: () => void;
-  setCurrentItem: (value: number, defaultValue: number) => void;
-  unsetCurrentItem: () => void;
-}
-
-export class ModuleView extends Module {
-  animationTime: number;
-  renderFunc: () => void;
-  updateEvent: string;
-  updateHandler: () => Promise<void>;
-  canvasInfo: any;
-  locLabel?: string;
-
-  regCanvas: () => Promise<void>;
-  regComponent: () => Promise<void>;
-
-  onUpdateStoreComponent: (state: any) => Promise<void>;
-
-  insertExtraDataToState: (state: any) => Promise<any>;
-}

package/index.js

@@ -1,2 +0,0 @@
-export * from "./modules/controller";
-export * from "./modules/view";

package/modules/controller.js

@@ -1,89 +0,0 @@
-import { Module } from "@vnejs/module";
-
-export class ModuleController extends Module {
-  currentItem = null;
-  maxCurrentItem = 0;
-
-  beforeShow = null;
-  afterShow = null;
-  beforeHide = null;
-  afterHide = null;
-
-  bgName = null;
-  updateEvent = null;
-
-  controls = null;
-  controlsIndex = 0;
-  controlsCheckNext = false;
-
-  isOnlyLocalState = true;
-
-  onHide = async ({ isForce = false, ...args } = {}) => {
-    if (!this.state.isShow) return;
-    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "hide" } });
-    if (this.beforeHide) await this.beforeHide(args);
-    if (this.controls) await this.emit(this.EVENTS.CONTROLS.POP, { key: this.name });
-    await this.setShow(false, Boolean(isForce || this.shared.viewForceAnimationSources.length));
-    if (this.onClose) {
-      this.onClose();
-      delete this.onClose;
-    }
-    if (this.afterHide) await this.afterHide(args);
-    this.unsetCurrentItem();
-  };
-  onShow = async ({ isForce = false, onClose, ...args } = {}) => {
-    if (this.state.isShow) return;
-    this.currentItem = null;
-    this.state = { ...this.state, currentItem: null };
-    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "show" } });
-    if (onClose) this.onClose = onClose;
-    if (this.beforeShow) await this.beforeShow(args);
-    await this.setShow(true, Boolean(isForce || this.shared.viewForceAnimationSources.length));
-    if (this.controls)
-      await this.emit(this.EVENTS.CONTROLS.PUSH, { key: this.name, controls: this.controls, index: this.controlsIndex, checkNext: this.controlsCheckNext });
-    if (this.afterShow) await this.afterShow(args);
-  };
-  onHideForce = (args) => this.onHide({ ...args, isForce: true });
-  onShowForce = (args) => this.onShow({ ...args, isForce: true });
-  onUpdateStateFromGlobalState = ({ [this.name]: state } = {}) => this.updateStateAndViewForce(state);
-
-  setShow = (value, isForce = false) => this.updateStateAndView({ isShow: value }, isForce);
-
-  loadImageMedia = (name, mediaType, quality) => {
-    const [type, priority] = [this.CONST.MEDIA.TYPES.IMAGE, this.CONST.MEDIA.PRIORITIES.HIGH];
-
-    return this.emitOne(this.EVENTS.MEDIA.LOAD, { type, priority, quality, name, mediaType });
-  };
-  loadBgMedia = () => this.loadImageMedia(`bg/${this.bgName}`, "view", this.shared.settings[this.SETTINGS.LAYER.QUALITY]);
-
-  updateView = (isForce = false, isFast = false) => this.emit(this.updateEvent, { ...this.state, isForce, isFast });
-  updateViewForce = () => this.emit(this.updateEvent, { ...this.state, isForce: true });
-  updateViewFast = () => this.emit(this.updateEvent, { ...this.state, isFast: true });
-  updateStateAndView = (state, isForce = false, isFast = false) => {
-    this.updateState(state);
-
-    return this.updateView(isForce, isFast);
-  };
-  updateStateAndViewForce = (state) => this.updateStateAndView(state, true, false);
-  updateStateAndViewFast = (state) => this.updateStateAndView(state, false, true);
-
-  incCurrentItem = () => this.setCurrentItem(this.currentItem + 1, 0);
-  decCurrentItem = () => this.setCurrentItem(this.currentItem - 1, this.maxCurrentItem);
-  setCurrentItem = async (value, defaultValue) => {
-    if (this.currentItem === null) {
-      this.currentItem = defaultValue;
-    } else {
-      this.currentItem = value;
-      if (this.currentItem > this.maxCurrentItem) this.currentItem = 0;
-      if (this.currentItem < 0) this.currentItem = this.maxCurrentItem;
-    }
-
-    this.updateStateAndViewFast({ currentItem: this.currentItem });
-  };
-  unsetCurrentItem = () => {
-    this.currentItem = null;
-    this.updateStateAndViewFast({ currentItem: this.currentItem });
-  };
-
-  getDefaultState = () => ({ isShow: false, isForce: false });
-}

package/modules/view.js

@@ -1,43 +0,0 @@
-import { Module } from "@vnejs/module";
-
-import { createStore } from "zustand/vanilla";
-
-export class ModuleView extends Module {
-  animationTime = 0;
-  renderFunc = null;
-  updateEvent = null;
-  updateHandler = null;
-  locLabel = null;
-
-  store = createStore(() => ({}));
-
-  subscribe = () => {
-    if (this.updateEvent && this.updateHandler) this.on(this.updateEvent, this.updateHandler);
-  };
-
-  init = () => this.renderFunc && this.emitOne(this.EVENTS.COMPONENTS.RENDER, { name: this.name, renderFunc: this.renderFunc, store: this.store });
-
-  onUpdateStoreComponent = async (state = {}) => {
-    if (!this.isReady) await this.waitIsReady();
-
-    const injects = await this.emitOne(this.EVENTS.COMPONENTS.INJECT, this);
-
-    injects.forEach(({ field, value } = {}) => {
-      if (field) state[field] = value;
-    });
-
-    return new Promise(async (resolve) => {
-      if (state.isForce) {
-        this.store.setState(state);
-        // FIXME
-        await this.waitTimeout(100);
-        this.store.setState({ ...this.store.getState(), isForce: false });
-        return resolve();
-      }
-
-      this.store.setState(state);
-
-      return state.isFast ? resolve() : setTimeout(resolve, this.animationTime);
-    });
-  };
-}