@croct/plug-react 0.10.0 → 0.11.0

package/hooks/useEvaluation.cjs

@@ -0,0 +1,85 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useEvaluation_exports = {};
+__export(useEvaluation_exports, {
+  useEvaluation: () => useEvaluation
+});
+module.exports = __toCommonJS(useEvaluation_exports);
+var import_react = require("react");
+var import_useLoader = require('./useLoader.cjs');
+var import_useCroct = require('./useCroct.cjs');
+var import_ssr_polyfills = require('../ssr-polyfills.cjs');
+var import_hash = require('../hash.cjs');
+function useCsrEvaluation(query, options = {}) {
+  const {
+    cacheKey,
+    fallback,
+    expiration,
+    staleWhileLoading = false,
+    initial: initialValue,
+    ...evaluationOptions
+  } = options;
+  const [initial, setInitial] = (0, import_react.useState)(initialValue);
+  const croct = (0, import_useCroct.useCroct)();
+  const result = (0, import_useLoader.useLoader)({
+    cacheKey: (0, import_hash.hash)(
+      `useEvaluation:${cacheKey ?? ""}:${query}:${JSON.stringify(options.attributes ?? {})}`
+    ),
+    loader: () => croct.evaluate(query, cleanEvaluationOptions(evaluationOptions)),
+    initial,
+    fallback,
+    expiration
+  });
+  (0, import_react.useEffect)(
+    () => {
+      if (staleWhileLoading) {
+        setInitial((current) => {
+          if (current !== result) {
+            return result;
+          }
+          return current;
+        });
+      }
+    },
+    [result, staleWhileLoading]
+  );
+  return result;
+}
+function cleanEvaluationOptions(options) {
+  const result = {};
+  for (const [key, value] of Object.entries(options)) {
+    if (value !== void 0) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function useSsrEvaluation(_, { initial } = {}) {
+  if (initial === void 0) {
+    throw new Error(
+      "The initial value is required for server-side rendering (SSR). For help, see https://croct.help/sdk/react/missing-evaluation-result"
+    );
+  }
+  return initial;
+}
+const useEvaluation = (0, import_ssr_polyfills.isSsr)() ? useSsrEvaluation : useCsrEvaluation;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useEvaluation
+});

package/hooks/useEvaluation.d.cts

@@ -0,0 +1,14 @@
+import { JsonValue } from '@croct/plug/sdk/json';
+import { EvaluationOptions } from '@croct/sdk/facade/evaluatorFacade';
+
+type UseEvaluationOptions<I, F> = EvaluationOptions & {
+    initial?: I;
+    fallback?: F;
+    cacheKey?: string;
+    expiration?: number;
+    staleWhileLoading?: boolean;
+};
+type UseEvaluationHook = <T extends JsonValue, I = T, F = T>(query: string, options?: UseEvaluationOptions<I, F>) => T | I | F;
+declare const useEvaluation: UseEvaluationHook;
+
+export { type UseEvaluationOptions, useEvaluation };

package/hooks/useEvaluation.d.ts

@@ -1,6 +1,7 @@
 import { JsonValue } from '@croct/plug/sdk/json';
 import { EvaluationOptions } from '@croct/sdk/facade/evaluatorFacade';
-export type UseEvaluationOptions<I, F> = EvaluationOptions & {
+
+type UseEvaluationOptions<I, F> = EvaluationOptions & {
     initial?: I;
     fallback?: F;
     cacheKey?: string;
@@ -8,5 +9,6 @@ export type UseEvaluationOptions<I, F> = EvaluationOptions & {
     staleWhileLoading?: boolean;
 };
 type UseEvaluationHook = <T extends JsonValue, I = T, F = T>(query: string, options?: UseEvaluationOptions<I, F>) => T | I | F;
-export declare const useEvaluation: UseEvaluationHook;
-export {};
+declare const useEvaluation: UseEvaluationHook;
+
+export { type UseEvaluationOptions, useEvaluation };

package/hooks/useEvaluation.js

@@ -1,52 +1,61 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEvaluation = void 0;
-const react_1 = require("react");
-const useLoader_1 = require("./useLoader");
-const useCroct_1 = require("./useCroct");
-const ssr_polyfills_1 = require("../ssr-polyfills");
-const hash_1 = require("../hash");
+import { useEffect, useState } from "react";
+import { useLoader } from "./useLoader.js";
+import { useCroct } from "./useCroct.js";
+import { isSsr } from "../ssr-polyfills.js";
+import { hash } from "../hash.js";
 function useCsrEvaluation(query, options = {}) {
-    var _a;
-    const { cacheKey, fallback, expiration, staleWhileLoading = false, initial: initialValue, ...evaluationOptions } = options;
-    const [initial, setInitial] = (0, react_1.useState)(initialValue);
-    const croct = (0, useCroct_1.useCroct)();
-    const result = (0, useLoader_1.useLoader)({
-        cacheKey: (0, hash_1.hash)(`useEvaluation:${cacheKey !== null && cacheKey !== void 0 ? cacheKey : ''}`
-            + `:${query}`
-            + `:${JSON.stringify((_a = options.attributes) !== null && _a !== void 0 ? _a : {})}`),
-        loader: () => croct.evaluate(query, cleanEvaluationOptions(evaluationOptions)),
-        initial: initial,
-        fallback: fallback,
-        expiration: expiration,
-    });
-    (0, react_1.useEffect)(() => {
-        if (staleWhileLoading) {
-            setInitial(current => {
-                if (current !== result) {
-                    return result;
-                }
-                return current;
-            });
-        }
-    }, [result, staleWhileLoading]);
-    return result;
+  const {
+    cacheKey,
+    fallback,
+    expiration,
+    staleWhileLoading = false,
+    initial: initialValue,
+    ...evaluationOptions
+  } = options;
+  const [initial, setInitial] = useState(initialValue);
+  const croct = useCroct();
+  const result = useLoader({
+    cacheKey: hash(
+      `useEvaluation:${cacheKey ?? ""}:${query}:${JSON.stringify(options.attributes ?? {})}`
+    ),
+    loader: () => croct.evaluate(query, cleanEvaluationOptions(evaluationOptions)),
+    initial,
+    fallback,
+    expiration
+  });
+  useEffect(
+    () => {
+      if (staleWhileLoading) {
+        setInitial((current) => {
+          if (current !== result) {
+            return result;
+          }
+          return current;
+        });
+      }
+    },
+    [result, staleWhileLoading]
+  );
+  return result;
 }
 function cleanEvaluationOptions(options) {
-    const result = {};
-    for (const [key, value] of Object.entries(options)) {
-        if (value !== undefined) {
-            result[key] = value;
-        }
+  const result = {};
+  for (const [key, value] of Object.entries(options)) {
+    if (value !== void 0) {
+      result[key] = value;
     }
-    return result;
+  }
+  return result;
 }
 function useSsrEvaluation(_, { initial } = {}) {
-    if (initial === undefined) {
-        throw new Error('The initial value is required for server-side rendering (SSR). '
-            + 'For help, see https://croct.help/sdk/react/missing-evaluation-result');
-    }
-    return initial;
+  if (initial === void 0) {
+    throw new Error(
+      "The initial value is required for server-side rendering (SSR). For help, see https://croct.help/sdk/react/missing-evaluation-result"
+    );
+  }
+  return initial;
 }
-exports.useEvaluation = (0, ssr_polyfills_1.isSsr)() ? useSsrEvaluation : useCsrEvaluation;
-//# sourceMappingURL=useEvaluation.js.map
+const useEvaluation = isSsr() ? useSsrEvaluation : useCsrEvaluation;
+export {
+  useEvaluation
+};

package/hooks/useLoader.cjs

@@ -0,0 +1,82 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useLoader_exports = {};
+__export(useLoader_exports, {
+  useLoader: () => useLoader
+});
+module.exports = __toCommonJS(useLoader_exports);
+var import_react = require("react");
+var import_Cache = require('./Cache.cjs');
+const cache = new import_Cache.Cache(60 * 1e3);
+function useLoader({ initial, ...currentOptions }) {
+  const optionsRef = (0, import_react.useRef)(currentOptions);
+  const [value, setValue] = (0, import_react.useState)(() => cache.get(currentOptions.cacheKey)?.result ?? initial);
+  const mountedRef = (0, import_react.useRef)(true);
+  const load = (0, import_react.useCallback)(
+    (options) => {
+      try {
+        setValue(cache.load(options));
+      } catch (result) {
+        if (result instanceof Promise) {
+          result.then((resolvedValue) => {
+            if (mountedRef.current) {
+              setValue(resolvedValue);
+            }
+          });
+          return;
+        }
+        setValue(void 0);
+      }
+    },
+    []
+  );
+  (0, import_react.useEffect)(
+    () => {
+      mountedRef.current = true;
+      if (initial !== void 0) {
+        load(currentOptions);
+      }
+      return () => {
+        mountedRef.current = false;
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Should run only once
+    []
+  );
+  (0, import_react.useEffect)(
+    () => {
+      if (optionsRef.current.cacheKey !== currentOptions.cacheKey) {
+        setValue(initial);
+        optionsRef.current = currentOptions;
+        if (initial !== void 0) {
+          load(currentOptions);
+        }
+      }
+    },
+    [currentOptions, initial, load]
+  );
+  if (value === void 0) {
+    return cache.load(currentOptions);
+  }
+  return value;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useLoader
+});

package/hooks/useLoader.d.cts

@@ -0,0 +1,7 @@
+import { EntryOptions } from './Cache.cjs';
+
+type CacheOptions<R> = EntryOptions<R> & {
+    initial?: R;
+};
+
+export type { CacheOptions };

package/hooks/useLoader.d.ts

@@ -1,5 +1,7 @@
-import { EntryOptions } from './Cache';
-export type CacheOptions<R> = EntryOptions<R> & {
+import { EntryOptions } from './Cache.js';
+
+type CacheOptions<R> = EntryOptions<R> & {
     initial?: R;
 };
-export declare function useLoader<R>({ initial, ...options }: CacheOptions<R>): R;
+
+export type { CacheOptions };

package/hooks/useLoader.js

@@ -1,63 +1,58 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLoader = useLoader;
-const react_1 = require("react");
-const Cache_1 = require("./Cache");
-const cache = new Cache_1.Cache(60 * 1000);
-function useLoader({ initial, ...options }) {
-    var _a;
-    const { cacheKey } = options;
-    const loadedValue = (_a = cache.get(cacheKey)) === null || _a === void 0 ? void 0 : _a.result;
-    const [value, setValue] = (0, react_1.useState)(loadedValue !== undefined ? loadedValue : initial);
-    const mountedRef = (0, react_1.useRef)(true);
-    const initialRef = (0, react_1.useRef)(initial);
-    const previousCacheKey = (0, react_1.useRef)(cacheKey);
-    const load = useStableCallback(() => {
-        try {
-            setValue(cache.load(options));
-        }
-        catch (result) {
-            if (result instanceof Promise) {
-                result.then((resolvedValue) => {
-                    if (mountedRef.current) {
-                        setValue(resolvedValue);
-                    }
-                });
-                return;
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Cache } from "./Cache.js";
+const cache = new Cache(60 * 1e3);
+function useLoader({ initial, ...currentOptions }) {
+  const optionsRef = useRef(currentOptions);
+  const [value, setValue] = useState(() => cache.get(currentOptions.cacheKey)?.result ?? initial);
+  const mountedRef = useRef(true);
+  const load = useCallback(
+    (options) => {
+      try {
+        setValue(cache.load(options));
+      } catch (result) {
+        if (result instanceof Promise) {
+          result.then((resolvedValue) => {
+            if (mountedRef.current) {
+              setValue(resolvedValue);
             }
-            setValue(undefined);
-        }
-    });
-    const reset = useStableCallback(() => {
-        var _a;
-        const newLoadedValue = (_a = cache.get(cacheKey)) === null || _a === void 0 ? void 0 : _a.result;
-        setValue(newLoadedValue !== undefined ? newLoadedValue : initial);
-        load();
-    });
-    (0, react_1.useEffect)(() => {
-        if (previousCacheKey.current !== cacheKey) {
-            reset();
-            previousCacheKey.current = cacheKey;
+          });
+          return;
         }
-    }, [reset, cacheKey]);
-    (0, react_1.useEffect)(() => {
-        if (initialRef.current !== undefined) {
-            load();
+        setValue(void 0);
+      }
+    },
+    []
+  );
+  useEffect(
+    () => {
+      mountedRef.current = true;
+      if (initial !== void 0) {
+        load(currentOptions);
+      }
+      return () => {
+        mountedRef.current = false;
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Should run only once
+    []
+  );
+  useEffect(
+    () => {
+      if (optionsRef.current.cacheKey !== currentOptions.cacheKey) {
+        setValue(initial);
+        optionsRef.current = currentOptions;
+        if (initial !== void 0) {
+          load(currentOptions);
         }
-        return () => {
-            mountedRef.current = false;
-        };
-    }, [load]);
-    if (value === undefined) {
-        return cache.load(options);
-    }
-    return value;
-}
-function useStableCallback(callback) {
-    const ref = (0, react_1.useRef)(undefined);
-    (0, react_1.useEffect)(() => {
-        ref.current = callback;
-    });
-    return (0, react_1.useCallback)(() => { var _a; (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref); }, []);
+      }
+    },
+    [currentOptions, initial, load]
+  );
+  if (value === void 0) {
+    return cache.load(currentOptions);
+  }
+  return value;
 }
-//# sourceMappingURL=useLoader.js.map
+export {
+  useLoader
+};

package/index.cjs

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("@croct/plug/sdk/json"), module.exports);
+__reExport(index_exports, require("@croct/plug/slot"), module.exports);
+__reExport(index_exports, require("@croct/plug/component"), module.exports);
+__reExport(index_exports, require('./CroctProvider.cjs'), module.exports);
+__reExport(index_exports, require('./hooks/index.cjs'), module.exports);
+__reExport(index_exports, require('./components/index.cjs'), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("@croct/plug/sdk/json"),
+  ...require("@croct/plug/slot"),
+  ...require("@croct/plug/component"),
+  ...require('./CroctProvider.cjs'),
+  ...require('./hooks/index.cjs'),
+  ...require('./components/index.cjs')
+});

package/index.d.cts

@@ -0,0 +1,13 @@
+export * from '@croct/plug/sdk/json';
+export * from '@croct/plug/slot';
+export * from '@croct/plug/component';
+export { CroctContext, CroctProvider, CroctProviderProps } from './CroctProvider.cjs';
+export { UseEvaluationOptions, useEvaluation } from './hooks/useEvaluation.cjs';
+export { UseContentOptions, useContent } from './hooks/useContent.cjs';
+export { useCroct } from './hooks/useCroct.cjs';
+export { Personalization, PersonalizationProps } from './components/Personalization/index.cjs';
+export { Slot, SlotProps } from './components/Slot/index.cjs';
+import 'react';
+import '@croct/plug';
+import '@croct/sdk/facade/evaluatorFacade';
+import '@croct/plug/plug';

package/index.d.ts

@@ -1,6 +1,13 @@
 export * from '@croct/plug/sdk/json';
 export * from '@croct/plug/slot';
 export * from '@croct/plug/component';
-export * from './CroctProvider';
-export * from './hooks';
-export * from './components';
+export { CroctContext, CroctProvider, CroctProviderProps } from './CroctProvider.js';
+export { UseEvaluationOptions, useEvaluation } from './hooks/useEvaluation.js';
+export { UseContentOptions, useContent } from './hooks/useContent.js';
+export { useCroct } from './hooks/useCroct.js';
+export { Personalization, PersonalizationProps } from './components/Personalization/index.js';
+export { Slot, SlotProps } from './components/Slot/index.js';
+import 'react';
+import '@croct/plug';
+import '@croct/sdk/facade/evaluatorFacade';
+import '@croct/plug/plug';

package/index.js

@@ -1,23 +1,6 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("@croct/plug/sdk/json"), exports);
-__exportStar(require("@croct/plug/slot"), exports);
-__exportStar(require("@croct/plug/component"), exports);
-__exportStar(require("./CroctProvider"), exports);
-__exportStar(require("./hooks"), exports);
-__exportStar(require("./components"), exports);
-//# sourceMappingURL=index.js.map
+export * from "@croct/plug/sdk/json";
+export * from "@croct/plug/slot";
+export * from "@croct/plug/component";
+export * from "./CroctProvider.js";
+export * from "./hooks/index.js";
+export * from "./components/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croct/plug-react",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "React components and hooks to plug your React applications into Croct.",
   "author": {
     "name": "Croct",
@@ -18,29 +18,55 @@
     "type": "git",
     "url": "git+https://github.com/croct-tech/plug-react.git"
   },
+  "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
-  "source": "./index.ts",
+  "exports": {
+    "./*": {
+      "import": "./*.js",
+      "require": "./*.cjs"
+    },
+    "./components/Personalization": {
+      "import": "./components/Personalization/index.js",
+      "require": "./components/Personalization/index.cjs"
+    },
+    "./components/Slot": {
+      "import": "./components/Slot/index.js",
+      "require": "./components/Slot/index.cjs"
+    },
+    "./components": {
+      "import": "./components/index.js",
+      "require": "./components/index.cjs"
+    },
+    "./hooks": {
+      "import": "./hooks/index.js",
+      "require": "./hooks/index.cjs"
+    },
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
+  },
   "engines": {
     "node": ">=10"
   },
   "scripts": {
     "lint": "eslint 'src/**/*.ts' 'src/**/*.tsx'",
-    "test": "jest -c jest.config.js --coverage",
+    "test": "jest -c jest.config.mjs --coverage",
     "validate": "tsc --noEmit",
-    "build": "tsc -p tsconfig.build.json"
+    "build": "tsup",
+    "postbuild": "./post-build.mjs"
   },
   "peerDependencies": {
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@croct/plug": "^0.16.2",
-    "@croct/sdk": "^0.17.6"
+    "@croct/plug": "^0.17.1",
+    "@croct/sdk": "^0.18.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@croct/eslint-plugin": "^0.7.1",
@@ -50,22 +76,27 @@
     "@types/node": "^22.5.4",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "babel-loader": "^9.1.3",
+    "@typescript-eslint/eslint-plugin": "^6.18.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "esbuild-fix-imports-plugin": "^1.0.19",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-environment-node": "^29.7.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "ts-jest": "^29.0.3",
     "ts-node": "^10.9.2",
+    "tsup": "^8.4.0",
     "typescript": "^5.6.2",
     "webpack": "^5.94.0"
   },
   "files": [
     "**/*.js",
+    "**/*.cjs",
+    "**/*.mjs",
     "**/*.ts",
+    "**/*.cts",
     "**/*.map"
   ]
-}
+}

package/react-app-env.d.cjs

@@ -0,0 +1 @@
+"use strict";

package/react-app-env.d.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/react-app-env.d.d.ts

@@ -0,0 +1,2 @@
+
+export {  }