From 645d36630d970040f9dbfed318da92ec6015a8af Mon Sep 17 00:00:00 2001 From: Bobby Wang Date: Sun, 29 Jan 2023 00:14:51 +0700 Subject: [PATCH] implement auto typing for await import --- package.json | 2 +- src/components/CodeEditor/CodeEditor.tsx | 19 ++++++++-- .../CodeEditor/useMonacoCustomizations.ts | 37 ++++++++----------- yarn.lock | 2 +- 4 files changed, 34 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 4fac6672..e31ea62e 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "match-sorter": "^6.3.1", "material-ui-popup-state": "^4.0.1", "mdi-material-ui": "^7.3.0", - "monaco-editor-auto-typings": "^0.4.0", + "monaco-editor-auto-typings": "^0.4.3", "notistack": "^2.0.4", "path-browserify": "^1.0.1", "pb-util": "^1.0.3", diff --git a/src/components/CodeEditor/CodeEditor.tsx b/src/components/CodeEditor/CodeEditor.tsx index 2abfd45b..638759ed 100644 --- a/src/components/CodeEditor/CodeEditor.tsx +++ b/src/components/CodeEditor/CodeEditor.tsx @@ -14,6 +14,7 @@ import FullScreenButton from "@src/components/FullScreenButton"; import { spreadSx } from "@src/utils/ui"; import githubLightTheme from "@src/components/CodeEditor/github-light-default.json"; import githubDarkTheme from "@src/components/CodeEditor/github-dark-default.json"; +import { AutoTypings, LocalStorageCache } from "monaco-editor-auto-typings"; export interface ICodeEditorProps extends Partial, @@ -47,7 +48,7 @@ export default function CodeEditor({ extraLibs, diagnosticsOptions, onUnmount, - defaultLanguage = "javascript", + defaultLanguage = "typescript", ...props }: ICodeEditorProps) { const theme = useTheme(); @@ -95,11 +96,22 @@ export default function CodeEditor({ monaco.editor.defineTheme("github-light", githubLightTheme as any); monaco.editor.defineTheme("github-dark", githubDarkTheme as any); }} - onMount={(editor) => { + {...props} + onMount={async (editor, monaco) => { + if (props.onMount) { + props.onMount(editor, monaco); + } if (onFocus) editor.onDidFocusEditorWidget(onFocus); if (onBlur) editor.onDidBlurEditorWidget(onBlur); + const autoTypings = await AutoTypings.create(editor, { + monaco: monaco, + sourceCache: new LocalStorageCache(), + debounceDuration: 500, // ms + onError: (e) => { + console.log("Auto typing error", e); + }, + }); }} - {...props} onValidate={onValidate_} theme={`github-${theme.palette.mode}`} options={{ @@ -113,6 +125,7 @@ export default function CodeEditor({ fixedOverflowWidgets: true, tabSize: 2, ...props.options, + language: "typescript", }} /> diff --git a/src/components/CodeEditor/useMonacoCustomizations.ts b/src/components/CodeEditor/useMonacoCustomizations.ts index e6d55533..c73fba31 100644 --- a/src/components/CodeEditor/useMonacoCustomizations.ts +++ b/src/components/CodeEditor/useMonacoCustomizations.ts @@ -13,15 +13,9 @@ import { } from "@src/atoms/tableScope"; import { useMonaco } from "@monaco-editor/react"; import type { languages } from "monaco-editor/esm/vs/editor/editor.api"; -import githubLightTheme from "./github-light-default.json"; -import githubDarkTheme from "./github-dark-default.json"; - import { useTheme } from "@mui/material"; import type { SystemStyleObject, Theme } from "@mui/system"; -// TODO: -// import { getFieldType, getFieldProp } from "@src/components/fields"; - /* eslint-disable import/no-webpack-loader-syntax */ import firestoreDefs from "!!raw-loader!./firestore.d.ts"; import firebaseAuthDefs from "!!raw-loader!./firebaseAuth.d.ts"; @@ -77,24 +71,26 @@ export default function useMonacoCustomizations({ if (!monaco) return; try { - monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ + monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs, + module: monaco.languages.typescript.ModuleKind.CommonJS, target: monaco.languages.typescript.ScriptTarget.ES2020, allowNonTsExtensions: true, + typeRoots: ["node_modules/@types"], }); - monaco.languages.typescript.javascriptDefaults.addExtraLib(firestoreDefs); - monaco.languages.typescript.javascriptDefaults.addExtraLib( + monaco.languages.typescript.typescriptDefaults.addExtraLib(firestoreDefs); + monaco.languages.typescript.typescriptDefaults.addExtraLib( firebaseAuthDefs ); - monaco.languages.typescript.javascriptDefaults.addExtraLib( + monaco.languages.typescript.typescriptDefaults.addExtraLib( firebaseStorageDefs ); - monaco.languages.typescript.javascriptDefaults.addExtraLib( + monaco.languages.typescript.typescriptDefaults.addExtraLib( utilsDefs, "ts:filename/utils.d.ts" ); - monaco.languages.typescript.javascriptDefaults.addExtraLib(rowyUtilsDefs); + monaco.languages.typescript.typescriptDefaults.addExtraLib(rowyUtilsDefs); } catch (error) { console.error( "An error occurred during initialization of Monaco: ", @@ -108,7 +104,7 @@ export default function useMonacoCustomizations({ if (!monaco) return; if (!extraLibs) return; try { - monaco.languages.typescript.javascriptDefaults.addExtraLib( + monaco.languages.typescript.typescriptDefaults.addExtraLib( extraLibs.join("\n"), "ts:filename/extraLibs.d.ts" ); @@ -123,7 +119,7 @@ export default function useMonacoCustomizations({ if (!monaco) return; try { - monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({ + monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({ ...JSON.parse(stringifiedDiagnosticsOptions), diagnosticCodesToIgnore: [ 1323, // remove dynamic import error @@ -143,11 +139,11 @@ export default function useMonacoCustomizations({ .map((row) => row[columnKey]) .filter((entry) => entry !== undefined) .map((entry) => JSON.stringify(entry)); - monaco?.languages.typescript.javascriptDefaults.addExtraLib( + monaco?.languages.typescript.typescriptDefaults.addExtraLib( `type ${interfaceName} = any;` ); // if (!samples || samples.length === 0) { - // monaco?.languages.typescript.javascriptDefaults.addExtraLib( + // monaco?.languages.typescript.typescriptDefaults.addExtraLib( // `type ${interfaceName} = any;` // ); // return; @@ -165,7 +161,7 @@ export default function useMonacoCustomizations({ // rendererOptions: { "just-types": "true" }, // }); // const newLib = result.lines.join("\n").replaceAll("export ", ""); - // monaco?.languages.typescript.javascriptDefaults.addExtraLib(newLib); + // monaco?.languages.typescript.typescriptDefaults.addExtraLib(newLib); //} }; @@ -184,12 +180,11 @@ export default function useMonacoCustomizations({ .join("\n")} } `; - monaco?.languages.typescript.javascriptDefaults.addExtraLib(secretsDef); + monaco?.languages.typescript.typescriptDefaults.addExtraLib(secretsDef); } catch (error) { console.error("Could not set secret definitions: ", error); } }; - //TODO: types const setBaseDefinitions = () => { const rowDefinition = tableColumnsOrdered @@ -208,13 +203,13 @@ export default function useMonacoCustomizations({ .map((key) => `"${key}"`) .join("|\n"); - monaco?.languages.typescript.javascriptDefaults.addExtraLib( + monaco?.languages.typescript.typescriptDefaults.addExtraLib( ["/**", " * extensions type configuration", " */", extensionsDefs].join( "\n" ), "ts:filename/extensions.d.ts" ); - monaco?.languages.typescript.javascriptDefaults.addExtraLib( + monaco?.languages.typescript.typescriptDefaults.addExtraLib( [ "// basic types that are used in all places", "declare var require: any;", diff --git a/yarn.lock b/yarn.lock index 8ff8ab68..2fd3cb4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8961,7 +8961,7 @@ mkdirp@^0.5.1, mkdirp@~0.5.1: dependencies: minimist "^1.2.6" -monaco-editor-auto-typings@^0.4.0: +monaco-editor-auto-typings@^0.4.3: version "0.4.3" resolved "https://registry.yarnpkg.com/monaco-editor-auto-typings/-/monaco-editor-auto-typings-0.4.3.tgz#24498064ff876c641467815e65d54ae75f31cd7f" integrity sha512-7lpiWHkg8eX2DRJGApaFq1wGn95Ute3Xv4PLz36qFyTytzz86irjxwMl00JnOOGX/R0eUbfuudbEtkQh2VK9Gg==