Diviser le Javascript du thème en plusieurs fichiers

Documentation Guides pour les développeurs
,
1

Complex theme javascript can be split into multiple files, to keep things nicely organised.

To use this functionality, simply add files to the /javascripts folder in your theme directory. These files can not be edited from the Discourse UI, so you must use the Theme CLI or source the theme from git.

Javascript files are treated exactly the same as they are in core/plugins, so you should follow the same file/folder structure. Theme files are loaded after core/plugins, so if the filenames match, the theme version will take precedence.

As an example, you can now accomplish Using Plugin Outlet Connectors from a Theme or Plugin by adding a single file to your theme:

/javascripts/my-theme/connectors/discovery-list-container-top/add-header-message.gjs

import Component from "@glimmer/component"; import { service } from
"@ember/service"; export default class HeaderMessage extends Component {
@service currentUser;

<template>
  Welcome
  {{this.currentUser.username}}
</template>
}

To use the JS API, create an initializer:

/javascripts/discourse/api-initializers/init-theme.gjs

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

export default apiInitializer((api) => {
  // Your code here
});

If you need a totally different .js asset (e.g. for a web worker), check out this topic.

This document is version controlled - suggest changes on github.

27 « J'aime »
32

Supposons que je ne connaisse rien aux hiérarchies de fichiers core/plugins, car je suis juste venu ici pour créer un nouveau composant de thème. Où dois-je chercher pour le savoir ? Quelles sont les conventions de nommage pour les répertoires et les fichiers qu’ils contiennent ?

En regardant simplement différents thèmes/composants qui circulent, il existe toutes sortes de schémas d’imbrication et de sous-répertoires différents. Je n’ai pas réussi à trouver de modèle, ni à trouver de documentation. (Par exemple, quelle est la différence entre /initializers, /api-initializers et /pre-initializers ? :crying_cat_face:)

1 « J'aime »
33

Les fichiers ici utilisent l’API. Je me suis honnêtement aussi posé la question pendant un moment, pourquoi ne puis-je pas mettre les fichiers api-initializers dans initializers ?

34

Ouais. C’est difficile à comprendre. Je préfère ne pas penser au nombre de fois où j’ai passé 3 heures sur quelque chose pour finalement me rendre compte que j’avais mal nommé quelque chose ou que je l’avais mis au mauvais endroit, ou parfois, j’ai oublié de l’inclure dans l’une des nombreuses façons qui existent pour le faire (dans plugin.rb, dans un include dans un fichier js - quel chemin ? Ai-je besoin d’une extension ?)

Le mieux est d’utiliser Installer l’application console Discourse Theme CLI pour vous aider à créer des thèmes et de la laisser créer un squelette de thème pour vous. Et cela rend le débogage très facile car il le télécharge automatiquement sur votre serveur (un simple serveur de production) et (généralement) recharge automatiquement votre navigateur.

Aucune idée de ce qu’est la différence ou s’il y en a une (je ne pense pas ? Mais je n’en sais pas grand-chose). J’utiliserais celui qui se trouve dans le squelette du thème.

Il existe un dépôt appelé all-the-themes. Vous pouvez le récupérer et y rechercher des exemples. Et utilisez toujours celui qui a été modifié plus récemment.

3 « J'aime »
36

Une grande partie d’EmberJS (et de Rails) repose sur la Convention. C’est génial la plupart du temps, mais cela peut être incroyablement frustrant lorsque l’on fait ne serait-ce qu’une petite erreur, par exemple dans la dénomination.

3 « J'aime »
37

Soit dit en passant, j’ai trouvé une explication de api-initializers/ ici :

(Et cela le relie à la documentation Ember, et ensuite cela commence à avoir du sens.)

Il serait toujours agréable d’avoir une énumération/explication de base des possibilités de structure de répertoires en un seul document. (Par exemple, je sais que connectors/ est une chose… y en a-t-il d’autres ?)

Aussi, soit dit en passant : l’application Theme CLI récupère le squelette de :

Elle ne mentionne que api-initializers/.

(J’utilise en fait l’application Theme CLI, mais j’ai commencé à l’utiliser après avoir déjà les débuts d’un composant de thème, j’avais donc sauté l’étape du squelette.)

2 « J'aime »