refactor+chore: update deps and allow import mapping to metro find

package.json

@@ -14,40 +14,43 @@
     "license": "BSD-3-Clause",
     "devDependencies": {
         "@react-native-clipboard/clipboard": "1.10.0",
-        "@shopify/react-native-skia": "^1.3.0",
+        "@shopify/react-native-skia": "^1.3.8",
-        "@swc/core": "^1.4.17",
+        "@swc/core": "^1.7.0",
-        "@swc/helpers": "^0.5.11",
+        "@swc/helpers": "^0.5.12",
-        "@types/chroma-js": "~2.4.0",
+        "@types/chroma-js": "~2.4.4",
-        "@types/lodash": "~4.17.0",
+        "@types/lodash": "~4.17.7",
-        "@types/node": "^20.11.25",
+        "@types/node": "^20.14.11",
-        "@types/react": "~18.2.0",
+        "@types/react": "~18.2.79",
-        "@types/react-native": "~0.72.0",
+        "@types/react-native": "~0.72.8",
         "@types/yargs-parser": "^21.0.3",
-        "@typescript-eslint/eslint-plugin": "^7.1.1",
+        "@typescript-eslint/eslint-plugin": "^7.16.1",
-        "@typescript-eslint/parser": "^7.1.1",
+        "@typescript-eslint/parser": "^7.16.1",
-        "@typescript-eslint/typescript-estree": "^7.1.1",
+        "@typescript-eslint/typescript-estree": "^7.16.1",
         "chalk": "^5.3.0",
         "esbuild": "^0.20.2",
         "esbuild-plugin-globals": "^0.2.0",
         "eslint": "^8.57.0",
         "eslint-plugin-import-alias": "^1.2.0",
-        "eslint-plugin-react": "^7.34.0",
+        "eslint-plugin-react": "^7.35.0",
-        "eslint-plugin-simple-import-sort": "^12.0.0",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
-        "eslint-plugin-unused-imports": "^3.1.0",
+        "eslint-plugin-unused-imports": "^3.2.0",
-        "intl-messageformat": "^10.5.11",
+        "intl-messageformat": "^10.5.14",
         "moment": "2.22.2",
-        "type-fest": "^4.12.0",
+        "type-fest": "^4.22.1",
-        "typescript": "^5.4.5",
+        "typescript": "^5.5.3",
         "yargs-parser": "^21.1.1"
     },
     "dependencies": {
-        "es-toolkit": "^1.8.0",
+        "es-toolkit": "^1.13.1",
-        "fuzzysort": "^3.0.1",
+        "fuzzysort": "^3.0.2",
         "spitroast": "^1.4.4"
     },
     "pnpm": {
         "peerDependencyRules": {
-            "ignoreMissing": ["react", "react-native"]
+            "ignoreMissing": [
+                "react",
+                "react-native"
+            ]
         }
     }
 }

scripts/build.mjs

@@ -11,6 +11,12 @@ import yargs from "yargs-parser";
 
 import { printBuildSuccess } from "./util.mjs";
 
+/** @type string[] */
+const metroDeps = await (async () => {
+    const ast = await swc.parseFile(path.resolve("./shims/depsModule.ts"));
+    return ast.body.at(-1).expression.right.properties.map(p => p.key.value);
+})();
+
 const args = yargs(process.argv.slice(2));
 const {
     "release-branch": releaseBranch,
@@ -28,7 +34,7 @@ const config = {
     minify: false,
     external: [],
     supported: {
-        // Hermes does not actually supports const and let, even though it syntactically
+        // Hermes does not actually support const and let, even though it syntactically
         // accepts it, but it's treated just like 'var' and causes issues
         "const-and-let": false
     },
@@ -43,13 +49,16 @@ const config = {
     },
     legalComments: "none",
     alias: {
+        "!bunny-deps-shim!": "./shims/depsModule.ts",
         "spitroast": "./node_modules/spitroast",
         "react/jsx-runtime": "./shims/jsxRuntime"
     },
     plugins: [
         globalPlugin({
-            "react": "React",
+            ...metroDeps.reduce((obj, key) => {
-            "react-native": "ReactNative"
+                obj[key] = `require("!bunny-deps-shim!")[${JSON.stringify(key)}]`;
+                return obj;
+            }, {})
         }),
         {
             name: "swc",

shims/depsModule.ts

@@ -0,0 +1,11 @@
+import { findByPropsLazy } from "@metro";
+
+module.exports = {
+    "react": findByPropsLazy("createElement"),
+    "react-native": findByPropsLazy("AppRegistry"),
+    "util": findByPropsLazy("inspect", "isNullOrUndefined"),
+    "moment": findByPropsLazy("isMoment"),
+    "chroma-js": findByPropsLazy("brewer"),
+    "lodash": findByPropsLazy("forEachRight"),
+    "@shopify/react-native-skia": findByPropsLazy("useFont")
+};

src/core/fixes.ts

@@ -7,7 +7,8 @@
  */
 
 import { logger } from "@lib/utils/logger";
-import { FluxDispatcher, moment } from "@metro/common";
+import { FluxDispatcher } from "@metro/common";
+import moment from "moment";
 
 function onDispatch({ locale }: { locale: string; }) {
     // Timestamps

src/core/ui/settings/pages/Fonts/FontCard.tsx

@@ -9,8 +9,9 @@ import { TextStyleSheet } from "@lib/ui/styles";
 import { lazyDestructure } from "@lib/utils/lazy";
 import { ButtonColors } from "@lib/utils/types";
 import { findByProps } from "@metro";
-import { NavigationNative, Skia, tokens } from "@metro/common";
+import { NavigationNative, tokens } from "@metro/common";
 import { Button, Card, IconButton, Stack, Text } from "@metro/common/components";
+import * as Skia from "@shopify/react-native-skia";
 import { useMemo } from "react";
 import { View } from "react-native";
 
@@ -22,6 +23,7 @@ function FontPreview({ font }: { font: FontDefinition; }) {
     const TEXT_NORMAL = useToken(tokens.colors.TEXT_NORMAL);
     const { fontFamily: fontFamilyList, fontSize } = TextStyleSheet["text-md/medium"];
     const fontFamily = fontFamilyList!.split(/,/g)[0];
+
     const typeface = Skia.useFont(font.main[fontFamily])?.getTypeface();
 
     const paragraph = useMemo(() => {

src/core/vendetta/api.tsx

@@ -114,10 +114,10 @@ export const initVendettaObject = (): any => {
                 FluxDispatcher: common.FluxDispatcher,
                 React: common.React,
                 ReactNative: common.ReactNative,
-                moment: common.moment,
+                moment: require("moment"),
-                chroma: common.chroma,
+                chroma: require("chroma-js"),
-                lodash: common.lodash,
+                lodash: require("lodash"),
-                util: common.util
+                util: require("util")
             }
         },
         constants: {

src/lib/managers/themes.ts

@@ -10,10 +10,10 @@ import { awaitStorage, createFileBackend, createMMKVBackend, createStorage, wrap
 import { findInReactTree, safeFetch } from "@lib/utils";
 import { lazyDestructure, proxyLazy } from "@lib/utils/lazy";
 import { Author } from "@lib/utils/types";
-import { chroma } from "@metro/common";
 import { byMutableProp } from "@metro/filters";
 import { createLazyModule } from "@metro/lazy";
 import { findByNameLazy, findByProps, findByPropsLazy, findByStoreNameLazy } from "@metro/utils";
+import chroma from "chroma-js";
 import { ImageBackground, Platform, processColor } from "react-native";
 
 export interface ThemeData {

src/metro/common/index.ts

@@ -1,7 +1,8 @@
 import { proxyLazy } from "@lib/utils/lazy";
-import { Dispatcher } from "@metro/types";
 import { findByFilePath, findByProps, findByPropsLazy } from "@metro/utils";
 
+import { Dispatcher } from "./types";
+
 // Discord
 export const constants = findByPropsLazy("Fonts", "Permissions");
 export const channels = findByPropsLazy("getVoiceChannelId");
@@ -26,19 +27,3 @@ export const FluxDispatcher = findByProps("_interceptors") as Dispatcher;
 // React
 export const React = window.React = findByPropsLazy("createElement") as typeof import("react");
 export const ReactNative = window.ReactNative = findByPropsLazy("AppRegistry") as typeof import("react-native");
-
-// Moment
-export const moment = findByPropsLazy("isMoment") as typeof import("moment");
-
-// chroma.js
-export const chroma = findByPropsLazy("brewer") as typeof import("chroma-js");
-
-// Lodash
-export const lodash = findByPropsLazy("forEachRight") as typeof import("lodash");
-
-// Skia
-export const Skia = findByPropsLazy("useFont") as typeof import("@shopify/react-native-skia");
-
-// The node:util polyfill for RN
-// TODO: Find types for this
-export const util = findByPropsLazy("inspect", "isNullOrUndefined");

src/metro/common/types/index.ts

@@ -0,0 +1,18 @@
+export interface Dispatcher {
+    _actionHandlers: unknown;
+    _interceptors?: ((payload: any) => void | boolean)[];
+    _currentDispatchActionType: undefined | string;
+    _processingWaitQueue: boolean;
+    _subscriptions: Record<string, Set<(payload: any) => void>>;
+    _waitQueue: unknown[];
+
+    addDependencies(node1: any, node2: any): void;
+    dispatch(payload: any): Promise<void>;
+    flushWaitQueue(): void;
+    isDispatching(): boolean;
+    register(name: string, actionHandler: Record<string, (e: any) => void>, storeDidChange: (e: any) => boolean): string;
+    setInterceptor(interceptor?: (payload: any) => void | boolean): void;
+    subscribe(actionType: string, callback: (payload: any) => void): void;
+    unsubscribe(actionType: string, callback: (payload: any) => void): void;
+    wait(cb: () => void): void;
+}

src/metro/types.ts

@@ -157,22 +157,3 @@ export interface LazyModuleContext<A extends unknown[] = unknown[]> {
     forceLoad(): any;
     get cache(): any;
 }
-
-export interface Dispatcher {
-    _actionHandlers: unknown;
-    _interceptors?: ((payload: any) => void | boolean)[];
-    _currentDispatchActionType: undefined | string;
-    _processingWaitQueue: boolean;
-    _subscriptions: Record<string, Set<(payload: any) => void>>;
-    _waitQueue: unknown[];
-
-    addDependencies(node1: any, node2: any): void;
-    dispatch(payload: any): Promise<void>;
-    flushWaitQueue(): void;
-    isDispatching(): boolean;
-    register(name: string, actionHandler: Record<string, (e: any) => void>, storeDidChange: (e: any) => boolean): string;
-    setInterceptor(interceptor?: (payload: any) => void | boolean): void;
-    subscribe(actionType: string, callback: (payload: any) => void): void;
-    unsubscribe(actionType: string, callback: (payload: any) => void): void;
-    wait(cb: () => void): void;
-}