Allow to disable nested attributes with ! #2325
Conversation
|
Hi @ottaviano, thank you for this PR! We have special handling for aria attributes, classes, stimulus attributes, etc. I see not problem if we add a special case if a given attribute key:
(and I still consider that "x-bind" cannot be a component name) So i'm still thinking we should have a special treatment here.. because even if the solution you suggest is smart, i really don't like to open the regex like this and allow new caracters here. :| What do you think ? |
|
Do we agree this issue would not occurs if the "nested attributes" feature didn't exist? :/ |
|
Once we release and document a feature, we can’t just remove it without consideration—even if I’d love to, especially to resolve some Twig/Live issues! 🙂 |
|
managing each library (like AlpineJs, Vue, etc) independently can add complexity to the code, as we may need to revisit and modify it if a new conflict arises with another library in the future. My approach is to simply enable/disable a nested attribute, ensuring compatibility with any JavaScript library. |
|
Yes, but it add (again) a new syntax for attributes, that should be documented and known by users. With #2328, yes it add more work and complexity for us (UX mainteners), but users will be able to copy/paste examples valid Alpine (and others) code without trying to understand why the code does not work when they use the special attributes on a Twig component: |
|
I see your point; I close this PR in favor of #2328 |
|
Yep, nothing to do with your PR, i was thinking of DX and incoming support .. i should have been more explicit sorry @ottaviano :) |
… (smnandre) This PR was squashed before being merged into the 2.x branch. Discussion ---------- [TwigComponent] Ignore "nested" for Alpine & Vue attributes | Q | A | ------------- | --- | Bug fix? | yes | New feature? | no <!-- please update src/**/CHANGELOG.md files --> | Issues | Fix #1839 | License | MIT Have lost time on Twig & the website 😓 Alternative implementation of #2325 Update: Improved `__toString` performance following `@Kocal` comments --- Now all these attributes are directly rendered | Framework | Prefix | Code Example | Documentation | |-----------------|---------|-------------------------------------------------------------------------------------------------------|----------------------------------------------------------------| | **Alpine.js** | `x-` | `<div x-data="{ open: false }" x-show="open"></div>` | [Documentation Alpine.js](https://alpinejs.dev/) | | **Vue.js** | `v-` | `<input v-model="message" v-if="show">` | [Documentation Vue.js](https://vuejs.org/guide/) | | **Stencil** | `@` | `<my-component `@onClick`="handleClick"></my-component>` | [Documentation Stencil](https://stenciljs.com/docs/) | | **Lit** | `@` | `<button `@click`="${this.handleClick}">Click me</button>` | [Documentation Lit](https://lit.dev/docs/) | Commits ------- 7bd2854 Improve __toString performance cb7809f Add str_contains in nested method 9f7c9c8 Performance 3452436 fabbot 1ed1db7 [TwigComponent] Ignore "nested" for Alpine & Vue attributes
With the nested attributes feature, components have become incompatible with the AlpineJS library, which also uses HTML attributes in a similar format, such as x-bind:class="foo" or x-transition:enter="ease-out duration-300".
This PR introduces a way to specify that an attribute containing : and ending with ! should not be treated as a nested attribute.
Propose :