Configuration

Add dependencies

Add the following dependencies in your package.json:

"@dana/engine-html5",
"@dana/renderer-css"

Profile

You will likely need to identify your Orange profiles to do some specific stuff for those profiles. So it is recommended that you add a property in those profiles.

Example:

"base-orange": {
    "isOrange": true,
    "es5": true,
    "base": {
        "name": "orange",
        "vendors": [
            "@dana/renderer-css"
        ]
    }
}

Recommendation for Orange devices is to use CSS as renderer engine due to low performance of the STB.

ES6, ES5 or ES3

Depending on the lowest target device, add in profile one of this option :

  • "es5": true
  • "es3": true for STBU

The following polyfills are recommended to have application working on all Orange STB :

    "polyfills": [
        "es.string.ends-with",
        "es.string.includes",
        "es.string.pad-start",
        "es.string.pad-end",
        "es.string.starts-with",
        "es.string.trim",
        "es.array.fill",
        "es.array.find",
        "es.array.find-index",
        "es.array.from",
        "es.array.includes",
        "es.array.iterator",
        "es.promise",
        "es.number.is-finite",
        "es.number.is-integer",
        "es.number.is-nan",
        "es.function.bind",
        "es.math.sign",
        "es.math.trunc",
        "es.map",
        "es.set",
        "es.symbol"
    ]

Template configuration

Grunt setup

To include specific polyfills for orange in the project you must copy the polyfill files. You can do it like so in Gruntfile.js :

grunt.config.merge(
    {
        copy: {
            polyfill: {
                files: [
                    {
                        expand: true,
                        flatten: true,
                        cwd: './',
                        src: ['wtv_modules/wtv-vendor-orange/scripts/vendors/orange/utils/OrangePolyFill.js'],
                        dest: '<%= global.options.generatedDir %>/<%= global.options.srcDir %>/'
                        }
                    ]
                }
            }
    }
);

And in _dev and _package tasks add :

if (profile.isOrange) {
    tasks.splice(tasks.indexOf("bundle") + 1, 0, 'copy:polyfill');
}

Setup index.html.tpl

To include specific orange polyfills for Orange, you have to include the file in templates/index.html.tpl.

Note

This should be put as first scripts to be loaded.

<% if(profile.isOrange) { %>
    <script type="text/javascript" src="<%= globalOptions.srcDir %>/OrangePolyFill.js"></script>
<%} %>

Debugging configuration

You can also add Weinre a this level (do not forget to replace PORT and ALIAS) :

<script src="http://vpn.wiztivi.com:{PORT}/target/target-script-min.js#{ALIAS}"></script>

Check Weinre docs for more info on how to use the remote debugger.

Edit this page on GitHub