How do we use a prebuilt resources of vscode?

[conwnet]

I found there are some enthusiastic developers who want to run GitHub1s locally, but some of them have met problems during the building process.😫 Inspired by vscode-web, a talking with @xcv58 , and the issues like #62 #162 #118, etc. I think we should provide a prebuilt version of vscode. There are many advantages to this:

1. Reduce build/dev time significantly (both CI and local)
2. More simple prerequisites for development
3. Less memory/CPU cost during development

The problem is we have already modified the code of vscode, and we should able to update the resources if there are some new changes of vscode.

In my opionon, we can do that:

1. set a workflow to check the hash of files in /src directory, if someone have been updated, then rebuild the vscode and publish them to the github releases.
2. provide an npm package named such as vscode-github1s(whatever), and set the postinstall script to donwload the prebuilt resoruces from github releases, then put them into corresponding.
3. provider another npm script named yarn dev:extensions for developer who just care the /extensions directory.

I wanna if there is a more graceful way to do this or if there some problems in this way? 🙏

[xcv58]

I think we can have a separate repo or directory in this repo to do things like https://github.com/Felx-B/vscode-web/blob/main/build.js

And we can set another GitHub actions to publish the NPM package:

https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#example-including-paths
https://github.com/marketplace/actions/npm-publish

We should consider supporting whether to build VS Code locally so that it easier to develop if we need to change the VS Code.

I don't know whether there is a better way to do this without publishing the prebuilt version to NPM.

[xcv58]

Another benefit: we could use CDN link for NPM like https://unpkg.com/

[conwnet]

Another benefit: we could use CDN link for NPM like https://unpkg.com/

In fact I've do that before, and try to use the unpkg as CDN. (https://www.npmjs.com/package/github1s)

I don't know if I understand right: when a user request through the edge server back to the unpkg server, the unpkg server will fetch the npm package and decompress it. The size of github1s resource is large and cost seconds of time, and it will occured in the first request for every region. (Of couse the delay is also may because of my poor network quality)

[xcv58]

Another benefit: we could use CDN link for NPM like https://unpkg.com/

In fact I've do that before, and try to use the unpkg as CDN. (https://www.npmjs.com/package/github1s)

I don't know if I understand right: when a user request through the edge server back to the unpkg server, the unpkg server will fetch the npm package and decompress it. The size of github1s resource is large and cost seconds of time, and it will occured in the first request for every region. (Of couse the delay is also may because of my poor network quality)

I think so and it should only happen on the initial load, which will be triggered by the development process or Vercel deploy (it will try to load the page once the deployment is done).

I'm working on this and it seems we need to change a few more files in VS Code so that it could load extensions from local or hosted URL.

[xcv58]

The blockers I found so far:

github1s/resources/index.html

Lines 184 to 188 in e5a4e3d

	webviewEndpoint:
	window.location.origin +
	'/static/vscode/vs/workbench/contrib/webview/browser/pre',
	webWorkerExtensionHostIframeSrc:
	'/static/vscode/vs/workbench/services/extensions/worker/httpWebWorkerExtensionHostIframe.html',

Both webviewEndpoint and webWorkerExtensionHostIframeSrc must be loaded from the same domain.

If I change it to below code (PS: the eb48675ea573.ngrok.io is my local proxy to mimic CDN link):

							webviewEndpoint:
								window.location.origin + '/static/vscode/vs/workbench/contrib/webview/browser/pre',
								// 'https://eb48675ea573.ngrok.io/static/vscode/vs/workbench/contrib/webview/browser/pre',
							webWorkerExtensionHostIframeSrc:
								'https://eb48675ea573.ngrok.io/static/vscode/vs/workbench/services/extensions/worker/httpWebWorkerExtensionHostIframe.html',
								// '/static/vscode/vs/workbench/services/extensions/worker/httpWebWorkerExtensionHostIframe.html',

It wouldn't load the extension properly:

This blocker only blocks us from hosting the VS Code related files from CDN. We could still publish a prebuilt version and refer it locally like this PR #118

[xcv58]

I think we can do the following to publish the prebuilt vscode:

1. Add a subdirectory call vscode-web-github1s or any name that makes sense.
2. Create a package.json for publish it to NPM which should include the field: `files: ["/dist"]"
3. Decouple the watch:vscode, build-vscode.sh, copy-vscode.sh from the yarn watch and yarn build commands., and move them into the new package.json file. And update them to copy lib/vscode/out-vscode-min/ to vscode-web-github1s/dist.
4. Use the yalc or yarn link to test the package publish locally. (We could leverage the yalc to do the local development if we need to change VS Code locally)
5. Update the index*.html to include vs code files from node_modules like /static/vscode/vs/loader.js -> /static/node_modules/vscode-web-github1s/dist/vscode/vs/loader.js. (This might break the local extension loading as well, we could update the scripts/package/copy-node_modules.sh to sync node_modules/vscode-web-github1s/dist to the dist/static so that the structure keeps the same to avoid the issue).
6. If the above steps could work, we should be able to successfully publish the npm package. Then use yarn add to include the package.

In addition, we can setup a https://codesandbox.io/docs/ci to test the prebuilt VS Code before actually publish the package.

[xcv58]

I have a proof of concept here: xcv58#20

It publishes the NPM package: https://www.npmjs.com/package/@github1s/vscode-web

The CI test passed in less than 6 minutes: https://github.com/xcv58/github1s/pull/20/checks?check_run_id=2243362528

Vercel deployment finished in less than 3 minutes:

Demo link: https://github1s-git-npm-package-xcv58.vercel.app/

[Siddhant-K-code]

I have a proof of concept here: xcv58#20

It publishes the NPM package: https://www.npmjs.com/package/@github1s/vscode-web

The CI test passed in less than 6 minutes: https://github.com/xcv58/github1s/pull/20/checks?check_run_id=2243362528

Vercel deployment finished in less than 3 minutes:

Demo link: https://github1s-git-npm-package-xcv58.vercel.app/

this looks good, I think you should create the same PR as draft for this, so we can work on it ( if needed )

[xcv58]

Create #265

@conwnet Is this https://www.npmjs.com/~conwnet your NPM account?

@Siddhant-K-code could you please tell me your NPM account? So that I can invite you to the NPM org https://www.npmjs.com/org/github1s

[conwnet]

@conwnet Is this https://www.npmjs.com/~conwnet your NPM account?

Yes, It is me. Thank you so much for you wonderful work! It is excited!

[Siddhant-K-code]

@Siddhant-K-code could you please tell me your NPM account? So that I can invite you to the NPM org https://www.npmjs.com/org/github1s

Here's my NPM Account => siddhant-k-code

you can invite me

Amazing Work @xcv58 🎉

[xcv58]

@Siddhant-K-code sent out an invite on https://www.npmjs.com/