Syntax Highlighting of TypeScript embedded in HTML doesn't work and textmate/html.tmbundle cannot be updated as it has been abandoned

[andy-preston]

Type: Bug

Steps to reproduce

1. Start a new .HTML file

2. Embed script with

<script type="text/typescript">
addEventListener("load", (event) => {
    const templates = document.getElementsByClassName("image-list");
    const selected = templates[0] as HTMLElement;
    console.log(selected.dataset.tag);
});
</script>

3. Semantic Highlighting works - but "normal" syntax highlighting does not.

Rationale for using this feature:

Although embedding TypeScript in HTML probably won't work in any browsers. It's very useful if the HTML is to be pre/post-processed before publishing to be able to have all the benefits of TypeScript while writing the scripts and have it compiled as part of the "site build" process.

I have an ESLint extension that validates <script> tags as plain JavaScript. but if the <script> tag is changed to <script type="text/typescript">, it validates it correctly as TypeScript.

Proof of Concept (Quick and Dirty) Fix

Edit the file /usr/share/codium/resources/app/extensions/html/syntaxes/html.tmLanguage.json (which is built from
https://github.com/microsoft/vscode/blob/main/extensions/html/syntaxes/html.tmLanguage.json) and replace the occurance of "livescript" with "typescript"

After saving and restarting, the syntax is highlighted as expected.

Long Term Fix

At https://github.com/microsoft/vscode/blob/df7e41cc5ae63ac4f74258ba098deb070acf5ac1/extensions/html/syntaxes/html.tmLanguage.json#L1944C1-L1944C1464

There is a long and complicated (what seems to be a) regular expression with all the text MIME types that the built-in HTML extension treats as javascript. "javascript", "jscript", "ecmascript", "livescript", etc.

Changing the part of this (very long) line that previously was

| jscript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | livescript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  |

to

| jscript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | typescript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | livescript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  |

provides a long term fix.

Your reference material

VSCodium version: VSCodium 1.80.2 (ad2ce925243280c8cd1054a2b27734e2b2e839c5, 2023-07-28T18:27:49.392Z)
OS version: Linux x64 5.15.0-78-generic
Modes:

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-3630QM CPU @ 2.40GHz (8 x 1300)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok video_decode: enabled video_encode: disabled_software vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	2, 3, 2
Memory (System)	7.21GB (5.19GB free)
Process Argv	--unity-launch
Screen Reader	no
VM	0%
DESKTOP_SESSION	xfce
XDG_CURRENT_DESKTOP	XFCE
XDG_SESSION_DESKTOP	xfce
XDG_SESSION_TYPE	x11

Extensions (28)

Extension	Author (truncated)	Version
openscad	Ant	1.2.1
markdown-mermaid	bie	1.19.0
better-toml	bun	0.3.2
arm	dan	1.4.0
vscode-markdownlint	Dav	0.49.0
vscode-eslint	dba	2.4.2
vscode-deno	den	3.20.0
vscode-phpmd	eco	1.2.0
prettier-vscode	esb	10.1.0
vscode-html-validate	htm	2.8.0
rest-client	hum	0.25.0
vscode-povray	jma	0.0.11
mips	kda	0.1.1
Kotlin	mat	1.7.1
git-graph	mhu	1.30.0
pylint	ms-	2023.6.0
python	ms-	2023.12.0
hexeditor	ms-	1.9.9
vetur	oct	0.37.3
vscode-thunder-client	ran	1.10.0
vscode-yaml	red	1.14.0
avr-support	roc	0.0.1
rust-analyzer	rus	0.4.1629
trailing-spaces	sha	0.4.1
phpcs	she	1.0.8
code-spell-checker	str	2.20.5
language-pascal	the	0.1.6
latex-support	tor	3.10.0

(1 theme extensions excluded)

[andy-preston]

microsoft/vscode#190829

[andy-preston]

My pull request for an update has been rejected by @aeschli

This html grammar has been converted from https://github.com/textmate/html.tmbundle/blob/master/Syntaxes/HTML.plist
If you want to provide a fix or improvement, please create a pull request against the original repository
Once accepted there, we are happy to receive an update request.

But the original repository is no longer accepting any changes.

On https://en.wikipedia.org/wiki/TextMate

In October 2021, the latest/last commit was made to GitHub, though no announcement has been made to the effect that the project has been officially abandoned and its source code is still publicly available.

Following the links on https://github.com/textmate/html.tmbundle/blob/master/README.mdown to styleguides for bug reports or pull requests (e.g.) http://kb.textmate.org/bundle_styleguide return a "domain not found" error.

[daiyam]

Similar issue than textmate/html.tmbundle#120 (opened since March 2022). Good luck!

You could create a patch to integrate your PR in VSCodium.

How to create a patch:

• run ./build/build_<os>.sh,
• run ./patch.sh <your patch's name>
• when the script pause at Press any key when the conflict have been resolved..., open vscode directory in VSCodium
• make all your edits
• run yarn watch
• run ./script/code.sh until everything ok
• press any key to continue the script patch.sh

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment, and we'll keep it open. If you have any new additional information, please include it with your comment!

[daiyam]

It's an upstream issue. Closing it.