Formatting seems to mangle JSON/JS literals inside script tags

[AdamLeyshon]

Package information:

• leptosfmt 0.1.5
• cargo 1.72.0-nightly (f7b95e316 2023-05-30)
• rustc 1.72.0-nightly (871b59520 2023-05-31)

leptos = { version = "0.3", default-features = false, features = ["serde"] }
leptos_meta = { version = "0.3", default-features = false }
leptos_actix = { version = "0.3", optional = true }
leptos_router = { version = "0.3", default-features = false }

Story: When a user has a view! macro which contains JSON/JS inside of a string literal enclosed by a script tag, Indentation should be:

1. Untouched
2. Correctly formatted

What was tried:

Setting attr_value_brace_style = "AlwaysUnlessLit" in leptosfmt.toml but it doesn't seem to affect it (not sure if it's supposed to, it's not really documented on what they do)

What happened:

view! { cx,
        <div class="grow py-5 pr-16">
            <div class="grid grid-cols-1">
                <div id="chart-container" class="grow" style="position: relative; height:60vh; width:100%">
                    <canvas id="chart" style="width: 100%; height: 100%; padding-bottom: 25px;" />
                    <script>
                        "
                        chart_data = {datasets: []};
                        const ctx = document.getElementById('chart');
                        chart = new Chart(ctx, {
                        type: 'line',
                        data: {
                        datasets: [
                        {
                        data: chart_data,
                        borderWidth: 1
                        }
                        ]
                        },
                        options: {
                        parsing: false,
                        normalized: true,
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                        x: { type: 'time', unit: 'millisecond' },
                        y: { beginAtZero: false }
                        },
                        plugins: {
                        legend: {
                        reverse: true,
                        position: 'bottom',
                        labels : {
                        color: 'white',
                        }
                        }
                        }
                        }
                        }
                        );
                        "
                    </script>
                </div>

What was expected:

    view! { cx,
        <div class="grow py-5 pr-16">
            <div class="grid grid-cols-1">
                <div id="chart-container" class="grow" style="position: relative; height:60vh; width:100%">
                    <canvas id="chart" style="width: 100%; height: 100%; padding-bottom: 25px;" />
                    <script>
                        "chart_data = {
                            datasets: []
                        };
                        const ctx = document.getElementById('chart');
                        chart = new Chart(ctx, {
                            type: 'line',
                            data: {
                                datasets: [{
                                    data: chart_data,
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                parsing: false,
                                normalized: true,
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: {
                                    x: {
                                        type: 'time',
                                        unit: 'millisecond'
                                    },
                                    y: {
                                        beginAtZero: false
                                    }
                                },
                                plugins: {
                                    legend: {
                                        reverse: true,
                                        position: 'bottom',
                                        labels: {
                                            color: 'white',
                                        }
                                    }
                                }
                            }
                        });"
                    </script>
                </div>

[bram209]

related #7

[bram209]

Thanks for reporting! I will try to look at this soon, meanwhile I recommend that you keep the raw json string outside the view! macro.

Albeit off-topic, I reckon that eventually you would like to use something like the json! macro, so that you can insert dynamic values: https://github.com/serde-rs/json#constructing-json-values ?

[bram209]

Just merged #32 to main, which will keep original indentation with multiline quoted strings. (so 1. untouched). It does not format it's contents, I am not sure if I want to deal with external javascript formatters within this lib.

I honestly think you would be better of writing the script contents to a dedicated JS file so that you get proper editor support, highlighting, formatting etc, thoughts?