Merge pull request #103 from moonlight-mod/notnite/moonbase-custom

moonbase: Make custom settings real

packages/core-extensions/src/moonbase/index.tsx

···
     ]
   },
 
-  moonbase: {
+  settings: {
     dependencies: [
       { ext: "spacepack", id: "spacepack" },
       { ext: "settings", id: "settings" },
···
       }
     ],
     entrypoint: true
+  },
+
+  moonbase: {
+    dependencies: [{ ext: "moonbase", id: "stores" }]
   }
 };
 

packages/core-extensions/src/moonbase/webpackModules/moonbase.ts

···
+import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
+import type { Moonbase } from "@moonlight-mod/types/coreExtensions/moonbase";
+
+export const moonbase: Moonbase = {
+  registerConfigComponent(ext, option, component) {
+    MoonbaseSettingsStore.registerConfigComponent(ext, option, component);
+  }
+};
+
+export default moonbase;

packages/core-extensions/src/moonbase/webpackModules/stores.ts

···
   checkExtensionCompat,
   ExtensionCompat
 } from "@moonlight-mod/core/extension/loader";
+import { CustomComponent } from "@moonlight-mod/types/coreExtensions/moonbase";
 
 const logger = moonlight.getLogger("moonbase");
 
···
   private origConfig: Config;
   private config: Config;
   private extensionIndex: number;
+  private configComponents: Record<string, Record<string, CustomComponent>> =
+    {};
 
   modified: boolean;
   submitting: boolean;
···
   tryGetExtensionName(id: string) {
     const uniqueId = this.getExtensionUniqueId(id);
     return (uniqueId != null ? this.getExtensionName(uniqueId) : null) ?? id;
+  }
+
+  registerConfigComponent(
+    ext: string,
+    name: string,
+    component: CustomComponent
+  ) {
+    if (!(ext in this.configComponents)) this.configComponents[ext] = {};
+    this.configComponents[ext][name] = component;
+  }
+
+  getExtensionConfigComponent(ext: string, name: string) {
+    return this.configComponents[ext]?.[name];
   }
 
   writeConfig() {

packages/core-extensions/src/moonbase/webpackModules/ui/extensions/settings.tsx

···
   );
 }
 
+function Custom({ ext, name, setting, disabled }: SettingsProps) {
+  const { value, displayName } = useConfigEntry<any>(ext.uniqueId, name);
+
+  const { component: Component } = useStateFromStores(
+    [MoonbaseSettingsStore],
+    () => {
+      return {
+        component: MoonbaseSettingsStore.getExtensionConfigComponent(
+          ext.id,
+          name
+        )
+      };
+    },
+    [ext.uniqueId, name]
+  );
+
+  if (Component == null) {
+    const { Text } = Components;
+    return (
+      <Text variant="text/md/normal">{`Custom setting "${displayName}" is missing a component. Perhaps the extension is not installed?`}</Text>
+    );
+  }
+
+  return (
+    <Component
+      value={value}
+      setValue={(value) =>
+        MoonbaseSettingsStore.setExtensionConfig(ext.id, name, value)
+      }
+    />
+  );
+}
+
 function Setting({ ext, name, setting, disabled }: SettingsProps) {
   const elements: Partial<Record<ExtensionSettingType, SettingsComponent>> = {
     [ExtensionSettingType.Boolean]: Boolean,
···
     [ExtensionSettingType.Select]: Select,
     [ExtensionSettingType.MultiSelect]: MultiSelect,
     [ExtensionSettingType.List]: List,
-    [ExtensionSettingType.Dictionary]: Dictionary
+    [ExtensionSettingType.Dictionary]: Dictionary,
+    [ExtensionSettingType.Custom]: Custom
   };
   const element = elements[setting.type];
   if (element == null) return <></>;

packages/types/src/coreExtensions.ts

···
 export * as Markdown from "./coreExtensions/markdown";
 export * as ContextMenu from "./coreExtensions/contextMenu";
 export * as Notices from "./coreExtensions/notices";
+export * as Moonbase from "./coreExtensions/moonbase";

packages/types/src/coreExtensions/moonbase.ts

···
+export type CustomComponent = React.FC<{
+  value: any;
+  setValue: (value: any) => void;
+}>;
+
+export type Moonbase = {
+  registerConfigComponent: (
+    ext: string,
+    option: string,
+    component: CustomComponent
+  ) => void;
+};

packages/types/src/discord/require.ts

···
 import { Settings } from "../coreExtensions/settings";
 import { Spacepack } from "../coreExtensions/spacepack";
 import { Notices } from "../coreExtensions/notices";
+import { Moonbase } from "../coreExtensions/moonbase";
 
 declare function WebpackRequire(id: string): any;
 
···
 declare function WebpackRequire(id: "contextMenu_contextMenu"): ContextMenu;
 
 declare function WebpackRequire(id: "markdown_markdown"): Markdown;
+
+declare function WebpackRequire(id: "moonbase_moonbase"): Moonbase;
 
 declare function WebpackRequire(id: "notices_notices"): Notices;
 

packages/types/src/import.d.ts

···
   export = Markdown;
 }
 
+declare module "@moonlight-mod/wp/moonbase_moonbase" {
+  import { CoreExtensions } from "@moonlight-mod/types";
+  const Moonbase: CoreExtensions.Moonbase.Moonbase;
+  export = Moonbase;
+}
+
 declare module "@moonlight-mod/wp/notices_notices" {
   import { CoreExtensions } from "@moonlight-mod/types";
   const Notices: CoreExtensions.Notices.Notices;