{"id":21509282,"url":"https://github.com/mmis1000/litjsx","last_synced_at":"2025-03-17T15:14:59.162Z","repository":{"id":137629695,"uuid":"132997394","full_name":"mmis1000/litJSX","owner":"mmis1000","description":"JSX compiler written with tagged templete literal","archived":false,"fork":false,"pushed_at":"2019-12-23T09:46:13.000Z","size":59,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-08T01:09:18.013Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/mmis1000.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":"2018-05-11T06:15:58.000Z","updated_at":"2019-05-05T13:01:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"b359578f-25fb-40be-801e-d246158d9c1f","html_url":"https://github.com/mmis1000/litJSX","commit_stats":{"total_commits":41,"total_committers":1,"mean_commits":41.0,"dds":0.0,"last_synced_commit":"f0317e9c509d27fba3c03467952143b60f2019ba"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmis1000%2FlitJSX","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmis1000%2FlitJSX/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmis1000%2FlitJSX/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmis1000%2FlitJSX/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmis1000","download_url":"https://codeload.github.com/mmis1000/litJSX/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244056424,"owners_count":20390719,"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-11-23T21:23:14.881Z","updated_at":"2025-03-17T15:14:59.130Z","avatar_url":"https://github.com/mmis1000.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [WIP] litJSX\n\nA 10kb(minified) only JSX compiler running in browser  \nWrite React without tool chains!\n\n# Example\n```js        \nvar res = litJSX.jsx(React, {Tag: Tag})`\n    \u003cTag ...${{test:\"included\"}}  v${\"a\"}l=t${\"es\"}t val1=t${\"es\"}t1 v${\"a\"}l2=test2/\u003e\n`\n\nReactDOM.render(\n    res,\n    document.getElementById('root')\n);\n```\n\n# API\n\n```js\n/**\n * @param {React} React\n * @param {Object\u003cstring, Componenet\u003e} componenets the templete will try to create element as string directly if it is not registerd here\n * @returns {function} The templete literal function\n */\nvar jsx = litJSX.jsx(React, {Component1, Component1, ...other});\n```\n\n```js\n/**\n * @param {string[]} templete\n * @param {...any} argumenets\n * @returns {Element} react element\n */\njsx;\n```\n\n# Basic Usage\n```js\n// it will return the element if there is only one root element\njsx`\n    \u003cdiv\u003e\u003c/div\u003e\n`\n\n// it will return a React.Fragment if there are more than one root element.\njsx`\n    \u003cdiv\u003e\u003c/div\u003e\n    \u003cdiv\u003e\u003c/div\u003e\n`\n```\n\n# Supported Syntaxs\n\n## common entities\n```js\n// it unesacpe only these entities in tag body and attribute value\njsx`\n    \u003cdiv value=\"\u0026amp;\u0026lt;\u0026gt;\u0026quot;\u0026#039;\u0026nbsp;\"\u003e\n        \u0026amp;\u0026lt;\u0026gt;\u0026quot;\u0026#039;\u0026nbsp;\n    \u003c/div\u003e\n`\n// you got \u0026\u003c\u003e\"'\\u00A0 in both property and body\n```\n## self closed tag\n```js\njsx`\n    \u003cdiv/\u003e\n`\n```\n\n## open tag\n```js\njsx`\n    \u003cdiv\u003econtent\u003c/div\u003e\n`\n```\n\n## text only (will be wrapped into a fragment)\n```js\njsx`\n    There is only text\n`\n```\n\n## fragment (although there is no reason to use it. It is automatically wrapped if there is more than one element at root)\n```js\njsx`\n    \u003c\u003e\n        There is only text\n    \u003c/\u003e\n`\n```\n\n## props\n```js\njsx`\n    \u003cdiv attribute=x/\u003e\n    \u003cdiv attribute='x'/\u003e\n    \u003cdiv attribute=\"x\"/\u003e\n`\n```\n\n## data in body\n```js\njsx`\n    \u003cdiv\u003e\n        The data here can also be\n        ${\"text\"}\n        or\n        ${jsx`another element`}\n        or\n        ${[jsx`array of elements`]}\n        just like original jsx\n    \u003c/div\u003e\n`\n```\n\n## data in key (will be stringfied and concat to other part)\n```js\njsx`\n    \u003cdiv ${\"key\"}=\"value\"/\u003e\n`\n```\n\n## only data in value (will not be stringfied)\n```js\njsx`\n    \u003cdiv key=${12}/\u003e\n`\n```\n\n## mixed data in value (will be stringfied and concat to other part)\n```js\njsx`\n    \u003cdiv key=${\"val\"}ue/\u003e\n`\n```\n\n## Object literal spread (will be mixed into the props by Object.assign)\n```js\nvar ObjectToSpread = {key: \"value\"};\njsx`\n    \u003cdiv ...${ObjectToSpread}/\u003e\n`\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmis1000%2Flitjsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmis1000%2Flitjsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmis1000%2Flitjsx/lists"}