Skip to content

Commit a4c1026

Browse files
harish-sethuramanharish-sethuraman
committed
feat: react 19 ftw
1 parent 69edd84 commit a4c1026

File tree

9 files changed

+2623
-1374
lines changed

9 files changed

+2623
-1374
lines changed

‎next-env.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
/// <reference types="next/image-types/global" />
33

44
// NOTE: This file should not be edited
5-
// see https://nextjs.org/docs/basic-features/typescript for more information.
5+
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

‎package.json‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,36 +33,38 @@
3333
"date-fns": "^2.16.1",
3434
"debounce": "^1.2.1",
3535
"github-slugger": "^1.3.0",
36-
"next": "^13.4.1",
36+
"next": "15.0.4",
3737
"next-remote-watch": "^1.0.0",
3838
"parse-numeric-range": "^1.2.0",
39-
"react": "^0.0.0-experimental-16d053d59-20230506",
39+
"react": "19.0.0",
4040
"react-collapsed": "4.0.4",
41-
"react-dom": "^0.0.0-experimental-16d053d59-20230506",
42-
"remark-frontmatter": "^4.0.1",
43-
"remark-gfm": "^3.0.1"
41+
"react-dom": "19.0.0",
42+
"rehype-external-links": "^3.0.0",
43+
"rehype-unwrap-images": "^1.0.0",
44+
"remark-frontmatter": "^5.0.0",
45+
"remark-gfm": "^4.0.0"
4446
},
4547
"devDependencies": {
4648
"@babel/core": "^7.12.9",
4749
"@babel/plugin-transform-modules-commonjs": "^7.18.6",
48-
"@babel/preset-react": "^7.18.6",
49-
"@mdx-js/mdx": "^2.1.3",
50+
"@babel/preset-react": "^7.26.3",
51+
"@mdx-js/mdx": "^3.1.0",
5052
"@types/body-scroll-lock": "^2.6.1",
5153
"@types/classnames": "^2.2.10",
5254
"@types/debounce": "^1.2.1",
5355
"@types/github-slugger": "^1.3.0",
5456
"@types/mdx-js__react": "^1.5.2",
5557
"@types/node": "^14.6.4",
5658
"@types/parse-numeric-range": "^0.0.1",
57-
"@types/react": "^18.0.9",
58-
"@types/react-dom": "^18.0.5",
59+
"@types/react": "19.0.0",
60+
"@types/react-dom": "19.0.0",
5961
"@typescript-eslint/eslint-plugin": "^5.36.2",
6062
"@typescript-eslint/parser": "^5.36.2",
6163
"asyncro": "^3.0.0",
6264
"autoprefixer": "^10.4.2",
6365
"babel-eslint": "10.x",
6466
"eslint": "7.x",
65-
"eslint-config-next": "12.0.3",
67+
"eslint-config-next": "15.0.4",
6668
"eslint-config-react-app": "^5.2.1",
6769
"eslint-plugin-flowtype": "4.x",
6870
"eslint-plugin-import": "2.x",
@@ -84,12 +86,12 @@
8486
"postcss-preset-env": "^6.7.0",
8587
"prettier": "^2.5.1",
8688
"reading-time": "^1.2.0",
87-
"remark": "^12.0.1",
88-
"remark-external-links": "^7.0.0",
89-
"remark-html": "^12.0.0",
90-
"remark-images": "^2.0.0",
91-
"remark-slug": "^7.0.0",
92-
"remark-unwrap-images": "^2.0.0",
89+
"remark": "^15.0.1",
90+
"remark-external-links": "^10.0.0",
91+
"remark-html": "^16.0.1",
92+
"remark-images": "^4.1.0",
93+
"remark-slug": "^8.0.0",
94+
"remark-unwrap-images": "^5.0.0",
9395
"retext": "^7.0.1",
9496
"retext-smartypants": "^4.0.0",
9597
"rss": "^1.2.2",
@@ -109,5 +111,9 @@
109111
"lint-staged": {
110112
"*.{js,ts,jsx,tsx,css}": "yarn prettier",
111113
"src/**/*.md": "yarn fix-headings"
114+
},
115+
"resolutions": {
116+
"@types/react": "19.0.0",
117+
"@types/react-dom": "19.0.0"
112118
}
113119
}

‎plugins/markdownToHtml.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
const remark = require('remark');
2-
const externalLinks = require('remark-external-links'); // Add _target and rel to external links
3-
const customHeaders = require('./remark-header-custom-ids'); // Custom header id's for i18n
4-
const images = require('remark-images'); // Improved image syntax
5-
const unrwapImages = require('remark-unwrap-images'); // Removes <p> wrapper around images
6-
const smartyPants = require('./remark-smartypants'); // Cleans up typography
7-
const html = require('remark-html');
1+
const remark = import('remark');
2+
const externalLinks = import('rehype-external-links'); // Add _target and rel to external links
3+
const customHeaders = import('./remark-header-custom-ids'); // Custom header id's for i18n
4+
const images = import('remark-images'); // Improved image syntax
5+
const unrwapImages = import('rehype-unwrap-images'); // Removes <p> wrapper around images
6+
const smartyPants = import('./remark-smartypants'); // Cleans up typography
7+
const html = import('remark-html');
88

99
module.exports = {
1010
remarkPlugins: [

‎src/components/MDX/InlineCode.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
*/
44

55
import cn from 'classnames';
6+
import {JSX} from 'react';
67

78
interface InlineCodeProps {
89
isLink?: boolean;

‎src/components/MDX/MDXComponents.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Copyright (c) Facebook, Inc. and its affiliates.
33
*/
44

5-
import {Children, useContext, useMemo} from 'react';
5+
import {Children, JSX, useContext, useMemo} from 'react';
66
import * as React from 'react';
77
import cn from 'classnames';
88

‎src/pages/[[...markdownPath]].js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,12 +89,15 @@ function reviveNodeOnClient(key, val) {
8989
type = Fragment;
9090
}
9191
return {
92-
$$typeof: Symbol.for('react.element'),
92+
$$typeof: Symbol.for('react.transitional.element'),
9393
type: type,
9494
key: key,
9595
ref: null,
9696
props: props,
9797
_owner: null,
98+
_store: {
99+
validate: false,
100+
},
98101
};
99102
} else {
100103
return val;

‎src/pages/errors/[errorCode].tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ function reviveNodeOnClient(key: unknown, val: any) {
7171
type = Fragment;
7272
}
7373
return {
74-
$$typeof: Symbol.for('react.element'),
74+
$$typeof: Symbol.for('react.transitional.element'),
7575
type: type,
7676
key: key,
7777
ref: null,

‎src/utils/compileMDX.ts‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {MDXComponents} from 'components/MDX/MDXComponents';
33

44
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
55
// ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
6-
const DISK_CACHE_BREAKER = 9;
6+
const DISK_CACHE_BREAKER = 11;
77
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
88

99
export default async function compileMDX(
@@ -36,13 +36,13 @@ export default async function compileMDX(
3636
lockfile: fs.readFileSync(process.cwd() + '/yarn.lock', 'utf8'),
3737
})
3838
);
39-
const cached = await store.get(hash);
40-
if (cached) {
41-
console.log(
42-
'Reading compiled MDX for /' + path + ' from ./node_modules/.cache/'
43-
);
44-
return cached;
45-
}
39+
// const cached = await store.get(hash);
40+
// if (cached) {
41+
// console.log(
42+
// 'Reading compiled MDX for /' + path + ' from ./node_modules/.cache/'
43+
// );
44+
// return cached;
45+
// }
4646
if (process.env.NODE_ENV === 'production') {
4747
console.log(
4848
'Cache miss for MDX for /' + path + ' from ./node_modules/.cache/'
@@ -60,13 +60,15 @@ export default async function compileMDX(
6060
.join('\n');
6161

6262
// Turn the MDX we just read into some JS we can execute.
63-
const {remarkPlugins} = require('../../plugins/markdownToHtml');
63+
// const {remarkPlugins} = require('../../plugins/markdownToHtml');
6464
const {compile: compileMdx} = await import('@mdx-js/mdx');
6565
const visit = (await import('unist-util-visit')).default;
6666
const jsxCode = await compileMdx(mdxWithFakeImports, {
6767
remarkPlugins: [
68-
...remarkPlugins,
69-
(await import('remark-gfm')).default,
68+
// ...remarkPlugins,
69+
(
70+
await import('remark-gfm')
71+
).default,
7072
(await import('remark-frontmatter')).default,
7173
],
7274
rehypePlugins: [
@@ -144,7 +146,10 @@ export default async function compileMDX(
144146

145147
// Serialize a server React tree node to JSON.
146148
function stringifyNodeOnServer(key: unknown, val: any) {
147-
if (val != null && val.$$typeof === Symbol.for('react.element')) {
149+
if (
150+
val != null &&
151+
val.$$typeof === Symbol.for('react.transitional.element')
152+
) {
148153
// Remove fake MDX props.
149154
// eslint-disable-next-line @typescript-eslint/no-unused-vars
150155
const {mdxType, originalType, parentName, ...cleanProps} = val.props;

0 commit comments

Comments
 (0)