Views

Overview

Writing assets or views is as simple as creating a React element using your base DSL components:

import React from 'react';
import { Input, Text, Collection } from '@player-ui/reference-assets-components';

const view = (
  <Collection>
    <Text>Some value</Text>
    <Input>
      <Input.Label>Some label</Input.Label>
    </Input>
  </Collection>
);

When compiled, this would produce the following JSON.

{
  "id": "root",
  "type": "collection",
  "values": [
    {
      "asset": {
        "id": "root-values-1",
        "type": "text",
        "value": "Some value"
      }
    },
    {
      "asset": {
        "id": "root-values-2",
        "type": "input",
        "label": {
          "asset": {
            "id": "root-values-2-label",
            "type": "text",
            "value": "Some label"
          }
        }
      }
    }
  ]
}

Not only is the source DSL content a fraction of the output object’s size (making it easier to read and maintain) as the base components use the same TypeScript types as the assets themselves, you will receive in editor suggestions and type checks as you author your content.

View Concepts in DSL

Templates

Templates are included via the @player-tools/dsl package. This can be used in any asset slot:

import React from 'react';
import { dataTypes } from '@player-ui/common-types-plugin';
import { makeBindingsForObject, Template } from '@player-tools/dsl';

const schema = {
  foo: [{
    bar: dataTypes.StringType,
  }],
};

const bindings = makeBindingsForObject(schema);

<Collection>
  <Collection.Values>
    <Template data={bindings.foo}>
      <Text>The current item is: {bindings.foo._index_.bar}</Text>
    </Template>
  </Collection.Values>
</Collection>

Templates can be nested within one another, and the auto-id generation will handle adding the _index_ information to any generated id.

Switches

The @player-tools/dsl module also includes support for static and dynamic switches.

Use the isDynamic flag to denote this should be a dynamicSwitch instead of a staticSwitch:

import React from 'react';
import { Switch } from '@player-tools/dsl';

<Collection>
  <Collection.Label>
    <Switch isDynamic>
      <Switch.Case exp={e`foo() = bar()`}>
        <Text>Text 1</Text>
      </Switch.Case>
      <Switch.Case>
        <Text>Text 1</Text>
      </Switch.Case>
    </Switch>
  </Collection.Label>
</Collection>

DSL Benefits in Views

IDs

Any asset can accept an id property, however automatic ID creation is supported out of the box by the base Asset component and it’s generation behavior can be further customized via your component’s implementation.

Collection/Text Creation

In the event that an asset object is expected, but a string or number is found, Player will attempt to automatically create a text node, provided the asset-library has a text-asset-factory configured.

Similarly, if a single asset is expected but a list of them is found instead, Player will attempt to create a collection asset provided the library has the proper configuration set.

Meta Components

As DSL components are React component, they can be composed into reusable building blocks to simplify and abstract away common UI patterns. By centralizing these patterns, code duplication can be minimized and updates across multiple sets of content can be simplified. These composed components don’t just have to be built on top of the base set of DSL components, DSL components themselves can offer common shortcuts for behavior. For example, if we wanted to offer an out of the box Action component that could be used as a Next action asset, we could export the following from the DSL components library.

import React from 'react';

Action.Next = () => (
  <Action value="next">
    <Action.Label>Continue</Action.Label>
  </Action>
);