Pull out MDX to be opt-in #2288

hasparus · 2022-08-05T17:03:01Z

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.

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.
@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 · 2022-08-05T17:03:04Z

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 · 2022-08-05T17:03:55Z

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

…ts together

…X v2 types conflict

… broken

Please use Themed.div instead. Those two were always the same.

LekoArts · 2022-09-13T09:12:28Z

@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 · 2022-09-13T20:50:37Z

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

Should be fine now.

LekoArts · 2022-09-14T05:52:06Z

Thanks!

LekoArts · 2022-09-14T07:00:50Z

@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 · 2022-09-15T11:09:12Z

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

LekoArts · 2022-09-15T12:25:52Z

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

hasparus · 2022-09-18T17:32:25Z

@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 · 2022-09-19T13:35:15Z

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

hasparus · 2022-09-26T13:41:14Z

🚀 PR was released in v0.15.0 🚀

system-ui/theme-ui#2288 :skip

hasparus added 2 commits August 5, 2022 17:36

chore(deps): bump @mdx-js dependency to v2

45fdbd4

feat(mdx): introduce useThemedStylesWithMdx instead of MDXProvider

e095f9d

hasparus added 3 commits August 7, 2022 19:26

feat(theme-provider): stop depending on @theme-ui/mdx

dedd49a

feat(theme-ui): remove reexports from @theme-ui/mdx

8bcf74d

wip(mdx): make mdx test run in mjs

5b67351

vercel bot had a problem deploying to Preview August 7, 2022 18:50 Failure

hasparus added 18 commits August 9, 2022 13:51

refactor(mdx): split code into multiple files

a2c97d0

refactor(mdx): stop exporting wrapComponentsWithThemeStyles

b2c1b1c

feat(mdx): rename components export to defaultMdxComponents

16067b8

fix(docs): update docs to match new @theme-ui/mdx API

b129213

chore(test): use automatic runtime in jest-preprocess.js

b44a213

test(mdx): rework @theme-ui mdx tests, move integration tests and uni…

3320ffd

…ts together

chore(mdx): explicity alias MDX v2 dev deps

2cfa6d7

refactor(mdx): add a jsdoc comment to themed function

f4788ec

docs(mdx): update readme

593f42a

chore(prism): autoformat

624eb7c

chore(sidenav): lower MDX dependency to v1

dd48909

wip(docs): start importing Themed from @theme-ui/mdx

d054596

chore(gatsby-plugin-theme-ui): remove @ts-check because MDX v1 and MD…

9c390b7

…X v2 types conflict

chore(gatsby-theme-style-guide): import Themed from @theme-ui/mdx

1ebcb7a

chore(ts): add skipLibCheck: true because @types/react-color deps are…

a588ef0

… broken

chore(deps): update yarn.lock

501325f

chore(eslint): disable jsx-pascal-case rule for now

753d6b8

chore(ci): use Node 18 on GitHub Actions

3fd69e6

vercel bot had a problem deploying to Preview August 9, 2022 15:06 Failure

beerose added 3 commits August 9, 2022 19:40

chore(docs): add missing @mdx-js/mdx dependency to the docs package

9885ef1

chore(docs): import Themed from @theme-ui/mdx

38269bd

chore(gatsby-theme-style-guide): import Themed from @theme-ui/mdx

3c8d848

Fix typo

0782785

vercel bot had a problem deploying to Preview September 7, 2022 15:42 Failure

vercel bot deployed to Preview September 10, 2022 19:33 View deployment

feat(mdx): remove Themed component

6389148

Please use Themed.div instead. Those two were always the same.

hasparus force-pushed the opt-in-mdx branch from d48f566 to 6389148 Compare September 10, 2022 23:35

Merge branch 'develop' into opt-in-mdx

cd66918

vercel bot deployed to Preview September 10, 2022 23:37 View deployment

vercel bot deployed to Preview September 10, 2022 23:41 View deployment

hasparus merged commit 623ae88 into develop Sep 12, 2022

hasparus deleted the opt-in-mdx branch September 12, 2022 04:42

hasparus added the prerelease This change is available in a prerelease. label Sep 12, 2022

hasparus mentioned this pull request Sep 12, 2022

chore(deps-dev): bump @types/eslint from 7.29.0 to 8.4.6 #2314

Merged

hasparus mentioned this pull request Sep 15, 2022

0.15.0-develop release is broken #2319

Closed

hasparus mentioned this pull request Sep 18, 2022

prism: Fix crash when className prop is missing #2322

Merged

LekoArts mentioned this pull request Sep 19, 2022

MDX v2 LekoArts/gatsby-themes#989

Merged

9 tasks

hasparus mentioned this pull request Sep 20, 2022

fix: show color hex value as swatch title #2324

Merged

lachlanjc added this to the v1.0 milestone Sep 24, 2022

hasparus added released This issue/pull request has been released. and removed prerelease This change is available in a prerelease. labels Sep 26, 2022

fwextensions mentioned this pull request Sep 28, 2022

v0.15.1: Error: Can't resolve '@mdx-js/react' in gatsby plugin #2330

Closed

NickyMeuleman added a commit to NickyMeuleman/gatsby-theme-nicky-blog that referenced this pull request Oct 11, 2022

chore(:skip): theme-ui mdx changes

fe43124

system-ui/theme-ui#2288 :skip

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pull out MDX to be opt-in #2288

Pull out MDX to be opt-in #2288

hasparus commented Aug 5, 2022 •

edited

Loading

vercel bot commented Aug 5, 2022 •

edited

Loading

codesandbox-ci bot commented Aug 5, 2022 •

edited

Loading

LekoArts commented Sep 13, 2022

hasparus commented Sep 13, 2022

LekoArts commented Sep 14, 2022

LekoArts commented Sep 14, 2022

hasparus commented Sep 15, 2022

LekoArts commented Sep 15, 2022

hasparus commented Sep 18, 2022

LekoArts commented Sep 19, 2022

hasparus commented Sep 26, 2022

Pull out MDX to be opt-in #2288

Pull out MDX to be opt-in #2288

Conversation

hasparus commented Aug 5, 2022 • edited Loading

Release Notes

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

Version

Release Notes

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

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

Remove @theme-ui/editor (#2292)

Drop support for React 16 + 17 (#2215)

🚀 Enhancement

🐛 Bug Fix

👨‍💻 Minor changes

🏠 Internal

Authors: 6

vercel bot commented Aug 5, 2022 • edited Loading

codesandbox-ci bot commented Aug 5, 2022 • edited Loading

LekoArts commented Sep 13, 2022

hasparus commented Sep 13, 2022

LekoArts commented Sep 14, 2022

LekoArts commented Sep 14, 2022

hasparus commented Sep 15, 2022

LekoArts commented Sep 15, 2022

hasparus commented Sep 18, 2022

LekoArts commented Sep 19, 2022

hasparus commented Sep 26, 2022

hasparus commented Aug 5, 2022 •

edited

Loading

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

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

vercel bot commented Aug 5, 2022 •

edited

Loading

codesandbox-ci bot commented Aug 5, 2022 •

edited

Loading