VCore

Introduction

VCore is written in plain Javascript, also known as VanillaJS. It includes all modules and exposes all their methods, that interact with ledgers, the DOM and the app's state and settings. It also includes useful helper methods. Themes and Plugins can be created in a unified way using VCore. Have a glance over the methods and you can get the gist of what this library does.

Get, set and cast

VCore gets and sets things that are needed to deal with data and visualize it. The library also allows to cast things, meaning to create or convert things in-memory. It does this by wrapping functionality into methods, that are named starting with, without exception:

• get...
• set...
• cast...

Many of these Methods use other clever open source Javascript libraries, see dependencies below, but also use custom written code. For example the methods for DOM manipulation. Creating these wrapper-methods allows to build user interfaces and exchange or add dependencies without effecting what has been build so far.

The wrappers somewhat "normalize" all frameworks to be accessible through the same syntax. Take these examples:

// this
web3.eth.sendTransaction( txObject ) 

// is accessible via 
setEtherTransaction( data )

// this
new Promise( resolve => {
  socket.emit( which, data, function( res ) {
    resolve( res );
  } );
} );

// is accessible via 
getData( which, data, ledger )

Entities

VCore provides a concept for user name creation. When a user enters a new name for their own account or an associated account, the name is cast with a unique 4-digit tag (#3464), following some rules for readability. The setEntity method in v-entity.js is responsible for this.

Chat message interpreter

VCore can interpret chat messages as transaction. Like a bot. The setRoute method in v-route.js is responsible for this.

A message such as "Hello Peter" will just be a message, whereas the message "send 175 to Peter Pan #4686 for homemade cottage cheese" will be transformed into:

// Transaction Object
{
sender: sender,
recipient: 'Peter Pan #4686',
amount: 175,
reference: 'homemade cottage cheese'
}

Method Parameters

Almost all methods have this structure:

setOrGetSomething( 'which thing', {
  providing: 'an Object',
  containing: 'data',
  and: 'settings'
} );

Whereas the 'which' indicates that the expected typeof the parameter is a string, and the 'data' an Object.

Some methods take a third parameter, when needed. The naming of the parameters may also differ from 'which' and 'data' to provide better indication for what is expected.

Accessing the Methods

While VCore is split into several logical modules, all methods can still be accessed through the main module using "V.setOrGetSomething(...)". Below are a few examples.

/**
 * This will animate the "page" DOM element, giving it a new height over 750 ms (3 * 250).
 */

V.setAnimation( 'page', { height: '560px' }, { duration: 3 } );

/**
 * This will create a new node and place it into the DOM body
 */

V.setNode( 'body', {
  tag: 'div',
  class: 'body__content',
  html: 'Hello V!',
} );

/**
 * This will get an existing entity by a wallet address, which has been
 * previously stored in the app's state (e.g. when the user unlocked a wallet),
 * and then place the name into a div, then into a node with the class "username".
 */

async function drawUserName() {
  const activeAddress = V.getState( 'activeAddress' );
  const entity = await V.getEntity( 'by address', activeAddress );
  cont $targetNode = getNode( '.username' );
  const $div = V.castNode( {
     tag: 'div',
     html: entity.name
  } )
  V.setNode($targetNode, $niceBlueCircle);
}

VCore Dependencies

• JS Cookie
• Moment
• Socket IO
• Velocity
• Web3

VCore List of Methods

/**
 * Note that this list may lag behind the latest commits, 
 * as the library is in active development
 */

// Functionality

setEndpoint( which, data );

getEntity( which );

setEntity( which, data );

getAllEntityData();

getMessage( data );

setMessage( which, data );

getTransaction( data );

setTransaction( which, data );

// DOM

castNode( data ); // also as shorthand: cN( ... );

setNode( targetNode, data ); // also as shorthand: sN( ... );

getNode( which ); // also as shorthand: gN( ... );

setAnimation( targetNode, css, options ); // also as shorthand: sA( ... );

setStyle( whichId, data );

setClick( whichNode, handler );

getCss( which );

castRemToPixel( remValue );

// Ledgers

setData( which, data, whichLedger );

getData( which, data, whichLedger );

// State

getState( which );

setState( which, data );

getNavItem( which );

setNavItem( data );

getCookie( which );

setCookie( which, data );

// Helper for Formatting

castTime( which, whichFormat );

castLinks( which );

castCamelCase( which );

castInitials( which );

// Helper

getIcon( which );

setPipe( ...functions );

// Helper Translation

getTranslation( which ); // also as shorthand: i18n( which )

// Init

getSetting( which );

getApiKey( which );

getNetwork( which );

// Web3

set3Box( which, data );

get3Box( which );

setActiveAddress();

getContractState();

getAddressState( which );

getAddressHistory( which, data );

setAddressVerification( which );

setEtherTransaction( data );

setTokenTransaction( data );