{"id":25171489,"url":"https://github.com/basemax/mithrilts-jsx","last_synced_at":"2025-05-05T20:50:07.934Z","repository":{"id":151535456,"uuid":"425599734","full_name":"BaseMax/MithrilTS-JSX","owner":"BaseMax","description":"Create a SPA project using Mithril JS framework and design layout by JSX syntax and use Typescript and Vite for build system.","archived":false,"fork":false,"pushed_at":"2024-04-03T17:51:51.000Z","size":132,"stargazers_count":9,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-04T21:45:43.873Z","etag":null,"topics":["javascript","js","jsx","jsx-renderer","jsx-syntax","mithril","mithril-template","mithriljs","mithriljs-template","ts","typescript","vite","vite-template","vitejs","vitets"],"latest_commit_sha":null,"homepage":"https://basemax.github.io/MithrilTS-JSX/dist/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BaseMax.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}},"created_at":"2021-11-07T19:43:53.000Z","updated_at":"2025-02-23T16:09:34.000Z","dependencies_parsed_at":"2024-01-20T00:31:14.509Z","dependency_job_id":"ef1b79ff-71e8-4abf-9398-eae1d0c35ee2","html_url":"https://github.com/BaseMax/MithrilTS-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/BaseMax%2FMithrilTS-JSX","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BaseMax%2FMithrilTS-JSX/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BaseMax%2FMithrilTS-JSX/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BaseMax%2FMithrilTS-JSX/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BaseMax","download_url":"https://codeload.github.com/BaseMax/MithrilTS-JSX/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252575852,"owners_count":21770640,"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":["javascript","js","jsx","jsx-renderer","jsx-syntax","mithril","mithril-template","mithriljs","mithriljs-template","ts","typescript","vite","vite-template","vitejs","vitets"],"created_at":"2025-02-09T09:20:38.972Z","updated_at":"2025-05-05T20:50:07.904Z","avatar_url":"https://github.com/BaseMax.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mithril TS(Type script) JSX\n\nCreate a SPA project using Mithril JS framework and design layout by JSX syntax and use Typescript and Vite for build system.\n\n### Why MithrilJS with JSX?\n\nIf you already know MithrilJS, you have to write the tempalte and layout in HybridScript way and you cannot do that in such a way like ReactJS.\nSo in this example we are going to create a simple project with **Mithril** framework but with a JSX way.\n\n## Features\n\n- TypeScript (TS)\n- Support **JSX** syntax\n- Write **CSS** styles for each component in a seperate file, so it's easy to manage style conflicting\n- Auto build system (**Vite** is really fast and perfect system)\n- Use **MithrilJS** and what we love to use for what we are building\n\n[![Mithril-JS/Type script with support of JSX syntax](preview.png)](https://basemax.github.io/MithrilTS-JSX/dist/)\n\n**First component:** a counter which you can increase a number between 0 and infinity :)\n\n**Second component:** you can add name of your friends and its work dynamically.\n\n## Example component\n\n```typescript\nimport m from \"mithril\"\nimport classes from \"./Friends.module.css\"\n\nconst Name = (elm) =\u003e {\n    return {\n        view: () =\u003e {\n        return (\n            \u003cli\u003e\n                {elm.attrs.name}\n            \u003c/li\u003e\n        )}\n    }\n}\n\nexport const Friends = () =\u003e {\n    let names = []\n    let field_name = \"\"\n    const add_friend = () =\u003e {\n        field_name = field_name.trim()\n        if(field_name !== \"\")\n            names.push(field_name)\n        field_name = \"\"\n    }\n    const nameTyping = (e) =\u003e {\n        console.log(e.keyCode, e.target.value);\n        if(e.key === 'Enter' || e.keyCode === 13) {\n            add_friend()\n            e.target.value = \"\"\n        }\n        else {\n            field_name = e.target.value\n        }\n    }\n    return {\n        view: () =\u003e {\n        return (\n            \u003csection className={classes.section}\u003e\n                \u003ch2 className={classes.sectionTitle}\u003eFriends\u003c/h2\u003e\n                \u003cinput type=\"text\" onkeyup={(e) =\u003e nameTyping(e)} value={field_name} /\u003e\n                \u003cbutton onclick={() =\u003e add_friend()}\u003eInsert\u003c/button\u003e\n                \u003cul\u003e\n                    {names.map(name =\u003e\n                        \u003cName name={name} /\u003e\n                    )}\n                \u003c/ul\u003e\n            \u003c/section\u003e\n        )},\n    }\n}\n```\n### Using\n\n- `$ npm install`\n- `$ npm run dev`\n- `$ npm run build`\n- `$ npm run preview`\n\n### Credit\n\nThank you from **Arthur Clemens**, and **Kevin Fiol** for helping me to config a Build system correctly. Now I have really a good feel while it's possible to config JSX syntax inside MithrilJS library on front of TypeScript which is a good tool for big project.\n\n© Copyright 2021, Max Base\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasemax%2Fmithrilts-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasemax%2Fmithrilts-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasemax%2Fmithrilts-jsx/lists"}