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

Add display name after create context #13501

Merged

Conversation

JLHwung
Copy link
Contributor

@JLHwung JLHwung commented Jun 22, 2021

Q                       A
Fixed Issues? Fixes #11241 (28👍)
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature? Yes
Tests Added + Pass? Yes
Documentation PR Link
Any Dependency Changes?
License MIT

The PR inserts context.displayName = "context" assignments after React.createContext() call. For common cases like variable declarations and assignment, we reuse the context binding when building assignments. Then we fallback to the sequence expression approach, where React.createContext() is transformed into (ref = React.createContext(), ref.displayName = "myContext", ref).

@babel-bot
Copy link
Collaborator

babel-bot commented Jun 22, 2021

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/47061/

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d15543e:

Sandbox Source
babel-repl-custom-plugin Configuration
babel-plugin-multi-config Configuration

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo left a comment

Choose a reason for hiding this comment

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

This should probably go in a minor?

}

return id;
Copy link
Member

Choose a reason for hiding this comment

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

Here id could be any expression. Given the function name, maybe it makes sense to return undefined if it's not an identifier?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We currently check t.isIdentifier after getDisplayNameReferenceIdentifier. I can move the check here.

Comment on lines 63 to 64
t.isIdentifier(callee.object, { name: "React" }) &&
(t.isIdentifier(callee.property, { name: "createContext" }) ||
Copy link
Member

Choose a reason for hiding this comment

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

This would also allow React[createContext].

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 22, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4c13d54:

Sandbox Source
babel-repl-custom-plugin Configuration
babel-plugin-multi-config Configuration

@existentialism existentialism added the PR: New Feature 🚀 A type of pull request used for our changelog categories label Jun 23, 2021
@JLHwung JLHwung added this to the v7.15.0 milestone Jun 23, 2021
} else if (parentPath.isAssignmentExpression()) {
// var FooContext = React.createContext()
const ref = parentPath.node.left;
parentPath.insertAfter(buildDisplayNameAssignment(ref, id));
Copy link
Contributor Author

@JLHwung JLHwung Jun 23, 2021

Choose a reason for hiding this comment

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

Inserting after an assignment expression does not preserve completion records.
e.g.

(context = React.createContext("light"))
// transformed to
(context = React.createContext("light"), context.displayName = "context")

Maybe we should only insert for variable declarations.

Copy link
Member

Choose a reason for hiding this comment

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

Inserting after a variable declaration changes the completion record too.

This is a general problem with insertAfter and it's not just in this PR. I think we should check it separately checking in insertAfter if the completion record matters (e.g. if a parent is a do expression) and injeting a temp variable similarly to what we do for insertAfter in expressions.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The current version of do expression forbids a do block ending with variable declarations: https://tc39.es/proposal-do-expressions/#sec-doexpression-static-semantics-early-errors, but we haven't implemented that in Babel parser. Guess it should be okay for variable declarations (most common cases) here?

Copy link
Member

Choose a reason for hiding this comment

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

Uh well ok then, I guess assignment expressions in this case are not common.

@nicolo-ribaudo nicolo-ribaudo added the PR: Ready to be Merged A pull request with already two approvals, but waiting for the next minor release label Jun 23, 2021
@nicolo-ribaudo nicolo-ribaudo merged commit e9bc7c1 into babel:main Aug 3, 2021
@nicolo-ribaudo nicolo-ribaudo deleted the add-display-name-after-createContext branch August 3, 2021 21:32
@csestito
Copy link

csestito commented Aug 5, 2021

Hi @JLHwung . I am having issues in a different project today and it seems related to this change. The error we are getting:

Module parse failed: Unexpected token (6:130)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/@docusaurus/core/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|  * This source code is licensed under the MIT license found in the
|  * LICENSE file in the root directory of this source tree.
>  */import React from'react';const ThemeContext=/*#__PURE__*/React.createContext(undefined);ThemeContext.displayName="ThemeContext"export default ThemeContext;
 @ ./node_modules/@docusaurus/theme-classic/lib-next/theme/hooks/useThemeContext.js 6:33-79 6:131-143
 @ ./node_modules/@docusaurus/theme-classic/lib-next/theme/Navbar/index.js
 @ ./node_modules/@docusaurus/theme-classic/lib-next/theme/Layout/index.js
 @ ./node_modules/@docusaurus/theme-classic/lib-next/theme/NotFound.js
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js

The missing ; between ThemeContext.displayName="ThemeContext" and export default ThemeContext; is causing parser errors. Is this something that needs fixed elsewhere, or should it be part of the plugin code?

Thanks!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: react outdated A closed issue/PR that is archived due to age. Recommended to make a new issue PR: New Feature 🚀 A type of pull request used for our changelog categories PR: Ready to be Merged A pull request with already two approvals, but waiting for the next minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support setting Context displayName in @babel/plugin-transform-react-display-name
5 participants