initial autotyping work

Author: milomg

package.json

@@ -45,9 +45,11 @@
     "jszip": "^3.7.1",
     "mitt": "^3.0.0",
     "monaco-editor": "^0.31.1",
+    "monaco-editor-auto-typings": "^0.1.1",
     "monaco-editor-textmate": "^3.0.0",
     "monaco-textmate": "^3.0.1",
     "onigasm": "^2.2.5",
+    "path": "^0.12.7",
     "prettier": "^2.5.1",
     "register-service-worker": "^1.7.2",
     "rollup": "^2.62.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';
 
 interface Props {
@@ -80,23 +81,27 @@ const Editor: Component<Props> = (props) => {
 
     props.ref?.(editor);
   };
+  const autoTyper = () => {
+    const autoTypings = AutoTypings.create(editor, {
+      sourceCache: new LocalStorageCache(),
+      fileRootPath: 'file:///',
+    });
+    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 });
   });
 
   return (

src/components/editor/index.tsx

@@ -7,60 +7,13 @@ 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

@@ -4,9 +4,9 @@ import solidPlugin from 'vite-plugin-solid';
 export default defineConfig((env) => ({
   plugins: [solidPlugin()],
   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',