@24i/bigscreen-sdk 1.0.18 → 1.0.19-alpha.2343

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.18",
+    "version": "1.0.19-alpha.2343",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -41,7 +41,7 @@
         "@24i/appstage-shared-events-manager": "1.0.7",
         "@24i/appstage-shared-perf-utils": "1.0.5",
         "@24i/player-base": "6.10.0",
-        "@24i/smartapps-datalayer": "3.0.7-alpha.998",
+        "@24i/smartapps-datalayer": "3.0.8-alpha.1006",
         "@sentry/browser": "7.35.0",
         "@sentry/types": "7.35.0",
         "@types/gtag.js": "^0.0.12",
@@ -55,11 +55,11 @@
         "@24i/bigscreen-sdk": "file:.",
         "@24i/eslint-config-smartapps-bigscreen-linters": "file:./libs/linters",
         "@24i/smartapps-bigscreen-changelog-generator": "0.17.0",
-        "@babel/core": "^7.21.0",
-        "@babel/preset-env": "^7.20.2",
+        "@babel/core": "^7.22.1",
+        "@babel/preset-env": "^7.22.4",
         "@types/fs-extra": "^11.0.1",
         "@types/inquirer": "^9.0.3",
-        "@types/jest": "^29.2.3",
+        "@types/jest": "^29.5.2",
         "@types/minimist": "^1.2.2",
         "@types/node": "^18.7.18",
         "@types/react": "^18.0.33",
@@ -70,7 +70,7 @@
         "fs-extra": "^11.1.0",
         "full-icu": "^1.5.0",
         "identity-obj-proxy": "^3.0.0",
-        "inquirer": "^9.1.4",
+        "inquirer": "^9.2.6",
         "jest": "^29.3.1",
         "jest-canvas-mock": "^2.4.0",
         "jest-environment-jsdom": "^29.0.3",

package/packages/router/src/Route.tsx

@@ -3,6 +3,7 @@ import {
     Component,
     createRef,
     detachNode,
+    Reference,
     replaceNode,
 } from '@24i/bigscreen-sdk/jsx';
 import { filter, forEach } from '@24i/bigscreen-sdk/perf-utils/array';
@@ -13,9 +14,9 @@ import { IRoute, RouteParams } from './types';
 
 type Props = {
     path: string,
+    domParent?: Reference<HTMLElement>;
     regexpPath?: RegExp,
     paramNames?: string[],
-    isDetachable?: boolean;
     Component: Function,
 };
 
@@ -26,18 +27,10 @@ export class Route extends Component<Props> {
 
     isDetached = false;
 
-    domParent: HTMLElement | null = null;
-
     domRef = createRef<HTMLDivElement>();
 
     component = createRef<IRoute | null>();
 
-    componentDidMount() {
-        const { isDetachable } = this.props;
-        this.domParent = this.domRef.current?.parentElement!;
-        if (isDetachable) this.detach();
-    }
-
     getParams(): RouteParams {
         const { regexpPath, paramNames } = this.props;
         if (!paramNames || !regexpPath) return {};
@@ -63,7 +56,6 @@ export class Route extends Component<Props> {
 
     show() {
         menuService.addEventListener('visibilitychange', this.onMenuVisibilityChange);
-        this.showRoute();
         if (!this.wasCreated) {
             this.mountRoute();
             this.component.current?.activate(this.getParams());
@@ -74,10 +66,7 @@ export class Route extends Component<Props> {
 
     hide() {
         menuService.removeEventListener('visibilitychange', this.onMenuVisibilityChange);
-        if (this.wasCreated) {
-            this.component.current?.deactivate();
-            this.hideRoute();
-        }
+        this.deactivate();
     }
 
     replace(newRoute: Route) {
@@ -89,8 +78,9 @@ export class Route extends Component<Props> {
     }
 
     attach() {
+        const { domParent } = this.props;
         if (this.isDetached) {
-            attachNode(this.domRef, this.domParent!);
+            attachNode(this.domRef, domParent!);
             this.isDetached = false;
         }
     }
@@ -114,14 +104,12 @@ export class Route extends Component<Props> {
         }
     }
 
-    private showRoute() {
-        const { isDetachable } = this.props;
-        if (!isDetachable) this.domRef.current!.style.display = 'block';
+    showRoute() {
+        this.domRef.current!.style.display = 'block';
     }
 
-    private hideRoute() {
-        const { isDetachable } = this.props;
-        if (!isDetachable) this.domRef.current!.style.display = 'none';
+    hideRoute() {
+        this.domRef.current!.style.display = 'none';
     }
 
     private mountRoute() {
@@ -134,13 +122,8 @@ export class Route extends Component<Props> {
     }
 
     render() {
-        const { isDetachable } = this.props;
         return (
-            <div
-                className="route"
-                style={!isDetachable ? { display: 'none' } : {}}
-                ref={this.domRef}
-            />
+            <div className="route" ref={this.domRef} />
         );
     }
 }

package/packages/router/src/Router.tsx

@@ -28,6 +28,8 @@ const filterNulls = (allChildren: (JSX.Element | null)[]) => (
 export class Router extends Component<Props> {
     paths: { [key: string]: RoutePath } = {};
 
+    routerDomRef = createRef<HTMLDivElement>();
+
     static defaultProps = {
         defaultPath: '/',
         detachInactiveRoutes: true,
@@ -38,12 +40,14 @@ export class Router extends Component<Props> {
     constructor(props: Props) {
         super(props);
         routerRef.current = this;
-        this.createRefs();
+        const { children } = this.props;
+        this.createRefs(children);
     }
 
     componentDidMount() {
         window.document.addEventListener('keydown', this.onKeyDown, false);
         window.addEventListener('hashchange', this.onHashChange, false);
+        this.hideAllRoutes();
         this.goToDefaultPath();
     }
 
@@ -91,6 +95,8 @@ export class Router extends Component<Props> {
         return activeRoutePath?.ref.current || null;
     }
 
+    // TODO: refactor to reduce complexity
+    // eslint-disable-next-line sonarjs/cognitive-complexity
     switchRoutes(
         routePathToHide: RoutePath | null,
         routePathToShow: RoutePath | null,
@@ -104,18 +110,31 @@ export class Router extends Component<Props> {
             } else if (routePathToShow) {
                 routeToHide!.hide();
                 routePathToHide.isVisible = false;
-                if (detachInactiveRoutes) routeToHide!.replace(routeToShow!);
+                if (detachInactiveRoutes) {
+                    routeToHide!.replace(routeToShow!);
+                } else {
+                    routeToHide!.hideRoute();
+                    routeToShow!.showRoute();
+                }
                 routeToShow!.show();
                 routePathToShow.isVisible = true;
                 return;
             } else {
                 routeToHide!.hide();
                 routePathToHide.isVisible = false;
-                if (detachInactiveRoutes) routeToHide!.detach();
+                if (detachInactiveRoutes) {
+                    routeToHide!.detach();
+                } else {
+                    routeToHide!.hideRoute();
+                }
             }
         }
         if (routePathToShow) {
-            if (detachInactiveRoutes) routeToShow!.attach();
+            if (detachInactiveRoutes) {
+                routeToShow!.attach();
+            } else {
+                routeToShow!.showRoute();
+            }
             routeToShow!.show();
             routePathToShow.isVisible = true;
         }
@@ -125,11 +144,10 @@ export class Router extends Component<Props> {
         this.getActiveRoute()?.focus();
     }
 
-    createRefs() {
-        const { children } = this.props;
-        forEach(children, (child: JSX.Element) => {
-            if (child.type === Route) {
-                const { path } = child.props;
+    createRefs(routes: JSX.Element[]) {
+        forEach(routes, (route: JSX.Element) => {
+            if (route.type === Route) {
+                const { path } = route.props;
                 const { regexpPath, paramNames } = pathToRegExp(path);
                 this.paths[path] = {
                     ref: createRef<Route>(),
@@ -151,9 +169,28 @@ export class Router extends Component<Props> {
         }
     }
 
-    render() {
-        const { children, detachInactiveRoutes } = this.props;
-        return filterNulls(map(children, (child: JSX.Element) => {
+    hideAllRoutes() {
+        const { detachInactiveRoutes } = this.props;
+        forEach(Object.keys(this.paths), (key: string) => {
+            const route = this.paths[key];
+            if (!route.isVisible) {
+                if (detachInactiveRoutes) {
+                    route.ref.current!.detach();
+                } else {
+                    route.ref.current!.hideRoute();
+                }
+            }
+        });
+    }
+
+    appendRoutes(routes: JSX.Element[]) {
+        this.createRefs(routes);
+        this.appendMount(this.renderRoutes(routes), this.routerDomRef);
+        this.hideAllRoutes();
+    }
+
+    renderRoutes(routes: JSX.Element[]) {
+        return filterNulls(map(routes, (child: JSX.Element) => {
             if (child.type === Route) {
                 const { path, Component: RouteComponent } = child.props;
                 const route = this.paths[path];
@@ -161,14 +198,23 @@ export class Router extends Component<Props> {
                     <Route
                         ref={route.ref}
                         path={path}
+                        domParent={this.routerDomRef}
                         regexpPath={route.regexpPath}
                         Component={RouteComponent}
                         paramNames={route.paramNames}
-                        isDetachable={detachInactiveRoutes}
                     />
                 );
             }
             return null;
         }));
     }
+
+    render() {
+        const { children } = this.props;
+        return (
+            <div ref={this.routerDomRef} className="router">
+                {this.renderRoutes(children)}
+            </div>
+        );
+    }
 }