diff --git a/package-lock.json b/package-lock.json index ee1ae48c..e26a5777 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "@apollo/react-hooks": "^3.1.3", "@emotion/core": "^10.0.35", "@emotion/styled": "^10.0.27", - "@onflow/cadence-language-server": "^0.20.2", + "@onflow/cadence-language-server": "^0.23.0", "@reach/router": "^1.3.4", "@types/file-saver": "^2.0.1", "apollo-cache-inmemory": "^1.6.6", @@ -5098,9 +5098,9 @@ } }, "node_modules/@onflow/cadence-language-server": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@onflow/cadence-language-server/-/cadence-language-server-0.20.2.tgz", - "integrity": "sha512-6K2TaWvnz3pM5yY9f9jr0TtexlEdBB/HwXynns4njsPaSVVQVWahGKSyPg4fjb4Dmrgwe41fMY4spJZ6nVLHiA==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/@onflow/cadence-language-server/-/cadence-language-server-0.23.0.tgz", + "integrity": "sha512-be6mZu+ZPi993m2hN/Chz0PrzeIqkGcLnN05CLwkTAmeIGTpPPF/dmmv1hOqnbviC1ns+WpcbqyntLTUxtCfPA==", "dependencies": { "vscode-jsonrpc": "^5.0.1" } @@ -25874,9 +25874,9 @@ } }, "@onflow/cadence-language-server": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@onflow/cadence-language-server/-/cadence-language-server-0.20.2.tgz", - "integrity": "sha512-6K2TaWvnz3pM5yY9f9jr0TtexlEdBB/HwXynns4njsPaSVVQVWahGKSyPg4fjb4Dmrgwe41fMY4spJZ6nVLHiA==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/@onflow/cadence-language-server/-/cadence-language-server-0.23.0.tgz", + "integrity": "sha512-be6mZu+ZPi993m2hN/Chz0PrzeIqkGcLnN05CLwkTAmeIGTpPPF/dmmv1hOqnbviC1ns+WpcbqyntLTUxtCfPA==", "requires": { "vscode-jsonrpc": "^5.0.1" }, diff --git a/package.json b/package.json index de04849a..e0d0c010 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@apollo/react-hooks": "^3.1.3", "@emotion/core": "^10.0.35", "@emotion/styled": "^10.0.27", - "@onflow/cadence-language-server": "^0.20.2", + "@onflow/cadence-language-server": "^0.23.0", "@reach/router": "^1.3.4", "@types/file-saver": "^2.0.1", "apollo-cache-inmemory": "^1.6.6", diff --git a/src/components/CadenceEditor/index.tsx b/src/components/CadenceEditor/index.tsx index ca84f6f2..c5a579c6 100644 --- a/src/components/CadenceEditor/index.tsx +++ b/src/components/CadenceEditor/index.tsx @@ -3,8 +3,8 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; import { useProject } from 'providers/Project/projectHooks'; import { EntityType } from 'providers/Project'; -import debounce from 'util/debounce'; import configureCadence, { CADENCE_LANGUAGE_ID } from 'util/cadence'; +import debounce from 'util/debounce'; import Notifications from './Notifications'; import ControlPanel from './ControlPanel'; @@ -86,18 +86,17 @@ const CadenceEditor = (props: any) => { // Method to use, when model was changed const debouncedModelChange = debounce(() => { - // we will ignore text line, cause onChange is different for readme and other scripts - // @ts-ignore - project.active.onChange(editor.getValue()); - }, 50); + if (project.project?.accounts) { + // we will ignore text line, cause onChange is based on active type + // @ts-ignore + project.active.onChange(editor.getValue()); + } + }, 100); - useEffect(configureCadence, []); - useEffect(() => { - // TODO: save/restore view state with: - // - use ref to track current active id - // - const oldState = editor.saveViewState(); - if (editor) { - // Remove tracking of model updates to prevent re-rendering + //@ts-ignore + const setupEditor = () => { + const projectExist = project && project.project.accounts; + if (editor && projectExist) { if (editorOnChange.current) { editorOnChange.current.dispose(); } @@ -116,6 +115,11 @@ const CadenceEditor = (props: any) => { editor.focus(); } else { // - Add new line at the end of the model + // Remove tracking of model updates to prevent re-rendering + if (editorOnChange.current) { + editorOnChange.current.dispose(); + } + newState.model.setValue(code + '\n'); lastEdit.current = { type: project.active.type, @@ -126,19 +130,27 @@ const CadenceEditor = (props: any) => { editor.setModel(newState.model); editor.restoreViewState(newState.viewState); editor.focus(); - editor.layout(); - setTimeout(()=>{ - console.log("Restore back!") + setTimeout(() => { newState.model.setValue(code); - }, 150) + }, 150); } + editorOnChange.current = editor.onDidChangeModelContent( + debouncedModelChange, + ); + } + }; - editorOnChange.current = - editor.onDidChangeModelContent(debouncedModelChange); + useEffect(() => { + configureCadence(); + }, []); + + useEffect(() => { + if (editor) { + setupEditor(); } - }, [project.active, project.project.accounts]); + }, [editor, project.active.index, project.active.type]); // "initEditor" will create new instance of Monaco Editor and set it up const initEditor = async () => { @@ -168,6 +180,7 @@ const CadenceEditor = (props: any) => { // Save editor in component state setEditor(editor); + setupEditor(); }; // "destroyEditor" is used to dispose of Monaco Editor instance, when the component is unmounted (for any reasons) diff --git a/src/components/CadenceVersion.tsx b/src/components/CadenceVersion.tsx index d8181b80..e2068b5d 100644 --- a/src/components/CadenceVersion.tsx +++ b/src/components/CadenceVersion.tsx @@ -28,7 +28,7 @@ export const Dot = styled.div` height: var(--size); border-radius: var(--size); background-color: ${({ active = false }) => { - return active === 'OFF' ? '#ff006f' : '#00ff76'; + return active === 'OFF' ? '#ee431e' : '#00ff76'; }}; `; diff --git a/src/hooks/useLanguageServer.ts b/src/hooks/useLanguageServer.ts index fd58a2bc..d619b5cc 100644 --- a/src/hooks/useLanguageServer.ts +++ b/src/hooks/useLanguageServer.ts @@ -1,10 +1,9 @@ -import {useEffect, useState, useMemo} from 'react'; +import { useEffect, useState } from 'react'; import { CadenceLanguageServer, Callbacks } from 'util/language-server'; import { MonacoServices } from 'monaco-languageclient/lib/monaco-services'; import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; import { createCadenceLanguageClient } from 'util/language-client'; import { useProject } from 'providers/Project/projectHooks'; -import debounce from "util/debounce"; let monacoServicesInstalled = false; @@ -20,17 +19,13 @@ async function startLanguageServer(callbacks: any, getCode: any, ops) { callbacks.getAddressCode = getCode; setCallbacks(callbacks); setLanguageServer(server); - console.log("%c LS: Is Up!",'color: #00FF00') + console.log('%c LS: Is Up!', 'color: #00FF00'); } }, 100); }); } -const launchLanguageClient = async ( - callbacks, - languageServer, - setLanguageClient, -) => { +const launchLanguageClient = async (callbacks, languageServer, setLanguageClient) => { if (languageServer) { const newClient = createCadenceLanguageClient(callbacks); newClient.start(); @@ -84,7 +79,7 @@ export default function useLanguageServer() { }; const restartServer = () => { - console.log("Restarting server...") + console.log('Restarting server...'); startLanguageServer(callbacks, getCode, { setLanguageServer, @@ -92,20 +87,11 @@ export default function useLanguageServer() { }); }; - const debouncedServerRestart = useMemo( - () => debounce(restartServer, 150), - [languageServer] - ) - - useEffect(()=>{ - if(languageServer){ - languageServer.updateCodeGetter(getCode) + useEffect(() => { + if (languageServer) { + languageServer.updateCodeGetter(getCode); } - },[project.project.accounts]) - - // TODO: Disable this, once the cadence language server package is updated - useEffect(debouncedServerRestart, [project.project.accounts, project.active]); - + }, [project.project.accounts]); useEffect(() => { // The Monaco Language Client services have to be installed globally, once. @@ -122,7 +108,7 @@ export default function useLanguageServer() { }, []); useEffect(() => { - if(!languageClient){ + if (!languageClient) { launchLanguageClient(callbacks, languageServer, setLanguageClient).then(); } }, [languageServer]); diff --git a/src/providers/Project/index.tsx b/src/providers/Project/index.tsx index 03414d3e..107e29b4 100644 --- a/src/providers/Project/index.tsx +++ b/src/providers/Project/index.tsx @@ -351,7 +351,7 @@ export const ProjectProvider: React.FC = ({ const activeEditor = useMemo( getActiveEditor, - [active.type, active.index] + [active.type, active.index, project] ) const location = useLocation();