fix(fe): use only supported language packages (#1525)

* feat: add bundle analyzer

* fix: import only used languages

* fix: load parser at once

* refactor: change to record

* fix: pnpm-lock

frontend-client/components/CodeEditor.tsx

@@ -1,11 +1,13 @@
 'use client'
 
 import type { Language } from '@/types/type'
+import { cpp } from '@codemirror/lang-cpp'
+import { java } from '@codemirror/lang-java'
+import { python } from '@codemirror/lang-python'
+import type { LanguageSupport } from '@codemirror/language'
 import { tags as t } from '@lezer/highlight'
-import type { LanguageName } from '@uiw/codemirror-extensions-langs'
-import { loadLanguage } from '@uiw/codemirror-extensions-langs'
 import { createTheme } from '@uiw/codemirror-themes'
-import type { Extension, ReactCodeMirrorProps } from '@uiw/react-codemirror'
+import type { ReactCodeMirrorProps } from '@uiw/react-codemirror'
 import ReactCodeMirror, { EditorView } from '@uiw/react-codemirror'
 import { ScrollArea, ScrollBar } from './ui/scroll-area'
 
@@ -52,15 +54,15 @@ const fontSize = EditorView.baseTheme({
   }
 })
 
-interface Props extends ReactCodeMirrorProps {
-  language: Language
+const languageParser: Record<Language, () => LanguageSupport> = {
+  Cpp: cpp,
+  C: cpp,
+  Java: java,
+  Python3: python
 }
 
-const CodeMirrorLanguage: Record<Language, LanguageName> = {
-  C: 'c',
-  Cpp: 'cpp',
-  Java: 'java',
-  Python3: 'python'
+interface Props extends ReactCodeMirrorProps {
+  language: Language
 }
 
 export default function CodeEditor({
@@ -74,10 +76,7 @@ export default function CodeEditor({
     <ScrollArea className="rounded-md [&>div>div]:h-full">
       <ReactCodeMirror
         theme={editorTheme}
-        extensions={[
-          fontSize,
-          loadLanguage(CodeMirrorLanguage[language]) as Extension
-        ]}
+        extensions={[fontSize, languageParser[language]()]}
         value={value}
         onChange={onChange}
         readOnly={readOnly}

frontend-client/next.config.js

@@ -1,5 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { withSentryConfig } = require('@sentry/nextjs')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true'
+})
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -17,7 +21,7 @@ const nextConfig = {
 
 // Injected content via Sentry wizard below
 module.exports = withSentryConfig(
-  nextConfig,
+  withBundleAnalyzer(nextConfig),
   {
     // For all available options, see:
     // https://github.com/getsentry/sentry-webpack-plugin#options

frontend-client/package.json

@@ -11,12 +11,16 @@
   },
   "dependencies": {
     "@apollo/client": "^3.9.5",
+    "@codemirror/lang-cpp": "^6.0.2",
+    "@codemirror/lang-java": "^6.0.1",
+    "@codemirror/lang-python": "^6.1.4",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.24.1",
     "@headlessui/react": "^1.7.18",
     "@hookform/resolvers": "^3.3.4",
     "@lezer/highlight": "^1.2.0",
     "@monaco-editor/react": "^4.6.0",
+    "@next/bundle-analyzer": "^14.1.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -70,6 +74,7 @@
     "zustand": "^4.5.1"
   },
   "devDependencies": {
+    "@codemirror/language": "^6.10.1",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/client-preset": "^4.2.4",
     "@graphql-typed-document-node/core": "^3.2.0",