{"id":15416571,"url":"https://github.com/remcohaszing/mini-jsx","last_synced_at":"2025-04-19T14:33:21.965Z","repository":{"id":197419059,"uuid":"698616646","full_name":"remcohaszing/mini-jsx","owner":"remcohaszing","description":"Create DOM elements using JSX","archived":false,"fork":false,"pushed_at":"2023-09-30T14:01:34.000Z","size":420,"stargazers_count":22,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T08:43:31.595Z","etag":null,"topics":["dom","html","jsx"],"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/remcohaszing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-09-30T12:58:49.000Z","updated_at":"2025-03-09T19:42:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"111bc1e3-1d73-44a9-bf52-fee8054e45c7","html_url":"https://github.com/remcohaszing/mini-jsx","commit_stats":{"total_commits":46,"total_committers":1,"mean_commits":46.0,"dds":0.0,"last_synced_commit":"66146a4cde340ec921ffa957a9c9fb1d5bfaeb1d"},"previous_names":["remcohaszing/mini-jsx"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmini-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmini-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmini-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fmini-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remcohaszing","download_url":"https://codeload.github.com/remcohaszing/mini-jsx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248837264,"owners_count":21169374,"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":["dom","html","jsx"],"created_at":"2024-10-01T17:12:27.742Z","updated_at":"2025-04-19T14:33:21.937Z","avatar_url":"https://github.com/remcohaszing.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mini JSX\n\n[![github actions](https://github.com/remcohaszing/mini-jsx/actions/workflows/ci.yaml/badge.svg)](https://github.com/remcohaszing/mini-jsx/actions/workflows/ci.yaml)\n[![npm version](https://img.shields.io/npm/v/mini-jsx)](https://www.npmjs.com/package/mini-jsx)\n[![npm downloads](https://img.shields.io/npm/dm/mini-jsx)](https://www.npmjs.com/package/mini-jsx)\n[![codecov](https://codecov.io/gh/remcohaszing/mini-jsx/branch/main/graph/badge.svg)](https://codecov.io/gh/remcohaszing/mini-jsx)\n\nCreate DOM elements using JSX\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Attributes](#attributes)\n  - [Ref](#ref)\n  - [Children](#children)\n- [Configuration](#configuration)\n  - [TypeScript Configuration](#typescript-configuration)\n  - [Babel Configuration](#babel-configuration)\n  - [Using JSX Comments](#using-jsx-comments)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install mini-jsx\n```\n\n## Usage\n\n`mini-jsx` can be used to create native DOM nodes using JSX.\n\n```jsx\nconst button = (\n  \u003cbutton\n    className=\"is-primary\"\n    onclick={() =\u003e {\n      console.log('Click!')\n    }}\n    ref={(node) =\u003e {\n      // Logs the button\n      console.log(node)\n    }}\n    type=\"button\"\n  \u003e\n    \u003ci className=\"button\" /\u003e\n    \u003cspan\u003eButton text\u003c/span\u003e\n  \u003c/button\u003e\n)\n```\n\n### Attributes\n\nAll properties are assigned to the element as-is if the attribute exists on the element type.\nOtherwise it is assigned as an attribute. This way attributes such as `role` and attributes are\nsupported, but also unknown attributes, such as `ng-app`. This also means for example `onclick`\nshould be used, not `click` or `onClick`.\n\n### Ref\n\nAlso a `ref` prop can be defined as a function. This will be called with the created component after\nits props and children have been set.\n\n### Children\n\nChildren of type `null`, `undefined`, or `boolean` will be ignored. Arrays will be handled\nrecursively. Other elements will be appended to the DOM node as-is. This means HTML element children\nwill be rendered as expected, but other values will be converted to strings.\n\n## Configuration\n\n### TypeScript Configuration\n\nThis library is fully typed. In fact, it is written in TypeScript.\n\nAdd the following properties to `compilerOptions` in `tsconfig.json`.\n\n```jsonc\n{\n  \"compilerOptions\": {\n    // This should always be \"react-jsx\".\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"mini-jsx\",\n\n    \"lib\": [\n      \"dom\",\n      // es2017 or higher is required\n      \"esnext\"\n    ]\n\n    // More compiler options…\n  }\n}\n```\n\n### Babel Configuration\n\nAdd the following to your babel config.\n\n```jsonc\n{\n  \"plugins\": [\n    [\"@babel/plugin-transform-react-jsx\", { \"runtime\": \"automatic\", \"importSource\": \"mini-jsx\" }]\n\n    // More plugins…\n  ]\n}\n```\n\n### Using JSX Comments\n\nIf you don’t want to configure Babel or TypeScript using the above methods project wide, a JSX\npragma can be used to transform a single file using `mini-jsx`. This way it can be combined with for\nexample React in the same project.\n\n```js\n/** @jsxRuntime automatic */\n/** @jsxImportSource mini-jsx */\n```\n\n## License\n\n[MIT](./LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fmini-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremcohaszing%2Fmini-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fmini-jsx/lists"}