Thanks for the awesome library! about vscode-web HOT 17 CLOSED

Hi there, thank you for your interest in this library 😀
I'll try to summarize all the answers, but I see you already ansewered some

FileSystemProvider sample

Microsoft provides a bunch of extension samples here : microsoft/vscode-extension-samples
And you can find one specifically for FileSystemProvider

Adding your extension

There are 2 way to do that

• Add your extension folder to the node_modules/extensions folder and add a script with the whole description, as you can see in the demo folder
• Or bundle it yourself by extracting from npm package only extensions you need, and add yours. And finally build your own description file

Marketplace

I think you can do this by filling the extensionsGallery section in product.json but I don't think it is a good idea. Most extensions you'll find are not compatible with a web VSCode. To build a compatible extension you need to fill the browser property in the package.json. Most extension on the store do not have this.
You can try what it would render, on the official VSCode web page https://vscode-web-test-playground.azurewebsites.net/

Welcome page

I don't think you can do this until the VSCode team allow extension API on the welcome page.
But you can create an extension, which runs on startup and open a custom page via vscode.open command

Product.json reference

You found it some of the information but there's more.
product.json has IWorkbenchConstructionOptions & { folderUri?: UriComponents, workspaceUri?: UriComponents } type
So you can specify both workbench options and folder or workspace to open.
IWorkbenchConstructionOptions which contains the productConfiguration you found.

{
   "productConfiguration": {
   	"nameShort": "Code Web",
   	"nameLong": "Code Web",
   	"applicationName": "code-web",
   	"dataFolderName": ".vscode-web",
   	"version": "1.2.3"
   },
   "defaultLayout": {
       ...
       },
   "configurationDefaults": {
        // Custom settings
       },
   "folderUri": {
   	"scheme": "memfs",
   	"path": "/sample-folder"
   }
   ...
}

If you want to go further, you can also provide the product.json content through window.product, this way you can handle a full static website and manage to build a tool like github1s (I managed to built it with this library, but it didn't fit the needs of the team conwnet/github1s#118)

from vscode-web.

https://0xgg.io/vscode-pwa/

I got it working!!! Thanks!!!! 😄

from vscode-web.

I am currently building markdown note taking application called Crossnote. But I am not very satisfied with its current editor. So I am considering replacing it with vscode and add the note taking functionality as vscode extension. Your library seems to be a good choice to use 👍 I will see how far I could go. Thank you!

from vscode-web.

Hmmm weird. https://cdn.jsdelivr.net/npm/[email protected]/dist/vscode/vs/code/browser/workbench/workbench.js seems to be right. I will try a clean install later.

Update: The fresh install works 👍

from vscode-web.

I think I have probably figured out the answers for some of the questions above 👍 . But here are a few new questions :)

Where can I see the possible properties for the product.json? Like what is dataFolderName in productConfiguration used for?
If I want to add my own extension, do I have to copy it to node_modules/vscode-web/dist/extensions directory? Is there another way to import extension?

Thank you!

from vscode-web.

For example I want to change the Commit and Date in the screenshot below, then should I modify the product.json? If so then how should I do it? Thanks a lot!

—-

Oh I see it here! https://github.com/microsoft/vscode/blob/main/src/vs/platform/product/common/productService.ts#L33

from vscode-web.

Thanks a lot @Felx-B 👍
Your answer helps a lot

from vscode-web.

Hi @Felx-B . This question is not related to vscode-web, but I am just curious if you know any solution.
I am now trying to build a vscode extension for the web side that calls the window.showDirectoryPicker to open a local directory right inside the browser. Below are the source files

https://github.com/0xGG/vscode-native-file-system/tree/master/src

However, it seems like vscode extension is running as javascript worker, so my extension code has problem calling the window object. Do you know any workaround of it? Thank you!

from vscode-web.

Hi
I remember trying to do this, but unfortunately didn't manage to do it.
I think VS Code team must write custom stuff to allow it.

One way I didn't try is a full custom webview, where the user click on a button to trigger the picker. The webview should stores the handler in IndexedDB
And then, the FileSystemProvider should recover it from indexedDB and use it to provide the native filesystem.

I think it should work, but the user experience will be pretty ugly.

from vscode-web.

Hey @shd101wyy ! I think I found a better way 😀

You need to create a native vscode command. Instead of using a product.json file, simply fill the window.product property in your index.html (or in a custom javascript file):

 window.product = {
      productConfiguration: {
        nameShort: "VSCode Web Sample",
        version: "1.2.3.4",
        ...
      },
      folderUri: {
        scheme: "cfs",
        path: "/",
      },
      commands: [
        {
          id: "custom.storeDirectoryHandle",
          handler: async () => {
            // get handle from indexedDB or ask user
            ...
            const dirHandle = await window.showDirectoryPicker();
            // TODO store handle in indexedDB, in pure JS
          }
        }
      ]
    };

After you did this, you can create a proper command in your extension, which can be bound to a button somewhere, or a user command call. (It should not be automatic on load, Chrome won't allow it).

After that you should be able to retrieve your handle from IndexedDB, from your FileSystemProvider

from vscode-web.

@Felx-B This is fantastic! I will try it tomorrow!! Thanks a lot!!!

from vscode-web.

I just tried it quickly by adding window.product variable, but it doesn't seem to be working. Then I checked the built workbench.js and it looked like below after beautify:

(function () {
  var e = ["vs/code/browser/workbench/workbench", "require", "exports", "vs/workbench/workbench.web.api", "vs/base/common/uri"];
  define(e[0], function (r) {
    for (var o = [], n = 0, i = r.length; n < i; n++) o[n] = e[r[n]];
    return o
  }([1, 2, 3, 4]), (function (e, r, o, n) {
    "use strict";
    Object.defineProperty(r, "__esModule", {
      value: !0
    }), async function () {
      const e = await fetch("product.json");
      let r, i = await e.json();
      if (Array.isArray(i.staticExtensions) && i.staticExtensions.forEach(e => {
          e.extensionLocation = n.URI.revive(e.extensionLocation)
        }), r = i.folderUri ? {
          folderUri: n.URI.revive(i.folderUri)
        } : i.workspaceUri ? {
          workspaceUri: n.URI.revive(i.workspaceUri)
        } : void 0) {
        const e = {
          workspace: r,
          open: async () => {}
        };
        i = Object.assign(Object.assign({}, i), {
          workspaceProvider: e
        })
      }
      o.create(document.body, i)
    }()
  }))
}).call(this);

It seems like window.product is not there so my window.product in index.html is not used.
Do you have any clue? Thank you!

from vscode-web.

Hi @Felx-B . I am sorry to bother you again. I see https://github.com/Felx-B/vscode-web/blob/main/workbench.ts#L25 uses workspace = { folderUri: URI.revive(config.folderUri) }. However, I see https://github.com/microsoft/vscode/blob/3287cedd3430bd4749f32fa5975402499279a745/src/vs/workbench/services/host/browser/browserHostService.ts#L43 defined readonly workspace: IWorkspace; which doesn't have folderUri nor workspaceUri property. Is this a bug? Here is IWorkspace

Thanks!

Update:
I am wrong. The IWorkspace is defined at https://github.com/microsoft/vscode/blob/94c9ea46838a9a619aeafb7e8afd1170c967bb55/src/vs/workbench/services/host/browser/browserHostService.ts#L36

from vscode-web.

btw, I tried the FileSystemProvider example using vscode-web. However, when I ran it in browser with an empty workspace and executed MemFS: Setup Workspace command, I got the error Uncaught Error: Empty workspace is not supported in browser when there is no remote connection. and no folder was created. Do you have any suggestions how to get FileSystemProvider working in browser? Thank you!

Update: nvm I got this working :)

from vscode-web.

btw, I tried the FileSystemProvider example using vscode-web. However, when I ran it in browser with an empty workspace and executed MemFS: Setup Workspace command, I got the error Uncaught Error: Empty workspace is not supported in browser when there is no remote connection. and no folder was created. Do you have any suggestions how to get FileSystemProvider working in browser? Thank you!

Update: nvm I got this working :)

Could you please explaain how you got this working? I created my own FS with all the implementations, now i'm facing the problem with empty workspace.

Thanks for help

from vscode-web.

Hi
You need to fill the folderUri or workspaceUri in your package.json file.
You should set the scheme of your custom FSProvider

"folderUri": {
   	"scheme": "memfs",
   	"path": "/sample-folder"
   }

from vscode-web.

Hey @shd101wyy ! I think I found a better way 😀

You need to create a native vscode command. Instead of using a product.json file, simply fill the window.product property in your index.html (or in a custom javascript file):

 window.product = {
      productConfiguration: {
        nameShort: "VSCode Web Sample",
        version: "1.2.3.4",
        ...
      },
      folderUri: {
        scheme: "cfs",
        path: "/",
      },
      commands: [
        {
          id: "custom.storeDirectoryHandle",
          handler: async () => {
            // get handle from indexedDB or ask user
            ...
            const dirHandle = await window.showDirectoryPicker();
            // TODO store handle in indexedDB, in pure JS
          }
        }
      ]
    };

After you did this, you can create a proper command in your extension, which can be bound to a button somewhere, or a user command call. (It should not be automatic on load, Chrome won't allow it).

After that you should be able to retrieve your handle from IndexedDB, from your FileSystemProvider

Thanks for info

Referring to this comment: Is there any way to communicate between extension and main vscode service without using buttons and/or other user input?
I want to register RemoteFileSystem provider which will communicate with messages through window. The problem is that VsCode extension has no access to window. I tried tinkering with code in main service to register my provider there, but i ran into too much trouble, it's obvious that extension API is meant to be used to do this
So i tried registering commands and i'm able to receive commands and to run commands in extension and also in main service. The problem is that extension is not able to listen to executed commands
microsoft/vscode#1431 (comment)
and therefore i can't listen to events that are occuring outside extension (events comming from window)

Is there any way to achieve bidirectional communication between main window and extension?

from vscode-web.