@h8/lib v2.2.0
H8 JavaScript Library
šāWebsite š¹ļøāPlayground šāDocumentation
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 documentation. Also, there is a documentation Telegram Bot here: @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:
yarn add @h8/lib
or
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):
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:
<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, extrct it, and add it to your project files. Then add .../H8/H8.js
to <head>
of your project:
<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:
// 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 anasync
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:
// 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:
// 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');