https://github.com/ismacortgtz/barejs
https://github.com/ismacortgtz/barejs
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ismacortgtz/barejs
- Owner: IsmaCortGtz
- License: gpl-3.0
- Created: 2024-12-09T23:16:08.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-04T23:44:03.000Z (10 months ago)
- Last Synced: 2025-04-05T00:28:05.100Z (10 months ago)
- Language: JavaScript
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BareJS
`BareJS` is a lightweight Vanilla JS framework. It allows the use of Web Components, importing HTML as a component, SPA routing, and using Signals for simple reactivity.
This framework isn't created to be a real alternative in web development. It was created solely with the purpose of learning how frameworks works internally and testing some ideas about features that could be interesting.
## Table of Content 📕
1. [Documentation](#documentation)
- [Components](#components)
- [Routing](#routing)
- [Signals](#signals)
2. [Installation](#installation)
3. [Usage](#usage)
4. [Contributing](#contributing)
5. [License](#license)
## Documentation
This framework is divided into 3 main modules.
### Components
This module allows users to load components from a specific route. It provides a Web component `` where you can specify either a Web Component or an HTML component to be loaded.
Here is an example of a Web Component (_without reactivity_).
```js
// file NavBar.js
class NavBar extends HTMLElement {
#title;
constructor() {
super();
this.#title = this.getAttribute("title");
}
connectedCallback() {
this.innerHTML = `
${this.title}
`;
}
}
```
And here is an example of an HTML Component.
```html
```
To use it, simply place the file in your components folder and reference it in your HTML like this:
```html
```
In the `bjs-component` parameter, you need to specify the type. You can use `wc` for a Web Component (JS) or `hc` for an HTML Component. The framework will automatically load the file and insert it into the `barejs-component`.
Additionally, you can pass parameters to the Web Component using the `barejs-*` prefix. The component will receive the parameter without the prefix. Parameters are not yet available for HTML Components.
### Routing
The routing module works in a very similar way. It provides you with 2 Web Components and some JS objects to interact with.
You have the `` component, where you can specify the content. You will specify the route using the `bjs-route` parameter. This component has 2 working modes.
The first mode is used when you don't have the components module installed. In this case, the content inside the component will be hidden using a simple CSS `display` property, and an event will be triggered.
When you have the components module installed, you can use the `bjs-page` parameter to load a component from the page's route. In this mode, the components will only be in the DOM when the route is active. If you leave the page, the component will be removed.
You can use either Web Components or HTML components.
```html
Details page
```
### Signals
Coming soon..
## Installation
Add the script tag at the end of your head tag:
```html
```
## Usage
```js
console.log("hello world!");
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.
Please make sure to update examples and documentation as appropriate.
## License
[GPLv3](https://www.gnu.org/licenses/gpl-3.0.html#license-text)