@dr.pogodin/react-utils 1.46.2 → 1.47.0-alpha.1

package/build/web/shared/components/selectors/NativeDropdown/theme.scss

@@ -0,0 +1,81 @@
+*,
+.context,
+.ad.hoc {
+  &.dropdown {
+    display: flex;
+    flex: 1;
+    min-width: 5.5em;
+    overflow: hidden;
+    position: relative;
+  }
+
+  &.arrow {
+    background-image: linear-gradient(to top, lightgray, white 50%, white);
+    border: 1px solid gray;
+    border-radius: 0 0.3em 0.3em 0;
+    bottom: 0;
+    padding: 0.3em 0.6em;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    &::after {
+      content: '▼';
+    }
+  }
+
+  &.container {
+    align-items: center;
+    display: inline-flex;
+    margin: 0.1em;
+    position: relative;
+  }
+
+  .active + &.arrow,
+  :active + &.arrow {
+    background-image: linear-gradient(to bottom, lightgray, white 50%, white);
+    border-bottom-right-radius: 0;
+  }
+
+  :focus + &.arrow {
+    border-color: blue;
+    border-left-color: gray;
+  }
+
+  &.label {
+    margin: 0 0.6em 0 1.5em;
+    pointer-events: none;
+  }
+
+  &.option { color: black; }
+  &.hiddenOption { display: none; }
+
+  &.select {
+    appearance: none;
+    background: white;
+    border: 1px solid gray;
+    border-radius: 0.3em;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+    flex: 1;
+    font: inherit;
+    max-width: 100%;
+    outline: none;
+    padding: 0.3em 3.3em calc(0.3em + 1px) 1.2em;
+
+    &:active {
+      background: white;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:focus {
+      border-color: blue;
+      box-shadow: 0 0 3px 1px lightblue;
+    }
+
+    &.invalid { color: gray; }
+  }
+}

package/build/web/shared/components/selectors/Switch/index.js

@@ -0,0 +1,49 @@
+import themed from '@dr.pogodin/react-themes';
+import { optionValueName } from "../common";
+import defaultTheme from "./theme.scss";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BaseSwitch = ({
+  label,
+  onChange,
+  options,
+  theme,
+  value
+}) => {
+  if (!options || !theme.option) throw Error('Internal error');
+  const optionNodes = [];
+  for (const option of options) {
+    const [iValue, iName] = optionValueName(option);
+    let className = theme.option;
+    let onPress;
+    if (iValue === value) className += ` ${theme.selected}`;else if (onChange) {
+      onPress = () => {
+        onChange(iValue);
+      };
+    }
+    optionNodes.push(onPress ? /*#__PURE__*/_jsx("div", {
+      className: className,
+      onClick: onPress,
+      onKeyDown: e => {
+        if (e.key === 'Enter') onPress();
+      },
+      role: "button",
+      tabIndex: 0,
+      children: iName
+    }, iValue) : /*#__PURE__*/_jsx("div", {
+      className: className,
+      children: iName
+    }, iValue));
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: theme.container,
+    children: [label ? /*#__PURE__*/_jsx("div", {
+      className: theme.label,
+      children: label
+    }) : null, /*#__PURE__*/_jsx("div", {
+      className: theme.options,
+      children: optionNodes
+    })]
+  });
+};
+export default themed(BaseSwitch, 'Switch', defaultTheme);
+//# sourceMappingURL=index.js.map

package/build/web/shared/components/selectors/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["themed","optionValueName","defaultTheme","jsx","_jsx","jsxs","_jsxs","BaseSwitch","label","onChange","options","theme","value","option","Error","optionNodes","iValue","iName","className","onPress","selected","push","onClick","onKeyDown","e","key","role","tabIndex","children","container"],"sources":["../../../../../../src/shared/components/selectors/Switch/index.tsx"],"sourcesContent":["import themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport {\n  type OptionsT,\n  type ValueT,\n  optionValueName,\n} from '../common';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'container' | 'label' | 'option' | 'options' | 'selected';\n\ntype PropsT = {\n  label?: React.ReactNode;\n  onChange?: (value: ValueT) => void;\n  options?: Readonly<OptionsT<React.ReactNode>>;\n  theme: Theme<ThemeKeyT>;\n  value?: ValueT;\n};\n\nconst BaseSwitch: React.FunctionComponent<PropsT> = ({\n  label,\n  onChange,\n  options,\n  theme,\n  value,\n}) => {\n  if (!options || !theme.option) throw Error('Internal error');\n\n  const optionNodes: React.ReactNode[] = [];\n  for (const option of options) {\n    const [iValue, iName] = optionValueName(option);\n\n    let className: string = theme.option;\n    let onPress: (() => void) | undefined;\n    if (iValue === value) className += ` ${theme.selected}`;\n    else if (onChange) {\n      onPress = () => {\n        onChange(iValue);\n      };\n    }\n\n    optionNodes.push(\n      onPress\n        ? (\n          <div\n            className={className}\n            key={iValue}\n            onClick={onPress}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') onPress();\n            }}\n            role=\"button\"\n            tabIndex={0}\n          >\n            {iName}\n          </div>\n        )\n        : <div className={className} key={iValue}>{iName}</div>,\n    );\n  }\n\n  return (\n    <div className={theme.container}>\n      {label ? <div className={theme.label}>{label}</div> : null}\n\n      <div className={theme.options}>\n        {optionNodes}\n      </div>\n    </div>\n  );\n};\n\nexport default themed(BaseSwitch, 'Switch', defaultTheme);\n"],"mappings":"AAAA,OAAOA,MAAM,MAAsB,0BAA0B;AAE7D,SAGEC,eAAe;AAGjB,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYxC,MAAMC,UAA2C,GAAGA,CAAC;EACnDC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAI,CAACF,OAAO,IAAI,CAACC,KAAK,CAACE,MAAM,EAAE,MAAMC,KAAK,CAAC,gBAAgB,CAAC;EAE5D,MAAMC,WAA8B,GAAG,EAAE;EACzC,KAAK,MAAMF,MAAM,IAAIH,OAAO,EAAE;IAC5B,MAAM,CAACM,MAAM,EAAEC,KAAK,CAAC,GAAGhB,eAAe,CAACY,MAAM,CAAC;IAE/C,IAAIK,SAAiB,GAAGP,KAAK,CAACE,MAAM;IACpC,IAAIM,OAAiC;IACrC,IAAIH,MAAM,KAAKJ,KAAK,EAAEM,SAAS,IAAI,IAAIP,KAAK,CAACS,QAAQ,EAAE,CAAC,KACnD,IAAIX,QAAQ,EAAE;MACjBU,OAAO,GAAGA,CAAA,KAAM;QACdV,QAAQ,CAACO,MAAM,CAAC;MAClB,CAAC;IACH;IAEAD,WAAW,CAACM,IAAI,CACdF,OAAO,gBAEHf,IAAA;MACEc,SAAS,EAAEA,SAAU;MAErBI,OAAO,EAAEH,OAAQ;MACjBI,SAAS,EAAGC,CAAC,IAAK;QAChB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEN,OAAO,CAAC,CAAC;MAClC,CAAE;MACFO,IAAI,EAAC,QAAQ;MACbC,QAAQ,EAAE,CAAE;MAAAC,QAAA,EAEXX;IAAK,GARDD,MASF,CAAC,gBAENZ,IAAA;MAAKc,SAAS,EAAEA,SAAU;MAAAU,QAAA,EAAeX;IAAK,GAAdD,MAAoB,CAC1D,CAAC;EACH;EAEA,oBACEV,KAAA;IAAKY,SAAS,EAAEP,KAAK,CAACkB,SAAU;IAAAD,QAAA,GAC7BpB,KAAK,gBAAGJ,IAAA;MAAKc,SAAS,EAAEP,KAAK,CAACH,KAAM;MAAAoB,QAAA,EAAEpB;IAAK,CAAM,CAAC,GAAG,IAAI,eAE1DJ,IAAA;MAAKc,SAAS,EAAEP,KAAK,CAACD,OAAQ;MAAAkB,QAAA,EAC3Bb;IAAW,CACT,CAAC;EAAA,CACH,CAAC;AAEV,CAAC;AAED,eAAef,MAAM,CAACO,UAAU,EAAE,QAAQ,EAAEL,YAAY,CAAC","ignoreList":[]}

package/build/web/shared/components/selectors/Switch/theme.scss

@@ -0,0 +1,39 @@
+*,
+.context,
+.ad.hoc {
+  &.container {
+    align-items: center;
+    display: flex;
+    gap: 0.6em;
+  }
+
+  &.option {
+    border: 1px solid transparent;
+    border-radius: 0.3em;
+    cursor: pointer;
+    outline: none;
+    padding: 0 0.9em;
+
+    &:focus {
+      border-color: blue;
+      box-shadow: 0 0 3px 1px lightblue;
+    }
+  }
+
+  &.selected {
+    border: 1px solid gray;
+    background: white;
+    cursor: default;
+  }
+
+  &.options {
+    align-items: center;
+    background: whitesmoke;
+    border: 1px solid gray;
+    border-radius: 0.3em;
+    display: flex;
+    gap: 0.3em;
+    padding: 0.3em;
+    user-select: none;
+  }
+}

package/build/web/shared/components/selectors/common.js

@@ -0,0 +1,12 @@
+// The stuff common between different dropdown implementations.
+
+function isValue(x) {
+  const type = typeof x;
+  return type === 'number' || type === 'string';
+}
+
+/** Returns option value and name as a tuple. */
+export function optionValueName(option) {
+  return isValue(option) ? [option, option] : [option.value, option.name ?? option.value];
+}
+//# sourceMappingURL=common.js.map

package/build/web/shared/components/selectors/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","names":["isValue","x","type","optionValueName","option","value","name"],"sources":["../../../../../src/shared/components/selectors/common.ts"],"sourcesContent":["// The stuff common between different dropdown implementations.\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\ntype ThemeKeyT = 'active'\n  | 'arrow'\n  | 'container'\n  | 'dropdown'\n  | 'hiddenOption'\n  | 'label'\n  | 'option'\n  | 'select'\n\n  // TODO: This is currently only valid for (native) <Dropdown>,\n  // other kinds of selectors should be evaluated, and aligned with this\n  // feature, if appropriate.\n  | 'invalid'\n\n  // TODO: This is only valid for <CustomDropdown>, thus we need to re-factor it\n  // into a separate theme spec for that component.\n  | 'upward';\n\nexport type ValueT = number | string;\n\nexport type OptionT<NameT> = {\n  name?: NameT | null;\n  value: ValueT;\n};\n\nexport type OptionsT<NameT> = Readonly<Array<OptionT<NameT> | ValueT>>;\n\nexport type PropsT<\n  NameT,\n  OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,\n> = {\n  filter?: (item: OptionT<NameT> | ValueT) => boolean;\n  label?: React.ReactNode;\n  onChange?: OnChangeT;\n  options: Readonly<OptionsT<NameT>>;\n  testId?: string;\n  theme: Theme<ThemeKeyT>;\n  value?: ValueT;\n};\n\nfunction isValue<T>(x: OptionT<T> | ValueT): x is ValueT {\n  const type = typeof x;\n  return type === 'number' || type === 'string';\n}\n\n/** Returns option value and name as a tuple. */\nexport function optionValueName<NameT>(\n  option: OptionT<NameT> | ValueT,\n): [ValueT, NameT | ValueT] {\n  return isValue(option)\n    ? [option, option]\n    : [option.value, option.name ?? option.value];\n}\n"],"mappings":"AAAA;;AA4CA,SAASA,OAAOA,CAAIC,CAAsB,EAAe;EACvD,MAAMC,IAAI,GAAG,OAAOD,CAAC;EACrB,OAAOC,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ;AAC/C;;AAEA;AACA,OAAO,SAASC,eAAeA,CAC7BC,MAA+B,EACL;EAC1B,OAAOJ,OAAO,CAACI,MAAM,CAAC,GAClB,CAACA,MAAM,EAAEA,MAAM,CAAC,GAChB,CAACA,MAAM,CAACC,KAAK,EAAED,MAAM,CAACE,IAAI,IAAIF,MAAM,CAACC,KAAK,CAAC;AACjD","ignoreList":[]}

package/build/web/shared/components/selectors/index.js

@@ -0,0 +1,4 @@
+export { default as CustomDropdown } from "./CustomDropdown";
+export { default as Dropdown } from "./NativeDropdown";
+export { default as Switch } from "./Switch";
+//# sourceMappingURL=index.js.map

package/build/web/shared/components/selectors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","CustomDropdown","Dropdown","Switch"],"sources":["../../../../../src/shared/components/selectors/index.ts"],"sourcesContent":["export { default as CustomDropdown } from './CustomDropdown';\nexport { default as Dropdown } from './NativeDropdown';\nexport { default as Switch } from './Switch';\n\nexport {\n  type OptionT,\n  type OptionsT,\n} from './common';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,cAAc;AAClC,SAASD,OAAO,IAAIE,QAAQ;AAC5B,SAASF,OAAO,IAAIG,MAAM","ignoreList":[]}

package/build/web/shared/utils/config.js

@@ -0,0 +1,21 @@
+/* global document */
+
+import { IS_CLIENT_SIDE } from "./isomorphy/environment-check";
+import { requireWeak } from "./webpack";
+
+// TODO: The internal type casting is somewhat messed up here,
+// to be corrected later.
+const config = (IS_CLIENT_SIDE
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+? require("../../client/getInj").default().CONFIG : requireWeak('config')) ?? {};
+
+// The safeguard for "document" is necessary because in non-Node environments,
+// like React Native, IS_CLIENT_SIDE is "true", however "document" and a bunch
+// of other browser-world features are not available.
+if (IS_CLIENT_SIDE && typeof document !== 'undefined') {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const cookie = require('cookie');
+  config.CSRF = cookie.parse(document.cookie).csrfToken;
+}
+export default config;
+//# sourceMappingURL=config.js.map

package/build/web/shared/utils/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":["IS_CLIENT_SIDE","requireWeak","config","require","default","CONFIG","document","cookie","CSRF","parse","csrfToken"],"sources":["../../../../src/shared/utils/config.ts"],"sourcesContent":["/* global document */\n\nimport type CookieM from 'cookie';\n\nimport { IS_CLIENT_SIDE } from './isomorphy/environment-check';\nimport { requireWeak } from './webpack';\n\n// TODO: The internal type casting is somewhat messed up here,\n// to be corrected later.\nconst config: Record<string, unknown> = (\n  IS_CLIENT_SIDE\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    ? (require('client/getInj') as {\n      default: () => Record<string, unknown>;\n    }).default().CONFIG\n    : requireWeak('config')\n) as (Record<string, unknown> | undefined) ?? ({} as Record<string, unknown>);\n\n// The safeguard for \"document\" is necessary because in non-Node environments,\n// like React Native, IS_CLIENT_SIDE is \"true\", however \"document\" and a bunch\n// of other browser-world features are not available.\nif (IS_CLIENT_SIDE && typeof document !== 'undefined') {\n  // eslint-disable-next-line @typescript-eslint/no-require-imports\n  const cookie = require('cookie') as typeof CookieM;\n  config.CSRF = cookie.parse(document.cookie).csrfToken;\n}\n\nexport default config;\n"],"mappings":"AAAA;;AAIA,SAASA,cAAc;AACvB,SAASC,WAAW;;AAEpB;AACA;AACA,MAAMC,MAA+B,GAAG,CACtCF;AACE;AAAA,EACGG,OAAO,sBAAgB,CAAC,CAExBC,OAAO,CAAC,CAAC,CAACC,MAAM,GACjBJ,WAAW,CAAC,QAAQ,CAAC,KACoB,CAAC,CAA6B;;AAE7E;AACA;AACA;AACA,IAAID,cAAc,IAAI,OAAOM,QAAQ,KAAK,WAAW,EAAE;EACrD;EACA,MAAMC,MAAM,GAAGJ,OAAO,CAAC,QAAQ,CAAmB;EAClDD,MAAM,CAACM,IAAI,GAAGD,MAAM,CAACE,KAAK,CAACH,QAAQ,CAACC,MAAM,CAAC,CAACG,SAAS;AACvD;AAEA,eAAeR,MAAM","ignoreList":[]}

package/build/web/shared/utils/globalState.js

@@ -0,0 +1,15 @@
+import { withGlobalStateType } from '@dr.pogodin/react-global-state';
+
+/** Mapping "chunkName" > array of asset paths. */
+
+// The type of data object injected by server into generated markup.
+
+// TODO: Not 100% sure now, whether it indeed can be replaced by type,
+// or do we really need it to be an interface. Keeping the interface for now.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+
+const {
+  getSsrContext
+} = withGlobalStateType();
+export { getSsrContext };
+//# sourceMappingURL=globalState.js.map

package/build/web/shared/utils/globalState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"globalState.js","names":["withGlobalStateType","getSsrContext"],"sources":["../../../../src/shared/utils/globalState.ts"],"sourcesContent":["import type { Request } from 'express';\n\nimport { type SsrContext, withGlobalStateType } from '@dr.pogodin/react-global-state';\n\n/** Mapping \"chunkName\" > array of asset paths. */\nexport type ChunkGroupsT = Record<string, string[]>;\n\n// The type of data object injected by server into generated markup.\nexport type InjT = {\n  CHUNK_GROUPS?: ChunkGroupsT;\n  CONFIG?: Record<string, unknown>;\n  ISTATE?: unknown;\n};\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions\n  interface Window {\n    REACT_UTILS_INJECTION?: InjT;\n  }\n}\n\n// TODO: Not 100% sure now, whether it indeed can be replaced by type,\n// or do we really need it to be an interface. Keeping the interface for now.\n// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport interface SsrContextT<StateT> extends SsrContext<StateT> {\n  chunkGroups: ChunkGroupsT;\n  chunks: string[];\n\n  /** If set at the end of SSR, the rendered will trigger\n   *  server-side redirect to this URL (and use the status\n   *  code). */\n  redirectTo?: string;\n\n  req: Request;\n  status: number;\n}\n\nconst {\n  getSsrContext,\n} = withGlobalStateType<unknown, SsrContextT<unknown>>();\n\nexport {\n  getSsrContext,\n};\n"],"mappings":"AAEA,SAA0BA,mBAAmB,QAAQ,gCAAgC;;AAErF;;AAGA;;AAcA;AACA;AACA;;AAcA,MAAM;EACJC;AACF,CAAC,GAAGD,mBAAmB,CAAgC,CAAC;AAExD,SACEC,aAAa","ignoreList":[]}

package/build/web/shared/utils/index.js

@@ -0,0 +1,13 @@
+import themedImpl, { COMPOSE, PRIORITY, ThemeProvider } from '@dr.pogodin/react-themes';
+import config from "./config";
+import * as isomorphy from "./isomorphy";
+import time from "./time";
+import * as webpack from "./webpack";
+export { assertEmptyObject, Barrier, Cached, Emitter, Semaphore, withRetries } from '@dr.pogodin/js-utils';
+export { getSsrContext } from "./globalState";
+export { default as splitComponent } from "./splitComponent";
+const themed = themedImpl;
+themed.COMPOSE = COMPOSE;
+themed.PRIORITY = PRIORITY;
+export { config, isomorphy, themed, ThemeProvider, time, webpack };
+//# sourceMappingURL=index.js.map

package/build/web/shared/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["themedImpl","COMPOSE","PRIORITY","ThemeProvider","config","isomorphy","time","webpack","assertEmptyObject","Barrier","Cached","Emitter","Semaphore","withRetries","getSsrContext","default","splitComponent","themed"],"sources":["../../../../src/shared/utils/index.ts"],"sourcesContent":["import themedImpl, {\n  COMPOSE,\n  PRIORITY,\n  type Theme,\n  ThemeProvider,\n} from '@dr.pogodin/react-themes';\n\nimport config from './config';\nimport * as isomorphy from './isomorphy';\nimport time from './time';\nimport * as webpack from './webpack';\n\nexport {\n  assertEmptyObject,\n  type Listener,\n  type ObjectKey,\n  Barrier,\n  Cached,\n  Emitter,\n  Semaphore,\n  withRetries,\n} from '@dr.pogodin/js-utils';\n\nexport { getSsrContext } from './globalState';\nexport { default as splitComponent } from './splitComponent';\n\ntype ThemedT = typeof themedImpl & {\n  COMPOSE: typeof COMPOSE;\n  PRIORITY: typeof PRIORITY;\n};\n\nconst themed: ThemedT = themedImpl as ThemedT;\n\nthemed.COMPOSE = COMPOSE;\nthemed.PRIORITY = PRIORITY;\n\nexport {\n  type Theme,\n  config,\n  isomorphy,\n  themed,\n  ThemeProvider,\n  time,\n  webpack,\n};\n"],"mappings":"AAAA,OAAOA,UAAU,IACfC,OAAO,EACPC,QAAQ,EAERC,aAAa,QACR,0BAA0B;AAEjC,OAAOC,MAAM;AACb,OAAO,KAAKC,SAAS;AACrB,OAAOC,IAAI;AACX,OAAO,KAAKC,OAAO;AAEnB,SACEC,iBAAiB,EAGjBC,OAAO,EACPC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,WAAW,QACN,sBAAsB;AAE7B,SAASC,aAAa;AACtB,SAASC,OAAO,IAAIC,cAAc;AAOlC,MAAMC,MAAe,GAAGjB,UAAqB;AAE7CiB,MAAM,CAAChB,OAAO,GAAGA,OAAO;AACxBgB,MAAM,CAACf,QAAQ,GAAGA,QAAQ;AAE1B,SAEEE,MAAM,EACNC,SAAS,EACTY,MAAM,EACNd,aAAa,EACbG,IAAI,EACJC,OAAO","ignoreList":[]}

package/build/web/shared/utils/isomorphy/buildInfo.js

@@ -0,0 +1,44 @@
+// Encapsulates access to "Build Info" data.
+
+// BEWARE: This should match the type of build info object generated by
+// Webpack build (see "/config/webpack/app-base.js"), and currently this
+// match is not checked automatically.
+
+// Depending on the build mode & environment, BUILD_INFO is either a global
+// variable defined at the app launch, or it is replaced by the actual value
+// by the Webpack build.
+
+let buildInfo;
+
+// On the client side "BUILD_INFO" should be injected by Webpack. Note, however,
+// that in test environment we may need situations were environment is mocked as
+// client-side, although no proper Webpack compilation is executed, thus no info
+// injected; because of this we don't do a hard environment check here.
+if (typeof BUILD_INFO !== 'undefined') buildInfo = BUILD_INFO;
+
+/**
+ * In scenarious where "BUILD_INFO" is not injected by Webpack (server-side,
+ * tests, etc.) we expect the host codebase to explicitly set it before it is
+ * ever requested. As a precaution, this function throws if build info has been
+ * set already, unless `force` flag is explicitly set.
+ * @param info
+ * @param force
+ */
+export function setBuildInfo(info, force = false) {
+  if (buildInfo !== undefined && !force) {
+    throw Error('"Build Info" is already initialized');
+  }
+  buildInfo = info;
+}
+
+/**
+ * Returns "Build Info" object; throws if it has not been initialized yet.
+ * @returns
+ */
+export function getBuildInfo() {
+  if (buildInfo === undefined) {
+    throw Error('"Build Info" has not been initialized yet');
+  }
+  return buildInfo;
+}
+//# sourceMappingURL=buildInfo.js.map

package/build/web/shared/utils/isomorphy/buildInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildInfo.js","names":["buildInfo","BUILD_INFO","setBuildInfo","info","force","undefined","Error","getBuildInfo"],"sources":["../../../../../src/shared/utils/isomorphy/buildInfo.ts"],"sourcesContent":["// Encapsulates access to \"Build Info\" data.\n\n// BEWARE: This should match the type of build info object generated by\n// Webpack build (see \"/config/webpack/app-base.js\"), and currently this\n// match is not checked automatically.\nexport type BuildInfoT = {\n  key: string;\n  publicPath: string;\n  timestamp: string;\n  useServiceWorker: boolean;\n};\n\n// Depending on the build mode & environment, BUILD_INFO is either a global\n// variable defined at the app launch, or it is replaced by the actual value\n// by the Webpack build.\ndeclare const BUILD_INFO: BuildInfoT | undefined;\n\nlet buildInfo: BuildInfoT | undefined;\n\n// On the client side \"BUILD_INFO\" should be injected by Webpack. Note, however,\n// that in test environment we may need situations were environment is mocked as\n// client-side, although no proper Webpack compilation is executed, thus no info\n// injected; because of this we don't do a hard environment check here.\nif (typeof BUILD_INFO !== 'undefined') buildInfo = BUILD_INFO;\n\n/**\n * In scenarious where \"BUILD_INFO\" is not injected by Webpack (server-side,\n * tests, etc.) we expect the host codebase to explicitly set it before it is\n * ever requested. As a precaution, this function throws if build info has been\n * set already, unless `force` flag is explicitly set.\n * @param info\n * @param force\n */\nexport function setBuildInfo(info?: BuildInfoT, force = false): void {\n  if (buildInfo !== undefined && !force) {\n    throw Error('\"Build Info\" is already initialized');\n  }\n  buildInfo = info;\n}\n\n/**\n * Returns \"Build Info\" object; throws if it has not been initialized yet.\n * @returns\n */\nexport function getBuildInfo(): BuildInfoT {\n  if (buildInfo === undefined) {\n    throw Error('\"Build Info\" has not been initialized yet');\n  }\n  return buildInfo;\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;;AAQA;AACA;AACA;;AAGA,IAAIA,SAAiC;;AAErC;AACA;AACA;AACA;AACA,IAAI,OAAOC,UAAU,KAAK,WAAW,EAAED,SAAS,GAAGC,UAAU;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAACC,IAAiB,EAAEC,KAAK,GAAG,KAAK,EAAQ;EACnE,IAAIJ,SAAS,KAAKK,SAAS,IAAI,CAACD,KAAK,EAAE;IACrC,MAAME,KAAK,CAAC,qCAAqC,CAAC;EACpD;EACAN,SAAS,GAAGG,IAAI;AAClB;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASI,YAAYA,CAAA,EAAe;EACzC,IAAIP,SAAS,KAAKK,SAAS,EAAE;IAC3B,MAAMC,KAAK,CAAC,2CAA2C,CAAC;EAC1D;EACA,OAAON,SAAS;AAClB","ignoreList":[]}

package/build/web/shared/utils/isomorphy/environment-check.js

@@ -0,0 +1,17 @@
+// Checks for client- vs. server-side environment detection.
+
+/**
+ * `true` within client-side environment (browser), `false` at server-side.
+ */
+export const IS_CLIENT_SIDE = typeof process !== 'object'
+// NOTE: Because in this case we assume the host environment might be partially
+// polyfilled to emulate some Node interfaces, thus it might have global `process`
+// object, but without `versions` sub-object inside it.
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+|| !process.versions?.node || !!global.REACT_UTILS_FORCE_CLIENT_SIDE || typeof REACT_UTILS_WEBPACK_BUNDLE !== 'undefined';
+
+/**
+ * `true` within the server-side environment (node), `false` at client-side.
+ */
+export const IS_SERVER_SIDE = !IS_CLIENT_SIDE;
+//# sourceMappingURL=environment-check.js.map

package/build/web/shared/utils/isomorphy/environment-check.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"environment-check.js","names":["IS_CLIENT_SIDE","process","versions","node","global","REACT_UTILS_FORCE_CLIENT_SIDE","REACT_UTILS_WEBPACK_BUNDLE","IS_SERVER_SIDE"],"sources":["../../../../../src/shared/utils/isomorphy/environment-check.ts"],"sourcesContent":["// Checks for client- vs. server-side environment detection.\n\n/**\n * `true` within client-side environment (browser), `false` at server-side.\n */\nexport const IS_CLIENT_SIDE: boolean = typeof process !== 'object'\n  // NOTE: Because in this case we assume the host environment might be partially\n  // polyfilled to emulate some Node interfaces, thus it might have global `process`\n  // object, but without `versions` sub-object inside it.\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  || !process.versions?.node\n  || !!global.REACT_UTILS_FORCE_CLIENT_SIDE\n  || typeof REACT_UTILS_WEBPACK_BUNDLE !== 'undefined';\n\n/**\n * `true` within the server-side environment (node), `false` at client-side.\n */\nexport const IS_SERVER_SIDE: boolean = !IS_CLIENT_SIDE;\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA,OAAO,MAAMA,cAAuB,GAAG,OAAOC,OAAO,KAAK;AACxD;AACA;AACA;AACA;AAAA,GACG,CAACA,OAAO,CAACC,QAAQ,EAAEC,IAAI,IACvB,CAAC,CAACC,MAAM,CAACC,6BAA6B,IACtC,OAAOC,0BAA0B,KAAK,WAAW;;AAEtD;AACA;AACA;AACA,OAAO,MAAMC,cAAuB,GAAG,CAACP,cAAc","ignoreList":[]}

package/build/web/shared/utils/isomorphy/index.js

@@ -0,0 +1,36 @@
+import { getBuildInfo } from "./buildInfo";
+import { IS_CLIENT_SIDE, IS_SERVER_SIDE } from "./environment-check";
+
+/**
+ * @ignore
+ * @return {string} Code mode: "development" or "production".
+ */
+function getMode() {
+  return process.env.NODE_ENV;
+}
+
+/**
+ * Returns `true` if development version of the code is running;
+ * `false` otherwise.
+ */
+export function isDevBuild() {
+  return getMode() === 'development';
+}
+
+/**
+ * Returns `true` if production build of the code is running;
+ * `false` otherwise.
+ */
+export function isProdBuild() {
+  return getMode() === 'production';
+}
+
+/**
+ * Returns build timestamp of the front-end JS bundle.
+ * @return ISO date/time string.
+ */
+export function buildTimestamp() {
+  return getBuildInfo().timestamp;
+}
+export { IS_CLIENT_SIDE, IS_SERVER_SIDE, getBuildInfo };
+//# sourceMappingURL=index.js.map

package/build/web/shared/utils/isomorphy/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getBuildInfo","IS_CLIENT_SIDE","IS_SERVER_SIDE","getMode","process","env","NODE_ENV","isDevBuild","isProdBuild","buildTimestamp","timestamp"],"sources":["../../../../../src/shared/utils/isomorphy/index.ts"],"sourcesContent":["import { getBuildInfo } from './buildInfo';\nimport { IS_CLIENT_SIDE, IS_SERVER_SIDE } from './environment-check';\n\n/**\n * @ignore\n * @return {string} Code mode: \"development\" or \"production\".\n */\nfunction getMode() {\n  return process.env.NODE_ENV;\n}\n\n/**\n * Returns `true` if development version of the code is running;\n * `false` otherwise.\n */\nexport function isDevBuild(): boolean {\n  return getMode() === 'development';\n}\n\n/**\n * Returns `true` if production build of the code is running;\n * `false` otherwise.\n */\nexport function isProdBuild(): boolean {\n  return getMode() === 'production';\n}\n\n/**\n * Returns build timestamp of the front-end JS bundle.\n * @return ISO date/time string.\n */\nexport function buildTimestamp(): string {\n  return getBuildInfo().timestamp;\n}\n\nexport { IS_CLIENT_SIDE, IS_SERVER_SIDE, getBuildInfo };\n"],"mappings":"AAAA,SAASA,YAAY;AACrB,SAASC,cAAc,EAAEC,cAAc;;AAEvC;AACA;AACA;AACA;AACA,SAASC,OAAOA,CAAA,EAAG;EACjB,OAAOC,OAAO,CAACC,GAAG,CAACC,QAAQ;AAC7B;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAA,EAAY;EACpC,OAAOJ,OAAO,CAAC,CAAC,KAAK,aAAa;AACpC;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASK,WAAWA,CAAA,EAAY;EACrC,OAAOL,OAAO,CAAC,CAAC,KAAK,YAAY;AACnC;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASM,cAAcA,CAAA,EAAW;EACvC,OAAOT,YAAY,CAAC,CAAC,CAACU,SAAS;AACjC;AAEA,SAAST,cAAc,EAAEC,cAAc,EAAEF,YAAY","ignoreList":[]}

package/build/web/shared/utils/jest/E2eSsrEnv.js

@@ -0,0 +1,230 @@
+/**
+ * Jest environment for end-to-end SSR and client-side testing. It relies on
+ * the standard react-utils mechanics to execute SSR of given scene, and also
+ * Webpack build of the code for client-side execution, it further exposes
+ * Jsdom environment for the client-side testing of the outcomes.
+ */
+
+// BEWARE: The module is not imported into the JU module / the main assembly of
+// the library, because doing so easily breaks stuff:
+//  1)  This module depends on Node-specific modules, which would make JU
+//      incompatible with JsDom if included into JU.
+//  2)  If this module is weakly imported from somewhere else in the lib,
+//      it seems to randomly break tests using it for a different reason,
+//      probably some sort of a require-loop, or some issues with weak
+//      require in that scenario.
+
+// TODO: We need to add correct typing for environment options.
+
+import path from 'node:path';
+import defaults from 'lodash/defaults';
+import set from 'lodash/set';
+// As this environment is a part of the Jest testing utils,
+// we assume development dependencies are available when it is used.
+/* eslint-disable import/no-extraneous-dependencies */
+import register from '@babel/register/experimental-worker';
+import JsdomEnv from 'jest-environment-jsdom';
+import { Volume, createFsFromVolume } from 'memfs';
+import webpack from 'webpack';
+/* eslint-enable import/no-extraneous-dependencies */
+
+import ssrFactory from "../../../server/renderer";
+import { setBuildInfo } from "../isomorphy/buildInfo";
+function noop() {
+  // NOOP
+}
+export default class E2eSsrEnv extends JsdomEnv {
+  /**
+   * Loads Webpack config, and exposes it to the environment via global
+   * webpackConfig object.
+   */
+  loadWebpackConfig() {
+    const optionsString = this.pragmas['webpack-config-options'];
+    const options = optionsString ? JSON.parse(optionsString) : {};
+    defaults(options, {
+      context: this.testFolder,
+      fs: this.global.webpackOutputFs
+    });
+    const factoryPath = this.pragmas['webpack-config-factory'];
+    // eslint-disable-next-line import/no-dynamic-require, @typescript-eslint/no-require-imports
+    let factory = require(path.resolve(this.rootDir, factoryPath));
+    factory = 'default' in factory ? factory.default : factory;
+    this.global.webpackConfig = factory(options);
+    const fs = this.global.webpackOutputFs;
+    let buildInfo = `${options.context}/.build-info`;
+    if (fs.existsSync(buildInfo)) {
+      buildInfo = fs.readFileSync(buildInfo, 'utf8');
+      this.global.buildInfo = JSON.parse(buildInfo);
+    }
+  }
+
+  /**
+   * Executes Webpack build.
+   * @return {Promise}
+   */
+  async runWebpack() {
+    this.loadWebpackConfig();
+    if (!this.global.webpackConfig) throw Error('Failed to load Webpack config');
+    const compiler = webpack(this.global.webpackConfig);
+    if (!compiler) throw Error('Failed to construct Webpack compiler');
+
+    // TODO: The "as typeof compiler.outputFileSystem" piece below is
+    // a workaround for the Webpack regression:
+    // https://github.com/webpack/webpack/issues/18242
+    compiler.outputFileSystem = this.global.webpackOutputFs;
+    return new Promise((done, fail) => {
+      compiler.run((err, stats) => {
+        if (err) fail(err);
+        if (stats?.hasErrors()) {
+          // eslint-disable-next-line no-console
+          console.error(stats.toJson().errors);
+          fail(Error('Webpack compilation failed'));
+        }
+        this.global.webpackStats = stats?.toJson();
+
+        // Keeps reference to the raw Webpack stats object, which should be
+        // explicitly passed to the server-side renderer alongside the request,
+        // so that it can to pick up asset paths for different named chunks.
+        this.webpackStats = stats;
+        done();
+      });
+    });
+  }
+  async runSsr() {
+    const optionsString = this.pragmas['ssr-options'];
+    const options = optionsString ? JSON.parse(optionsString) : {};
+
+    // TODO: This is temporary to shortcut the logging added to SSR.
+    options.logger ??= {
+      debug: noop,
+      info: noop,
+      log: noop,
+      warn: noop
+    };
+    options.buildInfo ??= this.global.buildInfo;
+    let cleanup;
+    if (options.entry) {
+      const p = path.resolve(this.testFolder, options.entry);
+      // TODO: This sure can be replaced by a dynamic import().
+      // eslint-disable-next-line import/no-dynamic-require, @typescript-eslint/no-require-imports
+      const module = require(p);
+      if ('cleanup' in module) cleanup = module.cleanup;
+      const exportName = options.entryExportName || 'default';
+      if (exportName in module) {
+        options.Application = module[exportName];
+      }
+    }
+    const renderer = ssrFactory(this.global.webpackConfig, options);
+    let status = 200; // OK
+    const markup = await new Promise((done, fail) => {
+      void renderer(this.ssrRequest,
+      // TODO: This will do for now, with the current implementation of
+      // the renderer, but it will require a rework once the renderer is
+      // updated to do streaming.
+      {
+        cookie: noop,
+        send: done,
+        set: noop,
+        status: value => {
+          status = value;
+        },
+        // This is how up-to-date Webpack stats are passed to the server in
+        // development mode, and we use this here always, instead of having
+        // to pass some information via filesystem.
+        locals: {
+          webpack: {
+            devMiddleware: {
+              stats: this.webpackStats
+            }
+          }
+        }
+      }, error => {
+        // TODO: Strictly speaking, that error as Error casting is not all
+        // correct, but it works, so no need to spend time on it right now.
+        if (error) fail(error);else done('');
+      });
+    });
+    this.global.ssrMarkup = markup;
+    this.global.ssrOptions = options;
+    this.global.ssrStatus = status;
+    if (cleanup) cleanup();
+  }
+  constructor(config, context) {
+    const pragmas = context.docblockPragmas;
+    const requestString = pragmas['ssr-request'];
+    const request = requestString ? JSON.parse(requestString) : {};
+    request.url ??= '/';
+    request.csrfToken = noop;
+
+    // This ensures the initial JsDom URL matches the value we use for SSR.
+    set(config.projectConfig, 'testEnvironmentOptions.url', `http://localhost${request.url}`);
+    super(config, context);
+    this.global.dom = this.dom;
+    this.global.webpackOutputFs = createFsFromVolume(new Volume());
+
+    // Extracts necessary settings from config and context.
+    const {
+      projectConfig
+    } = config;
+    this.rootDir = projectConfig.rootDir;
+    this.testFolder = path.dirname(context.testPath);
+    this.withSsr = !pragmas['no-ssr'];
+    this.ssrRequest = request;
+    this.pragmas = pragmas;
+
+    // The usual "babel-jest" transformation setup does not apply to
+    // the environment code and imports from it, this workaround enables it.
+    const optionsString = this.pragmas['ssr-options'];
+    const options = optionsString ? JSON.parse(optionsString) : {};
+    let root;
+    switch (options.root) {
+      case 'TEST':
+        root = this.testFolder;
+        break;
+      default:
+        root = process.cwd();
+    }
+    register({
+      envName: options.babelEnv,
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.svg'],
+      root
+    });
+  }
+  async setup() {
+    await super.setup();
+    await this.runWebpack();
+
+    // NOTE: It is possible that the Webpack run above, and the SSR run below
+    // load different versions of the same module (CommonJS, and ES), and it may
+    // cause very confusing problems (e.g. see:
+    // https://github.com/birdofpreyru/react-utils/issues/413).
+    // It seems we can't reset the cache of ES modules, and Jest's module reset
+    // does not reset modules loaded in this enviroment module, and also only
+    // replacing entire cache object by and empty {} seems to help (in contrast
+    // to deleting all entries by their keys, as it is done within .teardown()
+    // method below). Thus, for now we do this as a hotfix, and we also reset
+    // build info to undefined, because ES module version not beeing reset
+    // triggers an error on the subsequent test using the environment.
+    // TODO: Look for a cleaner solution.
+    require.cache = {};
+    setBuildInfo(undefined, true);
+    if (this.withSsr) await this.runSsr();
+    this.global.REACT_UTILS_FORCE_CLIENT_SIDE = true;
+  }
+  async teardown() {
+    delete this.global.REACT_UTILS_FORCE_CLIENT_SIDE;
+
+    // Resets module cache and @babel/register. Effectively this ensures that
+    // the next time an instance of this environment is set up, all modules are
+    // transformed by Babel from scratch, thus taking into account the latest
+    // Babel config (which may change between different environment instances,
+    // which does not seem to be taken into account by Babel / Node caches
+    // automatically).
+    Object.keys(require.cache).forEach(key => {
+      delete require.cache[key];
+    });
+    register.revert();
+    await super.teardown();
+  }
+}
+//# sourceMappingURL=E2eSsrEnv.js.map