{"id":46349231,"url":"https://github.com/icevelez/core.js","last_synced_at":"2026-03-04T22:32:00.218Z","repository":{"id":294892475,"uuid":"986772355","full_name":"icevelez/core.js","owner":"icevelez","description":"A framework built for the web","archived":false,"fork":false,"pushed_at":"2025-11-29T13:08:41.000Z","size":349,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-01T15:14:37.939Z","etag":null,"topics":["javascript","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/icevelez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-20T05:29:07.000Z","updated_at":"2025-11-11T02:43:41.000Z","dependencies_parsed_at":"2025-07-24T05:05:12.504Z","dependency_job_id":"2cd1f9c7-a386-4730-9ced-fffa76c55047","html_url":"https://github.com/icevelez/core.js","commit_stats":null,"previous_names":["icevelez/core.js"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/icevelez/core.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icevelez%2Fcore.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icevelez%2Fcore.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icevelez%2Fcore.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icevelez%2Fcore.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icevelez","download_url":"https://codeload.github.com/icevelez/core.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icevelez%2Fcore.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30096766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T21:59:23.547Z","status":"ssl_error","status_checked_at":"2026-03-04T21:57:50.415Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","web"],"created_at":"2026-03-04T22:31:59.999Z","updated_at":"2026-03-04T22:32:00.208Z","avatar_url":"https://github.com/icevelez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Core.js\n\nA Framework built for the web\n\n---\n\nVersion: 0.3.2\n\nLicense: MIT\n\n---\n\n## 👷 How does it work?\n\nThere's two components that make up `Core.js`. It's **reactivity system** and **template engine**\n\nThe 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\n\n\u003e 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.\n\u003e\n\u003e You can have a template engine that parses `{{ handlebar }}` and another for `@{ razor }`\n\nThe reactivity system is my implementation of *Signals* based from my understanding from [Svelte](https://svelte.dev/) and [Solid.js](https://www.solidjs.com/)\n\n---\n\n## 🧰 Installation\n\n\u003e You can skip all of the step by downloading this repository and start creating your app under the `src` folder\n\u003e\n\n1. Create a folder for your project\n\n2. Download this repository\n\n3. Extract its content and copy a folder named `core` to your project folder\n\n4. Create a folder named `src` in your project folder. This is where all your app code will go\n\n5. Inside the `src` folder create a file named `App.html` and `App.js` with the following content respectively\n```html\n\u003ch1\u003e{{ message }}\u003c/h1\u003e\n```\n\n```js\nimport { load } from \"../core/core.js\";\nimport { component } from \"../core/parser/handlebar.js\";\n\nexport default component({\n    template: await load(\"src/App.html\"),\n}, class {\n\n    message = \"Hello World\";\n\n    constructor() {}\n\n});\n```\n\n6. In the root of your project folder create a file named `index.html` and `index.js` with the following content respectively\n\n```html\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003eMy App\u003c/title\u003e\n        \u003cscript type=\"module\" src=\"index.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n```js\nimport App from './src/App.js';\n\nApp({ target: document.getElementById('app') })\n```\nWe are importing `App.js` from the `src` folder to render it to our target element which is `\u003cdiv id=\"app\"\u003e`\n\n7. Congratulations! You're now ready to build your application using Core.js\n\n\u003e You can use the `Live Server` extension in VSCode to run and start developing you app\n\n---\n\n## 📖 Documentation\n\nYou can read the full documentation of how to use this framework by opening an `.md` file under `documentation` folder of this repository\n\n---\n\n## 🫶 Special Thanks\n\n- zulu - from the Solid Discord group for helping me debug a reactivity problem regarding proxies\n- Patrick - from the Svelte Discord group for helping me better understand fine-grain reactivity\n\n---\n\n## Known Issue\n\nThe `{{#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 \n\nI tried to solve it but could not fully understand how it is happening\n\n```js\nclass {\n    \n    reactive_promise = createDerived(() =\u003e new Promise());\n    \n    // prevent race condination values\n    get_latest_value_of_promise = createAsyncDerived(() =\u003e this.reactive_promise());\n    signal_arr = createSignal([]);\n    \n    constructor() {\n        effect(() =\u003e {\n            this.signal_arr.set(this.reactive_promise());\n        })\n    }\n}\n```\n\n```html\n{{#await get_latest_value_of_promise()}}\n    \u003ch1\u003eLoading\u003c/h1\u003e\n{{:then}}\n    \u003cul\u003e\n        {{#each signal_arr as item}}\n            \u003cli\u003e{{ item().name  }}\u003c/li\u003e\n        {{/each}}\n    \u003c/ul\u003e\n{{/await}}\n\n\u003c!-- This also gets affected --\u003e\n{{#each signal_arr as item}}\n    \u003cli\u003e{{ item().name  }}\u003c/li\u003e\n{{/each}}\n```\n\n```html\n\u003c!-- without the {{#await}} block the {{#each}} rendering works as expected --\u003e\n{{#each signal_arr as item}}\n    \u003cli\u003e{{ item().name  }}\u003c/li\u003e\n{{/each}}\n```\n\n## Limitation\n\n- Missing IntelliSense support in VSCode, Zed, etc...\n\n## 📝 P.S\n\nI'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.\n\n---\n\n## 📇 Contact\n\n```\nEmail Address: icevelezdev@gmail.com\n```\n\nHey! you made it this far. Thank you for reading everything!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficevelez%2Fcore.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficevelez%2Fcore.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficevelez%2Fcore.js/lists"}