Module | @dhealthdapps/frontend

interface

Module

description

This interface represents individual dynamic modules as loaded by the frontend. Per each module we then define page details, components and state discoveries that are specific to a module.

Typically, module configuration files will have either of a .json or .jsonc extension, depending on whether you like to document/comment module definition files or not.

example

Using the Module interface

  const config = require("./module.json");

  // using the interface directly
  const module1 = config as Module;

  // or using a module factory
  const module2 = createModule(config);

Properties

param identifier

The module identifier, this is a kebab-case formatted name, e.g. "game-leaderboard". (Required)

param dependencies

The state dependencies configuration. This defines a tear-up process using state discovery for all the pages that are in this module. (Optional)

param namespaced

This property defines whether the router configuration must use a namespace prefix, i.e. the module identifier, in the URL for accessing specific pages.

param routerConfig

The page schema(s) that are built to present the module at a end-user level, i.e. Page. (Required)

since

v0.1.0

Hierarchy

Module

Index

Properties

Optional dependencies

dependencies?: State

The state dependencies configuration. This defines a tear-up process using state discovery for all the pages that are in this module. This property is optional and only relevant if any state discovery must be run before pages are rendered.

Note that for pages specific state discovery, it is best to use the {@link Schema} interface's dependencies property.

Also note that setting the State.waitFor property on Module instances' dependencies enables the tear-up logic for the entire module instead of for individual pages or components. This is useful in cases where more than one page or card in the same module need one identical dataset or whenever data discovery must happen pre-render.

var: {State|undefined}

identifier

identifier: string

The module identifier, this is a kebab-case formatted name, e.g. "leaderboard-statistics". This should be unique across one frontend instance.

Note that changing a module identifier on a production environment is not recommended due to the URL change that is going to happen.

var: {string}

Optional namespaced

namespaced?: boolean

This property defines whether the router configuration must use a namespace prefix, i.e. the module identifier, in the URL for accessing specific pages.

Note that if you are using a namespaced module, all pages must be accessed using the module identifier prefix.

var: {boolean|undefined}

routerConfig

routerConfig: Record<string, Page>

The vue-router paths definition, e.g. "/game-leaderboard". This should define unique routes for the module instance. It is also possible to use variables that will be mapped using vue-router internally.

Note that if you are using dynamic path mappings (variables), it is important that you also define validator instances and transformers in case of necessary transformations.

example

Examples of valid router paths

// simple router paths
const path1 = "/accounts";
const path2 = "/identities";

// advanced paths using dynamic path mapping
const path3 = "/accounts/:address/transactions";
const path4 = "/accounts/:address/mosaics";

var

{Record<string, Page>}