@dr.pogodin/react-utils 1.35.3 → 1.36.0

package/src/shared/utils/splitComponent.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* global document */
 
-import PT from 'prop-types';
-
 import {
   type ComponentType,
   type ReactNode,
@@ -22,23 +20,15 @@ import {
   getBuildInfo,
 } from './isomorphy';
 
-// NOTE: At the client-side we get chunk groups the first time they are needed
-// (we used to get them eagerly when this module loaded, but it did not work well
-// alongside custom chunk info injection in server-less scenario);
-// at the server-side we only can get them within React render flow.
+// Note: At the client side we can get chunk groups immediately when loading
+// the module; at the server-side we only can get them within React render flow.
 // Thus, we set and use the following variable at the client-side, and then when
 // needed on the server side, we'll fetch it differently.
-let cachedClientChunkGroups: ChunkGroupsT | undefined;
-
-function getClientChunkGroups(): ChunkGroupsT {
-  if (IS_CLIENT_SIDE && !cachedClientChunkGroups) {
-    // eslint-disable-next-line global-require
-    cachedClientChunkGroups = require('client/getInj').default().CHUNK_GROUPS || {};
-  }
-
-  if (!cachedClientChunkGroups) throw Error('Internal error');
+let clientChunkGroups: ChunkGroupsT;
 
-  return cachedClientChunkGroups;
+if (IS_CLIENT_SIDE) {
+  // eslint-disable-next-line global-require
+  clientChunkGroups = require('client/getInj').default().CHUNK_GROUPS || {};
 }
 
 const refCounts: { [path: string]: number } = {};
@@ -96,7 +86,7 @@ function getLoadedStyleSheets(): Set<string> {
   const res = new Set<string>();
   const { styleSheets } = document;
   for (let i = 0; i < styleSheets.length; ++i) {
-    const { href } = styleSheets[i];
+    const href = styleSheets[i]?.href;
     if (href) res.add(href);
   }
   return res;
@@ -126,11 +116,13 @@ export function bookStyleSheets(
 ): Promise<void> {
   const promises = [];
   const assets = chunkGroups[chunkName];
+  if (!assets) return Promise.resolve();
+
   const loadedSheets = getLoadedStyleSheets();
 
   for (let i = 0; i < assets.length; ++i) {
     const asset = assets[i];
-    if (asset.endsWith('.css')) {
+    if (asset?.endsWith('.css')) {
       const promise = bookStyleSheet(asset, loadedSheets, refCount);
       if (promise) promises.push(promise);
     }
@@ -153,12 +145,19 @@ export function freeStyleSheets(
   chunkGroups: ChunkGroupsT,
 ) {
   const assets = chunkGroups[chunkName];
+  if (!assets) return;
+
   for (let i = 0; i < assets.length; ++i) {
     const asset = assets[i];
-    if (asset.endsWith('.css')) {
+    if (asset?.endsWith('.css')) {
       const path = `${getPublicPath()}/${asset}`;
-      if (--refCounts[path] <= 0) {
-        document.head.querySelector(`link[href="${path}"]`)!.remove();
+
+      const pathRefCount = refCounts[path];
+      if (pathRefCount) {
+        if (pathRefCount <= 1) {
+          document.head.querySelector(`link[href="${path}"]`)!.remove();
+          delete refCounts[path];
+        } else refCounts[path] = pathRefCount - 1;
       }
     }
   }
@@ -193,7 +192,7 @@ export default function splitComponent<
   placeholder?: ReactNode,
 }) {
   // On the client side we can check right away if the chunk name is known.
-  if (IS_CLIENT_SIDE) assertChunkName(chunkName, getClientChunkGroups());
+  if (IS_CLIENT_SIDE) assertChunkName(chunkName, clientChunkGroups);
 
   // The correct usage of splitComponent() assumes a single call per chunk.
   if (usedChunkNames.has(chunkName)) {
@@ -208,7 +207,7 @@ export default function splitComponent<
     // the component (the lazy load function is executed by React one at
     // the frist mount).
     if (IS_CLIENT_SIDE) {
-      await bookStyleSheets(chunkName, getClientChunkGroups(), false);
+      await bookStyleSheets(chunkName, clientChunkGroups, false);
     }
 
     const Wrapper = forwardRef((
@@ -226,8 +225,8 @@ export default function splitComponent<
       // This takes care about stylesheets management every time an instance of
       // this component is mounted / unmounted.
       useInsertionEffect(() => {
-        bookStyleSheets(chunkName, getClientChunkGroups(), true);
-        return () => freeStyleSheets(chunkName, getClientChunkGroups());
+        bookStyleSheets(chunkName, clientChunkGroups, true);
+        return () => freeStyleSheets(chunkName, clientChunkGroups);
       }, []);
 
       return (
@@ -251,9 +250,5 @@ export default function splitComponent<
     </Suspense>
   );
 
-  CodeSplit.propTypes = {
-    children: PT.node,
-  } as PT.WeakValidationMap<ComponentPropsT>;
-
   return CodeSplit;
 }

package/tsconfig.configs.json

@@ -1,18 +1,22 @@
 // TS configuration for configs pre-building from TS sources.
 
 {
-  "extends": "@tsconfig/recommended",
+  "extends": "./config/typescript/base.json",
   "include": [
     "config-ts-src",
   ],
   "compilerOptions": {
     "declaration": true,
-    "jsx": "react-jsx",
     "rootDir": "config-ts-src",
     "outDir": "config",
     "paths": {
       "*": ["./src/shared/*", "./src/*", "./*"]
     },
-    "strict": true
+
+    // TODO: Overriding the base config as configs are compiled into CommonJS
+    // modules, and this flag leads to the following error in that case, if set:
+    // ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled.
+    // Perhaps, there is a better workaround?
+    "verbatimModuleSyntax": false
   }
 }

package/tsconfig.json

@@ -1,13 +1,11 @@
 // TS config for ESLint, editor plugins, and other tools that look-up and use
 // the default tsconfig.json file.
 {
-  // Note: Full relative paths, as some tools don't support Node module
-  // resolution mechanics.
-  "extends": "./node_modules/@tsconfig/recommended/tsconfig.json",
+  // Relative path, as some tools relying on this config do not support Node's
+  // module resolution mechanics.
+  "extends": "./config/typescript/base.json",
 
   "compilerOptions": {
-    "jsx": "react-jsx",
-
     // BEWARE: Different settings are likely to transform dynamic import()
     // statements in the code, thus breaking Webpack's code splitting.
     // See: https://davidea.st/articles/webpack-typescript-code-split-wont-work
@@ -18,10 +16,5 @@
       "*": ["./src/shared/*", "./src/*", "./*"]
     },
     "rootDirs": [".", "build/types-scss"],
-    "strict": true,
-
-    // This ensures TypeScript does not remove unused imports, which may cause
-    // troubles when we rely on some side-effects from imported modules.
-    "verbatimModuleSyntax": true,
   }
 }

package/tsconfig.types.json

@@ -1,7 +1,7 @@
 // TS config for ESLint, editor plugins, and other tools that look-up and use
 // the default tsconfig.json file.
 {
-  "extends": "@tsconfig/recommended",
+  "extends": "./config/typescript/base.json",
 
   // Keep these in case any mocks / tests are declared within "src" code tree.
   "exclude": [
@@ -16,7 +16,6 @@
   "compilerOptions": {
     "declaration": true,
     "emitDeclarationOnly": true,
-    "jsx": "react-jsx",
 
     // BEWARE: Different settings are likely to transform dynamic import()
     // statements in the code, thus breaking Webpack's code splitting.
@@ -42,10 +41,5 @@
       "utils/*": ["./src/shared/utils/*"],
     },
     "rootDirs": [".", "build/types-scss"],
-    "strict": true,
-
-    // This ensures TypeScript does not remove unused imports, which may cause
-    // troubles when we rely on some side-effects from imported modules.
-    "verbatimModuleSyntax": true,
   },
 }

package/tstyche.config.json

@@ -0,0 +1,6 @@
+{
+  "testFileMatch": [
+    "__tests__/ts/**/*.ts",
+    "__tests__/ts/**/*.tsx"
+  ]
+}