{"id":13400879,"url":"https://github.com/insin/msx","last_synced_at":"2025-10-03T01:30:40.009Z","repository":{"id":15234369,"uuid":"17963140","full_name":"insin/msx","owner":"insin","description":"JSX for Mithril.js 0.x","archived":true,"fork":false,"pushed_at":"2017-01-30T17:02:42.000Z","size":189,"stargazers_count":361,"open_issues_count":8,"forks_count":23,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-12-31T08:47:38.052Z","etag":null,"topics":["deprecated","jsx","mithril","unmaintained"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Easence/AVPlayer-for-iOS-Demo","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/insin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","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":"2014-03-21T00:19:36.000Z","updated_at":"2024-12-17T11:08:57.000Z","dependencies_parsed_at":"2022-08-27T22:01:24.675Z","dependency_job_id":null,"html_url":"https://github.com/insin/msx","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fmsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fmsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fmsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fmsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insin","download_url":"https://codeload.github.com/insin/msx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235059234,"owners_count":18929279,"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":["deprecated","jsx","mithril","unmaintained"],"created_at":"2024-07-30T19:00:56.628Z","updated_at":"2025-10-03T01:30:34.692Z","avatar_url":"https://github.com/insin.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Awesome React","React [🔝](#readme)"],"sub_categories":["Uncategorized","Tools"],"readme":"# DEPRECATED\n\nAs of Mithril.js v1.0.0, you can use the `react-transform-jsx` Babel plugin for JSX.\n\nSee [Mithril.js' JSX documentation](http://mithril.js.org/jsx.html) for details.\n\n---\n\n# MSX [![Build Status](https://secure.travis-ci.org/insin/msx.png?branch=master)](http://travis-ci.org/insin/msx)\n\n*MSX is based on version 0.13.2 of React's JSX Transformer*\n\nMSX tweaks [React](http://facebook.github.io/react/)'s JSX Transformer to output\ncontents compatible with [Mithril](http://lhorie.github.io/mithril/)'s\n`m.render()` function, allowing you to use HTML-like syntax in your Mithril\nview code, like this:\n\n```html\nvar todos = ctrl.list.map(function(task, index) {\n  return \u003cli className={task.completed() \u0026\u0026 'completed'}\u003e\n    \u003cdiv className=\"view\"\u003e\n      \u003cinput\n        className=\"toggle\"\n        type=\"checkbox\"\n        onclick={m.withAttr('checked', task.completed)}\n        checked={task.completed()}\n      /\u003e\n      \u003clabel\u003e{task.title()}\u003c/label\u003e\n      \u003cbutton className=\"destroy\" onclick={ctrl.remove.bind(ctrl, index)}/\u003e\n    \u003c/div\u003e\n    \u003cinput className=\"edit\"/\u003e\n  \u003c/li\u003e\n})\n```\n\n## HTML tags and custom elements\n\nFor tag names which look like HTML elements or custom elements (lowercase,\noptionally containing hyphens), raw virtual DOM objects - matching the\n[`VirtualElement` signature](http://lhorie.github.io/mithril/mithril.render.html#signature)\naccepted by `m.render()` - will be generated by default.\n\n_Input:_\n\n```html\n\u003cdiv id=\"example\"\u003e\n  \u003ch1\u003eTest\u003c/h1\u003e\n  \u003cmy-element name=\"test\"/\u003e\n\u003c/div\u003e\n```\n\n_Output:_\n\n```javascript\n{tag: \"div\", attrs: {id:\"example\"}, children: [\n  {tag: \"h1\", attrs: {}, children: [\"Test\"]},\n  {tag: \"my-element\", attrs: {name:\"test\"}}\n]}\n```\n\nThis effectively [precompiles](http://lhorie.github.io/mithril/optimizing-performance.html)\nyour view code for a slight performance tweak.\n\n## Mithril components\n\nOtherwise, it's assumed a tag name is a reference to an in-scope variable which\nis a [Mithril component](http://lhorie.github.io/mithril/components.html).\n\nPassing attributes or children to a component will generate a call to Mithril's\n[`m.component()`](http://lhorie.github.io/mithril/mithril.component.html)\nfunction, with children always being passed as an Array:\n\n_Input:_\n\n```html\n\u003cform\u003e\n  {/* Bare component */}\n  \u003cUploader/\u003e\n  {/* Component with attributes */}\n  \u003cUploader onchange={ctrl.files}/\u003e\n  {/* Component with attributes and children */}\n  \u003cUploader onchange={ctrl.files}\u003e\n    {ctrl.files().map(file =\u003e \u003cFile {...file}/\u003e)}\n  \u003c/Uploader\u003e\n  \u003cbutton type=\"button\" onclick={ctrl.save}\u003eUpload\u003c/button\u003e\n\u003c/form\u003e\n```\n\n_Output:_\n\n```javascript\n{tag: \"form\", attrs: {}, children: [\n  /* Bare component */\n  Uploader,\n  /* Component with attributes */\n  m.component(Uploader, {onchange:ctrl.files}),\n  /* Component with attributes and children */\n  m.component(Uploader, {onchange:ctrl.files}, [\n    ctrl.files().map(function(file)  {return m.component(File, Object.assign({},  file));})\n  ]),\n  {tag: \"button\", attrs: {type:\"button\", onclick:ctrl.save}, children: [\"Upload\"]}\n]}\n```\n\nMSX assumes your component's (optional) `controller()` and (required) `view()`\nfunctions have the following signatures, where `attributes` is an `Object` and\n`children` is an `Array`:\n\n```javascript\ncontroller([attributes[, children]])\nview(ctrl[, attributes[, children]])\n```\n\nAs such, if a component has children but no attributes, an empty attributes\nobject will still be passed:\n\n_Input:_\n\n```html\n\u003cField\u003e\n  \u003cinput onchange={m.withAttr('value', ctrl.description)} value={ctrl.description()}/\u003e\n\u003c/Field\u003e\n```\n\n_Output:_\n\n```javascript\nm.component(Field, {}, [\n  {tag: \"input\", attrs: {onchange:m.withAttr('value', ctrl.description), value:ctrl.description()}}\n])\n```\n\n## JSX spread attributes and `Object.assign()`\n\nIf you make use of [JSX Spread Attributes](http://facebook.github.io/react/docs/jsx-spread.html),\nthe resulting code will make use of `Object.assign()` to merge attributes - if\nyour code needs to run in environments which don't implement `Object.assign()`\nnatively, you're responsible for ensuring it's available via a\n[shim](https://github.com/ljharb/object.assign), or otherwise.\n\nOther than that, the rest of React's JSX documentation should still apply:\n\n* [JSX in Depth](http://facebook.github.io/react/docs/jsx-in-depth.html)\n* [JSX Spread Attributes](http://facebook.github.io/react/docs/jsx-spread.html)\n* [JSX Gotchas](http://facebook.github.io/react/docs/jsx-gotchas.html) - with\n  the exception of `dangerouslySetInnerHTML`: use\n  [`m.trust()`](http://lhorie.github.io/mithril/mithril.trust.html) on contents\n  instead.\n* [If-Else in JSX](http://facebook.github.io/react/tips/if-else-in-JSX.html)\n\n## In-browser JSX Transform\n\nFor development and quick prototyping, an in-browser MSX transform is available.\n\nDownload or use it directly from cdn.rawgit.com:\n\n* https://cdn.rawgit.com/insin/msx/master/dist/MSXTransformer.js\n\nInclude a `\u003cscript type=\"text/msx\"\u003e` tag to engage the MSX transformer.\n\nTo enable ES6 transforms, use `\u003cscript type=\"text/msx;harmony=true\"\u003e`. Check out\nthe [source](https://github.com/insin/msx/blob/master/demo/index.html) of the\n[live example of using in-browser JSX + ES6 transforms](http://insin.github.io/msx/).\n\nHere's a handy template you can use:\n\n```html\n\u003cmeta charset=\"UTF-8\"\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.rawgit.com/insin/msx/master/dist/MSXTransformer.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\u003cscript type=\"text/msx;harmony=true\"\u003evoid function() { 'use strict';\n\nvar Hello = {\n  controller() {\n    this.who = m.prop('World')\n  },\n\n  view(ctrl) {\n    return \u003ch1\u003eHello {ctrl.who()}!\u003c/h1\u003e\n  }\n}\n\nm.mount(document.getElementById('app'), Hello)\n\n}()\u003c/script\u003e\n```\n\n## Command Line Usage\n\n```\nnpm install -g msx\n```\n\n```\nmsx --watch src/ build/\n```\n\nTo disable precompilation from the command line, pass a `--no-precompile` flag.\n\nRun `msx --help` for more information.\n\n## Module Usage\n\n```\nnpm install msx\n```\n\n```javascript\nvar msx = require('msx')\n```\n\n### Module API\n\n#### `msx.transform(source: String[, options: Object])`\n\nTransforms XML-like syntax in the given source into object literals compatible\nwith Mithril's `m.render()` function, or to function calls using Mithril's\n`m()` function, returning the transformed source.\n\nTo enable [ES6 transforms supported by JSX Transformer](http://kangax.github.io/compat-table/es6/#jsx),\npass a `harmony` option:\n\n```javascript\nmsx.transform(source, {harmony: true})\n```\n\nTo disable default precompilation and always output `m()` calls, pass a\n`precompile` option:\n\n```javascript\nmsx.transform(source, {precompile: false})\n```\n\n## Examples\n\nExample inputs (using some ES6 features) and outputs are in\n[test/jsx](https://github.com/insin/msx/tree/master/test/jsx) and\n[test/js](https://github.com/insin/msx/tree/master/test/js), respectively.\n\nAn example [gulpfile.js](https://github.com/insin/msx/blob/master/gulpfile.js)\nis provided, which implements an `msxTransform()` step using `msx.transform()`.\n\n## Related Modules\n\n* [gulp-msx](https://github.com/insin/gulp-msx) - gulp plugin.\n* [grunt-msx](https://github.com/hung-phan/grunt-msx) - grunt plugin.\n* [mithrilify](https://github.com/sectore/mithrilify) - browserify transform.\n* [msx-loader](https://github.com/sdemjanenko/msx-loader) - webpack loader.\n* [babel-plugin-mjsx](https://github.com/Naddiseo/babel-plugin-mjsx) - babel transform\n\n## MIT Licensed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fmsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsin%2Fmsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fmsx/lists"}