sham-ui-macro v3.6.0

sham-ui-macro

Babel macros for sham-ui.

Install

Install from yarn: yarn add sham-ui-macro --dev

And add babel-macros plugin to your babel config.

ref

Add to to package.json

• for app for dev envrimonent

"babelMacros": {
  "ref": {
    "uniq": false,
    "enabled": true
  }
}

• for app for prod envrimonent

"babelMacros": {
  "ref": {
    "uniq": true,
    "enabled": true
  }
}

• for library

"babelMacros": {
  "ref": {
    "enabled": false
  }
}

API

Table of Contents

• inject
  • Parameters
  • Examples
• $
  • Parameters
  • Examples
• this$
  • Parameters
  • Examples

inject

Macro for DI.resolve

Parameters

• name string? Name of injected item

Examples

import { inject } from 'sham-ui-macro/inject.macro';
class Service {
    @inject api;
    @inject( 'sham-ui:store' ) uiStore;
}


// ↓ ↓ ↓ ↓ ↓ ↓

class Service {
   get api() {
       return this.DI.resolve('api');
   }

   get uiStore() {
       return this.DI.resolve('sham-ui:store');
   }

}

$

Macro for get/generate uniq reference

Parameters

• name (string | Object)? Name of reference or object for processing

Examples

// Config in package.json
// "babelMacros": {
//   "ref": {
//     "enabled": true,
//     "uniq": true
//   }
// }

import { $ } from 'sham-ui-macro/ref.macro';

const firstName = $();
const lastName = $.lastName;
const state = {
    [ firstName ]: 'John',
    [ lastName ]: 'Smith'
}
const fullName = state[ $( 'firstName' ) ] + state[ $.lastName ];
const user = $( { firstName: 'John', lastName: 'Smith' } );

// ↓ ↓ ↓ ↓ ↓ ↓

const firstName = 0;
const lastName = 1;
const state = {
    [ firstName ]: 'John',
    [ lastName ]: 'Smith'
}
const fullName = state[ 0 ] + state[ 1 ];
const user = { 0: 'John', 1: 'Smith' };

this$

Sugar for $ macro. Translate this$.foo to analog this[ $.foo ]

Parameters

• name string? Name of reference

Examples

// Config in package.json
// "babelMacros": {
//   "ref": {
//     "enabled": true,
//     "uniq": true
//   }
// }

import { this$ } from 'sham-ui-macro/ref.macro';

this$.handleClick = e => { };

// ↓ ↓ ↓ ↓ ↓ ↓

this[ 0 ] = e => {};