chore(deps): bump versions

Author: exuanbo

.yarn/releases/yarn-4.3.1.cjs

@@ -9,4 +9,4 @@ plugins:
     path: .yarn/plugins/@yarnpkg/plugin-nolyfill.cjs
     spec: "https://raw.githubusercontent.com/wojtekmaj/yarn-plugin-nolyfill/v1.0.2/bundles/@yarnpkg/plugin-nolyfill.js"
 
-yarnPath: .yarn/releases/yarn-4.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

.yarn/releases/yarn-4.5.0.cjs

@@ -17,10 +17,10 @@
   },
   "dependencies": {
     "@codemirror-toolkit/extensions": "0.6.3",
-    "@codemirror-toolkit/react": "0.6.0",
-    "@codemirror-toolkit/utils": "0.5.0",
-    "@codemirror/autocomplete": "6.18.0",
-    "@codemirror/commands": "6.6.0",
+    "@codemirror-toolkit/react": "0.7.1",
+    "@codemirror-toolkit/utils": "0.5.1",
+    "@codemirror/autocomplete": "6.18.1",
+    "@codemirror/commands": "6.6.1",
     "@codemirror/language": "6.10.2",
     "@codemirror/search": "6.5.6",
     "@codemirror/state": "6.4.1",
@@ -38,38 +38,38 @@
     "rxjs": "8.0.0-alpha.14"
   },
   "devDependencies": {
-    "@eslint/js": "9.9.1",
+    "@eslint/js": "9.10.0",
     "@types/ackee-tracker": "5.0.4",
     "@types/eslint__js": "8.42.3",
-    "@types/jest": "29.5.12",
-    "@types/node": "22.5.1",
+    "@types/jest": "29.5.13",
+    "@types/node": "22.5.5",
     "@types/pako": "2.0.3",
-    "@types/react": "18.3.4",
+    "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@unocss/preset-web-fonts": "0.62.3",
     "@unocss/preset-wind": "0.62.3",
     "@unocss/transformer-directives": "0.62.3",
     "@unocss/transformer-variant-group": "0.62.3",
     "@vitejs/plugin-react": "4.3.1",
-    "eslint": "9.9.1",
+    "eslint": "9.10.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-react": "7.35.0",
-    "eslint-plugin-react-hooks": "5.1.0-rc-7771d3a7-20240827",
+    "eslint-plugin-react": "7.36.1",
+    "eslint-plugin-react-hooks": "5.1.0-rc-206df66e-20240912",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "globals": "15.9.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "prettier": "3.3.3",
     "ts-jest": "29.2.5",
     "ts-toolbelt": "9.6.0",
-    "typescript": "5.5.4",
-    "typescript-eslint": "8.3.0",
+    "typescript": "5.6.2",
+    "typescript-eslint": "8.5.0",
     "unocss": "0.62.3",
-    "vite": "5.4.2",
-    "vite-plugin-pwa": "0.20.1"
+    "vite": "5.4.5",
+    "vite-plugin-pwa": "0.20.5"
   },
   "resolutions": {
     "immer": "npm:mutative-compat@^0.1.0"
   },
-  "packageManager": "yarn@4.3.1"
+  "packageManager": "yarn@4.5.0"
 }

.yarnrc.yml

@@ -2,24 +2,18 @@ import type { FC } from 'react'
 
 import { classNames } from '@/common/utils'
 
-import { viewEffects } from './effects'
-import { useContainerRef, useViewEffect } from './hooks'
+import { effects } from './effects'
+import { setContainer, useViewEffect } from './hooks'
 
 interface Props {
   className?: string
 }
 
 const CodeMirror: FC<Props> = ({ className }) => {
-  const containerRef = useContainerRef()
-
-  useViewEffect((view) => {
-    const cleanups = viewEffects.map((effect) => effect(view))
-    return () => cleanups.forEach((cleanup) => cleanup?.())
-  })
-
+  useViewEffect(effects)
   return (
     <div
-      ref={containerRef}
+      ref={setContainer}
       className={classNames('cursor-auto select-auto overflow-y-auto', className)}
     />
   )

package.json

@@ -1,8 +1,8 @@
 import type { Transaction } from '@codemirror/state'
 import { addUpdateListener } from '@codemirror-toolkit/extensions'
-import type { ViewEffectSetup } from '@codemirror-toolkit/react'
+import { defineViewEffect } from '@codemirror-toolkit/react'
 import { mapRangeSetToArray, rangeSetsEqual } from '@codemirror-toolkit/utils'
-import { debounceTime, filter, identity, map, of, switchMap } from 'rxjs'
+import { debounceTime, filter, map, of, switchMap } from 'rxjs'
 
 import { store } from '@/app/store'
 import { UPDATE_TIMEOUT_MS } from '@/common/constants'
@@ -30,8 +30,6 @@ import {
 import { isTemplate, templateSelection } from './examples'
 import { selectCurrentStatementLinePos } from './selectors'
 
-const defineViewEffect = identity<ViewEffectSetup>
-
 const resetAssemblerStateOnInput = defineViewEffect((view) => {
   const viewUpdate$ = onUpdate(view)
   return observe(
@@ -215,7 +213,7 @@ const toggleVimKeybindings = defineViewEffect((view) => {
   )
 })
 
-export const viewEffects: readonly ViewEffectSetup[] = [
+const setups = [
   resetAssemblerStateOnInput,
   syncInputToState,
   syncInputFromState,
@@ -226,3 +224,8 @@ export const viewEffects: readonly ViewEffectSetup[] = [
   initialSyncBreakpointsFromState,
   toggleVimKeybindings,
 ]
+
+export const effects = defineViewEffect((view) => {
+  const cleanups = setups.map((effect) => effect(view))
+  return () => cleanups.forEach((cleanup) => cleanup?.())
+})

src/features/editor/CodeMirror.tsx

@@ -1,4 +1,4 @@
-import { createCodeMirror } from '@codemirror-toolkit/react'
+import { create } from '@codemirror-toolkit/react'
 import { useEffect } from 'react'
 import { debounceTime, filter, first, map, merge, switchMap } from 'rxjs'
 
@@ -20,12 +20,13 @@ import {
   setEditorMessage,
 } from './editorSlice'
 
-export const { useViewEffect, useContainerRef } = createCodeMirror<HTMLDivElement>(() => {
+export const { useViewEffect, setContainer } = create((prevState) => {
   const editorInput = store.getState(selectEditorInput)
   const handleException: ExceptionHandler = (exception) => {
     store.dispatch(setException(exception))
   }
   return {
+    state: prevState,
     doc: editorInput,
     extensions: [setup(), exceptionSink(handleException)],
   }