Allow code to be organized in subfolders in `src/snippets` and `src/sections`

[t-kelly]

Developers like to keep their repos organized. One way of doing this is through folders and file groupings. This organizational method is possible in folders like src/styles and src/scripts but not possible in src/snippets and src/sections.

Let's allow developers to create whatever folder structure they want in the main src/ folders, and then output those folders in the correct structure for Shopify servers in the dist/ folder.

For example

src/
-- snippets/
---- snippet-1/
------ snippet-1a.liquid
------ snippet-1b.liquid
---- snippet-2/
------ snippet-2a.liquid
------ snippet-2b.liquid

would be transformed into the following on build:

dist/
-- snippets/
---- snippet-1a.liquid
---- snippet-1b.liquid
---- snippet-2a.liquid
---- snippet-2b.liquid

Related #271

[jonathanmoore]

I'd love to see this implemented for development. The only concern I have would be confusion if someone was using the same file name in more than one directory.

src/
-- snippets/
---- blog/
------ tags.liquid
---- collection/
------ tags.liquid

Would it make sense if the directory name were prepended to the file name as [directory].[filename].liquid? A quick test verified that {% include 'test.test' %} does correctly load /snippets/test.test.liquid

The example above would build as:

dist/
-- snippets/
------ blog.tags.liquid
------ collection.tags.liquid

[presto2116]

We are busily redesigning our entire site, and having this feature would be amazing. Our snippets and sections folders are starting to get very large. If we could break it off into folders the development experience will be a lot better. Please look into adding this feature.

[t-kelly]

@presto2116 This feature will be part of Slate v1. We are not adding any more features to Slate v0.

[NealEhardt]

Would it make sense if the directory name were prepended to the file name as [directory].[filename].liquid?

When I set up a directory structure, I expect to access it with slashes. So the most sensible way to consume a subfolder snippet would be {% include 'directory/filename' %}.

There's a conflict if you perform the proposed dot transform on a directory like this:

src/
-- snippets/
---- dogs/
------ fido.liquid
---- dogs.fido.liquid

Maybe as a prerequisite for this issue, Shopify's servers need to start accepting snippets subfolders.

[tshamz]

For anyone who comes across this in search of an answer to whether or not it's possible to include subdirectories in top level theme directories (e.g. snippets/ or sections/), I was able to get this working by altering my slate.config.js and extending the webpack config.

e.g.

const rules = [
  {
    test: /snippets\//,
    loader: 'file-loader',
    options: {
      name: `../snippets/[name].[ext]`,
    }
  },
];

module.exports = {
  slateTools: {
    webpackCommonExcludes: [
      'snippets/',
      'node_modules',
      'assets/static/',
    ],
    extends: {
      dev: { module: { rules } },
      prod:  { module: { rules } },
    },
  },
};

I haven't tested it out for directories other than src/snippets/, but I would hope it would work just the same. The major sticking point here for me was needing to include the webpackCommonExcludes option in order to have slate-tools core.js loaders ignore the theme directories with subdirectories in them and instead only use my extension to the webpack config. The thing that's not instantly apparent here is that initially I only included webpackCommonExcludes: ['snippets/'], which created a bunch of babel-loader issues for me. After discovering #705, I realized I needed to also add node_modules and assets/static/ to my ignore since they are the default values used and instead of augmented with my values, they're completely blown out.

I very briefly tested how webpack handles namespace collisions and it seemed like it was consistent with how it chose which file to place into dist/, although I did run into some wonky behavior when removing files but having them persist through. I have no idea exactly how it decides which file wins, but my major observation was that files more deeply nested won out over files in the same path as them e.g. snippets/group1/group2/test.liquid beat snippets/group1/test.liquid and snippets/test.liquid. Maybe someone has some insight into exactly how webpack is making this decision?

[t-kelly]

@tshamz looks like you could make a PR? 😄