# Interaction among theme component, theme javascript, and "previews"

**URL:** <https://meta.discourse.org/t/interaction-among-theme-component-theme-javascript-and-previews/190303>\
**Category:** Development\
**Created:** [May 13, 2021, 12:36pm UTC](https://meta.discourse.org/t/interaction-among-theme-component-theme-javascript-and-previews/190303 "2021-05-13T12:36:50Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)\
**Post date:** [May 13, 2021, 12:36pm UTC](https://meta.discourse.org/t/interaction-among-theme-component-theme-javascript-and-previews/190303/1 "2021-05-13T12:36:50Z")

</div>

# j/s

I have some custom j/s in my theme. (It’s my solution to, [Interactive SVG using \<object\>? - #9 by craigconstantine](https://meta.discourse.org/t/interactive-svg-using-object/173747/9) ) Eventually, I’ll move the j/s to a Git repo, and install it as a proper Theme component. For now, I simply have the j/s pasted into my Theme’s header. I suppose, this problem might go away if I installed this j/s as a proper component, but it doesn’t smell that way to me.

My j/s modifies the DOM before it’s sent to the browser…

```
api.decorateCooked(
    $elem => $elem.children('.cooked div[data-custom="umbdv"]').umbdv(),
    { id: 'umbdv' }
);

```

# In action…

It selects appropriate `<div data-custom="…`, and then adds new elements. For example, in the following screenshot, everything below the arrows, is inserted by the j/s. (You can see it in action here, [https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160](https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160) )

 ![Screen Shot 2021-05-13 at 08.03.55](https://global.discourse-cdn.com/meta/original/3X/c/1/c1c5df54f11de093e9da7a632a337c46a92ada5a.png)

# What I’m seeing…

I’m using the Topic List Previews component ( [GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub](https://github.com/merefield/discourse-topic-list-previews-theme.git) ) and my j/s doesn’t seem to get called.

In this screenshot, the `/vmm/gibberish…` string is the bare `<div data-custom="…` contents showing through because my j/s never gets to it via `api.decorateCooked(…`.

 ![Screen Shot 2021-05-13 at 08.02.55](https://global.discourse-cdn.com/meta/original/3X/0/7/0778f57601966451195b1ecde67443cf9cab75d1.png)

The same thing happens in emails that get sent out…

 ![e58e96d4c014c7676c4e2844db707b7831c61e09](https://global.discourse-cdn.com/meta/original/3X/0/f/0f74e8458d2f9d8ee0602cfda197657ee2aa5050.png)

# What I’d like…

I don’t actually want it do the full replacement. Long story. I’d just like to expand my j/s so it can put some static string there, rather than the bare gibberish from my `<div data-custom="…` block.

Is there some other `api.` method that I can hook into?

---

_[View the full topic](https://meta.discourse.org/t/interaction-among-theme-component-theme-javascript-and-previews/190303)._