{"id":16166400,"url":"https://github.com/mpourismaiel/change","last_synced_at":"2025-03-18T23:30:48.266Z","repository":{"id":171790639,"uuid":"648417298","full_name":"mpourismaiel/change","owner":"mpourismaiel","description":"Zero-dependency, build-free Front End framework","archived":false,"fork":false,"pushed_at":"2023-07-04T12:20:10.000Z","size":225,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T00:41:27.593Z","etag":null,"topics":["frontend-framework"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mpourismaiel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-06-01T23:38:36.000Z","updated_at":"2023-06-13T12:39:02.000Z","dependencies_parsed_at":"2023-07-17T14:01:26.659Z","dependency_job_id":null,"html_url":"https://github.com/mpourismaiel/change","commit_stats":null,"previous_names":["mpourismaiel/change"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpourismaiel%2Fchange","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpourismaiel%2Fchange/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpourismaiel%2Fchange/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpourismaiel%2Fchange/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mpourismaiel","download_url":"https://codeload.github.com/mpourismaiel/change/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244325155,"owners_count":20435050,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["frontend-framework"],"created_at":"2024-10-10T02:54:04.556Z","updated_at":"2025-03-18T23:30:48.261Z","avatar_url":"https://github.com/mpourismaiel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Zero-dependency, build-free framework inspired by [Strawberry](https://strawberry.quest/).\n\nThis framework is under heavy development and currently it's not even pre-alpha.\nOnly use it to test it and please report issues or if possible, create PRs.\n\n# What's Going On?\n\nAs much as I love Svelte, React and any other Front End framework, using them in small projects is a not fun.\nSometimes I just want to test some small idea or my project isn't big enough to justify creating a project with a bunch of unnecessary details and dependencies and build times.\n\nThis is where this framework comes into play. I can just create a shortcut to it in my new project, create my data and call `render`.\nIt would take care of composition and reactivity and nothing else. The syntax for templates is minimal and provides basic functionality.\n\n# Usage\n\nSomehow grab the code and link it to your page. Download the build, use Github's raw content url, clone the repo and create a shortcut to the build.\n\nAfter that you can write your HTML. When you want composability, create a template tag with a name that matches naming conventions of web components (hyphenated lower case with at least two words, ex. `some-component`), use that name as your tag name and that's it.\n\nYou can use different components inside each other, order of templates doesn't matter.\n\nIf you need reactivity you can call `updateData(YOUR_DATA_OBJECT)` and afterwards any change to `YOUR_DATA_OBJECT` will be reflected in your components. You can use `YOUR_DATA_OBJECT.some_key` in your components using `prop_name={some_key}`.\n\nHere is a small example:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    ...\n  \u003c/head\u003e\n  \u003ctemplate name=\"some-component\"\u003e\n    \u003ch2\u003eHello, {name}!\u003c/h2\u003e\n  \u003c/template\u003e\n  \u003cbody\u003e\n    ...\n    \u003csome-component name=\"{username}\"\u003e\u003c/some-component\u003e\n    ...\n    \u003cscript src=\"./change.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      // Converts your object to an observable proxy which will react to changes by updating the page.\n      updateData({\n        username: prompt(\"Your name?\"),\n      });\n\n      // This function should ONLY be called once. Rendered your components in the page.\n      render();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n# Syntax\n\nThis is meant to be a small framework handling only the most basic needs of a frontend application. Only for loops, if conditions and variables and event listeners are supported in the syntax.\n\n```html\n\u003ctemplate name=\"some-component\"\u003e\n  \u003cdiv class=\"form\"\u003e\n    \u003clabel for=\"newItem\"\u003eNew Item\u003c/label\u003e\n    \u003cinput\n      on:keypress=\"{handleKeyPress}\"\n      name=\"newItem\"\n      id=\"newItem\"\n      placeholder=\"Please enter a new value to be added to the list\"\n    /\u003e\n  \u003c/div\u003e\n  {#for list as item, i}\n    \u003cli\u003e{item} - {i}\u003c/li\u003e\n  {/for}\n  {#if listIsEmpty}\n    \u003cp\u003ePlease add an item\u003c/p\u003e\n  {/if}\n\u003c/template\u003e\n\u003cscript\u003e\n  updateData({\n    handleKeyPress(e) {\n      if (e.keyCode === 13) {\n        this.list.push(e.target.value);\n        this.listIsEmpty = false;\n        e.target.value = \"\";\n      }\n    },\n    list: [],\n    listIsEmpty: true,\n  });\n\n  render();\n\u003c/script\u003e\n```\n\nFor and If nodes can be nested. For attaching event handlers please use `on:event` syntax and pass the key to your event handler callback which should be located in your data that you passed to `updateData` function.\n\n# Performace\n\nThere is no performance. This is a small framework meant for basic usage. Even though the codebase is very small and function calls have been optimized, the code is not tested thoroughly.\nI'm planning on writing tests and profiling the code but even with that, if your project needs reliable performance, I suggest using Svelte or React or Lit or any other major framework.\n\n# Plans\n\nRight now a lot of stuff don't work reliably or don't work at all.\nThe framework is not ready for use as it's stated above.\n\nCurrently my plans are to make it work reliably, write tests and profile.\n\nThese are the features I'm planning:\n\n- [x] Create compoents\n- [x] Render components\n- [x] Composable components\n- [x] Handle props\n  - [ ] Props with nested keys: `prop={some.nested.key.in.data}\n- [x] Use props\n- [x] Event handlers\n  - [ ] Event handlers with nested keys (same as nested props)\n- [ ] Unified context accross context and passed variables\n- [x] Use event handlers\n- [ ] Event handlers persisting over updates\n- [ ] Comprehensive life cycle events (maybe?)\n\nAlso:\n\n- [ ] Write tests\n- [ ] Profile\n- [ ] Improve syntax?\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpourismaiel%2Fchange","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmpourismaiel%2Fchange","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpourismaiel%2Fchange/lists"}