felx-b / vscode-web Goto Github PK

@Felx-B First of all: AMAZING PROJECT!

I want to use the latest vscode version (1.91.1 as of writing this) when compiling there seems to be an issue with the workbench.ts implementation (Imports are not fitting to the latest version).
The https://github.com/zorse-code/vscode-web fork seems to have fixed that already and also introduced some nice additions to the build. I think it would be very nice if we can include these improvements in your main repo. Especially:

• Removes all sourcemap and other metadata for performance / hosting.
• Minor changes here and there to support various Zorse features.
• Tweaked sandbox features suitable for single-host deployments.

The recommended value for window.VSCODE_WEB_PUBLIC_URL is:

`${window.location.protocol}//${window.location.host}${window.location.pathname}/...`;
// example: http://localhost/.../out/vs/workbench/contrib/webview/browser/pre/

It also includes log messages that help debugging build issues. Also the build.js just considers the target version from package.json and no constant that needs to be changed when a new version should be compiled.

I open a PR that addresses these points. Most important ofc is the fix of the workbench.ts because that actually allows to compile with never versions of vscode web.

Cheers!
Thorsten

Hi there, thank you very much for building this awesome library 👍
I am having a few questions and it would be great if you could answer them :)

• Could you please provide us with examples of how to implement the FileSystemProvider APIs? If I would like to implement it based on your sample directory, then what should I do?
• Could you please provided us with examples of how to add vscode extensions (for web only of course) to your sample?
• How to enable the extension market in your sample?
• Is there a way to configure the welcome page on startup directly using vscode-web package?

Thank you!

Hi,
There is a usecase where user has a remote machine (or just remote container) and they want vscode-web can connect to it so that when open terminal on vscode-web, it will open terminal on that remote machine.
Can we do that with VsCode-web?

Thank!

I have a web-based file open dialog I'd like to use to open files for VS Code for the We. I know it is possible, but right now I'm doing it using a dynamic chain of MutationObservers that watch and modify the vscode ui on the fly as menus are created and destroyed. It's a crazy amount of logistics, so I was wondering if anyone here knows if VS Code for the Web provides a better way of doing that. If not I'll just continue using black magic to control chaos. #pleasesaveme

Hi, I tried to run the sample, but I saw some errors related to http://localhost:8080/manifest.json, http://localhost:8080/myExt/nls.metadata.json 404 Not Found!

Steps of reproduce.

1. git clone [email protected]:Felx-B/vscode-web.git
2. cd vscode-web/sample
3. yarn
4. yarn sample
5. Open http://localhost:8080 in browser.

How to use this package in our codebase? There is no instruction

I don't know when this was introduced, but the stock workbench.ts will pull config from a data attribute of an element with id vscode-workbench-web-configuration. So I do a synchronous fetch of product.json (though maybe better to name workbench.json) in the index.html before the VSCode sources are loaded. If I understand correctly, this achieves the same result of the patched workbench.ts you have without patching/replacing it.

https://github.com/progrium/vscode-web/blob/main/patched/index.html#L27-L40

I have built following the instructions, but am wondering how to open this without the sample-folder project. I also would like to know how to open a folder or file that exists on my harddrive? Sorry for the very basic question, and thanks!

It's 5 month ago.

cd ./sample
yarn ok
yarn sample ok
http://127.0.0.1:8080 ok
cd ..
yarn ok
yarn build err
###########################
this is log
yarn run v1.22.18
$ node build.js
$ node --max_old_space_size=8192 ./node_modules/gulp/bin/gulp.js vscode-web-min
Error: Cannot find module 'vscode-gulp-watch'
Require stack:

• /home/cws/vscode-web-1.67.1/vscode/build/lib/watch/index.js
• /home/cws/vscode-web-1.67.1/vscode/build/lib/compilation.js
• /home/cws/vscode-web-1.67.1/vscode/build/gulpfile.js
• /home/cws/vscode-web-1.67.1/vscode/gulpfile.js
• /home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/lib/shared/require-or-import.js
• /home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js
• /home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/index.js
• /home/cws/vscode-web-1.67.1/vscode/node_modules/gulp/bin/gulp.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
  at Function.Module._load (internal/modules/cjs/loader.js:746:27)
  at Module.require (internal/modules/cjs/loader.js:974:19)
  at require (internal/modules/cjs/helpers.js:101:18)
  at Object. (/home/cws/vscode-web-1.67.1/vscode/build/lib/watch/index.js:6:73)
  at Module._compile (internal/modules/cjs/loader.js:1085:14)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
  at Module.load (internal/modules/cjs/loader.js:950:32)
  at Function.Module._load (internal/modules/cjs/loader.js:790:12)
  at Module.require (internal/modules/cjs/loader.js:974:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  '/home/cws/vscode-web-1.67.1/vscode/build/lib/watch/index.js',
  '/home/cws/vscode-web-1.67.1/vscode/build/lib/compilation.js',
  '/home/cws/vscode-web-1.67.1/vscode/build/gulpfile.js',
  '/home/cws/vscode-web-1.67.1/vscode/gulpfile.js',
  '/home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/lib/shared/require-or-import.js',
  '/home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js',
  '/home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/index.js',
  '/home/cws/vscode-web-1.67.1/vscode/node_modules/gulp/bin/gulp.js'
  ]
  }
  error Command failed with exit code 1.
  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  child_process.js:866
  throw err;
  ^

Error: Command failed: yarn gulp vscode-web-min
at checkExecSyncError (child_process.js:790:11)
at Object.execSync (child_process.js:863:15)
at Object. (/home/cws/vscode-web-1.67.1/build.js:25:15)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)
at internal/main/run_main_module.js:17:47 {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 23578,
stdout: null,
stderr: null
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Can you provide the source code for the extension.js?

I want to learn how to implement the fsprovider.

Thanks.

Heyo,

I got a problem while setting up a Docker container for that repository with newer NodeJS 19.

yarn run v1.22.19
$ node build.js --ignore-engines
Cloning into 'vscode'...
Note: switching to '441438abd1ac652551dbe4d408dfcec8a499b8bf'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false

$ node build/npm/preinstall.js
*** Warning: Versions of node.js >= 17 have not been tested.
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^14 || ^16 || ^17 || ^18". Got "19.7.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
node:child_process:960
    throw err;
    ^

Error: Command failed: yarn
    at checkExecSyncError (node:child_process:885:11)
    at Object.execSync (node:child_process:957:15)
    at Object.<anonymous> (/app/build.js:16:17)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 29,
  stdout: null,
  stderr: null
}

Node.js v19.7.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: building at STEP "RUN yarn build --ignore-engines": while running runtime: exit status 1

Full log:

STEP 1/10: FROM artixlinux/yay
STEP 2/10: USER root
--> Using cache d5b29be367c23a78e135f0cf03683b88a9df6f08f9473de60c7e93745f60adf4
--> d5b29be367c
STEP 3/10: WORKDIR /
--> Using cache 33c7bcd4d3dc0414332ad3e18284933ebbf6765ae30ac1d76bc46924524ad074
--> 33c7bcd4d3d
STEP 4/10: RUN git clone https://github.com/Felx-B/vscode-web app
--> Using cache e3c6aa3454f7ebc4ae0579b26b05128dcb3f39950075cdaaced22e2a9b8c2daa
--> e3c6aa3454f
STEP 5/10: WORKDIR /app
--> Using cache 3a8ffbc1608497c114b674b54edaf11e2c1753680547af20de8d957b8b5e76da
--> 3a8ffbc1608
STEP 6/10: RUN pacman -Syu --noconfirm yarn nodejs npm
--> Using cache ac6503fd2b1041fe9a2096a7b457bc1f9be9a763adef0c04b377a04e26cb9305
--> ac6503fd2b1
STEP 7/10: RUN yarn --ignore-engines
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 2.23s.
--> 0edfffc8819
STEP 8/10: RUN yarn build --ignore-engines
yarn run v1.22.19
$ node build.js --ignore-engines
Cloning into 'vscode'...
Note: switching to '441438abd1ac652551dbe4d408dfcec8a499b8bf'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false

$ node build/npm/preinstall.js
*** Warning: Versions of node.js >= 17 have not been tested.
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^14 || ^16 || ^17 || ^18". Got "19.7.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
node:child_process:960
    throw err;
    ^

Error: Command failed: yarn
    at checkExecSyncError (node:child_process:885:11)
    at Object.execSync (node:child_process:957:15)
    at Object.<anonymous> (/app/build.js:16:17)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 29,
  stdout: null,
  stderr: null
}

Node.js v19.7.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: building at STEP "RUN yarn build --ignore-engines": while running runtime: exit status 1

Dockerfile configuration:

FROM artixlinux/yay

USER root

WORKDIR /

RUN git clone https://github.com/Felx-B/vscode-web app

WORKDIR /app

RUN pacman -Syu --noconfirm yarn nodejs npm

RUN yarn --ignore-engines
RUN yarn build --ignore-engines
RUN yarn prepare-demo --ignore-engines

CMD ["sh", "-c", "yarn demo --ignore-engines"]

Is there a way to load settings.json file? I looked everywhere and can't figure out how to initiate this file.
Thanks

• https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/handle-files
• https://caniuse.com/mdn-api_filesystemhandle
• https://web.dev/file-handling/
• https://excalidraw.com/

Example of what it looks like with the Excalidraw PWA (This is in no way a native App, this was installed by chrome from the URL):

Hello, the project is great, but think it would be possible to import it into a component of an angular project?

I have created a directory D:/h5apps , how can I use vscode-web to open each sub directories, just like:

http://host:8080/edit/app01 ==> D:/h5apps/app01

http://host:8080/edit/app02 ==> D:/h5apps/app02

http://host:8080/edit/app03 ==> D:/h5apps/app03

thank you

First, thanks for the awesome library!

Since version 1.68.0, the dist/node_modules folder is missing from the package.

This causes various errors such as syntax highlighting failing to work because it can't find vscode-onigurama.

I need some basic feedback how this folderUri should be understood.

I suppose the default setting is to load a sample from memory, but I would like to show content of a folder as the files. I'm building it in Docker so I will map a drive, for example on the instance files are located in /www.

How should I approach displaying and editing files in that folder?

I wanna to place this extension under the sample folder:

It looks well and it has been deployed to the web server:

sample/moonbit$ ls
dist  language-configuration.json  LICENSE.txt  package.json  README.md  snippets  syntaxes

$ ls dist/
client.js  client.web.js  server.js  server.web.js

However, when I tried to run on web page, there's an error:

"Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://moonbit/dist/server.web.js' failed to load."

For the extension itself, the syntax highlight works, the snippets works. However, auto-complete not work(It depends on the server.web.js), just wondering if anything I'd missed?

And it's weird that the client.web.js loaded succeed:

Just looking into how it works, I noticed that
https://github.com/Felx-B/vscode-web/blob/main/prepare-demo.js#L15

Clones the vscode-web-playground which has subsequently been archived, it doesn't appear to have left a forwarding address,
seemed like there should probably be an issue for it. Though i'm not sure how big of an issue that actually is or the chances that it might stop working.

My scenario is to use the IDE nested in a page, and I need to control the file content in the IDE through the page. Is there any way to expose the memfs instance? thanks !

yarn prepare-demo is throwing follow year. Also find the screenshot. Am I doing anything wrong ?
Error: ENOENT: no such file or directory, stat './dist/extensions'
at Object.statSync (node:fs:1588:3)
at Object.statSync (C:\a\vsvsvsv\node_modules\graceful-fs\polyfills.js:307:34)
at statSync (C:\a\vsvsvsv\node_modules\fs-extra\lib\util\stat.js:10:52)
at getStatsSync (C:\a\vsvsvsv\node_modules\fs-extra\lib\util\stat.js:24:19)
at Object.checkPathsSync (C:\a\vsvsvsv\node_modules\fs-extra\lib\util\stat.js:49:33)
at Object.copySync (C:\a\vsvsvsv\node_modules\fs-extra\lib\copy-sync\copy-sync.js:24:38)
at Object. (C:\a\vsvsvsv\prepare-demo.js:9:5)
at Module._compile (node:internal/modules/cjs/loader:1126:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
at Module.load (node:internal/modules/cjs/loader:1004:32) {
errno: -4058,
syscall: 'stat',
code: 'ENOENT',
path: './dist/extensions'

Hello
What is the config to install it on Angular please ?

Thanks in advance

hello
first good job
second can you provide example how can i add a new extension that i created
third how can i use product.json file

Hi Felix,

Thanks a lot for allowing us to deploy VSCode for the web without the complexity of their terrible build ! 👍 👍

I have an Issue with your sample when served via HTTPS :

I've done the following :

cd sample
yarn
yarn sample # or "http-server .", or configure any static webserver you want to serve from here...

It works like a charm in local (localhost), but when accessed via HTTPS from a server, the extension files won't load.

The extension seem to be resolved via a non-https Service Worker, and blocked by the browser.
I've tried Firefox and Chrome and booth do the same.

It's deployed here to illustrate : https://vscode-web-issue.lab.jimetevenard.com/

On vscode.dev all resources are resolved via https.
Any idea on this ?

Regards, Jim