Initial commit

Author: NotNite

Diff for: .github/workflows_/deploy.yml

@@ -0,0 +1,30 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build website
+        run: pnpm run build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build
+          user_name: github-actions[bot]
+          user_email: 41898282+github-actions[bot]@users.noreply.github.com

Diff for: .gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Diff for: .prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 80,
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "singleQuote": false
+}

Diff for: README.md

@@ -0,0 +1,3 @@
+# moonlight-mod.github.io
+
+The official website and documentation for [moonlight](https://github.com/moonlight-mod/moonlight).

Diff for: babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")]
+};

Diff for: docs/dev/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "moonlight developers",
+  "position": 3
+}

Diff for: docs/dev/setup.md

@@ -0,0 +1,33 @@
+# Project setup
+
+## Building from source
+
+You will need [pnpm](https://pnpm.io), as moonlight uses it for dependency and workspace management.
+
+- Clone the repository.
+- Install dependencies with `pnpm i`.
+- Build the project with `pnpm run build`.
+  - For working on moonlight, a watch mode is available with `pnpm run dev`.
+
+## Project structure
+
+moonlight is split into a [pnpm workspace](https://pnpm.io/workspaces). The project is comprised of multiple packages:
+
+- `core`: core code and utilities responsible for loading extensions
+- `injector`: the entrypoint for moonlight loaded by the patched Discord client
+  - loads the config and detected extensions from disk and forwards them to the other stages
+  - loads host modules
+  - sets up `node-preload` to be ran when the browser window is created
+- `node-preload`: ran before Discord's code on the Node side
+  - receives the config/detected extensions from `injector` and forwards it to `web-preload`
+  - loads node modules
+  - loads `web-preload` and forwards some inforation to it
+- `web-preload`: ran before Discord's code on the web side
+  - receives the loaded config and detected extensions from `node-preload`
+  - loads extensions and installs their Webpack modules and patches
+- `core-extensions`: built-in extensions that come with every moonlight install, mostly libraries
+- `types`: types for moonlight's core, core extensions, and plugin manifests/exports
+
+## Build system
+
+moonlight uses [esbuild](https://esbuild.github.io) as its build system (`build.mjs`). This script is responsible for outputting `injector`, `node-preload`, and `web-preload` into `dist`, along with all core extensions.

Diff for: docs/ext-dev/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Extension developers",
+  "position": 2
+}

Diff for: docs/ext-dev/getting-started.md

@@ -0,0 +1,12 @@
+# Getting started
+
+## Sample extension
+
+A sample extension is provided to start development quickly:
+
+- Pre-configured build system (esbuild)
+- TypeScript support
+- Both web and Node.js entrypoints
+- Example patch & Webpack modules
+
+You can view it [here](https://github.com/moonlight-mod/sample-extension).

Diff for: docs/ext-dev/helpful-exts.md

@@ -0,0 +1,36 @@
+# Helpful extensions
+
+This is a list of helpful extensions that can be used to aid extension development.
+
+## Config options
+
+These aren't extensions, but rather options in the moonlight config:
+
+- `devSearchPaths`: An array of directories to recursively search for built extensions (`manifest.json`).
+  - When developing extensions, use the `dist` folder instead of the root folder. This is because the `manifest.json` resides in the root of the source code, but does not have the built files, which wastes time resolving files that will never exist.
+- `loggerLevel`: The level to log at. If not set, defaults to `info`.
+- `patchAll`: Set to `true` to wrap every Webpack module in a function. This slows down client starts significantly, but can make debugging easier.
+
+## Common
+
+Common exposes multiple Webpack modules useful for development:
+
+- `common_react`: Discord's version of React (required to be in scope for JSX)
+- `common_flux`: Discord's version of Flux
+- `common_stores`: A proxy around Discord's Flux stores
+  - Access stores as properties, e.g. `require("common_stores").UserStore`
+- `common_http`: A small HTTP client
+
+## Disable Sentry & No Track
+
+Both of these extensions do not provide any utilities, but prevent your client from sending metrics to Discord, which lessens the risk of moonlight related errors being reported. These should always be enabled. These are not magical tools to prevent account suspension, and you should always consider safety when writing an extension (especially one that makes requests automatically).
+
+## Spacepack
+
+Spacepack allows you to find and inspect Webpack modules. The "Add to global scope" setting is suggested, so you can use Spacepack from within DevTools.
+
+- `require`: Standard Webpack require.
+- `inspect`: Fetch a Webpack module by its ID and return an isolated copy of it, which can be double-clicked in DevTools to inspect the source code.
+- `findByCode`, `findByExports`: Returns an array of Webpack modules that has code/exports that match the arguments.
+- `findObjectFromKey`, `findObjectFromValue`, `findObjectFromKeyValuePair`, `findFunctionByStrings`: Search the exports of a Webpack module to find an object or function using the given arguments.
+- `modules`, `cache`: The Webpack modules and cache objects.

Diff for: docs/ext-dev/pitfalls.md

@@ -0,0 +1,76 @@
+# Pitfalls
+
+## Web vs Node.js
+
+Because of the Electron process model, extensions have two entrypoints: one on the web side (where the actual Discord app runs) and one on the Node.js side (where DiscordNative and such live).
+
+Native Node.js modules *can* be used in an extension, but they cannot be imported from the web side. Instead, write a wrapper around them in your Node.js entrypoint, and call them from the web side:
+
+```ts title="node.ts"
+module.exports.doSomething = () => {
+  console.log("Doing something...");
+};
+```
+
+```ts title="index.ts"
+const natives = moonlight.getNatives("your extension ID");
+natives.doSomething();
+```
+
+## Webpack require is not Node.js require
+
+The `require` function used in Webpack modules and patches is not the same as the function in Node.js. Instead, it lets you require other Webpack modules.
+
+If you have a Webpack module you want to load, you can `require` it by its ID. Extension Webpack modules take the form of `${ext.id}_${webpackModule.name}` (e.g. `spacepack_spacepack` or `common_react`).
+
+## Spacepack findByCode matching itself
+
+When using the `findByCode` function in Spacepack while inside of a Webpack module, you can sometimes accidentally match yourself. This can be solved in two ways.
+
+The first option is to bring it out of the Webpack module source, but still in code:
+
+```ts
+const findReact = [
+  "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
+  /\.?version(?:=|:)/,
+  /\.?createElement(?:=|:)/
+];
+
+export const webpackModules: Record<string, ExtensionWebpackModule> = {
+  myWebpackModule: {
+    dependencies: [{ ext: "spacepack", id: "spacepack" }],
+    run: (module, exports, require) => {
+      const spacepack = require("spacepack_spacepack");
+      const React = spacepack.findByCode(...findReact)[0].exports;
+    }
+  }
+};
+```
+
+The second option is to split a string in half and concatenante it, such that the string is fragmented in source but will evaluate to the same string:
+
+```ts
+const spacepack = require("spacepack_spacepack");
+const React = spacepack.findByCode([
+  "__SECRET_INTERNALS_DO_NOT" + "_USE_OR_YOU_WILL_BE_FIRED",
+  /\.?version(?:=|:)/,
+  /\.?createElement(?:=|:)/
+])[0].exports;
+```
+
+## Using JSX
+
+[JSX](https://react.dev/learn/writing-markup-with-jsx) (and its TypeScript version, TSX) is an extension of JavaScript that allows you to write HTML-like syntax in your code. The default configuration of the sample extension is to convert the JSX to `React.createElement` calls:
+
+```tsx
+const myElement = <span>Hi!</span>;
+// becomes
+const myElement = React.createElement("span", null, "Hi!");
+```
+
+Because of this, you need to make sure the React variable is in scope. The easiest way to do this is to use the Common core extension:
+
+```tsx
+const React = require("common_react");
+const myElement = <span>Hi!</span>;
+```

Diff for: docs/ext-dev/webpack.md

@@ -0,0 +1,125 @@
+# Webpack modules & patching
+
+[Webpack](https://webpack.js.org) is a library used by Discord to turn their codebase into a bundled JavaScript file. Code gets converted into Webpack "modules", which are individual functions that can require and load each other. You can think of them as individual files, each with their own code and exports, but converted into single functions inside of the client.
+
+## Patching
+
+Patching is the process of altering the code of Webpack modules. Each module is [minified](https://en.wikipedia.org/wiki/Minification_(programming)), which means that its source has no whitespace and variable names are often short. Patching allows extensions to find and replace snippets of minified code.
+
+To create a patch, export them from your extension's web entrypoint:
+
+```ts
+import { Patch } from "@moonlight-mod/types";
+
+export const patches: Patch[] = [
+  {
+    find: "...",
+    replace: {
+      match: "...",
+      replacement: "..."
+    }
+  }
+];
+```
+
+A patch consists of three parts:
+
+- `find` dictates what Webpack module we want to patch. It is matched against the code of all Webpack modules, and once the match is found, it patches that module. Because of this, the match must be specific to a single module.
+- `match` is used to find the piece of code we want to patch inside of the target Webpack module. The area of code that is matched is replaced with the `replacement`.
+- `replacement` is the code that replaces the matched code.
+
+`find` and `match` can both be regular expressions, and `replacement` can either be a string or a function that returns a string.
+
+You can also set the `type` field in `replace` to `PatchReplaceType.Module`, in which case the `replacement` will be used as the entire module's code. This completely overrides it, breaking other extensions that patch the same module, so use it wisely.
+
+When `match` is a regex and `replacement` is a function, it will be passed the groups matched in the regex. This is useful for capturing and reusing the minified variable names.
+
+### Examples
+
+#### Using a regex for a match
+
+```ts
+// From Disable Sentry
+export const patches: Patch[] = [
+  {
+    find: "window.DiscordErrors=",
+    replace: {
+      type: PatchReplaceType.Normal,
+      match: /uses_client_mods:\(0,.\..\)\(\)/,
+      replacement: "uses_client_mods:false"
+    }
+  }
+];
+```
+
+### Using a function as a replacement
+
+```ts
+// From Settings
+export const patches: Patch[] = [
+  {
+    find: 'navId:"user-settings-cog",',
+    replace: {
+      match: /children:\[(.)\.map\(.+?\),{children:.\((.)\)/,
+      // `orig` is the entire string, and the following args are each group
+      replacement: (orig, sections, section) =>
+        `${orig}??${sections}.find(x=>x.section==${section})?._moonlight_submenu?.()`
+    }
+  }
+];
+```
+
+#### Replacing an entire module
+
+```ts
+// From Disable Sentry
+export const patches: Patch[] = [
+  {
+    find: "window.DiscordSentry=",
+    replace: {
+      type: PatchReplaceType.Module,
+      replacement: () => () => {
+        // no-op
+      }
+    }
+  }
+];
+```
+
+## Webpack module insertion
+
+Similar to patching, extensions can also insert their own Webpack modules. These can be required like normal modules (which means they can be used inside of patches and other extensions).
+
+To create a Webpack module, export them from your extension's web entrypoint:
+
+```ts
+export const webpackModules: Record<string, ExtensionWebpackModule> = {
+  moduleName: {
+    entrypoint: true,
+    run: (module, exports, require) => {
+      console.log("Hello, world!");
+
+      // You can export your own data from a Webpack module for use in other places.
+      module.exports = "Hello from someLibrary's exports!";
+    }
+  }
+};
+```
+
+Specify `entrypoint` to run on startup. If you need to run after a certain Webpack module, or use another module as a library, specify `dependencies`:
+
+```ts
+export const webpackModules: Record<string, ExtensionWebpackModule> = {
+  moduleName: {
+    dependencies: [
+      { ext: "common", id: "stores" }
+    ],
+    entrypoint: true,
+    run: (module, exports, require) => {
+      const UserStore = require("common_stores").UserStore;
+    }
+  }
+};
+```
+
+You can then require this module using the format `${ext.id}_${webpackModule.name}` (e.g. the `react` Webpack module in the `common` extension has the ID `common_react`).

Diff for: docs/using/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Using moonlight",
+  "position": 1
+}

Diff for: docs/using/install.md

@@ -0,0 +1,30 @@
+# Installation
+
+moonlight in its current stage does not have any installer, but you can install it manually.
+
+- [Build moonlight](/docs/dev/setup).
+- Go to your Discord install's `resources` folder.
+- Rename the `app.asar` to `_app.asar`, and create an `app` folder. Discord will load the folder instead of the `.asar` now that it has been renamed.
+- Create the following files:
+
+> `resources/app/package.json`:
+>
+> ```json
+> {
+>   "name": "discord",
+>   "main": "./injector.js",
+>   "private": true
+> }
+> ```
+>
+> `resources/app/injector.js`:
+>
+> ```js
+> require("/path/to/moonlight/dist/injector").inject(
+>   require.resolve("../_app.asar")
+> );
+> ```
+
+Adjust the `/path/to/moonlight/dist` to point to the `dist` folder in your locally cloned moonlight install.
+
+After first launch, moonlight will create a config directory in the Electron `appData` path named `moonlight-mod`. Each Discord branch has its own `.json` file for configuration.