Improve compatibility with create-react-app

[jch]

The create-react-app project supports JSX, but has decided to bundle a webpack config that does not look at the .jsx file extension. From facebook/create-react-app#87:

The distinction between .js and .jsx files was useful before Babel, but it’s not that useful anymore.

There are other syntax extensions (e.g. Flow). What would you call a JS file that uses Flow? .flow.js? What about JSX file that uses Flow? .flow.jsx? What about some other experimental syntax? .flow.stage-1.jsx?

While it is possible to 'eject' the configuration to modify the webpack loaders to support this project, one would lose the benefits of create-react-app.

One proposal would be to rename all the files to have a JS extension and update the docs to transpile .js files as JSX.

Another proposal would be to have symlinks from .js to .jsx files to support either.

I recognize that this is a workaround to a 3rd party library that lightning has no dependency to. I'm new to both projects so perhaps the two are not commonly used together, or there is a preferred convention in the community I haven't discovered. I'm proposing this because create-react-app seems like a popular entry point for learning react, and I believe this project would benefit with better compatibility.

[interactivellama]

Yes, I hope to maintain compatibly with create-react-app and leverage the CRA community, especially for the benefit of Salesforce ISV (external partners) and internal prototyping. That said I will need the community to help me with this (like this post), since I don't regularly use CRA myself.

That said, this library's jsx files are the source code, and this library's source code is not compatible with CRA (needs Babel, stage-1 ES6, etc). Users of CRA should use named imports. See readme https://github.com/salesforce/design-system-react#quick-setup-commonjs and our NPM library ships with CJS and ES6 files that use .js extension.

I'm guessing that you filed this issue because all the examples point to the source code JSX. That is a historical aspect of this library being internal open source until just last October and complex application build flows are recommended to use the source code for flexibility.

If that is the problem (copy and paste examples not working), I'm open to suggestions. Would a comment/heading above each example help clarify the need to change to named imports? I'd rather not have two example sets/files, but if we could automate the change with RegEx, AST etc. it might work. Something like this, maybe.

Am I understanding your request correctly?

[jch]

Thanks for the detailed reply. I actually got this working with the default instructions on this repo and forgot to close this issue out.

It seems that CRA does have a Babel loader for jsx configured. Closing this issue for now unless someone feels there's further follow up