feat(core): plugin defaults

src/core/base/root.ts

@@ -1,9 +1,11 @@
 import {ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core';
+import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format';
 import {
   memoize,
   boolAttr,
   listen,
-  prop
+  prop,
+  attr
 } from '@exadel/esl/modules/esl-utils/decorators';
 
 import {UIPStateModel} from './model';
@@ -34,7 +36,8 @@ export class UIPRoot extends ESLBaseElement {
   public static SNIPPET_SEL = '[uip-snippet]';
 
   /** Indicates that the UIP components' theme is dark */
-  @boolAttr() public darkTheme: boolean;
+  @attr({parser: parseBoolean, serializer: toBooleanAttribute})
+  public darkTheme: boolean;
 
   /** Indicates ready state of the uip-root */
   @boolAttr({readonly: true}) public ready: boolean;

src/core/panel/plugin-panel.tsx

@@ -4,23 +4,26 @@ import {CSSClassUtils} from '@exadel/esl/modules/esl-utils/dom';
 import {skipOneRender} from '@exadel/esl/modules/esl-utils/async';
 import {ESLMediaQuery} from '@exadel/esl/modules/esl-media-query/core';
 import {attr, boolAttr, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
+import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format';
 
 import {UIPPlugin} from '../base/plugin';
 
 export abstract class UIPPluginPanel extends UIPPlugin {
   public static readonly observedAttributes: string[] = ['vertical', 'collapsible', ...UIPPlugin.observedAttributes];
 
   /** Marker to collapse editor area */
-  @boolAttr() public collapsed: boolean;
+  @attr({parser: parseBoolean}) public collapsed: boolean;
 
   /** Marker to make enable toggle collapse action for section header */
-  @boolAttr() public collapsible: boolean;
+  @attr({parser: parseBoolean, serializer: toBooleanAttribute})
+  public collapsible: boolean;
 
   /** Marker that indicates resizable state of the panel */
-  @boolAttr() public resizable: boolean;
+  @attr({parser: parseBoolean, serializer: toBooleanAttribute})
+  public resizable: boolean;
 
   /** Marker that indicates resizing state of the panel */
-  @boolAttr() public resizing: boolean;
+  @attr({parser: parseBoolean}) public resizing: boolean;
 
   /** Marker to make plugin panel vertical */
   @attr({defaultValue: 'not all'}) public vertical: string;

src/plugins/editor/editor.tsx

@@ -8,7 +8,8 @@ import Prism from 'prismjs';
 import {CodeJar} from 'codejar';
 
 import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce';
-import {attr, boolAttr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
+import {attr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
+import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format';
 
 import {UIPPluginPanel} from '../../core/panel/plugin-panel';
 import {CopyIcon} from '../copy/copy-button.icon';
@@ -33,7 +34,8 @@ export class UIPEditor extends UIPPluginPanel {
   @attr({defaultValue: 'html'}) public source: 'js' | 'javascript' | 'html';
 
   /** Marker to display copy widget */
-  @boolAttr({name: 'copy'}) public showCopy: boolean;
+  @attr({parser: parseBoolean, serializer: toBooleanAttribute, name: 'copy'})
+  public showCopy: boolean;
 
   protected override get $icon(): JSX.Element {
     return <EditorIcon/>;

src/plugins/settings/select-setting/select-setting.ts

@@ -1,5 +1,6 @@
 import {randUID} from '@exadel/esl/modules/esl-utils/misc/uid';
-import {attr, boolAttr, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
+import {attr, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
+import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format';
 
 import {TokenListUtils} from '../../../core/utils/token-list';
 import {UIPSetting} from '../base-setting/base-setting';
@@ -27,7 +28,8 @@ export class UIPSelectSetting extends UIPSetting {
    */
   @attr({defaultValue: 'replace'}) public mode: 'replace' | 'append';
   /** Indicates whether setting supports multiple values selected or not */
-  @boolAttr() public multiple: boolean;
+  @attr({parser: parseBoolean, serializer: toBooleanAttribute})
+  public multiple: boolean;
   /** Select field to change setting's value */
   @memoize()
   protected get $field(): ESLSelect {

src/plugins/settings/settings.tsx

@@ -2,6 +2,7 @@ import React from 'jsx-dom';
 
 import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce';
 import {attr, boolAttr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
+import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format';
 
 import {UIPPluginPanel} from '../../core/panel/plugin-panel';
 import {ThemeToggleIcon} from '../theme/theme-toggle.icon';
@@ -21,8 +22,10 @@ export class UIPSettings extends UIPPluginPanel {
   /** Attribute to set all inner {@link UIPSetting} settings' {@link UIPSetting#target} targets */
   @attr() public target: string;
 
-  @boolAttr() public dirToggle: boolean;
-  @boolAttr() public themeToggle: boolean;
+  @attr({parser: parseBoolean, serializer: toBooleanAttribute})
+  public dirToggle: boolean;
+  @attr({parser: parseBoolean, serializer: toBooleanAttribute})
+  public themeToggle: boolean;
 
   /** @readonly internal settings items state marker */
   @boolAttr({readonly: true}) public inactive: boolean;