implement auto typing for await import

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",

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<EditorProps>,
@@ -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",
           }}
         />
 

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;",

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==