How to use the vc-cake.getService function in vc-cake

addStorage('assetsBackend', (storage) => {
  const documentManager = getService('document')
  const stylesManager = getService('stylesManager')
  const elementAssetsLibrary = getService('elementAssetsLibrary')
  const assetsStorage = getService('modernAssetsStorage')
  const utils = getService('utils')
  const globalAssetsStorage = assetsStorage.getGlobalInstance()
  // const settingsStorage = getStorage('settings')
  const assetsContentWindow = window.document.querySelector('.vcv-layout-iframe').contentWindow
  const assetsWindow = window
  const builder = new CssBuilder(globalAssetsStorage, elementAssetsLibrary, stylesManager, assetsWindow, assetsContentWindow, utils.slugify)
  const assetsLibraryManager = new AssetsLibraryManager()
  const data = { elements: {} }

  storage.on('addElement', (id) => {
    let ids = Array.isArray(id) ? id : [ id ]
    ids.forEach((id) => {
      const element = documentManager.get(id)
      data.elements[ id ] = element
      storage.trigger('addSharedLibrary', element)
      builder.add(element)
    })

addStorage('shortcodeAssets', (storage) => {
  const utils = getService('utils')

  // new shortcode logic
  let loadedFiles = []
  let collectLoadFiles = () => {
    loadedFiles = []
    const assetsWindow = window.document.querySelector('.vcv-layout-iframe').contentWindow

    let data = {
      domNodes: assetsWindow.document.querySelectorAll('style, link[href], script'),
      cacheInnerHTML: true
    }
    loadFiles(data)
  }

  let scriptsLoader = {
    src: [],

getElement: function(name, settings, value, element) {
    if ('public' === settings.getAccess()) {
      let ComponentView = this.getComponent(settings.getType().toLowerCase());
      return React.createElement(ComponentView, {
        value: value,
        key: vcCake.getService('utils').createKey(),
        element: element,
        settings: settings,
        name: name
      });
    }
    return null;
  },
  shouldComponentUpdate(nextProps, nextState) {

addStorage('assets', (storage) => {
  const cook = getService('cook')
  const documentManager = getService('document')
  const stylesManager = getService('stylesManager')
  const elementAssetsLibrary = getService('elementAssetsLibrary')
  const assetsStorage = getService('modernAssetsStorage')
  const wordpressDataStorage = getStorage('wordpressData')
  const utils = getService('utils')
  const globalAssetsStorage = assetsStorage.create()
  const settingsStorage = getStorage('settings')
  const assetsLibraryManager = new AssetsLibraryManager()
  const data = { elements: {} }
  const getAssetsWindow = () => {
    return window && window.document.querySelector('.vcv-layout-iframe') ? window.document.querySelector('.vcv-layout-iframe').contentWindow : window
  }
  const setAttributeLibNames = () => {
    let storageLibs = storage.state('attributeLibs').get()
    if (!storageLibs) {
      storageLibs = AttributeLibNames
    } else {
      storageLibs = [...storageLibs, ...AttributeLibNames]
    }
    storage.state('attributeLibs').set(storageLibs)
  }

import { addService, getService, getStorage, env } from 'vc-cake'
import { getResponse } from 'public/tools/response'

const utils = getService('utils')
const documentManager = getService('document')
let getType = {}.toString

let processRequest = (action, key, data, successCallback, errorCallback) => {
  let ajax = getService('utils').ajax

  return ajax({
    'vcv-action': `editorTemplates:${action}:adminNonce`,
    'vcv-nonce': window.vcvNonce,
    'vcv-template-type': (window.VCV_EDITOR_TYPE && window.VCV_EDITOR_TYPE()) || 'default',
    [ key ]: data
  }, (result) => {
    let response = getResponse(result.response)
    if (response && response.status) {
      successCallback && typeof successCallback === 'function' && successCallback(response)
    } else {

api.reply('start', function () {
    var localStorage = vcCake.getService('local-storage')
    var timeMachine = vcCake.getService('time-machine')
    var data = localStorage.get()
    timeMachine.setZeroState(data)
    api.request('data:reset', data)
  })
})

api.on('save', function () {
    var localStorage = vcCake.getService('local-storage')
    var documentData = vcCake.getService('document')
    localStorage.save(documentData.all())
  })
})

api.on('save', function () {
    var localStorage = vcCake.getService('local-storage')
    var documentData = vcCake.getService('document')
    localStorage.save(documentData.all())
  })
})

getElementAttribute: function() {
    var type = this.props.paramSettings.getType().toLowerCase();
    this.elementAttribute = vcCake.getService('attributes').get(type);
  },
  getComponent: function() {

import {getService} from 'vc-cake';
import {buildAttributes} from './tools';

const documentManager = getService('document-manager');

export default class Element {
  constructor(id) {
    let element = documentManager.get(id);
    if('object' !== typeof element) {
      throw new Error('Wrong element id');
    }
    this.element = buildAttributes(element);
  }
}