Add no-empty-file rule

[manovotny]

Fixes #1477.

[fisker]

Empty BlockStatement should also consider empty

{
}

{
;;;
}

{
	'use strict';
}

{
	  {
	  }
}

[manovotny]

@fisker all your changes have been incorporated. Please let me know if there is anything else you'd like to see.

[manovotny]

@fisker everything should once again be addressed. Please let me know if you notice anything else.

[fisker]

Everything looks good, I'll take a deeper look ASAP, I've been very busy recently.

[manovotny]

@fisker no worries! Was just making sure there wasn't anything else immediate to take care of. Totally understand busyness, so take whatever time you need.

[fisker]

Can you merge manovotny#1, and fix failed tests? I can't commit to your fork.

[manovotny]

@fisker I'm not sure the Vue tests that were added are correct... I am not a Vue developer (I use React), so I am not an expert here, but in reading the Vue Single File Components documentation, I think this is what we'd want for tests instead. Do you agree / disagree?

test.snapshot({
	testerOptions: {
		parser: parsers.vue,
	},
	valid: [
		outdent`
			<template></template>
			<style></style>
			<script>const x = 0;</script>
			<custom-block></custom-block>
		`,
	],
	invalid: [
		outdent`
			<template></template>
			<style></style>
			<script></script>
			<custom-block></custom-block>
		`,
		outdent`
			<template></template>
			<style></style>
			<script>;</script>
			<custom-block></custom-block>
		`,
	],
});

[manovotny]

@fisker @sindresorhus can I get any input on my Vue comment above and if it is correct or incorrect?

[fisker]

I'm sorry, somehow I missed this comment.

I'm not sure what you mean. Are you saying we should have all those blocks? If true, I disagree. A SFC file only have <script> is valid, the template can be replaced by render function in <script>, and only have <template> is also valid.

[manovotny]

@fisker I'm sure you only have one or two comments a day to reply to. 😂 Sincerely no worries.

Good to know. As I stated, I have little to no experience. I will proceed with your tests, but might need some insight. I'll let you know if I have questions.

[manovotny]

@fisker I guess where I'm still slightly confused is that you have all of these marked as valid.

test.snapshot({
	testerOptions: {
		parser: parsers.vue,
	},
	valid: [
		'<template></template>',
		'<style></style>',
		'<script></script>',
		'<script>;</script>',
		'<custom-block></custom-block>',
	],
	invalid: [
		'   ',
	],
});

But if they don't contain any logic, markup, or styles, they would be considered "empty", right? Shouldn't these all be considered invalid instead?

Also seems like we should add tests for valid tests for <script src="./component.js"></script> and <style src="./component.css"></style> too.

[fisker]

Also seems like we should add tests for valid tests for <script src="./component.js"></script> and <style src="./component.css"></style> too.

👍

But if they don't contain any logic, markup, or styles, they would be considered "empty", right?

I'm not really sure about those cases now, maybe we should just ignore .vue files.

[manovotny]

@fisker sorry for the long delay. I went down a deep rabbit hole with Vue to understand it a bit better (I had never used it before). I created some experiments in a repo, which also lists some helpful references in it's readme.

As far as I can tell, an SFC is invalid unless it has a render function in the script block or a template block. There's a whole bunch of other scenarios to consider with styles and src attributes too.

I updated the tests to what I think are proper valid and invalid tests. I am interested in your opinion of them.

Even if we agree that these are correct, I still am somewhat unclear on how to best make the tests pass. I debugged the tests for a while, but I didn't feel confident that I understood how to best check the Vue specific code. I've looked at other Vue examples in the repo, but I am still not understanding it well. I'd be interested in some hints or suggestions or like you previously mentioned, we can skip handling Vue completely.

[fisker]

As far as I can tell, an SFC is invalid unless it has a render function in the script block or a template block.

I think you are right about this, but there is also an edge case, the empty component is used with a global mixin (with render of cause), then it can be a valid component. I'm just pointing the possibility in theory.

---

I'm also a little worried about svelte SFC files(I don't know about it), and empty code blocks in markdown files.

[fisker]

This PR has been blocked for quite a long time.

Let's do this, only check .js/.mjs/.cjs/.ts/.mts/.cts files for now.

I've committed changes, hope it's fine.

@sindresorhus WDYT?

[manovotny]

@fisker that sounds like a good plan to me. If / When a clearer path forward for Vue, Svelte, etc. becomes more obvious, we can do a follow up PR and address it at that time.

[sindresorhus]

Thanks for contributing this rule :)