Add support to have ReactStyleFileName

[pswai]

The file name convention for Ember components is snake-case, however in React seems to be PascalCase. This PR adds support for ReactStyleFileName.

Problem

Let's we at the 2 major use cases of using React in Ember:

• Gaining performance boost for certain part of UI
• Migrating from Ember to React

For the first scenario, using Ember's convention makes sense because Ember and React are going to coexist. Having 2 file name conventions is confusing to developers.

However, for the second scenario, having 2 file name conventions becomes a good thing, because it shows clearly which components haven't been migrated yet. In fact, using Ember's convention for React components becomes awkward when importing components:

import React from 'npm:react';
import FancyCard from 'npm:third-party/core/FancyCard';
import TodoList from './todo-list'; // Inconsistent

Also, it is painful at the end of the project to have to rename all React components to PascalCase and update all the imports.

Proposed Solution

With support for ReactStyleFileName, users for the second scenario can write their React components this way:

import React from 'npm:react';
import FancyCard from 'npm:third-party/core/FancyCard';
import TodoList from './TodoList'; // Consistent

When the migration is done, no renaming is required since we have everything in place already. (Ok not yet, the npm: prefix can be removed with #27).

Caveat

Unfortunately we still can't use single-worded component in Handlebars:

{{!-- Doesn't work --}}
{{avatar}}

However we can use it with the react-component component:

{{!-- This works --}}
{{react-component 'avatar'}}

[pswai]

Most of the changes were caused by Prettier (apparently I missed this file last time)

[pswai]

This section is the real content addition

[alexgb]

This seems like a good explanation of why, but doesn't really make it clear what ember-cli-react is providing in terms of file name support. I think it should make it clear that 1) you can name your jsx files in PascalCase and 2) either import them in templates using standard dasherized syntax or refer to them there using PascalCase with the aid of react-component.

[alexgb]

Thanks for the detailed PR explanation. Your reasoning makes sense to me. I've left a few comments.

[alexgb]

I think we should have a test for `{{react-component "ReactStyleFileName"}} as well

[pswai]

Oh right, that's a valid test

[alexgb]

Instead of mutating parsedName can we copy it?

const parsedNameWithReactStyle = Object.assign(
  {}, 
  parsedName, 
  { fullNameWithoutType: Ember.String.classify(originalName) }
);

This should mean you can get rid of line 51.

[alexgb]

This seems like a good explanation of why, but doesn't really make it clear what ember-cli-react is providing in terms of file name support. I think it should make it clear that 1) you can name your jsx files in PascalCase and 2) either import them in templates using standard dasherized syntax or refer to them there using PascalCase with the aid of react-component.

[pswai]

@alexgb I have added a lot of tests to cover several test cases, mainly around the cases when conflict occurs.

The basis of all conflict resolution is "prefer React component over Ember component".

Scenarios:

1. Two React components: SameName.jsx vs same-name.jsx
SameName.jsx is selected

2. One React, one Ember, different casing: SameName.jsx vs same-name.js
SameName.jsx is selected

3. One React, one Ember, same casing: same-name.jsx vs same-name.js
   Broken. same-name.js is overwritten with the result of same-name.jsx transpilation. The end result is same-name.jsx being selected

Ember component can never have PascalCase file name so only 3 scenarios exist.

This behaviour was chosen to provide a simple resolution strategy for the following use cases:

{{!-- Must be React component --}}
{{react-component "user-avatar"}}

{{!-- Must be React component --}}
{{react-component "UserAvatar"}}

{{!-- Can be either Ember or React component --}}
{{user-avatar}}

{{!-- NOT OK! --}}
{{UserAvatar}}

We can try to be smart and determine the right file by the different use case above, but I think it is overly complicated and not unnecessary.

[alexgb]

Looks good, left one small comment.

I also worked on simplifying the Readme a bit, including some edits to the text here about file naming. I'll open a separate PR for these changes, perhaps as part of bringing to 1.0. cfc52a5

[alexgb]

I believe the resolve* methods on the resolver determined at runtime based on factory types. So naming a method this way also adds a new factory type of react-style-file:*. Since I don't think that's the intention here I would suggest marking as a private method _resolveReactStyleFile.

[pswai]

Ah great catch. I'll update this part :)

[alexgb]

@pswai thanks for the great PR writeup on this one