Theme Developer Tutorial: 6. Using the JS API

Dokumentation Entwicklerhandbücher
1

In the last couple of chapters, we’ve explored how to use the JavaScript API to render content into outlets. renderInOutlet is the most commonly-used API, but there are a ton more! In this chapter we’ll try out a few of them, and show you how to discover more.

Common API methods

getCurrentUser()

api.getCurrentUser() will return information about the current user, or null if nobody is logged in. This can be used for all sorts of things, including per-group logic, or rendering a user’s username into the UI.

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

export default apiInitializer((api) => {
  console.log("Current user is", api.getCurrentUser());
});

headerIcons

api.headerIcons will allow you to add, remove and re-arrange icons in the header. For example, to add a new icon before the search icon, you’d do something like

import DButton from "discourse/components/d-button";
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  const sayHello = () => {
    alert("Hello, world!");
  };
  api.headerIcons.add(
    "my-unique-icon-name",
    <template>
      <li>
        <DButton
          @action={{sayHello}}
          @icon="wand-magic"
          class="icon btn-flat"
        />
      </li>
    </template>,
    { before: "search" }
  );
});

replaceIcon()

api.replaceIcon(source, destination);

With this method, you can easily replace any Discourse icon with another. For example, we have a theme component that replaces the heart icon for like with a thumbs-up icon

decorateCookedElement()

api.decorateCookedElement() allows you to customize the rendered content of Discourse posts. This can be used for anything from simple formatting changes, all the way up to advanced integrated UIs like the built-in ‘poll’ plugin.

The API should be passed a callback function which will be run for every post when it’s rendered to the screen. The first argument to the callback will be the post’s root HTML element, and the second will be a helper.

A simple example which appends content to every post would look like:

api.decorateCookedElement((element, helper) => {
  const myNewParagraph = document.createElement("p");
  myNewParagraph.textContent = "Hello, this is appended to every post!";
  element.appendChild(myNewParagraph);
});

Or for a more advanced UI, you can render a glimmer component into a post. For example, to render the counter component we authored earlier into every post, you could do something like this:

import { apiInitializer } from "discourse/lib/api";
import CustomWelcomeBanner from "../components/custom-welcome-banner";

export default apiInitializer((api) => {
  api.decorateCookedElement((element, helper) => {
    const counterWrapper = helper.renderGlimmer(
      "div.my-counter",
      CustomWelcomeBanner
    );
    element.appendChild(counterWrapper);
  });
});

helper.getPost() will return the current post, and can be used to build conditional logic into these decorateCookedElement callbacks. console.log the post to see what’s available.

registerValueTransformer()

api.registerValueTransformer allows you to inject logic into predefined parts of the Discourse JavaScript application. For example, you can add a "home-logo-href" transformer to link the logo to example.com:

api.registerValueTransformer("home-logo-href", () => "https://example.com");

For more information on Transformers, check out the dedicated guide

Finding more JS API methods

All the available APIs are listed in the plugin-api.gjs source code in Discourse core, along with a short description and examples.

That’s it for this chapter, and almost the end of the tutorial. Let’s wrap things up in the conclusion.

This document is version controlled - suggest changes on github.

3 „Gefällt mir“
2

Ich möchte Beiträge nur in einer bestimmten Kategorie beeinflussen. Ich kann nicht herausfinden, wie ich feststellen kann, ob ein Element zu einer bestimmten Kategorie gehört. Ich dachte, ich könnte element.parentElement verwenden und mich bis zum body hocharbeiten, aber das scheint nicht zu funktionieren. Zuvor habe ich dieses Problem gelöst, als ich erkannte, dass ich feststellen konnte, ob ich Dinge ändern wollte, wenn der Benutzer zu einer bestimmten Gruppe gehörte, sodass ich currentUser verwenden konnte. Aber im Moment mache ich Folgendes:

if (!cooked.innerHTML.includes(newFormText)) {
      console.log("fixSubmittedForm kein neuer Formulartext");
      return;
    }

Jeden Beitrag nach etwas zu durchsuchen, um zu entscheiden, ob ich ihn ändern möchte, ist schlecht, oder? Es ist ein gehosteter Kunde, sonst hätte ich dieses Problem auf verschiedene Weise mit einem Plugin gelöst.

1 „Gefällt mir“
3

In den obigen Beispielen von decorateCookedElement sehen Sie, dass der Callback zwei Argumente hat: element und helper.

Wenn Sie helper.getModel() aufrufen, erhalten Sie Zugriff auf das Post-Modell, das alle Post-/Themen-/Kategorieinformationen enthält.

Für einige Beispiele empfehle ich, in all-the-* nach “getModel()” zu suchen.

2 „Gefällt mir“
4

Oh. Seufzer. Ich fürchte, das ist nicht das erste Mal, dass du mir dasselbe erzählst.

Das sollte aber funktionieren! Vielen, vielen Dank.

Ich werde versuchen, nicht noch einmal zu fragen!

EDIT: Vielleicht habe ich dieses Mal gelernt!

async function fixSubmittedForm(element, helper, category_id) {
  if (helper.getModel().topic.category_id !== category_id) {
    return;
  }
 .....
3 „Gefällt mir“