Pull out MDX to be opt-in

[hasparus]

Closes #2133.

This PR removes the peer dependency on @mdx-js/react from the main theme-ui package, and changes @theme-ui/mdx to work with any version of @mdx-js/react or a compatible library.

We have 2 reasons to do this.

1. Not every app using Theme UI needs MDX. Codebases I've seen quite often have a documentation website website and an actual product app in separate packages and often even in separate repositiories.
2. @mdx-js packages are now ESM-only, so Theme UI is locked on a previous major, what leads to multiple annoying problems.
   • This tweet sums up the situation pretty nicely.

Although Theme UI might eventually become ESM-only, this PR seems to me like a good move because of the first reason I mentioned.

All credits to johno for the idea.

---

What's left to do?

• Styling MDX and MDX Components need an update to reflect 0.15 migration notes.
  • https://theme-nkchu5ipf-systemui.vercel.app/migrating#v015

Release Notes

Breaking: theme-ui no longer includes @theme-ui/mdx — MDX is now opt-in.

If your project is not using MDX or importing Themed, you shouldn't need to
change anything.

• MDXProvider is no longer included in Theme UI ThemeProvider, and has been
  removed in favour of an useThemedStylesWithMdx hook.

  • Migration: Use useThemedStylesWithMdx together with MDXProvider and useMDXComponents from @mdx-js/react.

    import {
      MDXProvider,
      useMDXComponents,
      Components as MDXComponents,
      MergeComponents as MergeMDXComponents,
    } from '@mdx-js/react'
    import { useThemedStylesWithMdx } from '@theme-ui/mdx'
    import { ThemeProvider, Theme } from 'theme-ui'
    
    interface MyProviderProps {
      theme: Theme
      components?: MDXComponents | MergeMDXComponents
      children: React.ReactNode
    }
    function MyProvider({ theme, components, children }: MyProviderProps) {
      const componentsWithStyles = useThemedStylesWithMdx(useMDXComponents(components))
    
      return (
        <ThemeProvider theme={theme}>
          <MDXProvider components={componentsWithStyles}>
            {children}
          </MDXProvider>
        </ThemeProvider>
      )
    }

• Themed components dict and other exports from @theme-ui/mdx are no longer reexported from theme-ui.

  • Migration: Import it from @theme-ui/mdx instead.

    -  import { Themed } from 'theme-ui'
    +  import { Themed } from '@theme-ui/mdx'

Version

Published prerelease version: v0.15.0-develop.23

Changelog

🎉 This release contains work from new contributors! 🎉

Thanks for all your work!

❤️ Luke Watts (@thisislawatts)

❤️ Valto Savi (@pointlessrapunzel)

Release Notes

Pull out MDX to be opt-in (#2288)

Breaking: theme-ui no longer includes @theme-ui/mdx — MDX is now opt-in.

If your project is not using MDX or importing Themed, you shouldn't need to
change anything.

• MDXProvider is no longer included in Theme UI ThemeProvider, and has been
  removed in favour of an useThemedStylesWithMdx hook.

  • Migration: Use useThemedStylesWithMdx together with MDXProvider and useMDXComponents from @mdx-js/react.

    import {
      MDXProvider,
      useMDXComponents,
      Components as MDXComponents,
      MergeComponents as MergeMDXComponents,
    } from '@mdx-js/react'
    import { useThemedStylesWithMdx } from '@theme-ui/mdx'
    import { ThemeProvider, Theme } from 'theme-ui'
    
    interface MyProviderProps {
      theme: Theme
      components?: MDXComponents | MergeMDXComponents
      children: React.ReactNode
    }
    function MyProvider({ theme, components, children }: MyProviderProps) {
      const componentsWithStyles = useThemedStylesWithMdx(useMDXComponents(components))
    
      return (
        <ThemeProvider theme={theme}>
          <MDXProvider components={componentsWithStyles}>
            {children}
          </MDXProvider>
        </ThemeProvider>
      )
    }

• Themed components dict and other exports from @theme-ui/mdx are no longer reexported from theme-ui.

  • Migration: Import it from @theme-ui/mdx instead.

    -  import { Themed } from 'theme-ui'
    +  import { Themed } from '@theme-ui/mdx'

Remove @theme-ui/editor (#2292)

• Breaking: @theme-ui/editor was removed. Use CSS GUI instead.
  • /customize page in Theme UI docs has been removed. Use Components.ai Theme Builder or an alternative instead.

Drop support for React 16 + 17 (#2215)

Theme UI 0.15.0 drops support for React 16 and React 17. Your use case may still work, but we don't guarantee it.

---

🚀 Enhancement

• Pull out MDX to be opt-in #2288 (@hasparus @beerose @lachlanjc hasparus@Piotrs-MacBook.local)
• Drop support for React 16 + 17 #2215 (@hasparus)

🐛 Bug Fix

• Remove @theme-ui/editor #2292 (@hasparus)
• fix(mdx): add .sx props to Themed.X styles #2250 (@hasparus)

👨‍💻 Minor changes

• Specify MDX React version (@hasparus)

🏠 Internal

• Docs: Group project templates by framework, add Remix #2276 (@lachlanjc)
• docs: re-order sidebar components into alphabetical order #2232 (@thisislawatts)
• docs: Specify MDX React version #2233 (@pointlessrapunzel)

Authors: 6

• Aleksandra (@beerose)
• Lachlan Campbell (@lachlanjc)
• Luke Watts (@thisislawatts)
• Piotr (hasparus@Piotrs-MacBook.local)
• Piotr Monwid-Olechnowicz (@hasparus)
• Valto Savi (@pointlessrapunzel)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
theme-ui	✅ Ready (Inspect)	Visit Preview	Sep 10, 2022 at 11:41PM (UTC)

[codesandbox-ci]

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 cd66918:

Sandbox	Source
next-theme-ui-example	Configuration
gatsby-plugin-theme-ui-example	Configuration

[LekoArts]

@hasparus I want to try this out but it doesn't seem like this was published on npm? The develop alias stops at .22
https://www.npmjs.com/package/theme-ui

[hasparus]

Thanks for noticing that @LekoArts. I inadvertently broke the auto release when I migrated to PNPM in this PR.

Should be fine now.

• https://unpkg.com/theme-ui@0.15.0-develop.26/package.json
• https://www.npmjs.com/package/theme-ui/v/0.15.0-develop.26

[LekoArts]

Thanks!

[LekoArts]

@hasparus I think this was still a bad publish if you look at https://unpkg.com/browse/theme-ui@0.15.0-develop.26/dist/theme-ui.cjs.js

My unit tests + trying it out on a live site both fail with:

Error: Cannot find module '../../../node_modules/.pnpm/@preconstruct+hook@0.4.0/node_modules/@preconstruct/hook'
Require stack:
- /Users/lejoe/code/github/gatsby-themes/node_modules/theme-ui/dist/theme-ui.cjs.js

I can bring this into an issue if you want instead of commenting on this PR 😅

[hasparus]

@LekoArts I created the issue. I'm gonna go back to it on the weekend and test this version properly in my projects.

[LekoArts]

@hasparus Cool! Don't feel rushed, it's not urgent on my end :)

[hasparus]

@LekoArts I just published 0.15.0-develop.30. Didn't get the MDX functionality in my projects yet, but the preconstruct/hook error is gone.

[LekoArts]

@hasparus Thanks! Also all working fine on my end LekoArts/gatsby-themes#989

[hasparus]

🚀 PR was released in v0.15.0 🚀