Embedded JS in Alpine x-data

[cheesegrits]

Any chance we can get embedded JS in Alpine x-data strings formatted?

Big ask, I know, but this is one of my biggest headaches with Blade formatting.

Thanks for all the hard work on this. It's awesome having someone show Blade formatting some serious love.

    <div
        x-ignore
        ax-load
        ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('file-upload', 'filament/forms') }}"
        x-data="fileUploadFormComponent({
            acceptedFileTypes: @js($getAcceptedFileTypes()),
            deleteUploadedFileUsing: async (fileKey) => {
                return await $wire.deleteUploadedFile(@js($statePath), fileKey)
            },
            getUploadedFilesUsing: async () => {
                return await $wire.getFormUploadedFiles(@js($statePath))
            },
            uploadUsing: (fileKey, file, success, error, progress) => {
                $wire.upload(`{{ $statePath }}.${fileKey}`, file, () => {
                    success(fileKey)
                }, error, progress)
            },
        })"
        wire:ignore
    >

[zepfietje]

Just for context, @cheesegrits brought this up with me and I told him to create an issue for it, @JohnathonKoster. I'd also already been thinking about this for the Filament codebase. Would be nice if this worked in all Alpine directives (like x-text, x-show).

Let us know your thoughts, John! 😄

[JohnathonKoster]

This is definitely something I can look into. Will update here as I know more 🙂

[zepfietje]

Awesome!

[JohnathonKoster]

WIP todo-list (to be updated as review/prototype work continues):

• [x] Refactor fragmented-HTML parser to account for attributes like <input x-on:change{{ $type === 'number' ? '.debounce.1s' : null }}="..." /> **
• [x] Updated HTML parser should not break existing dynamic-HTML element features (<{{ $tag }}>...</{{ $tag }}>)
• [x] Pass Core Parser Test Cases (w/ attribute logic enabled)
• [x] Pass Core Pint Test Cases (w/ attribute logic enabled)
• [x] Process to safely extract attribute content to be formatted, and reconstruct the document for general formatting
• [x] Handle case when attribute documents contain simple content like {}
• [x] Ensure duplicate attributes do not get removed (even if they don't make any sense)
• [x] Internal logic to detect what is likely JavaScript objects (such as x-data), vs. a statement block
• [x] Detect when attributes contain only Blade. i.e., something="{{ $variable }}"
• [x] Refactor nested JavaScript document process to be a pre-processor (similar to CSS class strings) to continue leveraging the current Pint process
• [x] Refactor things back to being process inlined *****
• [x] Update HTML parser to advance over directives contained within attribute content
• [x] Return original attribute content when it contains Directive pairs, conditions, etc. ***
• [x] Intelligent newline management for output
  • [x] Preserve single-line attributes when it makes sense
  • [x] No extra leading/trailing blank lines in final output
• [x] No trailing semi-colon in final output for object-only attribute input
• [x] Internal JavaScript formatting utility
• [x] Force singleSpace: true regardless of prettier settings ****
• [x] Detect original quote-style and preserve choice in output (relates to above item)
• [x] Placeholder strings maintain consistent length to accidentally cause attributes in the output to be on the same line (when they should be separate lines)
• [x] Code Style: Nested object-only documents {} should have their opening { after the " and the final } before the closing ", including within multi-line output
• [x] Code Style: statement blocks should have the starting/ending quotes on separate lines, and each statement will appear indented after the opening "
• [x] JavaScript syntax reflow:
  • [x] Reflow ! operator to have a space, to more closely align with PHP Pint output
• [x] Safe failure mode: If anything fails while formatting the nested JavaScript document, return the original content for the sub-document
• [x] Force generous printWidth setting to not have obnoxious attribute content in output
• [x] Configurable attribute list
  • [x] Sane defaults
  • [x] Research common attribute names
  • [x] Sanity testing
• [x] Considerations
  • [x] Don't break things like Vue.JS
• [x] Object input containing trailing semi-colon
• [x] Avoid Alpine x-transition
• [x] Account for attribute names with .modifier syntax
• [x] Account for attribute names with :modifier syntax
• [x] Update acceptance tests
• [x] JavaScript containing comparison operators will confuse fragment extraction (<=, <,etc.)
• [x] It doesn't do stupid things on deeply indented code
• [x] JavaScript Parser
• [x] JavaScript Class String Emulation support
• [x] Class String emulation for stuff like x-transition
• [x] It doesn't do dumb things with large amounts of Blade code inside JavaScript strings inside attributes
• [x] Use Laravel Pint inside attribute formatting
• [x] Parse the PHP inside the Blade inside the JavaScript inside the HTML attribute
• [x] Push attribute Blade to outer transformer for Pint to improve performance 🚀🚀
• [x] Relative indentation/improved formatting of Blade component attributes
• [x] Format JavaScript inside Blade component attributes <x-something ::escaped="1+1+1+1" />
• [x] Format PHP inside Blade component attributes <x-something :some="reallyCoolValue()" />
• [x] Implement "Shadow Document" **
• [x] Return shadow document content on catastrophic failures

Need to add test coverage and ensure safe behavior with the following structures, even if their placement inside an attribute might not always make sense:

• [x] Blade Components
• [x] Blade Comments
• [x] Inline PHP Node
• [x] Shorthand Inline PHP Node
• [x] Directives
• [x] Conditions
• [x] Switch Statements
• [x] For Else
• [x] Echo (and variants)
• [x] Verbatim

Files with interesting output requiring review before general availability:

Filament 3:

• [x] forms/resources/views/components/wizard.blade.php
• [x] panels/resources/views/components/form/actions.blade.php
• [x] panels/resources/views/components/layouts/app/sidebar/index.blade.php
• [x] support/resources/views/components/dropdown/header.blade.php

Currently the attribute name cannot be determined during the lookback, as it breaks on whitespace. Additionally, there are challenges with any number of strings within embedded Blade content. * Original content will be returned to prevent layout changes from impacting generated JavaScript, as there is no reliable way to predict what the final output will be in all situations. Simple directives, echos, etc. will be fine. *** This is to account for the fact that the final output will be embedded in double quotes for HTML-attributes The pre-processor approach works well, however the replacement takes place before the layout process happens and prettier just wrecks everything due to print width settings ** The shadow document will be used behind the scenes to help resolve structures when the main document has been significantly altered to assist with formatting.

[JohnathonKoster]

This is now available starting with v1.6 🎉 - there are some configuration options available. I've added them in this comment for convenience, but this information is also available within the readme:

Formatting JavaScript Inside Attributes

The Blade formatter will format JavaScript inside Alpine.js directives by default (starting with 1.6.0). This can be disabled by adding a formatJsAttributes configuration item to your .blade.format.json:

{
    "formatJsAttributes": false,
}

If you would like to exclude a list of attributes from being formatted, you may add a list of regular expressions to the .blade.format.json file. By default, it contains the following items:

{
    "formatJsAttributes": true,
    "excludeJsAttributes": [
        "^v-"
    ]
}

If you'd like to expand the list of attributes to be formatted, you may add a list of regular expressions to the .blade.format.json file. By default this list contains the following items:

{
    "formatJsAttributes": true,
    "includeJsAttributes": [
        "^x-",
        "^ax-"
    ]
}

Modifying JavaScript Prettier Options

You can change which prettier options are applied to attribute content by adding a attributeJsOptions configuration object to your .blade.format.json file. For example, to increase the print width and disable the insertion of semicolons, you could add the following:

{
    "attributeJsOptions": {
        "semi": false,
        "printWidth": 120
    }
}

[zepfietje]

Great work, @JohnathonKoster! I'll give it a go soon.