naddiseo / babel-plugin-mjsx Goto Github PK

Refs: http://babeljs.io/blog/2015/10/29/6.0.0/

How can I use this plugin?
What is the name of the plugin?
I tried mjsx, but always throws this exception: ReferenceError: Unknown plugin "mjsx" specified in "path\\to\\.babelrc" at 0.

Below is my .babelrc

{
    "presets": ["es2015"],
    "plugins": ["mjsx"]
}

babel-plugin-mjsx does not seem to have the feature msx has:

Passing attributes or children to a component will generate a call to Mithril's
m.component()
function, with children always being passed as an Array

Some code that worked with msx compiled with babel-plugin-mjsx but an array of children was not rendered.

This is a follow up of #8, add an option to allow whitespace.

• Add option for ws saving
• Add option to force "html" mode
• If in html mode, and node is <textarea>, then keep whitespace.

Could you add support for *.msx file extension?

I write a lot of my svg inline and currently the only way to get that to work is to drop out of using mjsx for the svg parts of my code. Are there plans to support SVG in the future?

Just tried to update to the latest version and it looks like the built /lib directory wasn't included when you published so plugin fails to load.

It may be worth adding the following to package.json to avoid this in the future.

"scripts": {
  "prepublish": "npm run build"
},

When there are components such as:

<div>
    <span>foo</span>
</div>

the output should be a div with a child span, rather than a div with children ['\n\t', span, '\n']

A lot of times I find things like this in the output mjsx: \n\t\t\t\t\t\t\t because of whatever indentation I chose to use. Those are a few wasted bytes since they are no different from a space, but the bigger issue is that the output would be more predictable without any whitespace children (unless explicitly specified as such, like <span>{' '}</span>). Common issues like inline-block elements getting extra spacing because of whitespace characters would be eliminated, and the output would be cleaner.

What do you think of a change like this?

Edit: some discussion on React's jsx regarding whitespace

• facebook/react#65
• facebook/react#480

The current JSX convention (cf. 1 & 2) is to use camelCasing for all attributes, even ones for regular DOM nodes.

I'm probably wrong here, but I believe react takes care of converting camelCased props to normal DOM attributes (e.g. onClick -> onclick) so the babel-plugin-syntax-jsx transformer doesn't modify the casing used in props.

mithril, however, passes all non-mithril attributes directly to the DOM node, so if you camelCase DOM node attributes in your jsx-flavored mithril components, they won't be passed correctly to the DOM.

This is problematic in event handlers like onInput, where the following JSX:

<input onInput={() => console.log('foo')} />

is transformed into:

{ tag: 'input', attrs: { onInput: [Function] } }

... which doesn't actually work in the browser.

I think it would be better if this plugin transformed the above JSX into:

{ tag: 'input', attrs: { oninput: [Function] } }

This would allow us to follow current JSX conventions while still having attributes like event handlers be passed directly to the DOM nodes via mithril.

tl;dr: Perhaps attribute names in regular DOM nodes should be converted from the camelCase expected by JSX to the casing expected by the DOM?

Using the plugin with Mithril rewrite does not work https://github.com/lhorie/mithril.js/tree/rewrite

Here is the first issue I found with the rewrite https://github.com/lhorie/mithril.js/blob/rewrite/render/render.js#L96

vnode.tag is undefined which mithril expects to be defined

Running babel src --out-dir lib from package.json

Outputs to lib/index.js

The end of the file looks like this:

...
function D(v) {
    console.log(JSON.stringify(v, null, '\t'));
}

;

The problem is that the newly built file index.js doesn't contains at the end of the file this:

module.exports = exports.default;

This breaks using this plugin in Babel with Webpack (Babel Standalone) with this error:
Error: Plugin 0 specified in "foreign" provided an invalid property of "default"

Adding manually module.exports = exports.default; at the end of the file fixes this issue.

Also the function D(v) doesn't seems to be used anywhere and can be removed.

It seems some change in babel caused unicode decoding to change.
"·" (middot) -> "\xB7"