{"id":20513829,"url":"https://github.com/webreflection/udomsay","last_synced_at":"2025-09-12T23:31:08.779Z","repository":{"id":62043575,"uuid":"557204284","full_name":"WebReflection/udomsay","owner":"WebReflection","description":"A stricter, signals driven, ESX based library","archived":false,"fork":false,"pushed_at":"2023-02-21T14:27:40.000Z","size":405,"stargazers_count":106,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-09-04T23:57:52.719Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://webreflection.medium.com/jsx-can-be-more-efficient-by-default-466cfd704fc0","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.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}},"created_at":"2022-10-25T09:05:56.000Z","updated_at":"2025-02-11T15:51:44.000Z","dependencies_parsed_at":"2024-02-01T17:33:58.623Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/udomsay","commit_stats":{"total_commits":98,"total_committers":3,"mean_commits":"32.666666666666664","dds":"0.020408163265306145","last_synced_commit":"dc28ca90e073644a7eeb907340de8f96b33864a3"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"purl":"pkg:github/WebReflection/udomsay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fudomsay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fudomsay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fudomsay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fudomsay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/udomsay/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fudomsay/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274893250,"owners_count":25369278,"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","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"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":[],"created_at":"2024-11-15T21:13:21.254Z","updated_at":"2025-09-12T23:31:08.458Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# udomsay\n\n\u003csup\u003e\u003csub\u003e**EXPERIMENTAL** ⚠\u003c/sub\u003e\u003c/sup\u003e \u003csup\u003e\u003csub\u003e**Social Media Image from [Know Your Meme](https://knowyourmeme.com/memes/you-dont-say--3)**\u003c/sub\u003e\u003c/sup\u003e\n\nA stricter, signals driven, **ESX** based library.\n\n## What\n\nThis library includes, in about *2.2Kb*, logic to parse [a specialized form of JSX](https://github.com/ungap/babel-plugin-transform-esx#readme), or its [template literal based variant](https://github.com/ungap/esx#reade), and use signals from various authors, handling rendering automatically and avoiding side effects when used as *SSR*.\n\n## How\n\nGiven the following `counter.jsx` file:\n```js\n// grab signals from various libaries, here the simplest I know\nimport {Signal, signal, effect} from 'https://unpkg.com/@webreflection/signal';\n\n// import the `createRender` utility\nimport createRender from 'https://unpkg.com/udomsay';\nconst render = createRender({Signal, effect});\n\n// Counter Component example\nfunction Counter({clicks}) {\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onclick={() =\u003e { clicks.value--; }}\u003e-\u003c/button\u003e\n      \u003cspan\u003e{clicks}\u003c/span\u003e\n      \u003cbutton onclick={() =\u003e { clicks.value++; }}\u003e+\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nrender(\n  \u003cCounter clicks={signal(0)} /\u003e,\n  document.body\n);\n```\n\nProviding the following `babel.config.json` transformer:\n```json\n{\n  \"plugins\": [\n    [\"@ungap/babel-plugin-transform-esx\"]\n  ]\n}\n```\n\nThe result can be **[tested in CodePen.io](https://codepen.io/WebReflection/pen/vYrYxKY)**.\n\n## Custom Signals Library\n\nBringing in your favorite signals libraries is almost a no brainer with *udomsay*: check the fews already tested within this project!\n\n  * **[preact](https://www.npmjs.com/package/@preact/signals-core)**, implemented through [this file](./esm/dist/preact.js) and [live tested here](https://webreflection.github.io/udomsay/test/dist/preact.html). Try `import {createRender, signal} from \"udomsay/preact\"` yourself!\n  * **[@webreflection/signal](https://www.npmjs.com/package/@webreflection/signal)**, implemented through [this file](./esm/dist/signal.js) and [live tested here](https://webreflection.github.io/udomsay/test/dist/signal.html). Try `import {createRender, signal} from \"udomsay/signal\"` yourself!\n  * **[solid-js](https://www.npmjs.com/package/solid-js)**, implemented through [this file](./esm/dist/solid.js) and [live tested here](https://webreflection.github.io/udomsay/test/dist/solid.html). Try `import {createRender, createSignal} from \"udomsay/solid\"` yourself!\n\n### Current udomsay ESX Interpolations Rules\n\nFollowing the current set of stricter rules around *JSX* usage and how to avoid/prevent issues:\n\n  * if an interpolation contains a *primitive* value (e.g. a string, a number, a boolean or undefined) or a *signal* which value is primitive, every future update of such interpolation will *expect a primitive* value or *signal* carrying a primitive value. Conditional primitives values or signals are fine, but `{condition ? \"string\" : \u003cComponent /\u003e}` is **not supported**.\n  * if a *signal* is used as interpolation and its value is *primitive*, an *effect* is used to update its value on the target text node *only if the signal changes or its value did*. This allows to fine-tune and confine updates per each component or even regular element node, without needing to re-trigger the outer component logic.\n  * if a *signal* is used as interpolation and its value is *not primitive*, every future update of such interpolation will *expect a signal*. Conditional signals are fine, but `{condition ? signal : (\u003cComponent /\u003e || \"string\")}` is **not supported**.\n  * if an interpolation contains an *array* of items, every future update of such interpolation will *expect an array*. Conditional arrays are fine, but `{condition ? [..items] : (\u003cComponent /\u003e || \"string\")}` is **not supported**.\n\n### Library Goals\n\nThe goal of this library is:\n\n  * explore if [a better instrumented JSX](https://webreflection.medium.com/jsx-is-inefficient-by-default-but-d1122c992399) can actually help performance and memory consumption\n  * avoid the need of *vDOM*, still [diffing](https://github.com/WebReflection/udomdiff#readme) when necessary through *arrays* in interpolations\n  * create once and map on the fly (JIT) templates for both nodes, fragments, and components\n  * fine-tune operations per each interpolation, such as spread properties VS known static properties, conditional holes or signals and, last but not least, arrays of items\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fudomsay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Fudomsay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fudomsay/lists"}