<p dir="auto">Hello,</p>
<p dir="auto">Could you please answer the following questions:</p>
<ul dir="auto">
<li>Is it possible to add multiple event listeners to React component?</li>
<li>Is it possible to programmatically assign listener?</li>
</ul>
<p dir="auto">Ideally i'm looking for something like <a href="https://developer.mozilla.org/en/docs/Web/API/EventTarget.addEventListener" rel="nofollow">addEventListener</a></p>
<p dir="auto">It would be great if you could suggest something.</p>
<p dir="auto">Thank you,<br>
Andrei</p>
<p dir="auto">Hi,</p>
<p dir="auto">I would like to use all the available es6 transforms, the jsx transform and the <a href="https://github.com/andreypopp/es6-module-jstransform">es6-module-jstransform</a> for my JavaScript code.</p>
<p dir="auto">What I'm using is this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var transform = require('jstransform').transform;

var visitors = Array.prototype.concat.apply([], [
  require('es6-module-jstransform').visitorList,
  require('jstransform/visitors/es6-arrow-function-visitors').visitorList,
  require('jstransform/visitors/es6-object-concise-method-visitors.js').visitorList,
  require('jstransform/visitors/es6-class-visitors').visitorList,
  require('jstransform/visitors/es6-object-short-notation-visitors').visitorList,
  require('jstransform/visitors/es6-rest-param-visitors').visitorList,
  require('jstransform/visitors/es6-template-visitors').visitorList,
  require('./transforms/react').visitorList,
  require('./transforms/reactDisplayName').visitorList
]);
var es5 = transform(visitors, sourcecode);"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">transform</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'jstransform'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">transform</span><span class="pl-kos">;</span>

<span class="pl-k">var</span> <span class="pl-s1">visitors</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-c1">concat</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span>
  <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'es6-module-jstransform'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">visitorList</span><span class="pl-kos">,</span>
  <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'jstransform/visitors/es6-arrow-function-visitors'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">visitorList</span><span class="pl-kos">,</span>
  <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'jstransform/visitors/es6-object-concise-method-visitors.js'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">visitorList</span><span class="pl-kos">,</span>
  <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'jstransform/visitors/es6-class-visitors'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">visitorList</span><span class="pl-kos">,</span>
  <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'jstransform/visitors/es6-object-short-notation-visitors'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">visitorList</span><span class="pl-kos">,</span>
  <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'jstransform/visitors/es6-rest-param-visitors'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">visitorList</span><span class="pl-kos">,</span>
  <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'jstransform/visitors/es6-template-visitors'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">visitorList</span><span class="pl-kos">,</span>
  <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./transforms/react'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">visitorList</span><span class="pl-kos">,</span>
  <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./transforms/reactDisplayName'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">visitorList</span>
<span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">es5</span> <span class="pl-c1">=</span> <span class="pl-s1">transform</span><span class="pl-kos">(</span><span class="pl-s1">visitors</span><span class="pl-kos">,</span> <span class="pl-s1">sourcecode</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The problem is that it's difficult to use those jsx transforms without depending on the whole <code class="notranslate">react-tools</code> package which would essentially download a lot of dependencies (another jstransform, etc.) just for those two files, which is why I copied them into a transforms directory in my source tree, but that's obviously a bad solution. Wouldn't it be better to put those jsx-transforms into a separate npm package?</p>
<p dir="auto">Also, I found a reference to something called <code class="notranslate">typechecks</code> in <a href="https://github.com/facebook/react/blob/2d048f1f34a7d10cca81336446920822ad7ea67c/vendor/fbtransform/syntax.js#L23">/vendor/fbtransform/syntax.js</a>, but the appropriate visitor doesn't seem to be open source. In my above example I essentially skipped all the typecheck code that's in syntax.js. Could that be a problem in the future?</p>
<p dir="auto">Awesome library, by the way!</p>