{"id":18555669,"url":"https://github.com/mixpanel/snabbdom-jsx-lite","last_synced_at":"2025-04-09T23:32:23.774Z","repository":{"id":46156861,"uuid":"262467149","full_name":"mixpanel/snabbdom-jsx-lite","owner":"mixpanel","description":"Write snabbdom templates in .jsx or .tsx (JSX for TypeScript)","archived":false,"fork":false,"pushed_at":"2025-02-18T00:37:01.000Z","size":363,"stargazers_count":11,"open_issues_count":2,"forks_count":2,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-03-24T13:50:47.265Z","etag":null,"topics":["keep","mxpnl-analytics"],"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/mixpanel.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":"2020-05-09T01:55:47.000Z","updated_at":"2025-01-15T20:00:42.000Z","dependencies_parsed_at":"2024-06-21T17:51:12.453Z","dependency_job_id":"43a59292-ccfc-4dfa-8d5f-5333becc2fc8","html_url":"https://github.com/mixpanel/snabbdom-jsx-lite","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mixpanel%2Fsnabbdom-jsx-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mixpanel%2Fsnabbdom-jsx-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mixpanel%2Fsnabbdom-jsx-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mixpanel%2Fsnabbdom-jsx-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mixpanel","download_url":"https://codeload.github.com/mixpanel/snabbdom-jsx-lite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248129930,"owners_count":21052664,"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":["keep","mxpnl-analytics"],"created_at":"2024-11-06T21:27:31.638Z","updated_at":"2025-04-09T23:32:22.534Z","avatar_url":"https://github.com/mixpanel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# snabbdom-jsx-lite\n\n[![Build](https://github.com/mixpanel/snabbdom-jsx-lite/workflows/build/badge.svg?branch=master)](https://github.com/mixpanel/snabbdom-jsx-lite/actions?query=workflow%3Abuild)\n[![NPM version](https://img.shields.io/npm/v/snabbdom-jsx-lite.svg)](https://www.npmjs.com/package/snabbdom-jsx-lite)\n\nWrite snabbdom templates in .tsx with Typescript or via Babel in .jsx files.\n\n[JSX](https://facebook.github.io/jsx/) is an XML-like syntax extension to JavaScript (ECMAScript).\n\n[Typescript support for JSX](https://www.typescriptlang.org/docs/handbook/jsx.html) supports embedding, type checking,\nand compiling JSX directly to JavaScript.\n\nInstead of using snabbdom's `h` (hyperscript function `h(tag, data, children)`) to define the virtual tree,\nwith `snabbdom-jsx-lite`, you get an similar `jsx` function that is JSX compatible with Babel and Typescript.\n\nTop level props can be any of the the [initialized snabbdom modules](https://github.com/snabbdom/snabbdom#modules-documentation)\nsuch as `class`, `attrs`, `props`, `on`, `style`, `hooks` e.t.c.\n\n### JSX with Typescript\n\nInstall: `yarn add snabbdom-jsx-lite`\n\ntsconfig.json\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react\",\n    \"jsxFactory\": \"jsx\"\n  }\n}\n```\n\nprofile.tsx\n\n```tsx\nimport {jsx} from 'snabbdom-jsx-lite';\n\nconst profile = (\n  \u003cdiv\u003e\n    {/* `sel` is css selector shorthand, \u003cimg sel=\".profile\" /\u003e is same as \u003cimg class={profile: true} /\u003e */}\n    \u003cimg sel=\".profile\" attrs={{src: 'avatar.png'}} /\u003e\n    \u003ch3\u003e{[user.firstName, user.lastName].join(' ')}\u003c/h3\u003e\n  \u003c/div\u003e\n);\n```\n\n### JSX with Babel\n\nInstall: `yarn add snabbdom-jsx-lite @babel/plugin-transform-react-jsx`\n\n.babelrc\n\n```json\n{\n  \"plugins\": [\n    [\n      \"@babel/plugin-transform-react-jsx\",\n      {\n        \"pragma\": \"jsx\",\n        \"pragmaFrag\": \"Frag\"\n      }\n    ]\n  ]\n}\n```\n\nprofile.jsx\n\n```jsx\nimport {jsx} from 'snabbdom-jsx-lite';\n\nconst profile = (\n  \u003cdiv\u003e\n    \u003cimg sel=\".profile\" attrs={{src: 'avatar.png'}} /\u003e\n    \u003ch3\u003e{[user.firstName, user.lastName].join(' ')}\u003c/h3\u003e\n  \u003c/div\u003e\n);\n```\n\n### JSX Fragments\n\n[Fragments](https://reactjs.org/docs/fragments.html) let you group a list of children without adding extra nodes to the DOM.\n\nUse `jsxFragmentFactory` compiler option with Typescript available after version 4.0.0.\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react\",\n    \"jsxFactory\": \"jsx\",\n    \"jsxFragmentFactory\": \"null\"\n  }\n}\n```\n\n```jsx\nimport {jsx} from 'snabbdom-jsx-lite';\n\nconst render = () =\u003e (\n  \u003c\u003e\n    \u003cimg sel=\".profile\" attrs={{src: 'avatar.png'}} /\u003e\n    \u003ch3\u003e{[user.firstName, user.lastName].join(' ')}\u003c/h3\u003e\n  \u003c/\u003e\n);\n```\n\n## Example \u0026 Demo\n\nA Clock App example is in provided in the repo that uses Functional Components and Fragments.\nSee [example/app.tsx](example/app.tsx)\n\nDemo is available at [nojvek.github.io/snabbdom-jsx-lite](https://nojvek.github.io/snabbdom-jsx-lite/)\n\n![snabbdom-jsx-lite demo](https://user-images.githubusercontent.com/1018196/81493451-4ecaa400-9255-11ea-9c57-1dcefff519ea.png)\n\n### Performance\n\n`snabbdom-jsx-lite`'s `jsx` function is optimized for performance.\nIt avoids expensive string manipulation like other snabbdom-jsx libraries.\nWe test that a million vnodes can be created within 200ms on a github actions virtual core (~2GHz).\n\nSee [perf.spec.tsx](tests/jsx-perf.spec.tsx).\n\n### JSX examples\n\n- [TSX Clock](http://nojvek.github.io/snabbdom-jsx-lite/)\n- [TSX Clock source](example/)\n\n### Third party JSX modules\n\nThese notable third party modules support an optional flattened flavor of jsx.\n\n- [snabbdom-pragma](https://github.com/Swizz/snabbdom-pragma)\n- [snabbdom-jsx](https://github.com/snabbdom-jsx/snabbdom-jsx)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmixpanel%2Fsnabbdom-jsx-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmixpanel%2Fsnabbdom-jsx-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmixpanel%2Fsnabbdom-jsx-lite/lists"}