npm package: @h8/lib
Description: H8 Full-Stack JavaScript Library
Author: H8 Developer
Latest version: 2.2.0

# H8 JavaScript Library

🌐 [Website](https://libs.tarnegar.com/H8)<br>
🕹️ [Playground](https://libs.tarnegar.com/H8/play)<br>
📚 [Documentation](https://libs.tarnegar.com/H8/api)

---

`H8` is a full-stack _swiss army knife_ in web development. It comes with many modules that make development much faster and easier.

It's written in pure `JavaScript`, but supports `TypeScript` through **Type Definition Files (*.d.ts)**, to provide intellisense and accurate types in modern IDEs.

This is a brief manual for getting started using the library. For full descriptive manual, please refer to [H8 API Reference](https://libs.tarnegar.com/H8/api) documentation. Also, there is a documentation **Telegram Bot** here: [@H8WebDevBot](https://t.me/H8WebDevBot) (Which is under construction!)

## 🏁 Getting Started

`H8` is a full-stack library, so you could use it in **NodeJS** environment, or inside a modern **Browser**. Because `H8` maked by **ES modules**, so the environment must supports ES modules natively or through bundler tools like `vite` or `webpack`.

### ⚙️ Step 1: Installation

To use `H8` library in your server side applications, use this command to add it to your **NodeJS** project:
```sh
yarn add @h8/lib
```
or
```sh
npm install @h8/lib
```
This will adds latest version of `@h8/lib` package to your `package.json` file.

Now, use this line of code to import it to your main entry file of application (e.g top of your **main.js** file):

```js
import '@h8/lib';
```
Now a global `H8` namespace is available all over your project and does not need to import it file by file.

Also, to use `H8` in your **HTML** files, you could use this`<script>` tag to import it in `<head>` of the HTML document:

```html
<script type="module" src="https://cdn.tarnegar.com/libs/H8/H8.js"></script>
```

Or, if you don't like to use our **CDN**, you could download the library as a **ZIP** archive from [here](https://cdn.tarnegar.com/libs/H8/H8.zip), extrct it, and add it to your project files. Then add `.../H8/H8.js` to `<head>` of your project:

```html
<head>
	...
	<script type="module" src="/.../H8/H8.js"></script>
	...
</head>
```

Now a global `H8` namespace is available in your document.

### ⚙️ Step 2: Import H8 Modules

By importing `@h8/lib` in your project, only the core file of `H8` library is imported. It just has some general methods. But you need to import other modules of `H8` placed in `~/modules/*` directory in `H8` package. Fortunately, thanks to dynamic import mechanism of `H8`, you don't have to write **import** statements in your project. Just use the following command to import your prefered modules:
```js
// For one module:
await H8.import('helpers');

// For multiple modules:
await H8.import(['helpers', 'Storage', 'Log']);
```
> 💡 **NOTE**
>
> You could use `await` in root of an ES module or inside an `async` function.

The `H8.import()` method uses dynamic import of ECMAScript to import **js** file of requested modules.

After that, all imported modules are available through global ‍`H8` namespace:
```js
// Using a method of a namespace module:
H8.helpers.hasKey();

// Create an instance of a class module:
const local = new H8.Storage(H8.Storage.LOCAL);

// Call a static method of a class module:
H8.Log.markup('Hello <fg:cyan>World</fg>');
```

## 🛠️ Global Configuration

`H8` has a global configuration mechanism to manage configurations of its modules. There are 3 methods to work with this global configurations:
```js
// 1: Set (or add) a configuration:
H8.setConfig('app.name', 'MyGoldenApp');

// 2: Get a configuration:
const appName = H8.getConfig('app.name');

// 3: Remove a configuration:
H8.removeConfig('app.name');
```