@vnejs/plugins.views.scenario.interface 0.2.0 → 0.2.2

package/dist/modules/controller.js

@@ -31,8 +31,10 @@ export class InterfaceController extends ModuleController {
     };
     onViewChanged = ({ isForce = false } = {}) => {
         const { view = "" } = this.globalState.interface;
+        // Do not mark as fast: wait for TRANSITION so React applies isViewActive before the next scenario line (text).
+        // Otherwise useTokensHook can receive tokens while the target view is still inactive and never show them.
         if (this.state.view !== view)
-            return this.updateStateAndView({ view }, isForce, !isForce);
+            return this.updateStateAndView({ view }, isForce, false);
     };
     onTextChanged = async ({ tokens = [], uid = "", tokensVisible = 0 } = {}) => {
         while (this.isStateChangeInProcess)

package/dist/modules/interface.d.ts

@@ -17,10 +17,10 @@ export declare class Interface extends ModuleCore<InterfacePluginEvents, Interfa
     onTextSpeakerChanged: ({ speaker }?: InterfaceSpeakerChangedPayload) => Promise<unknown[]> | undefined;
     onTextEmitBefore: () => Promise<unknown[]> | undefined;
     onTextHide: () => Promise<unknown[]> | undefined;
-    onView: ({ view, isForce }?: InterfaceViewPayload) => Promise<unknown[]> | undefined;
+    onView: ({ view, isForce }?: InterfaceViewPayload) => Promise<void>;
     onStateSet: (payload: ModuleGlobalStateRegistry) => Promise<unknown[]> | undefined;
     onStateClear: () => Promise<unknown[]> | undefined;
-    setView: (view?: string, isForce?: boolean) => Promise<unknown[]> | undefined;
+    setView: (view?: string, isForce?: boolean) => Promise<void>;
     setShow: (isShow: boolean, isForce?: boolean) => Promise<unknown[] | undefined>;
     setVisible: (isVisible: boolean, isForce?: boolean) => Promise<unknown[]> | undefined;
     emitTextChanged: (tokens?: InterfaceTextChangedPayload["tokens"], uid?: string, tokensVisible?: number) => Promise<unknown[]> | undefined;

package/dist/modules/interface.js

@@ -51,9 +51,10 @@ export class Interface extends ModuleCore {
         return this.setNewState(moduleState?.view, moduleState?.isVisible, moduleState?.isShow);
     };
     onStateClear = () => this.setNewState(this.PARAMS.INTERFACE.DEFAULT_VIEW, false, false);
-    setView = (view, isForce = false) => {
+    setView = async (view, isForce = false) => {
         this.state.view = view ?? "";
-        return this.emit(this.EVENTS.INTERFACE.VIEW_CHANGED, { isForce });
+        await this.emit(this.EVENTS.INTERFACE.VIEW_CHANGED, { isForce });
+        await this.waitRerender();
     };
     setShow = async (isShow, isForce = false) => {
         this.state.isShow = isShow;

package/dist/view/components/InterfaceBackdrop.js

@@ -1,9 +1,9 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Backdrop, PositionBox, useMemo } from "@vnejs/uis.react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Backdrop, useMemo } from "@vnejs/uis.react";
 export const InterfaceBackdrop = ({ view = "", transition = 0, PARAMS }) => {
-    const propsByView = useMemo(() => PARAMS.INTERFACE.VIEW_PROPS[view]?.backdrop || {}, [view, PARAMS.INTERFACE.VIEW_PROPS]);
-    const propsBackdrop = useMemo(() => ({ ...propsByView.props, transition }), [propsByView, transition]);
-    const propsPosition = useMemo(() => ({ ...propsByView.flatPosition, transition }), [propsByView, transition]);
-    const styleFlatBackdrop = useMemo(() => ({ ...propsByView.flatStyle, width: "100%", height: "100%", transition: `${transition}ms` }), [propsByView, transition]);
-    return (_jsxs(_Fragment, { children: [_jsx(Backdrop, { ...propsBackdrop }), _jsx(PositionBox, { ...propsPosition, children: _jsx("div", { style: styleFlatBackdrop }) })] }));
+    const props = useMemo(() => {
+        const backdrop = PARAMS.INTERFACE.VIEW_PROPS[view]?.backdrop;
+        return { ...backdrop, transition };
+    }, [view, transition, PARAMS.INTERFACE.VIEW_PROPS]);
+    return _jsx(Backdrop, { ...props });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.views.scenario.interface",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/modules/controller.ts

@@ -55,7 +55,9 @@ export class InterfaceController extends ModuleController<
   onViewChanged = ({ isForce = false }: InterfaceForcePayload = {}) => {
     const { view = "" } = this.globalState.interface;
 
-    if (this.state.view !== view) return this.updateStateAndView({ view }, isForce, !isForce);
+    // Do not mark as fast: wait for TRANSITION so React applies isViewActive before the next scenario line (text).
+    // Otherwise useTokensHook can receive tokens while the target view is still inactive and never show them.
+    if (this.state.view !== view) return this.updateStateAndView({ view }, isForce, false);
   };
   onTextChanged = async ({ tokens = [], uid = "", tokensVisible = 0 }: InterfaceTextChangedPayload = {}) => {
     while (this.isStateChangeInProcess) await this.waitRerender();

package/src/modules/interface.ts

@@ -82,10 +82,11 @@ export class Interface extends ModuleCore<
   };
   onStateClear = () => this.setNewState(this.PARAMS.INTERFACE.DEFAULT_VIEW, false, false);
 
-  setView = (view?: string, isForce = false) => {
+  setView = async (view?: string, isForce = false) => {
     this.state.view = view ?? "";
 
-    return this.emit(this.EVENTS.INTERFACE.VIEW_CHANGED, { isForce });
+    await this.emit(this.EVENTS.INTERFACE.VIEW_CHANGED, { isForce });
+    await this.waitRerender();
   };
   setShow = async (isShow: boolean, isForce = false) => {
     this.state.isShow = isShow;

package/src/tests/setup.ts

@@ -3,13 +3,7 @@ import { SUBSCRIBE_EVENTS as SCENARIO_EVENTS } from "@vnejs/contracts.core.scena
 import { SUBSCRIBE_EVENTS as TEXT_EVENTS, PLUGIN_NAME as TEXT } from "@vnejs/contracts.text";
 import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.scenario.interface";
 import { SourcesSet } from "@vnejs/sources-set";
-import {
-  createTestModule as baseCreateTestModule,
-  registerCoreVne,
-  registerVnePlugin,
-  stubEvent,
-  stubSilentEvent,
-} from "@vnejs/test-utils";
+import { createTestModule as baseCreateTestModule, registerCoreVne, registerVnePlugin, stubEvent, stubSilentEvent } from "@vnejs/test-utils";
 
 export const registerInterfacePluginVne = () => {
   registerCoreVne();

package/src/view/components/InterfaceBackdrop.tsx

@@ -1,24 +1,13 @@
-import { Backdrop, PositionBox, useMemo } from "@vnejs/uis.react";
+import { Backdrop, useMemo } from "@vnejs/uis.react";
+import type { BackdropProps } from "@vnejs/uis.react";
 
 import type { InterfaceViewProps } from "../../types.js";
 
 export const InterfaceBackdrop = ({ view = "", transition = 0, PARAMS }: InterfaceViewProps) => {
-  const propsByView = useMemo(() => PARAMS.INTERFACE.VIEW_PROPS[view as keyof typeof PARAMS.INTERFACE.VIEW_PROPS]?.backdrop || {}, [view, PARAMS.INTERFACE.VIEW_PROPS]);
+  const props = useMemo((): BackdropProps => {
+    const backdrop = PARAMS.INTERFACE.VIEW_PROPS[view as keyof typeof PARAMS.INTERFACE.VIEW_PROPS]?.backdrop;
+    return { ...(backdrop as BackdropProps), transition };
+  }, [view, transition, PARAMS.INTERFACE.VIEW_PROPS]);
 
-  const propsBackdrop = useMemo(() => ({ ...propsByView.props, transition }), [propsByView, transition]);
-  const propsPosition = useMemo(() => ({ ...propsByView.flatPosition, transition }), [propsByView, transition]);
-
-  const styleFlatBackdrop = useMemo(
-    () => ({ ...propsByView.flatStyle, width: "100%", height: "100%", transition: `${transition}ms` }),
-    [propsByView, transition],
-  );
-
-  return (
-    <>
-      <Backdrop {...propsBackdrop} />
-      <PositionBox {...propsPosition}>
-        <div style={styleFlatBackdrop} />
-      </PositionBox>
-    </>
-  );
+  return <Backdrop {...props} />;
 };

package/src/view/components/InterfaceViewDialog.tsx

@@ -9,7 +9,10 @@ export const InterfaceViewDialog = (props: InterfaceViewProps) => {
 
   const propsByView = PARAMS.INTERFACE.VIEW_PROPS.adv;
 
-  const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isViewActive ? 1 : 0, transition }), [isViewActive, transition, propsByView.position]);
+  const propsPosition = useMemo(
+    () => ({ ...propsByView.position, opacity: isViewActive ? 1 : 0, transition }),
+    [isViewActive, transition, propsByView.position],
+  );
 
   const speakerOpacity = speakerName ? 1 : 0;
   const speakerTransition = speakerName ? transition : 0;

package/src/view/components/InterfaceViewLine.tsx

@@ -15,7 +15,10 @@ export const InterfaceViewLine = (props: InterfaceViewProps) => {
     () => ({ ...propsByView.text, opacity, color, transition, ...propsTextTokens }),
     [opacity, color, transition, propsTextTokens, propsByView.text],
   );
-  const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isViewActive ? 1 : 0, transition }), [isViewActive, transition, propsByView.position]);
+  const propsPosition = useMemo(
+    () => ({ ...propsByView.position, opacity: isViewActive ? 1 : 0, transition }),
+    [isViewActive, transition, propsByView.position],
+  );
 
   return (
     <PositionBox {...propsPosition}>

package/tsconfig.json

@@ -5,13 +5,6 @@
     "outDir": "dist",
     "jsx": "react-jsx"
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
-  "exclude": [
-    "dist",
-    "node_modules",
-    "src/tests"
-  ]
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules", "src/tests"]
 }