Verändert JavaScript-Dateien die als .html5 geladen werden.

[Tastaturberuf]

Contao 4.9.20
RSFH 2.0+

Ich nutze bei einem übernommenen Kundenprojekt https://github.com/heimrichhannot/contao-slick.

Dort werden in den Assets /assets/js/* JavaScript-Dateien angelegt die aus Contao-Template-Dateien generiert werden.

Wenn der Redakteuer/Admin eingeloggt ist und die Assets neu generiert (werden) hängt sich der Frontend-Helper in die Button-Konfiguration des Sliders. Vermutlich über einen Template-Hook und findet dann per Regex den Button. Das JavaScript ist danach invalide und wird einen Token-Error.

Ich habe das mal Anhand eine Gist dargestellt. https://gist.github.com/Tastaturberuf/7d8cde2176b27d4651dbe85bad244076/revisions

Ich kann dir das gerne in einem Live-System per Bildschirm demonstrieren.

[ausi]

Wie sehen die Template-Dateien aus?
Ist die Dateiendung .html5?
Werden die Dateien im Frontend generiert oder im Backend? (TL_MODE)

[Tastaturberuf]

Wie sehen die Template-Dateien aus?
Ist die Dateiendung .html5?

https://github.com/heimrichhannot/contao-slick/blob/master/templates/jquery/jquery.slick.html5

Werden die Dateien im Frontend generiert oder im Backend? (TL_MODE)

Kann ich nicht genau sagen, es passiert wenn die Seite im Frontend aufgerufen wird und die Scripts unter /assets nicht existieren. Ich vermute das ist dann TL_MODE==='FE'.

[ausi]

Tritt dasselbe Problem auch ohne Frontend-Helper auf, wenn der Debug-Modus aktiviert ist, da dann die <!-- TEMPLATE START: … --> Kommentare in das Template eingefügt werden?

[Tastaturberuf]

Nein, er läd sie trotzdem aus dem Assests-Ordner:

[Tastaturberuf]

Ich versuch das Konstrukt mal mit einem ce_html_*.html5 nachzustellen. Dann lässt sich das vielleicht einfacher nachvollziehen.

[ausi]

Nein, er läd sie trotzdem aus dem Assests-Ordner:

Und die generierten JavaScript-Dateien enthalten keine <!-- TEMPLATE START: … --> kommentare?

Dann lässt sich das vielleicht einfacher nachvollziehen.

Ich kann es nachvollziehen, allerdings ist mir noch keine Möglichkeit für die Lösung eingefallen. Wir müssten an dieser Stelle irgendwie unterscheiden können ob es sich um ein JavaScript-Template handelt oder nicht:

contao-rocksolid-frontend-helper/src/FrontendHooks.php

Line 53 in 6609546

public function parseFrontendTemplateHook($content, $template)

[Tastaturberuf]

Aber wieso hängt der sich einfach in meinen <button>-Code? Das könnte ja auch random irgendein button sein.

[ausi]

Diese Funktion:

contao-rocksolid-frontend-helper/src/FrontendHooks.php

Line 891 in 6609546

protected static function insertData($content, $data)

fügt das Data-Attribut dem ersten HTML-Tag hinzu den es im Output finden kann.
Da es aktuell nicht erkennt, dass es sich um ein JavaScript-Template handelt, denkt die Erweiterung es wäre ein HTML-Button-Element.

[ausi]

Die google maps Erweiterung hatte ein ähnliches problem dass wir in 96ae3d5 beheben konnten. Eventuell lässt sich diese Lösung auch auf dieses Problem anwenden.

[Tastaturberuf]

Ich verstehe, dann kann ich eventuell nen Dummy-Element in Kommentaren davor einbauen, der das einfach abfängt. I will try.

[Tastaturberuf]

Das scheint geholfen zu haben. Kann einem aber halt immer wieder auf die Füße fallen. Danke dir jedensfall für die Erklärung.

[Tastaturberuf]

Ist halt schon ne Edge Case das bestimmte Konstellationen zusammen kommen müssen, da das gecached wird. Mir ist auch klar das die Slick-Erweiterung hoffnungslos veraltet ist.

[Tastaturberuf]

(function($){
function initSlick(){

// dummy html for frontend-editor
// <button data-frontend-helper="&#123;&quot;template&quot;:&quot;jquery.slick&quot;,&quot;templatePath&quot;:&quot;templates\/coderebels\/templates\/jquery.slick.html5&quot;,&quot;templateURL&quot;:&quot;\/preview.php\/contao?do=tpl_editor&amp;act=source&amp;id=templates%2Fcoderebels%2Ftemplates%2Fjquery.slick.html5&amp;rt=pJ4HaVjrKFPp1eoXotaWE1J29PMyQF6SBL74Q9JYzt8&amp;rsfhr=1&quot;,&quot;templateLabel&quot;:&quot;Den Quelltext der Datei \&quot;jquery.slick.html5\&quot; bearbeiten&quot;&#125;"></button>

var el = $('.slick_2f8da9 .slick-container'),
total = el.children().length;

[ausi]

Ich würde das ticket erstmal noch offen lassen, eventuell findet sich ja eine Variante ahnlich zu 96ae3d5.