templ
templ copied to clipboard
a-h
question: Does/Should javascript blocks be formatted with `templ fmt` command?
This is just a question as per the title. I am not sure if it should work.
example file with weird indentations:
$ templ fmt < ./siteexp.templ
package templates
script graph(data string) {
const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData(data);
if (true) {
console.log("yes");
} else {
console.log("no");
}
}
templ body() {
<script>
const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData([
{ time: '2019-04-11', value: 80.01 },
{ time: '2019-04-12', value: 96.63 },
{ time: '2019-04-13', value: 76.64 },
{ time: '2019-04-14', value: 81.89 },
{ time: '2019-04-15', value: 74.43 },
{ time: '2019-04-16', value: 80.01 },
{ time: '2019-04-17', value: 96.63 },
{ time: '2019-04-18', value: 76.64 },
{ time: '2019-04-19', value: 81.89 },
{ time: '2019-04-20', value: 74.43 },
]);
</script>
<body>
<div>
hello
</div>
</body>
}
The html 'body' section at the end does format, however nothing in either a 'script' block or tags gets formatted.
Hi @jmarais to answer your question of if templ "does" any formatting, it doesn't currently no.
Whether it should is a harder question, there are a lot of differing opinions on how formatting should be done in terms of JS, so my suggestion would be to encourage separate tools that allow users to configure preferences, rather than having these baked in to templ.
Thanks. I had some problem formatting the javascript inside a templ file. I don't know of any formatters that will handle this embedded language situation. Since formatters just overwrite the whole file they essentially compete with each other. Do you currently have a method to handle this? Or is the current suggestion to just keep the 'script' blocks formatted by hand?
Interesting idea. I think that templ could detect the presence of a .prettierrc and, if present, and the prettier executable is on the path, could call out and format the JS.
If a .prettierrc was found, but there's no prettier executable, then it could be a warning.
If you are using Neovim, you can run your formatters with https://github.com/stevearc/conform.nvim, which has injected language support through tree sitter. I use it to run biome on the JavaScript portions of my code.
@JonnyLoughlin, Thanks. I will give conform a shot.
edit: @JonnyLoughlin I played around with conform. It doesnt seem to detect the javascript blocks as injected languages in my above example file. I might be messing up the config, do you have a config I can take a look at?
I think I got it with the ["*"] = { "injected" }, config in the `formatters_by_ft``` section. conform can fallback to the lsp and format injected langues.
It still feels weird using external formatters while the templ tool provides a 'fmt' command.
return {
"stevearc/conform.nvim",
event = { "BufWritePre" },
cmd = { "ConformInfo" },
opts = {
formatters_by_ft = {
lua = { "stylua" },
go = { "goimports", "gofumpt" },
templ = { "templ", "injected" },
javascript = { "biome" },
typescript = { "biome" },
typescriptreact = { "biome" },
json = { "biome" },
sh = { "beautysh" },
zsh = { "beautysh" },
},
format_on_save = {
lsp_fallback = false,
timeout_ms = 1000,
},
log_level = vim.log.levels.INFO,
notify_on_error = true,
},
}
That is my config. There seems to be a bit of an issue with indenting with this method, but it gets fixed by wrapping the js code. For example:
script graph(data string) {
{
const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData(data);
if (true) {
console.log("yes");
} else {
console.log("no");
}
}
}
templ body() {
<script>
{
const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData([
{ time: '2019-04-11', value: 80.01 },
{ time: '2019-04-12', value: 96.63 },
{ time: '2019-04-13', value: 76.64 },
{ time: '2019-04-14', value: 81.89 },
{ time: '2019-04-15', value: 74.43 },
{ time: '2019-04-16', value: 80.01 },
{ time: '2019-04-17', value: 96.63 },
{ time: '2019-04-18', value: 76.64 },
{ time: '2019-04-19', value: 81.89 },
{ time: '2019-04-20', value: 74.43 },
]);
}
</script>
<body>
<div>
hello
</div>
</body>
}
formats to
script graph(data string) {
{
const chart = LightweightCharts.createChart(document.body, {
width: 400,
height: 300,
});
const lineSeries = chart.addLineSeries();
lineSeries.setData(data);
if (true) {
console.log("yes");
} else {
console.log("no");
}
}
}
templ body() {
<script>
{
const chart = LightweightCharts.createChart(document.body, {
width: 400,
height: 300,
});
const lineSeries = chart.addLineSeries();
lineSeries.setData([
{ time: "2019-04-11", value: 80.01 },
{ time: "2019-04-12", value: 96.63 },
{ time: "2019-04-13", value: 76.64 },
{ time: "2019-04-14", value: 81.89 },
{ time: "2019-04-15", value: 74.43 },
{ time: "2019-04-16", value: 80.01 },
{ time: "2019-04-17", value: 96.63 },
{ time: "2019-04-18", value: 76.64 },
{ time: "2019-04-19", value: 81.89 },
{ time: "2019-04-20", value: 74.43 },
]);
}</script>
<body>
<div>
hello
</div>
</body>
}
for me with my config. I do intend on figuring out why the extra brackets are needed. I just haven't had time to dive in.
Thanks for the reference. The brackets are a neat trick.
Something else I tried was just using the javascript functions in the .templ file, but defining all the javascript logic in a .js file. I just run the templ formatter over the .templ file and can then use the javascript related tools (tsserver lsp and prettier) in the .js files without worrying about embedded language formatting.