Secondary extensions (ex: .html.js, etc)

[rhengles]

Today, if you try to use the structure below:

/plugin/my-html-loader.js

var fs = require('fs').promises;

module.exports = function(snowConf, plugOpt) {
	return {
		name: 'vue-html-loader',
		resolve: {
			input: ['.html'],
			output: ['.html.js']
		},
		async load({ filePath }) {
			var bpIndex = filePath.indexOf(plugOpt.base);
			if (-1 === bpIndex) return;
			const fileContents = await fs.readFile(filePath, 'utf-8');
			return {
				'.html.js': `
export default ${JSON.stringify(fileContents)}
`
			}
		}
	}
};

/snowpack.config.json

{
  "mount": {
    "public": "/",
    "src": "/_dist_"
  },
  "plugins": [
    ["./plugin/my-html-loader", {"base": "/src/comp/"}]
  ]
}

/src/comp/foo/foo.html

<div class="app--foo">
	Hello Foo!
</div>

/src/comp/foo/foo.js

import template from './foo.html';

export default {
	template,
	setup: function() {
		return {};
	}
};

If you run snowpack build, the files are built as below:

/build/_dist_/comp/foo/foo.js

import template from './foo.html.js';

export default {
	template,
	setup: function() {
		return {};
	}
};

/build/_dist_/comp/foo/foo.html.js

export default "<div class=\"app--foo\">\r\n\tHello Foo!\r\n</div>\r\n"

However, snowpack dev fails to load the /_dist_/comp/foo/foo.html.js because it searchs the plugins that output .js files, and not .html.js. I modified my local copy of snowpack to search these "secondary extensions" in the plugins resolve property.

Could any issues arise if these changes became official part of snowpack?

[FredKSchott]

Background: The reason that we have this unique resolve approach to file building is that we need to be able to map to<->from source<->dist. For example, when a foo.css request comes into our dev server, we need to be able to know that "oh, the Sass plugin builds .scss files to .css, so lets check for foo.scss". Traditional build tools only go one direction.

I'd love to support these secondary extensions in plugins if it doesn't mess with that story. The basic premise would be:

• getUrlForFileMount():
  • currently this grabs the file extension from a source file, and checking if a plugin exists for it.
  • Instead, we'll want to flip this: iterate through all plugins to find the first one that matches the file.
• resolveSourceSpecifier():
  • same idea!
• getInputsFromOutput():
  • already mostly working properly, but needs to check for if srcFile.endsWith(resolveOutputExtension) instead to properly handle partial file extensions.

I think that's all that's needed! That feels totally doable, and would still give us a deterministic two-directional mapping from src file path <> dist URL. Is anyone interested in contributing this support? Would love a PR!

[FredKSchott]

Converted to prioritized issue: #1340