Resumen del problema
Estoy desarrollando un plugin de Discourse que agrega un botón de barra de herramientas para abrir un formulario modal. He seguido la documentación oficial de migración de la API DModal paso a paso, pero todavía obtengo errores de importación de módulos y la advertencia “el modal necesita actualizarse”. Necesito orientación sobre lo que me estoy perdiendo.
Una nota rápida: No sé programar, este plugin fue creado completamente con la ayuda de IA.
Errores actuales
Error 1 - Importación 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`
Error 2 - Advertencia de modal heredado:
Error: the 'lottery-form' modal needs updating to work with the latest version of Discourse. See https://meta.discourse.org/t/268057.
Error 3 - Aviso de desaprobación:
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]
Documentación oficial que he seguido
He estudiado e implementado cuidadosamente basándome en estos recursos oficiales:
-
Conversión de modales de controladores heredados a la nueva API de componentes DModal
- URL:
https://meta.discourse.org/t/268057 - Seguí los 4 pasos: moví los archivos a
/components/modal/, actualicé JS para extender Component, actualicé la plantilla para usar\u003cDModal\u003e, actualicé las llamadas deshowpara usarmodal.show()
- URL:
-
Uso de la API DModal para renderizar ventanas modales
- URL:
https://meta.discourse.org/t/268304 - Implementé DModal con
@closeModal,@titley bloques nombrados adecuados
- URL:
-
API de plugins para desarrolladores de Discourse
- Fuente:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs - Usé
api.onToolbarCreate()e inyección del servicio modal
- Fuente:
-
Documentación para desarrolladores de Discourse - Conversión de modales
- URL:
https://github.com/discourse/discourse-developer-docs/blob/main/docs/03-code-internals/10-converting-modals.md - Crucé los pasos de migración
- URL:
Lo que estoy intentando hacer
- Agregar un botón de barra de herramientas en el compositor
- Hacer clic en el botón abre un formulario modal
- El usuario completa el formulario y hace clic en enviar
- El modal se cierra e inserta contenido en el compositor
Lo que he intentado
Enfoque 1: Importación dinámica + Servicio modal (Actual)
- Obtengo el error de importación de módulo
Enfoque 2: showModal() con controlador
- Obtengo advertencias de desaprobación sobre controladores heredados
Enfoque 3: Importación estática
- También probé importaciones estáticas pero los mismos problemas de resolución de módulos
Estructura de archivos:
discourse-lottery-v3/
├── plugin.rb
└── assets/javascripts/discourse/
├── initializers/
│ └── lottery-toolbar.js
└── components/modal/
├── lottery-form-modal.js
└── lottery-form-modal.hbs
Código del botón de barra de herramientas:
// 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");
// This line causes the import error:
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() {
// Handle form submission
this.args.closeModal();
}
}
Plantilla 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>
Preguntas
Basándome en todo el código, errores e información de fondo proporcionados anteriormente, ¿cómo debería modificar mi código para implementar correctamente mi función?
Cualquier orientación sobre el enfoque de implementación correcto sería muy apreciada.