@dr.pogodin/react-utils 1.47.0-alpha.7 → 1.47.0-alpha.8

package/src/shared/utils/splitComponent.tsx

@@ -1,284 +0,0 @@
-/* global document */
-
-import {
-  type ComponentType,
-  type FunctionComponent,
-  type ReactNode,
-  type RefObject,
-  Suspense,
-  lazy,
-  useInsertionEffect,
-} from 'react';
-
-import { Barrier } from '@dr.pogodin/js-utils';
-
-import { type ChunkGroupsT, getSsrContext } from './globalState';
-
-import {
-  IS_CLIENT_SIDE,
-  IS_SERVER_SIDE,
-  getBuildInfo,
-} from './isomorphy';
-
-function getClientChunkGroups(): Promise<ChunkGroupsT> | undefined {
-  if (!IS_CLIENT_SIDE) return undefined;
-
-  return (async () => {
-    const { default: getInj } = await import(/* webpackChunkName: "react-utils-client-side-code" */ '../../client/getInj');
-
-    const inj = await getInj();
-    return inj.CHUNK_GROUPS ?? {};
-  })();
-}
-
-const refCounts: Record<string, number> = {};
-
-function getPublicPath() {
-  return getBuildInfo().publicPath;
-}
-
-/**
- * Client-side only! Ensures the specified CSS stylesheet is loaded into
- * the document; loads if it is missing; and does simple reference counting
- * to facilitate future clean-up.
- * @param name
- * @param loadedSheets
- * @param refCount
- * @return
- */
-function bookStyleSheet(
-  name: string,
-  loadedSheets: Set<string>,
-  refCount: boolean,
-): Promise<void> | undefined {
-  let res: Barrier<void> | undefined;
-  const path = `${getPublicPath()}/${name}`;
-  const fullPath = `${document.location.origin}${path}`;
-
-  if (!loadedSheets.has(fullPath)) {
-    let link = document.querySelector(`link[href="${path}"]`);
-
-    if (!link) {
-      link = document.createElement('link');
-      link.setAttribute('rel', 'stylesheet');
-      link.setAttribute('href', path);
-      document.head.appendChild(link);
-    }
-
-    res = new Barrier<void>();
-    link.addEventListener('load', () => {
-      if (!res) throw Error('Internal error');
-      void res.resolve();
-    });
-    link.addEventListener('error', () => {
-      if (!res) throw Error('Internal error');
-      void res.resolve();
-    });
-  }
-
-  if (refCount) {
-    const current = refCounts[path] ?? 0;
-    refCounts[path] = 1 + current;
-  }
-
-  return res;
-}
-
-/**
- * Generates the set of URLs for currently loaded, linked stylesheets.
- * @return
- */
-function getLoadedStyleSheets(): Set<string> {
-  const res = new Set<string>();
-  const { styleSheets } = document;
-  for (const { href } of styleSheets) {
-    if (href) res.add(href);
-  }
-  return res;
-}
-
-function assertChunkName(
-  chunkName: string,
-  chunkGroups: ChunkGroupsT,
-) {
-  if (chunkGroups[chunkName]) return;
-  throw Error(`Unknown chunk name "${chunkName}"`);
-}
-
-/**
- * Client-side only! Ensures all CSS stylesheets required for the specified
- * code chunk are loaded into the document; loads the missing ones; and does
- * simple reference counting to facilitate future clean-up.
- * @param chunkName Chunk name.
- * @param refCount
- * @return Resolves once all pending stylesheets, necessary for
- *  the chunk, are either loaded, or failed to load.
- */
-export async function bookStyleSheets(
-  chunkName: string,
-  chunkGroups: ChunkGroupsT,
-  refCount: boolean,
-): Promise<void> {
-  const promises = [];
-  const assets = chunkGroups[chunkName];
-  if (!assets) return Promise.resolve();
-
-  const loadedSheets = getLoadedStyleSheets();
-
-  for (const asset of assets) {
-    if (asset.endsWith('.css')) {
-      const promise = bookStyleSheet(asset, loadedSheets, refCount);
-      if (promise) promises.push(promise);
-    }
-  }
-
-  return promises.length
-    ? Promise.allSettled(promises).then()
-    : Promise.resolve();
-}
-
-/**
- * Client-side only! Frees from the document all CSS stylesheets that are
- * required by the specified chunk, and have reference counter equal to one
- * (for chunks with larger reference counter values, it just decrements
- * the reference counter).
- * @param {string} chunkName
- */
-export function freeStyleSheets(
-  chunkName: string,
-  chunkGroups: ChunkGroupsT,
-): void {
-  const assets = chunkGroups[chunkName];
-  if (!assets) return;
-
-  for (const asset of assets) {
-    if (asset.endsWith('.css')) {
-      const path = `${getPublicPath()}/${asset}`;
-
-      const pathRefCount = refCounts[path];
-      if (pathRefCount) {
-        if (pathRefCount <= 1) {
-          document.head.querySelector(`link[href="${path}"]`)!.remove();
-          delete refCounts[path];
-        } else refCounts[path] = pathRefCount - 1;
-      }
-    }
-  }
-}
-
-// Holds the set of chunk names already used for splitComponent() calls.
-const usedChunkNames = new Set();
-
-type ComponentOrModule<PropsT> = ComponentType<PropsT> | {
-  default: ComponentType<PropsT>;
-};
-
-type GenericComponentPropsT = {
-  children?: ReactNode;
-  ref?: RefObject<unknown>;
-
-  // NOTE: This is necessary, as without it this type (with only optional
-  // fields) will be conisdered as "weak" by TypeScript, and it will be
-  // a error to assign to it any type that does not use "children", or "ref".
-  [propName: string]: unknown;
-};
-
-/**
- * Given an async component retrieval function `getComponent()` it creates
- * a special "code split" component, which uses <Suspense> to asynchronously
- * load on demand the code required by `getComponent()`.
- * @param options
- * @param options.chunkName
- * @param {function} options.getComponent
- * @param {React.Element} [options.placeholder]
- * @return {React.ElementType}
- */
-export default function splitComponent<
-  ComponentPropsT extends GenericComponentPropsT,
->({
-  chunkName,
-  getComponent,
-  placeholder,
-}: {
-  chunkName: string;
-  getComponent: () => Promise<ComponentOrModule<ComponentPropsT>>;
-  placeholder?: ReactNode;
-}): FunctionComponent<ComponentPropsT> {
-  // The correct usage of splitComponent() assumes a single call per chunk.
-  if (usedChunkNames.has(chunkName)) {
-    throw Error(`Repeated splitComponent() call for the chunk "${chunkName}"`);
-  } else usedChunkNames.add(chunkName);
-
-  const LazyComponent = lazy(async () => {
-    const clientChunkGroups = await getClientChunkGroups();
-
-    // On the client side we can check right away if the chunk name is known.
-    if (IS_CLIENT_SIDE) {
-      if (!clientChunkGroups) throw Error('Internal error');
-      assertChunkName(chunkName, clientChunkGroups);
-    }
-
-    const resolved = await getComponent();
-    const Component = 'default' in resolved ? resolved.default : resolved;
-
-    // This pre-loads necessary stylesheets prior to the first mount of
-    // the component (the lazy load function is executed by React one at
-    // the frist mount).
-    if (IS_CLIENT_SIDE) {
-      if (!clientChunkGroups) throw Error('Internal error');
-      await bookStyleSheets(chunkName, clientChunkGroups, false);
-    }
-
-    const Wrapper: FunctionComponent<ComponentPropsT> = ({
-      children,
-      ref,
-      ...rest
-    }) => {
-      // On the server side we'll assert the chunk name here,
-      // and also push it to the SSR chunks array.
-      if (IS_SERVER_SIDE) {
-        const { chunkGroups, chunks } = getSsrContext()!;
-        assertChunkName(chunkName, chunkGroups);
-        if (!chunks.includes(chunkName)) chunks.push(chunkName);
-      }
-
-      // This takes care about stylesheets management every time an instance of
-      // this component is mounted / unmounted.
-      useInsertionEffect(() => {
-        if (!clientChunkGroups) throw Error('Internal error');
-        void bookStyleSheets(chunkName, clientChunkGroups, true);
-        return () => {
-          freeStyleSheets(chunkName, clientChunkGroups);
-        };
-      }, []);
-
-      return (
-        <Component
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          {...(rest as unknown as ComponentPropsT)}
-          ref={ref}
-        >
-          {children}
-        </Component>
-      );
-    };
-
-    return { default: Wrapper };
-  });
-
-  const CodeSplit: React.FunctionComponent<ComponentPropsT> = ({
-    children,
-    ...rest
-  }: ComponentPropsT) => (
-    <Suspense fallback={placeholder}>
-      <LazyComponent
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...rest as Parameters<typeof LazyComponent>[0]}
-      >
-        {children}
-      </LazyComponent>
-    </Suspense>
-  );
-
-  return CodeSplit;
-}

package/src/shared/utils/time.ts

@@ -1,101 +0,0 @@
-import { serialize } from 'cookie';
-import { useEffect } from 'react';
-import dayjs from 'dayjs';
-
-import {
-  DAY_MS,
-  HOUR_MS,
-  MIN_MS,
-  SEC_MS,
-  YEAR_MS,
-  timer,
-} from '@dr.pogodin/js-utils';
-
-import { type ForceT, useGlobalState } from '@dr.pogodin/react-global-state';
-
-import { getSsrContext } from './globalState';
-
-/**
- * This react hook wraps Date.now() function in a SSR friendly way,
- * ensuring that all calls to useCurrent() within the same render return
- * exactly the same time (which is retrieved from Date.now() first, and
- * then stored in the global state to be reused in all other calls), which
- * is also passed and used in the first client side render, and then updated
- * with a finite precision to avoid infinite re-rendering loops.
- */
-// TODO: Should we request the state type as generic parameter, to be able
-// to verify the give globalStatePath is correct?
-export function useCurrent({
-  autorefresh = false,
-  globalStatePath = 'currentTime',
-  precision = 5 * SEC_MS,
-} = {}): number {
-  const [now, setter] = useGlobalState<ForceT, number>(
-    globalStatePath,
-    Date.now,
-  );
-  useEffect(() => {
-    let timerId: NodeJS.Timeout | undefined;
-    const update = (): void => {
-      setter((old) => {
-        const neu = Date.now();
-        return Math.abs(neu - old) > precision ? neu : old;
-      });
-      if (autorefresh) timerId = setTimeout(update, precision);
-    };
-    update();
-    return (): void => {
-      if (timerId) clearTimeout(timerId);
-    };
-  }, [autorefresh, precision, setter]);
-  return now;
-}
-
-/**
- * Wraps the standard Date.getTimezoneOffset() method in a SSR-friendly way.
- * This hook retrieves the offset value at the client side and uses a cookie
- * to pass it to the server in subsequent requests from that user. At the server
- * side the value from cookie is used in renders and passed back to the client
- * via the global state. Prior to the value being known (in the very first
- * request from the user, when the cookie is still missing), zero value is used
- * as the default value.
- */
-// TODO: Should we request the state type as generic parameter, to be able
-// to verify the give globalStatePath is correct?
-export function useTimezoneOffset({
-  cookieName = 'timezoneOffset',
-  globalStatePath = 'timezoneOffset',
-} = {}): number {
-  const ssrContext = getSsrContext(false);
-  const [offset, setOffset] = useGlobalState<ForceT, number>(
-    globalStatePath,
-    () => {
-      const value = cookieName
-        && ssrContext?.req.cookies[cookieName] as string;
-      return value ? parseInt(value) : 0;
-    },
-  );
-  useEffect(() => {
-    const date = new Date();
-    const value = date.getTimezoneOffset();
-    setOffset(value);
-    if (cookieName) {
-      document.cookie = serialize(cookieName, value.toString(), { path: '/' });
-    }
-  }, [cookieName, setOffset]);
-  return offset;
-}
-
-const time = {
-  DAY_MS,
-  HOUR_MS,
-  MIN_MS,
-  SEC_MS,
-  YEAR_MS,
-  now: Date.now,
-  timer,
-  useCurrent,
-  useTimezoneOffset,
-};
-
-export default Object.assign(dayjs, time);

package/src/shared/utils/webpack.ts

@@ -1,80 +0,0 @@
-import type PathNS from 'node:path';
-
-// eslint-disable-next-line import/enforce-node-protocol-usage
-import { createRequire } from 'module';
-
-import { IS_CLIENT_SIDE, IS_SERVER_SIDE } from './isomorphy';
-
-type RequireWeakOptionsT = {
-  basePath?: string;
-};
-
-type RequireWeakResT<T> = T extends { default: infer D }
-  ? (D extends null | undefined ? T : D & Omit<T, 'default'>)
-  : T;
-
-let require: ((url: string) => unknown) | undefined;
-
-if (IS_SERVER_SIDE) require = createRequire(import.meta.url);
-
-/**
- * Requires the specified module without including it into the bundle during
- * Webpack build.
- * @param modulePath
- * @param [basePath]
- * @return Required module.
- */
-export function requireWeak<T extends object>(
-  modulePath: string,
-
-  // TODO: For now `basePath` can be provided directly as a string here,
-  // for backward compatibility. Deprecate it in future, if any other
-  // breaking changes are done for requireWeak().
-  basePathOrOptions?: string | RequireWeakOptionsT,
-): RequireWeakResT<T> | null {
-  if (IS_CLIENT_SIDE) return null;
-
-  let basePath: string | undefined;
-  let ops: RequireWeakOptionsT;
-  if (typeof basePathOrOptions === 'string') {
-    basePath = basePathOrOptions;
-  } else {
-    ops = basePathOrOptions ?? {};
-    ({ basePath } = ops);
-  }
-
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { resolve } = require!('node:path') as typeof PathNS;
-
-  const path = basePath ? resolve(basePath, modulePath) : modulePath;
-
-  const module = require!(path) as T;
-
-  if (!('default' in module) || !module.default) return module as RequireWeakResT<T>;
-
-  const { default: def, ...named } = module;
-
-  const res = def as RequireWeakResT<T>;
-
-  Object.entries(named).forEach(([name, value]) => {
-    const assigned = res[name as keyof RequireWeakResT<T>];
-    if (assigned === undefined) {
-      (res[name as keyof RequireWeakResT<T>] as unknown) = value;
-    } else if (assigned !== value) {
-      throw Error('Conflict between default and named exports');
-    }
-  });
-  return res;
-}
-
-/**
- * Resolves specified module path with help of Babel's module resolver.
- * Yes, the function itself just returns its argument to the caller, but Babel
- * is configured to resolve the first argument of resolveWeak(..) function, thus
- * the result will be the resolved path.
- * @param {string} modulePath
- * @return {string} Absolute or relative path to the module.
- */
-export function resolveWeak(modulePath: string): string {
-  return modulePath;
-}

package/src/styles/_global/reset.css

@@ -1,52 +0,0 @@
-/* Eric Meyer's "Reset CSS" 2.0 */
-
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-/* Having all selectors at individual lines is unreadable in the case of this
- * style reset sheet. */
-/* stylelint-disable selector-list-comma-newline-after */
-a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
-body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt,
-em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6,
-header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark,  menu,
-nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span,
-strike, strong,sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr,
-tt, u, ul, var, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
-section {
-  display: block;
-}
-
-body {
-  line-height: 1;
-}
-
-ol, ul {
-  list-style: none;
-}
-
-blockquote, q {
-  quotes: none;
-}
-
-blockquote::before, blockquote::after, q::before, q::after {
-  content: "";
-  content: none;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}

package/src/styles/_mixins/fonts.scss

@@ -1,40 +0,0 @@
-/* Auxiliary mixins for fonts inclusion. */
-
-/**
- * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
- * SVG formats into the app.
- * $font-name {String}
- * $font-weight {Number}
- * $font-style {String}
- * $font-url {String} Path to the font file, without the filename itself.
- * $font-file {String} Font filename, without extension (should be the same for
- *  each version of the font in different formats.
- */
-@mixin font-family($font-name, $font-weight, $font-style, $font-url, $font-file) {
-  @font-face {
-    font-family: "#{$font-name}";
-    font-display: block;
-    font-weight: $font-weight;
-    font-style: $font-style;
-    src: url("#{$font-url}#{$font-file}.eot");
-    src: url("#{$font-url}#{$font-file}.eot?#iefix") format("embedded-opentype"), url("#{$font-url}#{$font-file}.woff") format("woff"), url("#{$font-url}#{$font-file}.ttf") format("truetype");
-  }
-}
-
-/**
- * Includes a font, provided in the TTF format only.
- * $font-name {String}
- * $font-weight {Number}
- * $font-style {String}
- * $font-url {String}
- */
-@mixin font-family-ttf(
-  $font-name, $font-weight, $font-style, $font-url) {
-  @font-face {
-    font-family: $font-name;
-    font-display: block;
-    font-style: $font-style;
-    font-weight: $font-weight;
-    src: url("#{$font-url}.ttf") format("truetype");
-  }
-}

package/src/styles/_mixins/media.scss

@@ -1,150 +0,0 @@
-/**
- * Mixins for different layout sizes: xs, sm, md, lg.
- * Breaking points are defined in _variables.scss
- * The range mixins A-to-B all means "for the sizes from A to B, both
- * inclusive", in particular it means that mixin A-to-lg is equivalent to
- * all sizes from A (inclusive) and larger.
- *
- * NOTE: For convenience, these mixins are sorted not alphabetically, but,
- * first, by increase of the first size; second, by increase of the second size.
- */
-
-/* Break points. */
-
-$screen-xs: 320px !default;
-$screen-sm: 495px !default;
-$screen-mm: 768px !default;
-$screen-md: 1024px !default;
-$screen-lg: 1280px !default;
-
-/* XS */
-
-@mixin xs {
-  @media (max-width: #{$screen-xs}) {
-    @content;
-  }
-}
-
-@mixin xs-to-sm {
-  @media (max-width: #{$screen-sm}) {
-    @content;
-  }
-}
-
-@mixin xs-to-mm {
-  @media (max-width: #{$screen-mm}) {
-    @content;
-  }
-}
-
-@mixin xs-to-md {
-  @media (max-width: #{$screen-md}) {
-    @content;
-  }
-}
-
-@mixin xs-to-lg {
-  @media (max-width: #{$screen-lg}) {
-    @content;
-  }
-}
-
-/* SM */
-
-@mixin sm {
-  @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-sm}) {
-    @content;
-  }
-}
-
-@mixin sm-to-mm {
-  @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-mm}) {
-    @content;
-  }
-}
-
-@mixin sm-to-md {
-  @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-md}) {
-    @content;
-  }
-}
-
-@mixin sm-to-lg {
-  @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-lg}) {
-    @content;
-  }
-}
-
-@mixin sm-to-xl {
-  @media (min-width: #{$screen-xs + 1px}) {
-    @content;
-  }
-}
-
-/* MM */
-
-@mixin mm {
-  @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-mm}) {
-    @content;
-  }
-}
-
-@mixin mm-to-md {
-  @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-md}) {
-    @content;
-  }
-}
-
-@mixin mm-to-lg {
-  @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-lg}) {
-    @content;
-  }
-}
-
-@mixin mm-to-xl {
-  @media (min-width: #{$screen-sm + 1px}) {
-    @content;
-  }
-}
-
-/* MD */
-
-@mixin md {
-  @media (min-width: #{$screen-mm + 1px}) and (max-width: #{$screen-md}) {
-    @content;
-  }
-}
-
-@mixin md-to-lg {
-  @media (min-width: #{$screen-mm + 1px}) and (max-width: #{$screen-lg}) {
-    @content;
-  }
-}
-
-@mixin md-to-xl {
-  @media (min-width: #{$screen-mm + 1px}) {
-    @content;
-  }
-}
-
-/* LG */
-
-@mixin lg {
-  @media (min-width: #{$screen-md + 1px}) and (max-width: #{$screen-lg}) {
-    @content;
-  }
-}
-
-@mixin lg-to-xl {
-  @media (min-width: #{$screen-md + 1px}) {
-    @content;
-  }
-}
-
-/* XL */
-
-@mixin xl {
-  @media (min-width: #{$screen-lg + 1px}) {
-    @content;
-  }
-}