@vnejs/plugins.views.screens.loading 0.1.4 → 0.1.5

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/modules/controller.d.ts

@@ -0,0 +1,13 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { LoadingPluginConstants, LoadingPluginEvents, LoadingPluginParams, LoadingPluginSettings } from "../types.js";
+import type { LoadingPluginState } from "../utils/loading.js";
+export declare class LoadingController extends ModuleController<LoadingPluginEvents, LoadingPluginConstants, LoadingPluginSettings, LoadingPluginParams, LoadingPluginState> {
+    name: string;
+    bgName: string;
+    controls: {};
+    controlsIndex: number;
+    updateEvent: "vne:loading:update";
+    subscribe: () => void;
+    beforeShow: () => Promise<void>;
+    onMemoryCleared: () => Promise<unknown[] | undefined>;
+}

package/dist/modules/controller.js

@@ -0,0 +1,16 @@
+import { ModuleController } from "@vnejs/module.components";
+export class LoadingController extends ModuleController {
+    name = "loading.controller";
+    bgName = this.PARAMS.LOADING.BACKGROUND;
+    controls = {};
+    controlsIndex = this.PARAMS.LOADING.ZINDEX;
+    updateEvent = this.EVENTS.LOADING.UPDATE;
+    subscribe = () => {
+        this.on(this.EVENTS.LOADING.SHOW, this.onShow);
+        this.on(this.EVENTS.LOADING.HIDE, this.onHide);
+        this.on(this.EVENTS.SYSTEM.STARTED, this.loadBgMedia);
+        this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+    };
+    beforeShow = async () => this.updateState({ bgSrc: (await this.loadBgMedia()).src });
+    onMemoryCleared = async () => this.updateStateAndViewFast({ bgSrc: (await this.loadBgMedia()).src });
+}

package/dist/modules/loading.d.ts

@@ -0,0 +1,8 @@
+import { Module } from "@vnejs/module";
+import type { LoadingPluginConstants, LoadingPluginEvents, LoadingPluginParams, LoadingPluginSettings } from "../types.js";
+import type { LoadingEmitPayload, LoadingPluginState } from "../utils/loading.js";
+export declare class Loading extends Module<LoadingPluginEvents, LoadingPluginConstants, LoadingPluginSettings, LoadingPluginParams, LoadingPluginState> {
+    name: string;
+    subscribe: () => void;
+    onLoadingEmit: ({ promiseFunc }?: LoadingEmitPayload) => Promise<void>;
+}

package/dist/modules/loading.js

@@ -0,0 +1,14 @@
+import { Module } from "@vnejs/module";
+export class Loading extends Module {
+    name = "loading";
+    subscribe = () => {
+        this.on(this.EVENTS.LOADING.EMIT, this.onLoadingEmit);
+    };
+    onLoadingEmit = async ({ promiseFunc } = {}) => {
+        this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "start" } });
+        await this.emit(this.EVENTS.LOADING.SHOW);
+        await Promise.all([promiseFunc?.(), this.waitTimeout(this.PARAMS.LOADING.MIN_SHOW_TIME)]);
+        await this.emit(this.EVENTS.LOADING.HIDE);
+        this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "finish" } });
+    };
+}

package/dist/modules/view.d.ts

@@ -0,0 +1,11 @@
+import { ModuleView } from "@vnejs/module.components";
+import type { LoadingPluginConstants, LoadingPluginEvents, LoadingPluginParams, LoadingPluginSettings } from "../types.js";
+import type { LoadingPluginState } from "../utils/loading.js";
+export declare class LoadingView extends ModuleView<LoadingPluginEvents, LoadingPluginConstants, LoadingPluginSettings, LoadingPluginParams, LoadingPluginState> {
+    name: string;
+    locLabel: string;
+    animationTime: number;
+    updateEvent: "vne:loading:update";
+    renderFunc: import("@vnejs/module.components").ViewRenderFunc<LoadingPluginState>;
+    updateHandler: (state?: LoadingPluginState | undefined) => Promise<void>;
+}

package/dist/modules/view.js

@@ -0,0 +1,10 @@
+import { ModuleView } from "@vnejs/module.components";
+import { render } from "../view/index.js";
+export class LoadingView extends ModuleView {
+    name = "loading.view";
+    locLabel = this.PARAMS.LOADING.LOC_LABEL;
+    animationTime = this.PARAMS.LOADING.TRANSITION;
+    updateEvent = this.EVENTS.LOADING.UPDATE;
+    renderFunc = render;
+    updateHandler = this.onUpdateStoreComponent;
+}

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { PluginName as LogsPluginName, SubscribeEvents as LogsSubscribeEvents } from "@vnejs/plugins.core.logs.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { PluginName as SystemPluginName, SubscribeEvents as SystemSubscribeEvents } from "@vnejs/plugins.core.system.contract";
+import type { PluginName as LocsPluginName, SubscribeEvents as LocsSubscribeEvents } from "@vnejs/plugins.text.locs.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.screens.loading.contract";
+export type LoadingPluginEvents = ModuleComponentsEvents & Record<PluginName, SubscribeEvents> & Record<LogsPluginName, LogsSubscribeEvents> & Record<MemoryPluginName, MemorySubscribeEvents> & Record<SystemPluginName, SystemSubscribeEvents> & Record<LocsPluginName, LocsSubscribeEvents>;
+export type LoadingPluginConstants = ModuleComponentsConstants;
+export type LoadingPluginSettings = ModuleComponentsSettings;
+export type LoadingPluginParams = ModuleComponentsParams & Record<PluginName, Params>;

package/dist/types.js

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

package/dist/utils/loading.d.ts

@@ -0,0 +1,17 @@
+import type { Module } from "@vnejs/module";
+import type { LoadingPluginConstants, LoadingPluginEvents, LoadingPluginParams, LoadingPluginSettings } from "../types.js";
+export type LoadingPluginState = {
+    isShow: boolean;
+    isForce: boolean;
+    bgSrc?: string;
+    locs?: Record<string, string>;
+};
+export type LoadingEmitPayload = {
+    promiseFunc?: () => void | Promise<void>;
+    source?: string;
+};
+export type LoadingViewContext = {
+    emit: Module<LoadingPluginEvents, LoadingPluginConstants, LoadingPluginSettings, LoadingPluginParams, LoadingPluginState>["emit"];
+    EVENTS: LoadingPluginEvents;
+    PARAMS: LoadingPluginParams;
+};

package/dist/utils/loading.js

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

package/dist/view/index.d.ts

@@ -0,0 +1,3 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { LoadingPluginState } from "../utils/loading.js";
+export declare const render: ViewRenderFunc<LoadingPluginState>;

package/dist/view/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PositionBox, Screen, Text, createRenderFunc, useMemo, useStoreState } from "@vnejs/uis.react";
+const Loading = ({ store, onMount, PARAMS }) => {
+    const { isShow = false, isForce = false, bgSrc = "", locs = {} } = useStoreState(store, onMount);
+    const propsText = useMemo(() => ({ ...PARAMS.LOADING.VIEW_PROPS.text, text: locs.text }), [locs, PARAMS.LOADING.VIEW_PROPS.text]);
+    const propsScreen = useMemo(() => ({ ...PARAMS.LOADING.VIEW_PROPS.screen, bgSrc, isShow, isForce }), [bgSrc, isShow, isForce, PARAMS.LOADING.VIEW_PROPS.screen]);
+    return (_jsx(Screen, { ...propsScreen, children: _jsx(PositionBox, { ...PARAMS.LOADING.VIEW_PROPS.position, children: _jsx(Text, { ...propsText }) }) }));
+};
+export const render = createRenderFunc(Loading);

package/package.json

@@ -1,17 +1,48 @@
 {
   "name": "@vnejs/plugins.views.screens.loading",
-  "version": "0.1.4",
-  "main": "index.js",
+  "version": "0.1.5",
+  "description": "",
+  "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",
+    "build": "npx @vnejs/monorepo package",
     "publish:major:plugin": "npm run publish:major",
     "publish:minor:plugin": "npm run publish:minor",
     "publish:patch:plugin": "npm run publish:patch",
-    "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"
+    "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",
-  "description": ""
+  "dependencies": {
+    "@vnejs/plugins.views.screens.loading.contract": "~0.0.1"
+  },
+  "peerDependencies": {
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/module.components": "~0.0.1",
+    "@vnejs/plugins.core.logs.contract": "~0.0.1",
+    "@vnejs/plugins.core.memory.contract": "~0.0.1",
+    "@vnejs/plugins.core.system.contract": "~0.0.1",
+    "@vnejs/plugins.text.locs.contract": "~0.0.1",
+    "@vnejs/shared": "~0.0.9",
+    "@vnejs/uis.react": "~0.1.0"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.0.1"
+  }
 }

package/src/index.ts

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

package/{modules/controller.js → src/modules/controller.ts}

@@ -1,6 +1,15 @@
 import { ModuleController } from "@vnejs/module.components";
 
-export class LoadingController extends ModuleController {
+import type { LoadingPluginConstants, LoadingPluginEvents, LoadingPluginParams, LoadingPluginSettings } from "../types.js";
+import type { LoadingPluginState } from "../utils/loading.js";
+
+export class LoadingController extends ModuleController<
+  LoadingPluginEvents,
+  LoadingPluginConstants,
+  LoadingPluginSettings,
+  LoadingPluginParams,
+  LoadingPluginState
+> {
   name = "loading.controller";
 
   bgName = this.PARAMS.LOADING.BACKGROUND;

package/src/modules/loading.ts

@@ -0,0 +1,26 @@
+import { Module } from "@vnejs/module";
+
+import type { LoadingPluginConstants, LoadingPluginEvents, LoadingPluginParams, LoadingPluginSettings } from "../types.js";
+import type { LoadingEmitPayload, LoadingPluginState } from "../utils/loading.js";
+
+export class Loading extends Module<
+  LoadingPluginEvents,
+  LoadingPluginConstants,
+  LoadingPluginSettings,
+  LoadingPluginParams,
+  LoadingPluginState
+> {
+  name = "loading";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LOADING.EMIT, this.onLoadingEmit);
+  };
+
+  onLoadingEmit = async ({ promiseFunc }: LoadingEmitPayload = {}) => {
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "start" } });
+    await this.emit(this.EVENTS.LOADING.SHOW);
+    await Promise.all([promiseFunc?.(), this.waitTimeout(this.PARAMS.LOADING.MIN_SHOW_TIME)]);
+    await this.emit(this.EVENTS.LOADING.HIDE);
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "finish" } });
+  };
+}

package/src/modules/view.ts

@@ -0,0 +1,22 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view/index.js";
+import type { LoadingPluginConstants, LoadingPluginEvents, LoadingPluginParams, LoadingPluginSettings } from "../types.js";
+import type { LoadingPluginState } from "../utils/loading.js";
+
+export class LoadingView extends ModuleView<
+  LoadingPluginEvents,
+  LoadingPluginConstants,
+  LoadingPluginSettings,
+  LoadingPluginParams,
+  LoadingPluginState
+> {
+  name = "loading.view";
+
+  locLabel = this.PARAMS.LOADING.LOC_LABEL;
+  animationTime = this.PARAMS.LOADING.TRANSITION;
+  updateEvent = this.EVENTS.LOADING.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/src/types.ts

@@ -0,0 +1,19 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { PluginName as LogsPluginName, SubscribeEvents as LogsSubscribeEvents } from "@vnejs/plugins.core.logs.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { PluginName as SystemPluginName, SubscribeEvents as SystemSubscribeEvents } from "@vnejs/plugins.core.system.contract";
+import type { PluginName as LocsPluginName, SubscribeEvents as LocsSubscribeEvents } from "@vnejs/plugins.text.locs.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.screens.loading.contract";
+
+export type LoadingPluginEvents = ModuleComponentsEvents &
+  Record<PluginName, SubscribeEvents> &
+  Record<LogsPluginName, LogsSubscribeEvents> &
+  Record<MemoryPluginName, MemorySubscribeEvents> &
+  Record<SystemPluginName, SystemSubscribeEvents> &
+  Record<LocsPluginName, LocsSubscribeEvents>;
+
+export type LoadingPluginConstants = ModuleComponentsConstants;
+
+export type LoadingPluginSettings = ModuleComponentsSettings;
+
+export type LoadingPluginParams = ModuleComponentsParams & Record<PluginName, Params>;

package/src/utils/loading.ts

@@ -0,0 +1,21 @@
+import type { Module } from "@vnejs/module";
+
+import type { LoadingPluginConstants, LoadingPluginEvents, LoadingPluginParams, LoadingPluginSettings } from "../types.js";
+
+export type LoadingPluginState = {
+  isShow: boolean;
+  isForce: boolean;
+  bgSrc?: string;
+  locs?: Record<string, string>;
+};
+
+export type LoadingEmitPayload = {
+  promiseFunc?: () => void | Promise<void>;
+  source?: string;
+};
+
+export type LoadingViewContext = {
+  emit: Module<LoadingPluginEvents, LoadingPluginConstants, LoadingPluginSettings, LoadingPluginParams, LoadingPluginState>["emit"];
+  EVENTS: LoadingPluginEvents;
+  PARAMS: LoadingPluginParams;
+};

package/src/view/index.tsx

@@ -0,0 +1,34 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { PositionBox, Screen, Text, createRenderFunc, useMemo, useStoreState } from "@vnejs/uis.react";
+
+import type { LoadingPluginConstants, LoadingPluginEvents, LoadingPluginParams, LoadingPluginSettings } from "../types.js";
+import type { LoadingPluginState } from "../utils/loading.js";
+
+type LoadingComponentProps = ReactComponentProps<
+  LoadingPluginEvents,
+  LoadingPluginConstants,
+  LoadingPluginSettings,
+  LoadingPluginParams,
+  LoadingPluginState
+>;
+
+const Loading = ({ store, onMount, PARAMS }: LoadingComponentProps) => {
+  const { isShow = false, isForce = false, bgSrc = "", locs = {} } = useStoreState<LoadingPluginState>(store, onMount);
+
+  const propsText = useMemo(() => ({ ...PARAMS.LOADING.VIEW_PROPS.text, text: locs.text }), [locs, PARAMS.LOADING.VIEW_PROPS.text]);
+  const propsScreen = useMemo(
+    () => ({ ...PARAMS.LOADING.VIEW_PROPS.screen, bgSrc, isShow, isForce }),
+    [bgSrc, isShow, isForce, PARAMS.LOADING.VIEW_PROPS.screen],
+  );
+
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...PARAMS.LOADING.VIEW_PROPS.position}>
+        <Text {...propsText} />
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render: ViewRenderFunc<LoadingPluginState> = createRenderFunc(Loading);

package/tsconfig.json

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

package/const/events.js

@@ -1,6 +0,0 @@
-export const SUBSCRIBE_EVENTS = {
-  SHOW: "vne:loading:show",
-  HIDE: "vne:loading:hide",
-  EMIT: "vne:loading:emit",
-  UPDATE: "vne:loading:update",
-};

package/const/params.js

@@ -1,13 +0,0 @@
-export const MIN_SHOW_TIME = 200;
-
-export const BACKGROUND = "loading";
-
-export const TRANSITION = 500;
-export const ZINDEX = 10000;
-export const LOC_LABEL = "loading";
-
-export const VIEW_PROPS = {
-  position: { bottom: 120, right: 120 },
-  text: { size: 144 },
-  screen: { transition: TRANSITION, zIndex: ZINDEX },
-};

package/index.js

@@ -1,10 +0,0 @@
-import { regPlugin } from "@vnejs/shared";
-
-import { SUBSCRIBE_EVENTS } from "./const/events";
-import * as params from "./const/params";
-
-import { LoadingController } from "./modules/controller";
-import { Loading } from "./modules/loading";
-import { LoadingView } from "./modules/view";
-
-regPlugin("LOADING", { events: SUBSCRIBE_EVENTS, params }, [LoadingController, Loading, LoadingView]);

package/modules/loading.js

@@ -1,17 +0,0 @@
-import { Module } from "@vnejs/module";
-
-export class Loading extends Module {
-  name = "loading";
-
-  subscribe = () => {
-    this.on(this.EVENTS.LOADING.EMIT, this.onLoadingEmit);
-  };
-
-  onLoadingEmit = async ({ promiseFunc } = {}) => {
-    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "start" } });
-    await this.emit(this.EVENTS.LOADING.SHOW);
-    await Promise.all([promiseFunc(), this.waitTimeout(this.PARAMS.LOADING.MIN_SHOW_TIME)]);
-    await this.emit(this.EVENTS.LOADING.HIDE);
-    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "finish" } });
-  };
-}

package/modules/view.js

@@ -1,14 +0,0 @@
-import { ModuleView } from "@vnejs/module.components";
-
-import { render } from "../view";
-
-export class LoadingView extends ModuleView {
-  name = "loading.view";
-
-  locLabel = this.PARAMS.LOADING.LOC_LABEL;
-  animationTime = this.PARAMS.LOADING.TRANSITION;
-  updateEvent = this.EVENTS.LOADING.UPDATE;
-
-  renderFunc = render;
-  updateHandler = this.onUpdateStoreComponent;
-}

package/view/index.jsx

@@ -1,24 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { createRoot } from "react-dom/client";
-
-import { PositionBox, Screen, Text } from "@vnejs/uis.react";
-
-const Loading = ({ store, onMount, ...props }) => {
-  const [{ isShow = false, isForce = false, bgSrc = "", locs = {} }, setState] = useState({});
-
-  useEffect(() => store.subscribe(setState), []);
-  useEffect(() => void onMount(), []);
-
-  const propsText = useMemo(() => ({ ...props.PARAMS.LOADING.VIEW_PROPS.text, text: locs.text }), [locs]);
-  const propsScreen = useMemo(() => ({ ...props.PARAMS.LOADING.VIEW_PROPS.screen, bgSrc, isShow, isForce }), [bgSrc, isShow, isForce]);
-
-  return (
-    <Screen {...propsScreen}>
-      <PositionBox {...props.PARAMS.LOADING.VIEW_PROPS.position}>
-        <Text {...propsText} />
-      </PositionBox>
-    </Screen>
-  );
-};
-
-export const render = (props, root) => createRoot(root).render(<Loading {...props} />);