컴포넌트에서 API에 액세스하기

개발
1

저는 웹/JavaScript 개발자는 아니지만 Discourse 테마를 조금씩 다루고 있습니다. 몇 가지 서드파티 테마 컴포넌트를 살펴보다가 이런 질문이 생겼습니다.

discourse-header-submenus/javascripts/discourse/connectors/above-site-header/header-submenus.js 파일에는 다음과 같은 코드가 있습니다:

export default {
  setupComponent() {
    // some code here
  },
};

파일 상단에 import문이 없습니다.

제가 (strict) JavaScript를 올바르게 이해하고 있다면, setupComponent() 내부의 코드가 접근할 수 있는 컨텍스트는 해당 코드가 평가되는 객체의 속성들뿐일 것입니다.

setupComponent() 함수 안에서 console.log(this)를 사용해 이 컨텍스트를 살펴보니, 매우 유용한 api 객체에 접근할 수 없는 것 같습니다.

아쉽네요!

또한, api 함수를 사용하기 위한 공식 래퍼 코드가 버전이 지정되어 있어 올바르게 import하는 방법을 알지 못합니다. 해당 코드는 다음과 같습니다:

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

export default apiInitializer("0.12.3", api => {
    // code that uses the api here
});

setComponent() 내부에서 api 객체에 접근하는 방법은 무엇일까요? 아니면 제가 여기서 근본적인 무언가를 놓치고 있는 걸까요?

2

알겠습니다. 이렇게 하면 됩니다:

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
    setupComponent() {
        withPluginApi("0.12.3", api => {
            console.log(api.getCurrentUser());
        });
    },
};