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.

Sign up for GitHub

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

Jump to bottom

Replace MDXTag with custom pragma #401

Merged
merged 13 commits into from
Feb 26, 2019
Merged

Replace MDXTag with custom pragma #401

merged 13 commits into from
Feb 26, 2019

Conversation

ChristopherBiscardi
Copy link
Member

@ChristopherBiscardi ChristopherBiscardi commented Feb 15, 2019 •
edited by johno
Loading

  • Enables simpler support for alternative UI tooling like Vue (need to write a new pragma function).
  • Removes the awkward behavior when trying to replace an element via MDXProvider (for more information, read how this currently behaves with the MDXTag in between pre and code.
  • Enable the replacement of base JSX tags as well as their markdown counterparts. In the following case, the MDXProvider component for an h2 would replace the markdown and the jsx element, whereas the current MDXTag implementation only lets us control rendering of the markdown second level heading. 
    ## some h2

<h2>some other h2</h2>

Interesting tidbits and screenshots

React Devtools will show the original tag and what was rendered instead by createElement, leading to better debugging.
image

@vercel
Copy link

vercel bot commented Feb 15, 2019

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

@vercel vercel bot temporarily deployed to staging February 15, 2019 09:31 Inactive
@johno
Copy link
Member

johno commented Feb 22, 2019

@ChristopherBiscardi do you mind temporarily including the my-site-2 workspace code? Would be cool to take this for a spin.

@vercel vercel bot temporarily deployed to staging February 23, 2019 00:07 Inactive
@ChristopherBiscardi
Copy link
Member Author

@johno done.

@vercel vercel bot temporarily deployed to staging February 23, 2019 00:10 Inactive
@vercel vercel bot temporarily deployed to staging February 26, 2019 08:05 Inactive
@vercel vercel bot temporarily deployed to staging February 26, 2019 10:46 Inactive
@ChristopherBiscardi
Copy link
Member Author

Gave names to the components that happen in the createElement call. MDXCreateElement and MDXCreateElementInner so they show up in React DevTools. Layout is swapped over to new approach as well.

image

TODO:

  • make sure wrapper is replaceable

@vercel vercel bot temporarily deployed to staging February 26, 2019 19:59 Inactive
@ChristopherBiscardi ChristopherBiscardi changed the base branch from master to v1 February 26, 2019 20:22
@johno johno changed the title [WIP] Remove MDXTag Remove MDXTag Feb 26, 2019
@johno johno changed the title Remove MDXTag Remove MDXTag in favor of custom pragma Feb 26, 2019
@johno johno changed the title Remove MDXTag in favor of custom pragma Replace MDXTag with custom pragma Feb 26, 2019
@vercel vercel bot temporarily deployed to staging February 26, 2019 21:08 Inactive
@vercel vercel bot temporarily deployed to staging February 26, 2019 21:11 Inactive
johno
johno approved these changes Feb 26, 2019
View reviewed changes
Copy link
Member

@johno johno left a comment

Choose a reason for hiding this comment

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

🔥 ❤️ 🙏

@vercel vercel bot temporarily deployed to staging February 26, 2019 21:39 Inactive
@vercel vercel bot temporarily deployed to staging February 26, 2019 22:06 Inactive
@vercel vercel bot temporarily deployed to staging February 26, 2019 22:18 Inactive
@vercel vercel bot temporarily deployed to staging February 26, 2019 22:35 Inactive
@ChristopherBiscardi
Copy link
Member Author

Looking good to me.

@johno johno merged commit af54ed8 into mdx-js:v1 Feb 26, 2019
@alexandernanberg
Copy link

@ChristopherBiscardi Will this effect how MDXProvider works? E.g. right now I'm mapping the wrapper component to React.Fragment to avoid having a wrapping div. Will that still work? I know it's undocumented but it's a really nice feature imo!

@johno
Copy link
Member

johno commented Feb 27, 2019

The wrapper will still behave as it currently does since the mapping will behave the same. It will even render out more cleanly in React devtools because it won't be shown as "MDXTag".

@alexandernanberg
Copy link

Ah gotcha, thanks!

johno pushed a commit that referenced this pull request Mar 6, 2019
@ChristopherBiscardi @johno
Replace MDXTag with custom pragma (#401)
2c971ca 
* it works

* commit to be removed: my-site-2

* remove mdxtag for layout

* [remove this] more my-site examples

* remove

* merge-conflict

* snapshots

* Remove my-site-2

* Clean up create element code

* Fix tests

* Fix props handling, remove mdx pragma from JSX output

* Update pragma implementation in loader and parcel plugin

* Update runtime to properly provide components for mdx pragma
johno added a commit that referenced this pull request Mar 6, 2019
@johno
Use remark-mdx in core as a syntactic extension to remark (#439)
3a6e435 
* 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

* Begin implementing core remark-mdx usage

* Replace MDXTag with custom pragma (#401)

* it works

* commit to be removed: my-site-2

* remove mdxtag for layout

* [remove this] more my-site examples

* remove

* merge-conflict

* snapshots

* Remove my-site-2

* Clean up create element code

* Fix tests

* Fix props handling, remove mdx pragma from JSX output

* Update pragma implementation in loader and parcel plugin

* Update runtime to properly provide components for mdx pragma

* Allow for merging of components passed to context with a function (#411)

If a function is passed to the theme provider it is invoked
with the out context's components. This allows users to opt
in to merging those components.

Related #410

* feat: Convert withMDXComponents to use hooks (#417)

* Continue working on integrating remark-mdx

* Ensure proper remark-mdx is used for workspaces
johno pushed a commit that referenced this pull request Mar 6, 2019
@ChristopherBiscardi @johno
Replace MDXTag with custom pragma (#401)
c68db51 
* it works

* commit to be removed: my-site-2

* remove mdxtag for layout

* [remove this] more my-site examples

* remove

* merge-conflict

* snapshots

* Remove my-site-2

* Clean up create element code

* Fix tests

* Fix props handling, remove mdx pragma from JSX output

* Update pragma implementation in loader and parcel plugin

* Update runtime to properly provide components for mdx pragma
johno added a commit that referenced this pull request Mar 6, 2019
@johno
Use remark-mdx in core as a syntactic extension to remark (#439)
c241279 
* 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

* Begin implementing core remark-mdx usage

* Replace MDXTag with custom pragma (#401)

* it works

* commit to be removed: my-site-2

* remove mdxtag for layout

* [remove this] more my-site examples

* remove

* merge-conflict

* snapshots

* Remove my-site-2

* Clean up create element code

* Fix tests

* Fix props handling, remove mdx pragma from JSX output

* Update pragma implementation in loader and parcel plugin

* Update runtime to properly provide components for mdx pragma

* Allow for merging of components passed to context with a function (#411)

If a function is passed to the theme provider it is invoked
with the out context's components. This allows users to opt
in to merging those components.

Related #410

* feat: Convert withMDXComponents to use hooks (#417)

* Continue working on integrating remark-mdx

* Ensure proper remark-mdx is used for workspaces
@johno johno mentioned this pull request Mar 7, 2019
Merged
31 tasks
@ChristopherBiscardi ChristopherBiscardi mentioned this pull request Mar 26, 2019
Merged
johno added a commit that referenced this pull request Apr 4, 2019
@johno
✨V1 (#451)
7e291cd 
* Replace MDXTag with custom pragma (#401)

* it works

* commit to be removed: my-site-2

* remove mdxtag for layout

* [remove this] more my-site examples

* remove

* merge-conflict

* snapshots

* Remove my-site-2

* Clean up create element code

* Fix tests

* Fix props handling, remove mdx pragma from JSX output

* Update pragma implementation in loader and parcel plugin

* Update runtime to properly provide components for mdx pragma

* Allow for merging of components passed to context with a function (#411)

If a function is passed to the theme provider it is invoked
with the out context's components. This allows users to opt
in to merging those components.

Related #410

* feat: Convert withMDXComponents to use hooks (#417)

* Update tests after rebase

* Use remark-mdx in core as a syntactic extension to remark (#439)

* 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

* Begin implementing core remark-mdx usage

* Replace MDXTag with custom pragma (#401)

* it works

* commit to be removed: my-site-2

* remove mdxtag for layout

* [remove this] more my-site examples

* remove

* merge-conflict

* snapshots

* Remove my-site-2

* Clean up create element code

* Fix tests

* Fix props handling, remove mdx pragma from JSX output

* Update pragma implementation in loader and parcel plugin

* Update runtime to properly provide components for mdx pragma

* Allow for merging of components passed to context with a function (#411)

If a function is passed to the theme provider it is invoked
with the out context's components. This allows users to opt
in to merging those components.

Related #410

* feat: Convert withMDXComponents to use hooks (#417)

* Continue working on integrating remark-mdx

* Ensure proper remark-mdx is used for workspaces

* Add next publish script

* v1.0.0-alpha.0

* Add useMDXComponents hook (#440)

* Add useMDXComponents hook

* Update snapshot

* Automatically merge outer context for components in the provider (#441)

* Automatically merge outer context for components in the provider

Closes #410

* Fix failing test

* Improve test name

* Convert MDXContent to a function component (#427)

* Convert MDXContent to a function component

* Move Layout definition outside of component

* Rename Layout to MDXLayout and don't initialize it if layout is not set

* Fix snapshot

* Fix rebase

* Add more involved usage docs

* Add nav for api doc

* Move API docs to main advanced page

* v1.0.0-alpha.1

* Fix inline comments (#456)

Closes GH-450.

* [WIP] Implement basic Vue support (#455)

Implement basic Vue support

* Ignore imports used in exports when parsing (#461)

* v1.0.0-alpha.6

* Update docs/advanced/index.md

Co-Authored-By: johno <[email protected]>

* Use mdxType as prop name (#462)

In some cases it might be desired to access
the type prop. This namespaces it with mdx
to become mdxType. This shouldn't clash with
most components and allows wrapper to more
easily inspect its children's type like you
would with most React elements.

* v1.0.0-alpha.7

* Mdx wrapper guide (#467)

* Begin wrapper guides

* Finish spiking out first pass of wrapper guide

* Rename mdPlugins/hastPlugins to remarkPlugins/rehypePlugins (#468)

Closes #465

* Remove trailing space from prop-less JSX tags (#477)

* wrapper replacement (#479)

* Fix remark-mdx readme title (#481)

* v1.0.0-alpha.8

* Change wrapper default element to React.Fragment (#470)

* Change wrapper default element to React.Fragment

* Add test

* Fix snapshot

* v1.0.0-alpha.9

* Raw nodes should always be of type jsx (#484)

* pass filename to babel transform if present (#485)

* Fix test suite

* v1.0.0-alpha.10

* Add wrapExport option for wrapping exported fn (#475)

* v1.0.0-alpha.11

* Pull in proper remark-mdx version

* Rename tag package to react, move create-element to new package (#487)

* Update docs for new react package name (#490)

* v1.0.0-alpha.12

* v1.0.0-alpha.13

* Add remove exports plugin (#488)

* v1.0.0-alpha.14

* Fix missing loader dep (#491)

* v1.0.0-alpha.15

* Fix missing 'create-element' file (#493)

* v1.0.0-alpha.16

* Export mdx from main @mdx-js/react module (#495)

* v1.0.0-alpha.17

* Move to babel v7 (#494)

* Move to babel v7

* Add microbundle

* V1 docs update (#498)

* Add basic gatsby setup for docs

* Remove x0 from root package

* Add Head component

* Update to latest rebass

* Add docs layout component

* Reorganize UI components in docs

* Remove _app.js component from docs

* Add basic styles, header, and pagination to docs

* Add basic responsive menu styles to docs

* Adjust styles in docs

* Adjust getting started page

* Update now config for new docs setup

* Move to babel v7 (#494)

* Move to babel v7

* Add microbundle

* Fix loader test

* Update live editor for v1, make docs a workspace

* Refactor docs header and fix code editor styles

* Use scoped styles in docs sidebar and pagination

* Adjust edit link url

* Add basic gatsby setup for docs

* Remove x0 from root package

* Add Head component

* Update to latest rebass

* Add docs layout component

* Reorganize UI components in docs

* Remove _app.js component from docs

* Add basic styles, header, and pagination to docs

* Add basic responsive menu styles to docs

* Adjust styles in docs

* Adjust getting started page

* Update now config for new docs setup

* Fix loader test

* Update live editor for v1, make docs a workspace

* Refactor docs header and fix code editor styles

* Use scoped styles in docs sidebar and pagination

* Adjust edit link url

* Fix eslint ignore config

* Implement banner, add migration guide
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@johno johno johno approved these changes

Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@ChristopherBiscardi @johno @alexandernanberg