Bundle files

[ryanraposo]

Bundling with Webpack reduces extension size. Generally, it does so without breaking links and references throughout the code.

Our main Webview requires access to external modules. It can access local files, but methods of doing so are limited for security reasons. So far, complying with these restrictions and compiling with Webpack results in a broken build.

The current workaround is inelegant and involves copying .js files from the modules to the 'media/lib' folder, then reading them at runtime as shown below:

sidebar-markdown-notes/src/webviewProvider.ts

Line 95 in 31d2acd

const purifyUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'lib', 'purify.min.js'));

See conversation below. Feel free to make corrections to this summary of the issue or ask for help if attempting a fix.

[AssisrMatheus]

Hey thank you for the suggestion!

The main issue I'm having now is that I want to load the libraries files from node_modules instead of having to copy them to media/lib.

This would help a lot when importing the fonts for the add-latex-support branch. Since they are a lot and that could be automated.

[ryanraposo]

@AssisrMatheus I think I understand. Not a web guy so bear with me! Help me at least characterize the issue properly. I'll update it as we go.

1. How relevant is CopyWebpackPlugin? If it misses the mark, explain why?

2. Ideally, what would your imports look like?

3. I know Webviews are fussy about URIs. How does that complicate/change the issue for us?

[AssisrMatheus]

Not a web guy so bear with me!

No problem at all! I appreciate your help a lot.

1. I thought of using gulp to do that but that looks much better since we already have webpack. The reason I didn't use gulp at first is that felt that even thought it would work when bundling, it wouldn't work when developing the extension, and I didn't want to have a "hacky" way of copying those for each case. But after yesterday, I figured that when developing, the bundling process is called before running the vscode sandbox/emulator. So I think that might work great!

2. Which imports you mean? the ones in the node instance or in the webview instance?

3. Creating the URLs are easy enough, but we must make sure that the files exist when everything gets bundled and the .vsix is created, and that they still follow the correct path.

[ryanraposo]

@AssisrMatheus its been great! I appreciate your answers, they're relatable and it helps me think. I have nothing real against either one, but I'd been feeling jaded about web-tech and maintainership for a long time. Its turned around and thats on you. For real, just happy to be here.

1. I thought of using gulp to do that but that looks much better since we already have webpack...

I'll give it a shot! You reminded me of tasks, we can probably smooth out any hacky stuff the plugin introduces. We can have them preempt the webpack if we have to.

2. Which imports you mean? the ones in the node instance or in the webview instance?

I think I just get spooked by html (lol) in the middle of code (gotem) because of how different the references can be, wondering about scoping, etc. I'm not really sure what I meant with that question now, don't worry about it. Sounds like I was spooked.

3. Creating the URLs are easy enough, but we must make sure that the files exist when everything gets bundled and the .vsix is created, and that they still follow the correct path.

I'll keep that in mind! Thanks again.

[AssisrMatheus]

I'd been feeling jaded about web-tech and maintainership for a long time. Its turned around and thats on you.

Oh maaan thank you for that! I also feel like this from time to time but then I get some bursts and it's when I create things like this 😆

I'll give it a shot! You reminded me of tasks, we can probably smooth out any hacky stuff the plugin introduces. We can have them preempt the webpack if we have to

Well, you don't need to use gulp specifically, since the webpack copy might already help with it. I was just explaining my thoughts a bit

I think I just get spooked by html (lol) in the middle of code (gotem) because of how different the references can be, wondering about scoping, etc. I'm not really sure what I meant with that question now, don't worry about it. Sounds like I was spooked.

No problem! That does get confusing from time to time. If the extension start getting bigger I'll try to find a way to read from a separate file maybe, if it's ever possible, the current setup is just a copy of the example they provide.

[ryanraposo]

@AssisrMatheus yeah man, you're a great leader. I've always had a hard time acclimating to a lot of the habits and vibe I see all over GitHub. I'm stubborn and knew I'd be improvising on a lot, but wasn't tryna throw away what works out of ignorance.

After contributing here (for what, a week?) it was pretty clear what actually makes the difference as a maintainer. Also, I slowly had to face the fact that I liked working for you more than I did for me 😂. Good times.

[AssisrMatheus]

I slowly had to face the fact that I liked working for you more than I did for me

Haha I can relate! When I began coding I really didn't like doing some random projects I wanted to do. But working for other's(and with others) helped me a lot and I think I learned much more, since I was getting feedback etc.