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

Support custom Provider #10

Closed
wants to merge 2 commits into from
Closed

Conversation

devrsi0n
Copy link
Contributor

Add an option to support custom Provider.

@hashicorp-cla
Copy link

hashicorp-cla commented Jun 25, 2020

CLA assistant check
All committers have signed the CLA.

@jescalan
Copy link
Contributor

jescalan commented Jul 8, 2020

Hey @devrsi0n - this looks like a great addition, could you add a little more context on why this might be a helpful feature, and document it in the README as well? 🙏🏼

- `renderToString(source: string, components: object)` - This function consumes a string of mdx along with any components it utilizes in the format `{ ComponentName: ActualComponent }`. The function returns an object that is intended to be passed into `hydrate` directly.
- `hydrate(source: object, components: object, options?: object)` - This function consumes the output of `renderToString` as well as the same components argument as `renderToString`. It also can optionally be passed options which are [passed directly to mdx](https://mdxjs.com/advanced/plugins). Its result can be rendered directly into your component. This function will initially render static content, and hydrate it when the browser isn't busy with higher priority tasks.
- `renderToString(source: string, components: object, options?: object)` - This function consumes a string of mdx along with any components it utilizes in the format `{ ComponentName: ActualComponent }`. The function returns an object that is intended to be passed into `hydrate` directly. It also can optionally be passed options which are [passed directly to mdx](https://mdxjs.com/advanced/plugins), `options.remarkPlugins` for reamrk plugins, `options.rehypePlugins` for rehype plugins, and `options.Provider` for custom provider (e.g. [emotion theme provider](https://emotion.sh/docs/theming))
- `hydrate(source: object, components: object)` - This function consumes the output of `renderToString` as well as the same components argument as `renderToString`. Its result can be rendered directly into your component. This function will initially render static content, and hydrate it when the browser isn't busy with higher priority tasks.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

It seems options should place to renderToString, could you confirm that? @jescalan

Copy link
Contributor

Choose a reason for hiding this comment

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

That's correct, this was fixed upstream though, so it can be rebased out

@jescalan
Copy link
Contributor

This should be ready to go pending a rebase on upstream/master!

@ynnoj
Copy link

ynnoj commented Aug 24, 2020

@jescalan @devrsi0n Will this enable me to use local React context inside my MDX components? I'm trying to use authentication/user state from context, however they're not wrapped by the provider that wraps my application.

@jescalan
Copy link
Contributor

@ynnoj - it would allow you to pass in a provider via the options, but would not automatically inherit from any provider above in the tree. another option is to pass in data using the scope argument to renderToString

@ynnoj
Copy link

ynnoj commented Aug 24, 2020

@ynnoj - it would allow you to pass in a provider via the options, but would not automatically inherit from any provider above in the tree. another option is to pass in data using the scope argument to renderToString

Local context wouldn't be available within the getStaticProps lifecycle though, right?

@jescalan
Copy link
Contributor

@ynnoj That's correct - really the answer depends on how you're adding data to the context. I would be happy to work with you on figuring out how to solve this if you'd like, as I anticipate having the same problem myself down the line with auth/user context.

@ynnoj
Copy link

ynnoj commented Aug 25, 2020

@jescalan Sure, that would be great! The application I'm working on is open source, so you can find the repo here.

I'm using Firebase Auth, so nothing crazy. But all client side, no SSR.

https://github.com/firstmeanseverything/next/blob/db3fa7637131742517c0c8abc52abfb6201a67c7/context/auth.js#L59-L63

@molebox
Copy link

molebox commented Sep 2, 2020

Hey folks! Just stumbled across this PR and it would seem it might be an answer to a problem we are having with using mdx-embed with NEXT (via this package) Any movement on a merge?

@jescalan
Copy link
Contributor

jescalan commented Sep 2, 2020

Yes, there will be a resolution to this issue shipped this week. Likely tonight.

@jescalan
Copy link
Contributor

jescalan commented Sep 3, 2020

#35 supersedes this

@jescalan jescalan closed this Sep 3, 2020
@devrsi0n devrsi0n deleted the custom-provider branch September 4, 2020 01:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants