UIPPlugin

UIPPlugin - base class for all UIP elements. Should be used as a parent class for all custom plugins of UIP to correctly observe UIPRoot state.

All UIP elements are UIPPlugin instances. Plugin automatically sets uip-plugin class to its elements, provides access to UIPRoot.

UIPPlugin has its own header section block, where additional buttons and header icon can be specified.

UIPPlugin uses the following attributes:

• resizable - allows resizing the plugin.
• collapsible - allows collapsing the plugin.
• resizing - indicates resizing state of the panel.
• collapsed - collapses the plugin by default.
• vertical - sets vertical orientation for the plugin.

Processing markup changes

import {UIPPlugin} from './plugin';

class UIPComponent extends UIPPlugin {
  @listen({event: 'uip:change', target: (that: UIPSetting) => that.$root})
  protected _onRootStateChange(): void {
    ...
  }
}

You can find a way of getting current markup in UIPStateModel section.

Example

import {UIPPlugin} from './plugin';

class UIPPreview extends UIPPlugin {
  @listen({event: 'uip:change', target: (that: UIPPreview) => that.$root})
  protected _onRootStateChange(): void {
    this.$inner.innerHTML = this.model!.html;
    this.innerHTML = '';
    this.appendChild(this.$inner);
  }
}

---

UIPRoot

UIPRoot - container for UIPPlugin components.

UIPRoot contains UIPStateModel and UIPSnippets getters. It also allows UIPPlugin elements to subscribe to model, snippets or theme changes (or unsubscribe from them). More details can be found in UIPPlugin section.

Example

<uip-root></uip-root>

---

UIPStateModel

UIPStateModel - state manager which contains current UIP state and provides methods for changing it.

UIPStateModel has current js, markup and note states. It also provides UIPSnippet item values, current active snippet and snippet item that relates to current anchor. Every time we produce a change, it fires change event.

UIPStateModel also contains the following methods:

getAttribute() - method returns attributes (attr field) values from targets.

changeAttribute() - callback is used for changing elements attributes. It takes ChangeAttrConfig as a parameter. This type looks like this:

export type TransformSignature = (
  current: string | null
) => string | boolean | null;

export type ChangeAttrConfig = {
  target: string;
  attribute: string;
  modifier: UIPPlugin;
} & (
  | {
      value: string | boolean;
    }
  | {
      transform: TransformSignature;
    }
);

Here attribute stands for attribute name and target - for target elements. Modifier field represents the UIPPlugin instance which triggers attribute's changes.

The last field can either be value (this value replaces current attribute's value) or transform function (it maps current attribute value to the new one).

The examples of using this API can be found in UIPSetting implementations (e.g. UIPBoolSetting).

Example

import {UIPPlugin} from './plugin';

class UIPComponent extends UIPPlugin {
  protected _onComponentChange() {
    // ...
    this.model!.setHtml('New HTML here!', modifier);
    this.model!.setJS('New JS here!', modifier);
    this.model!.setNote('New Note here!', modifier);
    // ...
  }
}

UIP Preview

UIPPreview - is a mandatory UIP custom element that displays active markup. Extends UIPPlugin.

UIPPreview element observes UIPStateModel changes, but it doesn't produce them.

The uip-preview should be placed inside UIPRoot element.

Example

<uip-preview></uip-preview>