web: Fix issue where linters collide. Update ignore file.

- Remove unused sort override for polyfills.

packages/monorepo/package.json

@@ -1,19 +0,0 @@
-{
-    "name": "@goauthentik/monorepo",
-    "version": "1.0.0",
-    "description": "Utilities for the authentik monorepo.",
-    "private": true,
-    "license": "MIT",
-    "type": "module",
-    "exports": {
-        "./package.json": "./package.json",
-        ".": {
-            "import": "./index.js",
-            "types": "./out/index.d.ts"
-        }
-    },
-    "types": "./out/index.d.ts",
-    "engines": {
-        "node": ">=20.11"
-    }
-}

packages/monorepo/paths.js

@@ -1,30 +0,0 @@
-import { createRequire } from "node:module";
-import { dirname, join, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-/**
- * @typedef {'~authentik'} MonoRepoRoot
- */
-
-/**
- * The root of the authentik monorepo.
- */
-export const MonoRepoRoot = /** @type {MonoRepoRoot} */ (resolve(__dirname, "..", ".."));
-
-const require = createRequire(import.meta.url);
-
-/**
- * Resolve a package name to its location in the monorepo to the single node_modules directory.
- * @param {string} packageName
- * @returns {string} The resolved path to the package.
- * @throws {Error} If the package cannot be resolved.
- */
-export function resolvePackage(packageName) {
-    const packageJSONPath = require.resolve(join(packageName, "package.json"), {
-        paths: [MonoRepoRoot],
-    });
-
-    return dirname(packageJSONPath);
-}

web/.prettierignore

@@ -2,15 +2,11 @@
 node_modules
 # don't lint build output (make sure it's set to your correct build folder name)
 dist
+out
 # don't lint nyc coverage output
 coverage
 # Import order matters
-poly.ts
 src/locale-codes.ts
 src/locales/
 storybook-static/
-# Prettier breaks the tsconfig file
-tsconfig.json
 .storybook/css-import-maps*
-package.json
-packages/**/package.json

web/package.json

@@ -1,6 +1,44 @@
 {
     "name": "@goauthentik/web",
     "version": "0.0.0",
+    "license": "MIT",
+    "private": true,
+    "scripts": {
+        "build": "wireit",
+        "build-locales": "wireit",
+        "build-locales:build": "wireit",
+        "build-proxy": "wireit",
+        "build:sfe": "wireit",
+        "esbuild:watch": "node scripts/build-web.mjs --watch",
+        "extract-locales": "wireit",
+        "format": "wireit",
+        "lint": "wireit",
+        "lint:imports": "wireit",
+        "lint:lockfile": "wireit",
+        "lint:nightmare": "wireit",
+        "lint:precommit": "wireit",
+        "lint:types": "wireit",
+        "lit-analyse": "wireit",
+        "postinstall": "bash scripts/patch-spotlight.sh",
+        "precommit": "wireit",
+        "prettier": "wireit",
+        "prettier-check": "wireit",
+        "pseudolocalize": "wireit",
+        "storybook": "storybook dev -p 6006",
+        "storybook:build": "wireit",
+        "test": "wireit",
+        "test:e2e": "wireit",
+        "test:e2e:watch": "wireit",
+        "test:watch": "wireit",
+        "tsc": "wireit",
+        "watch": "run-s build-locales esbuild:watch"
+    },
+    "type": "module",
+    "exports": {
+        "./package.json": "./package.json",
+        "./paths": "./paths.js",
+        "./scripts/*": "./scripts/*.mjs"
+    },
     "dependencies": {
         "@codemirror/lang-css": "^6.3.1",
         "@codemirror/lang-html": "^6.4.9",
@@ -62,6 +100,7 @@
     "devDependencies": {
         "@eslint/js": "^9.11.1",
         "@goauthentik/esbuild-plugin-live-reload": "^1.0.4",
+        "@goauthentik/monorepo": "^1.0.0",
         "@goauthentik/prettier-config": "^1.0.4",
         "@goauthentik/tsconfig": "^1.0.4",
         "@hcaptcha/types": "^1.0.4",
@@ -93,13 +132,13 @@
         "@wdio/spec-reporter": "^9.1.2",
         "chromedriver": "^131.0.1",
         "esbuild": "^0.25.0",
+        "esbuild-plugin-copy": "^2.1.1",
         "esbuild-plugin-polyfill-node": "^0.3.0",
         "esbuild-plugins-node-modules-polyfill": "^1.7.0",
         "eslint": "^9.11.1",
         "eslint-plugin-lit": "^1.15.0",
         "eslint-plugin-wc": "^2.1.1",
         "github-slugger": "^2.0.0",
-        "glob": "^11.0.0",
         "globals": "^15.10.0",
         "knip": "^5.30.6",
         "lit-analyzer": "^2.0.3",
@@ -110,7 +149,6 @@
         "rollup-plugin-postcss-lit": "^2.1.0",
         "storybook": "^8.3.4",
         "storybook-addon-mock": "^5.0.0",
-        "syncpack": "^13.0.0",
         "turnstile-types": "^1.2.3",
         "typescript": "^5.6.2",
         "typescript-eslint": "^8.8.0",
@@ -118,10 +156,6 @@
         "vite-tsconfig-paths": "^5.0.1",
         "wireit": "^0.14.9"
     },
-    "engines": {
-        "node": ">=20"
-    },
-    "license": "MIT",
     "optionalDependencies": {
         "@esbuild/darwin-arm64": "^0.24.0",
         "@esbuild/linux-amd64": "^0.18.11",
@@ -130,48 +164,6 @@
         "@rollup/rollup-linux-arm64-gnu": "4.23.0",
         "@rollup/rollup-linux-x64-gnu": "4.23.0"
     },
-    "overrides": {
-        "rapidoc": {
-            "@apitools/openapi-parser@": "0.0.37"
-        },
-        "chromedriver": {
-            "axios": "^1.8.4"
-        }
-    },
-    "prettier": "@goauthentik/prettier-config",
-    "private": true,
-    "scripts": {
-        "build": "wireit",
-        "build-locales": "wireit",
-        "build-locales:build": "wireit",
-        "build-proxy": "wireit",
-        "build:sfe": "wireit",
-        "esbuild:watch": "node scripts/build-web.mjs --watch",
-        "extract-locales": "wireit",
-        "format": "wireit",
-        "lint": "wireit",
-        "lint:imports": "wireit",
-        "lint:lockfile": "wireit",
-        "lint:nightmare": "wireit",
-        "lint:package": "wireit",
-        "lint:precommit": "wireit",
-        "lint:types": "wireit",
-        "lit-analyse": "wireit",
-        "postinstall": "bash scripts/patch-spotlight.sh",
-        "precommit": "wireit",
-        "prettier": "wireit",
-        "prettier-check": "wireit",
-        "pseudolocalize": "wireit",
-        "storybook": "storybook dev -p 6006",
-        "storybook:build": "wireit",
-        "test": "wireit",
-        "test:e2e": "wireit",
-        "test:e2e:watch": "wireit",
-        "test:watch": "wireit",
-        "tsc": "wireit",
-        "watch": "run-s build-locales esbuild:watch"
-    },
-    "type": "module",
     "wireit": {
         "build": {
             "#comment": [
@@ -248,10 +240,7 @@
             "command": "lit-localize extract"
         },
         "format": {
-            "command": "prettier --write .",
+            "command": "prettier --write ."
-            "dependencies": [
-                "lint:package"
-            ]
         },
         "format:packages": {
             "dependencies": [
@@ -290,9 +279,6 @@
                 "./packages/sfe:lint:lockfile"
             ]
         },
-        "lint:package": {
-            "command": "syncpack format -i '    '"
-        },
         "lint:nightmare": {
             "command": "${NODE_RUNNER} ./scripts/eslint.mjs --nightmare",
             "env": {
@@ -323,7 +309,6 @@
                 "lint:types",
                 "lint:components",
                 "lint:spelling",
-                "lint:package",
                 "lint:lockfile",
                 "lint:lockfiles",
                 "lint:precommit",
@@ -388,8 +373,20 @@
             ]
         }
     },
+    "engines": {
+        "node": ">=20"
+    },
     "workspaces": [
         ".",
         "./packages/*"
-    ]
+    ],
+    "prettier": "@goauthentik/prettier-config",
+    "overrides": {
+        "rapidoc": {
+            "@apitools/openapi-parser@": "0.0.37"
+        },
+        "chromedriver": {
+            "axios": "^1.8.4"
+        }
+    }
 }

web/packages/esbuild-plugin-live-reload/package.json

@@ -1,22 +1,11 @@
 {
     "name": "@goauthentik/esbuild-plugin-live-reload",
-    "description": "ESBuild plugin to watch for file changes and trigger client-side reloads.",
     "version": "1.0.4",
-    "dependencies": {
+    "description": "ESBuild plugin to watch for file changes and trigger client-side reloads.",
-        "find-free-ports": "^3.1.1"
+    "license": "MIT",
-    },
+    "private": true,
-    "devDependencies": {
+    "main": "index.js",
-        "@goauthentik/prettier-config": "^1.0.4",
+    "type": "module",
-        "@goauthentik/tsconfig": "^1.0.4",
-        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-        "@types/node": "^22.14.1",
-        "esbuild": "^0.25.0",
-        "prettier": "^3.3.3",
-        "typescript": "^5.6.2"
-    },
-    "engines": {
-        "node": ">=20.11"
-    },
     "exports": {
         "./package.json": "./package.json",
         ".": {
@@ -32,22 +21,33 @@
             "import": "./plugin/index.js"
         }
     },
+    "dependencies": {
+        "find-free-ports": "^3.1.1"
+    },
+    "devDependencies": {
+        "@goauthentik/prettier-config": "^1.0.4",
+        "@goauthentik/tsconfig": "^1.0.4",
+        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+        "@types/node": "^22.14.1",
+        "esbuild": "^0.25.0",
+        "prettier": "^3.3.3",
+        "typescript": "^5.6.2"
+    },
+    "peerDependencies": {
+        "esbuild": "^0.25.0"
+    },
+    "engines": {
+        "node": ">=20.11"
+    },
+    "types": "./out/index.d.ts",
     "files": [
         "./index.js",
         "client/**/*",
         "plugin/**/*",
         "out/**/*"
     ],
-    "license": "MIT",
-    "main": "index.js",
-    "peerDependencies": {
-        "esbuild": "^0.25.0"
-    },
     "prettier": "@goauthentik/prettier-config",
-    "private": true,
     "publishConfig": {
         "access": "public"
-    },
+    }
-    "type": "module",
-    "types": "./out/index.d.ts"
 }

web/packages/monorepo/README.md

@@ -2,4 +2,3 @@
 
 This package contains utility scripts common to all TypeScript and JavaScript packages in the
 `@goauthentik` monorepo.
-

web/packages/monorepo/build.js

@@ -0,0 +1,42 @@
+/**
+ * @file Utility functions for building and copying files.
+ */
+
+/**
+ * A source environment variable, which can be a string, number, boolean, null, or undefined.
+ * @typedef {string | number | boolean | null | undefined} EnvironmentVariable
+ */
+
+/**
+ * A type helper for serializing environment variables.
+ *
+ * @template {EnvironmentVariable} T
+ * @typedef {T extends string ? `"${T}"` : T} JSONify
+ */
+
+/**
+ * Given an object of environment variables, returns a new object with the same keys and values, but
+ * with the values serialized as strings.
+ *
+ * @template {Record<string, EnvironmentVariable>} EnvRecord
+ * @template {string} [Prefix='process.env.']
+ *
+ * @param {EnvRecord} input
+ * @param {Prefix} [prefix='process.env.']
+ *
+ * @returns {{[K in keyof EnvRecord as `${Prefix}${K}`]: JSONify<EnvRecord[K]>}}
+ */
+export function serializeEnvironmentVars(input, prefix = /** @type {Prefix} */ ("process.env.")) {
+    /**
+     * @type {Record<string, string>}
+     */
+    const env = {};
+
+    for (const [key, value] of Object.entries(input)) {
+        const namespaceKey = prefix + key;
+
+        env[namespaceKey] = JSON.stringify(value || "");
+    }
+
+    return /** @type {any} */ (env);
+}

web/packages/monorepo/constants.js

@@ -1,8 +1,9 @@
 /**
  * @file Constants for JavaScript and TypeScript files.
- *
  */
 
+/// <reference types="../../types/global.js" />
+
 /**
  * The current Node.js environment, defaulting to "development" when not set.
  *
@@ -12,6 +13,4 @@
  * ensure that module tree-shaking works correctly.
  *
  */
-export const NodeEnvironment = /** @type {'development' | 'production'} */ (
+export const NodeEnvironment = process.env.NODE_ENV || "development";
-    process.env.NODE_ENV || "development"
-);

web/packages/monorepo/index.js

@@ -1,4 +1,7 @@
+/// <reference types="./types/global.js" />
+
 export * from "./paths.js";
 export * from "./constants.js";
+export * from "./build.js";
 export * from "./version.js";
 export * from "./scripting.js";

web/packages/monorepo/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "@goauthentik/monorepo",
+    "version": "1.0.0",
+    "description": "Utilities for the authentik monorepo.",
+    "license": "MIT",
+    "private": true,
+    "main": "index.js",
+    "type": "module",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./out/index.d.ts",
+            "import": "./index.js"
+        }
+    },
+    "devDependencies": {
+        "@goauthentik/prettier-config": "^1.0.4",
+        "@goauthentik/tsconfig": "^1.0.4",
+        "@types/node": "^22.14.1",
+        "prettier": "^3.3.3",
+        "typescript": "^5.6.2"
+    },
+    "engines": {
+        "node": ">=20.11"
+    },
+    "types": "./out/index.d.ts",
+    "prettier": "@goauthentik/prettier-config"
+}

web/packages/monorepo/paths.js

@@ -0,0 +1,45 @@
+import { createRequire } from "node:module";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const relativeDirname = dirname(fileURLToPath(import.meta.url));
+
+/**
+ * @typedef {'~authentik'} MonoRepoRoot
+ */
+
+/**
+ * The root of the authentik monorepo.
+ */
+// TODO: Revise when this package is moved to the monorepo's `packages/monorepo` directory.
+export const MonoRepoRoot = /** @type {MonoRepoRoot} */ (
+    resolve(relativeDirname, "..", "..", "..")
+);
+
+const require = createRequire(import.meta.url);
+
+/**
+ * Resolve a package name to its location in the monorepo to the single node_modules directory.
+ * @param {string} packageName
+ *
+ * @returns {string} The resolved path to the package.
+ * @throws {Error} If the package cannot be resolved.
+ */
+export function resolvePackage(packageName) {
+    const relativePackageJSONPath = join(packageName, "package.json");
+
+    /** @type {string} */
+    let absolutePackageJSONPath;
+
+    try {
+        absolutePackageJSONPath = require.resolve(relativePackageJSONPath);
+    } catch (cause) {
+        const error = new Error(`Failed to resolve package "${packageName}"`);
+
+        error.cause = cause;
+
+        throw error;
+    }
+
+    return dirname(absolutePackageJSONPath);
+}

web/packages/monorepo/types/global.d.ts

@@ -0,0 +1,15 @@
+declare module "process" {
+    global {
+        namespace NodeJS {
+            interface ProcessEnv {
+                /**
+                 * An environment variable used to determine
+                 * whether Node.js is running in production mode.
+                 *
+                 * @see {@link https://nodejs.org/en/learn/getting-started/nodejs-the-difference-between-development-and-production | The difference between development and production}
+                 */
+                NODE_ENV?: "production" | "development";
+            }
+        }
+    }
+}

web/packages/monorepo/version.js

@@ -1,6 +1,6 @@
 import { execSync } from "node:child_process";
 
-import PackageJSON from "../../package.json" with { type: "json" };
+import PackageJSON from "../../../package.json" with { type: "json" };
 import { MonoRepoRoot } from "./paths.js";
 
 /**

web/paths.js

@@ -0,0 +1,78 @@
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const relativeDirname = dirname(fileURLToPath(import.meta.url));
+
+//#region Base paths
+
+/**
+ * @typedef {'@goauthentik/web'} WebPackageIdentifier
+ */
+
+/**
+ * The root of the web package.
+ */
+export const PackageRoot = /** @type {WebPackageIdentifier} */ (resolve(relativeDirname));
+
+/**
+ * The name of the distribution directory.
+ */
+export const DistDirectoryName = "dist";
+
+/**
+ * Path to the web package's distribution directory.
+ *
+ * This is where the built files are located after running the build process.
+ */
+export const DistDirectory = /** @type {`${WebPackageIdentifier}/${DistDirectoryName}`} */ (
+    resolve(relativeDirname, DistDirectoryName)
+);
+
+//#endregion
+
+//#region Entry points
+
+/**
+ * @typedef {{ in: string, out: string }} EntryPointTarget
+ *
+ * ESBuild entrypoint target.
+ * Matches the type defined in the ESBuild context.
+ */
+
+/**
+ * Entry points available for building.
+ *
+ * @satisfies {Record<string, EntryPointTarget>}
+ */
+export const EntryPoint = /** @type {const} */ ({
+    Admin: {
+        in: resolve(PackageRoot, "src", "admin", "AdminInterface", "index.entrypoint.ts"),
+        out: resolve(DistDirectory, "admin", "AdminInterface"),
+    },
+    User: {
+        in: resolve(PackageRoot, "src", "user", "index.entrypoint.ts"),
+        out: resolve(DistDirectory, "user", "UserInterface"),
+    },
+    Flow: {
+        in: resolve(PackageRoot, "src", "flow", "index.entrypoint.ts"),
+        out: resolve(DistDirectory, "flow", "FlowInterface"),
+    },
+    Standalone: {
+        in: resolve(PackageRoot, "src", "standalone", "api-browser/index.entrypoint.ts"),
+        out: resolve(DistDirectory, "standalone", "api-browser", "index"),
+    },
+    StandaloneLoading: {
+        in: resolve(PackageRoot, "src", "standalone", "loading/index.entrypoint.ts"),
+        out: resolve(DistDirectory, "standalone", "loading", "index"),
+    },
+    RAC: {
+        in: resolve(PackageRoot, "src", "rac", "index.entrypoint.ts"),
+        out: resolve(DistDirectory, "rac", "index"),
+    },
+    Polyfill: {
+        in: resolve(PackageRoot, "src", "polyfill", "index.entrypoint.ts"),
+        out: resolve(DistDirectory, "poly"),
+    },
+});
+
+//#endregion

web/scripts/build-web.mjs

@@ -4,138 +4,86 @@
  * @import { BuildOptions } from "esbuild";
  */
 import { liveReloadPlugin } from "@goauthentik/esbuild-plugin-live-reload/plugin";
-import { execFileSync } from "child_process";
+import {
+    MonoRepoRoot,
+    NodeEnvironment,
+    readBuildIdentifier,
+    resolvePackage,
+    serializeEnvironmentVars,
+} from "@goauthentik/monorepo";
+import { DistDirectory, DistDirectoryName, EntryPoint, PackageRoot } from "@goauthentik/web/paths";
 import { deepmerge } from "deepmerge-ts";
 import esbuild from "esbuild";
+import copy from "esbuild-plugin-copy";
 import { polyfillNode } from "esbuild-plugin-polyfill-node";
-import { copyFileSync, mkdirSync, readFileSync, statSync } from "fs";
+import * as fs from "node:fs/promises";
-import { globSync } from "glob";
+import * as path from "node:path";
-import * as path from "path";
-import { cwd } from "process";
-import process from "process";
-import { fileURLToPath } from "url";
 
 import { mdxPlugin } from "./esbuild/build-mdx-plugin.mjs";
 
-const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const logPrefix = "[Build]";
-let authentikProjectRoot = path.join(__dirname, "..", "..");
 
-try {
+const definitions = serializeEnvironmentVars({
-    // Use the package.json file in the root folder, as it has the current version information.
+    NODE_ENV: NodeEnvironment,
-    authentikProjectRoot = execFileSync("git", ["rev-parse", "--show-toplevel"], {
+    CWD: process.cwd(),
-        encoding: "utf8",
+    AK_API_BASE_PATH: process.env.AK_API_BASE_PATH,
-    }).replace("\n", "");
+});
-} catch (_error) {
-    // We probably don't have a .git folder, which could happen in container builds.
-}
 
-const packageJSONPath = path.join(authentikProjectRoot, "./package.json");
+const patternflyPath = resolvePackage("@patternfly/patternfly");
-const rootPackage = JSON.parse(readFileSync(packageJSONPath, "utf8"));
-
-const NODE_ENV = process.env.NODE_ENV || "development";
-const AK_API_BASE_PATH = process.env.AK_API_BASE_PATH || "";
-
-const environmentVars = new Map([
-    ["NODE_ENV", NODE_ENV],
-    ["CWD", cwd()],
-    ["AK_API_BASE_PATH", AK_API_BASE_PATH],
-]);
-
-const definitions = Object.fromEntries(
-    Array.from(environmentVars).map(([key, value]) => {
-        return [`process.env.${key}`, JSON.stringify(value)];
-    }),
-);
 
 /**
- * All is magic is just to make sure the assets are copied into the right places. This is a very
+ * @type {Readonly<BuildOptions>}
- * stripped down version of what the rollup-copy-plugin does, without any of the features we don't
- * use, and using globSync instead of globby since we already had globSync lying around thanks to
- * Typescript. If there's a third argument in an array entry, it's used to replace the internal path
- * before concatenating it all together as the destination target.
- * @type {Array<[string, string, string?]>}
- */
-const assetsFileMappings = [
-    ["node_modules/@patternfly/patternfly/patternfly.min.css", "."],
-    ["node_modules/@patternfly/patternfly/assets/**", ".", "node_modules/@patternfly/patternfly/"],
-    ["src/common/styles/**", "."],
-    ["src/assets/images/**", "./assets/images"],
-    ["./icons/*", "./assets/icons"],
-];
-
-/**
- * @param {string} filePath
- */
-const isFile = (filePath) => statSync(filePath).isFile();
-
-/**
- * @param {string} src Source file
- * @param {string} dest Destination folder
- * @param {string} [strip] Path to strip from the source file
- */
-function nameCopyTarget(src, dest, strip) {
-    const target = path.join(dest, strip ? src.replace(strip, "") : path.parse(src).base);
-    return [src, target];
-}
-
-for (const [source, rawdest, strip] of assetsFileMappings) {
-    const matchedPaths = globSync(source);
-    const dest = path.join("dist", rawdest);
-
-    const copyTargets = matchedPaths.map((path) => nameCopyTarget(path, dest, strip));
-
-    for (const [src, dest] of copyTargets) {
-        if (isFile(src)) {
-            mkdirSync(path.dirname(dest), { recursive: true });
-            copyFileSync(src, dest);
-        }
-    }
-}
-
-/**
- * @typedef {[source: string, destination: string]} EntryPoint
- */
-
-/**
- * This starts the definitions used for esbuild: Our targets, our arguments, the function for
- * running a build, and three options for building: watching, building, and building the proxy.
- * Ordered by largest to smallest interface to build even faster
- *
- * @type {EntryPoint[]}
- */
-const entryPoints = [
-    ["admin/AdminInterface/AdminInterface.ts", "admin"],
-    ["user/UserInterface.ts", "user"],
-    ["flow/FlowInterface.ts", "flow"],
-    ["standalone/api-browser/index.ts", "standalone/api-browser"],
-    ["rac/index.ts", "rac"],
-    ["standalone/loading/index.ts", "standalone/loading"],
-    ["polyfill/poly.ts", "."],
-];
-
-/**
- * @type {import("esbuild").BuildOptions}
  */
 const BASE_ESBUILD_OPTIONS = {
+    entryNames: `[dir]/[name]-${readBuildIdentifier()}`,
+    chunkNames: "[dir]/chunks/[name]-[hash]",
+    assetNames: "assets/[dir]/[name]-[hash]",
+    publicPath: path.join("/static", DistDirectoryName),
+    outdir: DistDirectory,
     bundle: true,
     write: true,
     sourcemap: true,
-    minify: NODE_ENV === "production",
+    minify: NodeEnvironment === "production",
+    legalComments: "external",
     splitting: true,
     treeShaking: true,
     external: ["*.woff", "*.woff2"],
-    tsconfig: path.resolve(__dirname, "..", "tsconfig.build.json"),
+    tsconfig: path.resolve(PackageRoot, "tsconfig.build.json"),
     loader: {
         ".css": "text",
     },
     plugins: [
+        copy({
+            assets: [
+                {
+                    from: path.join(patternflyPath, "patternfly.min.css"),
+                    to: ".",
+                },
+                {
+                    from: path.join(patternflyPath, "assets", "**"),
+                    to: "./assets",
+                },
+                {
+                    from: path.resolve(PackageRoot, "src", "common", "styles", "**"),
+                    to: ".",
+                },
+                {
+                    from: path.resolve(PackageRoot, "src", "assets", "images", "**"),
+                    to: "./assets/images",
+                },
+                {
+                    from: path.resolve(PackageRoot, "icons", "*"),
+                    to: "./assets/icons",
+                },
+            ],
+        }),
         polyfillNode({
             polyfills: {
                 path: true,
             },
         }),
         mdxPlugin({
-            root: authentikProjectRoot,
+            root: MonoRepoRoot,
         }),
     ],
     define: definitions,
@@ -151,69 +99,43 @@ const BASE_ESBUILD_OPTIONS = {
     },
 };
 
-/**
+async function cleanDistDirectory() {
- * Creates a version ID for the build.
+    const timerLabel = `${logPrefix} ♻️ Cleaning previous builds...`;
- * @returns {string}
- */
-function composeVersionID() {
-    const { version } = rootPackage;
-    const buildHash = process.env.GIT_BUILD_HASH;
 
-    if (buildHash) {
+    console.time(timerLabel);
-        return `${version}+${buildHash}`;
-    }
 
-    return version;
+    await fs.rm(DistDirectory, {
+        recursive: true,
+        force: true,
+    });
+
+    await fs.mkdir(DistDirectory, {
+        recursive: true,
+    });
+
+    console.timeEnd(timerLabel);
 }
 
 /**
- * Build a single entry point.
+ * Creates an ESBuild options, extending the base options with the given overrides.
  *
- * @param {EntryPoint} buildTarget
+ * @param {BuildOptions} overrides
- * @param {Partial<esbuild.BuildOptions>} [overrides]
+ * @returns {BuildOptions}
- * @throws {Error} on build failure
  */
-function createEntryPointOptions([source, dest], overrides = {}) {
+export function createESBuildOptions(overrides) {
-    const outdir = path.join(__dirname, "..", "dist", dest);
-
     /**
-     * @type {esbuild.BuildOptions}
+     * @type {BuildOptions}
      */
+    const mergedOptions = deepmerge(BASE_ESBUILD_OPTIONS, overrides);
 
-    const entryPointConfig = {
+    return mergedOptions;
-        entryPoints: [`./src/${source}`],
-        entryNames: `[dir]/[name]-${composeVersionID()}`,
-        publicPath: path.join("/static", "dist", dest),
-        outdir,
-    };
-
-    /**
-     * @type {esbuild.BuildOptions}
-     */
-    const mergedConfig = deepmerge(BASE_ESBUILD_OPTIONS, entryPointConfig, overrides);
-
-    return mergedConfig;
-}
-
-/**
- * Build all entry points in parallel.
- *
- * @param {EntryPoint[]} entryPoints
- * @returns {Promise<esbuild.BuildResult[]>}
- */
-async function buildParallel(entryPoints) {
-    return Promise.all(
-        entryPoints.map((entryPoint) => {
-            return esbuild.build(createEntryPointOptions(entryPoint));
-        }),
-    );
 }
 
 function doHelp() {
     console.log(`Build the authentik UI
 
         options:
-            -w, --watch: Build all ${entryPoints.length} interfaces
+            -w, --watch: Build all interfaces
             -p, --proxy: Build only the polyfills and the loading application
             -h, --help: This help message
 `);
@@ -222,27 +144,29 @@ function doHelp() {
 }
 
 async function doWatch() {
-    console.log("Watching all entry points...");
+    console.group(`${logPrefix} 🤖 Watching entry points`);
 
-    const buildContexts = await Promise.all(
+    const entryPoints = Object.entries(EntryPoint).map(([entrypointID, target]) => {
-        entryPoints.map((entryPoint) => {
+        console.log(entrypointID);
-            return esbuild.context(
-                createEntryPointOptions(entryPoint, {
-                    define: definitions,
-                    plugins: [
-                        liveReloadPlugin({
-                            logPrefix: `Build Observer (${entryPoint[1]})`,
-                            relativeRoot: path.join(__dirname, ".."),
-                        }),
-                    ],
-                }),
-            );
-        }),
-    );
 
-    await Promise.all(buildContexts.map((context) => context.rebuild()));
+        return target;
+    });
 
-    await Promise.allSettled(buildContexts.map((context) => context.watch()));
+    console.groupEnd();
+
+    const buildOptions = createESBuildOptions({
+        entryPoints,
+        plugins: [
+            liveReloadPlugin({
+                relativeRoot: PackageRoot,
+            }),
+        ],
+    });
+
+    const buildContext = await esbuild.context(buildOptions);
+
+    await buildContext.rebuild();
+    await buildContext.watch();
 
     return /** @type {Promise<void>} */ (
         new Promise((resolve) => {
@@ -254,15 +178,34 @@ async function doWatch() {
 }
 
 async function doBuild() {
-    console.log("Building all entry points");
+    console.group(`${logPrefix} 🚀 Building entry points:`);
 
-    return buildParallel(entryPoints);
+    const entryPoints = Object.entries(EntryPoint).map(([entrypointID, target]) => {
+        console.log(entrypointID);
+
+        return target;
+    });
+
+    console.groupEnd();
+
+    const buildOptions = createESBuildOptions({
+        entryPoints,
+    });
+
+    await esbuild.build(buildOptions);
+
+    console.log("Build complete");
 }
 
 async function doProxy() {
-    return buildParallel(
+    const entryPoints = [EntryPoint.StandaloneLoading];
-        entryPoints.filter(([_, dest]) => ["standalone/loading", "."].includes(dest)),
+
-    );
+    const buildOptions = createESBuildOptions({
+        entryPoints,
+    });
+
+    await esbuild.build(buildOptions);
+    console.log("Proxy build complete");
 }
 
 async function delegateCommand() {
@@ -284,12 +227,16 @@ async function delegateCommand() {
     }
 }
 
-await delegateCommand()
+await cleanDistDirectory()
-    .then(() => {
+    // ---
-        console.log("Build complete");
+    .then(() =>
-        process.exit(0);
+        delegateCommand()
-    })
+            .then(() => {
-    .catch((error) => {
+                console.log("Build complete");
-        console.error(error);
+                process.exit(0);
-        process.exit(1);
+            })
-    });
+            .catch((error) => {
+                console.error(error);
+                process.exit(1);
+            }),
+    );

web/src/admin/AdminInterface/index.ts

@@ -1,5 +0,0 @@
-import { AdminInterface } from "./AdminInterface";
-import "./AdminInterface";
-
-export { AdminInterface };
-export default AdminInterface;

web/src/admin/users/UserListPage.ts

@@ -1,4 +1,4 @@
-import { AdminInterface } from "@goauthentik/admin/AdminInterface";
+import type { AdminInterface } from "@goauthentik/admin/AdminInterface/index.entrypoint.js";
 import "@goauthentik/admin/users/ServiceAccountForm";
 import "@goauthentik/admin/users/UserActiveForm";
 import "@goauthentik/admin/users/UserForm";

web/src/elements/sidebar/SidebarVersion.ts

@@ -1,4 +1,4 @@
-import type { AdminInterface } from "@goauthentik/admin/AdminInterface/AdminInterface";
+import type { AdminInterface } from "@goauthentik/admin/AdminInterface/index.entrypoint.js";
 import { globalAK } from "@goauthentik/common/global";
 import { AKElement, rootInterface } from "@goauthentik/elements/Base";
 import { WithLicenseSummary } from "@goauthentik/elements/Interface/licenseSummaryProvider";

web/src/polyfill/index.entrypoint.ts

@@ -1,3 +1,4 @@
+// sort-imports-ignore
 import "construct-style-sheets-polyfill";
 import "@webcomponents/webcomponentsjs";
 import "lit/polyfill-support.js";

web/src/user/LibraryApplication/index.ts

@@ -6,7 +6,7 @@ import { AKElement, rootInterface } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/Expand";
 import "@goauthentik/user/LibraryApplication/RACLaunchEndpointModal";
 import type { RACLaunchEndpointModal } from "@goauthentik/user/LibraryApplication/RACLaunchEndpointModal";
-import { UserInterface } from "@goauthentik/user/UserInterface";
+import type { UserInterface } from "@goauthentik/user/index.entrypoint.js";
 
 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html, nothing } from "lit";

web/src/user/user-settings/UserSettingsPage.ts

@@ -5,7 +5,7 @@ import "@goauthentik/elements/Tabs";
 import "@goauthentik/elements/user/SessionList";
 import "@goauthentik/elements/user/UserConsentList";
 import "@goauthentik/elements/user/sources/SourceSettings";
-import { UserInterface } from "@goauthentik/user/UserInterface";
+import type { UserInterface } from "@goauthentik/user/index.entrypoint.js";
 import "@goauthentik/user/user-settings/details/UserPassword";
 import "@goauthentik/user/user-settings/details/UserSettingsFlowExecutor";
 import "@goauthentik/user/user-settings/mfa/MFADevicesPage";

web/tsconfig.json

@@ -61,5 +61,5 @@
         {
             "path": "./packages/esbuild-plugin-live-reload"
         }
-    ],
+    ]
 }

web/types/global.d.ts

@@ -2,17 +2,27 @@
  * @file Environment variables available via ESBuild.
  */
 
+declare module "module" {
+    global {
+        /**
+         * @deprecated This is not present in ESM files.
+         *
+         * ```js
+         * import { dirname } from "node:path";
+         * import { fileURLToPath } from "node:url";
+         *
+         * const relativeDirname = dirname(fileURLToPath(import.meta.url));
+         * ```
+         */
+        // eslint-disable-next-line no-var
+        var __dirname: string;
+    }
+}
+
 declare module "process" {
     global {
         namespace NodeJS {
             interface ProcessEnv {
-                NODE_ENV: "production" | "development";
-                /**
-                 *
-                 * @todo Determine where this is used and if it is needed,
-                 * give it a better name.
-                 * @deprecated
-                 */
                 CWD: string;
                 /**
                  * @todo Determine where this is used and if it is needed,