Skip to content
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

Conversation

flarnie
Copy link
Contributor

@flarnie 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

NOTE: Never going to merge this commit, but I may cherry-pick it onto
branches in order to test fixes for issue facebook#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 facebook#9761 and other PRs fixing facebook#9765

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

**issue:**
facebook#9765
**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:**
facebook#9765
**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:**
facebook#9765
**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:**
facebook#9765
**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:**
facebook#9765
Not worth explaining - just committing as a 'save point' while I fiddle
with the 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:**
facebook#9765
@flarnie flarnie added this to the 15.6 milestone Jun 11, 2017
@flarnie flarnie force-pushed the fixMissingReactDependencyInSomeAddonUMDBuilds branch from 3eebf12 to 5f30b23 Compare June 11, 2017 00:54
Copy link
Contributor

@sophiebits sophiebits left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -1,3 +1,4 @@

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rm

var warning = require("fbjs/lib/warning");

var hasReadOnlyValue = {
button: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe you ran prettier over all of this? The quotes here changed. It is not a big deal but would be better to keep the original version in case there are slight semantic differences (closure compiler advanced probably doesn't work properly on this code anyway, but it does treat these differently).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did run it through prettier - was wary of trying to take specific parts of the changes because I might miss a closing bracket somewhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can fix the quotes at least though.

**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:**
facebook#9765
@flarnie flarnie merged commit 3c89893 into facebook:15.6-dev Jun 12, 2017
@sophiebits
Copy link
Contributor

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
Copy link
Contributor Author

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants