Component editor overview

Component editor consists of the following parts:

• Left sidebar
  • Main controls
  • Nodes tree
  • Add nodes panel
  • Methods editor
  • Component/store editor
• Central part with WYSIWYG editor
• Right sidebar
  • Is active settings
  • DOM node type editor
  • Node name setting
  • CSS settings
  • DOM attribute settings
  • Event handler settings
  • Child component props

Main controls

At the very top of the left sidebar you see controls

• to exit the editor
• open the component editor
• open component preview
• save the component

Component preview opens a separate tab where renders the component and executes methods and functions.

Nodes tree

Nodes tree represents the inner structure of your component. You can expand/collapse elements for better visibility.

Add nodes panel

Add nodes panel shows DOM nodes and components that you can add into the nodes tree. Search coponents using the input at the top of the panel.

Methods editor

If you click on the JS tab on the left sidebar - methods editor opens. It has a lot of controls inside so it looks like a whole different mode of the component editor screen.

Methods editor consists of the following parts:

• Left sidebar
  • Lifecycle methods list
  • Custom methods list
• Center - method/function editor
• Right sidebar
  • Functions list with search

Lifecycle methods list

At the top left you see the list of lifecycle methods of the component. Currently there are 2 methods: mounted and destroy.

Lifecycle methods can't be called manually.

Custom methods list

You can add custom methods which can be

• used for settings computations
• called from lifecycle methods or other custom methods
• passed as props to other functions or down to child components

Method/function editor

Central part is both function and method editor. The main element here of course is the code editor. Other important elements are function call name, how you reference the method/function from other places, and type other method/function, syncronous or asyncronous.

When you work with a syncronous method you can set up preview data that will be used as a mock result in the editor while development.

You can define a list of different mock data values and switch between them when needed.

Note that mock data is saved as a string and is evaluated by JSON.parse while executing. It means that you need to provide a valid JSON, a number, boolean or a string in quotes. Otherwise the data will be ignored.

Pay attention that changes made to methods are saved when you save the component. Changes that you made in functions you need to save separately when you make them.

Functions list with search

On the right you see the list of functions that exist in the system with search input.

We need them here for 2 reasons:

• comfort to switch between methods and functions while development
• possibility to set up dependency functions that will be available during method/function execution.

Component/store editor

It is another big part of the editor screen. At the very top of the left side you can see the name of your component. When click on it the whole screen updates so that you can work with component and store settings.

It consists of several parts:

• Store editor
• Component editor
• Component props editor

Store editor

In the store editor you can set the initial value that the store will have when a page opens. Store is global for all pages, components, functions, etc.

You can also store preview data values that will be used as mocks when working in the editor.

Component editor

In the component editor you can set up a name for the component.

You can set up the initial data for instances of this component. And preview values that will be used as mocks in the editor.

Component props editor

To add a prop to the component click the "plus" button near the "props" collapsible on the left sidebar.

You can set a name for the prop and a default value that will be used if no explicit value is provided for the prop.

Also you can set up preview values for props that will be used as mocks in the editor.

WYSIWYG editor

In the center of the editor screen you see the component rendered using the currently selected mock values. Inside the editor methods and functions are not executed, that is why we rely on mock values to render the component based on a specific state of the data.

Right sidebar

On the right sidebar you see different panels with settings relevant for currently selected node.

All of nodes have:

• Is active settings
• Node name setting

DOM nodes have:

• DOM node type selector
• CSS settings
• DOM attribute settings
• Event handler settings

Components have

• Child component props settings panel