svelte-style html files

[brumm]

Hey,

I'm trying to extract dependencies from a svelte-style .html file.
It seems like precinct is trying to parse it like JSX:

❯ env DEBUG=precinct npx precinct svelte/HelloWorld.html
  precinct options given:  { es6: {} } +0ms
  precinct could not parse content: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (7:0) +8ms
[]

This is the file content:

<div class="container">
	<h1>Hello {name}!</h1>

	<EditingMessage></EditingMessage>
</div>

<style>
	.container {
		text-align: center;
		margin-top: 2rem;

		font-family: sans-serif;
	}
</style>

<script>
	import EditingMessage from './EditingMessage.html';

	export default {
		components: { EditingMessage }
	}
</script>

I think vue single file components look quite similarly.

I may have some time later this week to look into this myself, just wanted to document this somewhere.

[mrjoelkemp]

Thanks for filing @brumm.

There's no detective-html at the moment, but it would be cool to have one to serve your desired purpose. It could be as simple as only supporting embedded es6 instead of handling all module formats embedded in html. If you could somehow extract the JS code, generate the JS AST, then that could be used wholesale in filing-cabinet to resolve the imported modules for use in dependency-tree.

If you want to tackle creating the detective-html package, I'd be very open to having it used within precinct.

An aside: I don't think the precinct cli sets any of the supported precinct options, so beware when using that.

[brumm]

Alright! Good to know. I'll take a look next week. Should really just be a matter of parsing the html and delegating to the respective detective (it even rhymes)

[maxim-usikov]

Any news? Want this for vue