Pacos JS

Component / helper library for 23G projects.

Installation

Install via NPM...

npm i pacos-js

...and import like

import {
    UiInput,
    UiSelect,
} from 'pacos-js';

import {
    getDeep,
    loadImage,
    sleep,
} from 'pacos-js/helpers';

Components

Registration

// global
Vue.component('ui-input', UiInput);

// or local
new Vue {
    el: '#app',
    components: {
        UiInput,
    },
};

Helpers

sleep

Just a prettier function for using timeouts with async/await.

const doStuff = async () => {
    console.log('Do something now...');
    await sleep(500);
    console.log('...and when 500ms passes');
};

getDeep

Prevents type errors when properties are undefined.

const response = {
    name: {
        first: 'Youri',
        last: 'Hanssens',
    },
};

getDeep(response, 'name.first');
// e.g. 'Youri';

getDeep(response, 'name.does.not.exist');
// e.g. false

loadImage

Simple function that returns a promise when the given src is loaded by the browser.

const doStuffAfterImageLoaded = async () => {
    const src = 'https://dummyimage.com/400x400';

    await loadImage(src);

    console.log(`${src} is loaded`);
};

Development

Use linters by running watch

npm run watch

Creating a test build

npm pack