Unable to replace topic-list-item.raw.hbs / topic-list-item.hbr on mobile

[duranmla (Alexis Duran)]

Hello everyone,

I am doing a theme to customise several aspects from the default Discourse, with that in mind, one of the things I need to customise is the topic-list-item which seems to be fairly simple, I add on my theme a file under the path of javascripts/discourse/templates/components/topic-list-item.hbs and I can put my code there. Nevertheless, here is where the questions start to emerge.

There is a method on the component for that template called renderTopicListItem which is the one that set a property topicListItemContents which is the one rendered by default. Check:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/topic-list-item.hbs

https://github.com/discourse/discourse/blob/fc94b6cb9ee709a6744dc0da477f4a37e43d37e4/app/assets/javascripts/discourse/components/topic-list-item.js.es6#L50

The first question is WHY? Why we need to do that? Why not just to have the handlebars code as usual?

In order to not interfere too much with the core code I decide to let topic-list-item like that and replace the topic-list-item.raw.hbs in my theme and that works without problem.

Nevertheless, I expect that adding a file like javascripts/discourse/templates/mobile/list/topic-list-item.raw.hbs in my theme will replace the mobile view but it doesn’t.

The method findRawTemplate still returning the default mobile template from discourse which contains:

Even by doing manual edition within my local Discourse project I am not able to get the mobile version to update with the changes.

Hopefully makes sense the explanation and someone has any knowledge about it, it looks really broken by now and maybe we want to fix it IF it is really broken (I can do so if I understand a bit more what’s going on)

Mean time I will continue looking for an answer myself and update any news. Below a small gif of what I have in my local.

http://g.recordit.co/AtOJlltJ8o

UPDATE: I have also update the raw to be .hbr as a recent commit changes the files but still not able to make it work.

[awesomerobot (Kris)]

I just tested it and I’m seeing the same issue… I can’t override that template at all. Seems to have happened over the past day or two. Could this be related to switching things to hbr @markvanlan?

[duranmla (Alexis Duran)]

When I create this topic my local discourse was from January 17 if I don’t recall wrong, with that being said, I had the issue with that version and after update with latest changes and rename from raw.hbs to hbr I still have the same issues.

By now what I have done is to customise from javascripts/discourse/templates/components/topic-list-item.hbs but ideally the raw templates should behave as the others templates (in terms of substitution and customisation)

[markvanlan]

@awesomerobot if you checkout the commit right before the hbr change, does it work?

[awesomerobot (Kris)]

ah yeah thanks for the date @duranmla… it is a bit of an older problem @markvanlan, tracking it down now

[merefield (Robert)]

FYI not seen this issue impact Topic List Previews which does override the mobile Topic List Item raw. https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/mobile/list Only tested this on tests-passed though.

[awesomerobot (Kris)]

ok, so I was having a little trouble tracking it down because after reverting I had to remove then re-apply the customization to reproduce the problem.

I think it is actually the hbr commit @markvanlan (https://github.com/discourse/discourse/commit/3e897749084faeb29eb9a524d3f3b3f1d46a8738), sorry for waffling on that.

To test I added this to the current theme’s </head> via the customize section on the admin panel:

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'>
  test
</script>

On the commit before this works fine, once I apply that commit and then re-apply the customization the template is ignored.

[duranmla (Alexis Duran)]

Maybe I was confused after all, I though it was older than that.
I will keep in eye on this thread in any case. Thanks for quick reply into track this down @awesomerobot

[awesomerobot (Kris)]

There’s a fix in now if you pull latest

https://github.com/discourse/discourse/commit/c0ccfdb45e4b1350d37bbf7c56d598f7c3011abb

Mark’s going to be doing some additional work to figure out why the tests were passing despite this being broken.

[duranmla (Alexis Duran)]

Nevertheless, I have updated and the error remains when working with theme project structure (which probably is the most used for medium and large projects) I will drop this video here of me showing the error Loom | Free Screen & Video Recording Software

PD: I will leave the video for a while in case it is helpful for someone to understand the problem and reproduce it. I will need to delete the video after few weeks

NOTE: I also tried with renaming back to topic-list-item.raw.hbs instead topic-list-item.hbr and the issue is the same.

[awesomerobot (Kris)]

It’s working for me with the javascripts directory (with either the old or new extension).

One thing I did run into last night is that you may need to edit the file and save it, or remove the file and re-add it (the templates are compiled on save, so it’s possible you’re temporarily stuck in the buggy state.).