Merge pull request #2 from moonlight-mod/webpack-modules

Newly structured Webpack modules

build.mjs

@@ -73,16 +73,41 @@ async function build(name, entry) {
 }
 
 async function buildExt(ext, side, copyManifest, fileExt) {
-  const outDir = path.join("./dist", "core-extensions", ext);
-  if (!fs.existsSync(outDir)) {
-    fs.mkdirSync(outDir, { recursive: true });
+  const outdir = path.join("./dist", "core-extensions", ext);
+  if (!fs.existsSync(outdir)) {
+    fs.mkdirSync(outdir, { recursive: true });
   }
 
-  const entryPoint = `packages/core-extensions/src/${ext}/${side}.${fileExt}`;
+  const entryPoints = [
+    `packages/core-extensions/src/${ext}/${side}.${fileExt}`
+  ];
+
+  const wpModulesDir = `packages/core-extensions/src/${ext}/webpackModules`;
+  if (fs.existsSync(wpModulesDir)) {
+    const wpModules = fs.readdirSync(wpModulesDir);
+    for (const wpModule of wpModules) {
+      entryPoints.push(
+        `packages/core-extensions/src/${ext}/webpackModules/${wpModule}`
+      );
+    }
+  }
+
+  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: [entryPoint],
-    outfile: path.join(outDir, side + ".js"),
+    entryPoints,
+    outdir,
 
     format: "cjs",
     platform: "node",
@@ -98,9 +123,14 @@ async function buildExt(ext, side, copyManifest, fileExt) {
           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

@@ -1 +1 @@
-/// <reference types="./packages/types/src/index.d.ts" />
+/// <reference types="./packages/types/src/index" />

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

@@ -1,17 +1,39 @@
 import { ExtensionWebExports } from "@moonlight-mod/types";
 
-import { react } from "./react";
-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"] = {
-  react,
-  flux,
-  stores,
-  http,
-  components,
-  fluxDispatcher
+  components: {
+    dependencies: [
+      { ext: "spacepack", id: "spacepack" },
+      "MasonryList:",
+      ".flexGutterSmall,"
+    ]
+  },
+
+  flux: {
+    dependencies: [
+      { ext: "spacepack", id: "spacepack" },
+      "useStateFromStores:function"
+    ]
+  },
+
+  fluxDispatcher: {
+    dependencies: [
+      { ext: "spacepack", id: "spacepack" },
+      "isDispatching",
+      "dispatch"
+    ]
+  },
+
+  react: {
+    dependencies: [
+      { ext: "spacepack", id: "spacepack" },
+      "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
+      /\.?version(?:=|:)/,
+      /\.?createElement(?:=|:)/
+    ]
+  },
+
+  stores: {
+    dependencies: [{ ext: "common", id: "flux" }]
+  }
 };

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

@@ -0,0 +1,26 @@
+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/common/webpackModules/flux.ts

@@ -0,0 +1,5 @@
+import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
+
+module.exports = spacepack.findByCode(
+  ["useStateFromStores", ":function"].join("")
+)[0].exports;

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

@@ -0,0 +1,6 @@
+import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
+
+module.exports = spacepack.findByExports(
+  "isDispatching",
+  "dispatch"
+)[0].exports.default;

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

@@ -0,0 +1,7 @@
+import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
+
+module.exports = spacepack.findByCode(
+  "__SECRET_INTERNALS_DO_NOT_USE" + "_OR_YOU_WILL_BE_FIRED",
+  /\.?version(?:=|:)/,
+  /\.?createElement(?:=|:)/
+)[0].exports;

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

@@ -0,0 +1,23 @@
+import Flux from "@moonlight-mod/wp/common_flux";
+
+module.exports = new Proxy(
+  {},
+  {
+    get: function (target, key, receiver) {
+      const allStores = Flux.Store.getAll();
+
+      let targetStore;
+      for (const store of allStores) {
+        const name = store.getName();
+        if (name.length === 1) continue; // filter out unnamed stores
+
+        if (name === key) {
+          targetStore = store;
+          break;
+        }
+      }
+
+      return targetStore;
+    }
+  }
+);

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

@@ -7,7 +7,8 @@ export const patches: Patch[] = [
     replace: {
       type: PatchReplaceType.Normal,
       match: /default:function\(\){return .}/,
-      replacement: 'default:function(){return require("disableSentry_stub")()}'
+      replacement:
+        'default:function(){return require("disableSentry_stub").proxy()}'
     }
   },
   {
@@ -38,41 +39,5 @@ export const patches: Patch[] = [
 ];
 
 export const webpackModules: ExtensionWebExports["webpackModules"] = {
-  stub: {
-    run: function (module, exports, require) {
-      const logger = moonlight.getLogger("disableSentry");
-
-      const keys = [
-        "setUser",
-        "clearUser",
-        "setTags",
-        "setExtra",
-        "captureException",
-        "captureCrash",
-        "captureMessage",
-        "addBreadcrumb"
-      ];
-
-      module.exports = () =>
-        new Proxy(
-          {},
-          {
-            get(target, prop, receiver) {
-              if (prop === "profiledRootComponent") {
-                return (arg: any) => arg;
-              } else if (prop === "crash") {
-                return () => {
-                  throw Error("crash");
-                };
-              } else if (keys.includes(prop.toString())) {
-                return (...args: any[]) =>
-                  logger.debug(`Sentry calling "${prop.toString()}":`, ...args);
-              } else {
-                return undefined;
-              }
-            }
-          }
-        );
-    }
-  }
+  stub: {}
 };