{"id":21648541,"url":"https://github.com/kristw/htmltojsx-too","last_synced_at":"2025-04-11T19:34:00.964Z","repository":{"id":39875204,"uuid":"494754816","full_name":"kristw/htmltojsx-too","owner":"kristw","description":"Convert html code to jsx code.","archived":false,"fork":false,"pushed_at":"2022-06-01T03:03:13.000Z","size":128,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T15:32:49.597Z","etag":null,"topics":["library"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kristw.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-05-21T10:45:20.000Z","updated_at":"2024-10-02T13:55:14.000Z","dependencies_parsed_at":"2022-09-13T10:01:08.746Z","dependency_job_id":null,"html_url":"https://github.com/kristw/htmltojsx-too","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fhtmltojsx-too","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fhtmltojsx-too/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fhtmltojsx-too/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fhtmltojsx-too/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristw","download_url":"https://codeload.github.com/kristw/htmltojsx-too/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248467413,"owners_count":21108637,"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":["library"],"created_at":"2024-11-25T06:58:12.151Z","updated_at":"2025-04-11T19:34:00.936Z","avatar_url":"https://github.com/kristw.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# htmltojsx-too\n\n[![npm version](https://badge.fury.io/js/htmltojsx-too.svg)](https://badge.fury.io/js/htmltojsx-too)\n![CI](https://github.com/kristw/htmltojsx-too/actions/workflows/main.yml/badge.svg)\n\nThis package is a major update from `htmltojsx`.\n\nUse this instead of `htmltojsx` if you\n\n* got security warning from `npm audit` because `htmltojsx` imports old packages\n* want TypeScript support\n* want fewer dependencies overall\n\nThis package\n\n* Reduces unnecessary dependencies. (No more pulling down `react@15` and other old dependencies that has security vulnerabilities.)\n* Provides type-safety as it was rewritten in TypeScript.\n\n## Installation\n\n```sh\nnpm install htmltojsx-too\n```\n\n## Usage\n\nTo use the Node.js module, `require('htmltojsx-too')` and create a new instance.\n\n```js\nconst HTMLtoJSX = require('htmltojsx-too').default;\nconst converter = new HTMLtoJSX({\n  createClass: true, // Set this to false if you want the output to be jsx code.\n  outputClassName: 'AwesomeComponent'\n});\nconst output = converter.convert('\u003cdiv\u003eHello world!\u003c/div\u003e');\n```\n\nFor the web-based version, you can use `import`\n\n```ts\nimport HTMLtoJSX from 'htmltojsx-too';\n```\n\n## More technical details\n\nMost of the code were modified from `htmltojsx@0.3.0` and its code in [reactjs/react-magic](https://github.com/reactjs/react-magic).\n\nRemove dependency to `react@15` and include its constants (`HTMLDOMPropertyConfig` and `SVGDOMPropertyConfig`) directly.\n\nSwitch dependency from `jsdom-no-contexify` to `linkedom`.\n\n---\n\n## Commands\n\nTSDX scaffolds your new library inside `/src`.\n\nTo run TSDX, use:\n\n```bash\nnpm start # or yarn start\n```\n\nThis builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.\n\nTo do a one-off build, use `npm run build` or `yarn build`.\n\nTo run tests, use `npm test` or `yarn test`.\n\n## Configuration\n\nCode quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.\n\n### Jest\n\nJest tests are set up to run with `npm test` or `yarn test`.\n\n### Bundle Analysis\n\n[`size-limit`](https://github.com/ai/size-limit) is set up to calculate the real cost of your library with `npm run size` and visualize the bundle with `npm run analyze`.\n\n#### Setup Files\n\nThis is the folder structure we set up for you:\n\n```txt\n/src\n  index.tsx       # EDIT THIS\n/test\n  blah.test.tsx   # EDIT THIS\n.gitignore\npackage.json\nREADME.md         # EDIT THIS\ntsconfig.json\n```\n\n### Rollup\n\nTSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.\n\n### TypeScript\n\n`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.\n\n## Continuous Integration\n\n### GitHub Actions\n\nTwo actions are added by default:\n\n- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix\n- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)\n\n## Optimizations\n\nPlease see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:\n\n```js\n// ./types/index.d.ts\ndeclare var __DEV__: boolean;\n\n// inside your code...\nif (__DEV__) {\n  console.log('foo');\n}\n```\n\nYou can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.\n\n## Module Formats\n\nCJS, ESModules, and UMD module formats are supported.\n\nThe appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.\n\n## Named Exports\n\nPer Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.\n\n## Including Styles\n\nThere are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.\n\nFor vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.\n\n## Publishing to NPM\n\nWe recommend using [np](https://github.com/sindresorhus/np).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristw%2Fhtmltojsx-too","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristw%2Fhtmltojsx-too","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristw%2Fhtmltojsx-too/lists"}