https://github.com/icevelez/core.js
A framework built for the web
https://github.com/icevelez/core.js
javascript web
Last synced: 4 months ago
JSON representation
A framework built for the web
- Host: GitHub
- URL: https://github.com/icevelez/core.js
- Owner: icevelez
- Created: 2025-05-20T05:29:07.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-11-29T13:08:41.000Z (7 months ago)
- Last Synced: 2025-12-01T15:14:37.939Z (7 months ago)
- Topics: javascript, web
- Language: JavaScript
- Homepage:
- Size: 341 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Core.js
A Framework built for the web
---
Version: 0.3.2
License: MIT
---
## 👷 How does it work?
There's two components that make up `Core.js`. It's **reactivity system** and **template engine**
The reactivity system handles tracking signal update, deletion, and creation of data while the template engine is in charge of parsing template string to the DOM. Combined the two and you get this framework
> One neat tidbit you might have not notice is that you can build your own template engine that parses whatever syntax you want, as long as the reactivity system is integrated by using `effect()` among other primitives.
>
> You can have a template engine that parses `{{ handlebar }}` and another for `@{ razor }`
The reactivity system is my implementation of *Signals* based from my understanding from [Svelte](https://svelte.dev/) and [Solid.js](https://www.solidjs.com/)
---
## 🧰 Installation
> You can skip all of the step by downloading this repository and start creating your app under the `src` folder
>
1. Create a folder for your project
2. Download this repository
3. Extract its content and copy a folder named `core` to your project folder
4. Create a folder named `src` in your project folder. This is where all your app code will go
5. Inside the `src` folder create a file named `App.html` and `App.js` with the following content respectively
```html
{{ message }}
```
```js
import { load } from "../core/core.js";
import { component } from "../core/parser/handlebar.js";
export default component({
template: await load("src/App.html"),
}, class {
message = "Hello World";
constructor() {}
});
```
6. In the root of your project folder create a file named `index.html` and `index.js` with the following content respectively
```html
My App
```
```js
import App from './src/App.js';
App({ target: document.getElementById('app') })
```
We are importing `App.js` from the `src` folder to render it to our target element which is `
`
7. Congratulations! You're now ready to build your application using Core.js
> You can use the `Live Server` extension in VSCode to run and start developing you app
---
## 📖 Documentation
You can read the full documentation of how to use this framework by opening an `.md` file under `documentation` folder of this repository
---
## 🫶 Special Thanks
- zulu - from the Solid Discord group for helping me debug a reactivity problem regarding proxies
- Patrick - from the Svelte Discord group for helping me better understand fine-grain reactivity
---
## Known Issue
The `{{#each}}` renders an old state when a signal is set based off a reactive promise and that promise is also part of the template - This issue led to redesigning the `createAsyncDerived` function and added the `.pending()` `.error()` state to mitigate this issue by using an `{{#if}}` block instead
I tried to solve it but could not fully understand how it is happening
```js
class {
reactive_promise = createDerived(() => new Promise());
// prevent race condination values
get_latest_value_of_promise = createAsyncDerived(() => this.reactive_promise());
signal_arr = createSignal([]);
constructor() {
effect(() => {
this.signal_arr.set(this.reactive_promise());
})
}
}
```
```html
{{#await get_latest_value_of_promise()}}
Loading
{{:then}}
{{#each signal_arr as item}}
- {{ item().name }}
{{/each}}
{{/await}}
{{#each signal_arr as item}}
{{ item().name }}
{{/each}}
```
```html
{{#each signal_arr as item}}
{{ item().name }}
{{/each}}
```
## Limitation
- Missing IntelliSense support in VSCode, Zed, etc...
## 📝 P.S
I'm not God, I make mistakes, I have tested this to the best of my ability but if you find any bugs or issues, kindly email me about it and if you have a fix/patch, feel free to include that in your email.
---
## 📇 Contact
```
Email Address: icevelezdev@gmail.com
```
Hey! you made it this far. Thank you for reading everything!