felx-b / vscode-web Goto Github PK
View Code? Open in Web Editor NEWVisual Studio Code for browser
License: MIT License
Visual Studio Code for browser
License: MIT License
@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 :)
sample
directory, then what should I do?sample
?sample
?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!
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:
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.