{"id":13452534,"url":"https://github.com/andraaspar/mithril-tsx-component","last_synced_at":"2025-03-23T19:34:30.995Z","repository":{"id":57298455,"uuid":"99813511","full_name":"andraaspar/mithril-tsx-component","owner":"andraaspar","description":"TSX base class \u0026 settings for Mithril.","archived":true,"fork":false,"pushed_at":"2019-01-27T13:47:56.000Z","size":8,"stargazers_count":14,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-23T00:35:51.938Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/andraaspar.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":"2017-08-09T13:49:17.000Z","updated_at":"2024-09-08T21:36:44.000Z","dependencies_parsed_at":"2022-09-06T03:31:38.328Z","dependency_job_id":null,"html_url":"https://github.com/andraaspar/mithril-tsx-component","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andraaspar%2Fmithril-tsx-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andraaspar%2Fmithril-tsx-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andraaspar%2Fmithril-tsx-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andraaspar%2Fmithril-tsx-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andraaspar","download_url":"https://codeload.github.com/andraaspar/mithril-tsx-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221900982,"owners_count":16898998,"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-07-31T07:01:26.830Z","updated_at":"2024-10-28T18:31:28.502Z","avatar_url":"https://github.com/andraaspar.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# mithril-tsx-component\n\n\u003e TSX base class \u0026 settings for Mithril.\n\n## Install\n\n**This assumes an existing TypeScript project.**\n\n```\nnpm i mithril-tsx-component\n```\nOr:\n```\nyarn add mithril-tsx-component\n```\n\n## Setup\n\n### tsconfig.json\n\n```JSON\n{\n\t// ...\n\t\"compilerOptions\": {\n\t\t// ...\n\t\t\"jsx\": \"react\",\n\t\t\"jsxFactory\": \"m\"\n\t}\n}\n```\n\n## Use\n\n```TSX\nimport * as m from 'mithril'\n\nimport { MithrilTsxComponent } from 'mithril-tsx-component'\n\nexport interface IFooCompAttrs { }\n\ntype Vnode = m.Vnode\u003cIFooCompAttrs, FooComp\u003e\ntype VnodeDOM = m.VnodeDOM\u003cIFooCompAttrs, FooComp\u003e\n\nexport class FooComp extends MithrilTsxComponent\u003cIFooCompAttrs\u003e {\n\n\t// oninit(v: Vnode) {}\n\t// onbeforeupdate(v: Vnode, o: VnodeDOM) {}\n\tview(v: Vnode) {\n\t\treturn (\n\t\t\t\u003cdiv\u003e\n\t\t\t\tHello World!\n\t\t\t\u003c/div\u003e\n\t\t)\n\t}\n\t// oncreate(v: VnodeDOM) {}\n\t// onupdate(v: VnodeDOM) {}\n\t// onbeforeremove(v: VnodeDOM) {}\n\t// onremove(v: VnodeDOM) {}\n}\n```\n\n## VS Code snippet\n\nUse the following in VS Code’s TypeScript React snippets file:\n\n```JSON\n{\n\t\"Mithril Component\": {\n\t\t\"prefix\": \"mc\",\n\t\t\"body\": [\n\t\t\t\"import * as m from 'mithril'\",\n\t\t\t\"\",\n\t\t\t\"import { MithrilTsxComponent } from 'mithril-tsx-component'\",\n\t\t\t\"\",\n\t\t\t\"export interface I$1Attrs { }\",\n\t\t\t\"\",\n\t\t\t\"type Vnode = m.Vnode\u003cI$1Attrs, $1\u003e\",\n\t\t\t\"type VnodeDOM = m.VnodeDOM\u003cI$1Attrs, $1\u003e\",\n\t\t\t\"\",\n\t\t\t\"export class $1 extends MithrilTsxComponent\u003cI$1Attrs\u003e {\",\n\t\t\t\"\",\n\t\t\t\"\\t// oninit(v: Vnode) {}\",\n\t\t\t\"\\t// onbeforeupdate(v: Vnode, o: VnodeDOM) {}\",\n\t\t\t\"\\tview(v: Vnode) {\",\n\t\t\t\"\\t\\treturn (\",\n\t\t\t\"\\t\\t\\t$0\",\n\t\t\t\"\\t\\t)\",\n\t\t\t\"\\t}\",\n\t\t\t\"\\t// oncreate(v: VnodeDOM) {}\",\n\t\t\t\"\\t// onupdate(v: VnodeDOM) {}\",\n\t\t\t\"\\t// onbeforeremove(v: VnodeDOM) {}\",\n\t\t\t\"\\t// onremove(v: VnodeDOM) {}\",\n\t\t\t\"}\"\n\t\t]\n\t}\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandraaspar%2Fmithril-tsx-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandraaspar%2Fmithril-tsx-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandraaspar%2Fmithril-tsx-component/lists"}