Blade syntax inside script tag is not working

[iwasherefirst2]

Description

As soon as blade syntax gets inside script tags, its becomes uglified and invalid.

Input Before Beautification

This is what the code looked like before:

<script>
@foreach ($users as $user)
@if ($user->type == 1)
@continue
@endif
<li>{{ $user->name }}</li>
@if ($user->number == 5)
@break
@endif
@endforeach
</script>

Expected Output

The beautified code should have looked like this:

<script>
@foreach ($users as $user)
    @if ($user->type == 1)
    @continue
    @endif
    <li>{{ $user->name }}</li>
    @if ($user->number == 5)
    @break
    @endif
@endforeach
</script>

Actual Output

The beautified code actually looked like this:

<script>
    < blade foreach / > ($users as $user) <
        blade
    if / > ($user - > type == 1) <
    blade
    continue / >
        <
        blade endif / >
        <
        li > {
            {
                $user - > name
            }
        } < /li> <
        blade
    if / > ($user - > number == 5) <
    blade
    break / >
        <
        blade endif / >
        <
        blade endforeach / >
</script>

Steps to Reproduce

1. Add code to Atom editor
2. Run command Atom Beautify: Beautify Language Blade
3. This beautified code does not look right!

Debug

Here is a link to the debug-3.md Gist: https://gist.github.com/iwasherefirst2/727e88d9bdda3f54585146af62aa3af2

Checklist

I have:

• [x] Tried uninstalling and reinstalling Atom Beautify to ensure it installed properly
• [x] Reloaded (or restarted) Atom to ensure it is not a caching issue
• [x] Searched through existing Atom Beautify Issues at https://github.com/Glavin001/atom-beautify/issues so I know this is not a duplicate issue
• [x] Filled out the Input, Expected, and Actual sections above or have edited/removed them in a way that fully describes the issue.
• [x] Generated debugging information by executing Atom Beautify: Help Debug Editor command in Atom and added link for debug.md Gist to this issue

[iwasherefirst2]

I figured out that the following code changes in js-beautify.coffee keep the code valid:

   text = beautifyHTML(text, options)
            # post script (Workaround)
            text = text.replace(/<[\n\s]*blade[\n\s]*(.*)[\s\n]*\/[\s\n]*>/ig, "@$1")

but it remains that the formatting is really bad. I don't know how to fix it, so I can't create a PR quite yet for it. Any hits how to fix the bad format?

[aidancrane]

The script above does half work to fix the problem, my js-beautify.coffee is now as follows,

C:\Users\aidan\.atom\packages\atom-beautify\src\beautifiers\js-beautify.coffee

          when "Blade"
            beautifyHTML = require("js-beautify").html
            # pre script (Workaround)
            text = text.replace(/\@(?!yield)([^\n\s]*)/ig, "<blade $1 />")
            text = beautifyHTML(text, options)
            # post script (Workaround)
            text = text.replace(/<[\n\s]*blade[\n\s]*(.*)[\s\n]*\/[\s\n]*>/ig, "@$1")
            text = text.replace(/<blade ([^\n\s]*)\s*\/>/ig, "@$1")
            text = text.replace(/\(\ \'/ig, "('")
            @debug("Beautified HTML: #{text}")
            resolve text
          else

I was then able to get my previously not working code, (cut down)

<script>
var table = $('#responses-table').DataTable({
      columns: [
                    {
                        data: 'name',
                        name: 'name',
                    },
                    @foreach  ($form->response_categories as $title => $item)
                    {
                        data: '{{ $item }}',
                        data: '{{ $item }}',
                    },
                    @endforeach 
                ],
            });
</script>

To grammatically correctly format by doing the following,

<script>
var table = $('#responses-table').DataTable({
      columns: [
                    {
                        data: 'name',
                        name: 'name',
                    },

                    @foreach  ($form["response_categories"] as $title => $item)

                    {
                        data: '{{ $item }}',
                        data: '{{ $item }}',
                    },

                    @endforeach 

                ],
            });
</script>

Not ideal, better than the default though. Using your version without adapting my code produces the following, which is invalid.

<script>
    var table = $('#responses-table').DataTable({
        columns: [{
            data: 'name',
            name: 'name',
        }, @foreach  ($form - > response_categories as $title => $item) {
            data: '{{ $item }}',
            data: '{{ $item }}',
        }, @endforeach  ],
    });
</script>

[aidancrane]

https://github.com/Glavin001/atom-beautify/pull/2422

Fixes this issue but has not been merged.