[Dropzone][Toolkit] Apply Twig CS Fixer

[seb-jean]

Q	A
Bug fix?	no
New feature?	no
Deprecations?	no
Documentation?	no
Issues	Fix #...
License	MIT

I added $config->allowNonFixableRules(); in the .twig-cs-fixer.dist.php file to surface errors that aren't automatically fixable, then fixed those errors.

Here is an overview of the errors:

php vendor/bin/twig-cs-fixer lint
 KO /home/sebastien/ux-twig-cs-fixer/src/Dropzone/templates/form_theme.html.twig
 ------- -----------------------------------------------------------------------------------------------------------------------------
  ERROR   1    | {% block dropzone_widget -%}
          2    |     {%- set dataController = (attr['data-controller']|default('') ~ ' symfony--ux-dropzone--dropzone')|trim -%}
          >>   | The var name must use snake_case; expected data_controller.
          3    |     {%- set attr = attr|merge({'data-controller': '', class: (attr.class|default('') ~ ' dropzone-input')|trim}) -%}
 ------- -----------------------------------------------------------------------------------------------------------------------------

 KO /home/sebastien/ux-twig-cs-fixer/src/TwigComponent/templates/Collector/twig_component.html.twig
 ------- -------------------------------------------------------------------------------------
  ERROR   133  | {% set text %}
          134  |     {% for _component in collector.components %}
          >>   | The var name must use snake_case; expected component.
          135  |         <div class="sf-toolbar-info-piece">
 ------- -------------------------------------------------------------------------------------
  ERROR   250  | <div class="twig-component-renders">
          251  |     {% set _memory = null %}
          >>   | The var name must use snake_case; expected memory.
          252  |     {% for render in collector.renders %}
 ------- -------------------------------------------------------------------------------------
  ERROR   268  | <th class="cell-right renderTime">
          269  |     {% set _render_memory = render.render_memory|default(0) / 1024 / 1024 %}
          >>   | The var name must use snake_case; expected render_memory.
          270  |     <span class="{{ _render_memory == _memory ? 'text-muted' }}">
 ------- -------------------------------------------------------------------------------------
  ERROR   273  |     <span class="text-muted text-small">MiB</span>
          274  |     {% set _memory = _render_memory %}
          >>   | The var name must use snake_case; expected memory.
          275  | </th>
 ------- -------------------------------------------------------------------------------------

 KO /home/sebastien/ux-twig-cs-fixer/src/Toolkit/kits/flowbite-4/dropdown/templates/components/Dropdown.html.twig
 ------- ------------------------------------------------------------------------
  ERROR   10   |
          11   | {%- set _dropdown_id = 'dropdown-' ~ id -%}
          >>   | The var name must use snake_case; expected dropdown_id.
          12   | {%- set _dropdown_trigger_id = _dropdown_id ~ '-trigger' -%}
 ------- ------------------------------------------------------------------------
  ERROR   11   | {%- set _dropdown_id = 'dropdown-' ~ id -%}
          12   | {%- set _dropdown_trigger_id = _dropdown_id ~ '-trigger' -%}
          >>   | The var name must use snake_case; expected dropdown_trigger_id.
          13   |
 ------- ------------------------------------------------------------------------

 KO /home/sebastien/ux-twig-cs-fixer/src/Toolkit/kits/flowbite-4/dropdown/templates/components/Dropdown/Sub.html.twig
 ------- ------------------------------------------------------------------------
  ERROR   13   |
          14   | {%- set _dropdown_id = 'dropdown-sub-' ~ id -%}
          >>   | The var name must use snake_case; expected dropdown_id.
          15   | {%- set _dropdown_trigger_id = _dropdown_id ~ '-trigger' -%}
 ------- ------------------------------------------------------------------------
  ERROR   14   | {%- set _dropdown_id = 'dropdown-sub-' ~ id -%}
          15   | {%- set _dropdown_trigger_id = _dropdown_id ~ '-trigger' -%}
          >>   | The var name must use snake_case; expected dropdown_trigger_id.
          16   | {%- set _dropdown_content = block('content') -%}
 ------- ------------------------------------------------------------------------
  ERROR   15   | {%- set _dropdown_trigger_id = _dropdown_id ~ '-trigger' -%}
          16   | {%- set _dropdown_content = block('content') -%}
          >>   | The var name must use snake_case; expected dropdown_content.
          17   |
 ------- ------------------------------------------------------------------------
 
 [...]

[Kocal]

Please keep _ prefix for Twig variables declared inside components, these variables "overflow" in the user's templates and we want to reduce the risk of collision

[Kocal]

Suggested change

	{% set attributes_defaults = {} %}
	{% set _attributes_defaults = {} %}

[Kocal]

There are no modifications on the Twig-CS-Fixer configuration file?

[seb-jean]

There are no modifications on the Twig-CS-Fixer configuration file?

@VincentLanglet, I'd like your opinion on this. Do you need to modify https://github.com/VincentLanglet/Twig-CS-Fixer to add two rules:

• _ prefix for Twig variables declared inside components
• and the use of camelCase, as explained in [Toolkit][Shadcn] Rework toggle-group recipe to use provide()/inject() #3528 (comment)

Or should we modify the configuration of our .twig-cs-fixer.dist.php file?

I added $config->allowNonFixableRules(); to the .twig-cs-fixer.dist.php file.

[VincentLanglet]

There are no modifications on the Twig-CS-Fixer configuration file?

@VincentLanglet, I'd like your opinion on this. Do you need to modify VincentLanglet/Twig-CS-Fixer to add two rules:

• _ prefix for Twig variables declared inside components

The rule already has an option "optionalPrefix" we should allow you to use _ as a an optional prefix.

I'm not sure it should be change in the generic ruleset cause this seems to be a specific rule used by symfony/ux which is not recommended in the Twig coding standard.

• and the use of camelCase, as explained in [Toolkit][Shadcn] Rework toggle-group recipe to use provide()/inject() #3528 (comment)

Definetly something custom to this repo.

Or should we modify the configuration of our .twig-cs-fixer.dist.php file?

Yes, that's the way

[seb-jean]

There are no modifications on the Twig-CS-Fixer configuration file?

@VincentLanglet, I'd like your opinion on this. Do you need to modify VincentLanglet/Twig-CS-Fixer to add two rules:

• _ prefix for Twig variables declared inside components

The rule already has an option "optionalPrefix" we should allow you to use _ as a an optional prefix.

I'm not sure it should be change in the generic ruleset cause this seems to be a specific rule used by symfony/ux which is not recommended in the Twig coding standard.

• and the use of camelCase, as explained in [Toolkit][Shadcn] Rework toggle-group recipe to use provide()/inject() #3528 (comment)

Definetly something custom to this repo.

Or should we modify the configuration of our .twig-cs-fixer.dist.php file?

Yes, that's the way

Thanks @VincentLanglet for your feedback!

I've updated the .twig-cs-fixer.dist.php configuration with:

• The optionalPrefix: '_' option for component-internal variables
• A custom VariableNameRule (in tools/twig-cs-fixer/) that replaces the original rule to accept both snake_case and camelCase per segment, since some Toolkit variables mix both conventions (e.g. _tooltip_wrapperId)

[Kocal]

Thank you @seb-jean.