Modernizing inline script tags for templates & JS API

Dev
21

Not sure if I’m missing something, but I haven’t edited the “Dark” theme and there is no code in the HTML tabs to migrate to the JS tab.

image
image1008×479 17.2 KB

22

Does removing that bit get the error to go away?

2 Likes
23

ahh yep! thanks

1 Like
24

I have this on my theme, what do I need to do to get the error to go away?

<script type="text/discourse-plugin" version="0.5">
api.decorateWidget('post-meta-data:after', dec => {
  if (dec.attrs.post_number === 1) {
    const topic = dec.getModel().get('topic');
    return dec.rawHtml(`<div class="post-info topic-id">&nbsp#${topic.get('id')}</div>`);
  }
});
</script>
25

You’ll have to move the api.decorateWidget(); part to the ‘JS’ tab under ‘Edit CSS/HTML’ in a theme. But do note that widgets are now deprecated; you’ll want to use plugin outlets.

2 Likes
26

I moved it to JS like so:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // Your code here
  api.decorateWidget('post-meta-data:after', dec => {
  if (dec.attrs.post_number === 1) {
    const topic = dec.getModel().get('topic');
    return dec.rawHtml(`<div class="post-info topic-id">&nbsp#${topic.get('id')}</div>`);
  }
});

And my pink warning turned into a red warning:
PNG image

I’m not a coder and I didn’t write this code, so I can only go so far as to do what someone helps out with.
As far as what you said about plugin outlets, that’s way over my head.

27

if someone doesn’t post here sufficiently quickly you might consider Marketplace to find someone to help you.

28

I moved it back to <head> for now.
I’m okay with the warning until it gets solved.
If it dies, it’s not the end of the world, it’s just a nice workaround for what I was really looking for.

29

Is there an error in the browser console?

30

“Deprecation notice: Adding JS code using is deprecated. Move this code to a dedicated JavaScript file. [deprecation id: discourse.script-tag-discourse-plugin] [info: Modernizing inline script tags for templates & JS API]”

“Deprecation notice: The post-meta-data widget has been deprecated and api.decorateWidget is no longer a supported override. [deprecated since Discourse v3.5.0.beta1-dev] [deprecation id: discourse.post-stream-widget-overrides] [info: Upcoming post stream changes - How to prepare themes and plugins]”

31

I think you can replace this with outlets. Where in the topic are you adding this?

32

If you’re asking where the output is in production, then it’s here.

post-number
post-number1568×436 53.9 KB

I’d much rather have it somewhere that makes it searchable though.

1 Like
33

I would add to this for people who come from adding easily JS to headers on their website :

1° that for me here on discourse mostly “Vanilla” Javascript works and not regular Javascript

2°to solve loading issues, place it inside document.addEventListener(‘DOMContentLoaded’, function() { Code here }); ; this will avoid errors as you are loading the code after page load.

34

We are using

<script type="text/discourse-plugin" version="0.8.40">
    const LoginRoute = require("discourse/routes/login").default;
    
    LoginRoute.reopen({
        activate() {
            this.controllerFor('application').setProperties({
                showFooter: true
            });
        }
    });
</script>

to show a footer on all pages due to GDPR (Privacy Policy and Impressum). Otherwise we did not make any changes. How do we convert this best?

Thank you very much!

1 Like
35

Thanks for the instructions. I’m a bit confused about which if any of the method(s) in my script are deprecated and which method I should migrate to. It’s for showing a random banner image at the top of the page. I need to modify the image locations frequently, so I want to use the new JS tab inside a theme component, not a local upload or GIT repo. Here’s a simplified outline of the current code in the <head> tab:

<script type="text/discourse-plugin" version="0.8">
const h = require("virtual-dom").h;
api.createWidget("my-widget", {
    html() {

        ...

        <<<javascript>>>

        ...

        api.onPageChange(() => {
            this.scheduleRerender();
        });
  
    }
});
</script>

<script type="text/x-handlebars" data-template-name="/connectors/top-notices/inject-widget">
  {{mount-widget widget="my-widget"}}
</script>