Enable your extension to run on VS Code for the web #39

tanhakabir · 2021-09-14T21:26:44Z

I'm part of the VS Code team and we recently launched VS Code for the web with github.dev! You can read the full guide for extension authors creating and migrating extensions here: Web Extensions

In hopes to help you migrate I helped make the changes necessary to make your extensions work on the web.

The changes I made:

Modify webpack bundling to create web and desktop friendly versions of your extension
Add the necessary dependencies for web bundling
Add fallback for node library os with os-browsersify
Add the browser entry point to your package.json to link to the web-friendly compiled extension
Add some folders/files to ignore in your .gitignore and .vscodeignore

You can test your extension with a launch configuration or vscode-test-web. Learn more on the docs.

jgclark · 2021-09-16T05:46:07Z

Thanks.
When I try compiling your changes I'm getting a variety of errors and warnings which I'm trying to resolve.
These two relate to lines you added:

npm WARN deprecated [email protected]: vscode-test-web is no longer maintained, use @vscode/test-web instead
npm WARN deprecated [email protected]: This package is deprecated in favor of @types/vscode and vscode-test. For more information please read: https://code.visualstudio.com/updates/v1_36#_splitting-vscode-package-into-typesvscode-and-vscodetest

When I try packaging I also get this error:
ERROR @types/vscode ^1.60.0 greater than engines.vscode ^1.5.0.

I'm the maintainer, not the author, of this extension, so I'm out of my depth on all this. Please advise.

jgclark · 2021-09-20T09:26:20Z

Thanks, @tanhakabir, and I hope my follow-up questions make sense.

tanhakabir · 2021-09-27T14:53:31Z

No worries! I was out on vacation but can help you today!

jgclark · 2021-09-27T21:36:45Z

Thank you. Please see my earlier questions for where I need more guidance. I'm sorry that it will be basic things about the environment, but at least they should be easy to resolve, as you've clearly done the hard work already.

tanhakabir · 2021-09-27T23:11:18Z

No worries! I addressed the error and warning you had posted

jgclark · 2021-09-28T21:40:15Z

Many thanks. This now builds correctly.
This build, though, is exhibiting a new visual bug, and so I can't release it yet.
Every numeral in the code window (currently only tested on non-web version) gets highlighted using the defaultStyle that this extension sets up, without me specifiying it should highlight this. In fact it happens without any configuration at all. For example:

I can't yet see any code changes that would trigger this, but I've tried it on an Intel and an M1 Mac, and both are exhibiting this effect.
While I continue to try to figure out what's changed, could you please try installing the v2.1.0 VSIX I'm about to commit into this branch, and turn on the extension (TODO-Highlight: Toggle highlight) and see if it highlights numerals?

jgclark · 2021-09-28T21:50:55Z

I then noticed that this new build was then ignoring all highlights that I set up under various keywords.

So I then reverted the only change of yours it could be, though it seemed very unlikely to be a problem, and that did fix the problem .
In src/util.js you changed
keywords.forEach((v) => {
to
Object.keys(keywords).forEach((v) => {

I'm not sufficiently familiar with JS to know why you wanted to make this change -- can you explain please? And any idea why this would in fact then ignore the keywords? Thanks, @tanhakabir.

jgclark · 2021-09-28T22:18:02Z

I have now tried to follow the instructions you linked to to test this in web mode using @vscode/test-web

However, I got this error: Activating extension 'jgclark.vscode-todo-highlight' failed: Invalid regular expression: invalid group specifier name, but without any information in the Output or Error sections, I don't know how to start fixing this. Please have a look.

tanhakabir · 2021-09-29T22:13:37Z

@jgclark Hmm I can't seem to repro the colors issue you mentioned. I see this for the // TODO:

and nothing highlighted for numbers:

In regards to why I set Object.keys(keywords).forEach((v) => {, it's because keywords was an object and not a list of strings which the body of the for loop expected. This is the object i see for keywords:

So I used Object.keys(keywords) to get "TODO", "FIXME", etc.

Activating extension 'jgclark.vscode-todo-highlight' failed: Invalid regular expression: invalid group specifier name

For this specific issue, I'm not sure. Would you be able to create an issue here to get more help? https://github.com/microsoft/vscode-test-web

jgclark · 2021-10-01T20:00:10Z

Thanks for your help, @tanhakabir.
I've tried a few more times, and your changes make sense, but still completely break the extension, and when I revert that one line it works again.
I've tried setting it up for debugging an extension, but I can't find documentation to guide me on setting up tasks.json.
I've clearly hit the limit of my understanding, and will can't take this particular issue further.

elazarcoh · 2022-01-12T21:54:37Z

@jgclark regarding the Object.keys(keywords), it's a bug in the package.json file. It should be an array, rather as an object.

PR #38 fixes it.
I suggest, pick up PR #38 first, then try to apply this one. (I can try to help if you want, though I never wrote an extension for the web.)

alkatar21 · 2022-10-29T15:02:46Z

@jgclark The Objects.keys(keyword) Problem should now be fixed here.

jgclark · 2022-10-29T15:13:24Z

Thank you, @alkatar21. As you can see I'm finally getting back to the overdue changes on this. As it looks like you're still interested in moving this forward would you please drop me a line at [email protected] so I could check one detail with you? Thanks.

alkatar21 · 2022-10-29T15:35:05Z

I wrote you and maybe @elazarcoh can also help, as he at least knows js?

jgclark · 2022-10-29T22:44:59Z

@alkatar21 Thanks -- but haven't received any emails (and have checked spam).
All I was going to do was to see whether you would be confident to check PRs for this project and merge, if I give you those permissions?
Same question to @elazarcoh ...

elazarcoh · 2022-10-30T04:18:36Z

I can help, though I can't promise to be fast to respond. I'm fairly busy these days.

alkatar21 · 2022-10-30T10:56:52Z

@jgclark I sent you another email. I clicked on the email, so there should be no typo in there from my side. The subject of the email is github vscode-todo-highlight.

I can try to check PRs for this project and merge as long as I am sure they are ok. But like @elazarcoh I'm fairly busy these days.

jgclark · 2023-04-13T15:40:50Z

@elazarcoh and @alkatar21 I have picked this up again, as I have a few days holiday. I released some smaller pending updates yesterday, but all the discussed issues and PRs aren't ready for one reason or another.

I've looked at the line referred to several times above, and when I change it to what you've suggested, it still highlights the wrong things, as it then only produces text for single digits starting at 0. Now I know more JS, I see that the original is handling the objects properly, but it takes a line or two to get there.

You emailed me @alkatar21, but I've checked again and I can't see the message, sorry.
I see on @elazarcoh's profile your email address. So I will now try giving you extra permissions on this repo.

elazarcoh · 2023-04-13T18:08:19Z

I see it's working on the web (using https://github.com/microsoft/vscode-test-web).
I did remove some dependencies and cleared dist to make npm and webpack happy for building it.
The only bug in the code was:

    Object.keys(keywords).forEach((v) => {     // <--- need to uncomment this and commnet/remove the next line
    // keywords.forEach((v) => {

jgclark · 2023-04-13T20:47:11Z

I see it's working on the web (using https://github.com/microsoft/vscode-test-web). I did remove some dependencies and cleared dist to make npm and webpack happy for building it.

Many thanks for picking this up again so quickly. Glad it's working for you.

The only bug in the code was:

    Object.keys(keywords).forEach((v) => {     // <--- need to uncomment this and commnet/remove the next line
    // keywords.forEach((v) => {

I still don't understand how it can fail for me but be OK for you and others. But never mind, please go ahead and create and commit a VSIX for this and I will try to test that and give feedback.

elazarcoh · 2023-04-14T05:03:00Z

@jgclark let me know if the vsix works.

jgclark · 2023-04-14T11:02:09Z

@jgclark let me know if the vsix works.

Sorry, it doesn't. None of my highlights then work, and instead it does the same thing as I showed in a screenshot on "Sep 28, 2021" above, with same analysis as yesterday. With difficulty I managed to sometimes get the debugging view, and I could see that one of the variables (I forget if it was v or keyword) only produces text for single digits starting at 0. You can see in the screenshot that that's only what is then highlighted. I repeat it's this single line that's doing it ... when I switch it back to the original, it works as expected.

This difference in behaviour is rather bizarre. So I've attached the part of my settings file that's relevant for you to try on your system.
jgclark-settings-for-elazarcoh.txt

elazarcoh · 2023-04-16T17:23:16Z

Alright. I noticed something incoherent with the configuration of the extension.

"todohighlight.keywords": {
  "type": "array",
  // ...
  },
  "default": {
    "TODO:": {
      "text": "TODO:",
      "color": "#fff",
      "backgroundColor": "#ffbd2a",
      "overviewRulerColor": "rgba(255,189,42,0.8)"
    },
    "FIXME:": {
      "text": "FIXME:",
      "color": "#fff",
      "backgroundColor": "#f06292",
      "overviewRulerColor": "rgba(240,98,146,0.8)"
    }
  }
}

Note that the type of the config is "array", but the default is "object".

I pushed a fix for it, along with a vsix.

alkatar21 · 2023-04-16T19:07:27Z

@elazarcoh I think this PR was not rebased to the current master? Because that was fixed in #62.

alkatar21 · 2023-04-16T19:14:48Z

You emailed me Alkatar21, but I've checked again and I can't see the message, sorry.

@jgclark I have tried it again with subject vscode-todo-highlight to [email protected]. Maybe the Spam filter blocks the message for some reason?

@tanhakabir

Commit test v2.1.0 for unwanted numeral colour by @tanhakabir

elazarcoh · 2023-04-16T20:45:20Z

Don't merge yet. Something got messed up with all the rebase.

jgclark · 2023-04-16T20:46:47Z

You emailed me Alkatar21, but I've checked again and I can't see the message, sorry.

@jgclark I have tried it again with subject vscode-todo-highlight to [email protected]. Maybe the Spam filter blocks the message for some reason?

Thanks. Have found it this time, and have invited you as a collaborator ... sorry it's taken so long!

elazarcoh · 2023-04-16T20:53:43Z

I think I'll make another PR for it. This one has too many conflicting commits to the master, and it makes the rebase easy to fail.

jgclark · 2023-04-16T21:08:08Z

Thanks, @elazarcoh, that sounds like a good idea.
I know the basics of git, but I was nervous on seeing "6 commits ahead; 46 behind". And when I tried to pull down your changes I couldn't because of "divergent branches". I wasn't confident to work out how to resolve this, so I'll wait until you've got something new.

I did get as far as finding the git log --branches --not --remotes command, which reveals the 6 commits are:

commit ae4dc410efe0c2b921530a270154763e3ef8c141 (HEAD -> pr/39)
Author: Elazar Cohen <[email protected]>
Date:   Fri Apr 14 07:50:37 2023 +0300

    create vsix which works for web

commit 5e37ca6cf44e454665efdfc7570ce0a1b72db76b
Author: jgclark <[email protected]>
Date:   Wed Apr 12 16:51:29 2023 +0100

    Work in progress from ages ago; wasn't working when left.

commit d9ffd6254f5aa5150406b0ee8506752d42adaf46
Author: jgclark <[email protected]>
Date:   Sun Dec 5 17:19:19 2021 +0000

    Update README #43

commit ed3a5f06e220059400b0bf5379d88aa559b0cbde
Author: jgclark <[email protected]>
Date:   Tue Sep 28 22:41:06 2021 +0100

    Test for numeral colouring

    Commit test v2.1.0 for unwanted numeral colour by @tanhakabir

commit b5ece448061b15b8be259725491e7b44994fc085
Author: tanhakabir <[email protected]>
Date:   Mon Sep 27 16:10:49 2021 -0700

    Fix dependencies and env

commit 5a289ee115103ee399f46f4c1e27ea2462977ba0
Author: tanhakabir <[email protected]>
Date:   Tue Sep 14 14:22:04 2021 -0700

    enable for web

Should I just discard these changes?

AdamRaichu · 2023-04-16T22:21:20Z

I take it this isn't accurate lol?

elazarcoh · 2023-04-17T05:09:16Z

Opened a new PR #73

AdamRaichu approved these changes Dec 22, 2022

View reviewed changes

elazarcoh force-pushed the web branch from 8a412c5 to 2e610a8 Compare April 16, 2023 20:19

tanhakabir and others added 3 commits April 16, 2023 23:23

enable for web

47c8634

Fix dependencies and env

caae89c

Test for numeral colouring

5d005a3

Commit test v2.1.0 for unwanted numeral colour by @tanhakabir

jgclark and others added 10 commits April 16, 2023 23:26

Update README jgclark#43

de16b49

Work in progress from ages ago; wasn't working when left.

e3769e8

create vsix which works for web

b14c5b7

fix web by replacing "process" with feature detection

71c42a2

update vsix

a689fcf

remove dist

77446fe

remove vsix

15e0e88

lock

8ee4434

update vscode launch

6984635

add latest vsix

0b04088

elazarcoh force-pushed the web branch from 2e610a8 to 0b04088 Compare April 16, 2023 20:27

elazarcoh mentioned this pull request Apr 17, 2023

Run in web #73

Open

rifandani mentioned this pull request Nov 28, 2023

Support vscode extension for web rifandani/vscode-ecosystem#6

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable your extension to run on VS Code for the web #39

Enable your extension to run on VS Code for the web #39

tanhakabir commented Sep 14, 2021

jgclark commented Sep 16, 2021

jgclark commented Sep 20, 2021 via email

tanhakabir commented Sep 27, 2021

jgclark commented Sep 27, 2021

tanhakabir commented Sep 27, 2021

jgclark commented Sep 28, 2021

jgclark commented Sep 28, 2021

jgclark commented Sep 28, 2021

tanhakabir commented Sep 29, 2021

jgclark commented Oct 1, 2021

elazarcoh commented Jan 12, 2022 •

edited

Loading

alkatar21 commented Oct 29, 2022

jgclark commented Oct 29, 2022

alkatar21 commented Oct 29, 2022

jgclark commented Oct 29, 2022

elazarcoh commented Oct 30, 2022

alkatar21 commented Oct 30, 2022

jgclark commented Apr 13, 2023

elazarcoh commented Apr 13, 2023

jgclark commented Apr 13, 2023

elazarcoh commented Apr 14, 2023

jgclark commented Apr 14, 2023

elazarcoh commented Apr 16, 2023

alkatar21 commented Apr 16, 2023

alkatar21 commented Apr 16, 2023

elazarcoh commented Apr 16, 2023

jgclark commented Apr 16, 2023

elazarcoh commented Apr 16, 2023

jgclark commented Apr 16, 2023 •

edited

Loading

AdamRaichu commented Apr 16, 2023

elazarcoh commented Apr 17, 2023

Enable your extension to run on VS Code for the web #39

Are you sure you want to change the base?

Enable your extension to run on VS Code for the web #39

Conversation

tanhakabir commented Sep 14, 2021

jgclark commented Sep 16, 2021

jgclark commented Sep 20, 2021 via email

tanhakabir commented Sep 27, 2021

jgclark commented Sep 27, 2021

tanhakabir commented Sep 27, 2021

jgclark commented Sep 28, 2021

jgclark commented Sep 28, 2021

jgclark commented Sep 28, 2021

tanhakabir commented Sep 29, 2021

jgclark commented Oct 1, 2021

elazarcoh commented Jan 12, 2022 • edited Loading

alkatar21 commented Oct 29, 2022

jgclark commented Oct 29, 2022

alkatar21 commented Oct 29, 2022

jgclark commented Oct 29, 2022

elazarcoh commented Oct 30, 2022

alkatar21 commented Oct 30, 2022

jgclark commented Apr 13, 2023

elazarcoh commented Apr 13, 2023

jgclark commented Apr 13, 2023

elazarcoh commented Apr 14, 2023

jgclark commented Apr 14, 2023

elazarcoh commented Apr 16, 2023

alkatar21 commented Apr 16, 2023

alkatar21 commented Apr 16, 2023

elazarcoh commented Apr 16, 2023

jgclark commented Apr 16, 2023

elazarcoh commented Apr 16, 2023

jgclark commented Apr 16, 2023 • edited Loading

AdamRaichu commented Apr 16, 2023

elazarcoh commented Apr 17, 2023

elazarcoh commented Jan 12, 2022 •

edited

Loading

jgclark commented Apr 16, 2023 •

edited

Loading