[html] support imports in embedded JavaScript

[Krutsch]

• VSCode Version: 1.52.1
• OS Version: Windows 10.0.19042.685

Steps to Reproduce:

1. Create a HTML File with <script type="module">...</script>
2. Add // @ts-check and import any npm package
3. No intellisense

Does this issue occur when all extensions are disabled?: Yes

If we would do the same steps with a .js file, IntelliSense will work:

It is not working in .html however:

Error:
Cannot find module 'hydro-js'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?javascript

Tried troubleshooting:

1. Created a jsconfig.json file
2. Tried the above error suggestions.

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• HTML Intellisense NOT working as expected. (#111952)
• Problem with HTML syntax highlighter (#111394)
• [html] Support SCSS in HTML with <style type="text/scss"> (#57469)
• [html] support script type="text/html" (#77977)

[aeschli]

There's currently no plan to add cross-file support for HTML editing.

#47331 is the main issue

[ObscurusGrassator]

The principle of JSDoc is to document JavaScript code and help developers in the IDE. It doesn't matter where the JavaScript is located. Not supporting import in HTML files is a HUGE ISSUE. The HTML file is the originator of the JavaScript. Please plan to add this functionality, or let me contact the person who has it in its power and I may be able to change your priorities.
Thank you

[NWYLZW]

• vscode

  

• webstorm

  

[NWYLZW]

Window is the default type that does not compute?

[daKmoR]

There's currently no plan to add cross-file support for HTML editing.

is that still true?

if it is - I assume it's because it's hard to support... anyone got any hints why it's hard? I feels like it could "just" be a virtual js file (at the same file location) and then let the "normal" JS completion "handle it".

but yeah that doesn't work... I tried with embedded request forwarding

but even for the "simplest case"

👉 foo.js

export const foo = { on: 'foo', off: 'baz' }

👉 index.html1 // it also doesn't work for the built in .html language service

<script type="module">
   import { foo } from './foo.js';
   foo.o // no autocomplete for on/off
</script>

it won't follow imports 🙈

here is the relevant code for the request forwarding... am I doing something wrong? (I hope I do - or is it not supposed to work)

	workspace.registerTextDocumentContentProvider('embedded-content', {
		provideTextDocumentContent: uri => {
			const originalUri = uri.path.slice(1).slice(0, -3);
			const decodedUri = decodeURIComponent(originalUri);
			return virtualDocumentContents.get(decodedUri);
		}
	});

	const clientOptions: LanguageClientOptions = {
		documentSelector: [{ scheme: 'file', language: 'html1' }],
		middleware: {
			provideCompletionItem: async (document, position, context, token, next) => {
				const region = getDocumentRegions(htmlLanguageService, document);
				const type = region.getLanguageAtPosition(position);
				if (type === 'javascript') {
					const js = region.getEmbeddedDocument('javascript');
					const originalUri = document.uri.toString(true);
					virtualDocumentContents.set(originalUri, js.getText());
					const vdocUriString = `embedded-content://js/${encodeURIComponent(
						originalUri
					)}.js`;
					const vdocUri = Uri.parse(vdocUriString);
					return await commands.executeCommand<CompletionList>(
						'vscode.executeCompletionItemProvider',
						vdocUri,
						position,
						context.triggerCharacter
					);					
				}