DEV: Load @json-editor/json-editor using webpack async import (#27773)

.github/dependabot.yml

@@ -60,7 +60,6 @@ updates:
     open-pull-requests-limit: 20
     versioning-strategy: increase
     ignore: # These are all vendored so need to be updated manually. See lib/tasks/javascript.rake
-      - dependency-name: "@json-editor/json-editor"
       - dependency-name: "chart.js"
       - dependency-name: "chartjs-plugin-datalabels"
       - dependency-name: "magnific-popup"

app/assets/javascripts/discourse/app/components/modal/json-schema-editor.js

@@ -1,10 +1,10 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
+import { waitForPromise } from "@ember/test-waiters";
 import { create } from "virtual-dom";
-import loadScript from "discourse/lib/load-script";
+import { isTesting } from "discourse-common/config/environment";
 import { iconNode } from "discourse-common/lib/icon-library";
-import { afterRender } from "discourse-common/utils/decorators";
 
 export default class JsonSchemaEditorModal extends Component {
   @tracked editor = null;
@@ -16,13 +16,6 @@ export default class JsonSchemaEditorModal extends Component {
     return this.args.model.settingName.replace(/\_/g, " ");
   }
 
-  @action
-  buildJsonEditor(editor) {
-    loadScript("/javascripts/jsoneditor.js").then(
-      this._loadEditor.bind(this, editor)
-    );
-  }
-
   @action
   teardownJsonEditor() {
     this.editor?.destroy();
@@ -42,9 +35,13 @@ export default class JsonSchemaEditorModal extends Component {
     }
   }
 
-  @afterRender
-  _loadEditor(editor) {
-    let { JSONEditor } = window;
+  @action
+  async buildJsonEditor(element) {
+    const promise = await import("@json-editor/json-editor");
+    if (isTesting()) {
+      waitForPromise(promise);
+    }
+    const { JSONEditor } = await promise;
 
     JSONEditor.defaults.options.theme = "barebones";
     JSONEditor.defaults.iconlibs = {
@@ -52,7 +49,7 @@ export default class JsonSchemaEditorModal extends Component {
     };
     JSONEditor.defaults.options.iconlib = "discourseIcons";
 
-    this.editor = new JSONEditor(editor, {
+    this.editor = new JSONEditor(element, {
       schema: this.args.model.jsonSchema,
       disable_array_delete_all_rows: true,
       disable_array_delete_last_row: true,

app/assets/javascripts/discourse/package.json

@@ -20,6 +20,7 @@
     "@faker-js/faker": "^8.4.1",
     "@glimmer/syntax": "^0.92.0",
     "@highlightjs/cdn-assets": "^11.10.0",
+    "@json-editor/json-editor": "2.10.0",
     "@messageformat/core": "^3.3.0",
     "@messageformat/runtime": "^3.0.1",
     "ace-builds": "^1.35.2",

lib/tasks/javascript.rake

@@ -65,11 +65,6 @@ end
 
 def dependencies
   [
-    {
-      source: "@json-editor/json-editor/dist/jsoneditor.js",
-      package_name: "@json-editor/json-editor",
-      public: true,
-    },
     { source: "chart.js/dist/chart.min.js", public: true },
     { source: "chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.min.js", public: true },
     { source: "magnific-popup/dist/jquery.magnific-popup.min.js", public: true },

package.json

@@ -12,7 +12,6 @@
     "@glint/environment-ember-loose": "^1.4.0",
     "@glint/environment-ember-template-imports": "^1.4.0",
     "@glint/template": "^1.4.0",
-    "@json-editor/json-editor": "2.10.0",
     "@mixer/parallel-prettier": "^2.0.3",
     "chart.js": "3.5.1",
     "chartjs-plugin-datalabels": "2.2.0",