Begin work on typing imports in Webpack modules

build.mjs

···
     }
   }
 
+  const wpImportPlugin = {
+    name: "webpackImports",
+    setup(build) {
+      build.onResolve({ filter: /^@moonlight-mod\/wp\// }, (args) => {
+        const wpModule = args.path.replace(/^@moonlight-mod\/wp\//, "");
+        return {
+          path: wpModule,
+          external: true
+        };
+      });
+    }
+  };
+
   const esbuildConfig = {
     entryPoints,
     outdir,
···
           copyStaticFiles({
             src: `./packages/core-extensions/src/${ext}/manifest.json`,
             dest: `./dist/core-extensions/${ext}/manifest.json`
-          })
+          }),
+          wpImportPlugin
         ]
-      : []
+      : [wpImportPlugin],
+
+    logOverride: {
+      "commonjs-variable-in-esm": "verbose"
+    }
   };
 
   if (watch) {

env.d.ts

···
+/// <reference types="./packages/types/src/index" />

packages/core-extensions/src/common/components.ts

···
-import { ExtensionWebpackModule } from "@moonlight-mod/types";
-
-export const components: ExtensionWebpackModule = {
-  dependencies: [
-    { ext: "spacepack", id: "spacepack" },
-    "MasonryList:",
-    ".flexGutterSmall,"
-    //"ALWAYS_WHITE:",
-    //".Messages.SWITCH_ACCOUNTS_TOAST_LOGIN_SUCCESS.format"
-  ],
-  run: function (module, exports, require) {
-    const spacepack = require("spacepack_spacepack").spacepack;
-
-    const Components = spacepack.findByCode("MasonryList:function")[0].exports;
-    const MarkdownParser = spacepack.findByCode(
-      "parseAutoModerationSystemMessage:"
-    )[0].exports.default;
-    const LegacyText = spacepack.findByCode(".selectable", ".colorStandard")[0]
-      .exports.default;
-    const Flex = spacepack.findByCode(".flex" + "GutterSmall,")[0].exports
-      .default;
-    const CardClasses = spacepack.findByCode("card", "cardHeader", "inModal")[0]
-      .exports;
-    const ControlClasses = spacepack.findByCode(
-      "title",
-      "titleDefault",
-      "dividerDefault"
-    )[0].exports;
-
-    module.exports = {
-      ...Components,
-      MarkdownParser,
-      LegacyText,
-      Flex,
-      CardClasses,
-      ControlClasses
-    };
-  }
-};

packages/core-extensions/src/common/index.ts

···
 import { flux } from "./flux";
 import { stores } from "./stores";
 import { http } from "./http";
-import { components } from "./components";
 import { fluxDispatcher } from "./fluxDispatcher";
 
 export const webpackModules: ExtensionWebExports["webpackModules"] = {
+  components: {
+    dependencies: [
+      { ext: "spacepack", id: "spacepack" },
+      "MasonryList:",
+      ".flexGutterSmall,"
+    ]
+  },
+
   react,
   flux,
   stores,
   http,
-  components,
   fluxDispatcher
 };

packages/core-extensions/src/common/webpackModules/components.ts

···
+import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
+
+const Components = spacepack.findByCode("MasonryList:function")[0].exports;
+const MarkdownParser = spacepack.findByCode(
+  "parseAutoModerationSystemMessage:"
+)[0].exports.default;
+const LegacyText = spacepack.findByCode(".selectable", ".colorStandard")[0]
+  .exports.default;
+const Flex = spacepack.findByCode(".flex" + "GutterSmall,")[0].exports.default;
+const CardClasses = spacepack.findByCode("card", "cardHeader", "inModal")[0]
+  .exports;
+const ControlClasses = spacepack.findByCode(
+  "title",
+  "titleDefault",
+  "dividerDefault"
+)[0].exports;
+
+// We use CJS export here because merging the exports from Components is annoying as shit
+module.exports = {
+  ...Components,
+  MarkdownParser,
+  LegacyText,
+  Flex,
+  CardClasses,
+  ControlClasses
+};

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

···
 const logger = moonlight.getLogger("spacepack");
 
 export const spacepack: Spacepack = {
-  require,
+  require: webpackRequire,
   modules,
   cache,
 

packages/types/package.json

···
   "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
+    "./import": "./src/import.d.ts",
     "./*": "./src/*.ts"
   },
   "dependencies": {

packages/types/src/coreExtensions.ts

···
 import { FluxDefault, Store } from "./discord/common/Flux";
-import WebpackRequire from "./discord/require";
-import { WebpackModuleFunc } from "./discord/webpack";
 import { CommonComponents as CommonComponents_ } from "./coreExtensions/components";
 import { Dispatcher } from "flux";
 import React from "react";
+import { WebpackModuleFunc } from "./discord";
+import WebpackRequire from "./discord/require";
 
 export type Spacepack = {
   inspect: (module: number | string) => WebpackModuleFunc | null;

packages/types/src/import.d.ts

···
+declare module "@moonlight-mod/wp/spacepack_spacepack" {
+  import { Spacepack } from "@moonlight-mod/types/coreExtensions";
+  export const spacepack: Spacepack;
+  export default spacepack;
+}

packages/types/src/index.ts

···
 /// <reference types="standalone-electron-types" />
 /// <reference types="react" />
 /// <reference types="flux" />
+/// <reference types="./import" />
 /* eslint-disable no-var */
 
 import {

packages/types/tsconfig.json

···
     "jsx": "react",
     "declaration": true
   },
-  "include": ["./src/**/*", "src/index.ts"]
+  "include": ["./src/**/*", "src/index.ts", "./src/import.d.ts"]
 }