https://github.com/muhammad-fiaz/open-actions
Open-Actions is a Super lightweight JavaScript Framework
https://github.com/muhammad-fiaz/open-actions
bun framework javascript js nodejs npm npm-module npm-package npmjs open-action open-actions package ts typescript web-framework
Last synced: 4 months ago
JSON representation
Open-Actions is a Super lightweight JavaScript Framework
- Host: GitHub
- URL: https://github.com/muhammad-fiaz/open-actions
- Owner: muhammad-fiaz
- License: mit
- Created: 2024-08-12T14:09:23.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-11-18T14:27:51.000Z (7 months ago)
- Last Synced: 2026-01-13T08:15:56.665Z (5 months ago)
- Topics: bun, framework, javascript, js, nodejs, npm, npm-module, npm-package, npmjs, open-action, open-actions, package, ts, typescript, web-framework
- Language: TypeScript
- Homepage:
- Size: 285 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Open Actions
Open Actions is a Super Light Web Framework that provides a set of utilities to help you build web applications. It includes a collection of utility functions, custom hooks for state and effect management, a class to handle API calls, a class to handle routing, and functions to render components to the DOM.
## Installation
To install the Open Actions library, you can use the following command:
```sh
npm install open-actions
```
## Usage
You can import the necessary functionalities from the `open-actions` package as shown below:
```typescript
import {
renderComponent,
Api,
useState,
useEffect,
Router,
clone,
debounce,
generateId,
setInnerHTML,
setCSS,
addId,
updateValue
} from "open-actions";
// Example usage
const api = new Api();
console.log(api.getData());
const router = new Router();
router.navigate();
const [state, setState] = useState(0);
useEffect(() => {
console.log('State changed:', state);
}, [state]);
const component = () => '
Hello, World!';
renderComponent(component, document.getElementById('app'));
setInnerHTML('#app', '
New content
');
setCSS('#app', { backgroundColor: 'blue', color: 'white' });
const uniqueId = generateId('prefix_');
console.log(uniqueId);
const clonedObject = clone({ key: 'value' });
console.log(clonedObject);
```
## Packages
### Utils
A collection of utility functions for various common tasks.
```typescript
import {
clone,
debounce,
generateId,
setInnerHTML,
setCSS,
addId,
updateValue
} from 'open-actions';
// Example usage
const clonedObject = clone({ key: 'value' });
console.log(clonedObject);
const debouncedFunction = debounce(() => {
console.log('Debounced call');
}, 500);
debouncedFunction();
const uniqueId = generateId('prefix_');
console.log(uniqueId);
setInnerHTML('#app', '
New content
');
setCSS('#app', { backgroundColor: 'blue', color: 'white' });
const newId = addId('#app', 'prefix_');
console.log(newId);
updateValue('#input', 'new value');
```
### Components
Functions to render components to the DOM.
```typescript
import { renderComponent } from 'open-actions';
const component = () => '
Hello, World!';
renderComponent(component, document.getElementById('app'));
```
### API
A class to handle API calls.
```typescript
import { Api } from 'open-actions';
const api = new Api();
console.log(api.getData());
```
### DOM
Custom hooks for state and effect management.
```typescript
import { useState, useEffect } from 'open-actions';
const [state, setState] = useState(0);
useEffect(() => {
console.log('State changed:', state);
}, [state]);
```
### Router
A class to handle routing.
```typescript
import { Router } from 'open-actions';
const router = new Router();
router.navigate();
```
## Development
To build the project, run the following command:
```sh
npm run build
```
## Contributing
Feel free to open issues or submit pull requests for any bugs or feature requests.
## License
This project is licensed under the MIT License.