Packages & Bundles

Player Web X is built on top of the Phoenix Framework and therefore uses a certain mechanism to implement features: Packages. You can think of packages as packaging certain features and behaviors together, that semantically belong together, into a single and standalone JavaScript artifact.

On top of those packages, the Player then adds the concepts of Bundles. Simply put, a bundle just takes a certain list of packages and bundles them together into a single JavaScript artifact that can then directly be included in an application or a web page.

This section will briefly describe what Packages and Bundles are and how they are used. If you're interested in a more detailed explanation, please refer to the Create integrations with Player Web X section.

📘

This section is still a work in progress and subject to change.

For a more detailed explanation of individual packages and bundles, please refer to the API documentation hosted on our CDN.

Packages

In the Phoenix Framework and therefore also Player Web X, features and functionality is implemented and encapsulated in Packages. By design, every package needs to work on its own - there can not be any direct dependencies (read: imports) between packages. If one package depends on functionality provided by a different package, it needs to add that functionality to its list of dependencies. The framework will then ensure that the package only starts executing after all of its dependencies have been met.

Shown below is a simple package that only depends on a Logger component to log an appropriate message to the console.

type Dependencies = {
  [ComponentName.Logger]: Logger;
};

type Exports = {
  // we don't export anything
};

type HelloWorldContext = ContextHaving<Dependencies, Exports, BaseContext>;

const HelloWorldPackage = createPackage(
  'hello-world-package',
  (apiManager: ApiManager<any>, context: HelloWorldContext) => {
    const logger = context.registry.get(ComponentName.Logger);

    logger.debug('Hello, World!');
  },
  [ComponentName.Logger],
);

This package depends on a logging component of type Logger while not exporting anything. Adding this package to a player instance can be done using the Package API.

const player = Player({
  key: 'my-player-key',
  defaultContainer: document.getElementById('container'),
});

player.packages.add(HelloWorldPackage);

A more detailed explanation of how packages are built exactly, how package dependencies, exports and APIs are exposed as well as how to properly use the Package API can be found in the Create integrations with Player Web X section.

Bundles

Bundles are not a concept of the Phoenix Framework, but of Player Web X. They offer a convenient and easy-to-use way of bundling together a set of packages that are often used together for a specific use case, and to generate a single JavaScript artifact that can directly be loaded on a web page or be bundled into an application.

Currently there are a few pre-built bundles that can be used for different use cases as listed in the table below.

All of the packages and bundles are also hosted on our CDN and contained within our npm package.