alexmingoia / jsx-transform Goto Github PK

View Code? Open in Web Editor NEW

292.0 292.0 28.0 103 KB

JSX transpiler. A standard and configurable implementation of JSX decoupled from React.

JavaScript 97.44% HTML 2.56%

jsx-transform's People

Contributors

Stargazers

Watchers

jsx-transform's Issues

Support for vDOMSON

Hi,

I am working on a vDOM data standard called vDOMSON. The idea is to have a simple and pure data presentation that is independent of vDOM libraries, you can read more about vDOMSON here:

cyclejs/cyclejs#467

Now writing and reading vDOMSON can be a strain on the eyes, and it could be nice with some syntactic sugar, so I thought of writing a transpiler for Babel that can map:
<p class="hello" style="{borderRadius : 3}"/> into
['p', {attrs : {class : "hello"}, style : {borderRadius : 3}}, null]

My quest lead me to this module, but here i unfortunately find there is an assumption of a factory function. I want to skip that step and transform it into a JS-Object directly.

I haven't written a transformer before, but I will give it a try, any help would be much appreciated, like where to start looking.

Once I have something ready I can submit a PR.

Define how unknown tags should be converted

Hi, I have a small feature request. All unkown tags are converted to a function call, but i would like use a wrapper function for this in my implementation.
Just the given method as defined by the jsx header would also do the trick!

/** @jsx myVDom.element */
<ListItem className='hi' />

myVDom.element(ListItem, { className: 'hi' });

Chokes on arrays and empty braces :(

Excellent project, thank you. Alas it seems to choke on attributes that have arrays passed into them, like this:
<ListOfLinks links={[ { href : '#foo', text : 'foo' }, { href : '#bar', text : 'bar' } ]} />

Also braces used as comments, like this:
{/* This is a comment */}

esprima-fb error when using default parameter value and destructuring

Hi. If you do:

function main ( { x = 5, y = 3 } = {} ) {
    ..
}

and compile it thanks to Babel and browserify you've got the error
Unexpected token = while parsing file

It works well without jsx-transform. As esprima-fb is not maintained, does it exist a solution to replace it? (Esprima looks like to support JSX now)
Thanks.

Transformation adds unnecessary trailing spaces

An annoyance in static code analysis...

Example jsx:

<div className={this.getClassName()}>
    <input type="text"
           className={this.getInputClassName()}
           disabled={this.state.disabled}/>
    <div className="textinput-inner"></div>
    {this.getRequiredSpan()}
    <span className="state"></span>
</div>

Tests do not work in node 5.x.x

As you can see 4.2.3 works but not 5.2.0.
To reproduce, do the following in a git clone:

nvm install 4.2.3; nvm use 4.2.3; rm -rf node_modules/; npm install;gulp

[15:41:41] Using gulpfile ~/a/jsx-transform/gulpfile.js
[15:41:41] Starting 'test'...


  jsx.fromString()

    ✓ desugars JSX

    ✓ desugars JSX with ES6 module exports

    ✓ fromStrings self-closing tags

    ✓ renders JS expressions inside JSX tag

    ✓ supports custom component patterns

    ✓ supports spread attributes
    options.factory

      ✓ throws error if not set

      ✓ set factory
    options.passUnknownTagsToFactory

      ✓ passes unknown tags to options.factory
    options.unknownTagsAsString

      ✓ passes unknown tags to docblock ident as string
    options.arrayChildren

      ✓ dont pass array for children

  jsx.browserifyTransform()

    ✓ transforms JSX (42ms)

    ✓ ignores .json files


  13 passing (133ms)

[15:41:42] Finished 'test' after 581 ms
[15:41:42] Starting 'default'...
[15:41:42] Finished 'default' after 12 μs

nvm install 5.2.0; nvm use 5.2.0; rm -rf node_modules/; npm install 
[15:45:50] Using gulpfile ~/a/jsx-transform/gulpfile.js
[15:45:50] Starting 'test'...
[15:45:51] 'test' errored after 587 ms
[15:45:51] Error in plugin 'gulp-mocha'
Message:
    Cannot find module 'jstransform/node_modules/esprima-fb'
Details:
    code: MODULE_NOT_FOUND
Stack:
Error: Cannot find module 'jstransform/node_modules/esprima-fb'
  at Function.Module._resolveFilename (module.js:336:15)
  at Module.require (/Users/fsoc/a/jsx-transform/node_modules/jscoverage/lib/patch.js:56:23)
  at require (module.js:384:17)
  at Object.<anonymous> (/Users/fsoc/a/jsx-transform/lib/visitor.js:57:14)
  at Module._compile (module.js:460:26)
  at Object.Module._extensions..js (/Users/fsoc/a/jsx-transform/node_modules/jscoverage/lib/patch.js:115:12)
  at Module.require (/Users/fsoc/a/jsx-transform/node_modules/jscoverage/lib/patch.js:76:30)
  at require (module.js:384:17)
  at Object.<anonymous> (/Users/fsoc/a/jsx-transform/lib/jsx.js:90:17)
  at Module._compile (module.js:460:26)
  at Object.Module._extensions..js (/Users/fsoc/a/jsx-transform/node_modules/jscoverage/lib/patch.js:115:12)
  at Module.require (/Users/fsoc/a/jsx-transform/node_modules/jscoverage/lib/patch.js:76:30)
  at require (module.js:384:17)
  at Object.<anonymous> (/Users/fsoc/a/jsx-transform/test/jsx.js:4:59)
  at Module._compile (module.js:460:26)
  at Object.Module._extensions..js (/Users/fsoc/a/jsx-transform/node_modules/jscoverage/lib/patch.js:115:12)
  at Module.load (/Users/fsoc/a/jsx-transform/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
  at Function.Module._load (module.js:310:12)
  at Module.require (module.js:365:17)
  at Module.require (/Users/fsoc/a/jsx-transform/node_modules/jscoverage/lib/patch.js:63:29)
  at require (module.js:384:17)
  at /Users/fsoc/a/jsx-transform/node_modules/mocha/lib/mocha.js:216:27
  at Array.forEach (native)
  at Mocha.loadFiles (/Users/fsoc/a/jsx-transform/node_modules/mocha/lib/mocha.js:213:14)
  at Mocha.run (/Users/fsoc/a/jsx-transform/node_modules/mocha/lib/mocha.js:453:10)
  at Domain.<anonymous> (/Users/fsoc/a/jsx-transform/node_modules/gulp-mocha/index.js:56:20)
  at Domain.run (domain.js:197:16)
  at Stream.<anonymous> (/Users/fsoc/a/jsx-transform/node_modules/gulp-mocha/index.js:54:5)
  at _end (/Users/fsoc/a/jsx-transform/node_modules/through/index.js:65:9)
  at Stream.stream.end (/Users/fsoc/a/jsx-transform/node_modules/through/index.js:74:5)
  at DestroyableTransform.onend (/Users/fsoc/a/jsx-transform/node_modules/readable-stream/lib/_stream_readable.js:523:10)
  at DestroyableTransform.g (events.js:199:16)
  at DestroyableTransform.emit (events.js:129:20)
  at /Users/fsoc/a/jsx-transform/node_modules/readable-stream/lib/_stream_readable.js:965:16
  at process._tickDomainCallback (node.js:381:11)

Custom attributes

Please check this https://github.com/Matt-Esch/virtual-dom/blob/7cd99a160f8d7c9953e71e0b26a740dae40e55fc/docs/vnode.md#custom-attributes-data-

Quoting docs:

var doThis = new VNode('div', { attributes: { "data-example": "I will render" }})
var notThis = new VNode('div', { "data-example": "I will not render" })

So all data-* attributes should go under {attributes: ...} namespace.

jsx-transform renders this in second (wrong) way:

<li data-index={i} class={makeClass({active: active == i})}>{item}</li>

h('li', {'data-index': i, className: makeClass({active: active == i})}, [item])

Should be:

h('li', {attributes: {'data-index': i}, className: makeClass({active: active == i})}, [item])

Browser "text/jsx" transformer.

For demonstration purposes it would be handy to automatically compile browser side scripts similar to the original react JSXTransformer.

<script src="node_modules/jsx-transform/browser.js"></script>
<script type="text/jsx" src="..."></script>

JSX Spread Attributes

Has anyone had any thoughts on adding support for JSX Spread Attributes?

var component = <Component {...props} />;

Currently the jstransform has no problems parsing the expression but jsx-transform blows up on this line because it always expects attributes to have a name.

Fixing should be simple enough with the exception of deciding how best to solve the equivalent of React's spread function which is uses when it desugars the jsx code.

React.createElement(Overview, React.__spread({},  state.articles, {foo: "bar"})),

Personally I should be possible to specify a global function that provides spread support and fallback to Object.assign if not defined.
I'm just worried that if it's not a modern browser it will subtly break peoples code.

Any thoughts?

Update dependencies

esprima-fb and jstransform are not mainained anymore, also there is an error compiling es6 classes with jsx with browserify.

Probably recast worth trying.

Also it needs updating gulpfile.js to plain scripts.

options.tags ignored

I think I'll let the code explain it.

jsx.transform('<foo />', {ignoreDocblock: yes, jsx: 'dom', tags: ['foo']})
// Output: "foo(null)"
// Correct: "dom('foo', null)"

jsx.transform('<div></div>',  {ignoreDocblock: yes, jsx: 'dom', tags: ['foo']})
// Output: "dom('div', null)"
// Correct: "div(null)"

passing optional arguments to Vnode

Sorry if this is a wrong place to ask this question :)
Virtual dom has optional arguments such as Key or Namespace https://github.com/Matt-Esch/virtual-dom/blob/7cd99a160f8d7c9953e71e0b26a740dae40e55fc/docs/vnode.md#arguments
The key argument is very useful when you want efficiently reorder lists. Is there a way to define key argument in jsx syntax?

[feature request] Spread children

In facebook/jsx#57, the JSX spec was updated to allow for spreading children, basically turning

(
  <div>
    {...children}
  </div>
)

into

factory('div', null, ...children)

This is a useful syntax, and it'd be great if it could be added to this transformer.

Add require hook for node.

It would be handy to have support for bootstrapping the jsxtransform in node, similar to babel's

require("babel/register");

Why docblocks support has been removed?

Error messages are meaningless

If JSX file contains syntax error jsx-transform crashes with absolutely meaningless error message.
It doesn't provide neither file, nor line, nor code chunk of actual error. Is this a limitation of js-transform? Are there any alternatives?

renameAttrs option no longer works

I'm coming back to CycleJS and JSX-Transform after some break.
Versions and APIs of both changed quite a bit 😄

I discovered that renameAttrs option no longer works.
It is undocumented (why?) but still present in source code.

This JSX transform options:

let jsxOptions = {
  factory: "Cycle.h",
  renameAttrs: {
    "class": "className",
  }
};

now produces this invalid VirtualDOM code:

Cycle.h('input', {class: "myinput", type: "text"})

instead of expected:

Cycle.h('input', {className: "myinput", type: "text"})

Option to specify custom identifier tags.

Currently in JSX you are limited to valid JavaScript (lowercase) element names, otherwise a value is passed instead of a string.

It would be cool to add support for listing identifiers such as "!--" for comments.

<!-- text="Hi">
//-> DOM("!--", {text: "Hi"})

Instead of a syntax error.

Although I think a whitelist would be handy for third party virtual doms, ultimately the feature I'm looking for is html comments in jsx and perhaps it should be its own issue as the syntax would have to change a bit further (no attributes and ends with -->).
Let me know if I'm not making complete sense as I have typed this on a phone.

Support ES6 style exports

jsx-transform throws on this line:

export default View;

This works ok:

module.exports = View;

Error: Parse Error: Line 24: Illegal export declaration
    at throwError (/Users/ivankleshnin/Projects/cycle-one/node_modules/gulp-jsx/node_modules/jsx-transform/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2724:21)
    at throwErrorTolerant (/Users/ivankleshnin/Projects/cycle-one/node_modules/gulp-jsx/node_modules/jsx-transform/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2736:24)
    at parseSourceElement (/Users/ivankleshnin/Projects/cycle-one/node_modules/gulp-jsx/node_modules/jsx-transform/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6332:17)
    at parseProgramElement (/Users/ivankleshnin/Projects/cycle-one/node_modules/gulp-jsx/node_modules/jsx-transform/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6391:16)
    at parseProgramElements (/Users/ivankleshnin/Projects/cycle-one/node_modules/gulp-jsx/node_modules/jsx-transform/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6423:29)
    at parseProgram (/Users/ivankleshnin/Projects/cycle-one/node_modules/gulp-jsx/node_modules/jsx-transform/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6436:16)
    at Object.parse (/Users/ivankleshnin/Projects/cycle-one/node_modules/gulp-jsx/node_modules/jsx-transform/node_modules/jstransform/node_modules/esprima-fb/esprima.js:7766:23)
    at getAstForSource (/Users/ivankleshnin/Projects/cycle-one/node_modules/gulp-jsx/node_modules/jsx-transform/node_modules/jstransform/src/jstransform.js:251:21)
    at transform (/Users/ivankleshnin/Projects/cycle-one/node_modules/gulp-jsx/node_modules/jsx-transform/node_modules/jstransform/src/jstransform.js:274:11)
    at Object.transform (/Users/ivankleshnin/Projects/cycle-one/node_modules/gulp-jsx/node_modules/jsx-transform/lib/jsx.js:53:21)

Namespace attributes are not supported

It is not possible to use svg tags in jsx with jsx-transform.
For example:
<svg><use xlink:href="#icon-star-filled"></use></svg>
I can see in the code this:
if (attr.name.namespace) { throw new Error( 'Namespace attributes not supported. JSX is not XML.' ); }
But namespace attributes are valid according to JSX specs](https://facebook.github.io/jsx/)

es6 features option / provide visitors array

Like the jsx-loader plugin (https://github.com/petehunt/jsx-loader), this might be useful. It might be a bit out of scope of the project, but a nice addition. Adding support for es6 with a separate loader could be done, but it has to parse the source again, and that is inefficient.

Let me know if you would like this in this project, i'm willing to write a PR for this...!

Additional way of representing uknown tags

Given unknown tag:

<HelloWorld/>

With JSX constructor h, it currently can be transformed to:

h(HelloWorld, null);

h.HelloWorld(null);

Additional (fairly logical) transformation can be

h('HelloWorld', null);

It's required for libs that make some sort of global registration on their own.
See cyclejs/cyclejs#35

Would you mind adding one more flag (or updating existing) to handle this case?

Source map support

Source maps generated by browserify with jsx-transform are wrong. There is no JSX displayed in devtools.

alexmingoia / jsx-transform Goto Github PK

jsx-transform's People

Contributors

Stargazers

Watchers

Forkers

jsx-transform's Issues

Recommend Projects

Recommend Topics

Recommend Org