From cc8ab918b45d9ef808c5393836048cc400f4529d Mon Sep 17 00:00:00 2001 From: Morisaki Mikiya Date: Thu, 3 Mar 2022 02:26:35 +0000 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E3=82=B7=E3=83=B3=E3=82=BF?= =?UTF-8?q?=E3=83=83=E3=82=AF=E3=82=B9=E3=83=8F=E3=82=A4=E3=83=A9=E3=82=A4?= =?UTF-8?q?=E3=83=88=E3=82=92=E9=81=A9=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ひとまず言語は tsx 指定 カラーも基本色 --- package.json | 3 +++ src/components/review/DiffRenderer.tsx | 13 +++++++++++ src/pages/_app.tsx | 2 ++ yarn.lock | 31 ++++++++++++++++++++++++++ 4 files changed, 49 insertions(+) diff --git a/package.json b/package.json index b29317a6..38ddd281 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "framer-motion": "^5.3.3", "lodash": "^4.17.21", "next": "11.1.3", + "prism-color-variables": "^1.0.1", "react": "17.0.2", "react-diff-view": "^2.4.8", "react-dom": "17.0.2", @@ -28,6 +29,7 @@ "react-syntax-highlighter": "^15.4.5", "recoil": "^0.5.2", "recoil-persist": "^4.0.0", + "refractor": "3", "remark-gfm": "^3.0.1" }, "devDependencies": { @@ -37,6 +39,7 @@ "@types/react": "17.0.37", "@types/react-syntax-highlighter": "^13.5.2", "@types/recoil": "^0.0.9", + "@types/refractor": "^3.0.2", "eslint": "7", "eslint-config-next": "^12.0.4", "eslint-config-prettier": "^8.3.0", diff --git a/src/components/review/DiffRenderer.tsx b/src/components/review/DiffRenderer.tsx index 16748703..62f1f417 100644 --- a/src/components/review/DiffRenderer.tsx +++ b/src/components/review/DiffRenderer.tsx @@ -1,6 +1,7 @@ import { PlusSquareIcon } from "@chakra-ui/icons"; import { Box } from "@chakra-ui/react"; import { useMemo, useState } from "react"; +import refractor from "refractor"; import ReviewPopover from "@/components/review/Popover"; @@ -9,6 +10,7 @@ const Diff = reactDiffView.Diff; const Hunk = reactDiffView.Hunk; const Decoration = reactDiffView.Decoration; const getChangeKey = reactDiffView.getChangeKey; +const tokenize = reactDiffView.tokenize; type Props = { fileId: string; @@ -43,6 +45,16 @@ const DiffRenderer = ({ const [tmpChangeKey, setTmpChangeKey] = useState(""); const postPath: string = type === "delete" ? oldPath : newPath; + const tokens = useMemo( + () => + tokenize(hunks, { + highlight: true, + refractor: refractor, + language: "tsx", + }), + [hunks] + ); + const renderGutter = ({ side, renderDefault, @@ -76,6 +88,7 @@ const DiffRenderer = ({ viewType="unified" diffType={type} hunks={hunks} + tokens={tokens} widgets={widgets[fileId]} renderGutter={renderGutter} > diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a4c33055..7658bb5d 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -7,6 +7,8 @@ import { RecoilRoot } from "recoil"; import AuthContext from "@/components/AuthContext"; import authReducer from "@/utils/authReducer"; + +import "prismjs/themes/prism.css"; import "@/style/difffile.css"; const MyApp: NextPage = ({ Component, pageProps }) => { diff --git a/yarn.lock b/yarn.lock index 0bede10d..e17b20de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2178,6 +2178,11 @@ resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.3.tgz#a3c65525b91fca7da00ab1a3ac2b5a2a4afbffbf" integrity sha512-QzSuZMBuG5u8HqYz01qtMdg/Jfctlnvj1z/lYnIDXs/golxw0fxtRAHd9KrzjR7Yxz1qVeI00o0kiO3PmVdJ9w== +"@types/prismjs@*": + version "1.26.0" + resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654" + integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ== + "@types/prop-types@*": version "15.7.4" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" @@ -2206,6 +2211,13 @@ dependencies: recoil "*" +"@types/refractor@^3.0.2": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@types/refractor/-/refractor-3.0.2.tgz#2d42128d59f78f84d2c799ffc5ab5cadbcba2d82" + integrity sha512-2HMXuwGuOqzUG+KUTm9GDJCHl0LCBKsB5cg28ujEmVi/0qgTb6jOmkVSO5K48qXksyl2Fr3C0Q2VrgD4zbwyXg== + dependencies: + "@types/prismjs" "*" + "@types/scheduler@*": version "0.16.2" resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" @@ -6385,11 +6397,21 @@ pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.5.0: ansi-styles "^5.0.0" react-is "^17.0.1" +prism-color-variables@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/prism-color-variables/-/prism-color-variables-1.0.1.tgz#ab2f9603e4014ff6b10bc99b9b71369233326004" + integrity sha512-ooWpzManQwobU5DNxWyFeffSABAQGWVVcon8E5AGUU4fgKqwdPw14M3gbS0c1YzDtf7Tv3G6PWsvELe16YWUYg== + prismjs@^1.25.0, prismjs@~1.25.0: version "1.25.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756" integrity sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg== +prismjs@~1.27.0: + version "1.27.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057" + integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA== + process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" @@ -6716,6 +6738,15 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +refractor@3: + version "3.6.0" + resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a" + integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA== + dependencies: + hastscript "^6.0.0" + parse-entities "^2.0.0" + prismjs "~1.27.0" + refractor@^3.2.0: version "3.5.0" resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.5.0.tgz#334586f352dda4beaf354099b48c2d18e0819aec" From 72c15b2c052e44ba7f81ad8fec7a92ed3ab85ecc Mon Sep 17 00:00:00 2001 From: Morisaki Mikiya Date: Thu, 3 Mar 2022 03:11:11 +0000 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E3=83=95=E3=82=A1=E3=82=A4?= =?UTF-8?q?=E3=83=AB=E5=90=8D=E3=81=8B=E3=82=89=E6=8B=A1=E5=BC=B5=E5=AD=90?= =?UTF-8?q?=E3=82=92=E5=8F=96=E5=BE=97=E3=81=97=E8=A8=80=E8=AA=9E=E3=82=92?= =?UTF-8?q?=E5=88=A4=E5=88=A5=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/review/DiffRenderer.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/review/DiffRenderer.tsx b/src/components/review/DiffRenderer.tsx index 62f1f417..4005e18a 100644 --- a/src/components/review/DiffRenderer.tsx +++ b/src/components/review/DiffRenderer.tsx @@ -1,3 +1,5 @@ +import path from "path"; + import { PlusSquareIcon } from "@chakra-ui/icons"; import { Box } from "@chakra-ui/react"; import { useMemo, useState } from "react"; @@ -45,15 +47,21 @@ const DiffRenderer = ({ const [tmpChangeKey, setTmpChangeKey] = useState(""); const postPath: string = type === "delete" ? oldPath : newPath; - const tokens = useMemo( - () => - tokenize(hunks, { + const tokens = useMemo(() => { + try { + return tokenize(hunks, { highlight: true, refractor: refractor, - language: "tsx", - }), - [hunks] - ); + language: path.extname(postPath).slice(1), + }); + } catch (e) { + // ・ファイル名の文字列 (postPath) が空文字の可能性のある初回ロード + // ・ライブラリ非対応の拡張子 + // の場合、refractor ライブラリがエラーを送出するので + // シンタックスハイライトを無効にする + return tokenize(hunks, { highlight: false }); + } + }, [hunks]); const renderGutter = ({ side, From 179d79cb34f94101914d74c66c3df745239ffbcb Mon Sep 17 00:00:00 2001 From: Morisaki Mikiya Date: Thu, 3 Mar 2022 03:39:01 +0000 Subject: [PATCH 3/3] =?UTF-8?q?remove:=20prism-color-variables=20=E3=83=A9?= =?UTF-8?q?=E3=82=A4=E3=83=96=E3=83=A9=E3=83=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 追加のハイライトテーマを指定しない場合不要であったため --- package.json | 1 - yarn.lock | 5 ----- 2 files changed, 6 deletions(-) diff --git a/package.json b/package.json index 38ddd281..613cb09b 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "framer-motion": "^5.3.3", "lodash": "^4.17.21", "next": "11.1.3", - "prism-color-variables": "^1.0.1", "react": "17.0.2", "react-diff-view": "^2.4.8", "react-dom": "17.0.2", diff --git a/yarn.lock b/yarn.lock index e17b20de..f0adea51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6397,11 +6397,6 @@ pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.5.0: ansi-styles "^5.0.0" react-is "^17.0.1" -prism-color-variables@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/prism-color-variables/-/prism-color-variables-1.0.1.tgz#ab2f9603e4014ff6b10bc99b9b71369233326004" - integrity sha512-ooWpzManQwobU5DNxWyFeffSABAQGWVVcon8E5AGUU4fgKqwdPw14M3gbS0c1YzDtf7Tv3G6PWsvELe16YWUYg== - prismjs@^1.25.0, prismjs@~1.25.0: version "1.25.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756"