{"id":21045350,"url":"https://github.com/ymzuiku/esframe","last_synced_at":"2026-04-06T08:31:20.724Z","repository":{"id":63319447,"uuid":"566990619","full_name":"ymzuiku/esframe","owner":"ymzuiku","description":"Web framework tools methods","archived":false,"fork":false,"pushed_at":"2022-11-17T14:29:11.000Z","size":139,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-29T02:14:11.345Z","etag":null,"topics":["framework","native-js","react","solidjs","vue"],"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/ymzuiku.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}},"created_at":"2022-11-16T20:55:34.000Z","updated_at":"2022-11-17T14:26:06.000Z","dependencies_parsed_at":"2022-11-16T22:15:27.839Z","dependency_job_id":null,"html_url":"https://github.com/ymzuiku/esframe","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ymzuiku/esframe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Fesframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Fesframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Fesframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Fesframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ymzuiku","download_url":"https://codeload.github.com/ymzuiku/esframe/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Fesframe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31464604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["framework","native-js","react","solidjs","vue"],"created_at":"2024-11-19T14:21:42.519Z","updated_at":"2026-04-06T08:31:20.701Z","avatar_url":"https://github.com/ymzuiku.png","language":"TypeScript","readme":"# esframe\n\n## Why esframe?\n\nWhen you want use native-js create some Element, we need encapsulation some tools method, like set elements params, createElement tree, and update element. listening element append DOM mount, or remove element.\n\nesframe is simplify do this. like framework, but keep in native element.\n\nyou can use esframe like framework or use esframe only create some elements in tiny task.\n\n## Features\n\n- Tiny, only 3.5KB in gzip\n- Zero dependency\n- bundle less, like Flutter element tree creator.\n- No diff dom\n- No proxy, No defineProperty\n- No top framework life cycle\n- No useState, no createSignal, just `toUpdate` all\n\n## Install\n\nUse npm:\n\n```sh\nnpm/pnpm/yarn install \"esframe\"\n```\n\nUse CDN:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { Ele } from \"https://cdn.skypack.dev/esframe\";\n  const app = Ele(\"div\");\n  document.body.append(app);\n\u003c/script\u003e\n```\n\n## Ele, toUpdate example\n\n```ts\nimport { Ele, toUpdate } from \"esframe\";\n\nlet num = 0;\n\nconst app = Ele(\"div\", {\n  append: [\n    Ele(\"h1\", { textContent: \"Touch the button, add the num:\" }),\n    // function value is auto subscribe\n    Ele(\"p\", { textContent: () =\u003e num }),\n    Ele(\"button\", {\n      onclick: () =\u003e {\n        num++;\n        // update all function values\n        toUpdate();\n      },\n      textContent: \"Touch me\",\n    }),\n  ],\n});\n\ndocument.body.append(app);\n```\n\n## For, Show Example\n\n- `For` is render dynamic length children Element\n- `Show` is render Element or render empty Element\n\n```ts\nimport { For, Show, Ele, toUpdate } from \"esframe\";\n\nconst css = Ele(\"style\", {\n  textContent: `\n.contains {\n\tbackground: #f3f3f3;\n\tfont-size:40px;\n}\n`,\n});\ndocument.head.append(css);\n\nconst state: Record\u003cstring, string\u003e = {\n  value0: \"200\",\n};\n\nconst app = Ele(\"div\", {\n  className: \"contains\",\n  style: {\n    cssText: \"width:100%; height:100%;\",\n  },\n  append: [\n    \"Hello\",\n    Ele(\"span\", {\n      innerText: \"world\",\n      style: {\n        cssText: \"color:red;\",\n      },\n      onclick: () =\u003e {\n        alert(\"hello\");\n      },\n    }),\n    Show({\n      when: () =\u003e Date.now() % 3 !== 0,\n      render: () =\u003e {\n        return Ele(\"span\", { textContent: \"show temp\" });\n      },\n    }),\n    For(\"div\", {\n      each: () =\u003e {\n        const v = Number(state[\"value0\"]);\n        return v \u003e 15000 ? 15000 : v;\n      },\n      render: (i, len) =\u003e {\n        const area = () =\u003e i % (len() / 5);\n        return Ele(\"input\", {\n          // bind subscribe value\n          value: () =\u003e state[\"value\" + area()],\n          [\"data-info\"]: \"info\",\n          oninput: (e) =\u003e {\n            const value = (e.currentTarget as HTMLInputElement).value;\n            state[\"value\" + i] = value;\n            // update all binded subscribe values\n            toUpdate();\n          },\n        });\n      },\n    }),\n  ],\n});\n\ndocument.body.append(app);\n```\n\n## ref, onMount, onCleanup\n\nUse element life cycle.\n\n- ref: when element before append in DOM\n- onMount: when element appended in DOM\n- onCleanup: when element removed\n- onEntry: when element entry in screen, only run once\n\n\u003e Tip: the `onMount`, `onCleanup`, `onEntry` is slowly, because esframe no have top framework register element's life cycle, if you don't need element'life, please use `ref`.\n\n```ts\nimport { Ele, toUpdate } from \"esframe\";\n\nlet num = 0;\n\nconst app = Ele(\"div\", {\n  ref: (ele) =\u003e {\n    console.log(\"ref\", ele);\n  },\n  onMount: (ele) =\u003e {\n    console.log(\"onMount\", ele);\n  },\n  onCleanup: (ele) =\u003e {\n    console.log(\"onCleanup\", ele);\n  },\n  onEntry: (ele) =\u003e {\n    console.log(\"onEntry\", ele);\n  },\n});\n\ndocument.body.append(app);\n```\n\n## Use native-js element\n\nBecause esframe no have top framework register element's life cycle, esframe elements is only native-js elements.\n\nwe can set native-js elements all esframe feature:\n\n```ts\nconst button = document.createElement(\"button\");\n\nEle(button, {\n  ref: (ele) =\u003e {\n    console.log(\"ref\", ele);\n  },\n  onMount: (ele) =\u003e {\n    console.log(\"onMount\", ele);\n  },\n  textContent: () =\u003e new Date().toString(),\n});\n\ndocument.body.append(button);\n```\n\n## toUpdate detail\n\ntoUpdate allways update full page to last state, full page update can help your reduce some state's bug.\n\n- `toUpdate()`: (Recommend) update full page element\n- `toUpdate(element)`: Can update first the element and the element children, and update all when idle\n\n## TS vs TSX\n\n### Why no use TSX?\n\nBecause if you need use esframe in react \\ solid-js \\ vue(jsx), the jsx parse is use in React \\ h, JSX framework is to many. esframe staring point is a tools methods.\n\n### Discard use TSX, are you real?\n\nTSX(JSX) is less code, but pure Typescript is acceptable too.\n\nThis page is same code in TS and TSX, TSX is only 60% pure TS codes.\n\n![](./ts-vs-tsx.png)\n\nFlutter is only use pure object tree, is only preference style, we love it.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymzuiku%2Fesframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fymzuiku%2Fesframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymzuiku%2Fesframe/lists"}