{"id":23120294,"url":"https://github.com/dragos-tudor/frontend-rendering","last_synced_at":"2025-04-04T03:14:55.681Z","repository":{"id":208614332,"uuid":"720095016","full_name":"dragos-tudor/frontend-rendering","owner":"dragos-tudor","description":"Rewritten React core library [functional principles].","archived":false,"fork":false,"pushed_at":"2025-02-05T17:46:45.000Z","size":683,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-05T18:52:25.493Z","etag":null,"topics":["functional","functional-components","functional-programming","react","rendering-engine"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/dragos-tudor.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":"security.test.jsx","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-17T15:11:52.000Z","updated_at":"2025-02-05T17:46:49.000Z","dependencies_parsed_at":"2024-01-15T12:00:56.092Z","dependency_job_id":"7937d370-22df-4191-916d-c25498b6722e","html_url":"https://github.com/dragos-tudor/frontend-rendering","commit_stats":null,"previous_names":["dragos-tudor/frontend-rendering"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragos-tudor%2Ffrontend-rendering","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragos-tudor%2Ffrontend-rendering/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragos-tudor%2Ffrontend-rendering/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragos-tudor%2Ffrontend-rendering/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dragos-tudor","download_url":"https://codeload.github.com/dragos-tudor/frontend-rendering/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247112770,"owners_count":20885606,"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":["functional","functional-components","functional-programming","react","rendering-engine"],"created_at":"2024-12-17T06:09:39.203Z","updated_at":"2025-04-04T03:14:55.657Z","avatar_url":"https://github.com/dragos-tudor.png","language":"JavaScript","readme":"## Frontend UI rendering library\n- simplified React-like library.\n- Deno-based rendering library [Node-free].\n- functional-style library [OOP-free].\n\n### Usage\n```javascript\nimport {render, update, registerLinkeDomParser, setEffects, setStates, useEffect, useState} from \"./index.js\"\n\nawait registerLinkeDomParser()\n\nconst getData = async (fetchData) =\u003e {\n  const response = await fetchData(\"/api/data.json\", { method: \"GET\" });\n  return await response.json()\n}\n\nconst loadData = async (elem, setData, fetchData) =\u003e {\n  const data = await getData(fetchData)\n  setData(data)\n  return update(elem)\n}\n\nconst renderData = (data) =\u003e\n  data.map(item =\u003e (\u003cdiv\u003e{item.value}\u003c/div\u003e))\n\nexport const App = (props, elem) =\u003e\n{\n  const fetchData = props[\"fetch-data\"] ?? fetch\n  const states = setStates(elem)\n  const effects = setEffects(elem)\n\n  const [data, setData] = useState(states, \"data\", [], [])\n  useEffect(effects, \"load data\", () =\u003e loadData(elem, setData, fetchData), [])\n\n  return (\n    \u003cmain\u003e\n      {...renderData(data)}\n    \u003c/main\u003e\n  )\n}\n\n\n\nconst createJsonHeaders = (body) =\u003e new Headers({\n  \"content-length\": body? body.length: 0,\n  \"content-type\": \"application/json\"\n  })\nconst createJsonResponseInit = (body, status) =\u003e ({ headers: createJsonHeaders(body), ok: true, status })\nconst createJsonResponse = (body) =\u003e new Response(\n  body,\n  createJsonResponseInit(body, 200)\n)\nconst data = JSON.stringify([{value: 1}, {value: 2}, {value: 3}])\nrender(\u003cApp fetch-data={() =\u003e Promise.resolve(createJsonResponse(data))}\u003e\u003c/App\u003e, document.body)\n```\n\n### Remarks\n- Some differences between `rendering` library and Facebook `React`.\n  - the html element is already created when jsx factory run [elem parameter].\n  - the update is manually invoked by programmer [the states could be modified in batches].\n  - there is no virtual DOM.\n- Other remarks:\n  - the effects run when all html elements are rendered or updated.\n  - the initial effects run when each element is unrendered.\n- Performance:\n  - rendering, updating, unrendering operations have similar performances with `React` library.\n\n### Modules\n- *high-level modules*: rendering, rendering-components.\n- *low-level modules*: rendering-html, rendering-jsx, rendering-effects, rendering-states, rendering-attrs, rendering-events, rendering-props, rendering-equalities [shared].\n- *low-level modules* completely independent [\"parallel\" modules].\n\n### [Rendering](./rendering/)\n- main functionality: rendering engine transform jsx elements to html elements.\n- render element tree (`renderElementTree`):\n  - create html root element and descendants from jsx factory.\n  - append html root element to parent html element.\n  - run effects after all elements are rendered.\n- update element tree (`updateElementTree`):\n  - reconciliate elements: render, update, replace, unrender html elements [breadth-first strategy].\n  - run effects after all elements are updated.\n- unrender elements tree (`unrenderElementTree`):\n  - run initial effects before removing elements.\n  - remove and clear html root element and descendants.\n- implement ordering html element children with keys.\n- errors funcs [handle, dispatch, throw].\n- logging funcs [enable, log].\n\n### [Rendering components](./rendering-components/)\n- Built-in components library.\n- context component: used to shared data between components.\n  - `getContexts` get html element contexts.\n  - `useContext` set context function set context values for producers and consumers.\n- error boundary component: handle errors thrown by jsx factory.\n  - handle rendering errors.\n  - handle sync effects errors.\n  - on errors display error element.\n- lazy component: used to lazy load components.\n- suspense component: used to toggle visibility for children or fallback elements [preserving children states].\n- service component: used on testing to mock service on development.\n\n### [Rendering html](./rendering-html/)\n- main functionality: manage html elements and nodes.\n- implement creating, rendering, replacing, unrendering, html elements.\n- implement creating, rendering, updating, replacing, unrendering html text nodes.\n- implement appending, inserting, removing, replacing html nodes.\n- use html DOM parser to create html elements and html text nodes.\n- export `registerDomParser` and `registerLinkeDomParser` functions to manually register DOMParser.\n- security based on owasp security guidance:\n  - validate html tag names.\n  - validate html element urls poperties.\n  - encode js content.\n  - encode html content.\n\n### [Rendering jsx](./rendering-jsx/)\n- main functionality: manage jsx elements.\n- contains jsx factories builder `buildJsxFactoryChildren`.\n- implement jsx children sanitizing:\n  - replace html fragments.\n  - skip boolean, null, undefined values.\n\n### [Rendering effects](./rendering-effects/)\n- implement `setEffects`, `getEffects`,`useEffect`, `setInitialEffect` functions.\n- `useEffect` func:\n  - use effect funcs for layout effects.\n  - use async effect funcs for side-effects.\n- `setInitialEffect` is used to cover subscribing flows.\n  - initial effect func will run before effect func.\n\n### [Rendering states](./rendering-states/)\n- implement `setStates`, `useStates`, `useMemo` functions.\n\n### [Jsx runtime](./jsx-runtime/)\n- main functionality: compile jsx expressions.\n- jsx runtime is independent of rendering library.\n- implement `createJsxElement` func (export `jsx`, `jsxs`, `Fragment`).\n- implement `createLegacyJsxElement` func registred as `React.createElement` (export `legacyJsx`).\n- export `registerReact` function to manually register React for bundled jsx components.\n- usage:\n```json\n{\n  # deno.json\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"/jsx\"\n  }\n}\n```\n\n```json\n{\n  # deps.map.json\n  \"imports\": {\n    \"/jsx/jsx-runtime\": \"\u003cpath to jsx runtime\u003e\",\n  }\n}\n```\n\n*SIMPLE ALWAYS MEANS SIMPLE*\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdragos-tudor%2Ffrontend-rendering","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdragos-tudor%2Ffrontend-rendering","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdragos-tudor%2Ffrontend-rendering/lists"}