Problemübersicht
Ich entwickle ein Discourse-Plugin, das einen Toolbar-Button hinzufügt, um ein Modalformular zu öffnen. Ich habe die offizielle DModal API-Migration-Dokumentation Schritt für Schritt befolgt, aber ich erhalte immer noch Modulimportfehler und die Warnung “Modal muss aktualisiert werden”. Ich benötige Anleitung, was ich übersehe.
Eine kurze Anmerkung: Ich weiß nicht, wie man programmiert. Dieses Plugin wurde vollständig mit Hilfe von KI erstellt.
Aktuelle Fehler
Fehler 1 - Modulimport:
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`
Fehler 2 - Legacy Modal Warnung:
Error: the 'lottery-form' modal needs updating to work with the latest version of Discourse. See https://meta.discourse.org/t/268057.
Fehler 3 - Deprecation Notice:
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]
Offizielle Dokumentation, der ich gefolgt bin
Ich habe diese offiziellen Ressourcen sorgfältig studiert und implementiert:
-
Konvertierung von Modals von Legacy-Controllern zur neuen DModal-Komponenten-API
- URL:
https://meta.discourse.org/t/268057 - Alle 4 Schritte befolgt: Dateien nach
/components/modal/verschoben, JS zuextends Componentaktualisiert, Template zu\u003cDModal\u003eaktualisiert, Show-Aufrufe zumodal.show()aktualisiert
- URL:
-
Verwendung der DModal API zum Rendern von Modal-Fenstern
- URL:
https://meta.discourse.org/t/268304 - DModal mit korrekten
@closeModal,@titleund benannten Blöcken implementiert
- URL:
-
Discourse Core Plugin API
- Quelle:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs api.onToolbarCreate()und Modal-Service-Injektion verwendet
- Quelle:
-
Discourse Developer Docs - Konvertierung von Modals
- URL:
https://github.com/discourse/discourse-developer-docs/blob/main/docs/03-code-internals/10-converting-modals.md - Migrationsschritte abgeglichen
- URL:
Was ich zu tun versuche
- Einen Toolbar-Button im Composer hinzufügen
- Button-Klick öffnet ein Modalformular
- Benutzer füllt Formular aus und klickt auf Senden
- Modal schließt sich und fügt Inhalt in den Composer ein
Was ich versucht habe
Ansatz 1: Dynamischer Import + Modal-Service (Aktuell)
- Modulimportfehler erhalten
Ansatz 2: showModal() mit Controller
- Deprecation-Warnungen bezüglich Legacy-Controllern erhalten
Ansatz 3: Statischer Import
- Auch statische Imports versucht, aber die gleichen Modulauflösungsprobleme
Dateistruktur:
discourse-lottery-v3/
├── plugin.rb
└── assets/javascripts/discourse/
├── initializers/
│ └── lottery-toolbar.js
└── components/modal/
├── lottery-form-modal.js
└── lottery-form-modal.hbs
Toolbar-Button-Code:
// 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: {} });
});
},
});
});
});
},
};
Modal-Komponente:
// 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();
}
}
Modal-Template:
{{! 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>
Fragen
Basierend auf dem gesamten Code, den Fehlern und den oben bereitgestellten Hintergrundinformationen, wie sollte ich meinen Code ändern, um meine Funktion korrekt zu implementieren?
Jede Anleitung zum korrekten Implementierungsansatz wäre sehr willkommen.