{"id":23983424,"url":"https://github.com/connorjameslow/texsaur","last_synced_at":"2026-04-13T03:13:28.110Z","repository":{"id":41132436,"uuid":"382504570","full_name":"ConnorJamesLow/texsaur","owner":"ConnorJamesLow","description":"Because document.createElement is a dinosaur.","archived":false,"fork":false,"pushed_at":"2023-11-20T20:46:09.000Z","size":488,"stargazers_count":17,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-22T16:13:53.807Z","etag":null,"topics":["html","jsx","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ConnorJamesLow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-07-03T02:10:15.000Z","updated_at":"2024-04-10T05:36:45.000Z","dependencies_parsed_at":"2023-10-04T19:53:36.097Z","dependency_job_id":null,"html_url":"https://github.com/ConnorJamesLow/texsaur","commit_stats":{"total_commits":78,"total_committers":2,"mean_commits":39.0,"dds":"0.17948717948717952","last_synced_commit":"de52b1b3f71d4441a22eca0ec98f11f58370a39d"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConnorJamesLow%2Ftexsaur","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConnorJamesLow%2Ftexsaur/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConnorJamesLow%2Ftexsaur/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConnorJamesLow%2Ftexsaur/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ConnorJamesLow","download_url":"https://codeload.github.com/ConnorJamesLow/texsaur/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248837287,"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":["html","jsx","typescript"],"created_at":"2025-01-07T12:16:41.181Z","updated_at":"2026-04-13T03:13:28.098Z","avatar_url":"https://github.com/ConnorJamesLow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🦖 Texsaur\nA simple jsx to DOM `Node` parser.  \n\n[![View npm package](https://img.shields.io/npm/v/texsaur.svg?style=for-the-badge\u0026color=blueviolet)](https://www.npmjs.com/package/texsaur)\n\n## 🚀 Usage\nTo create a DOM element in JavaScript, we *could* use `document.createElement`:\n\n```ts\nconst div = document.createElement('div');\ndiv.classList.add('example');\ndiv.innerText = 'hello there';\ndiv.addEventListener('click', () =\u003e console.log('clicked!'));\n```\n\n*Texsaur* lets you do this with jsx instead:\n\n```tsx\nimport jsx from 'texsaur';\n\nconst div = (\n  \u003cdiv class=\"example\" \n       onclick={() =\u003e console.log('clicked!')}\u003e\n    Hello there\n  \u003c/div\u003e\n) as HTMLElement;\n```\n\n[Here's a playground](https://www.typescriptlang.org/play?target=2\u0026module=1#code/PQKgsAUABCUAICsDOAPKyWRsSkCWAtgA4D2ATgC7qpQBmZJBUA5BQKYpICGArmcwG5cEWjwB2AYwp4SYqACU2E8gBMAFAG8o7FFQC+ALihadFI0gpk8YgOZQ9ASmNYorsmwp85AHiREuYgB8GqZ63sB+AYFCEHrCymIWUABGPBQUslAAvFBqLq7eqemZshIANngSANZZGmpOWYFQDCQUAHRcRERsYioAwgAWeGXq3orKZCraHBRZAER9FdVsUxQDbFAAQmkZYm1zUMCBDnqB+a4X28Vi5+FFu2cQDvGySS1UOXnQF94EXNaPC5A4z3WRxb4FYB-AGQZ4QSAqEgSHgEHrtZIkFQATw6XR6-SGIzU7wcAiAA).\n\n\n### ♻️ Resuability\nYou can create a reusable component by creating a function:\n\n```tsx\nfunction Header({ title }: { title: string }) {\n  return \u003cheader\u003e\n    \u003ch1\u003e{title}\u003c/h1\u003e\n  \u003c/header\u003e\n}\n\ndocument.body.appendChild(\n  \u003cdiv\u003e\n    \u003cHeader title=\"Hello there\" /\u003e\n    {/* Same as */}\n    {Header({ title: 'Hello there.' })}\n  \u003c/div\u003e\n)\n```\n\nTo work with JSX, the function must implement `Component`:\n\n```ts\ninterface Component {\n  (properties?: { [key: string]: any }, children?: Node | Node[]): Element\n}\n```\n\n## 📦 Bundlers\nJSX requires a compiler/bundler. Here are a few example set-ups (note: checkout the examples/ directory for corresponding sample projects):\n\n### ⚡ Vite\n\nIn `vite.config.js`, add the `esbuild.jsx` property:\n\n```js\nexport default {\n  esbuild: {\n    jsxFactory: 'jsx',\n    jsxFragment: 'jsx.Fragment', // optional - enables fragments (\u003c\u003e\u003c/\u003e)\n  }\n}\n```\n\n_However_, if your project contains a tsconfig, vite should read these properties from there as of version 4 - no vite configuration required!\n\n**Examples**:\n\n - [TypeScript](//github.com/ConnorJamesLow/texsaur/tree/main/examples/vite-ts-project)\n - [JavaScript](//github.com/ConnorJamesLow/texsaur/tree/main/examples/vite-project)\n\n### 🛠️ Webpack\n\nTo use Texsaur with Webpack, use `ts-loader` and add the following to your `webpack.config.js`:\n\n```js\n// webpack.config.js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      { test: /tsx?$/, loader: 'ts-loader' },\n      // ...\n    ]\n  },\n  resolve: {\n    extensions: ['.ts', '.tsx', '.js'],\n    extensionAlias: { '.js': ['.js', '.ts'] }\n  },\n  // ...\n};\n```\n\nSee [`examples/webpack-ts-project`](./examples/webpack-ts-project) for a full setup.\n\n## 💙 Typescript Usage\nTexsaur supports a few models of JSX code generation (determined the `jsx` property in your tsconfig):\n- `\"react\"`,\n- `\"react-jsx\"`,\n- and `\"preserve\"`.\n\nThe differences between these are outlined in the following sections.\n\n### Method 1: `\"jsx\": \"react\"`\nFirst, configure your `tsconfig.json`:\n\n```jsonc\n\"compilerOptions\": {\n  \"jsx\": \"react\",\n  \"jsxFactory\": \"jsx\", \n  \"jsxFragmentFactory\": \"jsx.Fragment\" // optional - enables fragments (\u003c\u003e\u003c/\u003e)\n}\n```\n\nThen, import _Texsaur_ in any **.tsx** file:\n\n```tsx\nimport jsx from 'texsaur'\n\nconst div = \u003cdiv\u003eHello there.\u003c/div\u003e\n```\n\n### Method 2: `\"jsx\": \"react-jsx\"`\nThis method comes with a few more quirks, but it allows you to drop the `import jsx` statements in your `tsx` files.  \n\nIn your `tsconfig.json`:\n\n```jsonc\n\"compilerOptions\": {\n  \"moduleResolution\": \"node16\", // or nodenext\n  \"jsx\": \"react-jsx\",\n  \"jsxImportSource\": \"texsaur\"\n}\n```\n\nBy using `node16` module resolution, your package will be able to take advantage of the `exports` field in texsaur's package.json. However, this requires you use the file suffix in imports:\n\n```tsx\nimport Foo from './components/foo'\n\n// becomes\n\nimport Foo from './components/foo.js' // .js even if it's .tsx or .ts\n```\n\n### Method 3: `\"jsx\": \"preserve\"`\nPlease note that this repository does not contain any examples of this, nor have we tested it. In theory, this should work.  \n\nConfigure your `tsconfig.json`:\n\n```jsonc\n\"compilerOptions\": {\n  \"jsx\": \"preserve\",\n}\n```\n\nThis will output the jsx code as-is. You will need another bundler/compiler (e.g. babel) to transform it before it can be used in a browser.\n\n\n### Declare Custom Elements\n\nAdd custom elements to the [`JSX.IntrinsicElements`](https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements) interface:\n\n```ts\nnamespace JSX {\n  interface IntrinsicElements {\n    ['my-element']: HTMLElement // or another type representing your custom element\n  }\n }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconnorjameslow%2Ftexsaur","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconnorjameslow%2Ftexsaur","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconnorjameslow%2Ftexsaur/lists"}