Web: Controllers cleanup (#14616)

* web: Fix issues surrounding availability of controllers during init.

web: Fix edgecase where flow does not have brand.

* web: Fix import path.

* web: Clean up mixin/controller paths.

* web: Prepare for consistent import styling.

- Prep for Storybook fixes.

* web: Update MDX types.

* web: Fix issues surrounding async imports, MDX typing, relative paths.

* web: Format. Clarify.

* web: Group module types.

web/bundler/mdx-plugin/node.js

@@ -4,30 +4,27 @@
  * @import {
  *   OnLoadArgs,
  *   OnLoadResult,
+ *   OnResolveArgs,
+ *   OnResolveResult,
  *   Plugin,
  *   PluginBuild
  * } from "esbuild"
  */
+import { MonoRepoRoot } from "@goauthentik/core/paths/node";
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
 
 /**
- * @typedef {Omit<OnLoadArgs, 'pluginData'> & LoadDataFields} LoadData
- *   Data passed to `onload`.
+ * @typedef {Omit<OnLoadArgs, 'pluginData'> & LoadDataFields} LoadData Data passed to `onload`.
  *
- * @typedef LoadDataFields
- *   Extra fields given in `data` to `onload`.
- * @property {PluginData | null | undefined} [pluginData]
- *   Plugin data.
+ * @typedef LoadDataFields Extra fields given in `data` to `onload`.
+ * @property {PluginData | null | undefined} [pluginData] Plugin data.
  *
- *
- * @typedef PluginData
- *   Extra data passed.
- * @property {Buffer | string | null | undefined} [contents]
- *   File contents.
+ * @typedef PluginData Extra data passed.
+ * @property {Buffer | string | null | undefined} [contents] File contents.
  */
 
-const name = "mdx-plugin";
+const pluginName = "mdx-plugin";
 
 /**
  * @typedef MDXPluginOptions
@@ -38,28 +35,35 @@ const name = "mdx-plugin";
 /**
  * Bundle MDX into JSON modules.
  *
- * @param {MDXPluginOptions} options Options.
- * @returns {Plugin} Plugin.
+ * @param {MDXPluginOptions} options
+ * @returns {Plugin}
  */
 export function mdxPlugin({ root }) {
-    return { name, setup };
+    // TODO: Replace with `resolvePackage` after NPM Workspaces support is added.
+    const docsPackageRoot = path.resolve(MonoRepoRoot, "website");
 
     /**
      * @param {PluginBuild} build
-     *   Build.
-     * @returns {undefined}
-     *   Nothing.
      */
     function setup(build) {
-        build.onLoad({ filter: /\.mdx?$/ }, onload);
+        /**
+         * @param {OnResolveArgs} args
+         * @returns {Promise<OnResolveResult>}
+         */
+        async function resolveListener(args) {
+            if (!args.path.startsWith("~")) return args;
+
+            return {
+                path: path.resolve(docsPackageRoot, args.path.slice(1)),
+                pluginName,
+            };
+        }
 
         /**
          * @param {LoadData} data
-         *   Data.
          * @returns {Promise<OnLoadResult>}
-         *   Result.
          */
-        async function onload(data) {
+        async function loadListener(data) {
             const content = String(
                 data.pluginData &&
                     data.pluginData.contents !== null &&
@@ -77,7 +81,16 @@ export function mdxPlugin({ root }) {
             return {
                 contents: JSON.stringify({ content, publicPath, publicDirectory }),
                 loader: "file",
+                pluginName,
             };
         }
+
+        build.onResolve({ filter: /\.mdx?$/ }, resolveListener);
+        build.onLoad({ filter: /\.mdx?$/ }, loadListener);
     }
+
+    return {
+        name: pluginName,
+        setup,
+    };
 }