@24i/bigscreen-sdk 1.0.3-alpha.2087 → 1.0.3-alpha.2097

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.3-alpha.2087",
+    "version": "1.0.3-alpha.2097",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -38,7 +38,7 @@
     "homepage": "https://github.com/24i/smartapps-bigscreen-sdk#readme",
     "dependencies": {
         "@24i/player-base": "6.10.0",
-        "@24i/smartapps-datalayer": "2.3.3",
+        "@24i/smartapps-datalayer": "2.3.4-beta.2",
         "@sentry/browser": "^7.8.0",
         "@types/prop-types": "^15.7.5",
         "@types/scheduler": "^0.16.1",

package/packages/create-package/dist/createPackage.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.main = void 0;
+const path = require("path");
+const fs = require("fs");
+const fse = require("fs-extra");
+const chalk = require("chalk");
+const minimist = require("minimist");
+const questions_1 = require("./questionnaire/questions");
+const Settings_1 = require("./settings/Settings");
+async function isDirectoryEmpty(dirPath) {
+    const files = await fs.promises.readdir(dirPath);
+    return !files.length;
+}
+async function copyTemplateFiles(templateDir, targetDir) {
+    return fse.copy(templateDir, targetDir);
+}
+function updatePackageJsonFile(filePath, options) {
+    let data = fs.readFileSync(filePath, 'utf8');
+    const keywords = options.keywords.map((word) => `"${word}"`).join(', ');
+    data = data.replace(/("name": ")(.*)(")/, `$1${options.name}$3`);
+    data = data.replace(/("version": ")(.*)(")/, `$1${options.version}$3`);
+    data = data.replace(/("description": ")(.*)(")/, `$1${options.description}$3`);
+    data = data.replace(/("keywords": \[)(.*)(\])/, `$1${keywords}$3`);
+    data = data.replace(/("author": ")(.*)(")/, `$1${options.author}$3`);
+    fs.writeFileSync(filePath, data);
+}
+function parseArguments(rawArgv) {
+    const argv = minimist(rawArgv.slice(2));
+    const dirName = argv._[0];
+    if (!dirName) {
+        console.error('Error: Missing package name');
+        process.exit(1);
+    }
+    return {
+        dirName,
+    };
+}
+async function main() {
+    const { dirName: destDirName } = parseArguments(process.argv);
+    const destDir = path.join(process.cwd(), 'packages/', destDirName);
+    if (fs.existsSync(destDir)) {
+        console.error(`Error: Target directory "${destDir}" already exists`);
+        process.exit(1);
+    }
+    fs.mkdirSync(destDir, { recursive: true });
+    const isDirEmpty = await isDirectoryEmpty(destDir);
+    if (!isDirEmpty) {
+        console.error(`Error: Target directory "${destDir}" is not empty.`);
+        process.exit(1);
+    }
+    const settings = Object.assign({}, Settings_1.Settings);
+    settings.name = `${Settings_1.Settings.name}${destDirName}`.toLowerCase();
+    const details = await (0, questions_1.promptPackageDetails)(settings);
+    const templateDir = path.join(__dirname, '..', 'templates/typescript');
+    await copyTemplateFiles(templateDir, destDir);
+    const packageJsonFile = path.join(destDir, 'package.json');
+    updatePackageJsonFile(packageJsonFile, details);
+    const docsSymlinkTarget = path.join('../../../packages/', destDirName, '/README.md');
+    const docsSymlinkPath = path.join(process.cwd(), 'docs/packages/', destDirName, '/README.md');
+    await fse.ensureSymlink(docsSymlinkTarget, docsSymlinkPath);
+    console.log(`${chalk.green('Success')}, package has been initialized!`);
+}
+exports.main = main;
+//# sourceMappingURL=createPackage.js.map

package/packages/create-package/dist/createPackage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPackage.js","sourceRoot":"","sources":["../src/createPackage.ts"],"names":[],"mappings":"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"}

package/packages/create-package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const createPackage_1 = require("./createPackage");
+(0, createPackage_1.main)();
+//# sourceMappingURL=index.js.map

package/packages/create-package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAAA,mDAAuC;AAEvC,IAAA,oBAAI,GAAE,CAAC"}

package/packages/create-package/dist/questionnaire/questions.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.promptPackageDetails = void 0;
+const inquirer = require("inquirer");
+async function promptPackageDetails(defaultValues) {
+    return inquirer.prompt([
+        {
+            type: 'input',
+            name: 'name',
+            message: 'Package name:',
+            default: defaultValues.name,
+        }, {
+            type: 'input',
+            name: 'version',
+            message: 'Version:',
+            default: defaultValues.version,
+        }, {
+            type: 'input',
+            name: 'description',
+            message: 'Description:',
+        }, {
+            type: 'input',
+            name: 'keywords',
+            message: 'Keywords:',
+            filter: (ans) => ans.split(/[\s,]+/),
+        }, {
+            type: 'input',
+            name: 'author',
+            message: 'Author:',
+            default: defaultValues.author,
+        },
+    ]);
+}
+exports.promptPackageDetails = promptPackageDetails;
+//# sourceMappingURL=questions.js.map

package/packages/create-package/dist/questionnaire/questions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"questions.js","sourceRoot":"","sources":["../../src/questionnaire/questions.ts"],"names":[],"mappings":";;;AAAA,qCAAqC;AAWrC,KAAK,UAAU,oBAAoB,CAAC,aAA4C;IAC5E,OAAO,QAAQ,CAAC,MAAM,CAAC;QACnB;YACI,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,eAAe;YACxB,OAAO,EAAE,aAAa,CAAC,IAAI;SAC9B,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,UAAU;YACnB,OAAO,EAAE,aAAa,CAAC,OAAO;SACjC,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,cAAc;SAC1B,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,WAAW;YACpB,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;SACvC,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,aAAa,CAAC,MAAM;SAChC;KACJ,CAAC,CAAC;AACP,CAAC;AAEQ,oDAAoB"}

package/packages/create-package/dist/settings/Settings.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Settings = void 0;
+const Settings = {
+    name: '@24i/smartapps-bigscreen-',
+    version: '0.0.1',
+    author: '24i',
+};
+exports.Settings = Settings;
+//# sourceMappingURL=Settings.js.map

package/packages/create-package/dist/settings/Settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.js","sourceRoot":"","sources":["../../src/settings/Settings.ts"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG;IACb,IAAI,EAAE,2BAA2B;IACjC,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,KAAK;CAChB,CAAC;AAEO,4BAAQ"}

package/packages/create-package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/packages/create-package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/packages/epg/src/v2/DataManager.ts

@@ -267,7 +267,7 @@ export class DataManager implements IDataManager {
                 endTime,
             },
             name: i18n.t('epg.noData.title'),
-            programId: `no-data-${startTime}-${endTime}`,
+            id: `no-data-${startTime}-${endTime}`,
         } as unknown as Asset;
     }
 

package/packages/focus/README.md

@@ -8,6 +8,18 @@ sidebar_label: Focus
 # Focus
 This package takes care of focus in SmartApps BIGscreen apps. It contains layout components and modules for handling focus candidates and focus limiting.
 
+## IFocusable
+IFocusable is an interface that should be implemented by anything that can be focused.
+```ts
+interface IFocusable {
+    focus(options?: FocusOptions): void,
+    hasDom?(element: HTMLElement): boolean,
+}
+```
+- focus is the main function that is called when focusing component/element.
+- hasDom is optional optimization for components to help Layout components locate the currently
+focused child.
+
 ## Layout components
 - Vertical: Use it to create focus between elements vertically (up/down)
 - Horizontal: Use it to create focus between elements horizontally (left/right)
@@ -20,9 +32,18 @@ Both of these components share the same props;
 ### Props
 - children: Children will be rendered as is.
 - focusableChildren: Array of references between which the focus moves.
-- domRef: Reference to a dom element that corresponds to closest dom wrapper. It will listen onKeyDown on this element.
-- onFocusChanged: Optional callback after focus has changed. It receives reference to focused element and its index. Ideal place to change other elements (e.g. header changing with focused movie)
-- onBeforeFocusChange: Optional callback just before focus change. It receives reference to focused element and its index. Ideal place for preparing for the change (e.g. moving the container to fit new element in the screen)
+- domRef: Reference to a dom element that corresponds to closest dom wrapper.
+It will listen onKeyDown on this element.
+- onFocusChanged: Optional callback after focus has changed. It receives a reference
+to the focused element and its index. Ideal place to change other elements
+(e.g. header changing with focused movie)
+- onBeforeFocusChange: Optional callback just before focus change. It receives a reference
+to the focused element and its index. Ideal place for preparing for the change
+(e.g. moving the container to fit new element in the screen)
+- dir: Optional forceful setting of the component direction. Defaults to `'auto'` which follows
+the direction of the app.
+`'ltr'` always forces left-to-right layout,
+`'rtl'` always forces right-to-left.
 
 ### Usage
 ```jsx

package/packages/focus/src/IFocusable.ts

@@ -1,3 +1,4 @@
 export interface IFocusable {
-    focus: (options?: FocusOptions) => void,
+    focus(options?: FocusOptions): void,
+    hasDom?(element: HTMLElement): boolean,
 }

package/packages/focus/src/Layout/Base.tsx

@@ -9,6 +9,7 @@ export type Props = SharedProps & {
     focusableChildren: Array<Reference>,
     onFocusChanged?: (focused: Reference, index: number) => any,
     onBeforeFocusChange?: (focused: Reference, index: number) => any,
+    dir?: 'auto' | 'ltr' | 'rtl',
 };
 
 export interface ILayout {
@@ -29,6 +30,7 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
             onFocusChanged: noop,
             onBeforeFocusChange: noop,
             focusOptions: { preventScroll: true },
+            dir: 'auto',
         };
 
         declare props: DeclareProps<Props, typeof Layout.defaultProps>;
@@ -61,7 +63,9 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
             ) {
                 return this.index;
             }
-            const targetIndex = focusableChildren.findIndex((ref) => ref.current === target);
+            const targetIndex = focusableChildren.findIndex(({ current }) => (
+                current === target || current?.hasDom?.(target)
+            ));
             return targetIndex !== -1 ? targetIndex : this.index;
         }
 

package/packages/focus/src/Layout/Horizontal.ts

@@ -1,11 +1,24 @@
-import { device } from '@24i/bigscreen-sdk/device';
-import { getLayoutBase, ILayout } from './Base';
+import { LEFT, RIGHT } from '@24i/bigscreen-sdk/device/keymap';
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+import { getLayoutBase, ILayout, Props } from './Base';
+
+const isHorizontalRtl = (dir: Props['dir']) => {
+    switch (dir) {
+        case 'rtl': return true;
+        case 'ltr': return false;
+        case 'auto':
+        default:
+            return isRtl();
+    }
+};
 
 const onKeyDown = (e: KeyboardEvent, layout: ILayout) => {
-    if (device.isDirectionLeft(e)) {
-        layout.backward(e);
-    } else if (device.isDirectionRight(e)) {
-        layout.forward(e);
+    if (!isHorizontalRtl(layout.props.dir)) {
+        if (LEFT.is(e)) layout.backward(e);
+        if (RIGHT.is(e)) layout.forward(e);
+    } else {
+        if (LEFT.is(e)) layout.forward(e);
+        if (RIGHT.is(e)) layout.backward(e);
     }
 };
 

package/packages/focus/src/Layout/__test__/Base.spec.ts

@@ -1,5 +1,6 @@
+import { IFocusable } from '../../IFocusable';
 import { getLayoutBase } from '../Base';
-import { rootRef, refChildA, refChildB, refChildC } from './shared';
+import { rootRef, refChildA, refChildB, refChildC, refChildD } from './shared';
 
 const mockKeydown = jest.fn();
 const mockEvent: any = {
@@ -159,4 +160,21 @@ describe('Focus Layout Base', () => {
         base.index = 2;
         expect(() => base.focusCurrentIndex()).toThrow();
     });
+
+    it('should take result of hasDom into account of determining current focus position', () => {
+        base = new Base({
+            domRef: rootRef,
+            children: 'children',
+            focusableChildren: [refChildA, refChildB, refChildC, refChildD],
+            onFocusChanged: jest.fn(),
+            onBeforeFocusChange: jest.fn(),
+        });
+        ((refChildD.current as IFocusable).hasDom as jest.MockedFn<
+        Exclude<IFocusable['hasDom'], undefined>
+        >).mockReturnValueOnce(true);
+        base.backward(mockEvent);
+        expect(base.index).toBe(2);
+        base.backward(mockEvent);
+        expect(base.index).toBe(1);
+    });
 });

package/packages/focus/src/Layout/__test__/Horizontal.spec.ts

@@ -1,6 +1,13 @@
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
 import { Horizontal } from '../Horizontal';
 import { rootRef, refChildA, refChildB, refChildC } from './shared';
 
+jest.mock('@24i/bigscreen-sdk/i18n', () => ({
+    ...jest.requireActual('@24i/bigscreen-sdk/i18n'),
+    isRtl: jest.fn().mockReturnValue(false),
+}));
+const isRtlMock = isRtl as jest.MockedFn<typeof isRtl>;
+
 const mockEvent = {
     target: false,
     preventDefault: jest.fn(),
@@ -38,9 +45,50 @@ describe('Horizontal Focus Layout', () => {
         expect(horizontal.forward).toHaveBeenCalled();
     });
 
-    it('should call forward on LEFT', () => {
+    it('should call backward on LEFT', () => {
+        horizontal.setIndex(1);
+        horizontal.onKeyDown(mockLEFTEvent);
+        expect(horizontal.backward).toHaveBeenCalled();
+    });
+
+    it('should call backward on RIGHT when RTL', () => {
+        isRtlMock.mockReturnValueOnce(true);
+        horizontal.setIndex(1);
+        horizontal.onKeyDown(mockRIGHTEvent);
+        expect(horizontal.backward).toHaveBeenCalled();
+    });
+
+    it('should call forward on LEFT when RTL', () => {
+        isRtlMock.mockReturnValueOnce(true);
+        horizontal.onKeyDown(mockLEFTEvent);
+        expect(horizontal.forward).toHaveBeenCalled();
+    });
+
+    it('should call backward on RIGHT when forced RTL', () => {
+        horizontal.props.dir = 'rtl';
+        horizontal.setIndex(1);
+        horizontal.onKeyDown(mockRIGHTEvent);
+        expect(horizontal.backward).toHaveBeenCalled();
+    });
+
+    it('should call forward on LEFT when forced RTL', () => {
+        horizontal.props.dir = 'rtl';
+        horizontal.onKeyDown(mockLEFTEvent);
+        expect(horizontal.forward).toHaveBeenCalled();
+    });
+
+    it('should call backward on LEFT when RTL and forced LTR', () => {
+        isRtlMock.mockReturnValueOnce(true);
+        horizontal.props.dir = 'ltr';
         horizontal.setIndex(1);
         horizontal.onKeyDown(mockLEFTEvent);
         expect(horizontal.backward).toHaveBeenCalled();
     });
+
+    it('should call forward on RIGHT when RTL and forced LTR', () => {
+        isRtlMock.mockReturnValueOnce(true);
+        horizontal.props.dir = 'ltr';
+        horizontal.onKeyDown(mockRIGHTEvent);
+        expect(horizontal.forward).toHaveBeenCalled();
+    });
 });

package/packages/focus/src/Layout/__test__/shared.ts

@@ -1,4 +1,5 @@
 import { createRef } from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from '../../IFocusable';
 
 class ChildMock {
     focus = jest.fn();
@@ -10,6 +11,9 @@ export const rootRef = createRef(root);
 const childA = new ChildMock();
 const childB = new ChildMock();
 const childC = new ChildMock();
+const childD = new ChildMock();
+(childD as IFocusable).hasDom = jest.fn().mockReturnValue(false);
 export const refChildA = createRef(childA);
 export const refChildB = createRef(childB);
 export const refChildC = createRef(childC);
+export const refChildD = createRef(childD);

package/packages/grid/src/UnifiedGridController/UnifiedGridController.ts

@@ -524,6 +524,7 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
         forEach(this.groups, (group, index) => {
             this.updateItemsInGroup(group, index * itemsInGroup);
         });
+        base.mrcuRef.current?.handleArrowState();
     }
 
     prependData(data: T[]) {
@@ -549,5 +550,6 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
             this.scrollIndexToPixels(this.scrollIndex),
         );
         this.focusCurrentItem();
+        base.mrcuRef.current?.handleArrowState();
     }
 }

package/packages/list/src/Base/Base.tsx

@@ -344,7 +344,7 @@ export class ListBase<T extends Item<U>, U>
     }
 
     render() {
-        const { horizontal, className } = this.props;
+        const { horizontal, className, mrcuMountingPoint } = this.props;
         return (
             <Scroller
                 className={className}
@@ -357,7 +357,7 @@ export class ListBase<T extends Item<U>, U>
                 <MouseNavigation
                     // @ts-ignore - needed to convert fallback (false) to interface
                     ref={this.mrcuRef}
-                    getMountingPoint={() => this.scroller.current!.wrapRef}
+                    getMountingPoint={() => mrcuMountingPoint || this.scroller.current!.wrapRef}
                     {...this.props}
                 />
             </Scroller>

package/packages/list/src/types.ts

@@ -66,6 +66,11 @@ export type BasicProps<T extends Item<U>, U> = {
      */
     fastFocusingOptimization?: boolean,
 
+    /**
+     * Returns a reference to the custom HTML element for the MRCU arrows.
+     */
+    mrcuMountingPoint?: Reference<HTMLDivElement>,
+
     /**
      * Function called every time before list performs one full scroll.
      * @param item Reference to item on current scroll

package/packages/mouse-navigation/src/MouseNavigation.tsx

@@ -94,6 +94,22 @@ export class MouseNavigation extends Component<Props> {
         }
     };
 
+    onWheel = (event: WheelEvent) => {
+        const { forward, backward, direction } = this.props;
+        const { horizontal } = this.mapDirectionToProps(direction);
+        if (horizontal) return;
+        if (event.deltaY > 0) forward();
+        else if (event.deltaY < 0) backward();
+    };
+
+    addWheelListner() {
+        this.arrows.current?.domRef.current?.addEventListener('wheel', this.onWheel);
+    }
+
+    removeWheelListner() {
+        this.arrows.current?.domRef.current?.removeEventListener('wheel', this.onWheel);
+    }
+
     isActive() {
         return this.navigationState === 'active';
     }
@@ -112,6 +128,7 @@ export class MouseNavigation extends Component<Props> {
             getMountingPoint(),
         );
         this.handleArrowState();
+        this.addWheelListner();
         this.navigationState = 'active';
     };
 
@@ -129,6 +146,7 @@ export class MouseNavigation extends Component<Props> {
     destroyArrows() {
         if (this.navigationState === 'inactive') return;
         this.navigationState = 'inactive';
+        this.removeWheelListner();
         removeNode(this.arrows.current!.domRef);
     }
 

package/packages/rnv-build-engine/dist/src/constants/buildSchemes.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BuildSchemes = void 0;
+const BuildSchemes = {
+    DEBUG: 'debug',
+    DEV: 'dev',
+    DEV_LATEST: 'dev:latest',
+    RC: 'rc',
+    RC_LATEST: 'rc:latest',
+    RELEASE: 'release',
+    RELEASE_LATEST: 'release:latest',
+    RELEASE_DIST: 'release:dist',
+};
+exports.BuildSchemes = BuildSchemes;

package/packages/rnv-build-engine/dist/src/constants/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Platforms = exports.BuildSchemes = void 0;
+var buildSchemes_1 = require("./buildSchemes");
+Object.defineProperty(exports, "BuildSchemes", { enumerable: true, get: function () { return buildSchemes_1.BuildSchemes; } });
+var platforms_1 = require("./platforms");
+Object.defineProperty(exports, "Platforms", { enumerable: true, get: function () { return platforms_1.Platforms; } });

package/packages/rnv-build-engine/dist/src/constants/platforms.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Platforms = void 0;
+const Platforms = {
+    ENTONE: 'entone',
+    HBBTV: 'hbbtv',
+    KREATV: 'kreatv',
+    SAPHI: 'saphi',
+    TIZEN: 'tizen',
+    WEBOS: 'webos',
+    WEBTV: 'webtv',
+    XBOX: 'xbox',
+};
+exports.Platforms = Platforms;

package/packages/rnv-build-engine/dist/src/engine.js

@@ -0,0 +1,94 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Resolvers = exports.Constants = void 0;
+const rnv_1 = require("rnv");
+const Constants = __importStar(require("./constants"));
+exports.Constants = Constants;
+const Resolvers = __importStar(require("./resolvers"));
+exports.Resolvers = Resolvers;
+const CNF = __importStar(require("../../renative.engine.json"));
+const constants_1 = require("./constants");
+const engineTasks_1 = require("./tasks/engineTasks");
+const generateEngineExtensions = (platformExtensions) => {
+    const fileExtensions = ['js', 'jsx', 'ts', 'tsx', 'json'];
+    const output = [];
+    fileExtensions.forEach((fileExtension) => {
+        platformExtensions.forEach((platformExtension) => {
+            output.push(`${platformExtension}.${fileExtension}`);
+        });
+        output.push(fileExtension);
+    });
+    return output;
+};
+exports.default = {
+    initializeRuntimeConfig: (c) => {
+        rnv_1.FileUtils.configureFilesystem(rnv_1.Common.getConfigProp, rnv_1.Resolver.doResolve, rnv_1.Utils.isSystemWin);
+        return rnv_1.Config.initializeConfig(c);
+    },
+    tasks: rnv_1.EngineManager.generateEngineTasks(engineTasks_1.engineTaskList),
+    config: CNF,
+    projectDirName: 'project',
+    serverDirName: 'server',
+    ejectPlatform: null,
+    platforms: {
+        [constants_1.Platforms.ENTONE]: {
+            extensions: generateEngineExtensions(['entone']),
+            defaultPort: 8094,
+            isWebHosted: true,
+        },
+        [constants_1.Platforms.HBBTV]: {
+            extensions: generateEngineExtensions(['hbbtv.tv']),
+            defaultPort: 8095,
+            isWebHosted: true,
+        },
+        [constants_1.Platforms.KREATV]: {
+            extensions: generateEngineExtensions(['kreatv']),
+            defaultPort: 8096,
+            isWebHosted: true,
+        },
+        [constants_1.Platforms.SAPHI]: {
+            extensions: generateEngineExtensions(['saphi.tv']),
+            defaultPort: 8097,
+            isWebHosted: true,
+        },
+        [constants_1.Platforms.TIZEN]: {
+            extensions: generateEngineExtensions(['tizen.tv']),
+            defaultPort: 8087,
+            isWebHosted: true,
+        },
+        [constants_1.Platforms.WEBOS]: {
+            extensions: generateEngineExtensions(['webos.tv']),
+            defaultPort: 8088,
+            isWebHosted: true,
+        },
+        [constants_1.Platforms.WEBTV]: {
+            extensions: generateEngineExtensions(['webtv']),
+            defaultPort: 8080,
+            isWebHosted: true,
+        },
+        [constants_1.Platforms.XBOX]: {
+            extensions: generateEngineExtensions(['xbox']),
+            defaultPort: 8098,
+            isWebHosted: true,
+        },
+    },
+};

package/packages/rnv-build-engine/dist/src/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Resolvers = exports.Constants = void 0;
+const engine_1 = __importStar(require("./engine"));
+Object.defineProperty(exports, "Constants", { enumerable: true, get: function () { return engine_1.Constants; } });
+Object.defineProperty(exports, "Resolvers", { enumerable: true, get: function () { return engine_1.Resolvers; } });
+exports.default = engine_1.default;