diff --git a/playground/package.json b/playground/package.json index 94f5d5a3..af59479c 100644 --- a/playground/package.json +++ b/playground/package.json @@ -17,18 +17,18 @@ "lz-string": "^1.5.0", "monaco-editor": "^0.52.2", "prettier": "^3.6.2", - "react": "^19.1.1", - "react-dom": "^19.1.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", "tailwindcss": "^4.1.12" }, "devDependencies": { "@eslint/js": "^9.34.0", - "@types/react": "^19.1.12", - "@types/react-dom": "^19.1.9", + "@types/react": "^19.2.0", + "@types/react-dom": "^19.2.0", "@vitejs/plugin-react": "^4.7.0", - "babel-plugin-react-compiler": "19.1.0-rc.1", + "babel-plugin-react-compiler": "19.1.0-rc.3", "eslint": "^9.34.0", - "eslint-plugin-react-hooks": "6.0.0-rc1", + "eslint-plugin-react-hooks": "6.1.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^15.15.0", "typescript": "~5.7.3", diff --git a/playground/pnpm-lock.yaml b/playground/pnpm-lock.yaml index e96f8527..ed64bdaa 100644 --- a/playground/pnpm-lock.yaml +++ b/playground/pnpm-lock.yaml @@ -10,7 +10,7 @@ importers: dependencies: '@sentry/react': specifier: ^9.46.0 - version: 9.46.0(react@19.1.1) + version: 9.46.0(react@19.2.0) '@sentry/vite-plugin': specifier: ^3.6.1 version: 3.6.1 @@ -27,11 +27,11 @@ importers: specifier: ^3.6.2 version: 3.6.2 react: - specifier: ^19.1.1 - version: 19.1.1 + specifier: ^19.2.0 + version: 19.2.0 react-dom: - specifier: ^19.1.1 - version: 19.1.1(react@19.1.1) + specifier: ^19.2.0 + version: 19.2.0(react@19.2.0) tailwindcss: specifier: ^4.1.12 version: 4.1.12 @@ -40,23 +40,23 @@ importers: specifier: ^9.34.0 version: 9.34.0 '@types/react': - specifier: ^19.1.12 - version: 19.1.12 + specifier: ^19.2.0 + version: 19.2.0 '@types/react-dom': - specifier: ^19.1.9 - version: 19.1.9(@types/react@19.1.12) + specifier: ^19.2.0 + version: 19.2.0(@types/react@19.2.0) '@vitejs/plugin-react': specifier: ^4.7.0 version: 4.7.0(vite@6.3.5(jiti@2.5.1)(lightningcss@1.30.1)) babel-plugin-react-compiler: - specifier: 19.1.0-rc.1 - version: 19.1.0-rc.1 + specifier: 19.1.0-rc.3 + version: 19.1.0-rc.3 eslint: specifier: ^9.34.0 version: 9.34.0(jiti@2.5.1) eslint-plugin-react-hooks: - specifier: 6.0.0-rc1 - version: 6.0.0-rc1(eslint@9.34.0(jiti@2.5.1)) + specifier: 6.1.0 + version: 6.1.0(eslint@9.34.0(jiti@2.5.1)) eslint-plugin-react-refresh: specifier: ^0.4.20 version: 0.4.20(eslint@9.34.0(jiti@2.5.1)) @@ -166,9 +166,10 @@ packages: engines: {node: '>=6.0.0'} hasBin: true - '@babel/plugin-transform-private-methods@7.27.1': - resolution: {integrity: sha512-10FVt+X55AjRAYI9BrdISN9/AQWHqldOeZDUoLyif1Kn05a56xVBXb8ZouL8pZ9jem8QpXaOt8TS7RHUIS+GPA==} + '@babel/plugin-proposal-private-methods@7.18.6': + resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead. peerDependencies: '@babel/core': ^7.0.0-0 @@ -747,13 +748,13 @@ packages: '@types/json-schema@7.0.15': resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} - '@types/react-dom@19.1.9': - resolution: {integrity: sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==} + '@types/react-dom@19.2.0': + resolution: {integrity: sha512-brtBs0MnE9SMx7px208g39lRmC5uHZs96caOJfTjFcYSLHNamvaSMfJNagChVNkup2SdtOxKX1FDBkRSJe1ZAg==} peerDependencies: - '@types/react': ^19.0.0 + '@types/react': ^19.2.0 - '@types/react@19.1.12': - resolution: {integrity: sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==} + '@types/react@19.2.0': + resolution: {integrity: sha512-1LOH8xovvsKsCBq1wnT4ntDUdCJKmnEakhsuoUSy6ExlHCkGP2hqnatagYTgFk6oeL0VU31u7SNjunPN+GchtA==} '@typescript-eslint/eslint-plugin@8.41.0': resolution: {integrity: sha512-8fz6oa6wEKZrhXWro/S3n2eRJqlRcIa6SlDh59FXJ5Wp5XRZ8B9ixpJDcjadHq47hMx0u+HW6SNa6LjJQ6NLtw==} @@ -848,8 +849,8 @@ packages: argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} - babel-plugin-react-compiler@19.1.0-rc.1: - resolution: {integrity: sha512-M4fpG+Hfq5gWzsJeeMErdRokzg0fdJ8IAk+JDhfB/WLT+U3WwJWR8edphypJrk447/JEvYu6DBFwsTn10bMW4Q==} + babel-plugin-react-compiler@19.1.0-rc.3: + resolution: {integrity: sha512-mjRn69WuTz4adL0bXGx8Rsyk1086zFJeKmes6aK0xPuK3aaXmDJdLHqwKKMrpm6KAI1MCoUK72d2VeqQbu8YIA==} balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -952,8 +953,8 @@ packages: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} - eslint-plugin-react-hooks@6.0.0-rc1: - resolution: {integrity: sha512-I4ntWyjqgGemGtOU85FUdVo00h0i0Y5xvQ7a8EVxyzjOZsxXaxvkKBcYoXbP97QDvDjMzY/nGIvfdB/WRLTGxQ==} + eslint-plugin-react-hooks@6.1.0: + resolution: {integrity: sha512-72mucw/WLzEqGvL2vwE6fWR6geO6UbmDjz3eAb3pezxTpFzgbfyUeFKzmZKr9LhwUWMXfTVh1g0rKEJoyKNdoA==} engines: {node: '>=18'} peerDependencies: eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 @@ -1396,10 +1397,10 @@ packages: queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} - react-dom@19.1.1: - resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==} + react-dom@19.2.0: + resolution: {integrity: sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==} peerDependencies: - react: ^19.1.1 + react: ^19.2.0 react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -1408,8 +1409,8 @@ packages: resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==} engines: {node: '>=0.10.0'} - react@19.1.1: - resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==} + react@19.2.0: + resolution: {integrity: sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==} engines: {node: '>=0.10.0'} readdirp@3.6.0: @@ -1432,8 +1433,8 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} - scheduler@0.26.0: - resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==} + scheduler@0.27.0: + resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==} semver@6.3.1: resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} @@ -1732,7 +1733,7 @@ snapshots: dependencies: '@babel/types': 7.28.2 - '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.3)': + '@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.28.3)': dependencies: '@babel/core': 7.28.3 '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.3) @@ -2093,12 +2094,12 @@ snapshots: '@sentry/core@9.46.0': {} - '@sentry/react@9.46.0(react@19.1.1)': + '@sentry/react@9.46.0(react@19.2.0)': dependencies: '@sentry/browser': 9.46.0 '@sentry/core': 9.46.0 hoist-non-react-statics: 3.3.2 - react: 19.1.1 + react: 19.2.0 '@sentry/vite-plugin@3.6.1': dependencies: @@ -2204,11 +2205,11 @@ snapshots: '@types/json-schema@7.0.15': {} - '@types/react-dom@19.1.9(@types/react@19.1.12)': + '@types/react-dom@19.2.0(@types/react@19.2.0)': dependencies: - '@types/react': 19.1.12 + '@types/react': 19.2.0 - '@types/react@19.1.12': + '@types/react@19.2.0': dependencies: csstype: 3.1.3 @@ -2347,7 +2348,7 @@ snapshots: argparse@2.0.1: {} - babel-plugin-react-compiler@19.1.0-rc.1: + babel-plugin-react-compiler@19.1.0-rc.3: dependencies: '@babel/types': 7.28.2 @@ -2466,11 +2467,11 @@ snapshots: escape-string-regexp@4.0.0: {} - eslint-plugin-react-hooks@6.0.0-rc1(eslint@9.34.0(jiti@2.5.1)): + eslint-plugin-react-hooks@6.1.0(eslint@9.34.0(jiti@2.5.1)): dependencies: '@babel/core': 7.28.3 '@babel/parser': 7.28.3 - '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.3) + '@babel/plugin-proposal-private-methods': 7.18.6(@babel/core@7.28.3) eslint: 9.34.0(jiti@2.5.1) hermes-parser: 0.25.1 zod: 3.25.76 @@ -2860,16 +2861,16 @@ snapshots: queue-microtask@1.2.3: {} - react-dom@19.1.1(react@19.1.1): + react-dom@19.2.0(react@19.2.0): dependencies: - react: 19.1.1 - scheduler: 0.26.0 + react: 19.2.0 + scheduler: 0.27.0 react-is@16.13.1: {} react-refresh@0.17.0: {} - react@19.1.1: {} + react@19.2.0: {} readdirp@3.6.0: dependencies: @@ -2909,7 +2910,7 @@ snapshots: dependencies: queue-microtask: 1.2.3 - scheduler@0.26.0: {} + scheduler@0.27.0: {} semver@6.3.1: {} diff --git a/playground/src/App.tsx b/playground/src/App.tsx index 52990b28..cf91b5de 100644 --- a/playground/src/App.tsx +++ b/playground/src/App.tsx @@ -1,4 +1,10 @@ -import { useState, useEffect, useLayoutEffect, useRef } from "react" +import { + useState, + useEffect, + useLayoutEffect, + useRef, + useEffectEvent, +} from "react" import * as monaco from "monaco-editor" import { LintError, Fix, useDumpCst, useDumpTokens, useErrors } from "./squawk" import { @@ -233,22 +239,18 @@ function Editor({ settings: monaco.editor.IStandaloneEditorConstructionOptions markers?: Marker[] }) { - const onChangeRef = useRef<((_: string) => void) | undefined>(null) - const onSaveRef = useRef<((_: string) => void) | undefined>(null) + const onChangeText = useEffectEvent((text: string) => { + onChange?.(text) + }) + const onSaveText = useEffectEvent((text: string) => { + onSave?.(text) + }) const divRef = useRef(null) const autoFocusRef = useRef(autoFocus) const settingsInitial = useRef(settings) const editorRef = useRef(null) const fixesRef = useRef>(new Map()) - // TODO: replace with useEventEffect - useEffect(() => { - onChangeRef.current = onChange - }, [onChange]) - useEffect(() => { - onSaveRef.current = onSave - }, [onSave]) - useEffect(() => { if (markers == null) { return @@ -275,10 +277,10 @@ function Editor({ settingsInitial.current, ) editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => - onSaveRef.current?.(editor.getValue()), + onSaveText(editor.getValue()), ) editor.onDidBlurEditorText(() => { - onSaveRef.current?.(editor.getValue()) + onSaveText(editor.getValue()) }) monaco.languages.register({ id: "rast" }) const tokenProvider = monaco.languages.setMonarchTokensProvider("rast", { @@ -346,7 +348,7 @@ function Editor({ ) editor.onDidChangeModelContent(() => { - onChangeRef.current?.(editor.getValue()) + onChangeText(editor.getValue()) }) if (autoFocusRef.current) { editor.focus()