@kamen/create-webapp/README.md

npm init @kamen/webapp

# @kamen/create-webapp [![NPM Version](https://img.shields.io/npm/v/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![Node Version](https://img.shields.io/node/v/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![NPM Bundle Size](https://img.shields.io/bundlephobia/minzip/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![NPM License](https://img.shields.io/npm/l/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![NPM Downloads](https://img.shields.io/npm/dm/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![jsDelivr Downloads](https://data.jsdelivr.com/v1/stats/packages/npm/@kamen/create-webapp/badge?type=hits&style=rounded)](https://www.jsdelivr.com/package/npm/@kamen/create-webapp) [![jsDelivr Rank](https://data.jsdelivr.com/v1/stats/packages/npm/@kamen/create-webapp/badge?type=rank&style=rounded)](https://www.jsdelivr.com/package/npm/@kamen/create-webapp)


## Project Scaffolding (wip)

```bash

$ npm init @kamen/webapp
```


## Utility Functions


### Basic example

```js
import {
    createRandomFromRange,
    createRandomFromList,
    createRandomColorFromSaturationLightnessAlpha
} from '@kamen/create-webapp';

const characters = Array
    .from({length: 26}, (_, index) => [
        String.fromCharCode(65 + index),
        String.fromCharCode(97 + index)
    ])
    .flat();
const ageHandler = createRandomFromRange(0, 99);
const colorHandler = createRandomFromList(['red', 'green', 'blue']);
const stateHandler = createRandomFromList([true, false]);
const identHandler = createRandomFromList(characters);
const identFormatHandler = () => Array
    .from({length: 1 << 5}, identHandler)
    .join('');
const data = Array
    .from({length: 1 << 8}, (_, index) => ({
        index,
        age: ageHandler(),
        color: colorHandler(),
        state: stateHandler(),
        ident: identFormatHandler()
    }));

console.dir(data);
```


### Dynamic import from CDN

```js
const {
    createRandomFromList
} = await import('https://esm.run/@kamen/create-webapp');

function createAlphabet() {
    const baseChar = 'a';
    const lowerCode = baseChar.charCodeAt();
    const upperCode = baseChar.toUpperCase().charCodeAt();
    const length = 'z'.charCodeAt() - lowerCode + 1;
    return Array
        .from({length}, (_, index) => [
            String.fromCharCode(lowerCode + index),
            String.fromCharCode(upperCode + index)
        ])
        .flat();
}

const identHandler = createRandomFromList(createAlphabet());
const identFormatHandler = () => Array
    .from({length: 1 << 5}, identHandler)
    .join('');

console.log(identFormatHandler());
```


### Advanced example

[SVG Path Generative Art](https://codepen.io/L1feF0rm/pen/GRzGxdb)