From d7a9fb6a8c40f7f13ed42850d620194892e31de4 Mon Sep 17 00:00:00 2001 From: Suyono Date: Fri, 10 May 2024 11:43:51 +1000 Subject: [PATCH] managed to convert back to typescript by updating @types/react and @types/react-dom using specific version --- app/mark/page.jsx | 37 ------------------------------------- app/mark/page.tsx | 27 +++++++++++++++++++++++++++ package.json | 4 ++-- pnpm-lock.yaml | 28 +++++++++++----------------- 4 files changed, 40 insertions(+), 56 deletions(-) delete mode 100644 app/mark/page.jsx create mode 100644 app/mark/page.tsx diff --git a/app/mark/page.jsx b/app/mark/page.jsx deleted file mode 100644 index 716d9f9..0000000 --- a/app/mark/page.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import { unified } from 'unified'; -import remarkGfm from "remark-gfm"; -import remarkParse from "remark-parse"; -import remarkRehype from "remark-rehype"; -import rehypeSanitize from "rehype-sanitize"; -import rehypeHighlight from "rehype-highlight"; -import rehypeReact from "rehype-react"; -import * as prod from 'react/jsx-runtime'; - -import { readFile } from 'node:fs/promises'; - -async function markPostString() { - let path = "" - if ('DUMMY_HTML_DIR' in process.env && typeof process.env.DUMMY_HTML_DIR === "string") { - path = process.env.DUMMY_HTML_DIR + "test1.md"; - } - return await readFile(path, "utf-8") -} - - -export default async function Mark() { - let content = await markPostString(); - let result = unified() - .use(remarkParse) - .use(remarkGfm) - .use(remarkRehype) - .use(rehypeSanitize) - .use(rehypeHighlight) - .use(rehypeReact, { - Fragment: prod.Fragment, - jsx: prod.jsx, - jsxs: prod.jsxs, - }) - .processSync(content) - - return result.result; -} \ No newline at end of file diff --git a/app/mark/page.tsx b/app/mark/page.tsx new file mode 100644 index 0000000..bd97740 --- /dev/null +++ b/app/mark/page.tsx @@ -0,0 +1,27 @@ +import { unified } from 'unified'; +import remarkGfm from 'remark-gfm'; +import remarkParse from 'remark-parse'; +import remarkRehype from 'remark-rehype'; +import rehypeSanitize from 'rehype-sanitize'; +import rehypeHighlight from 'rehype-highlight'; +import rehypeReact, { Options as RehypeReactOptions } from 'rehype-react'; +import { Fragment, jsx, jsxs } from 'react/jsx-runtime'; +import { MarkPostString } from '@/components/dummyPost'; + +export default async function Mark() { + let content = await MarkPostString(); + let result = await unified() + .use(remarkParse) + .use(remarkGfm) + .use(remarkRehype) + .use(rehypeHighlight) + .use(rehypeSanitize) + .use(rehypeReact, { + Fragment: Fragment, + jsx: jsx, + jsxs: jsxs + } as RehypeReactOptions) + .process(content); + + return result.result; +} \ No newline at end of file diff --git a/package.json b/package.json index 98e28dd..235368f 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,8 @@ "@types/dompurify": "^3.0.5", "@types/jsdom": "^21.1.6", "@types/node": "20.6.5", - "@types/react": "18.2.22", - "@types/react-dom": "18.2.7", + "@types/react": "18.3.1", + "@types/react-dom": "18.3.0", "autoprefixer": "10.4.16", "bright": "^0.8.5", "dompurify": "^3.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cbc59e6..d9b65f1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,11 +18,11 @@ importers: specifier: 20.6.5 version: 20.6.5 '@types/react': - specifier: 18.2.22 - version: 18.2.22 + specifier: 18.3.1 + version: 18.3.1 '@types/react-dom': - specifier: 18.2.7 - version: 18.2.7 + specifier: 18.3.0 + version: 18.3.0 autoprefixer: specifier: 10.4.16 version: 10.4.16(postcss@8.4.30) @@ -441,14 +441,11 @@ packages: '@types/prop-types@15.7.12': resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} - '@types/react-dom@18.2.7': - resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==} + '@types/react-dom@18.3.0': + resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} - '@types/react@18.2.22': - resolution: {integrity: sha512-60fLTOLqzarLED2O3UQImc/lsNRgG0jE/a1mPW9KjMemY0LMITWEsbS4VvZ4p6rorEHd5YKxxmMKSDK505GHpA==} - - '@types/scheduler@0.23.0': - resolution: {integrity: sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==} + '@types/react@18.3.1': + resolution: {integrity: sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==} '@types/tough-cookie@4.0.5': resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==} @@ -2801,18 +2798,15 @@ snapshots: '@types/prop-types@15.7.12': {} - '@types/react-dom@18.2.7': + '@types/react-dom@18.3.0': dependencies: - '@types/react': 18.2.22 + '@types/react': 18.3.1 - '@types/react@18.2.22': + '@types/react@18.3.1': dependencies: '@types/prop-types': 15.7.12 - '@types/scheduler': 0.23.0 csstype: 3.1.3 - '@types/scheduler@0.23.0': {} - '@types/tough-cookie@4.0.5': {} '@types/trusted-types@2.0.7': {}