lukasbach / monaco-editor-auto-typings Goto Github PK

Describe the bug
seems that it does not works when it comes to "react-dom/client"

To Reproduce
typing import ReactDOM from "react-dom/client" in the playground. https://lukasbach.github.io/monaco-editor-auto-typings/

Expected behavior
resolve typings for react-dom successfully.

Screenshots

Environment (please complete the following information):

• OS:
• Browser Version:
• monaco-editor-auto-typings Version: latest(0.4.3)

Additional context

Describe the bug
The demo version you have published does not work.

Expected behavior
React, express or any package types does not pulling. Even not working with default draft.

Environment (please complete the following information):

• OS: Windows 11
• Browser Version: Microsoft Edge 100.0.1185.29
• monaco-editor-auto-typings Version: v0.3.1

I think it should be caused by encoding the package name path when parsing the uri.
use "import * as sdk '@weapp/ecodesdk'" is not ok.

you can see , " import * as sdk from '%40weapp/ecodesdk'" is ok.

First thing first, thank you for your great library! Anyway, I'm struggling with setup for .js files. Description below.

Describe the bug
When I set default file as JavaScript, ts definitions are downloaded, but not applied for js imports (import is marked as unresolved)

To Reproduce
Load js file with some npm import

Expected behavior
import is correctly loaded from ts definitions

tsMode.js:8 Uncaught (in promise) Error: Could not find source file: 'inmemory://model/node_modules/react/package.json'.
    at Ve (tsWorker.js:254:8493)
    at Object.In [as getSyntacticDiagnostics] (tsWorker.js:254:13367)
    at Nm.getSyntacticDiagnostics (tsWorker.js:33954:2433)
    at y.fmr (workerMain.js:17:33335)
    at a._handleMessage (workerMain.js:13:97450)
    at Object.handleMessage (workerMain.js:13:97075)
    at C._handleRequestMessage (workerMain.js:13:93890)
    at C._handleMessage (workerMain.js:13:93344)
    at C.handleMessage (workerMain.js:13:93232)
    at a.onmessage (workerMain.js:13:97167)

I can see the models are there, but probably not attached to the editor or something?

Describe the bug
Go to the demo: https://lukasbach.github.io/monaco-editor-auto-typings/

types cannot be found for react

To Reproduce
Go to https://lukasbach.github.io/monaco-editor-auto-typings/

Hi, I use this package copy demo source code work well in monaco 0.26.x, but it too old, and upgrade monaco up to 0.32, it is not working. Can you upgrade dependency and fix it? Thanks.

Is your feature request related to a problem? Please describe.
none

Describe the solution you'd like
https://webcontainers.io/

Getting the full file by running a command like pnpm install in a browser might require bridging the editor's filesystem (createModel)?

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
I'm unable to import packages that have a (dependency or have a) node: prefix, and I want to be able to use node globals.

Describe the solution you'd like

• Support for node globals
• Support for importing from node: preifx
• An option in the config to toggle the node-env

Additional context
N/A

Sometimes it exceeds the quota, any way around this issue?

core.mjs:6461 ERROR Error: Uncaught (in promise): QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of '[email protected]/build/src/apis/paymentsresellersubscription/v1.d.ts' exceeded the quota.
Error: Failed to execute 'setItem' on 'Storage': Setting the value of '[email protected]/build/src/apis/paymentsresellersubscription/v1.d.ts' exceeded the quota.
    at LocalStorageCache.<anonymous> (LocalStorageCache.js:54:1)
    at step (LocalStorageCache.js:33:1)
    at Object.next (LocalStorageCache.js:14:46)
    at LocalStorageCache.js:8:1
    at new ZoneAwarePromise (zone.js:1427:1)
    at push.15145.__awaiter (LocalStorageCache.js:4:1)
    at push.15145.LocalStorageCache.storeFile (LocalStorageCache.js:52:1)
    at ImportResolver.<anonymous> (ImportResolver.js:544:1)
    at step (ImportResolver.js:67:1)
    at Object.next (ImportResolver.js:48:46)
    at resolvePromise (zone.js:1211:1)
    at new ZoneAwarePromise (zone.js:1430:1)
    at push.15145.__awaiter (LocalStorageCache.js:4:1)
    at push.15145.LocalStorageCache.storeFile (LocalStorageCache.js:52:1)
    at ImportResolver.<anonymous> (ImportResolver.js:544:1)
    at step (ImportResolver.js:67:1)
    at Object.next (ImportResolver.js:48:46)
    at fulfilled (ImportResolver.js:39:43)
    at _ZoneDelegate.invoke (zone.js:372:1)
    at Object.onInvoke (core.mjs:25457:1)

Describe the bug
After package is loaded the line pointer goes to first line defocusing user from what is currently typing

Not sure if bug or feature request... 🤔

Right now I'm unable to use monaco-editor-auto-typings with @monaco-editor/react because it makes some global CSS get imported from node_modules which is what NextJS doesn't like.

More precisely, monaco-editor-auto-typings imports monaco-editor in AutoTypings.ts which in turn indirectly imports global css in monaco-editor\esm\vs\base\browser\ui\actionbar\actionViewItems.js.

The solution would be to not import monaco-editor but that would break the fallback. Another solution would be to have another export (i.e. monaco-editor-auto-typings/nextjs) that doesn't auto-import monaco-editor but requires monaco instance to be passed in options.

Is there any chance to get monaco-editor-auto-typings working with NextJS ?

Describe the bug
I am trying to import type defs for zod package. But they do not seem to work properly.

To Reproduce
StackBlitz link: https://stackblitz.com/edit/vite-react-ts-bntgbg?file=src%2FApp.tsx

For some reason type of TObj is inferred as

type TObj = {
    [x: string]: any;
}

while it should be:

type TObj = {
    a: number;
}

Environment (please complete the following information):

• monaco-editor-auto-typings Version: latest(0.4.4)

Describe the bug
Unable to resolve node: packages

To Reproduce

1. Go to https://lukasbach.github.io/monaco-editor-auto-typings/
2. input the code import { readdirSync } from "node:fs"

Expected behavior
A clear and concise description of what you expected to happen.

Should load the typings for the fs module.

Screenshots
If applicable, add screenshots to help explain your problem. You can drag image files here to upload them to the issue.

Error other than 404 while fetching from Unpkg at https://unpkg.com/node:fs/package.json

Environment (please complete the following information):

• OS: MacOS 12.2
• Browser Version: Brave Version 1.39.111 Chromium: 102.0.5005.61 (Official Build) (arm64)
• monaco-editor-auto-typings Version: ^0.4.0

Describe the bug
Some libraries are now resolved correctly, for example: moment

To Reproduce

1. Go to playground and insert:

import moment from 'moment'

2. watch how libraries are correctly resolved in log sidebar
3. see typescript still complaining that he cannot find modules
4. see typescript cast all usages of such imports to any

Expected behavior
I expect typescript to resolve them correctly and not complain.

Screenshots

Environment (please complete the following information):

"monaco-editor": "0.34.0",
"monaco-editor-auto-typings": "^0.4.3",
"monaco-editor-webpack-plugin": "^7.0.1",

• OS: Windows

• Browser Version: Version 108.0.5359.125 (Official Build) (64-bit)

• monaco-editor-auto-typings Version: "^0.4.3"

Additional context
I am using custom compiler options:

languages.typescript.typescriptDefaults.setCompilerOptions({
  ...languages.typescript.typescriptDefaults.getCompilerOptions(),
  moduleResolution: 2,
  isolatedModules: false,
  allowSyntheticDefaultImports: true,
})

Describe the bug
Simply trying to instantiate the extension with a Monaco Editor instance in Svelte. Following the instructions in the readme

To Reproduce
Paste the following code into any svelte file. If not using svelte you should be able to copy and paste the imports and contents of the onMount function into any ts file and run from there.

<script lang="ts">
	import type monaco from 'monaco-editor';
	import { onMount } from 'svelte';
	import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
	import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
	import { AutoTypings } from 'monaco-editor-auto-typings';

	let divEl: HTMLDivElement;
	let editor: monaco.editor.IStandaloneCodeEditor;
	let monaco;

	onMount(async () => {
		self.MonacoEnvironment = {
			getWorker: function (_moduleId: any, label: string) {
				if (label === 'typescript' || label === 'javascript') {
					return new tsWorker();
				}
				return new editorWorker();
			}
		};

		monaco = await import('monaco-editor');

		const value = `import { onMount } from 'svelte'\nlet count = 0; \nfunction add() {\n\tcount++;\n\treturn count;\n}`;

		editor = monaco.editor.create(divEl, {
			model: monaco.editor.createModel(value, 'typescript')
		});

		const autoTypings = await AutoTypings.create(editor, {
			// sourceCache: new LocalStorageCache()
		});

		return () => {
			editor.dispose();
		};
	});
</script>

<div bind:this={divEl} />

Expected behavior
I'm expecting it to work like the demo, but I might be missing something that is causing the error. I double checked with the docs but it seems like what I have should be what's needed.

Screenshots
Getting this error in Chrome Dev Tools

Environment:

• OS: MacOS
• Browser Version: 116.0.5845.187 (Official Build) (arm64)
• monaco-editor-auto-typings Version: "^0.4.4",
• monaco-editor Version: "^0.43.0",

Is your feature request related to a problem? Please describe.
First off, thank you for the plugin this would cut down on the work needed for my project tremendously, thank you! This is somewhat related to the problem, after a package is "imported", how do we actually "run" / "build" it?
Describe the solution you'd like
A clear and concise description of what you want to happen.
After the user types for example:

import _ from 'lodash'
export default {
  run() {
    return _.map([1, 2], (n) => n * 2)
  }
}

how can I get the exported object as a javascript, bundled with lodash?
This most likely is out of scope of the plugin, I apologize if so, would love to get pointers to the right direction if you don't mind :)
Additional context

Describe the bug
When using packages created for the web, the initial index.d.ts file contains references to .js files. This results in errors resolving the files, because the extension is not removed when trying to append the .d.ts extension to the original file name.

To Reproduce

import * as DEFAULT from '@wonderlandengine/api'

Expected behavior
All typescript typing should be resolved correctly. Files referenced as .js from a .d.ts file should be tried to be loaded as .d.tsfiles instead of .js.d.ts;

Screenshots

Environment (please complete the following information):

• OS: MacOS 13.3.1
• Browser Version: Chrome Version 112.0.5615.137 (Official Build) (arm64)
• monaco-editor-auto-typings Version: 0.4.4

Additional context
I have created a hacky fix which basically checks if the filePath ends with .js and if the current append is .d.ts I am replacing .js with .d.ts instead of appending it.

I am happy to provide a PR if you like

Describe the bug
An error message appears on the console after using the plug-in：Could not resolve @types/scheduler/tracing/index.d.ts
This error also exists in the case，https://lukasbach.github.io/monaco-editor-auto-typings/#

Currently, types are only provided if the document language is TypeScript, however it would be nice if they were also provided for plain JavaScript documents.

The package declaration file can be injected into the memory normally, but the console reports an error：
ImportResolver.js:178 Error: Not implemented yet
at ImportResolver2.

This project looks super cool! I was looking at incorporating it into https://playground.solidjs.com, and was running into issues when importing solid-js and solid-js/web together. For example, try these two imports on the demo:

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

Maybe this is because the importer isn't finding the second package.json file at solid-js/web, or is parsing solid-js/web as solid-js but adding it a second time?

Error: ModelService: Cannot add model because it already exists!
    at ModelServiceImpl2._createModelData

If you have any advice about how to work around this (such as disabling imports for the solid-js package and manually adding those in myself), I would love to hear them.

After doing everything correctly, sometimes it's worth explicitly adding monaco into the config, as it could take another instance of monaco (this is what happened to me with my set up):

this.autoTypings = await AutoTypings.create(this.editor, {
      monaco,
      sourceCache: storage, // Cache loaded sources in localStorage. May be omitted
    });

Describe the bug
I'm using auto typings in combination with @monaco-editor/react, and my AutoTypings create config is following:

await AutoTypings.create(editor, { sourceCache: new LocalStorageCache(), monaco, versions: { apify: '2.3.2' }, preloadPackages: true });

So I would expect [email protected] is downloaded, but instead, latest [email protected] is downloaded (and cached).

To Reproduce
Set different major version for any package, try to fetch its types

Expected behavior
Different version types is fetched

Environment (please complete the following information):
React 17.0.2 /w CRA

• OS: macOS
• Browser Version: Chromium 103
• monaco-editor-auto-typings Version: 0.4.2

Describe the bug

The following package cannot be resolved:
A package which does not have the types or typings field, but has index.d.ts in the project

Example repository:
Notice how it has the TS icon

https://www.npmjs.com/package/pure-svg-code

Github Repo: https://github.com/gwuhaolin/pure-svg-code

To Reproduce

import {} from 'pure-svg-code'

Expected behavior
Types should work

• OS:
• Browser Version:
• monaco-editor-auto-typings Version: 0.4.4

I'm using esbuild + @monaco-editor/react (which configures the loader correctly).

After including monaco-editor-auto-typings, I started receiving worker errors. I discovered this is because you import monaco-editor directly using a runtime import, which messes something up.

Luckily, there is a monaco option in monaco-editor-auto-typings to provide own instance. It would be nice if it was documented.

Describe the bug
It appears that @types/node has reference imports that are absolute instead of relative, this means they are thought of as separate packages, and a separate import is attempted for a package that doesn't exist.

Not sure if other packages do this, maybe we can treat absolute with the .d.ts extension as a root import, or other smarts are required.

I resolved the issue myself by extending the sourceResolver and adding:

let uResolved = await super.resolveSourceFile(
  packageName,
  version,
  path
);
if (packageName === "@types/node") {
  // Fix up the reference imports, they seem to be broken
  // Since they are absolute
  uResolved = uResolved?.replaceAll(
    /reference path="/g,
    'reference path="./'
  );
}
return uResolved;

See declaration: https://unpkg.com/@types/[email protected]/index.d.ts

To Reproduce
Import @types/node via versions object, and check our the console/network tab.

Expected behavior
Imports the file correctly.

Screenshots
If applicable, add screenshots to help explain your problem. You can drag image files here to upload them to the issue.

Environment (please complete the following information):

• OS: MacOS
• Browser Version: MS Edge 111.0.1661.54
• monaco-editor-auto-typings Version: 0.4.3

Additional context
Add any other context about the problem here.

I'm also having the error as #9, 'path.dirname is not a function'. I have tried importing from 'monaco-editor-auto-typings/custom-editor' and passing in a monaco instance.

I am using Lit, TS & Vite and the latest version of monaco-editor-auto-typings.

Uncaught (in promise) TypeError: path.dirname is not a function
at AutoTypingsCore2. (chunk-D6HROQ3V.js?v=c1a822df:1459:94)
at step (chunk-D6HROQ3V.js?v=c1a822df:1308:23)
at Object.next (chunk-D6HROQ3V.js?v=c1a822df:1255:18)
at chunk-D6HROQ3V.js?v=c1a822df:1241:71
at new Promise ()
at __awaiter (chunk-D6HROQ3V.js?v=c1a822df:1223:14)
at AutoTypingsCore2.resolveContents (chunk-D6HROQ3V.js?v=c1a822df:1442:16)
at new AutoTypingsCore2 (chunk-D6HROQ3V.js?v=c1a822df:1353:14)
at Function. (chunk-D6HROQ3V.js?v=c1a822df:1370:24)
at step (chunk-D6HROQ3V.js?v=c1a822df:1308:23)

Here's a minimal repro

I am not savvy when it comes to build processes, so maybe there is a Vite/Rollup setting I'm missing.

Any tips appreciated! :)

Describe the bug
react import not being resolved for some reason

To Reproduce
Go to https://lukasbach.github.io/monaco-editor-auto-typings/ on Google Chrome latest version as of 9/15/23

Expected behavior
Expected react import to be resolved.

Environment (please complete the following information):

• OS: macOS Version 13.4.1
• Browser Version: Google Chrome | 117.0.5938.62 (Official Build) (arm64)
• monaco-editor-auto-typings Version: ???
  .

In my case, there's a package that's virtual, Doesn't exist in npm, so I already have the types handled in my instance, is there a way to tell this package to ignore some packages, maybe by regex?

Describe the bug
Unable to load @types/lodash reference command not recognized successfully

To Reproduce
https://lukasbach.github.io/monaco-editor-auto-typings/#

type import _ from "lodash"

Screenshots

Trying this out with @monaco-editor/react and getting this error:

import React, { useCallback, useEffect, useRef } from "react";

import { AutoTypings, LocalStorageCache } from "monaco-editor-auto-typings";
import Editor, { useMonaco } from "@monaco-editor/react";

const defaultCode = `import React from "react";

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}

`;

export default function App() {
  const monaco = useMonaco();
  const editorRef = useRef(null);

  const onMount = useCallback(
    (editor, monaco) => {
      // here is the editor instance
      // you can store it in `useRef` for further usage
      editorRef.current = editor;
    },
    [editorRef]
  );

  const onChange = useCallback((value, event) => {
    //
  }, []);

  useEffect(() => {
    if (monaco) {
      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
        jsx: monaco.languages.typescript.JsxEmit.React,
        moduleResolution:
          monaco.languages.typescript.ModuleResolutionKind.NodeJs,
      });

      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
        noSemanticValidation: false,
        noSyntaxValidation: false,
      });

      if (editorRef.current) {
        AutoTypings.create(editorRef.current as any, {
          sourceCache: new LocalStorageCache(),
          onlySpecifiedPackages: true,
          preloadPackages: true,
        });
      }
    }
  }, [monaco]);

  return (
    <Editor
      height="100vh"
      theme="vs-dark"
      defaultPath="app.tsx"
      defaultLanguage="typescript"
      defaultValue={defaultCode}
      onChange={onChange}
      onMount={onMount}
    />
  );
}

no errors ocurred, but no packages typed, i have spent lots of time on it .

I am writing a web ide, and I use this plugin for the first time. I want to reload all package versions after I setversions. For example, react has been loaded at this time. When setversions, there is no react dependency, so monaco needs to reload The import of react is marked in red