JS embedded in HTML lacks IntelliSense

[StevieD666]

Bug Description:
Languages that support embedded languages in an extension, when editing a part of a file where the embedded language is, IntelliSense doesn't work.

Steps to Reproduce:
Create a HTML file.
Add a SCRIPT tag.
Add some JavaScript code in the tag.
Initiate IntelliSense with Ctrl+Space, in VSCode the language Server is initiated and a list of attributes/functions are displayed, in theia it does not.

[marcdumais-work]

Thanks for registering this issue @StevieD666. If it's not too much trouble, I think a couple of short video or screenshots showing, in action, an example of the difference of suggested completion between vscode and a Theia app, would be interesting.

[marcdumais-work]

I was able to reproduce. Thanks @StevieD666 for adding screenshots on the forum discussion.

I noticed the following exception in the frontend, every time I try to complete inside a <script> block - probably a good place to start investigating:

[marcdumais-work]

I notice too that syntax highlight for embedded JS looks broken in the Theia app (based on latest next):

Theia app:

vscode:

not necessarily related though

[vince-fugnitto]

I just wanted to mention that both css and jquery completion items (embedded languages) work successfully.
The issue seems to be related to loading JS/TS completions:

[vince-fugnitto]

@marcdumais-work I believe it might be an issue on how we build and package the vscode-builtin-html-language-features extension (currently the only builtin which provides extensive embedded language-support), namely how typescript is added as a dependency.

Looking under the plugins/ directory for the builtin, I noticed that no bin directory is present, and the directory referenced by the extension itself is also missing:

https://github.com/microsoft/vscode/blob/d2a825f57e422e7b177fdb4ec4650e46f738240d/extensions/html-language-features/build/bundleTypeScriptLibraries.js#L15-L16

const TYPESCRIPT_LIB_SOURCE = path.join(__dirname, '../../node_modules/typescript/lib');
const TYPESCRIPT_LIB_DESTINATION = path.join(__dirname, '../server/build');

[marcdumais-work]

Good catch @vince-fugnitto .

const TYPESCRIPT_LIB_SOURCE = path.join(__dirname, '../../node_modules/typescript/lib');

Indeed, here, once packaged as a vsix extension, this path will not exist. The reason is that, for vscode, these extensions are never packaged, and so they share one typescript, in a node_modules one directory level above them. Unfortunately, in packaged extensions, that folder maps to each extension's extension folder, where nothing can be added as part of vsix packaging.

I think we can patch bundleTypeScriptLibraries.js after build to point to the typescript we already bundle with the extension, under server.

[StevieD666]

Thanks for the comments, so it looks like this isn't a global problem with all languages, just an issue with HTML and it's embedded languages?

[vince-fugnitto]

Thanks for the comments, so it looks like this isn't a global problem with all languages, just an issue with HTML and it's embedded languages?

@StevieD666 yes I believe so, more specifically an issue with embedded JS in HTML only (since both embedded CSS and JQuery work correctly). The builtins are special cases as they require some extra manipulation and tweaks in order for them to be isolated in a way (with their dependencies) so that they can be properly packaged and consumed. It looks like we need to update some of the build steps before attempting to package.

[marcdumais-work]

I did the below a while ago:

https://github.com/eclipse-theia/vscode-builtin-extensions/blob/master/src/package-vsix.js#L85-L87

I just retested using the Theia example application (built from master), and I no longer see this issue.

It uses this version of the html extension:
"vscode-builtin-html-language-features": "https://open-vsx.org/api/vscode/html-language-features/1.48.0-next.4a1bcdafe9/file/vscode.html-language-features-1.48.0-next.4a1bcdafe9.vsix"

[mig8447]

Hello, I cannot get this to work even though I imported the same version of the plugin in the Theia repository, could you help me figure out what's wrong?

[vince-fugnitto]

@marcdumais-work I confirmed that the original issue still persists (#35 (comment)), JS/TS completions for HTML do not seem to appear in the quick-suggestsions:

vscode (confirmed with all extensions disabled):

vscode-embedded.mp4

theia (confirmed with v1.50.0):

theia-embedded.mp4