Allow custom settings to extend the CustomSetting class

client/src/structs/settings/settingscategory.js

@@ -10,6 +10,7 @@
 
 import Setting from './setting';
 import EventEmitter from 'events';
+import { ClientLogger as Logger } from 'common';
 import { SettingUpdatedEvent, SettingsUpdatedEvent } from 'structs';
 
 export default class SettingsCategory {

client/src/structs/settings/types/basesetting.js

@@ -47,10 +47,6 @@ export default class Setting {
         return undefined;
     }
 
-    // get changed() {
-    //     return this.args.changed;
-    // }
-
     get text() {
         return this.args.text;
     }
@@ -59,6 +55,10 @@ export default class Setting {
         return this.args.hint;
     }
 
+    get path() {
+        return this.args.path;
+    }
+
     get disabled() {
         return this.args.disabled || false;
     }

client/src/structs/settings/types/custom.js

@@ -11,19 +11,15 @@
 import Setting from './basesetting';
 import SettingsCategory from '../settingscategory';
 import SettingsScheme from '../settingsscheme';
+import path from 'path';
 
 export default class CustomSetting extends Setting {
 
     constructor(args) {
         super(args);
 
-        if (this.args.class_file) {
-            const component = window.require(path.join(this.path, this.args.class_file));
-            const setting_class = this.args.class ? component[this.args.class](CustomSetting) : component.default ? component.default(CustomSetting) : component(CustomSetting);
-
-            const setting = new setting_class(this.args);
-            if (setting instanceof CustomSetting) return setting;
-        }
+        if (this.args.class_file && this.path)
+            this.setClass(this.args.class_file, this.args.class);
     }
 
     get file() {
@@ -38,12 +34,27 @@ export default class CustomSetting extends Setting {
         return this.args.component;
     }
 
-    get path() {
-        return this.args.path;
-    }
-
     get debug() {
         return this.args.debug || false;
     }
 
+    setContentPath(_path) {
+        this.args.path = _path;
+
+        if (this.args.class_file)
+            this.setClass(this.args.class_file, this.args.class);
+
+        console.log(`Custom setting ${this.id}:`, this);
+    }
+
+    setClass(class_file, class_export) {
+        const component = window.require(path.join(this.path, this.args.class_file));
+        const setting_class = class_export ? component[class_export](CustomSetting) : component.default ? component.default(CustomSetting) : component(CustomSetting);
+
+        if (!(setting_class.prototype instanceof CustomSetting))
+            throw {message: 'Custom setting class function returned a class that doesn\'t extend from CustomSetting.'};
+
+        this.__proto__ = setting_class.prototype;
+    }
+
 }

tests/plugins/Example/component.js

@@ -2,3 +2,20 @@ module.exports.default = {
     template: "<div style=\"margin-bottom: 15px; background-color: rgba(0, 0, 0, 0.2); border: 1px dashed rgba(255, 255, 255, 0.2); padding: 10px; color: #f6f6f7; font-weight: 500; font-size: 15px;\">Test custom setting {{ setting.id }}. This is from component.js in the plugin/theme's directory. (It can use functions.)</div>",
     props: ['setting', 'change']
 };
+
+const component = {
+    template: "<div style=\"margin-bottom: 15px; background-color: rgba(0, 0, 0, 0.2); border: 1px dashed rgba(255, 255, 255, 0.2); padding: 10px; color: #f6f6f7; font-weight: 500; font-size: 15px;\">Test custom setting {{ setting.id }}. This is included inline with the plugin/theme's config. (Which means it can't use any functions, but can still bind functions to events.) <button class=\"bd-button bd-button-primary\" style=\"display: inline-block; margin-left: 10px;\" @click=\"change(1)\">Set value to 1</button> <button class=\"bd-button bd-button-primary\" style=\"display: inline-block; margin-left: 10px;\" @click=\"change(2)\">Set value to 2</button></div>",
+    props: ['setting', 'change']
+};
+
+module.exports.CustomSetting = function (CustomSetting) {
+    return class extends CustomSetting {
+        get component() {
+            return component;
+        }
+
+        get debug() {
+            return true;
+        }
+    }
+};

tests/plugins/Example/config.json

@@ -237,6 +237,13 @@
                     "value": false,
                     "function": "getSettingsComponentHTMLElement",
                     "debug": true
+                },
+                {
+                    "id": "custom-6",
+                    "type": "custom",
+                    "value": false,
+                    "class_file": "component.js",
+                    "class": "CustomSetting"
                 }
             ]
         },