Skip to content

Basics for Javascript developers

Jump to bottom
Vjaceslav Vasenin edited this page Feb 3, 2020 · 1 revision

All Javascript code is in public directory. All code is written with the help of ReactJs, VC cake, Webpack, Less and PostCSS.

For coding standards use standardJS.

Build and configure files

Webpack is a static module bundler for modern JavaScript applications. We use it to build all parts of the project.

  • webpack.config.4x.babel.js is the main configuration file
  • webpack.config.production.4x.babel.js is the main production configuration file

Visual Composer public JavaScript consists of 4 main parts (entry points): Editor, Activation, Backend Switcher and WordPress Dashboard Settings.

Build commands for all parts:

yarn install
yarn build
# production build
yarn build-production

Editor

The editor is a web interface for building pages layouts. The main entry point file public/editor.js. The editor consists of a top window where editor UI exists and iframe where the current layout is displayed.

There is also file for iframe part where required code is loaded for connecting iframe environment with editor (parent) environment. Entry point public/base.js.

For the view page, there is also file that triggers js events for visual composer and includes required libraries. Entry point file public/frontView.js.

Editor/modules

Directory: public/editors/modules

Editor modules manage content part of an iframe and editor workspace. Layout module represents wrappers and manages components to build the layout and to add controls and drag and drop features. To communicate with other parts of the system, modules use storages and services.

Modules list:

  • layout - used inside the iframe to add elements to the layout. Manages controls and Drag&drop activity.
  • updateContent - used by post update. Post update is used to rebuild layouts if some elements were updated via HUB.
  • wordpressWorkspace - helps to connect elements controls and layout data with the editor interface elements like edit form, add element panel, settings panel and layout controls.

Editor/services

Directory 'public/editor/services'

Editor services are objects that can be used everywhere in our system including external files that are outside mount point of editor.js. Service can be accessed via getService method of vc-cake.

Example:

const {getService} from 'vc-cake'
const documentData = getService('document')

const parentID = 1
const elementChildren = documentData.children(parentID)

Services list:

  • actionsManager - manage actions for elements like setup visibility property, attach image URLs and update dependency classes for parent and children
  • api - API for elements and public events. Used by elements to get superclass for element's component. Public vc events like ready and others that are used by elements for public js
  • cook - service which helps to work with element components and attributes
  • dataProcessor - sends ajax request to the server with pre-configured attributes
  • document - service which stores data about current layout and its elements. Can be used with cook service
  • elementsAccessPoint - single access point for element data. This service is used by edit form panel component.
  • elementAssetsLibrary - service which manages elements specific assets libraries
  • hubAddons - helps to manage HUB addons list
  • hubCategories - helps to manage HUB elements categories
  • hubElements - helps to manage HUB elements list
  • hubGroups helps to manage HUB groups of elements
  • modernAssetsStorage - manages building of element PostCSS mixins
  • renderProcessor - supporting service to help manage data flow with promises
  • rulesManager - service helps to check data value with some comparison rules like: maxlength, minlength, toggle, range and etc. Possible to use async and sync methods
  • sharedAssetsLibrary - shared assets are libraries that are implemented in the editor and can be used in a specific moment. This service helps to manage it
  • stylesManager - service helps to compile Post CSS to CSS
  • utils - different utilities
  • wordpress-post-data - service to work with global data for current WordPress post/page in the editor
  • wpMyTemplates - helps to manage my templates in the Template panel.

Editor/stores

Stores are connectors between different parts of the editor. You can use a publish-subscribe pattern with the help of trigger, on, once methods of the storage. You can also save state and subscribe to state onChange method.

Example of usage of elements and workspace storages:

/**
* components/panels/addElement/lib/categories.js
*/
import {getService, getStorage} from 'vc-cake'

const cook = getService('cook')
const workspaceStorage = getStorage('workspace')
const elementsStorage = getStorage('elements')
// ...
const workspace = workspaceStorage.state('settings').get() || false
const parentElementId = workspace && workspace.element ? workspace.element.id : false
const data = cook.get({ tag: tag, parent: parentElementId })
elementsStorage.trigger('add', data.toJS(), true)

/**
* editor/stores/elements/elementsStorage.js
*/
import { addStorage, getService} from 'vc-cake'

const cook = getService('cook')

addStorage('elements', (storage) => {
 storage.on('add', (elementData, wrap = true, options = {}) => {
   const createdElements = []
   const cookElement = cook.get(elementData)
   if (!cookElement) {
     return
   }
   // ... here comes other code
 })
})

Stores list:

  • assets - works with CSS/JS and other assets related things for elements
  • attributes - inner API for elements attributes. Example: iconpicker icons management.
  • elements - add, update, delete, clone or move elements. That where all activity with layout data happens.
  • elementsLoader - manages the process of enqueueing elements javascript bundle files for post-update action.
  • events - custom events storage
  • history - undo/redo actions are managed in this storage
  • hub - manage addons, elements, templates in HUB. Example: downloading new element from HUB
  • notifications - manage notifications messages for the editor
  • sharedAssets - add new shared assets. Shared assets are predefined assets that elements can use inside their components. Example: waypoints.js
  • shortcodesAssets - deals with assets that were returned by the server after rendering shortcode string in an element
  • wordpressData - is used to load initial data and save it after applying changes
  • cacheStorage.js - small cache server for caching custom data
  • fieldOptionsStorage.js - attributes API storage to customize an initial value of an element attribute
  • layout.js - storage is used to manage pages layouts. Header, footer and sidebar settings
  • migrationStorage.js - manage the migration process
  • settingsStorage.js - manage settings for the current page. Settings like: layout, custom CSS/js, title and etc. Mostly works with data from the Settings panel
  • workspaceStorage.js - editor's workspace responsible for connecting navbar events with other storages and services

Sources and tools

Sources directory stores different source code like less, CSS, assets libraries, images and elements attributes types. Element's attribute type is a type of the field in edit form panel. Example: dropdown, attach images, design options. All attributes have getter, setter and component. A component is used to render attribute and it's value.

Tools directory is used to store 3rd-party code without npm packages.

Components

Components directory stores UI and UX related parts of the editor. It can be React components, UI libraries for managing content or event libraries that help control event lifecycle in the front view of the built page.

Activation

The activation process is required to add the license to the system. A license gives the ability to download elements, template and addons in HUB panel. Activation happens in WordPress dashboard. The main entry point file public/activation.js.

Backend Switcher

Backend switcher is buttons group to switch from Gutenberg or classic editor to Visual Composer frontend editor. The main entry point file public/backendSwitch.js.

WordPress Dashboard Settings

Settings section for Visual Composer is a group of global settings and theme management tools. The settings section is in Wordpress dashboard. The main entry point file public/wordpressSettings.js.

Clone this wiki locally