@vnejs/plugins.views.screens.intro 0.1.7 → 0.1.9

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.intro.contract";
+import { IntroController } from "./modules/controller.js";
+import { Intro } from "./modules/intro.js";
+import { IntroView } from "./modules/view.js";
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [IntroController, Intro, IntroView]);

package/dist/modules/controller.d.ts

@@ -0,0 +1,15 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { IntroPluginConstants, IntroPluginEvents, IntroPluginParams, IntroPluginSettings } from "../types.js";
+import type { IntroPluginState } from "../utils/intro.js";
+export declare class IntroController extends ModuleController<IntroPluginEvents, IntroPluginConstants, IntroPluginSettings, IntroPluginParams, IntroPluginState> {
+    name: string;
+    emitInteract: () => undefined;
+    bgName: string;
+    updateEvent: "vne:intro:update";
+    controls: {
+        abstract_any: () => undefined;
+    };
+    controlsIndex: number;
+    subscribe: () => void;
+    beforeShow: () => Promise<void>;
+}

package/dist/modules/controller.js

@@ -0,0 +1,15 @@
+import { ModuleController } from "@vnejs/module.components";
+export class IntroController extends ModuleController {
+    name = "intro.controller";
+    emitInteract = () => void this.emit(this.EVENTS.INTRO.INTERACT);
+    bgName = this.PARAMS.INTRO.BACKGROUND;
+    updateEvent = this.EVENTS.INTRO.UPDATE;
+    controls = { [this.CONST.CONTROLS.BUTTONS.ANY]: this.emitInteract };
+    controlsIndex = this.PARAMS.INTRO.ZINDEX;
+    subscribe = () => {
+        this.on(this.EVENTS.INTRO.SHOW, this.onShow);
+        this.on(this.EVENTS.INTRO.HIDE, this.onHide);
+        this.on(this.EVENTS.SYSTEM.STARTED, this.loadBgMedia);
+    };
+    beforeShow = async () => this.updateState({ bgSrc: (await this.loadBgMedia()).src });
+}

package/dist/modules/intro.d.ts

@@ -0,0 +1,14 @@
+import { Module } from "@vnejs/module";
+import type { IntroPluginConstants, IntroPluginEvents, IntroPluginParams, IntroPluginSettings } from "../types.js";
+import type { IntroLineExecPayload } from "../utils/intro.js";
+export declare class Intro extends Module<IntroPluginEvents, IntroPluginConstants, IntroPluginSettings, IntroPluginParams> {
+    name: string;
+    isShowed: boolean;
+    subscribe: () => void;
+    init: () => Promise<unknown[]> | undefined;
+    onLineExec: ({ keywords }?: IntroLineExecPayload) => Promise<unknown[]> | undefined;
+    onIntroClick: () => Promise<void>;
+    onIntroInteract: () => Promise<void>;
+    onIntroSkip: () => void;
+    emitSkip: () => undefined;
+}

package/dist/modules/intro.js

@@ -0,0 +1,32 @@
+import { Module } from "@vnejs/module";
+export class Intro extends Module {
+    name = "intro";
+    isShowed = false;
+    subscribe = () => {
+        this.on(this.EVENTS.INTRO.SKIP, this.onIntroSkip);
+        this.on(this.EVENTS.INTRO.CLICK, this.onIntroClick);
+        this.on(this.EVENTS.INTRO.INTERACT, this.onIntroInteract);
+    };
+    init = () => this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: this.name, handler: this.onLineExec });
+    onLineExec = ({ keywords = [] } = {}) => {
+        if (keywords.includes(this.CONST.SCENARIO.LINE_KEYWORDS.SKIP_IF_POSSIBLE) && this.isShowed)
+            return void this.emitSkip();
+        this.isShowed = true;
+        return this.emit(this.EVENTS.INTRO.SHOW);
+    };
+    onIntroClick = async () => {
+        this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "click" } });
+        await this.emit(this.EVENTS.INTRO.HIDE);
+        this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+    };
+    onIntroInteract = async () => {
+        this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "interact" } });
+        await this.emit(this.EVENTS.INTRO.HIDE);
+        this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+    };
+    onIntroSkip = () => {
+        this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "skip" } });
+        this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+    };
+    emitSkip = () => void this.emit(this.EVENTS.INTRO.SKIP);
+}

package/dist/modules/view.d.ts

@@ -0,0 +1,11 @@
+import { ModuleView } from "@vnejs/module.components";
+import type { IntroPluginConstants, IntroPluginEvents, IntroPluginParams, IntroPluginSettings } from "../types.js";
+import type { IntroPluginState } from "../utils/intro.js";
+export declare class IntroView extends ModuleView<IntroPluginEvents, IntroPluginConstants, IntroPluginSettings, IntroPluginParams, IntroPluginState> {
+    name: string;
+    locLabel: string;
+    animationTime: number;
+    updateEvent: "vne:intro:update";
+    renderFunc: import("@vnejs/module.components").ViewRenderFunc<IntroPluginState>;
+    updateHandler: (state?: IntroPluginState | 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 IntroView extends ModuleView {
+    name = "intro.view";
+    locLabel = this.PARAMS.INTRO.LOC_LABEL;
+    animationTime = this.PARAMS.INTRO.TRANSITION;
+    updateEvent = this.EVENTS.INTRO.UPDATE;
+    renderFunc = render;
+    updateHandler = this.onUpdateStoreComponent;
+}

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { Constants as ScenarioConstants, PluginName as ScenarioPluginName, SubscribeEvents as ScenarioSubscribeEvents } from "@vnejs/plugins.core.scenario.contract";
+import type { PluginName as LogsPluginName, SubscribeEvents as LogsSubscribeEvents } from "@vnejs/plugins.core.logs.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.intro.contract";
+export type IntroPluginEvents = ModuleComponentsEvents & Record<PluginName, SubscribeEvents> & Record<ScenarioPluginName, ScenarioSubscribeEvents> & Record<SystemPluginName, SystemSubscribeEvents> & Record<LogsPluginName, LogsSubscribeEvents> & Record<LocsPluginName, LocsSubscribeEvents>;
+export type IntroPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants> & Record<ScenarioPluginName, ScenarioConstants>;
+export type IntroPluginSettings = ModuleComponentsSettings;
+export type IntroPluginParams = ModuleComponentsParams & Record<PluginName, Params>;

package/dist/types.js

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

package/dist/utils/intro.d.ts

@@ -0,0 +1,9 @@
+export type IntroPluginState = {
+    isShow: boolean;
+    isForce: boolean;
+    bgSrc?: string;
+    locs?: Record<string, string>;
+};
+export type IntroLineExecPayload = {
+    keywords?: string[];
+};

package/dist/utils/intro.js

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

package/dist/view/components/IntroHint.d.ts

@@ -0,0 +1,8 @@
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import type { IntroPluginConstants, IntroPluginEvents, IntroPluginParams, IntroPluginSettings } from "../../types.js";
+import type { IntroPluginState } from "../../utils/intro.js";
+type IntroHintProps = ReactComponentProps<IntroPluginEvents, IntroPluginConstants, IntroPluginSettings, IntroPluginParams, IntroPluginState> & {
+    text?: string;
+};
+export declare const IntroHint: ({ text, PARAMS }: IntroHintProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/view/components/IntroHint.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PositionBox, Text, useMemo } from "@vnejs/uis.react";
+export const IntroHint = ({ text = "", PARAMS }) => {
+    const propsText = useMemo(() => ({ ...PARAMS.INTRO.VIEW_PROPS.hint.text, text }), [text, PARAMS.INTRO.VIEW_PROPS.hint.text]);
+    return (_jsx(PositionBox, { ...PARAMS.INTRO.VIEW_PROPS.hint.position, children: _jsx(Text, { ...propsText }) }));
+};

package/dist/view/components/IntroTexts.d.ts

@@ -0,0 +1,8 @@
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import type { IntroPluginConstants, IntroPluginEvents, IntroPluginParams, IntroPluginSettings } from "../../types.js";
+import type { IntroPluginState } from "../../utils/intro.js";
+type IntroTextsProps = ReactComponentProps<IntroPluginEvents, IntroPluginConstants, IntroPluginSettings, IntroPluginParams, IntroPluginState> & {
+    text?: string;
+};
+export declare const IntroTexts: ({ text, PARAMS }: IntroTextsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/view/components/IntroTexts.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { Flex, PositionBox, Text, useMemo } from "@vnejs/uis.react";
+const renderText = ({ text, props }, i) => (_createElement(Text, { ...props, text: text, key: i }));
+export const IntroTexts = ({ text = "", PARAMS }) => {
+    const propsByView = PARAMS.INTRO.VIEW_PROPS.texts;
+    const textsObj = useMemo(() => text.split("\n").map((line) => ({ text: line, props: PARAMS.INTRO.VIEW_PROPS.texts.text })), [text, PARAMS.INTRO.VIEW_PROPS.texts.text]);
+    return (_jsx(PositionBox, { ...propsByView.position, children: _jsx(Flex, { ...propsByView.flex, children: textsObj.map(renderText) }) }));
+};

package/dist/view/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./IntroHint.js";
+export * from "./IntroTexts.js";

package/dist/view/components/index.js

@@ -0,0 +1,2 @@
+export * from "./IntroHint.js";
+export * from "./IntroTexts.js";

package/dist/view/index.d.ts

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

package/dist/view/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Screen, createRenderFunc, useCallback, useMemo, useStoreState } from "@vnejs/uis.react";
+import { IntroHint, IntroTexts } from "./components/index.js";
+const Intro = ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS }) => {
+    const { isShow = false, isForce = false, bgSrc = "", locs = {} } = useStoreState(store, onMount);
+    const onClick = useCallback(() => void emit(EVENTS.INTRO.CLICK), [emit, EVENTS.INTRO.CLICK]);
+    const propsTexts = useMemo(() => ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, text: locs.intro }), [store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, locs.intro]);
+    const propsHint = useMemo(() => ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, text: locs.hint }), [store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, locs.hint]);
+    const propsScreen = useMemo(() => ({ ...PARAMS.INTRO.VIEW_PROPS.screen, bgSrc, isShow, isForce, onClick }), [bgSrc, isShow, isForce, onClick, PARAMS.INTRO.VIEW_PROPS.screen]);
+    return (_jsxs(Screen, { ...propsScreen, children: [_jsx(IntroTexts, { ...propsTexts }), _jsx(IntroHint, { ...propsHint })] }));
+};
+export const render = createRenderFunc(Intro);

package/package.json

@@ -1,17 +1,49 @@
 {
   "name": "@vnejs/plugins.views.screens.intro",
-  "version": "0.1.7",
-  "main": "index.js",
+  "version": "0.1.9",
+  "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.intro.contract": "~0.0.1"
+  },
+  "peerDependencies": {
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/module.components": "~0.0.1",
+    "@vnejs/plugins.controls.contract": "~0.0.1",
+    "@vnejs/plugins.core.logs.contract": "~0.0.1",
+    "@vnejs/plugins.core.scenario.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.intro.contract";
+
+import { IntroController } from "./modules/controller.js";
+import { Intro } from "./modules/intro.js";
+import { IntroView } from "./modules/view.js";
+
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [IntroController, Intro, IntroView]);

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

@@ -1,9 +1,18 @@
 import { ModuleController } from "@vnejs/module.components";
 
-export class IntroController extends ModuleController {
+import type { IntroPluginConstants, IntroPluginEvents, IntroPluginParams, IntroPluginSettings } from "../types.js";
+import type { IntroPluginState } from "../utils/intro.js";
+
+export class IntroController extends ModuleController<
+  IntroPluginEvents,
+  IntroPluginConstants,
+  IntroPluginSettings,
+  IntroPluginParams,
+  IntroPluginState
+> {
   name = "intro.controller";
 
-  emitInteract = () => this.emit(this.EVENTS.INTRO.INTERACT);
+  emitInteract = () => void this.emit(this.EVENTS.INTRO.INTERACT);
 
   bgName = this.PARAMS.INTRO.BACKGROUND;
   updateEvent = this.EVENTS.INTRO.UPDATE;

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

@@ -1,8 +1,13 @@
 import { Module } from "@vnejs/module";
 
-export class Intro extends Module {
+import type { IntroPluginConstants, IntroPluginEvents, IntroPluginParams, IntroPluginSettings } from "../types.js";
+import type { IntroLineExecPayload } from "../utils/intro.js";
+
+export class Intro extends Module<IntroPluginEvents, IntroPluginConstants, IntroPluginSettings, IntroPluginParams> {
   name = "intro";
 
+  isShowed = false;
+
   subscribe = () => {
     this.on(this.EVENTS.INTRO.SKIP, this.onIntroSkip);
     this.on(this.EVENTS.INTRO.CLICK, this.onIntroClick);
@@ -10,7 +15,7 @@ export class Intro extends Module {
   };
   init = () => this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: this.name, handler: this.onLineExec });
 
-  onLineExec = ({ keywords = [] } = {}) => {
+  onLineExec = ({ keywords = [] }: IntroLineExecPayload = {}) => {
     if (keywords.includes(this.CONST.SCENARIO.LINE_KEYWORDS.SKIP_IF_POSSIBLE) && this.isShowed) return void this.emitSkip();
 
     this.isShowed = true;
@@ -33,5 +38,5 @@ export class Intro extends Module {
     this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
   };
 
-  emitSkip = () => this.emit(this.EVENTS.INTRO.SKIP);
+  emitSkip = () => void this.emit(this.EVENTS.INTRO.SKIP);
 }

package/src/modules/view.ts

@@ -0,0 +1,22 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view/index.js";
+import type { IntroPluginConstants, IntroPluginEvents, IntroPluginParams, IntroPluginSettings } from "../types.js";
+import type { IntroPluginState } from "../utils/intro.js";
+
+export class IntroView extends ModuleView<
+  IntroPluginEvents,
+  IntroPluginConstants,
+  IntroPluginSettings,
+  IntroPluginParams,
+  IntroPluginState
+> {
+  name = "intro.view";
+
+  locLabel = this.PARAMS.INTRO.LOC_LABEL;
+  animationTime = this.PARAMS.INTRO.TRANSITION;
+  updateEvent = this.EVENTS.INTRO.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/src/types.ts

@@ -0,0 +1,22 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { Constants as ScenarioConstants, PluginName as ScenarioPluginName, SubscribeEvents as ScenarioSubscribeEvents } from "@vnejs/plugins.core.scenario.contract";
+import type { PluginName as LogsPluginName, SubscribeEvents as LogsSubscribeEvents } from "@vnejs/plugins.core.logs.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.intro.contract";
+
+export type IntroPluginEvents = ModuleComponentsEvents &
+  Record<PluginName, SubscribeEvents> &
+  Record<ScenarioPluginName, ScenarioSubscribeEvents> &
+  Record<SystemPluginName, SystemSubscribeEvents> &
+  Record<LogsPluginName, LogsSubscribeEvents> &
+  Record<LocsPluginName, LocsSubscribeEvents>;
+
+export type IntroPluginConstants = ModuleComponentsConstants &
+  Record<ControlsPluginName, ControlsConstants> &
+  Record<ScenarioPluginName, ScenarioConstants>;
+
+export type IntroPluginSettings = ModuleComponentsSettings;
+
+export type IntroPluginParams = ModuleComponentsParams & Record<PluginName, Params>;

package/src/utils/intro.ts

@@ -0,0 +1,10 @@
+export type IntroPluginState = {
+  isShow: boolean;
+  isForce: boolean;
+  bgSrc?: string;
+  locs?: Record<string, string>;
+};
+
+export type IntroLineExecPayload = {
+  keywords?: string[];
+};

package/src/view/components/IntroHint.tsx

@@ -0,0 +1,25 @@
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { PositionBox, Text, useMemo } from "@vnejs/uis.react";
+
+import type { IntroPluginConstants, IntroPluginEvents, IntroPluginParams, IntroPluginSettings } from "../../types.js";
+import type { IntroPluginState } from "../../utils/intro.js";
+
+type IntroHintProps = ReactComponentProps<
+  IntroPluginEvents,
+  IntroPluginConstants,
+  IntroPluginSettings,
+  IntroPluginParams,
+  IntroPluginState
+> & {
+  text?: string;
+};
+
+export const IntroHint = ({ text = "", PARAMS }: IntroHintProps) => {
+  const propsText = useMemo(() => ({ ...PARAMS.INTRO.VIEW_PROPS.hint.text, text }), [text, PARAMS.INTRO.VIEW_PROPS.hint.text]);
+
+  return (
+    <PositionBox {...PARAMS.INTRO.VIEW_PROPS.hint.position}>
+      <Text {...propsText} />
+    </PositionBox>
+  );
+};

package/src/view/components/IntroTexts.tsx

@@ -0,0 +1,38 @@
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { Flex, PositionBox, Text, useMemo } from "@vnejs/uis.react";
+
+import type { IntroPluginConstants, IntroPluginEvents, IntroPluginParams, IntroPluginSettings } from "../../types.js";
+import type { IntroPluginState } from "../../utils/intro.js";
+
+type IntroTextsProps = ReactComponentProps<
+  IntroPluginEvents,
+  IntroPluginConstants,
+  IntroPluginSettings,
+  IntroPluginParams,
+  IntroPluginState
+> & {
+  text?: string;
+};
+
+const renderText = ({ text, props }: { text: string; props: Record<string, unknown> }, i: number) => (
+  <Text
+    {...props}
+    text={text}
+    key={i}
+  />
+);
+
+export const IntroTexts = ({ text = "", PARAMS }: IntroTextsProps) => {
+  const propsByView = PARAMS.INTRO.VIEW_PROPS.texts;
+
+  const textsObj = useMemo(
+    () => text.split("\n").map((line) => ({ text: line, props: PARAMS.INTRO.VIEW_PROPS.texts.text })),
+    [text, PARAMS.INTRO.VIEW_PROPS.texts.text],
+  );
+
+  return (
+    <PositionBox {...propsByView.position}>
+      <Flex {...propsByView.flex}>{textsObj.map(renderText)}</Flex>
+    </PositionBox>
+  );
+};

package/src/view/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./IntroHint.js";
+export * from "./IntroTexts.js";

package/src/view/index.tsx

@@ -0,0 +1,43 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { Screen, createRenderFunc, useCallback, useMemo, useStoreState } from "@vnejs/uis.react";
+
+import type { IntroPluginConstants, IntroPluginEvents, IntroPluginParams, IntroPluginSettings } from "../types.js";
+import type { IntroPluginState } from "../utils/intro.js";
+import { IntroHint, IntroTexts } from "./components/index.js";
+
+type IntroComponentProps = ReactComponentProps<
+  IntroPluginEvents,
+  IntroPluginConstants,
+  IntroPluginSettings,
+  IntroPluginParams,
+  IntroPluginState
+>;
+
+const Intro = ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS }: IntroComponentProps) => {
+  const { isShow = false, isForce = false, bgSrc = "", locs = {} } = useStoreState<IntroPluginState>(store, onMount);
+
+  const onClick = useCallback(() => void emit(EVENTS.INTRO.CLICK), [emit, EVENTS.INTRO.CLICK]);
+
+  const propsTexts = useMemo(
+    () => ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, text: locs.intro }),
+    [store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, locs.intro],
+  );
+  const propsHint = useMemo(
+    () => ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, text: locs.hint }),
+    [store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, locs.hint],
+  );
+  const propsScreen = useMemo(
+    () => ({ ...PARAMS.INTRO.VIEW_PROPS.screen, bgSrc, isShow, isForce, onClick }),
+    [bgSrc, isShow, isForce, onClick, PARAMS.INTRO.VIEW_PROPS.screen],
+  );
+
+  return (
+    <Screen {...propsScreen}>
+      <IntroTexts {...propsTexts} />
+      <IntroHint {...propsHint} />
+    </Screen>
+  );
+};
+
+export const render: ViewRenderFunc<IntroPluginState> = createRenderFunc(Intro);

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,9 +0,0 @@
-export const SUBSCRIBE_EVENTS = {
-  SHOW: "vne:intro:show",
-  HIDE: "vne:intro:hide",
-  CLICK: "vne:intro:click",
-  UPDATE: "vne:intro:update",
-
-  SKIP: "vne:intro:skip",
-  INTERACT: "vne:intro:interact",
-};

package/const/params.js

@@ -1,11 +0,0 @@
-export const BACKGROUND = "loading";
-
-export const TRANSITION = 500;
-export const ZINDEX = 2000;
-export const LOC_LABEL = "intro";
-
-export const VIEW_PROPS = {
-  texts: { position: { top: 240, left: 120, right: 720 }, flex: { direction: "column", gap: 60 }, text: { size: 96 } },
-  hint: { position: { bottom: 120, left: 120, right: 120 }, text: { size: 60, align: "center" } },
-  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 { IntroController } from "./modules/controller";
-import { Intro } from "./modules/intro";
-import { IntroView } from "./modules/view";
-
-regPlugin("INTRO", { events: SUBSCRIBE_EVENTS, params }, [IntroController, Intro, IntroView]);

package/modules/view.js

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

package/view/components/IntroHint.jsx

@@ -1,13 +0,0 @@
-import { useMemo } from "react";
-
-import { PositionBox, Text } from "@vnejs/uis.react";
-
-export const IntroHint = ({ text = "", ...props } = {}) => {
-  const propsText = useMemo(() => ({ ...props.PARAMS.INTRO.VIEW_PROPS.hint.text, text }), [text]);
-
-  return (
-    <PositionBox {...props.PARAMS.INTRO.VIEW_PROPS.hint.position}>
-      <Text {...propsText} />
-    </PositionBox>
-  );
-};

package/view/components/IntroTexts.jsx

@@ -1,23 +0,0 @@
-import { useMemo } from "react";
-
-import { PositionBox, Text, Flex } from "@vnejs/uis.react";
-
-const renderText = ({ text, props }, i) => (
-  <Text
-    {...props}
-    text={text}
-    key={i}
-  />
-);
-
-export const IntroTexts = ({ text = "", ...props } = {}) => {
-  const propsByView = props.PARAMS.INTRO.VIEW_PROPS.texts;
-
-  const textsObj = useMemo(() => text.split("\n").map((line) => ({ text: line, props: props.PARAMS.INTRO.VIEW_PROPS.texts.text })), [text]);
-
-  return (
-    <PositionBox {...propsByView.position}>
-      <Flex {...propsByView.flex}>{textsObj.map(renderText)}</Flex>
-    </PositionBox>
-  );
-};

package/view/components/index.js

@@ -1,2 +0,0 @@
-export * from "./IntroHint";
-export * from "./IntroTexts";

package/view/index.jsx

@@ -1,28 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { createRoot } from "react-dom/client";
-
-import { Screen } from "@vnejs/uis.react";
-
-import { IntroHint, IntroTexts } from "./components";
-
-const Intro = ({ store, onMount, ...props } = {}) => {
-  const [{ isShow = false, isForce = false, bgSrc = "", locs = {} }, setState] = useState({});
-
-  useEffect(() => store.subscribe(setState), []);
-  useEffect(() => void onMount(), []);
-
-  const onClick = useCallback(() => props.emit(props.EVENTS.INTRO.CLICK), []);
-
-  const propsTexts = useMemo(() => ({ ...props, text: locs.intro }), [locs]);
-  const propsHint = useMemo(() => ({ ...props, text: locs.hint }), [locs]);
-  const propsScreen = useMemo(() => ({ ...props.PARAMS.INTRO.VIEW_PROPS.screen, bgSrc, isShow, isForce, onClick }), [bgSrc, isShow, isForce]);
-
-  return (
-    <Screen {...propsScreen}>
-      <IntroTexts {...propsTexts} />
-      <IntroHint {...propsHint} />
-    </Screen>
-  );
-};
-
-export const render = (props, root) => createRoot(root).render(<Intro {...props} />);