@h8/lib
v2.2.0
Published
H8 Full-Stack JavaScript Library
Downloads
5
Readme
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/libor
npm install @h8/libThis 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
awaitin root of an ES module or inside anasyncfunction.
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');