diff --git a/web/.storybook/main.js b/web/.storybook/main.js index 3e8cfdf5be..7f84001d2e 100644 --- a/web/.storybook/main.js +++ b/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; diff --git a/web/package.json b/web/package.json index 11869aacaf..466b77c088 100644 --- a/web/package.json +++ b/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", diff --git a/web/packages/esbuild-plugin-live-reload/client/ESBuildObserver.js b/web/packages/esbuild-plugin-live-reload/client/ESBuildObserver.js index 8a6b0a3990..9207a89508 100644 --- a/web/packages/esbuild-plugin-live-reload/client/ESBuildObserver.js +++ b/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")) * } diff --git a/web/packages/monorepo/environment.js b/web/packages/monorepo/environment.js index 062c1a4f4c..976023f202 100644 --- a/web/packages/monorepo/environment.js +++ b/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} EnvRecord * @template {string} [Prefix='import.meta.env.'] @@ -48,16 +56,9 @@ export function serializeEnvironmentVars( input, prefix = /** @type {Prefix} */ ("import.meta.env."), ) { - /** - * @type {Record} - */ - 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); } diff --git a/web/scripts/esbuild/environment.mjs b/web/scripts/esbuild/environment.mjs index 2af7afcaba..4d65de996a 100644 --- a/web/scripts/esbuild/environment.mjs +++ b/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, }; } diff --git a/web/src/admin/AdminInterface/index.entrypoint.ts b/web/src/admin/AdminInterface/index.entrypoint.ts index 2797ddb6e1..9b6480078e 100644 --- a/web/src/admin/AdminInterface/index.entrypoint.ts +++ b/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"); } diff --git a/web/src/common/stylesheets.ts b/web/src/common/stylesheets.ts index 094f4ec0bc..84a2459a56 100644 --- a/web/src/common/stylesheets.ts +++ b/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, diff --git a/web/src/flow/index.entrypoint.ts b/web/src/flow/index.entrypoint.ts index 759efa4b9f..9f5cfff49c 100644 --- a/web/src/flow/index.entrypoint.ts +++ b/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"); } diff --git a/web/src/user/index.entrypoint.ts b/web/src/user/index.entrypoint.ts index d295f8ad6a..5bc8721fe4 100644 --- a/web/src/user/index.entrypoint.ts +++ b/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"); }