feat(examples/next): Add new deps, fully use TSX, rebuild #2068

lachlanjc · 2022-01-08T23:10:31Z

Rebuilt the Next.js example with a better TypeScript setup, including all the pages, & the required definition file for MDX. Since Emotion 11, SSR Just Works™️ with Next.js, so we don't need a .babelrc (which would also slow down Next.js by preventing the use of SWR, see https://nextjs.org/docs/messages/swc-disabled). The example now has clearer, more easily delete-able example files for using the JSX pragma, MDX, & @theme-ui/components.

Closes #992

📦 Published PR as canary version: 0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/color@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/components@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/core@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/css@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/custom-properties@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/editor@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install gatsby-plugin-theme-ui@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install gatsby-theme-style-guide@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install gatsby-theme-ui-layout@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/match-media@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/mdx@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/parse-props@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-base@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-bootstrap@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-bulma@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-dark@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-deep@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-funk@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-future@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-polaris@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-roboto@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-sketchy@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-swiss@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-system@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-tailwind@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/preset-tosh@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/presets@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/prism@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/sidenav@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/style-guide@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/tailwind@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/theme-provider@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install theme-ui@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
npm install @theme-ui/typography@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
# or 
yarn add @theme-ui/color-modes@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/color@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/components@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/core@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/css@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/custom-properties@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/editor@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add gatsby-plugin-theme-ui@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add gatsby-theme-style-guide@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add gatsby-theme-ui-layout@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/match-media@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/mdx@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/parse-props@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-base@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-bootstrap@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-bulma@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-dark@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-deep@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-funk@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-future@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-polaris@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-roboto@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-sketchy@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-swiss@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-system@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-tailwind@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/preset-tosh@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/presets@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/prism@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/sidenav@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/style-guide@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/tailwind@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/theme-provider@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add theme-ui@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0
yarn add @theme-ui/typography@0.13.2--canary.2068.3a5e2f116604255e6a5ed7a42571fce8d4c77983.0

Version

Published prerelease version: v0.14.0-develop.0

Changelog

🚀 Enhancement

feat(examples/next): Add new deps, fully use TSX, rebuild #2068 (@lachlanjc)

Authors: 1

Lachlan Campbell (@lachlanjc)

vercel · 2022-01-08T23:10:34Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/Hkdv5meSk1G998nkuhWNEZZCpPgC
✅ Preview: https://theme-ui-git-lachlanjc-next-tsx-systemui.vercel.app

hasparus · 2022-01-10T16:15:31Z

love it

hasparus · 2022-03-21T12:54:54Z

🚀 PR was released in v0.14.0 🚀

chore(examples/next): Add new deps, fully use TSX, rebuild

43f9d9a

lachlanjc requested a review from hasparus January 8, 2022 23:10

hasparus approved these changes Jan 10, 2022

View reviewed changes

hasparus merged commit e18d466 into develop Jan 10, 2022

hasparus deleted the lachlanjc-next-tsx branch January 10, 2022 16:15

hasparus added the prerelease This change is available in a prerelease. label Jan 10, 2022

This was referenced Jan 10, 2022

chore(docs): Fix description of Progress component #2069

Merged

chore(deps): bump shelljs from 0.8.4 to 0.8.5 #2078

Merged

fix(docs): Update recommendations in Keyframes doc #2079

Merged

This was referenced Jan 29, 2022

feat(color-modes): Warn when theme color keys have leading/trailing whitespace #2099

Merged

feat(custom-properties): Warn in development on invalid theme keys #2080

Merged

feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082

Merged

This was referenced Feb 13, 2022

chore(deps): bump follow-redirects from 1.14.7 to 1.14.8 #2132

Merged

fix(style-guide): use inherited fontSize for ColorPalette color labels #2135

Merged

This was referenced Feb 20, 2022

chore(deps): bump next from 12.0.9 to 12.1.0 in /examples/next #2136

Merged

fix(gatsby-plugin-theme-ui,docs): Dependency Updates #2138

Merged

chore(deps): bump prismjs from 1.26.0 to 1.27.0 #2141

Merged

This was referenced Mar 1, 2022

chore(deps): bump @emotion/styled from 11.6.0 to 11.8.1 #2155

Merged

chore(deps-dev): bump @babel/register from 7.16.0 to 7.17.0 #2152

Merged

This was referenced Mar 16, 2022

chore(deps): bump lodash-es from 4.17.15 to 4.17.21 #2167

Merged

fix(docs): make layout more consistent #2168

Merged

fix(color-modes): properly use print mode even if its name is initialColorModeName #2090

Merged

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(examples/next): Add new deps, fully use TSX, rebuild #2068

feat(examples/next): Add new deps, fully use TSX, rebuild #2068

lachlanjc commented Jan 8, 2022 •

edited by hasparus

Loading

vercel bot commented Jan 8, 2022

hasparus commented Jan 10, 2022

hasparus commented Mar 21, 2022

feat(examples/next): Add new deps, fully use TSX, rebuild #2068

feat(examples/next): Add new deps, fully use TSX, rebuild #2068

Conversation

lachlanjc commented Jan 8, 2022 • edited by hasparus Loading

Version

🚀 Enhancement

Authors: 1

vercel bot commented Jan 8, 2022

hasparus commented Jan 10, 2022

hasparus commented Mar 21, 2022

lachlanjc commented Jan 8, 2022 •

edited by hasparus

Loading