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

Improve parsing for JSX blocks (including inline) #396

Merged
merged 11 commits into from
Feb 12, 2019
Merged

Improve parsing for JSX blocks (including inline) #396

merged 11 commits into from
Feb 12, 2019

Conversation

johno
Copy link
Member

@johno johno commented Feb 11, 2019

JSX tag parsing was too strict for props, so it caused multiple types of JSX blocks to be missed and then escapes. Ultimately, essentially any syntax and characters can existing in a JSX prop so we just keep waiting for the matching closing curly brace.

This also adds many more complex usages of inline JSX fixtures that are being tested against.

@johno johno requested a review from wooorm February 11, 2019 23:07
@vercel
Copy link

vercel bot commented Feb 11, 2019

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

const openTag = '<[A-Za-z]*[A-Za-z0-9\\-]*' + attribute + '*\\s*\\/?>'
const closeTag = '<\\/[A-Za-z][A-Za-z0-9\\-]*\\s*>'
const openTag = '<[A-Za-z]*[A-Za-z0-9\\.\\-]*' + attribute + '*\\s*\\/?>'
const closeTag = '<\\/[A-Za-z][A-Za-z0-9\\.\\-]*\\s*>'
Copy link
Member Author

Choose a reason for hiding this comment

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

This allows for Component.Foo style components.

@@ -7,7 +7,7 @@ const attributeName = '[a-zA-Z_:][a-zA-Z0-9:._-]*'
const unquoted = '[^"\'=<>`\\u0000-\\u0020]+'
const singleQuoted = "'[^']*'"
const doubleQuoted = '"[^"]*"'
const objectProps = '{{[^}]*}}'
const jsProps = '{[^\n]*}'
Copy link
Member Author

Choose a reason for hiding this comment

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

Accept anything inside props={/* ... */} to handle everything from functions, to string interpolation, to nested objects.

Copy link
Member

@wooorm wooorm left a comment

Choose a reason for hiding this comment

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

One nit, otherwise good!

packages/remark-mdx/test/fixtures/inline-parsing.js Outdated Show resolved Hide resolved
@vercel vercel bot temporarily deployed to staging February 12, 2019 00:42 Inactive
@johno johno merged commit 8249e64 into master Feb 12, 2019
@johno johno deleted the parsing branch February 12, 2019 00:47
johno added a commit that referenced this pull request Feb 18, 2019
* Implement support for Some.Component style JSX blocks

* Add failing test for string interpolation

* Add failing test for js functions as props

* Add failing test for js functions as props with returns

* Make value parsing for JSX props more flexible

* Don't lint fixtures file

* Add nested object props fixture

* Add another fixture for randomly placed brackets

* Add link shortcut to fixture

* Remove object props since it is a subset of js props

* Update packages/remark-mdx/test/fixtures/inline-parsing.js

Co-Authored-By: johno <[email protected]>
@johno johno mentioned this pull request Mar 7, 2019
31 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants