factor V5

plugins/Last.fm/src/index.tsx

@@ -43,29 +43,28 @@ export const currentSettings = new Proxy(plugin.storage, {
   },
 });
 
+// Simple Settings component for fallback
+function FallbackSettings() {
+  return (
+    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+      <FormText style={{ color: "#ED4245" }}>
+        Failed to load Last.fm settings. Please check your connection and reload
+        Discord.
+      </FormText>
+    </ScrollView>
+  );
+}
+
 // Settings component with error handling
-const SettingsComponent = lazy(() =>
+const Settings = lazy(async () => {
-  import("./ui/pages/Settings")
+  try {
-    .then((module) => ({
+    const module = await import("./ui/pages/Settings");
-      default: module.SettingsComponent,
+    return { default: module.default || FallbackSettings };
-    }))
+  } catch (err) {
-    .catch((err) => {
+    console.error("[Last.fm] Failed to load settings:", err);
-      console.error("[Last.fm] Failed to load settings:", err);
+    return { default: FallbackSettings };
-      return {
+  }
-        default: () => (
+});
-          <ScrollView
-            style={{ flex: 1 }}
-            contentContainerStyle={{ padding: 16 }}
-          >
-            <FormText style={{ color: "#ED4245" }}>
-              Failed to load Last.fm settings. Please check your connection and
-              reload Discord.
-            </FormText>
-          </ScrollView>
-        ),
-      };
-    }),
-);
 
 // Connection status tracking
 let connectionAttempts = 0;
@@ -89,20 +88,8 @@ async function tryInitialize() {
   }
 }
 
-export default {
+// Create the plugin object
-  settings: () => (
+const pluginObj = {
-    <React.Suspense
-      fallback={
-        <View
-          style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
-        >
-          <FormText>Loading Last.fm settings...</FormText>
-        </View>
-      }
-    >
-      <SettingsComponent />
-    </React.Suspense>
-  ),
   onLoad() {
     pluginState.pluginStopped = false;
 
@@ -143,3 +130,24 @@ export default {
     }
   },
 };
+
+// Add settings property to the plugin object
+Object.defineProperty(pluginObj, "settings", {
+  get: () => (
+    <React.Suspense
+      fallback={
+        <View
+          style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
+        >
+          <FormText>Loading Last.fm settings...</FormText>
+        </View>
+      }
+    >
+      <Settings />
+    </React.Suspense>
+  ),
+  enumerable: true,
+  configurable: true,
+});
+
+export default pluginObj;

plugins/Last.fm/src/ui/pages/Settings.tsx

@@ -25,7 +25,7 @@ const get = (k: string, fallback: any = "") => plugin.storage[k] ?? fallback;
 const set = (k: string, v: any) => (plugin.storage[k] = v);
 
 // Define the Settings component
-function SettingsComponent() {
+export default function Settings() {
   const [_, forceUpdate] = React.useReducer((x) => ~x, 0);
   const update = () => forceUpdate();
 
@@ -212,16 +212,3 @@ function SettingsComponent() {
     </ScrollView>
   );
 }
-
-// Export the settings component wrapped in Suspense
-export const settings = () => (
-  <React.Suspense
-    fallback={
-      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-        <FormText>Loading Last.fm settings...</FormText>
-      </View>
-    }
-  >
-    <SettingsComponent />
-  </React.Suspense>
-);