Merge pull request #2432 from system-ui/deps-16

Deps bumps for 0.16.0

.codesandbox/ci.json

@@ -3,5 +3,5 @@
   "buildCommand": "build",
   "packages": ["packages/theme-ui", "packages/core"],
   "sandboxes": ["/examples/next", "/examples/gatsby-plugin"],
-  "node": "16"
+  "node": "18"
 }

.prettierignore

@@ -8,3 +8,6 @@ dist
 coverage
 examples/next/.next
 docs/src/pages/index.mdx
+
+# Prettier doesn't know how to format MDX2 and makes silly mistakes.
+*.mdx

babel.config.js

@@ -9,7 +9,13 @@ module.exports = {
         targets: '> 0.25%, not dead, not ie 11',
       },
     ],
-    '@babel/react',
+    [
+      '@babel/react',
+      {
+        runtime: 'automatic',
+        importSource: '@theme-ui/core',
+      },
+    ],
     '@babel/preset-typescript',
   ],
   env: {

examples/gatsby-plugin/package.json

@@ -12,17 +12,17 @@
     "build": "gatsby build"
   },
   "dependencies": {
-    "@emotion/react": "^11",
-    "gatsby": "^4.21.0",
-    "gatsby-plugin-mdx": "^3.7.1",
+    "@emotion/react": "^11.11.1",
+    "gatsby": "^5",
+    "gatsby-plugin-mdx": "^5",
     "gatsby-plugin-theme-ui": "workspace:^",
     "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18",
     "theme-ui": "workspace:^"
   },
   "devDependencies": {
-    "@types/react": "^18",
-    "typescript": "^4",
-    "babel-eslint": "^10"
+    "@types/react": "^18.2.12",
+    "babel-eslint": "^10",
+    "typescript": "^5"
   }
 }

examples/gatsby-plugin/src/layout.js

@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, Themed } from 'theme-ui'
+/** @jsxImportSource theme-ui */
+import { Themed } from 'theme-ui'
 
 const Layout = (props) => (
   <Themed.root>

examples/gatsby/package.json

@@ -12,21 +12,20 @@
     "build": "gatsby build"
   },
   "dependencies": {
-    "@emotion/react": "^11",
-    "gatsby": "^4.21.0",
-    "gatsby-plugin-mdx": "^4.0.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "@emotion/react": "^11.11.1",
+    "@mdx-js/react": "^2.3.0",
     "@theme-ui/mdx": "workspace:^",
-    "theme-ui": "workspace:^",
-    "@mdx-js/react": "^2",
-    "gatsby-source-filesystem": "latest"
+    "gatsby": "^5",
+    "gatsby-plugin-mdx": "^5",
+    "gatsby-source-filesystem": "latest",
+    "react": "^18.1.0",
+    "react-dom": "^18",
+    "theme-ui": "workspace:^"
   },
   "devDependencies": {
-    "@types/react": "^18",
-    "typescript": "^4",
-    "@babel/core": "^7.15.8",
+    "@types/react": "^18.2.12",
     "babel-eslint": "^10",
-    "graphql": "^15"
+    "graphql": "^15",
+    "typescript": "^5"
   }
 }

examples/next/package.json

@@ -12,20 +12,19 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@emotion/react": "^11",
-    "@mdx-js/loader": "^2.1.2",
-    "@mdx-js/react": "^2.1.2",
-    "@next/mdx": "^12.0.7",
+    "@emotion/react": "^11.11.1",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@next/mdx": "^13.4.5",
     "@theme-ui/css": "workspace:^",
-    "next": "^12.1.0",
-    "react": "^18",
+    "next": "^13.4.5",
+    "react": "^18.1.0",
     "react-dom": "^18",
     "theme-ui": "workspace:^"
   },
   "devDependencies": {
-    "typescript": "^4",
-    "@babel/core": "^7",
-    "webpack": "^4",
-    "@types/react": "^18"
+    "@types/react": "^18.2.12",
+    "typescript": "^5",
+    "webpack": "^5.86.0"
   }
 }

examples/typography/package.json

@@ -11,25 +11,24 @@
     "build": "gatsby build"
   },
   "dependencies": {
-    "@mdx-js/react": "^2.0.0",
-    "gatsby": "^4.21.0",
+    "@mdx-js/react": "^2.3.0",
+    "gatsby": "^5",
     "gatsby-plugin-google-fonts": "^1.0.0",
-    "gatsby-plugin-mdx": "^4.0.0",
-    "gatsby-source-filesystem": "^4",
+    "gatsby-plugin-mdx": "^5",
+    "gatsby-source-filesystem": "^5.10.0",
     "lodash.merge": "^4.6.1",
     "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18",
     "theme-ui": "workspace:^",
     "theme-ui-typography": "^0.1.7",
     "typography-theme-fairy-gates": "^0.16.19"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
     "@types/lodash.merge": "^4.6.7",
-    "@types/react": "^17.0.39",
+    "@types/react": "^18.2.12",
     "babel-eslint": "^10",
-    "eslint": "^8",
+    "eslint": "^8.42.0",
     "graphql": "^15",
-    "typescript": "^4"
+    "typescript": "^5"
   }
 }

jest.config.js → jest.config.ts

@@ -1,26 +1,22 @@
 // @ts-check
 
-/** @typedef {import('ts-jest/dist/types')} */
-/** @type {import('@jest/types').Config.InitialOptions} */
-const config = {
-  preset: 'ts-jest/presets/js-with-ts',
+import type { JestConfigWithTsJest } from 'ts-jest'
+
+const config: JestConfigWithTsJest = {
+  preset: 'ts-jest',
   transform: {
     '^.+.tsx?$': [
       'ts-jest',
       {
-        isolatedModules: true,
-        tsconfig: {
-          tsconfig: './tsconfig.test.json',
-          useESM: true,
-          diagnostics: {
-            exclude: ['**'],
-          },
-        },
+        tsconfig: './tsconfig.test.json',
       },
     ],
     '^.+\\.m?jsx?$': '<rootDir>/jest-preprocess.js',
   },
-  testMatch: ['**/packages/**/test/*.{js,ts,tsx,mjs}'],
+  testMatch: [
+    '**/packages/**/test/*.{js,ts,tsx,mjs}',
+    '**/packages/*/src/**/*.spec.{js,ts,tsx,mjs}',
+  ],
   testPathIgnorePatterns: [
     '/node_modules/',
     '/fixtures/',
@@ -29,6 +25,7 @@ const config = {
     'tailwind.config.js',
     '/dist/',
     '/__test-utils__/',
+    '/node_modules/(?!(@babel/runtime|gatsby))',
   ],
   coverageReporters: ['lcov', 'text', 'html'],
   coverageProvider: 'v8',