web: Clean up docs, types.

web/.storybook/main.js

@@ -3,8 +3,9 @@
  * @import { StorybookConfig } from "@storybook/web-components-vite";
  * @import { InlineConfig, Plugin } from "vite";
  */
-import { createBundleDefinitions } from "@goauthentik/web/scripts/esbuild/environment";
+import { createBundleDefinitions } from "@goauthentik/web/bundler/utils/node";
 import postcssLit from "rollup-plugin-postcss-lit";
+import { mergeConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 const CSSImportPattern = /import [\w$]+ from .+\.(css)/g;
@@ -28,6 +29,11 @@ const inlineCSSPlugin = {
     },
 };
 
+/**
+ * @satisfies {InlineConfig}
+ */
+// const viteFinal = ;
+
 /**
  * @satisfies {StorybookConfig}
  */
@@ -46,18 +52,16 @@ const config = {
     docs: {
         autodocs: "tag",
     },
-    viteFinal({ plugins = [], ...config }) {
+    viteFinal(config) {
         /**
          * @satisfies {InlineConfig}
          */
-        const mergedConfig = {
-            ...config,
+        const overrides = {
             define: createBundleDefinitions(),
-            plugins: [inlineCSSPlugin, ...plugins, postcssLit(), tsconfigPaths()],
+            plugins: [inlineCSSPlugin, postcssLit(), tsconfigPaths()],
         };
 
-        return mergedConfig;
+        return mergeConfig(config, overrides);
     },
 };
-
 export default config;

web/package.json

@@ -35,15 +35,25 @@
     "type": "module",
     "exports": {
         "./package.json": "./package.json",
-        "./paths": "./paths.js",
-        "./scripts/*": "./scripts/*.mjs",
         "./elements/*": "./src/elements/*",
         "./common/*": "./src/common/*",
         "./components/*": "./src/components/*",
         "./flow/*": "./src/flow/*",
         "./locales/*": "./src/locales/*",
         "./user/*": "./src/user/*",
-        "./admin/*": "./src/admin/*"
+        "./admin/*": "./src/admin/*",
+        "./*/browser": {
+            "types": "./out/*/browser.d.ts",
+            "import": "./*/browser.js"
+        },
+        "./*/node": {
+            "types": "./out/*/node.d.ts",
+            "import": "./*/node.js"
+        },
+        "./*": {
+            "types": "./out/*/index.d.ts",
+            "import": "./*/index.js"
+        }
     },
     "dependencies": {
         "@codemirror/lang-css": "^6.3.1",

web/packages/esbuild-plugin-live-reload/client/ESBuildObserver.js

@@ -21,7 +21,7 @@ const log = console.debug.bind(console, logPrefix);
  * ESBuild may tree-shake it out of production builds.
  *
  * ```ts
- * if (import.meta.env.NODE_ENV=== "development") {
+ * if (process.env.NODE_ENV=== "development") {
  *   await import("@goauthentik/esbuild-plugin-live-reload/client")
  *     .catch(() => console.warn("Failed to import watcher"))
  * }

web/packages/monorepo/environment.js

@@ -13,6 +13,8 @@
  * If you need to check the environment at runtime, use `process.env.NODE_ENV` to
  * ensure that module tree-shaking works correctly.
  *
+ * @category Environment
+ * @runtime node
  */
 export const NodeEnvironment = process.env.NODE_ENV || "development";
 
@@ -24,6 +26,7 @@ export const NodeEnvironment = process.env.NODE_ENV || "development";
 /**
  * A type helper for serializing environment variables.
  *
+ * @category Environment
  * @template {EnvironmentVariable} T
  * @typedef {T extends string ? `"${T}"` : T} JSONify
  */
@@ -33,8 +36,13 @@ export const NodeEnvironment = process.env.NODE_ENV || "development";
 //#region Utilities
 
 /**
- * Given an object of environment variables, returns a new object with the same keys and values, but
- * with the values serialized as strings.
+ * Given an object of environment variables, serializes them into a mapping of
+ * environment variable names to their respective runtime constants.
+ *
+ * This is useful for defining environment variables while bundling with ESBuild, Vite, etc.
+ *
+ * @category Environment
+ * @runtime node
  *
  * @template {Record<string, EnvironmentVariable>} EnvRecord
  * @template {string} [Prefix='import.meta.env.']
@@ -48,16 +56,9 @@ export function serializeEnvironmentVars(
     input,
     prefix = /** @type {Prefix} */ ("import.meta.env."),
 ) {
-    /**
-     * @type {Record<string, string>}
-     */
-    const env = {};
-
-    for (const [key, value] of Object.entries(input)) {
-        const namespaceKey = prefix + key;
-
-        env[namespaceKey] = JSON.stringify(value || "");
-    }
+    const env = Object.fromEntries(
+        Object.entries(input).map(([key, value]) => [prefix + key, JSON.stringify(value ?? "")]),
+    );
 
     return /** @type {any} */ (env);
 }

web/scripts/esbuild/environment.mjs

@@ -24,6 +24,5 @@ export function createBundleDefinitions() {
         // We need to explicitly set this for NPM packages that use `process`
         // to determine their environment.
         "process.env.NODE_ENV": SerializedNodeEnvironment,
-        "import.meta.env.NODE_ENV": SerializedNodeEnvironment,
     };
 }

web/src/admin/AdminInterface/index.entrypoint.ts

@@ -43,7 +43,7 @@ import {
     renderSidebarItems,
 } from "./AdminSidebar.js";
 
-if (import.meta.env.NODE_ENV === "development") {
+if (process.env.NODE_ENV === "development") {
     await import("@goauthentik/esbuild-plugin-live-reload/client");
 }
 

web/src/common/stylesheets.ts

@@ -223,7 +223,7 @@ export function inspectStyleSheetTree(element: ReactiveElement): InspectedStyleS
     };
 }
 
-if (import.meta.env.NODE_ENV === "development") {
+if (process.env.NODE_ENV === "development") {
     Object.assign(window, {
         inspectStyleSheetTree,
         serializeStyleSheet,

web/src/flow/index.entrypoint.ts

@@ -14,6 +14,6 @@ import "@goauthentik/flow/stages/password/PasswordStage";
 
 // end of stage import
 
-if (import.meta.env.NODE_ENV === "development") {
+if (process.env.NODE_ENV === "development") {
     await import("@goauthentik/esbuild-plugin-live-reload/client");
 }

web/src/user/index.entrypoint.ts

@@ -43,7 +43,7 @@ import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
 
 import { CurrentBrand, EventsApi, SessionUser } from "@goauthentik/api";
 
-if (import.meta.env.NODE_ENV === "development") {
+if (process.env.NODE_ENV === "development") {
     await import("@goauthentik/esbuild-plugin-live-reload/client");
 }