Custom Web Components (CWC)

Resource Components

Add resources to your application; use requests to talk to an authenticated API or maybe access local storage. Resources offer just that, not web components in themselves, but a collection of ES6 class based exports for extending application functionality.


CWCResourceCrypto
End Next

Library class giving static crypto resources.

static md5

Create an MD5 hash

String md5(String s)
  • param string s The string to hash.
  • return string A hash of the string. 

import CWCResourceCrypto from '/node_modules/custom-web-components/src/resource/CWCResourceCrypto.js';

// sha256 hash
const sha256 = CWCResourceCrypto.sha256('hello');

static sha256

Create an sha256 hash

String sha256(String s)
  • param string s The string to hash.
  • return string A hash of the string. 

import CWCResourceCrypto from '/node_modules/custom-web-components/src/resource/CWCResourceCrypto.js';

// sha256 hash
const sha256 = CWCResourceCrypto.sha256('hello');

CWCResourceRequest
Prev Next

Library class giving async ajax requests with JWT resolution and auto refresh on JWT expiration.

constructor

Instantiate the instance

Object constructor(String baseName)
  • param string baseName The basename for the resource, such as your DNS name or hte application name (to scope any local storage values).
  • return object An instance of the class. 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

ajax

Perform an ajax request

Promise ajax(String type, String url, Mixed data, Object headers)
  • param string type The request type such as GET, POST...
  • param string url The url to make the request to.
  • param string data Any payload data to go with the request.
  • param string headers Any headers to send.
  • return promise A promies that is resolved when the request is fullfilled. 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// raw ajax request
request.ajax('POST', 'http://your-api.com/account', { some: 'data' }, { 'Accept': 'application/json' })
	.then((response) => console.log(response.data))
	.catch((error) => console.log(error));

get

Perform a get request

Promise get(String path)
  • param string path The path to perform the request on (adds to scheme + baseUrl).
  • return promise A promise resolved on completion of request. 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// set up base URL for dedicated method
request.setBaseUrl('http://your-api.com');

// get request against a resource
request.get('account/1')
	.then((response) => console.log(response.data))
	.catch((error) => console.log(error));

put

Perform a put request

Promise get(String path, Mixed data)
  • param string path The path to perform the request on (adds to scheme + baseUrl).
  • param mixed data Any data to send as the payload for REST style request.
  • return promise A promise resolved on completion of request. 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// set up base URL for dedicated method
request.setBaseUrl('http://your-api.com');

// put request against a resource with full dataset
request.put('account/1', { all: 'data', some: 'data' })
	.then((response) => console.log(response.data))
	.catch((error) => console.log(error));

patch

Perform a patch request

Promise patch(String path, Mixed data)
  • param string path The path to perform the request on (adds to scheme + baseUrl).
  • param mixed data Any data to send as the payload for REST style request.
  • return promise A promise resolved on completion of request. 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// set up base URL for dedicated method
request.setBaseUrl('http://your-api.com');

// patch request against resource with partial dataset 
request.patch('account/1', { some: 'data' })
	.then((response) => console.log(response.data))
	.catch((error) => console.log(error));

post

Perform a post request

Promise post(String path, Mixed data)
  • param string path The path to perform the request on (adds to scheme + baseUrl).
  • param mixed data Any data to send as the payload for REST style request.
  • return promise A promise resolved on completion of request. 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// set up base URL for dedicated method
request.setBaseUrl('http://your-api.com');

// post request new resource with full data
request.post('account', { all: 'data', some: 'data' })
	.then((response) => console.log(response.data))
	.catch((error) => console.log(error));

delete

Perform a delete request

Promise delete(String path)
  • param string path The path to perform the request on (adds to scheme + baseUrl).
  • return promise A promise resolved on completion of request. 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// set up base URL for dedicated method
request.setBaseUrl('http://your-api.com');

// delete request against resource
request.delete('account/1')
	.then((response) => console.log(response.data))
	.catch((error) => console.log(error));

upload

Perform a post request with multipart data

Promise upload(String path, Object files)
  • param string path The path to perform the request on (adds to scheme + baseUrl).
  • param Array[FileObject] files Array of FileObjects (Browser FileObject) to send.
  • return promise A promise resolved on completion of request. 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// set up base URL for dedicated method
request.setBaseUrl('http://your-api.com');

// upload request a new resource
request.upload('account', [new FileObject()])
	.then((response) => console.log(response.data))
	.catch((error) => console.log(error));

getToken

Get current JWT token

String getToken()
  • return string The JWT token stored in local storage. 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// set up base URL for dedicated method
request.setBaseUrl('http://your-api.com');

// get the current JWT token from local storage
let token = request.getToken();

setToken

Set JWT token in local storage

String setToken(String jwtToken)
  • param string jwtToken The JWT token stored in local storage.
  • return string The path to perform the request on (adds to scheme + baseUrl). 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// set up base URL for dedicated method
request.setBaseUrl('http://your-api.com');

// set the current JWT token from local storage
let jwtToken = 'Token recieved when loggin in from login request';
request.setToken(jwtToken);

hasToken

Has JWT token been set in local storage

Boolean hasToken()
  • return boolean True if the JWT token is stored in local storage. 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// set up base URL for dedicated method
request.setBaseUrl('http://your-api.com');

// set the current JWT token from local storage
console.log(request.hasToken());

deleteToken

Delete JWT token from local storage

deleteToken() 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// set up base URL for dedicated method
request.setBaseUrl('http://your-api.com');

// delete the current JWT token from local storage (such as logged out!)
request.deleteToken();

setBaseUrl

Set the base url and scheme on the instance

setBaseUrl(String value)
  • param string value The URL, path or route to set base ref and scheme from. Defaults to https if fully qualified URL not passed in. 

import CWCResourceRequest from '/node_modules/custom-web-components/src/resource/CWCResourceRequest.js';

// instantiate
let request = CWCResourceRequest('my-application');

// set up base URL for dedicated method
request.setBaseUrl('http://your-api.com');

CWCResourceStore
Prev Start

Class definition, adds local storage resources.

constructor

Instantiate the instance

Object constructor(String baseName)
  • param string baseName The basename for the resource, such as your DNS name or hte application name (to scope any local storage values).
  • return object An instance of the class. 

import CWCResourceStore from '/node_modules/custom-web-components/src/resource/CWCResourceStore.js';

// instantiate
let store = CWCResourceStore('my-application');

hasItem

Has a thing from local storage ben set

Boolean hasItem(String key)
  • param string key The key for the item to check 

import CWCResourceStore from '/node_modules/custom-web-components/src/resource/CWCResourceStore.js';

// instantiate
let store = CWCResourceStore('my-application');

// Check is a key exists
console.log(store.hasItem('something.saved'));

getItem

Get a thing from local storage

Mixed hasItem(String key)
  • param string key The key for the item to get
  • return mixed Value set, such as number string, object 

import CWCResourceStore from '/node_modules/custom-web-components/src/resource/CWCResourceStore.js';

// instantiate
let store = CWCResourceStore('my-application');

// Check is a key exists
console.log(store.getItem('something.saved'));

setItem

Set a value on local storage

Boolean setItem(String key, Mixed value)
  • param string key The key for the item to set
  • param mixed value The value to store such as object, string, number
  • return boolean Was it successfull or not 

import CWCResourceStore from '/node_modules/custom-web-components/src/resource/CWCResourceStore.js';

// instantiate
let store = CWCResourceStore('my-application');

// Check is a key exists
store.setItem('something.saved', { test: 'object' });

deleteItem

Delete a value on local storage

Boolean deleteItem(String key)
  • param string key The key for the item to delete
  • return boolean Was it successfull or not 

import CWCResourceStore from '/node_modules/custom-web-components/src/resource/CWCResourceStore.js';

// instantiate
let store = CWCResourceStore('my-application');

// Check is a key exists
console.log(store.deleteItem('something.saved');

Go To Top

©custom-web-component is the property of Paul Smith (ulsmith)

Made with for the Open Source Community pa.ulsmith.net