JS API の使用

[Discourse]

Discourse の JavaScript API を使用すると、テーマやプラグインでユーザーエクスペリエンスを大幅にカスタマイズできます。これを使用する最も簡単な方法は、管理パネルから新しいテーマを作成し、「コードの編集」をクリックしてから、JS タブに移動することです。

ファイルベースのテーマの場合、API は api-initializers ディレクトリにファイルを作成することで使用できます。テーマの場合は {theme}/javascripts/api-initializers/init-theme.gjs、プラグインの場合は {plugin}/assets/javascripts/discourse/api-initializers/init-plugin.js となります。内容は次のとおりです。

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

export default apiInitializer((api) => {
  // ここにコードを記述
});

利用可能なすべての API は、Discourse コアの plugin-api.gjs ソースコード に、簡単な説明と例とともにリストされています。

JS API の使用例を含む完全なチュートリアルについては、以下を確認してください。

Theme Developer Tutorial: 1. Introduction

This tutorial will teach you how to create a Discourse Theme or Theme Component from the ground up. While this topic assumes no previous experience working on Discourse themes, it does assume some prior experience using HTML, CSS and JavaScript. It’ll also help if you know your way around GitHub. What are Discourse themes? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Themes In general, themes are not suppo…

---

このドキュメントはバージョン管理されています。変更の提案はgithubで行ってください。

[DeanMarkTaylor (Dean Taylor)]

What’s the best way to “import” as a Site Customisation? - is it just to use require?

Whilst this works:

<script type="text/discourse-plugin" version="0.1">
var HamburgerMenuComponent = require('discourse/components/hamburger-menu').default;
</script>

This does not:

<script type="text/discourse-plugin" version="0.1">
import {default as HamburgerMenuComponent2 } from 'discourse/components/hamburger-menu';

</script>

Where I get this error:

<script type="text/discourse-js-error">unknown: 'import' and 'export' may only appear at the top level (3:0)
  1 | Discourse._registerPluginCode('0.1', api => {
  2 |   
> 3 | import {default as HamburgerMenuComponent2 } from 'discourse/components/hamburger-menu';
    | ^
  4 | 
  5 | 
  6 | }); at <eval>:8695:14</script>

[eviltrout (Robin Ward)]

Instead of importing it, you can look it up with

api.container.lookupFactory('component:hamburger-menu')

[Nuck (Emma Lejeck)]

Is there a way to get access to the h helper from virtual-dom in a site customization? I’m trying to add a simple dropdown widget to use in our header, and I can’t get that darned h, even though I can get createWidget

[Yuun (Sam)]

Does:

h = require('virtual-dom').h;

not work?

[Nuck (Emma Lejeck)]

@Yuun

Does:

h = require(‘virtual-dom’).h;

not work?

Yes it does! Works perfectly, thanks a ton!

[eviltrout (Robin Ward)]

I wouldn’t recommend doing it that way as it would likely break future compatibility. You can use this for now but I’ll try to introduce a workaround shortly that will be safer long term.

[Nuck (Emma Lejeck)]

@eviltrout

I wouldn’t recommend doing it that way as it would likely break future compatibility. You can use this for now but I’ll try to introduce a workaround shortly that will be safer long term.

Makes sense, it’s kinda circumventing the whole Plugin API thing and relying on implementation details of the ES6 compilation output, both things that are Dangerous™

Anyways, I’ll definitely keep an eye out for a better solution

[eviltrout (Robin Ward)]

I’ll try to get to it soon and I’ll reply in this topic, so watch it and you’ll see

[eviltrout (Robin Ward)]

Actually thinking about it, the decorateWidget helper gets called with an object that has the h method. How are you inserting your widget if not via a decorator?

If you could post code that would be helpful.

[Nuck (Emma Lejeck)]

@eviltrout

How are you inserting your widget if not via a decorator?

{{mount-widget}} in a template for a plugin outlet.

[eviltrout (Robin Ward)]

Ah that’s clever – I didn’t think people would try that. Okay, let me try something out.

[eviltrout (Robin Ward)]

Okay, I’ve added h to the pluginApi object as long as you request plugin api v0.3:

<script type="text/discourse-plugin" version="0.3">
  console.log(api.h('b', ['hello', 'world']));
</script>

That should work for you!

Add `h` helper to `plugin-api` in v0.3

[NateDhaliwal]

[quote=“Discourse, post:1, topic:41281”]
`

[david (David Taylor)]

こちらと他の多くのバージョン管理されたドキュメントを更新しました。お知らせありがとうございます @NateDhaliwal

[jenmck (jen)]

@Discourse

利用可能なすべてのAPIは、Discourseコアのplugin-api.gjsソースコードに、短い説明と例とともにリストされています。

このリンクは機能しなくなりました。次のメッセージが表示されます。

discourseのmainブランチには、app/assets/javascripts/discourse/app/lib/plugin-api.gjsのパスが含まれていません。

[NateDhaliwal]

これは、javascript ファイルが app/assets/javascripts/ ではなく frontend/ ディレクトリに移動されたためです。

PR を開きました。

Change app/assets/javascripts/ to frontend/

[NateDhaliwal]

このPRを再浮上させます。レビューしていただけますか？ありがとうございます！