New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix missing react dependency in some addon umd builds #9919

Merged
merged 9 commits into from Jun 12, 2017

Conversation

Projects
None yet
3 participants
@flarnie
Contributor

flarnie commented Jun 11, 2017

We absolutely need a build process and tests before making any further changes to these addons.

That said, this is a quick fix to hopefully improve the situation in conjunction with the 15.6 release. We will probably continue working on fixing the add-on packages after 15.6.


The fix:

what is the change?:
Manually tweaking the UMD builds for both add-ons to include a
dependency on React.

why make this change?:
They were broken before for AMD and CommonJS.
For reasons I have not debugged, the CommonJS builds are still broken,
but the AMD is now fixed and globals still work:

    do 'react-linked-input' and
    'create-react-fragment' work?

                before      after
              + my        + my        +
  en^ironment | fix       | fix       |
+----------------------------------------
              |           |           |
  Global JS   |  :) yes   |  :) yes   |
+----------------------------------------
              |           |           |
  AMD         |  X no     |  :) yes   |
+----------------------------------------
              |           |           |
  CommonJS    |  X no     |  X no     |
+-------------+-----------+-----------+--


The process for testing the fix:

what is the change?:
Setting up the fixtures to enable manual testing of the
react-linked-input and create-fragment UMD builds.

This was a painstaking and frustrating process and we need something
better before making any more fixes to addons. Here is roughly what I
did;

  • add 'console.log' statements to the add-on to confirm that you've loaded the right build case
  • copy the add-on into 'build/packages' so that the 'webpack-alias' can find it.
  • make copies of each of the following three fixtures for each add-on you want to test, renaming them to specify what you are testing:
    • globals.js
    • requirejs.js
    • webpack-alias/*
  • modify those fixtures to use the add-on you intend to text

why make this change?:
We need to verify the current state of the bug before fixing it, to
confirm that the change actually is fixing the bug.

test plan:
open fixtures/globals-with-create-react-fragment.html
open fixtures/globals-with-react-linked-input.html
open fixtures/requirejswith-create-react-fragment.html
open fixtures/requirejswith-react-linked-input.html
cd fixtures/webpack-aliaswith-create-react-fragment/ && yarn build && open index.html
cd fixtures/webpack-aliaswith-react-linked-input/ && yarn build && open index.html

flarnie added some commits Jun 9, 2017

Test 'create-react-class' with fixtures
NOTE: Never going to merge this commit, but I may cherry-pick it onto
branches in order to test fixes for issue #9765

**what is the change?:**
Require and use the UMD bundles of 'create-react-class' in three
fixtures to test the three supported uses;
 - test Global JS with globals.html
 - test AMD with requirejs.html
 - test CommonJS with webpack-alias

**why make this change?:**
To test #9761 and other PRs fixing #9765

**test plan:**
Manual testing;
 - cd into the directory in fixtures
 - run the build step if needed
 - open the file

**issue:**
#9765
Rename fixtures testing create-react-class
**what is the change?:**
Renamed some fixtures.

**why make this change?:**
This is part of setting up manual tests of the add-ons we are fixing.

**test plan:**
`cd fixtures && node ./build-all.js` and manually open the renamed
fixtures.

**issue:**
#9765
Prettify the unminified UMD build of `react-linked-input`
**what is the change?:**
`prettier addons/react-linked-input/react-linked-input.js | pbcopy` and
replaced the contents of the file.

**why make this change?:**
I am manually tweaking this file and want it to be more readable.

**test plan:**
about to set up manual testing of this with fixtures. I expect that
right now only the use of it as a global will work, and subsequent
commits will fix the AMD and CommonJS use cases.

**issue:**
#9765
Test state of `react-linked-input` and `create-fragment` before fix
**what is the change?:**
Setting up the fixtures to enable manual testing of the
`react-linked-input` and `create-fragment` UMD builds.

This was a painstaking and frustrating process and we need something
better before making any more fixes to addons. Here is roughly what I
did;
- add 'console.log' statements to the add-on to confirm that you've loaded the right build case
- copy the add-on into 'build/packages' so that the 'webpack-alias' can find it.
- make copies of each of the following three fixtures for each add-on you want to test, renaming them to specify what you are testing:
	- globals.js
	- requirejs.js
	- webpack-alias/*
- modify those fixtures to use the add-on you intend to text

**why make this change?:**
We need to verify the current state of the bug before fixing it, to
confirm that the change actually is fixing the bug.

**test plan:**
`open fixtures/globals-with-create-react-fragment.html`
`open fixtures/globals-with-react-linked-input.html`
`open fixtures/requirejswith-create-react-fragment.html`
`open fixtures/requirejswith-react-linked-input.html`
`cd fixtures/webpack-aliaswith-create-react-fragment/ && yarn build && open index.html`
`cd fixtures/webpack-aliaswith-react-linked-input/ && yarn build && open index.html`

**issue:**
#9765
Fix missing `React` in `react-linked-input` and `create-fragment`
**what is the change?:**
Manually tweaking the UMD builds for both add-ons to include a
dependency on React.

**why make this change?:**
They were broken before for AMD and CommonJS.
For reasons I have not debugged, the CommonJS builds are still broken,
but the AMD is now fixed and globals still work:

```
    do 'react-linked-input' and
    'create-react-fragment' work?

                before      after
              + my        + my        +
  en^ironment | fix       | fix       |
+----------------------------------------
              |           |           |
  Global JS   |  :) yes   |  :) yes   |
+----------------------------------------
              |           |           |
  AMD         |  X no     |  :) yes   |
+----------------------------------------
              |           |           |
  CommonJS    |  X no     |  X no     |
+-------------+-----------+-----------+--

```

**test plan:**
In the previous commit we set up fixtures to manually test these.

**issue:**
#9765
More adjustments to enable testing with fixtures
Not worth explaining - just committing as a 'save point' while I fiddle
with the fixtures.
Remove all cruft from manually testing addons in fixtures
**what is the change?:**
We forked three of the fixtures into two variations to test two of the
react addons. We also added `console.log` statements to the addons to
verify that we were loading the right build.

This commit cleans it up by
- deleting forked fixtures
- re-adding the original fixtures
- removing `console.log` statements

**why make this change?:**
To get this branch ready for review.

**test plan:**
`cd fixtures && node ./build-all.js` and then check the updated fixtures
manually

**issue:**
#9765

@flarnie flarnie added this to the 15.6 milestone Jun 11, 2017

@flarnie flarnie requested review from bvaughn, gaearon and acdlite Jun 11, 2017

@sophiebits

Unfortunately we don't have a test suite that can run entirely against our public API. If we did, we could run all our tests against each type of build. It is probably a surmountable hurdle to make it happen though.

g.LinkedInput = f(g.React);
}
})(function(React) {

This comment has been minimized.

@sophiebits

sophiebits Jun 11, 2017

Member

nit: why is this fully expanded while the previous one is in one line? a little easier to compare them if they match style

@sophiebits

sophiebits Jun 11, 2017

Member

nit: why is this fully expanded while the previous one is in one line? a little easier to compare them if they match style

Show outdated Hide outdated fixtures/webpack/input.js
Show outdated Hide outdated addons/react-linked-input/react-linked-input.js

flarnie added some commits Jun 12, 2017

Double to single quotes in 'react-linked-input'
**what is the change?:**
`:%s /"/'/gc`

I left double quotes wrapping cases where we have single quotes in the
string.

**why make this change?:**
I ran the code for the unminified 'react-linked-input' through
'prettier' so it would be easier for me to manually fix the UMD wrapper.
And 'prettier' changed many single quotes into double quotes. @spicyj
pointed out this will be treated differently by the google closure
compiler, and may have semantic differences.

**test plan:**
It's not worth testing imo.

**issue:**
#9765

@flarnie flarnie merged commit 3c89893 into facebook:15.6-dev Jun 12, 2017

1 check passed

ci/circleci Your tests passed on CircleCI!
Details
@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Jun 12, 2017

Member

It's actually quotes vs no quotes in object keys and property accesses which makes a difference, not double vs single. (Is it difficult to un-prettier it?)

Member

sophiebits commented Jun 12, 2017

It's actually quotes vs no quotes in object keys and property accesses which makes a difference, not double vs single. (Is it difficult to un-prettier it?)

@flarnie

This comment has been minimized.

Show comment
Hide comment
@flarnie

flarnie Jun 12, 2017

Contributor

I can fix the object keys, and how would I un-prettier it? I ran it through prettier and then made changes, so reverting the whole thing would lose the changes I made by hand. And I couldn't see where to make the changes without prettifying it.

Contributor

flarnie commented Jun 12, 2017

I can fix the object keys, and how would I un-prettier it? I ran it through prettier and then made changes, so reverting the whole thing would lose the changes I made by hand. And I couldn't see where to make the changes without prettifying it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment