Make "Add plugin" button install plugins

[sabatesduran]

Would be great to be able to install verified plugins directly from webdash.

This probabbly could be a plugin that lists all the verified plugins and has a button to install them.

[jadjoubran]

That's a great idea 😍 I think it wouldn't be too complicated to achieve, here's a quick analysis: We can fetch the List of verified plugins from Webdash by directly getting the Markdown source for it using this url: https://raw.github.com/wiki/jadjoubran/webdash/landing.md

and then whenever there's a ```javascript npm install ... ``` we dynamically create a download button for it and then using showdown we could transform this into markdown that will be displayed in a paper-dialog

Would you like to work on a PR for it? If yes, I'd love to help (even if you've never worked with Polymer before, you'll see it's almost just plain modern JavaScript)

[sabatesduran]

Yes, maybe I'll need some help but I'm down for trying.

The URL that you wrote does not work for me, this one does: https://raw.githubusercontent.com/wiki/jadjoubran/webdash/List-of-Verified-Webdash-plugins.md

Do you think that will be good to add a docs folder so people can access the docs locally (maybe with the readme preview plugin) the good part using github wiki is that is automatically updated but I could see people developing for example in an airplane and using webdash and not having internet.

[jadjoubran]

You're right, I should've changed landing.md at the end to List-of-Verified-Webdash-plugins.md

hmm the problem is that some webdash plugins will not work offline anyway (such as webdash-package-json and a few upcoming plugins) and installing plugins offline wouldn't work as well since you need npm

so maybe another issue would be to add the documentation of webdash itself inside webdash (as a page or dialog).. or markdown files more like how to use the webdash cli, etc.. (maybe that's what you originally suggested?)

Awesome for giving it a try 😄 I'll write down as much info as I can here

[jadjoubran]

The main web component you'll be working with is src/add-plugin.html which is a Web Component for the <add-plugin> button that you see (it's in a web component because you'll see it in other places: for example, if you had no packages installed)

here you can use the fetch API to request the documentation

fetch(url).then(response => response.text().then(markdown => {console.log(markdown)});

it's the first time I don't use .json() on fetch, because this time we need it to be in text format

then try to show the plain markdown in a paper-dialog, for that you have to already setup a paper-dialog in src/add-plugin.html for that, go to webcomponents.org (which lists all web components) and search for paper-dialog, and you'll see on the top left instructions how to install it with bower if you don't have bower, please install it with npm install -g bower

You can checkout how paper-dialog is being used in webdash-npm-scripts here: https://github.com/jadjoubran/webdash-npm-scripts/blob/master/webdash-npm-scripts.html#L161 don't forget to add an import for it, just like it's done in the first few lines

I'd say let's reach this step, feel free to open a PR when you reach this one, and then I can give you more recommendations about what's next Feel free to ask me questions along the way Thanks for your time! 😄 and I hope it'll be rewarding in terms of JS experience!

[jadjoubran]

I forgot to mention that in order to run webdash locally, you need to run the following command:

node ./scripts/index.js --local

[sabatesduran]

The progress is here: https://github.com/sabatesduran/webdash/tree/add-plugins-dialog

[jadjoubran]

Wow man that's really awesome 😍 Did you learn quite a bit from this already? Do you have any polymer specific questions? I'd love to hear your opinion

For the 2nd part, I guess we'd need to do some transformation on the markdown (before converting it to html)

A regex can find code snippets that start with ``` and then we can replace it with something similar to the below:

<paper-button class="install">Install</paper-button>

so this will add a download button right before the code snippet

then after injecting the code in the dialog, we could find all `.select` elements and add an event listener to them (I'm not 100% sure how it would go.. maybe an `on-click` would automatically work but I don't think so, it needs to be tried)
we also need to get the package name somehow, so that we can then do the last step which is to `exec` (using node) an `npm install {packagename} --silent`

If you ever get extremely busy, let me know and I can take over or if you get stuck I can clone and see how to fix it
Thanks again!

[jadjoubran]

Actually if you'd like, you could send a PR for your progress so far the feature is still useful even if there's no automatic install button that you can click

[sabatesduran]

This week I've been busy, but this weekend I can finsih it.

El dj., 12 d’abr. 2018 a les 14:14, Jad Joubran (notifications@github.com) va escriure:

Actually if you'd like, you could send a PR for your progress so far the feature is still useful even if there's no automatic install button that you can click

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jadjoubran/webdash/issues/72#issuecomment-380783973, or mute the thread https://github.com/notifications/unsubscribe-auth/AFb2SSN_Bovkc--gfAEYjK6meiwkV6fyks5tn0UUgaJpZM4TDAJ- .

-- Dídac Sabatés Duran

[jadjoubran]

Sure no rush! It's quite tough though, so even if you gave it a try and got stuck, we can do a PR for the first part Cheers!

[sabatesduran]

Didn't have time this weekend so I created the PR for just the paper-dialog, will maybe try to do it in the future.

[jadjoubran]

Perfect thanks @sabatesduran! I just merged it I will do some minor changes and reference the commit numbers here if you'd like to see what I'm going to change (basically just move showdown to the backend to avoid loading a library in the browser which will be rarely used + probably swap showdown with markdown-it due to the issue that I discovered here)

• [x] replace showdown with markdown-it
• [x] move markdown conversion to backend
• [ ] add checklist to add spinner
• [ ] fix design of popup
• [ ] add an install button