Resumo do Problema
Estou desenvolvendo um plugin para Discourse que adiciona um botão na barra de ferramentas para abrir um formulário modal. Segui a documentação oficial da API DModal passo a passo, mas ainda estou recebendo erros de importação de módulo e o aviso “modal precisa ser atualizado”. Preciso de orientação sobre o que estou perdendo.
Uma observação rápida: Eu não sei programar, este plugin foi criado inteiramente com a ajuda de IA.
Erros Atuais
Erro 1 - Importação de Módulo:
Uncaught (in promise) Error: Could not find module `discourse/components/modal/lottery-form-modal` imported from `discourse/plugins/discourse-lottery-v3/discourse/initializers/lottery-toolbar`
Erro 2 - Aviso de Modal Legado:
Error: the 'lottery-form' modal needs updating to work with the latest version of Discourse. See https://meta.discourse.org/t/268057.
Erro 3 - Aviso de Depreciação:
Deprecation notice: Defining modals using a controller is no longer supported. Use the component-based API instead. (modal: lottery-form) [deprecated since Discourse 3.1] [removal in Discourse 3.2]
Documentação Oficial que Segui
Estudei e implementei cuidadosamente com base nestes recursos oficiais:
-
Convertendo modais de controladores legados para a nova API de componentes DModal
- URL:
https://meta.discourse.org/t/268057 - Segui todos os 4 passos: movi os arquivos para
/components/modal/, atualizei o JS para estender Component, atualizei o template para usar<DModal>, atualizei as chamadasshowpara usarmodal.show()
- URL:
-
Usando a API DModal para renderizar janelas Modais
- URL:
https://meta.discourse.org/t/268304 - Implementei DModal com
@closeModal,@titlee blocos nomeados adequados
- URL:
-
API de Plugins do Discourse Core
- Fonte:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs - Usei
api.onToolbarCreate()e injeção de serviço modal
- Fonte:
-
Documentação do Desenvolvedor Discourse - Convertendo Modais
- URL:
https://github.com/discourse/discourse-developer-docs/blob/main/docs/03-code-internals/10-converting-modals.md - Cruzei os passos de migração
- URL:
O Que Estou Tentando Fazer
- Adicionar um botão na barra de ferramentas do composer
- Clicar no botão abre um formulário modal
- O usuário preenche o formulário e clica em enviar
- O modal fecha e insere o conteúdo no composer
O Que Tentei
Abordagem 1: Importação Dinâmica + Serviço Modal (Atual)
- Recebendo erro de importação de módulo
Abordagem 2: showModal() com Controller
- Recebendo avisos de depreciação sobre controladores legados
Abordagem 3: Importação Estática
- Também tentei importações estáticas, mas os mesmos problemas de resolução de módulo
Estrutura de arquivos:
discourse-lottery-v3/
├── plugin.rb
└── assets/javascripts/discourse/
├── initializers/
│ └── lottery-toolbar.js
└── components/modal/
├── lottery-form-modal.js
└── lottery-form-modal.hbs
Código do botão da barra de ferramentas:
// assets/javascripts/discourse/initializers/lottery-toolbar.js
import { withPluginApi } from "discourse/lib/plugin-api";
export default {
name: "lottery-toolbar",
initialize() {
withPluginApi("1.0.0", (api) => {
api.onToolbarCreate((toolbar) => {
toolbar.addButton({
id: "lottery-insert",
group: "extras",
icon: "dice",
title: "Insert Lottery",
perform: () => {
const modal = api.container.lookup("service:modal");
// Esta linha causa o erro de importação:
import("discourse/components/modal/lottery-form-modal").then((module) => {
const LotteryFormModal = module.default;
modal.show(LotteryFormModal, { model: {} });
});
}
});
});
});
}
};
Componente modal:
// assets/javascripts/discourse/components/modal/lottery-form-modal.js
import Component from "@ember/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
export default class LotteryFormModal extends Component {
@tracked inputValue = "";
@action
submit() {
// Lidar com o envio do formulário
this.args.closeModal();
}
}
Template modal:
{{! assets/javascripts/discourse/components/modal/lottery-form-modal.hbs }}
<DModal @title="My Modal" @closeModal={{this.args.closeModal}} class="my-modal">
<:body>
<input value={{this.inputValue}} />
</:body>
<:footer>
<button {{on "click" this.submit}}>Submit</button>
</:footer>
</DModal>
Perguntas
Com base em todo o código, erros e informações de fundo fornecidos acima, como devo modificar meu código para implementar corretamente meu recurso?
Qualquer orientação sobre a abordagem de implementação correta seria muito apreciada.