@decky/ui 4.3.1 → 4.5.0

package/dist/class-mapper.d.ts

@@ -1,7 +1,9 @@
+import { ModuleID } from './webpack';
 export interface ClassModule {
     [name: string]: string;
 }
-export declare const classMap: ClassModule[];
-export declare function findClass(name: string): string | void;
+export declare const classModuleMap: Map<ModuleID, ClassModule>;
+export declare const classMap: IterableIterator<ClassModule>;
+export declare function findClass(id: string, name: string): string | void;
 export declare function findClassModule(filter: (module: any) => boolean): ClassModule | void;
 export declare function unminifyClass(minifiedClass: string): string | void;

package/dist/class-mapper.js

@@ -1,5 +1,5 @@
-import { findAllModules } from './webpack';
-export const classMap = findAllModules((m) => {
+import { createModuleMapping } from './webpack';
+export const classModuleMap = createModuleMapping((m) => {
     if (typeof m == 'object' && !m.__esModule) {
         const keys = Object.keys(m);
         if (keys.length == 1 && m.version)
@@ -10,14 +10,15 @@ export const classMap = findAllModules((m) => {
     }
     return false;
 });
-export function findClass(name) {
-    return classMap.find((m) => m?.[name])?.[name];
+export const classMap = classModuleMap.values();
+export function findClass(id, name) {
+    return classModuleMap.get(id)?.[name];
 }
 export function findClassModule(filter) {
-    return classMap.find((m) => filter(m));
+    return [...classModuleMap.values()].find((m) => filter(m));
 }
 export function unminifyClass(minifiedClass) {
-    for (let m of classMap) {
+    for (let m of classModuleMap.values()) {
         for (let className of Object.keys(m)) {
             if (m[className] == minifiedClass)
                 return className;

package/dist/utils/index.d.ts

@@ -1,7 +1,8 @@
 export * from './patcher';
-export * from './react';
-export * from './react-patching';
 export * from './static-classes';
+export * from './react/react';
+export * from './react/fc';
+export * from './react/treepatcher';
 declare global {
     var FocusNavController: any;
     var GamepadNavTree: any;

package/dist/utils/index.js

@@ -1,7 +1,8 @@
 export * from './patcher';
-export * from './react';
-export * from './react-patching';
 export * from './static-classes';
+export * from './react/react';
+export * from './react/fc';
+export * from './react/treepatcher';
 export function joinClassNames(...classes) {
     return classes.join(' ');
 }

package/dist/utils/react/fc.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+export interface FCTrampoline {
+    component: FC;
+}
+export declare function setFCTrampolineLoggingEnabled(value?: boolean): void;
+export declare function injectFCTrampoline(component: FC, customHooks?: any): FCTrampoline;

package/dist/utils/react/fc.js

@@ -0,0 +1,74 @@
+import { createElement } from 'react';
+import { applyHookStubs, removeHookStubs } from './react';
+import Logger from '../../logger';
+let loggingEnabled = false;
+export function setFCTrampolineLoggingEnabled(value = true) { loggingEnabled = value; }
+;
+let logger = new Logger('FCTrampoline');
+export function injectFCTrampoline(component, customHooks) {
+    const newComponent = function (...args) {
+        loggingEnabled && logger.debug("new component rendering with props", args);
+        return component.apply(this, args);
+    };
+    const userComponent = { component: newComponent };
+    component.prototype.render = function (...args) {
+        loggingEnabled && logger.debug("rendering trampoline", args, this);
+        return createElement(userComponent.component, this.props, this.props.children);
+    };
+    component.prototype.isReactComponent = true;
+    let stubsApplied = false;
+    let oldCreateElement = window.SP_REACT.createElement;
+    const applyStubsIfNeeded = () => {
+        if (!stubsApplied) {
+            loggingEnabled && logger.debug("applied stubs");
+            stubsApplied = true;
+            applyHookStubs(customHooks);
+            window.SP_REACT.createElement = () => {
+                loggingEnabled && logger.debug("createElement hook called");
+                return Object.create(component.prototype);
+            };
+        }
+    };
+    const removeStubsIfNeeded = () => {
+        if (stubsApplied) {
+            loggingEnabled && logger.debug("removed stubs");
+            stubsApplied = false;
+            removeHookStubs();
+            window.SP_REACT.createElement = oldCreateElement;
+        }
+    };
+    Object.defineProperty(component, "contextType", {
+        configurable: true,
+        get: function () {
+            loggingEnabled && logger.debug("get contexttype", this, stubsApplied);
+            applyStubsIfNeeded();
+            return this._contextType;
+        },
+        set: function (value) {
+            this._contextType = value;
+        }
+    });
+    Object.defineProperty(component, "getDerivedStateFromProps", {
+        configurable: true,
+        get: function () {
+            loggingEnabled && logger.debug("get getDerivedStateFromProps", this, stubsApplied);
+            removeStubsIfNeeded();
+            return this._getDerivedStateFromProps;
+        },
+        set: function (value) {
+            this._getDerivedStateFromProps = value;
+        }
+    });
+    Object.defineProperty(component.prototype, "updater", {
+        configurable: true,
+        get: function () {
+            return this._updater;
+        },
+        set: function (value) {
+            loggingEnabled && logger.debug("set updater", this, value, stubsApplied);
+            removeStubsIfNeeded();
+            return this._updater = value;
+        }
+    });
+    return userComponent;
+}

package/dist/utils/{react.d.ts → react/react.d.ts}

@@ -5,6 +5,8 @@ declare global {
     }
 }
 export declare function createPropListRegex(propList: string[], fromStart?: boolean): RegExp;
+export declare function applyHookStubs(customHooks?: any): any;
+export declare function removeHookStubs(): void;
 export declare function fakeRenderComponent(fun: Function, customHooks?: any): any;
 export declare function wrapReactType(node: any, prop?: any): any;
 export declare function wrapReactClass(node: any, prop?: any): any;

package/dist/utils/{react.js → react/react.js}

@@ -12,10 +12,11 @@ export function createPropListRegex(propList, fromStart = true) {
     });
     return new RegExp(regexString);
 }
-export function fakeRenderComponent(fun, customHooks = {}) {
+let oldHooks = {};
+export function applyHookStubs(customHooks = {}) {
     const hooks = window.SP_REACT.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
         .current;
-    let oldHooks = {
+    oldHooks = {
         useContext: hooks.useContext,
         useCallback: hooks.useCallback,
         useLayoutEffect: hooks.useLayoutEffect,
@@ -35,8 +36,18 @@ export function fakeRenderComponent(fun, customHooks = {}) {
         return [val, (n) => (val = n)];
     };
     Object.assign(hooks, customHooks);
-    const res = fun(hooks);
+    return hooks;
+}
+export function removeHookStubs() {
+    const hooks = window.SP_REACT.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
+        .current;
     Object.assign(hooks, oldHooks);
+    oldHooks = {};
+}
+export function fakeRenderComponent(fun, customHooks) {
+    const hooks = applyHookStubs(customHooks);
+    const res = fun(hooks);
+    removeHookStubs();
     return res;
 }
 export function wrapReactType(node, prop = 'type') {

package/dist/utils/{react-patching.d.ts → react/treepatcher.d.ts}

@@ -1,4 +1,4 @@
-import { GenericPatchHandler } from './patcher';
+import { GenericPatchHandler } from '../patcher';
 export type GenericNodeStep = (node: any) => any;
 export type NodeStep = GenericNodeStep;
 export type ReactPatchHandler = GenericPatchHandler;

package/dist/utils/{react-patching.js → react/treepatcher.js}

@@ -1,5 +1,5 @@
-import Logger from '../logger';
-import { afterPatch } from './patcher';
+import Logger from '../../logger';
+import { afterPatch } from '../patcher';
 import { wrapReactClass, wrapReactType } from './react';
 let loggingEnabled = false;
 let perfLoggingEnabled = false;

package/dist/webpack.d.ts

@@ -3,18 +3,20 @@ declare global {
         webpackChunksteamui: any;
     }
 }
+export type ModuleID = string;
 export type Module = any;
 export type Export = any;
 type FilterFn = (module: any) => boolean;
 type ExportFilterFn = (moduleExport: any, exportName?: any) => boolean;
 type FindFn = (module: any) => any;
-export declare let modules: any;
+export declare let modules: Map<string, any>;
 export declare const findModule: (filter: FilterFn) => any;
-export declare const findModuleDetailsByExport: (filter: ExportFilterFn, minExports?: number) => [module: Module | undefined, moduleExport: any, exportName: any];
+export declare const findModuleDetailsByExport: (filter: ExportFilterFn, minExports?: number) => [module: Module | undefined, moduleExport: any, exportName: any, moduleID: string | undefined];
 export declare const findModuleByExport: (filter: ExportFilterFn, minExports?: number) => any;
 export declare const findModuleExport: (filter: ExportFilterFn, minExports?: number) => any;
 export declare const findModuleChild: (filter: FindFn) => any;
 export declare const findAllModules: (filter: FilterFn) => any[];
+export declare const createModuleMapping: (filter: FilterFn) => Map<string, any>;
 export declare const CommonUIModule: any;
 export declare const IconsModule: any;
 export declare const ReactRouter: any;

package/dist/webpack.js

@@ -1,10 +1,10 @@
 import Logger from './logger';
 const logger = new Logger('Webpack');
-export let modules = [];
+export let modules = new Map();
 function initModuleCache() {
     const startTime = performance.now();
     logger.group('Webpack Module Init');
-    const id = Math.random();
+    const id = Symbol("@decky/ui");
     let webpackRequire;
     window.webpackChunksteamui.push([
         [id],
@@ -14,22 +14,22 @@ function initModuleCache() {
         },
     ]);
     logger.log('Initializing all modules. Errors here likely do not matter, as they are usually just failing module side effects.');
-    for (let i of Object.keys(webpackRequire.m)) {
+    for (let id of Object.keys(webpackRequire.m)) {
         try {
-            const module = webpackRequire(i);
+            const module = webpackRequire(id);
             if (module) {
-                modules.push(module);
+                modules.set(id, module);
             }
         }
         catch (e) {
-            logger.debug('Ignoring require error for module', i, e);
+            logger.debug('Ignoring require error for module', id, e);
         }
     }
     logger.groupEnd(`Modules initialized in ${performance.now() - startTime}ms...`);
 }
 initModuleCache();
 export const findModule = (filter) => {
-    for (const m of modules) {
+    for (const m of modules.values()) {
         if (m.default && filter(m.default))
             return m.default;
         if (filter(m))
@@ -37,7 +37,7 @@ export const findModule = (filter) => {
     }
 };
 export const findModuleDetailsByExport = (filter, minExports) => {
-    for (const m of modules) {
+    for (const [id, m] of modules) {
         if (!m)
             continue;
         for (const mod of [m.default, m]) {
@@ -49,7 +49,7 @@ export const findModuleDetailsByExport = (filter, minExports) => {
                 if (mod?.[exportName]) {
                     const filterRes = filter(mod[exportName], exportName);
                     if (filterRes) {
-                        return [mod, mod[exportName], exportName];
+                        return [mod, mod[exportName], exportName, id];
                     }
                     else {
                         continue;
@@ -58,7 +58,7 @@ export const findModuleDetailsByExport = (filter, minExports) => {
             }
         }
     }
-    return [undefined, undefined, undefined];
+    return [undefined, undefined, undefined, undefined];
 };
 export const findModuleByExport = (filter, minExports) => {
     return findModuleDetailsByExport(filter, minExports)?.[0];
@@ -67,7 +67,7 @@ export const findModuleExport = (filter, minExports) => {
     return findModuleDetailsByExport(filter, minExports)?.[1];
 };
 export const findModuleChild = (filter) => {
-    for (const m of modules) {
+    for (const m of modules.values()) {
         for (const mod of [m.default, m]) {
             const filterRes = filter(mod);
             if (filterRes) {
@@ -81,7 +81,7 @@ export const findModuleChild = (filter) => {
 };
 export const findAllModules = (filter) => {
     const out = [];
-    for (const m of modules) {
+    for (const m of modules.values()) {
         if (m.default && filter(m.default))
             out.push(m.default);
         if (filter(m))
@@ -89,7 +89,17 @@ export const findAllModules = (filter) => {
     }
     return out;
 };
-export const CommonUIModule = modules.find((m) => {
+export const createModuleMapping = (filter) => {
+    const mapping = new Map();
+    for (const [id, m] of modules) {
+        if (m.default && filter(m.default))
+            mapping.set(id, m.default);
+        if (filter(m))
+            mapping.set(id, m);
+    }
+    return mapping;
+};
+export const CommonUIModule = findModule((m) => {
     if (typeof m !== 'object')
         return false;
     for (let prop in m) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.3.1",
+  "version": "4.5.0",
   "description": "A library for interacting with the Steam frontend in Decky plugins and elsewhere.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/class-mapper.ts

@@ -1,10 +1,10 @@
-import { Module, findAllModules } from './webpack';
+import { Module, ModuleID, createModuleMapping } from './webpack';
 
 export interface ClassModule {
   [name: string]: string;
 }
 
-export const classMap: ClassModule[] = findAllModules((m: Module) => {
+export const classModuleMap: Map<ModuleID, ClassModule> = createModuleMapping((m: Module) => {
   if (typeof m == 'object' && !m.__esModule) {
     const keys = Object.keys(m);
     // special case some libraries
@@ -17,16 +17,19 @@ export const classMap: ClassModule[] = findAllModules((m: Module) => {
   return false;
 });
 
-export function findClass(name: string): string | void {
-  return classMap.find((m) => m?.[name])?.[name];
+export const classMap = classModuleMap.values();
+
+export function findClass(id: string, name: string): string | void {
+  return classModuleMap.get(id)?.[name];
 }
 
 export function findClassModule(filter: (module: any) => boolean): ClassModule | void {
-  return classMap.find((m) => filter(m));
+  // TODO optimize
+  return [...classModuleMap.values()].find((m) => filter(m));
 }
 
 export function unminifyClass(minifiedClass: string): string | void {
-  for (let m of classMap) {
+  for (let m of classModuleMap.values()) {
     for (let className of Object.keys(m)) {
       if (m[className] == minifiedClass) return className;
     }

package/src/utils/index.ts

@@ -1,7 +1,8 @@
 export * from './patcher';
-export * from './react';
-export * from './react-patching';
 export * from './static-classes';
+export * from './react/react';
+export * from './react/fc';
+export * from './react/treepatcher';
 
 declare global {
   var FocusNavController: any;

package/src/utils/react/fc.ts

@@ -0,0 +1,109 @@
+// Utilities for patching function components
+import { createElement, type FC } from 'react';
+import { applyHookStubs, removeHookStubs } from './react';
+import Logger from '../../logger';
+
+export interface FCTrampoline {
+    component: FC
+}
+
+let loggingEnabled = false;
+
+export function setFCTrampolineLoggingEnabled(value: boolean = true) { loggingEnabled = value };
+
+let logger = new Logger('FCTrampoline');
+
+/**
+ * Directly hooks a function component from its reference, redirecting it to a user-patchable wrapper in its returned object.
+ * This only works if the original component when called directly returns either nothing, null, or another child element.
+ * 
+ * This works by tricking react into thinking it's a class component by cleverly working around its class component checks,
+ * keeping the unmodified function component intact as a mostly working constructor (as it is impossible to direcly modify a function),
+ * stubbing out hooks to prevent errors by detecting setter/getter triggers that occur direcly before/after the class component is instantiated by react,
+ * and creating a fake class component render method to trampoline out into your own handler.
+ * 
+ * Due to the nature of this method of hooking a component, please only use this where it is *absolutely necessary.*
+ * Incorrect hook stubs can cause major instability, be careful when writing them. Refer to fakeRenderComponent for the hook stub implementation.
+ * Make sure your hook stubs can handle all the cases they could possibly need to within the component you are injecting into.
+ * You do not need to worry about its children, as they are never called due to the first instance never actually rendering.
+ */
+export function injectFCTrampoline(component: FC, customHooks?: any): FCTrampoline {
+    // It needs to be wrapped so React doesn't infinitely call the fake class render method.
+    const newComponent = function (this: any, ...args: any) {
+        loggingEnabled && logger.debug("new component rendering with props", args);
+        return component.apply(this, args);
+    }
+    const userComponent = { component: newComponent };
+    // Create a fake class component render method
+    component.prototype.render = function (...args: any[]) {
+        loggingEnabled && logger.debug("rendering trampoline", args, this);
+        // Pass through rendering via creating the component as a child so React can use function component logic instead of class component logic (setting up the hooks)
+        return createElement(userComponent.component, this.props, this.props.children);
+    };
+    component.prototype.isReactComponent = true;
+    let stubsApplied = false;
+    let oldCreateElement = window.SP_REACT.createElement;
+
+    const applyStubsIfNeeded = () => {
+        if (!stubsApplied) {
+            loggingEnabled && logger.debug("applied stubs");
+            stubsApplied = true;
+            applyHookStubs(customHooks)
+            // we have to redirect this to return an object with component's prototype as a constructor returning a value overrides its prototype
+            window.SP_REACT.createElement = () => {
+                loggingEnabled && logger.debug("createElement hook called");
+                return Object.create(component.prototype);
+            };
+        }
+    }
+
+    const removeStubsIfNeeded = () => {
+        if (stubsApplied) {
+            loggingEnabled && logger.debug("removed stubs");
+            stubsApplied = false;
+            removeHookStubs();
+            window.SP_REACT.createElement = oldCreateElement;
+        }
+    }
+
+    // Accessed two times, once directly before class instantiation, and again in some extra logic we don't need to worry about that we hanlde below just in case.
+    Object.defineProperty(component, "contextType", {
+        configurable: true,
+        get: function () {
+            loggingEnabled && logger.debug("get contexttype", this, stubsApplied);
+            applyStubsIfNeeded();
+            return this._contextType;
+        },
+        set: function (value) {
+            this._contextType = value;
+        }
+    });
+
+    // Undoes the second contextType access we can't detect shortly before render before it's able to cause any damage
+    Object.defineProperty(component, "getDerivedStateFromProps", {
+        configurable: true,
+        get: function () {
+            loggingEnabled && logger.debug("get getDerivedStateFromProps", this, stubsApplied);
+            removeStubsIfNeeded();
+            return this._getDerivedStateFromProps;
+        },
+        set: function (value) {
+            this._getDerivedStateFromProps = value;
+        }
+    });
+
+    // Set directly after class is instantiated
+    Object.defineProperty(component.prototype, "updater", {
+        configurable: true,
+        get: function () {
+            return this._updater;
+        },
+        set: function (value) {
+            loggingEnabled && logger.debug("set updater", this, value, stubsApplied);
+            removeStubsIfNeeded();
+            return this._updater = value;
+        }
+    });
+
+    return userComponent;
+}

package/src/utils/{react.ts → react/react.ts}

@@ -30,13 +30,15 @@ export function createPropListRegex(propList: string[], fromStart: boolean = tru
   return new RegExp(regexString);
 }
 
-export function fakeRenderComponent(fun: Function, customHooks: any = {}): any {
+let oldHooks = {};
+
+export function applyHookStubs(customHooks: any = {}): any {
   const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
     .current;
 
   // TODO: add more hooks
 
-  let oldHooks = {
+  oldHooks = {
     useContext: hooks.useContext,
     useCallback: hooks.useCallback,
     useLayoutEffect: hooks.useLayoutEffect,
@@ -60,9 +62,22 @@ export function fakeRenderComponent(fun: Function, customHooks: any = {}): any {
 
   Object.assign(hooks, customHooks);
 
-  const res = fun(hooks);
+  return hooks;
+}
 
+export function removeHookStubs() {
+  const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
+    .current;
   Object.assign(hooks, oldHooks);
+  oldHooks = {};
+}
+
+export function fakeRenderComponent(fun: Function, customHooks?: any): any {
+  const hooks = applyHookStubs(customHooks);
+
+  const res = fun(hooks); // TODO why'd we do this?
+
+  removeHookStubs();
 
   return res;
 }

package/src/utils/{react-patching.ts → react/treepatcher.ts}

@@ -1,5 +1,5 @@
-import Logger from '../logger';
-import { GenericPatchHandler, afterPatch } from './patcher';
+import Logger from '../../logger';
+import { GenericPatchHandler, afterPatch } from '../patcher';
 import { wrapReactClass, wrapReactType } from './react';
 
 // TODO max size limit? could implement as a class extending map perhaps

package/src/webpack.ts

@@ -9,20 +9,21 @@ declare global {
 const logger = new Logger('Webpack');
 
 // In most case an object with getters for each property. Look for the first call to r.d in the module, usually near or at the top.
+export type ModuleID = string; // number string
 export type Module = any;
 export type Export = any;
 type FilterFn = (module: any) => boolean;
 type ExportFilterFn = (moduleExport: any, exportName?: any) => boolean;
 type FindFn = (module: any) => any;
 
-export let modules: any = [];
+export let modules = new Map<ModuleID, Module>();
 
 function initModuleCache() {
   const startTime = performance.now();
   logger.group('Webpack Module Init');
   // Webpack 5, currently on beta
   // Generate a fake module ID
-  const id = Math.random(); // really should be an int and not a float but who cares
+  const id = Symbol("@decky/ui");
   let webpackRequire!: ((id: any) => Module) & { m: object };
   // Insert our module in a new chunk.
   // The module will then be called with webpack's internal require function as its first argument
@@ -39,14 +40,14 @@ function initModuleCache() {
   );
 
   // Loop over every module ID
-  for (let i of Object.keys(webpackRequire.m)) {
+  for (let id of Object.keys(webpackRequire.m)) {
     try {
-      const module = webpackRequire(i);
+      const module = webpackRequire(id);
       if (module) {
-        modules.push(module);
+        modules.set(id, module);
       }
     } catch (e) {
-      logger.debug('Ignoring require error for module', i, e);
+      logger.debug('Ignoring require error for module', id, e);
     }
   }
 
@@ -56,7 +57,7 @@ function initModuleCache() {
 initModuleCache();
 
 export const findModule = (filter: FilterFn) => {
-  for (const m of modules) {
+  for (const m of modules.values()) {
     if (m.default && filter(m.default)) return m.default;
     if (filter(m)) return m;
   }
@@ -65,8 +66,8 @@ export const findModule = (filter: FilterFn) => {
 export const findModuleDetailsByExport = (
   filter: ExportFilterFn,
   minExports?: number,
-): [module: Module | undefined, moduleExport: any, exportName: any] => {
-  for (const m of modules) {
+): [module: Module | undefined, moduleExport: any, exportName: any, moduleID: string | undefined] => {
+  for (const [id, m] of modules) {
     if (!m) continue;
     for (const mod of [m.default, m]) {
       if (typeof mod !== 'object') continue;
@@ -75,7 +76,7 @@ export const findModuleDetailsByExport = (
         if (mod?.[exportName]) {
           const filterRes = filter(mod[exportName], exportName);
           if (filterRes) {
-            return [mod, mod[exportName], exportName];
+            return [mod, mod[exportName], exportName, id];
           } else {
             continue;
           }
@@ -83,7 +84,7 @@ export const findModuleDetailsByExport = (
       }
     }
   }
-  return [undefined, undefined, undefined];
+  return [undefined, undefined, undefined, undefined];
 };
 
 export const findModuleByExport = (filter: ExportFilterFn, minExports?: number) => {
@@ -98,7 +99,7 @@ export const findModuleExport = (filter: ExportFilterFn, minExports?: number) =>
  * @deprecated use findModuleExport instead
  */
 export const findModuleChild = (filter: FindFn) => {
-  for (const m of modules) {
+  for (const m of modules.values()) {
     for (const mod of [m.default, m]) {
       const filterRes = filter(mod);
       if (filterRes) {
@@ -110,10 +111,13 @@ export const findModuleChild = (filter: FindFn) => {
   }
 };
 
+/**
+ * @deprecated use createModuleMapping instead
+ */
 export const findAllModules = (filter: FilterFn) => {
   const out = [];
 
-  for (const m of modules) {
+  for (const m of modules.values()) {
     if (m.default && filter(m.default)) out.push(m.default);
     if (filter(m)) out.push(m);
   }
@@ -121,7 +125,18 @@ export const findAllModules = (filter: FilterFn) => {
   return out;
 };
 
-export const CommonUIModule = modules.find((m: Module) => {
+export const createModuleMapping = (filter: FilterFn) => {
+  const mapping = new Map<ModuleID, Module>();
+
+  for (const [id, m] of modules) {
+    if (m.default && filter(m.default)) mapping.set(id, m.default);
+    if (filter(m)) mapping.set(id, m);
+  }
+
+  return mapping;
+};
+
+export const CommonUIModule = findModule((m: Module) => {
   if (typeof m !== 'object') return false;
   for (let prop in m) {
     if (m[prop]?.contextType?._currentValue && Object.keys(m).length > 60) return true;