More general docs cleanup

Author: NotNite

src/content/docs/dev/setup.md

@@ -10,7 +10,7 @@ moonlight requires [Node.js](https://nodejs.org) 22 and [pnpm](https://pnpm.io)
 - Clone the repository: `git clone https://github.com/moonlight-mod/moonlight.git`
 - Install dependencies: `pnpm install`.
 - Build the project: `pnpm run build`.
-  - For working on moonlight, a watch mode is available with `pnpm run dev`.
+  - For working on moonlight, a watch mode is available with `pnpm run dev`. Remember that you must [restart the command in some scenarios](/ext-dev/pitfalls#restarting-dev-mode-is-required-in-some-scenarios).
 
 For more information on project structure, [see the dedicated page](/dev/project-structure).
 

src/content/docs/ext-dev/api.md

@@ -21,7 +21,11 @@ The global types are available [here](https://github.com/moonlight-mod/moonlight
 
 ## Extension libraries
 
-These libraries are built into moonlight as [core extensions](/dev/core-extensions). Remember to [add the extension dependency](/ext-dev/cookbook#using-another-extension-as-a-library) and [add the module dependency](/ext-dev/webpack#webpack-module-dependencies) before using these libraries.
+These libraries are built into moonlight as [core extensions](/dev/core-extensions). See [here](/ext-dev/webpack#importing-other-webpack-modules) for an example on using them.
+
+:::caution
+Remember to add the modules you use as a dependency for your [extension](/ext-dev/manifest/#dependencies) and [module](/ext-dev/webpack#webpack-module-dependencies).
+:::
 
 ### App Panels
 

src/content/docs/ext-dev/cookbook.md

@@ -5,92 +5,50 @@ sidebar:
   order: 3
 ---
 
-## Exporting from your extension
-
-On the web target (`index.ts`), you can export patches, Webpack modules, and styles:
-
-```ts
-import type { ExtensionWebExports } from "@moonlight-mod/types";
-
-export const patches: ExtensionWebExports["patches"] = [];
-export const webpackModules: ExtensionWebExports["webpackModules"] = {};
-export const styles: ExtensionWebExports["styles"] = [];
-```
-
-All exports are optional.
-
 ## Extension entrypoints
 
-Extensions can load in three different environments:
-
-- In the browser (the "web" environment where Discord lives): `index.ts` & Webpack modules
-- On the Node.js side, where DiscordNative and such live: `node.ts`
-- On the host, with little sandboxing and access to Electron APIs: `host.ts`
-
-These map to the renderer, preload script, and main process in Electron terminology. The term "browser" is used to refer to the moonlight browser extension, while "web" refers to both the desktop and browser platforms.
+Some extensions need to go beyond the scope of the Discord web application and interact with the native parts of the client. To help with this, extensions can load in one or more environments:
 
-Most extensions only need to run code in the browser. Use the Node environment if you need access to system APIs, like the filesystem or creating processes. Use the Host environment if you need to use the Electron API.
+- The "web" environment (the browser where the web app runs): `index.ts` & Webpack modules
+- The "Node" environment (where DiscordNative runs, with access to Node.js APIs): `node.ts`
+- The "host" environment (with little sandboxing and access to Electron APIs): `host.ts`
 
-Remember that [you cannot directly import Node.js modules](/ext-dev/pitfalls#web-vs-nodejs), and should [share code with `moonlight.getNatives`](#sharing-code-between-nodejs-and-the-web).
+These map to the renderer, preload script, and main process in Electron terminology. In moonlight internals, the term "browser" is used to refer to the moonlight browser extension, while "web" refers to the web application that runs on the desktop app and browser site.
 
-## Sharing code between Node.js and the web
+Most extensions only run in the web environment, where the majority of the Discord client code executes in. However, extensions can run in the other environments for access to extra APIs when needed. Use system APIs as little as possible, and be mindful about [security concerns](https://www.electronjs.org/docs/latest/tutorial/context-isolation#security-considerations).
 
-Make a `node.ts` file:
+Extensions can export APIs from the Node environment and import them from the web environment using `moonlight.getNatives`:
 
 ```ts title="node.ts"
-module.exports.doSomething = () => {
-  console.log("Doing something...");
-};
+export function doSomething() {
+  // insert some Node.js-specific code here
+}
 ```
 
-Then, use it from your extension:
-
-```ts title="index.ts"
+```ts title="webpackModules/something.ts"
 const natives = moonlight.getNatives("your extension ID");
-// natives will be null if using moonlight in the browser
-natives?.doSomething();
+natives.doSomething();
 ```
 
-Remember to [restart the dev server](/ext-dev/pitfalls#restarting-dev-mode-is-required-in-some-scenarios).
+Remember to [restart the dev server](/ext-dev/pitfalls#restarting-dev-mode-is-required-in-some-scenarios) after creating `node.ts`, and that [you cannot directly import node.ts](/ext-dev/pitfalls#web-vs-nodejs).
 
-## Using another extension as a library
-
-Mark the extension as a dependency of your extension:
-
-```json title="manifest.json"
-{
-  "dependencies": ["markdown"]
-}
-```
-
-Mark the Webpack module as a dependency of your own Webpack module:
-
-```ts title="index.ts"
-export const webpackModules: ExtensionWebExports["webpackModules"] = {
-  someModule: {
-    dependencies: [
-      {
-        ext: "markdown",
-        id: "markdown"
-      }
-    ]
-  }
-};
-```
+## Exporting from your extension
 
-Then, import the Webpack module:
+On the web target (`index.ts`), you can export [patches](/ext-dev/webpack#patching), [Webpack modules](/ext-dev/webpack#webpack-module-insertion), and CSS styles:
 
-```ts title="webpackModules/someModule.ts"
-import * as markdown from "@moonlight-mod/wp/markdown_markdown";
+```ts
+import type { ExtensionWebExports } from "@moonlight-mod/types";
 
-markdown.addRule(/* ... */);
+export const patches: ExtensionWebExports["patches"] = [];
+export const webpackModules: ExtensionWebExports["webpackModules"] = {};
+export const styles: ExtensionWebExports["styles"] = [];
 ```
 
-Remember to [restart the dev server](/ext-dev/pitfalls#restarting-dev-mode-is-required-in-some-scenarios).
+All exports are optional. If you aren't exporting anything from this file (e.g. your extension works entirely on the Node or host environments), you can delete `index.ts`.
 
-## Making a custom React component
+## Using React
 
-Mark React as a dependency of your own Webpack module:
+Create a [Webpack module](/ext-dev/webpack#webpack-module-insertion) with a `.tsx` file extension, then mark React as a [module dependency](/ext-dev/webpack#webpack-module-dependencies):
 
 ```ts title="index.ts"
 export const webpackModules: ExtensionWebExports["webpackModules"] = {
@@ -104,7 +62,7 @@ export const webpackModules: ExtensionWebExports["webpackModules"] = {
 };
 ```
 
-Then, import React from [mappings](/ext-dev/mappings):
+In the module, import React from [mappings](/ext-dev/mappings):
 
 ```tsx title="webpackModules/element.tsx"
 import React from "@moonlight-mod/wp/react";
@@ -114,18 +72,17 @@ export default function MyElement() {
 }
 ```
 
-React [must be imported when using JSX](/ext-dev/pitfalls#using-jsx).
+You can use this React component in a [patch](/ext-dev/webpack#patching) or through an [extension library](/ext-dev/api#app-panels). React must be imported into the scope [when using JSX](/ext-dev/pitfalls#using-jsx).
 
-## Using Spacepack to find code dynamically
+## Using Flux
 
-```ts
-import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
-const { something } = spacepack.findByCode(/* ... */)[0].exports;
-```
+Discord internally maintains a heavily-modified fork of [Flux](https://github.com/facebookarchive/flux). Various state and events in the client are managed with Flux.
 
-Remember to add your find to [your extension dependencies](/ext-dev/webpack#webpack-module-insertion) and [declare Spacepack as a dependency](#using-another-extension-as-a-library).
+### Interacting with Flux events
 
-## Interacting with Flux events
+Flux events contain a type (e.g. `MESSAGE_CREATE`) and their associated data. They function similarly to [the Discord gateway](https://discord.com/developers/docs/events/gateway) (and some gateway events have Flux equivalents), but they are two separate concepts, and there are client-specific Flux events.
+
+To interact with Flux events, mark `discord/Dispatcher` as a [module dependency](/ext-dev/webpack#webpack-module-dependencies), then import it from [mappings](/ext-dev/mappings) in your Webpack module:
 
 ```ts
 import Dispatcher from "@moonlight-mod/wp/discord/Dispatcher";
@@ -138,21 +95,47 @@ Dispatcher.subscribe("MESSAGE_CREATE", (event: any) => {
 // Block all events (don't actually do this)
 Dispatcher.addInterceptor((event) => {
   console.log(event.type);
-  return true;
+  return true; // return `true` to block, `false` to pass through
 });
 ```
 
-## Interacting with Flux stores
+### Interacting with Flux stores
+
+Flux stores contain application state and dispatch/receive events. Most Flux stores use the same central Flux dispatcher (`discord/Dispatcher`).
+
+To interact with Flux stores, use the [Common](/ext-dev/api#common) extension library by adding it as a dependency to your [extension](/ext-dev/manifest#dependencies) and [module](/ext-dev/webpack#webpack-module-dependencies):
 
 ```ts
 import { UserStore } from "@moonlight-mod/wp/common_stores";
 
 console.log(UserStore.getCurrentUser());
 ```
 
-## Modifying message content before it is sent
+Flux stores can be used in React components with [the `useStateFromStores` hook](https://github.com/moonlight-mod/mappings/blob/main/src/mappings/discord/packages/flux/useStateFromStores.ts).
+
+## Using slash commands
 
-Remember to add `commands` to your manifest's dependencies and `{ext: "commands", id: "commands"}` to your Webpack module's dependencies.
+Slash commands can be registered with the [Commands](/ext-dev/api#commands) extension library. Remember to add the Commands extension as a [extension](/ext-dev/manifest#dependencies) and [module](/ext-dev/webpack#webpack-module-dependencies) dependency.
+
+```ts
+import Commands from "@moonlight-mod/wp/commands_commands";
+import { InputType, CommandType } from "@moonlight-mod/types/coreExtensions/commands";
+
+Commands.registerCommand({
+  id: "myCoolCommand",
+  description: "(insert witty example description here)",
+  inputType: InputType.BUILT_IN,
+  type: CommandType.CHAT,
+  options: [],
+  execute: () => {
+    // do something here
+  }
+});
+```
+
+### Modifying message content before it is sent
+
+The legacy command system can also be used to replace text in messages before they are sent.
 
 ```ts
 import Commands from "@moonlight-mod/wp/commands_commands";
@@ -164,9 +147,8 @@ Commands.registerLegacyCommand("unique-id", {
   // something based on a specific string.
   match: /.*/,
   action: (content, context) => {
-    // Modify the content
-
-    return {content};
+    // modify the content here
+    return { content };
   }
 })
 ```

src/content/docs/ext-dev/getting-started.md

@@ -5,6 +5,10 @@ sidebar:
   order: 1
 ---
 
+:::note
+This page is for developers who want to make their own extensions. If you're looking for documentation on using moonlight itself, see [here](/using/getting-started).
+:::
+
 ## Requirements
 
 - [Node.js](https://nodejs.org) 22 or later
@@ -86,7 +90,7 @@ Right now, your extension doesn't do much. Let's go over what each file does:
 - In `index.ts`, your extension exports its [patches](/ext-dev/webpack#patching) and [Webpack modules](/ext-dev/webpack#webpack-module-insertion). Make sure to export every patch and Webpack module you create, or else moonlight won't load them.
 - If you open the Discord settings menu, you should see the "User Settings" section has been renamed to "hacked by (your extension ID) lol". This was edited by the patch in `index.ts`, which modifies Discord to insert and replace custom code.
 - In the `webpackModules` folder, there are multiple Webpack modules, which is where most of your extension's code lives. Right now, all they do is log to the console.
-- In `node.ts`, your extension runs [in the Node environment](/ext-dev/cookbook/#extension-entrypoints), where you can access the filesystem or spawn extra processes. Most extensions don't need to use this, though.
+- In `node.ts`, your extension runs [in the Node environment](/ext-dev/cookbook#extension-entrypoints), where you can access the filesystem or spawn extra processes. Most extensions don't need to use this, though.
 - In `env.d.ts` (at the root of the repository), your extension's Webpack module is declared to let you import it directly. Make sure to update this file when you add or remove Webpack modules, but don't delete it entirely.
 
 We suggest keeping these examples around for experimentation, but you should delete what you aren't using before you publish your extension. Most extensions don't use `node.ts`, for example.
@@ -96,7 +100,7 @@ We suggest keeping these examples around for experimentation, but you should del
 Run `pnpm run dev` to enter watch mode. When you make changes to your extension, the extension will automatically be rebuilt, and you can reload your client (`Ctrl+R`) to load the new version of your extension.
 
 :::note
-Watch mode will need to be restarted if you edit the extension manifest, add/remove an entrypoint, or add/remove a Webpack module. If you delete an extension, entrypoint, or Webpack module, you should run `pnpm run clean` to clean up the remaining build output.
+Watch mode will need to be restarted when making certain changes or adding/removing new entrypoints. See [here](/ext-dev/pitfalls#restarting-dev-mode-is-required-in-some-scenarios) for more information.
 :::
 
 Try changing one of the logger messages, or maybe edit the example patch. Play around a bit and see what happens!

src/content/docs/ext-dev/helpful-exts.md

@@ -1,6 +1,6 @@
 ---
 title: Helpful extensions
-description: This is a list of helpful extensions that can be used to aid extension development.
+description: Helpful extensions that can be used to aid extension development
 sidebar:
   order: 5
 ---

src/content/docs/ext-dev/manifest.md

@@ -54,6 +54,20 @@ This is an example manifest, with every value filled in:
 }
 ```
 
+## Dependencies
+
+Some extensions depend on other extensions to function, like using an extension as a library. Your extension should always declare the extensions it depends on in its manifest:
+
+```json title="manifest.json"
+{
+  "dependencies": ["markdown"]
+}
+```
+
+Additionally, when using Webpack modules from other extensions, you must [declare a dependency for your module](/ext-dev/webpack#webpack-module-dependencies) too.
+
+moonlight will implicitly enable the extensions that your extension depends on. For extensions that aren't locally present (e.g. libraries present on an extension repository), Moonbase will prompt the user to install the required dependencies.
+
 ## Settings
 
 There are many settings types that you can use to configure your extension in Moonbase. The types for these are available [here](https://github.com/moonlight-mod/moonlight/blob/main/packages/types/src/config.ts).

src/content/docs/ext-dev/mappings.md

@@ -30,10 +30,12 @@ import Dispatcher from "@moonlight-mod/wp/discord/Dispatcher";
 const Dispatcher = require("discord/Dispatcher").default;
 ```
 
-Remember to [add the module as a dependency](/ext-dev/webpack#webpack-module-dependencies) to your Webpack module.
+Remember to [add the module as a dependency](/ext-dev/webpack#webpack-module-dependencies) to your Webpack module. Unlike extension libraries, mappings are built into moonlight, and do not need to be added to your extension's manifest.
 
 ## Mappings stability
 
 The mappings repository only proxies existing Discord modules and exports. As such, if Discord removes a module or export, or a module is not properly remapped, the mapping will fail and your extension may break.
 
-You should structure your code with the expectation that imported modules or exports may randomly fail. Use the [ErrorBoundary](/ext-dev/api#common) component provided by moonlight to safely catch errors in your UI code.
+Exports and types in the mappings repository may change or be removed if Discord removes it from their own source code. In this scenario, moonlight developers are forced to remove the mapping, and we do not have the ability to bring a module back.
+
+See [here](/ext-dev/webpack#discord-module-stability) for more information on module stability.

src/content/docs/ext-dev/pitfalls.md

@@ -7,22 +7,24 @@ sidebar:
 
 ## Web vs Node.js
 
-Node.js code cannot be imported directly from the web side. You must use `moonlight.getNatives`. See [the cookbook](/ext-dev/cookbook#sharing-code-between-nodejs-and-the-web) for how to access Node.js exports.
+Node.js code cannot be imported directly from the web environment. To share code between the two environments, use `moonlight.getNatives`. See [the cookbook](/ext-dev/cookbook#extension-entrypoints) for more information.
 
 ## 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 by their IDs.
-
-If you have a Webpack module you want to load, [you can require it by its ID](/ext-dev/webpack#importing-other-webpack-modules).
+The `require` function used in Webpack modules and patches is not the same as the function in Node.js. Instead, it's specific to Webpack, and only works inside of Webpack modules. See [here](/ext-dev/webpack#importing-other-webpack-modules) for more information.
 
 ## The web entrypoint is not a Webpack module
 
-You cannot use Webpack modules inside of `index.ts`, because it is loaded before Webpack is initialized. Instead, [create your own Webpack module](/ext-dev/webpack#webpack-module-insertion) and use that.
+You cannot use Webpack modules inside of `index.ts`, because it is loaded before Webpack is initialized. Instead, [create your own Webpack module](/ext-dev/webpack#webpack-module-insertion) and use that instead.
 
 ## Webpack modules only load when required
 
 By default, Webpack modules will not load unless they are required by another module or the `entrypoint` flag is set. If you need a module to run as soon as possible, [set the entrypoint flag](/ext-dev/webpack#webpack-module-insertion).
 
+## Using ESM features
+
+ESM-specific features (like top-level `await`) are not supported in Webpack modules or the Node or Host environments. The `index.ts` file in your extension (and *only* that file) can be compiled to ESM by [modifying your build script](https://github.com/moonlight-mod/esbuild-config/blob/8e91f1db1773380bc140c9ca3e140c30ecf5bcc3/src/factory.ts#L75).
+
 ## Spacepack findByCode matching itself
 
 When using the `findByCode` function in Spacepack while inside of a Webpack module, you can sometimes accidentally match yourself. It is suggested to fragment the string in source but have it evaluate to the same string:
@@ -35,7 +37,7 @@ Note that esbuild will merge string concatenation, so you must be creative!
 
 ## 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 build script is to convert the JSX to `React.createElement` calls:
+[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. [Webpack modules](/ext-dev/webpack#webpack-module-insertion) with a `.tsx` filename can use JSX directly. The default configuration of the build script is to convert the JSX to `React.createElement` calls:
 
 ```tsx
 const myElement = <span>Hi!</span>;
@@ -50,7 +52,7 @@ import React from "@moonlight-mod/wp/react";
 const myElement = <span>Hi!</span>;
 ```
 
-Remember to add React to [your extension dependencies](/ext-dev/webpack#webpack-module-insertion).
+More information on using React in extensions can be found [here](/ext-dev/cookbook#using-react). Remember to add React to [your module dependencies](/ext-dev/webpack#webpack-module-insertion).
 
 ## Using the wrong moonlight global