Riepilogo del problema
Sto sviluppando un plugin per Discourse che aggiunge un pulsante della barra degli strumenti per aprire un modulo modale. Ho seguito passo dopo passo la documentazione ufficiale sulla migrazione dell’API DModal, ma continuo a ricevere errori di importazione del modulo e l’avviso “modal needs updating”. Ho bisogno di indicazioni su cosa mi manca.
Una nota veloce: Non so programmare, questo plugin è stato creato interamente con l’aiuto dell’IA.
Errori attuali
Errore 1 - Importazione del modulo:
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`
Errore 2 - Avviso Legacy Modal:
Error: the 'lottery-form' modal needs updating to work with the latest version of Discourse. See https://meta.discourse.org/t/268057.
Errore 3 - Avviso di deprecazione:
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]
Documentazione ufficiale seguita
Ho studiato attentamente e implementato basandomi su queste risorse ufficiali:
-
Conversione delle modali da controller legacy alla nuova API dei componenti DModal
- URL:
https://meta.discourse.org/t/268057 - Seguiti tutti e 4 i passaggi: spostati i file in
/components/modal/, aggiornato JS per estendere Component, aggiornato template per usare<DModal>, aggiornate le chiamate show per usaremodal.show()
- URL:
-
Utilizzo dell’API DModal per renderizzare finestre modali
- URL:
https://meta.discourse.org/t/268304 - Implementato DModal con
@closeModal,@titlee blocchi nominati corretti
- URL:
-
Discourse Core Plugin API
- Fonte:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs - Utilizzato
api.onToolbarCreate()e l’iniezione del servizio modale
- Fonte:
-
Discourse Developer Docs - Conversione Modali
- URL:
https://github.com/discourse/discourse-developer-docs/blob/main/docs/03-code-internals/10-converting-modals.md - Passaggi di migrazione incrociati
- URL:
Cosa sto cercando di fare
- Aggiungere un pulsante della barra degli strumenti nell’editor
- Cliccare sul pulsante apre un modulo modale
- L’utente compila il modulo e clicca su invia
- La modale si chiude e inserisce il contenuto nell’editor
Cosa ho provato
Approccio 1: Importazione dinamica + Servizio Modale (Attuale)
- Errore di importazione del modulo
Approccio 2: showModal() con Controller
- Avvisi di deprecazione sui controller legacy
Approccio 3: Importazione statica
- Provate anche importazioni statiche ma stessi problemi di risoluzione del modulo
Struttura dei file:
discourse-lottery-v3/
├── plugin.rb
└── assets/javascripts/discourse/
├── initializers/
│ └── lottery-toolbar.js
└── components/modal/
├── lottery-form-modal.js
└── lottery-form-modal.hbs
Codice del pulsante della barra degli strumenti:
// 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 modale:
// 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();
}
}
Template modale:
{{! 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>
Domande
Basandomi su tutto il codice, gli errori e le informazioni di background fornite sopra, come dovrei modificare il mio codice per implementare correttamente la mia funzionalità?
Qualsiasi indicazione sull’approccio di implementazione corretto sarebbe molto apprezzata.