chore(example-app): update project configuration and dependencies

- Modified package.json to update dependencies
- Renamed vite.config.ts to vite.config.mjs for compatibility
- Updated App.tsx and yarn.lock for new features

Author: alioguzhan

example/package.json

@@ -5,17 +5,17 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@types/jest": "^29.5.0",
-    "@types/node": "^18.15.9",
-    "@types/react": "^18.0.29",
-    "@types/react-dom": "^18.0.11",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "prop-types": "^15.8.1",
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
     "react-editext": "link:..",
-    "react-syntax-highlighter": "^15.5.0",
-    "styled-components": "^5.3.9",
-    "typescript": "^5.0.2"
+    "react-syntax-highlighter": "^15.6.1",
+    "styled-components": "^6.1.13",
+    "typescript": "^5.7.2"
   },
   "scripts": {
     "dev": "vite",
@@ -31,11 +31,11 @@
   ],
   "snyk": true,
   "devDependencies": {
-    "@types/react-syntax-highlighter": "^15.5.6",
-    "@types/styled-components": "^5.1.26",
-    "@vitejs/plugin-react": "^3.1.0",
-    "vite": "^4.2.1",
-    "vite-plugin-checker": "^0.5.6",
-    "vite-plugin-env-compatible": "^1.1.1"
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/styled-components": "^5.1.34",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.6",
+    "vite-plugin-checker": "^0.8.0",
+    "vite-plugin-env-compatible": "^2.0.1"
   }
 }

example/src/App.tsx

@@ -1,9 +1,13 @@
-import { ChangeEvent, useState } from 'react'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import React, { ChangeEvent, useState } from 'react'
+import { Prism, SyntaxHighlighterProps } from 'react-syntax-highlighter'
 import EdiText, { InputProps } from 'react-editext'
 import styled from 'styled-components'
 import * as examples from './_examples'
 
+// https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/539
+const SyntaxHighlighter =
+  Prism as typeof React.Component<SyntaxHighlighterProps>
+
 const StyledEdiText = styled(EdiText)`
   button {
     border-radius: 5px;

example/vite.config.ts example/vite.config.mjsexample/vite.config.ts renamed to example/vite.config.mjs

@@ -1,9 +1,12 @@
 import react from '@vitejs/plugin-react'
-import path from 'path'
+import { fileURLToPath } from 'url'
 import { defineConfig } from 'vite'
 import checker from 'vite-plugin-checker'
 import envCompatible from 'vite-plugin-env-compatible'
+import path from 'node:path'
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   return {
@@ -15,10 +18,10 @@ export default defineConfig(({ mode }) => {
       }),
       checker({
         overlay: false,
-        typescript: true,
-        eslint: {
-          lintCommand: 'eslint "./src/**/*.{ts,tsx}"'
-        }
+        typescript: true
+        // eslint: {
+        //   lintCommand: 'eslint "./src/**/*.{ts,tsx}"'
+        // }
       })
     ],
     resolve: {