xdk-extensions-contrib

@accedo/xdk-extensions-modules-contrib

The home of the XDK extensions modules contributed by Accedo developers.

An XDK extension module is anything that extends the XDK default capabilities and can be imported in the device configuration and loaded from the XDK SDK on the client-side to execute any action

Instalation

$ npm i @accedo/xdk-extensions-modules-contrib

Usage

xdk.config.js

import  workstation, {ID as WORKSTATION}  from '@accedo/xdk-device-workstation';
export { tts } from '@accedo/xdk-extensions-contrib'; // exports the tts default as tts
export { settings } from '@accedo/xdk-extensions-contrib'; // exports the tts default as tts
const { html5: html5TtsConfig } = tts;
const { html5: html5Settings } = settings;

// include the device configuration into the packages to be detected and loaded
const devices = {
  packages: [
    workstation
      .addExtension(html5Settings)
      .addExtension(html5TtsConfig) // Use the extension with the device config helpers
  ],
  detail: {
    [WORKSTATION]: [
      extensions: [
        html5Settings,
        html5TtsConfig              // Or set the extension from the detail per device
      ]
    ]
  }

import { tts, settings } from '@accedo/xdk-extensions-contrib';
const { ID: TTS_ID } = tts;
const { ID: SETTINGS_ID } = settings;

// ...
const tts = await xdk.extensionManager.getExtension(TTS_ID);
const settings = await xdk.extensionManager.getExtension(SETTINGS_ID);

// all the methods are available now
tts.setLanguage(settings.getLanguage());
tts.speak('oh hi mark');

Adding new extensions

Extructure

If you want to create a new XDK extension please follow the next folder structure and steps

src/
  index.js; // exports all the extensions
  extension/
    id.js; // extension id. Exported from index.js file
    index.js; // exports extension ID and implementations
    interface.js; // Extension interface. Must be implemented in each subfolder
    implementation/
      index.js; // Specific implementation i.e html5 // Export implementation configuration and ID
      implementation.js; // Implementation of the interace
      config.js; // Configuration exposing ID and extension configuration

File examples

Here you will find the involved files in the extensions module and your application and what you will need to add.

Extensions

For reference, we are going to use the following folder structure

src/
  index.js;
  tts/
    id.js; // TTS extension
    index.js;
    interface.js;
    html5/
      index.js; // TTS Html5 implementation
      tts.js;
      config.js;

Your interface, implementation, and configuration should look like the following examples

/index.js

The main export of the module. From here, you should be able to import a specific extension and from there destructure the ID or any implementation

If you add a new extension, you will need to add the following exports

export { default as tts } from './tts'; // exports the tts default as tts

/tts/index.js

We export all the relevant info, from the ID to the implementations

import html5 from './html5';
import vizio from './vizio';
import webos from './webos';
import ID from './id';

export * as html5 from './html5';
export * as vizio from './vizio';
export * as webos from './webos';

export { default as ID } from './id';

export default {
  ID,
  html5,
  vizio,
  webos
};

/tts/id.js

Common ID to refer to the extension without "magic numbers."

export default 'your_unique_ID';

/tts/interface.js

Common interface to be implemented in all the implementations

import { Interface } from '@accedo/xdk-core';

export default Interface.create('Label', {
  method: ['param', 'otherParam']
  // here all the methods that you need to define
});

/tts/html5/index.js

Specific interface implementation implementation

All the extension methods should be defined here

import { klass } from '@accedo/xdk-core';
import Interface from '../interface';

export default klass.create(
  [Interface],
  {},
  {
    method(param, otherParam) {
      // logic here
    }
  }
);

tts/html5/config.js

Exports the extension implementation configuration to simplify the XDK config.

This file is quite standar. Add it in your extension and point to the right implementation file

import ID from '../id';

// We exports the ID to be used by our applications
export { ID };

export default {
  type: ID,
  importer: () => import('./html5')
};

tts/html5/html5.js

Exports the implementation. It's only refered by the configuration importer.

You will need to add your implementation logic here

import { klass } from '@accedo/xdk-core';
import ttsInterface from '../interface';

const Html5TTS = klass.create(
  [ttsInterface],
  {},