Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/restuwahyu13/kraken-browser
Dependency injection to register module to global access, you can load each given module from kraken config
https://github.com/restuwahyu13/kraken-browser
browser dependencies dependency-injection global global-module javascript kibrow kraken-browser node node-package npm npm-package typescript
Last synced: about 2 months ago
JSON representation
Dependency injection to register module to global access, you can load each given module from kraken config
- Host: GitHub
- URL: https://github.com/restuwahyu13/kraken-browser
- Owner: restuwahyu13
- License: mit
- Created: 2021-08-18T15:04:04.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-27T13:04:32.000Z (over 1 year ago)
- Last Synced: 2024-07-02T02:50:13.725Z (3 months ago)
- Topics: browser, dependencies, dependency-injection, global, global-module, javascript, kibrow, kraken-browser, node, node-package, npm, npm-package, typescript
- Language: TypeScript
- Homepage:
- Size: 1 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-made-by-indonesian - Kraken Browser - `Dependency injection to register module to global access, you can load each given module from kraken config` *by [Restu Wahyu Saputra](https://github.com/restuwahyu13)* (K)
- made-in-indonesia - Kraken Browser - `Dependency injection to register module to global access, you can load each given module from kraken config` *by [Restu Wahyu Saputra](https://github.com/restuwahyu13)* (K)
README
# Kraken Browser
[](https://codebeat.co/projects/github-com-restuwahyu13-kraken-browser-main) [](https://www.codefactor.io/repository/github/restuwahyu13/kraken-browser) [](https://www.codacy.com/gh/restuwahyu13/kraken-browser/dashboard?utm_source=github.com&utm_medium=referral&utm_content=restuwahyu13/kraken-browser&utm_campaign=Badge_Grade)   [](https://github.com/restuwahyu13/kraken-browser/blob/main/CONTRIBUTING.md)
**kibrow** is dependency injection to register module to global access, without the need to load module using `require` or `import` again in every file, then module can be accessed as a global with very easy and then only register modules to kraken config, which you often the most used in each every file, example module like `axios`, `lodash`, `moment` etc, for nodejs version check this [kinode](https://github.com/restuwahyu13/kraken-node).
- [Kraken Browser](#kraken-browser)
- [Installation](#installation)
- [Config](#config)
- [Example Usage](#example-usage)
- [Testing](#testing)
- [Bugs](#bugs)
- [Contributing](#contributing)
- [License](#license)
## Installation
```bash
$ npm install kibrow -S or yarn add kibrow -S
```
## Config
- #### Kraken config property
- **name** for to calling module in each every file and default value is to undefined
- **module** for to register module to global access and default value is to undefined
- **inject** for to disabled module to global access, if value is set to false and default value is to true
- #### Example Kraken Config Not With SSR
```js
import { krakenConfig } from 'kibrow'
import axios from 'axios'
import _ from 'lodash'
krakenConfig({
packages: [
{
name: '$axios',
module: axios
},
{
name: '$_',
module: _
}
]
})
```
- #### Example Kraken Config With SSR
```js
import { krakenConfig } from 'kibrow/ssr'
import axios from 'axios'
import _ from 'lodash'
krakenConfig({
packages: [
{
name: '$axios',
module: axios
},
{
name: '$_',
module: _
}
]
})
```
## Example Usage
Before usage of this module, if you're using ESLint you have must be added **Overrides ESLint Config**, and also if you're using typescript add `"noImplicitAny": false` to tsconfig.json, for more example usage and implementation check folder demo in this repository [here](https://github.com/restuwahyu13/kraken-browser/tree/main/demo).
- ##### Overrides Eslint Config
```json
"overrides": [
{
"files": [
"**/*.js",
"**/*.jsx",
"**/*.ts",
"**/*.tsx"
],
"rules": {
"no-restricted-globals": 0
},
"globals": {
"self": "writable"
}
}
]
```
- ##### Example Usage Using JavaScript
```javascript
self.$axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => console.log(res.data))
.catch(err => console.log(err.response.data))
```
- ##### Example Usage Using TypeScript
```javascript
self['$axios'].get('https://jsonplaceholder.typicode.com/users')
.then(res => console.log(res.data))
.catch(err => console.log(err.response.data))
```
## Testing
- Testing Via Local
```sh
npm test or make test
```
- Testing Via Local And Build
```sh
make build
```
- Testing Via Docker
```sh
docker build -t kraken-browser or make dkb tag=kraken-browser
```
## Bugs
For information on bugs related to package libraries, please visit [here](https://github.com/restuwahyu13/kraken-browser/issues)
## Contributing
Want to make **kraken-browser** more perfect ? Let's contribute and follow the [contribution guide.](https://github.com/restuwahyu13/kraken-browser/blob/main/CONTRIBUTING.md)
## License
- [MIT License](https://github.com/restuwahyu13/kraken-browser/blob/main/LICENSE.md)