Cannot use in WSL2 environment

[HawkingZ2707]

I work in WSL2 right now. But i use it to click, the plugin is not able to open project files in WSL2. I tried to change the path to open file, it not perfect work. because it did work, but opened the WSL2 file accessed through the file network, the actual opening environment is still a new vscode in windows, not the WSL Remote vscode that I'm running.
So I think whether this would require a call to some WSL2 API.
I'm just a rookie and I want to contribute something to this plugin, but I have no way to get started.

/* --- open --- */
  window.addEventListener(
    "click",
    (e) => {
      if (e.altKey && e.button === 0) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        const sourceCodeLocation = getSourceCodeLocation(e.target);
        if (!sourceCodeLocation) {
          return;
        }

        let editor = "vscode";
        if (typeof window.__VUE_CLICK_TO_COMPONENT_EDITOR__ === "string") {
          editor = window.__VUE_CLICK_TO_COMPONENT_EDITOR__;
        }

//      This is the part I tried to modify
++      window.open(`${editor}://file//wsl$/Ubuntu/${sourceCodeLocation}`);
--      window.open(`${editor}://file/${sourceCodeLocation}`);

        cleanTarget();
      }
    },
    true
  );

[zjffun]

It looks like click-to-component suffers from the same problem, see ericclemmons/click-to-component#27 and ericclemmons/click-to-component#58. vscode://vscode-remote/wsl+ubuntu/home/juanmartinez/Developer/DEIN/swpm/src/swpm.js:3 seems to work, but I haven't tried it yet, I will try it this weekend. I think we can add a function that receives the sourceCodeLocation and returns the opened URL, so that users can modify the opened URL to support WSL, Docker or other editors or IDEs. e.g.:

if (typeof window.__VUE_CLICK_TO_COMPONENT_GET_URL__ === "function") {
   url = window.__VUE_CLICK_TO_COMPONENT_GET_URL__(sourceCodeLocation)
}

window.open(url);

usage:

import 'vue-click-to-component/client';
window.__VUE_CLICK_TO_COMPONENT_GET_URL__ = function(location) {
  return `vscode://vscode-remote/wsl+ubuntu${location}`
};

The above are just examples, the details need to be considered carefully. You can fork this repository and submit a PR to contribute. Feel free to contact me with any questions or ideas.

[HawkingZ2707]

It looks like click-to-component suffers from the same problem, see ericclemmons/click-to-component#27 and ericclemmons/click-to-component#58. vscode://vscode-remote/wsl+ubuntu/home/juanmartinez/Developer/DEIN/swpm/src/swpm.js:3 seems to work, but I haven't tried it yet, I will try it this weekend. I think we can add a function that receives the sourceCodeLocation and returns the opened URL, so that users can modify the opened URL to support WSL, Docker or other editors or IDEs. e.g.:

if (typeof window.__VUE_CLICK_TO_COMPONENT_GET_URL__ === "function") {
   url = window.__VUE_CLICK_TO_COMPONENT_GET_URL__(sourceCodeLocation)
}

window.open(url);

usage:

import 'vue-click-to-component/client';
window.__VUE_CLICK_TO_COMPONENT_GET_URL__ = function(location) {
  return `vscode://vscode-remote/wsl+ubuntu${location}`
};

The above are just examples, the details need to be considered carefully. You can fork this repository and submit a PR to contribute. Feel free to contact me with any questions or ideas.

Yep. I agree with you.
The func of getURL should be add, and I try to fix the open error.

//  It works for me to use it this way
++  window.open(`${editor}://vscode-remote/wsl+ubuntu-22.04${sourceCodeLocation}`);
--  window.open(`${editor}://file/${sourceCodeLocation}`);

It works fine with this specification, but I don't konw how to get the environment, like wsl+ubuntu-22.04, of cause this is my release and version number. If solve this problem, we can add func like this, such as:

window.__VUE_CLICK_TO_COMPONENT_GET_ENV__ = function() {
//env is the part of URL, but I don't know how to get
  return env
};

window.__VUE_CLICK_TO_COMPONENT_GET_URL__ = function(location) {
  const env = window.__VUE_CLICK_TO_COMPONENT_GET_ENV__()
//return `vscode://vscode-remote/wsl+ubuntu${location}`
  return `vscode://${env}${location}`
};

Use func the same way you do, but we need to judge the usage scenario.
I'm limited, so please see if I'm on the right way.

[zjffun]

It's hard to get user environment. How about let user set their env? We can tell user how to get env in document. Like:

If you use WSL, you can set path like:

import 'vue-click-to-component/client';

+if (process.env.NODE_ENV === 'development') {
+  window.__VUE_CLICK_TO_COMPONENT_URL_FUNCTION__ = function ({
+    sourceCodeLocation
+  }) {
+    // Please change to your WSL env, you can get your WSL env by `xxx`.
+    const env = 'ubuntu-22.04';
+    return `vscode://vscode-remote/wsl+${env}/${sourceCodeLocation}`;
+  };
+}

See #2

[zjffun]

v0.2.0 is published to support WSL and doc about WSL is added too. 🎉

[HawkingZ2707]

v0.2.0 is published to support WSL and doc about WSL is added too. 🎉v0.2.0 已发布以支持 WSL，并添加了有关 WSL 的文档。 🎉

well. thanks. I'm just sorry I wasn't able to PR you.

[zjffun]

没事我最近正在做一些 Docker 相关的事正好也需要这个功能。讨论和开发一样重要，要是没有上面的讨论这次会漏掉不同 WSL target 的情况，以后遇到再研究不同 WSL target 如何生效可能也要弄很久，感谢你的研究。

[HawkingZ2707]

同样感谢你的讲解和指引