Add @shopify/slate-snippets-plugin.

dan-gamble commented 5 years ago

What are you trying to accomplish with this PR?

I will preface this by saying this is super super bare bones at the moment. No tests, no README.md just the working source code. I'm just wanting to get a feel to see if this would be wanted, if so i'll add all the relevant pieces (as well as i can) otherwise i'll just using it locally extending my slate.config.js.

This is a plugin heavily influenced by the Sections Plugin.

It's a pretty simple plugin that adds the ability to have folders within the snippets folder like:

./snippets
├── collection/
   ├── filters.liquid
   ├── list.liquid
   ├── ...
├── product/
   ├── images.liquid
   ├── variants.liquid
   ├── ...

They get turned in to [folder-name]-[file-name].liquid on build.

./snippets
├── product/
   ├── images.liquid => product-images.liquid
   ├── variants.liquid => product-variants.liquid
   ├── ...

You can still use snippets as per normal not in folders.

Oustanding issues

[ ] Tests
[ ] Readme
[ ] Disable the CopyWebpackPlugin for the snippets folder as it currently brings across everything twice

I appreciate Slate is on Low Maintenance but any feedback on this would be highly appreciated. Even if it's just a +1 from anyone's Shopify's end to let me know to carry on and flesh this out 🤙

Please provide a link to the associated GitHub issue. https://github.com/Shopify/slate/pull/781

Checklist

For contributors:

[ ] I have updated the docs to reflect these changes, if applicable.

For maintainers:

[ ] I have :tophat:'d these changes.

cjayyy commented 5 years ago

Thanks a lot Dan. This is very useful since Shopify can't come with official solution.

Have you somehow manage to delete/ignore original snippets subfolders ending in the dist? I am trying to enhance your plugin with fs-extra.remove() but with no luck. If you have any solution please share :)

Thanks again <3

dan-gamble commented 5 years ago

Hey @cJayyy,

I didn't find a solution for that, unfortunately.

Ultimately, we ended up dropping this internally as it was actually a bit of a pain to use (besides the duplicated files and errors).

For example when doing {% include 'product-carousel' %} with:

./snippets
├── product/
   ├── carousel.liquid
   ├── ...

It's actually slightly counter-intuitive when trying to find the file. When searching for product-carousel nothing is returned. There are also cases where you end up with quite a few duplicate file names which also makes it quite hard to navigate files properly.

./snippets
├── article/
   ├── carousel.liquid
   ├── ...
├── collection/
   ├── carousel.liquid
   ├── ...
├── product/
   ├── carousel.liquid
   ├── ...

Happy for someone else to pick this up, and I can help contribute to that, but it's not something I will actively be continuing with, unfortunately.

cjayyy commented 4 years ago

Thanks for the response @dan-gamble!

So you adapted to the original Slate structure and you have all the snippets on one level or you found out another way?

Shopify / slate