Dividir tema Javascript em múltiplos arquivos

Temas complexos em JavaScript podem ser divididos em vários arquivos, para manter as coisas bem organizadas.

Para usar essa funcionalidade, basta adicionar arquivos à pasta /javascripts no diretório do seu tema. Esses arquivos não podem ser editados na interface do Discourse, portanto, você deve usar o Theme CLI ou fazer o source do tema via git.

Arquivos JavaScript são tratados exatamente da mesma forma que em core/plugins, então você deve seguir a mesma estrutura de arquivo/pasta. Os arquivos de tema são carregados após core/plugins, então, se os nomes dos arquivos coincidirem, a versão do tema terá precedência.


Como exemplo, você pode agora realizar o que é descrito em Using Plugin Outlet Connectors from a Theme or Plugin adicionando um único arquivo ao seu tema:

/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>
}

Para usar a API JS, crie um inicializador:

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

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

export default apiInitializer((api) => {
  // Seu código aqui
});

Se você precisar de um ativo .js totalmente diferente (por exemplo, para um web worker), consulte este tópico.


Este documento tem controle de versão - sugira alterações no github.

27 curtidas

Suponha que eu não saiba nada sobre as hierarquias de arquivos core/plugins, porque vim aqui apenas para criar um novo componente de tema. Onde devo procurar para descobrir? Quais são as convenções de nomenclatura para diretórios e os arquivos dentro deles?

Apenas olhando para diferentes temas/componentes circulando, existem todos os tipos de esquemas de aninhamento e subdiretórios diferentes em circulação. Não consegui descobrir um padrão ou encontrar nenhuma documentação. (Por exemplo, qual é a diferença entre /initializers e /api-initializers e /pre-initializers? :crying_cat_face:)

1 curtida

Arquivos aqui usam a API. Honestamente, eu também me perguntei isso por um tempo, por que não posso colocar os arquivos api-initializers em initializers?

Sim. É difícil de entender. Prefiro não pensar no número de vezes que gastei 3 horas em algo apenas para descobrir que nomeei algo errado ou o coloquei no lugar errado, ou às vezes, esqueci de incluí-lo de uma das muitas maneiras que existem para fazer isso (em plugin.rb, em um include em um arquivo js - qual caminho? Preciso de uma extensão?)

O melhor é usar Instale o aplicativo de console Discourse Theme CLI para ajudá-lo a criar temas e fazer com que ele crie um esqueleto de tema para você. E torna muito fácil depurar, pois ele o carrega automaticamente em seu servidor (um servidor de produção comum) e (geralmente) recarrega seu navegador automaticamente.

Não tenho ideia do que ou se há uma diferença (acho que não? Mas tenho pouca ideia). Eu usaria o que está no esqueleto do tema.

Existe um repositório chamado all-the-themes. Você pode obtê-lo e pesquisá-lo em busca de exemplos. E sempre use aquele que foi alterado mais recentemente.

3 curtidas

Grande parte do EmberJS (e Rails) depende de Convenção. Isso é ótimo na maioria das vezes, mas pode ser incrivelmente frustrante quando você erra algo, mesmo que minimamente, por exemplo, na nomenclatura.

3 curtidas

Para que conste, encontrei uma explicação de api-initializers/ aqui:

(E isso o conecta à documentação do Ember, e então começa a fazer sentido.)

Ainda seria bom ter uma enumeração/explicação básica das possibilidades de estrutura de diretórios em um único documento. (Por exemplo, sei que connectors/ é uma coisa… existem mais?)

Além disso, para que conste: o aplicativo Theme CLI puxa o esqueleto de:

Ele apenas menciona api-initializers/.

(Na verdade, estou usando o aplicativo Theme CLI, mas comecei a usá-lo depois que já tinha o início de um componente de tema, então pulei a etapa do esqueleto.)

2 curtidas