Make the react-chatview transpiled module

[yloeza]

Currently the react-chatview is been published as a jsx code, with this approach when you try to import it into your project you need to explicity configure babel to compile it. For instance, if you are using webpack you need to include { test: /node_modules\/react-chatview/, loader: 'babel' } to workaround it.

I'm currently using mocha to run my tests, you can configure mocha to run babel compiler with mocha -R spec --recursive --compilers js:babel/register ... unfortunately, mocha does not provide a way to set more deep configurations on babel/register (i.e. using a regex on the ignore option to whitelist react-chatview from node_module files)

all this headaches could be solved if react-chatview publish the transpied version to npm, the current dist/react-chatview can't be used as you use react-chatview.js since it looks like is coupled to webpack

[dustingetz]

the dist artifact works from a script tag, are you sure it doesn't do what you want?

[yloeza]

as I said I'm trying to make it work when running tests with mocha, so, I can't use a script tag. Also I wouldn't use a script tag for the actual implementation since I'm creating a bundle for all my react app (I'm workaround it with the webpack config)

[dustingetz]

I think the universal artifact will work in mocha, it does not have a
webpack dependency, was there an error when you tried it?

On Friday, April 29, 2016, Yair Loeza notifications@github.com wrote:

as I said I'm trying to make it work when running tests with mocha, so, I
can't use a script tag. Also I wouldn't use a script tag for the actual
implementation since I'm creating a bundle for all my react app (I'm
workaround it with the webpack config)

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#10 (comment)

[yloeza]

This is the error I get if I try to use it like
var ChatView = require('react-chatview')

mocha -R spec --recursive --compilers js:babel/register

/my-project/node_modules/react-chatview/src/react-chatview.js:1
(function (exports, require, module, __filename, __dirname) { import React fro
                                                              ^^^^^^
SyntaxError: Unexpected reserved word

this is what I get if I tried to use it like:
var ChatView = require('react-chatview/dist/react-chatview.js')

> mocha -R spec --recursive --compilers js:babel/register

module.js:338
    throw err;
          ^
Error: Cannot find module 'ReactDOM'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at webpackUniversalModuleDefinition (/my-project/node_modules/react-chatview/dist/react-chatview.js:3:46)
    at Object.<anonymous> (/my-project/node_modules/react-chatview/dist/react-chatview.js:10:3)

it complains about not finding ReactDOM, although I already have it installed in my node_modules folder

[yloeza]

just so you know, I was able to workaround it by not using the built-in compiler option that mocha provides and needed to require babel/register on my mocha entry point
mocha -R spec --recursive --require test/setup.js

inside test/setup.js

require('babel/register')({
  only: [
    'client/**/*',
    'server/**/*',
    'test/**/*',
    /react-chatview/
  ]
})

I still think that a transpiled version of the react-chatview.js file should be published

[dtschust]

Seconding this. I think that package.json's main field should probably point directly to the dist/react-chatview.js component, and I think some additional config needs to be done on the webpack side to correctly alias react and react-dom depending on the method of loading them. I was able to get a decent flow working on another react component, https://github.com/NerdWallet/nw-react-slider/blob/master/webpack.config.js#L16 . @dustingetz it looks like you have something close to that here https://github.com/dustingetz/react-chatview/blob/master/webpack.config.js#L34 , not quite sure why it's commented out.

Great component, thanks for open sourcing!

Would you accept a PR with these changes if @yloeza and I worked to make one?

[dustingetz]

PR gladly accepted. Please leave the es6 src and the universal artifact
published alongside though. Thanks drew and yair.

On Wed, May 4, 2016 at 7:05 PM, Drew Schuster notifications@github.com
wrote:

Seconding this. I think that package.json's main field should probably
point directly to the dist/react-chatview.js component, and I think some
additional config needs to be done on the webpack side to correctly alias
react and react-dom depending on the method of loading them. I was able to
get a decent flow working on another react component,
https://github.com/NerdWallet/nw-react-slider/blob/master/webpack.config.js#L16
. @dustingetz https://github.com/dustingetz it looks like you have
something close to that here
https://github.com/dustingetz/react-chatview/blob/master/webpack.config.js#L34
, not quite sure why it's commented out.

Great component, thanks for open sourcing!

Would you accept a PR with these changes if @yloeza
https://github.com/yloeza and I worked to make one?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#10 (comment)

[dustingetz]

@yloeza I have pushed to master with the transpiled artifact in lib directory. Can you see if it works in your configuration? Thanks for the feedback. @dtschust thank you for your contribution. Current master is published to npm as 0.1.0

[dustingetz]

@dtschust Are you sure main is supposed to point at the min version? In redux, main points to the babel processed files, not the umd artifact We also don't really understand the browser field. The config I have locally (not committed yet) is this, is this wrong?

"main": "lib/react-chatview.js",
"jsnext:main": "src/react-chatview.js",
"browser": "dist/react-chatview.js",

[dtschust]

@dustingetz ah, looks like you just added the lib view, nice! I wasn't going to push for that but yes now that lib exists "main" should point to lib/react-chatview.js. Technically pointing to the umd artifact works but yes it is not ideal, lib is better.

I don't believe the browser field is needed at all, it's only necessary if browser and node need to point to different files which in this case isn't true. I just modified the browser field in my PR because it was less of a change :). redux doesn't have a browser field so I imagine it's fine. I'm not sure about jsnext:main, it looks like redux is doing a custom babel compilation to generate that entry point so I think that just linking to the source is wrong. jsnext:main hasn't reached super widespread use yet, so maybe it's better to wait and see if anyone needs it and if they can help you verify the change.

[dtschust]

also if you want @yloeza to verify anything for you before you publish to npm you can push up to a branch and we can point our package.json to that branch first.

[yloeza]

@dustingetz This is great! I have tested the latest version (0.1.0) and works as expected ... @dtschust Thanks a lot for your contribution.