"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", em: "em", h2: "h2", h3: "h3", h5: "h5", p: "p", pre: "pre", strong: "strong", ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "MDX helped popularize placing components in context and using\nthem it to control the presentation of child components. At the time,\nit seemed like a need unique MDX. It made sense to declare\nyour component mapping for Markdown elements in one place\n(your layout) so that all MDX documents will know what component\nto render." }), "\n", _jsxs(_components.p, { children: ["Then, we began to see more potential usages for libraries like\n", _jsx(_components.a, { href: "https://theme-ui.com", children: "Theme UI" }), " and ", _jsx(_components.a, { href: "https://mdx-blocks.com", children: "Blocks" }), ".\nNow it's a UI pattern so it's time to coin it."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "When you encounter an h1 in MDX, render MyH1 instead." }), "\n"] }), "\n", _jsx(_components.p, { children: "This avoids needing to use global, or scoped, CSS styles to\ntarget MDX documents and even allows users to layer in more\ncomplex components like a REPL." }), "\n", _jsx(_components.p, { children: "This is Presentational Context." }), "\n", _jsx(_components.h2, { id: "why", children: _jsx(_components.a, { href: "#why", children: "Why?" }) }), "\n", _jsxs(_components.p, { children: ["The Presentational Context approach is powerful because ", _jsx(_components.strong, { children: "it allows\nparent context to control rendering at any level of its tree" }), "."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "Cascading DOM with React Context" }), "\n", _jsxs(_components.p, { children: ["— ", _jsx(_components.a, { href: "https://mobile.twitter.com/markdalgleish/status/1148695292381806592", children: "🔥🌶 Spicy Mark Dalgleish meme" })] }), "\n"] }), "\n", _jsx(_components.p, { children: "It's akin to the following CSS (contextual styling):" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: ".header h1 {\n color: rebeccapurple;\n}\n" }) }), "\n", _jsx(_components.p, { children: "But it's a bit more nuanced." }), "\n", _jsxs(_components.p, { children: ["With context you control more than the styling. You control the\nDOM output, you control its functionality. This allows you to layer\nin interactivity. It even allows you to swap out ", _jsx(_components.code, { children: "h1" }), "s for ", _jsx(_components.code, { children: "h2" }), "s in\nnested documents to ensure proper semantic markup hierarchies."] }), "\n", _jsx(_components.h2, { id: "composition", children: _jsx(_components.a, { href: "#composition", children: "Composition" }) }), "\n", _jsx(_components.p, { children: "An added benefit of this approach is that you can compose\nyour presentational components throughout a single tree." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// src/pages/some-page.js\n// ...\nexport default () => (\n \n \n \n \n \n \n \n)\n" }) }), "\n", _jsx(_components.p, { children: "This is the cascade that Mark Dalgleish is referring to. This allows\nyou to target the presentation of components at the document level\nby composing providers and documents together." }), "\n", _jsx(_components.h3, { id: "opting-out", children: _jsx(_components.a, { href: "#opting-out", children: "Opting out" }) }), "\n", _jsxs(_components.p, { children: ["Adopting a pattern found in ", _jsx(_components.a, { href: "https://styled-components.com", children: "styled-components" }), "\nand ", _jsx(_components.a, { href: "https://emotion.sh", children: "emotion" }), " you can allow for a function to be passed\nto the provider. It will receive the outer context's components which can\nbe used to customize the merge and even drop the outer components entirely."] }), "\n", _jsx(_components.h5, { id: "merging-in-an-h1-from-outer-context", children: _jsxs(_components.a, { href: "#merging-in-an-h1-from-outer-context", children: ["Merging in an ", _jsx(_components.code, { children: "h1" }), " from outer context:"] }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// src/pages/some-page.js\n// ...\nexport default () => (\n \n \n { ...faqComponents, h1}}>\n \n \n \n)\n" }) }), "\n", _jsx(_components.h5, { id: "dropping-all-outer-context-components", children: _jsx(_components.a, { href: "#dropping-all-outer-context-components", children: "Dropping all outer context components" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// src/pages/some-page.js\n// ...\nexport default () => (\n \n \n { ...faqComponents, h1}}>\n \n \n \n)\n" }) }), "\n", _jsx(_components.p, { children: "This provides a lot of control for users by leveraging composition\nwithout a lot of cognitive overhead." }), "\n", _jsx(_components.h2, { id: "how-does-it-work", children: _jsx(_components.a, { href: "#how-does-it-work", children: "How does it work?" }) }), "\n", _jsxs(_components.p, { children: ["For this example, let's dive into how the\n", _jsx(_components.a, { href: "https://mdxjs.com/getting-started#mdxprovider", children: "MDXProvider" }), "\nworks. MDXProvider is essentially\n", _jsx(_components.a, { href: "https://reactjs.org/docs/context.html", children: "vanilla React context" }), "."] }), "\n", _jsx(_components.p, { children: "It receives an object of components that might look like:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "{\n h1: props =>

,\n blockquote: BlockQuote,\n code: PrismCodeBlock\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["It then merges that object with any outer context components\nand adds that entire object to context. Below is ", _jsx(_components.em, { children: "nearly" }), " the\nentirety for the official MDXProvider's implementation:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React from 'react'\n\nconst MDXContext = React.createContext({})\n\nexport const withMDXComponents = Component => props => {\n const allComponents = useMDXComponents(props.components)\n\n return \n}\n\nexport const useMDXComponents = (components = {}) => {\n const contextComponents = React.useContext(MDXContext)\n\n return { ...contextComponents, ...components }\n}\n\nexport const MDXProvider = props => {\n const allComponents = useMDXComponents(props.components)\n\n return (\n \n {props.children}\n \n )\n}\n\nexport default MDXContext\n" }) }), "\n", _jsxs(_components.p, { children: ["Thanks to React hooks, any other component can now pull\nin these components with ", _jsx(_components.code, { children: "const components = useMDXComponents()" }), ".\nPretty rad."] }), "\n", _jsx(_components.h3, { id: "rendering-with-context", children: _jsx(_components.a, { href: "#rendering-with-context", children: "Rendering with context" }) }), "\n", _jsxs(_components.p, { children: ["The render step of MDX is a bit more complex because it uses\na ", _jsx(_components.a, { href: "https://mdxjs.com/blog/custom-pragma/", children: "custom pragma" }), ", but in\nessence it works by tapping into context when an h1 is encountered\nand renders the h1 component if it exists."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// src/components/renderer.js\nexport default ({ tagName, ...props }) => {\n const components = useMDXComponents()\n const component = components[tagName] || tagName\n\n return React.createElement(component, props)\n}\n" }) }), "\n", _jsx(_components.p, { children: "Using the component:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "Hello, world!\n" }) }), "\n", _jsx(_components.h2, { id: "does-it-scale", children: _jsx(_components.a, { href: "#does-it-scale", children: "Does it scale?" }) }), "\n", _jsxs(_components.p, { children: ["So far we have found that it does, and have yet to see evidence to the\ncontrary. In some circumstances it can result in smaller SSR-ed documents\nbecause ", _jsx(_components.strong, { children: "prism output can sometimes 10x DOM output when rendered to markup" }), ".\nGranted, a smaller DOM output is most beneficial after rehydration, but\nthat's a fine tradeoff for content-heavy sites with multi-page visits."] }), "\n", _jsx(_components.h2, { id: "the-future", children: _jsx(_components.a, { href: "#the-future", children: "The future" }) }), "\n", _jsx(_components.p, { children: "A valid drawback of this approach is the fact that sometime computation\nheavy components are brought into the runtime (like syntax highlighting)\nwhich can add bloat to the page." }), "\n", _jsxs(_components.p, { children: ["However, that's something we can address more intelligently at build time.\nThis isn't yet something supported by any frameworks (that I know of), but\nduring the SSR step we could perform static analysis on MDX syntax, like a\ncode block that can either be syntax highlighted ", _jsx(_components.em, { children: "or" }), " a REPL, and render\ndifferent components."] }), "\n", _jsx(_components.h3, { id: "bundle-splitting-shortcodes", children: _jsx(_components.a, { href: "#bundle-splitting-shortcodes", children: "Bundle splitting shortcodes" }) }), "\n", _jsxs(_components.p, { children: ["Current implementations bundle all components passed to the MDXProvider which\ncan include ", _jsx(_components.a, { href: "https://mdxjs.com/blog/shortcodes/", children: "shortcodes" }), ". We can take the\nstatic analysis even farther by determining which components are used in which\ndocument, and only bundle those for a particular page."] }), "\n", _jsx(_components.h2, { id: "conclusion", children: _jsx(_components.a, { href: "#conclusion", children: "Conclusion" }) }), "\n", _jsxs(_components.p, { children: ["Using context to handle presentational components can be a powerful pattern.\nIt's something I've found to be more idiomatic React for MDX's use case and\nit feels pretty nice in ", _jsx(_components.a, { href: "https://theme-ui.com", children: "Theme UI" }), " as well."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };