{"id":17193683,"url":"https://github.com/andrei-markeev/resty.jsx","last_synced_at":"2025-03-25T07:21:53.568Z","repository":{"id":83676826,"uuid":"483485250","full_name":"andrei-markeev/resty.jsx","owner":"andrei-markeev","description":"Use JSX to generate HTML in Openresty with TypescriptToLua","archived":false,"fork":false,"pushed_at":"2022-10-15T23:16:40.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-30T06:41:34.718Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Lua","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/andrei-markeev.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-20T02:53:02.000Z","updated_at":"2022-04-20T02:59:18.000Z","dependencies_parsed_at":"2023-03-12T19:18:02.114Z","dependency_job_id":null,"html_url":"https://github.com/andrei-markeev/resty.jsx","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrei-markeev%2Fresty.jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrei-markeev%2Fresty.jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrei-markeev%2Fresty.jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrei-markeev%2Fresty.jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrei-markeev","download_url":"https://codeload.github.com/andrei-markeev/resty.jsx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245415161,"owners_count":20611497,"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":[],"created_at":"2024-10-15T01:44:43.480Z","updated_at":"2025-03-25T07:21:53.538Z","avatar_url":"https://github.com/andrei-markeev.png","language":"Lua","funding_links":[],"categories":[],"sub_categories":[],"readme":"## JSX in Openresty\n\nThanks to [TypescriptToLua](https://typescripttolua.github.io/) project, we can write web applications for Openresty\nin Typescript, which is pretty cool!\n\nNow, if we want to return HTML from the server, even though there are some really good HTML templating libraries available,\nbut coming from Typescript background, I find it really convenient to generate HTML with JSX, because unlike HTML templates,\nit is 100% covered by intellisense, which drastically reduces amount of errors you make.\n\nThis library enables using JSX in TypescriptToLua projects.\n\n### How to use\n\nInstall from NPM:\n\n```bash\nnpm i resty.jsx\n```\n\nAdd `jsx` and `jsxFactory` parameters to **tsconfig.json**:\n\n```json\n{\n    \"compilerOptions\": {\n        \"jsx\": \"react\",\n        \"jsxFactory\": \"createElement\",\n    }\n}\n```\n\nAdd the following import to the ts file where you want to use JSX:\n\n```ts\nimport {createElement} from \"resty.jsx\"\n```\n\n_Don't forget to change the file extension to `.tsx`!_\n\nNow you can write JSX!\n\n```tsx\nreturn \u003cdiv\u003eHello world!\u003c/div\u003e\n```\n\n### Installing globally\n\nBy default, **TypescriptToLua** will put this library to `lua-modules/resty.jsx` under the output directory and change the\nLua `require` correspondingly.\n\nAlternatively, you may want to install it in a more traditional way, same as LuaRocks or OPM do.\n\nIn this case, you can simply copy [jsx.lua](/lib/resty/jsx.lua) to `/usr/local/openresty/site/lualib/resty/` folder, and\nthen you need to disable **TypescriptToLua**'s module resolution by adding the following line to the **tsconfig.json**:\n\n```json\n{\n    \"tstl\": {\n        \"noResolvePaths\": [\"resty.jsx\"]\n    }\n}\n```\n\nNow the `import` path will not be changed and Lua will pick the library from the global path.\n\n### Performance\n\nThis module is optimized for performance and uses [ngx_escape_html function](https://www.nginx.com/resources/wiki/extending/api/utility/#ngx-escape-html)\nvia FFI. It is quite hard to estimate the overhead and it will vary a lot depending on your markup, in my tests, for a\nreal-world ~2Kb HTML, the JSX version was about `0.5ms` slower per request than raw string concatenation (with server under load).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrei-markeev%2Fresty.jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrei-markeev%2Fresty.jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrei-markeev%2Fresty.jsx/lists"}