initial autotyping work

Author: milomg

package.json

@@ -63,15 +63,25 @@
     "babel-preset-solid": "1.4.6",
     "dedent": "^0.7.0",
     "jszip": "^3.10.0",
+    "monaco-editor-auto-typings": "^0.4.2",
     "monaco-editor-textmate": "^3.0.0",
     "monaco-textmate": "^3.0.1",
     "onigasm": "^2.2.5",
+    "path": "^0.12.7",
     "prettier": "^2.7.1",
     "rollup": "^2.75.7",
     "solid-dismiss": "^1.2.1",
     "solid-heroicons": "^2.0.3",
     "solid-js": "1.4.6",
     "y-webrtc": "^10.2.3",
     "yjs": "^13.5.39"
+  },
+  "overrides": {
+    "monaco-editor": "~0.33.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "monaco-editor": "~0.33.0"
+    }
   }
 }

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import { Component, createEffect, onMount, onCleanup } from 'solid-js';
 import { Uri, languages, editor as mEditor } from 'monaco-editor';
 import { liftOff } from './setupSolid';
+import { AutoTypings, LocalStorageCache } from 'monaco-editor-auto-typings';
 import { useZoom } from '../../hooks/useZoom';
 
 const Editor: Component<{
@@ -64,23 +65,28 @@ const Editor: Component<{
       props.onDocChange?.(editor.getValue());
     });
   };
+  const autoTyper = async () => {
+    const autoTypings = await AutoTypings.create(editor, {
+      sourceCache: new LocalStorageCache(),
+      fileRootPath: 'file:///',
+      monaco: { languages, Uri, editor: mEditor } as any,
+    });
+    editor.onDidDispose(() => autoTypings.dispose());
+  };
 
   // Initialize Monaco
   onMount(() => setupEditor());
   onCleanup(() => editor?.dispose());
-
   createEffect(() => {
     editor.setModel(model());
     liftOff();
   });
-
+  onMount(() => autoTyper());
   createEffect(() => {
     mEditor.setTheme(props.isDark ? 'vs-dark-plus' : 'vs-light-plus');
   });
-
   createEffect(() => {
-    const fontSize = zoomState.fontSize;
-    editor.updateOptions({ fontSize });
+    editor.updateOptions({ fontSize: zoomState.fontSize });
   });
 
   createEffect(() => {

src/components/editor/index.tsx

@@ -7,60 +7,9 @@ import { wireTmGrammars } from 'monaco-editor-textmate';
 import onigasm from 'onigasm/lib/onigasm.wasm?url';
 import typescriptReactTM from './TypeScriptReact.tmLanguage.json';
 import cssTM from './css.tmLanguage.json';
-import sPackageJson from '/node_modules/solid-js/package.json?raw';
-import sWebPackageJson from '/node_modules/solid-js/web/package.json?raw';
 import sJsxRuntime from '/node_modules/solid-js/jsx-runtime.d.ts?raw';
-import sIndex from '/node_modules/solid-js/types/index.d.ts?raw';
-import sJsx from '/node_modules/solid-js/types/jsx.d.ts?raw';
-import sArray from '/node_modules/solid-js/types/reactive/array.d.ts?raw';
-import sObservable from '/node_modules/solid-js/types/reactive/observable.d.ts?raw';
-import sScheduler from '/node_modules/solid-js/types/reactive/scheduler.d.ts?raw';
-import sSignal from '/node_modules/solid-js/types/reactive/signal.d.ts?raw';
-import sComponent from '/node_modules/solid-js/types/render/component.d.ts?raw';
-import sFlow from '/node_modules/solid-js/types/render/flow.d.ts?raw';
-import sHydration from '/node_modules/solid-js/types/render/hydration.d.ts?raw';
-import sRenderIndex from '/node_modules/solid-js/types/render/index.d.ts?raw';
-import sSuspense from '/node_modules/solid-js/types/render/Suspense.d.ts?raw';
-import sClient from '/node_modules/solid-js/web/types/client.d.ts?raw';
-import sCore from '/node_modules/solid-js/web/types/core.d.ts?raw';
-import sWebIndex from '/node_modules/solid-js/web/types/index.d.ts?raw';
-import sWebJsx from '/node_modules/solid-js/web/types/jsx.d.ts?raw';
-import sServerMock from '/node_modules/solid-js/web/types/server-mock.d.ts?raw';
-import sStoreIndex from '/node_modules/solid-js/store/types/index.d.ts?raw';
-import sStateModifier from '/node_modules/solid-js/store/types/modifiers.d.ts?raw';
-import sMutable from '/node_modules/solid-js/store/types/mutable.d.ts?raw';
-import sServer from '/node_modules/solid-js/store/types/server.d.ts?raw';
-import sStore from '/node_modules/solid-js/store/types/store.d.ts?raw';
 
-// Tell monaco about the file from solid-js
-function cm(source: string, path: string) {
-  editor.createModel(source, 'typescript', Uri.parse(`file:///node_modules/solid-js/${path}`));
-}
-
-cm(sPackageJson, 'package.json');
-cm(sWebPackageJson, 'web/package.json');
-cm(sJsxRuntime, 'jsx-runtime.d.ts');
-cm(sIndex, 'types/index.d.ts');
-cm(sJsx, 'types/jsx.d.ts');
-cm(sArray, 'types/reactive/array.d.ts');
-cm(sObservable, 'types/reactive/mutable.d.ts');
-cm(sScheduler, 'types/reactive/scheduler.d.ts');
-cm(sSignal, 'types/reactive/signal.d.ts');
-cm(sComponent, 'types/render/component.d.ts');
-cm(sFlow, 'types/render/flow.d.ts');
-cm(sHydration, 'types/render/hydration.d.ts');
-cm(sRenderIndex, 'types/render/index.d.ts');
-cm(sSuspense, 'types/render/Suspense.d.ts');
-cm(sClient, 'web/types/client.d.ts');
-cm(sCore, 'web/types/core.d.ts');
-cm(sWebIndex, 'web/types/index.d.ts');
-cm(sWebJsx, 'web/types/jsx.d.ts');
-cm(sServerMock, 'web/types/server-mock.d.ts');
-cm(sStoreIndex, 'store/types/index.d.ts');
-cm(sStateModifier, 'store/types/modifiers.d.ts');
-cm(sMutable, 'store/types/mutable.d.ts');
-cm(sServer, 'store/types/server.d.ts');
-cm(sStore, 'store/types/store.d.ts');
+editor.createModel(sJsxRuntime, 'typescript', Uri.parse('file:///node_modules/solid-js/jsx-runtime.d.ts'));
 
 languages.typescript.typescriptDefaults.setEagerModelSync(true);
 

src/components/editor/setupSolid.ts

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "module": "ESNext",
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable", "WebWorker"],
     "allowSyntheticDefaultImports": true,
     "isolatedModules": true,
     "esModuleInterop": true,

tsconfig.json

@@ -5,9 +5,9 @@ import WindiCSS from 'vite-plugin-windicss';
 export default defineConfig((env) => ({
   plugins: [solidPlugin(), WindiCSS()],
   define: {
-    'process.env.BABEL_TYPES_8_BREAKING': 'true',
-    'process.env.NODE_DEBUG': 'false',
-    ...(env.command == 'build' ? {} : { global: 'globalThis' }),
+    ...(env.command == 'build'
+      ? { 'process.env.': '({}).', 'process.platform': '""' }
+      : { global: 'globalThis', process: JSON.stringify({ env: {} }) }),
   },
   build: {
     target: 'esnext',