@croct/plug-react 0.8.1 → 0.10.0

package/hooks/useContent.d.ts

@@ -6,6 +6,7 @@ export type UseContentOptions<I, F> = FetchOptions & {
     initial?: I;
     cacheKey?: string;
     expiration?: number;
+    staleWhileLoading?: boolean;
 };
 type UseContentHook = {
     <P extends JsonObject, I = P, F = P>(id: keyof VersionedSlotMap extends never ? string : never, options?: UseContentOptions<I, F>): P | I | F;

package/hooks/useContent.js

@@ -1,25 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useContent = 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");
 function useCsrContent(id, options = {}) {
     var _a;
-    const { fallback, initial, cacheKey, expiration, ...fetchOptions } = options;
+    const { fallback, cacheKey, expiration, initial: initialContent, staleWhileLoading = false, ...fetchOptions } = options;
+    const [initial, setInitial] = (0, react_1.useState)(initialContent);
     const { preferredLocale } = fetchOptions;
     const croct = (0, useCroct_1.useCroct)();
-    return (0, useLoader_1.useLoader)({
+    const result = (0, useLoader_1.useLoader)({
         cacheKey: (0, hash_1.hash)(`useContent:${cacheKey !== null && cacheKey !== void 0 ? cacheKey : ''}`
             + `:${id}`
             + `:${preferredLocale !== null && preferredLocale !== void 0 ? preferredLocale : ''}`
-            + `:${JSON.stringify((_a = fetchOptions.attributes) !== null && _a !== void 0 ? _a : '')}`),
+            + `:${JSON.stringify((_a = fetchOptions.attributes) !== null && _a !== void 0 ? _a : {})}`),
         loader: () => croct.fetch(id, fetchOptions).then(({ content }) => content),
         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;
 }
 function useSsrContent(_, { initial } = {}) {
     if (initial === undefined) {

package/hooks/useContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useContent.js","sourceRoot":"","sources":["../src/hooks/useContent.ts"],"names":[],"mappings":";;;AAGA,2CAAsC;AACtC,yCAAoC;AACpC,oDAAuC;AACvC,kCAA6B;AAS7B,SAAS,aAAa,CAClB,EAAmB,EACnB,UAAmC,EAAE;;IAErC,MAAM,EAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,YAAY,EAAC,GAAG,OAAO,CAAC;IAC3E,MAAM,EAAC,eAAe,EAAC,GAAG,YAAY,CAAC;IACvC,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAC;IAEzB,OAAO,IAAA,qBAAS,EAAC;QACb,QAAQ,EAAE,IAAA,WAAI,EACV,cAAc,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,EAAE;cAC5B,IAAI,EAAE,EAAE;cACR,IAAI,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,EAAE,EAAE;cAC3B,IAAI,IAAI,CAAC,SAAS,CAAC,MAAA,YAAY,CAAC,UAAU,mCAAI,EAAE,CAAC,EAAE,CACxD;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,EAAC,OAAO,EAAC,EAAE,EAAE,CAAC,OAAO,CAAC;QACxE,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,UAAU;KACzB,CAAC,CAAC;AACP,CAAC;AAED,SAAS,aAAa,CAClB,CAAkB,EAClB,EAAC,OAAO,KAA6B,EAAE;IAEvC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CACX,mEAAmE;cACjE,iEAAiE,CACtE,CAAC;IACN,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC;AA6BY,QAAA,UAAU,GAAmB,IAAA,qBAAK,GAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC"}
+{"version":3,"file":"useContent.js","sourceRoot":"","sources":["../src/hooks/useContent.ts"],"names":[],"mappings":";;;AAGA,iCAA0C;AAC1C,2CAAsC;AACtC,yCAAoC;AACpC,oDAAuC;AACvC,kCAA6B;AAU7B,SAAS,aAAa,CAClB,EAAmB,EACnB,UAAmC,EAAE;;IAErC,MAAM,EACF,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,OAAO,EAAE,cAAc,EACvB,iBAAiB,GAAG,KAAK,EACzB,GAAG,YAAY,EAClB,GAAG,OAAO,CAAC;IAEZ,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAkC,cAAc,CAAC,CAAC;IACxF,MAAM,EAAC,eAAe,EAAC,GAAG,YAAY,CAAC;IACvC,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAC;IAEzB,MAAM,MAAM,GAAwB,IAAA,qBAAS,EAAC;QAC1C,QAAQ,EAAE,IAAA,WAAI,EACV,cAAc,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,EAAE;cAC5B,IAAI,EAAE,EAAE;cACR,IAAI,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,EAAE,EAAE;cAC3B,IAAI,IAAI,CAAC,SAAS,CAAC,MAAA,YAAY,CAAC,UAAU,mCAAI,EAAE,CAAC,EAAE,CACxD;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,EAAC,OAAO,EAAC,EAAE,EAAE,CAAC,OAAO,CAAC;QACxE,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,UAAU;KACzB,CAAC,CAAC;IAEH,IAAA,iBAAS,EACL,GAAG,EAAE;QACD,IAAI,iBAAiB,EAAE,CAAC;YACpB,UAAU,CAAC,OAAO,CAAC,EAAE;gBACjB,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;oBACrB,OAAO,MAAM,CAAC;gBAClB,CAAC;gBAED,OAAO,OAAO,CAAC;YACnB,CAAC,CAAC,CAAC;QACP,CAAC;IACL,CAAC,EACD,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAC9B,CAAC;IAEF,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,SAAS,aAAa,CAClB,CAAkB,EAClB,EAAC,OAAO,KAA6B,EAAE;IAEvC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CACX,mEAAmE;cACjE,iEAAiE,CACtE,CAAC;IACN,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC;AA6BY,QAAA,UAAU,GAAmB,IAAA,qBAAK,GAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC"}

package/hooks/useEvaluation.d.ts

@@ -5,6 +5,7 @@ export type UseEvaluationOptions<I, F> = EvaluationOptions & {
     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;
 export declare const useEvaluation: UseEvaluationHook;

package/hooks/useEvaluation.js

@@ -1,32 +1,45 @@
 "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");
-function cleanEvaluationOptions(options) {
-    const result = {};
-    for (const [key, value] of Object.entries(options)) {
-        if (value !== undefined) {
-            result[key] = value;
-        }
-    }
-    return result;
-}
 function useCsrEvaluation(query, options = {}) {
     var _a;
-    const { cacheKey, fallback, initial, expiration, ...evaluationOptions } = options;
+    const { cacheKey, fallback, expiration, staleWhileLoading = false, initial: initialValue, ...evaluationOptions } = options;
+    const [initial, setInitial] = (0, react_1.useState)(initialValue);
     const croct = (0, useCroct_1.useCroct)();
-    return (0, useLoader_1.useLoader)({
+    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 : '')}`),
+            + `:${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;
+}
+function cleanEvaluationOptions(options) {
+    const result = {};
+    for (const [key, value] of Object.entries(options)) {
+        if (value !== undefined) {
+            result[key] = value;
+        }
+    }
+    return result;
 }
 function useSsrEvaluation(_, { initial } = {}) {
     if (initial === undefined) {

package/hooks/useEvaluation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEvaluation.js","sourceRoot":"","sources":["../src/hooks/useEvaluation.ts"],"names":[],"mappings":";;;AAEA,2CAAsC;AACtC,yCAAoC;AACpC,oDAAuC;AACvC,kCAA6B;AAE7B,SAAS,sBAAsB,CAAC,OAA0B;IACtD,MAAM,MAAM,GAAsB,EAAE,CAAC;IAErC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAA0C,EAAE,CAAC;QAC1F,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACtB,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QACxB,CAAC;IACL,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAcD,SAAS,gBAAgB,CACrB,KAAa,EACb,UAAsC,EAAE;;IAExC,MAAM,EAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,iBAAiB,EAAC,GAAG,OAAO,CAAC;IAChF,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAC;IAEzB,OAAO,IAAA,qBAAS,EAAY;QACxB,QAAQ,EAAE,IAAA,WAAI,EACV,iBAAiB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,EAAE;cAC/B,IAAI,KAAK,EAAE;cACX,IAAI,IAAI,CAAC,SAAS,CAAC,MAAA,OAAO,CAAC,UAAU,mCAAI,EAAE,CAAC,EAAE,CACnD;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAgB,KAAK,EAAE,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;QAC7F,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,UAAU;KACzB,CAAC,CAAC;AACP,CAAC;AAED,SAAS,gBAAgB,CACrB,CAAS,EACT,EAAC,OAAO,KAAgC,EAAE;IAE1C,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CACX,iEAAiE;cAC/D,sEAAsE,CAC3E,CAAC;IACN,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC;AAEY,QAAA,aAAa,GAAsB,IAAA,qBAAK,GAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC"}
+{"version":3,"file":"useEvaluation.js","sourceRoot":"","sources":["../src/hooks/useEvaluation.ts"],"names":[],"mappings":";;;AAEA,iCAA0C;AAC1C,2CAAsC;AACtC,yCAAoC;AACpC,oDAAuC;AACvC,kCAA6B;AAe7B,SAAS,gBAAgB,CACrB,KAAa,EACb,UAAsC,EAAE;;IAExC,MAAM,EACF,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,iBAAiB,GAAG,KAAK,EACzB,OAAO,EAAE,YAAY,EACrB,GAAG,iBAAiB,EACvB,GAAG,OAAO,CAAC;IAEZ,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAwB,YAAY,CAAC,CAAC;IAC5E,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAC;IAEzB,MAAM,MAAM,GAAG,IAAA,qBAAS,EAAY;QAChC,QAAQ,EAAE,IAAA,WAAI,EACV,iBAAiB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,EAAE;cAC/B,IAAI,KAAK,EAAE;cACX,IAAI,IAAI,CAAC,SAAS,CAAC,MAAA,OAAO,CAAC,UAAU,mCAAI,EAAE,CAAC,EAAE,CACnD;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAgB,KAAK,EAAE,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;QAC7F,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,UAAU;KACzB,CAAC,CAAC;IAEH,IAAA,iBAAS,EACL,GAAG,EAAE;QACD,IAAI,iBAAiB,EAAE,CAAC;YACpB,UAAU,CAAC,OAAO,CAAC,EAAE;gBACjB,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;oBACrB,OAAO,MAAM,CAAC;gBAClB,CAAC;gBAED,OAAO,OAAO,CAAC;YACnB,CAAC,CAAC,CAAC;QACP,CAAC;IACL,CAAC,EACD,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAC9B,CAAC;IAEF,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,SAAS,sBAAsB,CAAC,OAA0B;IACtD,MAAM,MAAM,GAAsB,EAAE,CAAC;IAErC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAA0C,EAAE,CAAC;QAC1F,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACtB,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QACxB,CAAC;IACL,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,SAAS,gBAAgB,CACrB,CAAS,EACT,EAAC,OAAO,KAAgC,EAAE;IAE1C,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CACX,iEAAiE;cAC/D,sEAAsE,CAC3E,CAAC;IACN,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC;AAEY,QAAA,aAAa,GAAsB,IAAA,qBAAK,GAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC"}

package/hooks/useLoader.js

@@ -6,35 +6,58 @@ const Cache_1 = require("./Cache");
 const cache = new Cache_1.Cache(60 * 1000);
 function useLoader({ initial, ...options }) {
     var _a;
-    const loadedValue = (_a = cache.get(options.cacheKey)) === null || _a === void 0 ? void 0 : _a.result;
+    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 optionsRef = (0, react_1.useRef)(initial !== undefined ? options : undefined);
-    (0, react_1.useEffect)(() => {
-        if (optionsRef.current !== undefined) {
-            try {
-                setValue(cache.load(optionsRef.current));
-            }
-            catch (result) {
-                if (result instanceof Promise) {
-                    result.then((resolvedValue) => {
-                        if (mountedRef.current) {
-                            setValue(resolvedValue);
-                        }
-                    });
-                    return;
-                }
-                setValue(undefined);
+    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;
             }
+            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;
+        }
+    }, [reset, cacheKey]);
+    (0, react_1.useEffect)(() => {
+        if (initialRef.current !== undefined) {
+            load();
         }
         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); }, []);
+}
 //# sourceMappingURL=useLoader.js.map

package/hooks/useLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLoader.js","sourceRoot":"","sources":["../src/hooks/useLoader.ts"],"names":[],"mappings":";;AASA,8BAwCC;AAjDD,iCAAkD;AAClD,mCAA4C;AAE5C,MAAM,KAAK,GAAG,IAAI,aAAK,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;AAMnC,SAAgB,SAAS,CAAI,EAAC,OAAO,EAAE,GAAG,OAAO,EAAkB;;IAC/D,MAAM,WAAW,GAAgB,MAAA,KAAK,CAAC,GAAG,CAAI,OAAO,CAAC,QAAQ,CAAC,0CAAE,MAAM,CAAC;IACxE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACtF,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAChC,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEvE,IAAA,iBAAS,EACL,GAAG,EAAE;QACD,IAAI,UAAU,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACnC,IAAI,CAAC;gBACD,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;YAC7C,CAAC;YAAC,OAAO,MAAe,EAAE,CAAC;gBACvB,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;oBAC5B,MAAM,CAAC,IAAI,CAAC,CAAC,aAAgB,EAAE,EAAE;wBAC7B,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;4BACrB,QAAQ,CAAC,aAAa,CAAC,CAAC;wBAC5B,CAAC;oBACL,CAAC,CAAC,CAAC;oBAEH,OAAO;gBACX,CAAC;gBAED,QAAQ,CAAC,SAAS,CAAC,CAAC;gBAEpB,OAAO;YACX,CAAC;QACL,CAAC;QAED,OAAO,GAAG,EAAE;YACR,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;QAC/B,CAAC,CAAC;IACN,CAAC,EACD,EAAE,CACL,CAAC;IAEF,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACtB,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC"}
+{"version":3,"file":"useLoader.js","sourceRoot":"","sources":["../src/hooks/useLoader.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croct/plug-react",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "description": "React components and hooks to plug your React applications into Croct.",
   "author": {
     "name": "Croct",
@@ -28,17 +28,15 @@
     "lint": "eslint 'src/**/*.ts' 'src/**/*.tsx'",
     "test": "jest -c jest.config.js --coverage",
     "validate": "tsc --noEmit",
-    "build": "tsc -p tsconfig.build.json",
-    "storybook": "start-storybook -s ./.storybook/static -p 6006 --no-manager-cache",
-    "build-storybook": "build-storybook -s ./.storybook/static"
+    "build": "tsc -p tsconfig.build.json"
   },
   "peerDependencies": {
-    "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+    "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.2"
+    "@croct/sdk": "^0.17.6"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -46,18 +44,12 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@croct/eslint-plugin": "^0.7.1",
-    "@storybook/addon-actions": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/builder-webpack5": "^8.2.9",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^8.2.9",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.5.4",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@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",
@@ -65,8 +57,8 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-environment-node": "^29.7.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.2",
     "webpack": "^5.94.0"

package/src/hooks/useContent.test.ts

@@ -1,4 +1,4 @@
-import {renderHook} from '@testing-library/react';
+import {renderHook, waitFor} from '@testing-library/react';
 import {Plug} from '@croct/plug';
 import {useCroct} from './useCroct';
 import {useLoader} from './useLoader';
@@ -20,15 +20,19 @@ jest.mock(
 );
 
 describe('useContent (CSR)', () => {
-    it('should evaluate fetch the content', () => {
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it('should fetch the content', () => {
         const fetch: Plug['fetch'] = jest.fn().mockResolvedValue({
-            payload: {
-                title: 'loaded',
-            },
+            content: {},
         });
 
         jest.mocked(useCroct).mockReturnValue({fetch: fetch} as Plug);
-        jest.mocked(useLoader).mockReturnValue('foo');
+        jest.mocked(useLoader).mockReturnValue({
+            title: 'foo',
+        });
 
         const slotId = 'home-banner@1';
         const preferredLocale = 'en';
@@ -67,6 +71,113 @@ describe('useContent (CSR)', () => {
             attributes: attributes,
         });
 
-        expect(result.current).toBe('foo');
+        expect(result.current).toEqual({title: 'foo'});
+    });
+
+    it('should use the initial value when the cache key changes if the stale-while-loading flag is false', async () => {
+        const key = {
+            current: 'initial',
+        };
+
+        const fetch: Plug['fetch'] = jest.fn().mockResolvedValue({content: {}});
+
+        jest.mocked(useCroct).mockReturnValue({fetch: fetch} as Plug);
+
+        jest.mocked(useLoader).mockImplementation(
+            () => ({title: key.current === 'initial' ? 'first' : 'second'}),
+        );
+
+        const slotId = 'home-banner@1';
+
+        const {result, rerender} = renderHook(
+            () => useContent<{title: string}>(slotId, {
+                cacheKey: key.current,
+                initial: {
+                    title: 'initial',
+                },
+            }),
+        );
+
+        expect(useCroct).toHaveBeenCalled();
+
+        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
+            cacheKey: hash(`useContent:${key.current}:${slotId}::${JSON.stringify({})}`),
+            initial: {
+                title: 'initial',
+            },
+        }));
+
+        await waitFor(() => expect(result.current).toEqual({title: 'first'}));
+
+        key.current = 'next';
+
+        rerender();
+
+        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
+            cacheKey: hash(`useContent:${key.current}:${slotId}::${JSON.stringify({})}`),
+            initial: {
+                title: 'initial',
+            },
+        }));
+
+        await waitFor(() => expect(result.current).toEqual({title: 'second'}));
+    });
+
+    it('should use the last fetched content as initial value if the stale-while-loading flag is true', async () => {
+        const key = {
+            current: 'initial',
+        };
+
+        const fetch: Plug['fetch'] = jest.fn().mockResolvedValue({content: {}});
+
+        jest.mocked(useCroct).mockReturnValue({fetch: fetch} as Plug);
+
+        const firstResult = {
+            title: 'first',
+        };
+
+        const secondResult = {
+            title: 'second',
+        };
+
+        jest.mocked(useLoader).mockImplementation(
+            () => (key.current === 'initial' ? firstResult : secondResult),
+        );
+
+        const slotId = 'home-banner@1';
+
+        const {result, rerender} = renderHook(
+            () => useContent<{title: string}>(slotId, {
+                cacheKey: key.current,
+                initial: {
+                    title: 'initial',
+                },
+                staleWhileLoading: true,
+            }),
+        );
+
+        expect(useCroct).toHaveBeenCalled();
+
+        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
+            cacheKey: hash(`useContent:${key.current}:${slotId}::${JSON.stringify({})}`),
+            initial: {
+                title: 'initial',
+            },
+        }));
+
+        await waitFor(() => expect(result.current).toEqual({title: 'first'}));
+
+        key.current = 'next';
+
+        rerender();
+
+        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
+            cacheKey: hash(`useContent:${key.current}:${slotId}::${JSON.stringify({})}`),
+            initial: {
+                title: 'first',
+            },
+        }));
+
+        await waitFor(() => expect(result.current).toEqual({title: 'second'}));
     });
 });

package/src/hooks/useContent.ts

@@ -1,6 +1,7 @@
 import {SlotContent, VersionedSlotId, VersionedSlotMap} from '@croct/plug/slot';
 import {JsonObject} from '@croct/plug/sdk/json';
 import {FetchOptions} from '@croct/plug/plug';
+import {useEffect, useState} from 'react';
 import {useLoader} from './useLoader';
 import {useCroct} from './useCroct';
 import {isSsr} from '../ssr-polyfills';
@@ -11,28 +12,55 @@ export type UseContentOptions<I, F> = FetchOptions & {
     initial?: I,
     cacheKey?: string,
     expiration?: number,
+    staleWhileLoading?: boolean,
 };
 
 function useCsrContent<I, F>(
     id: VersionedSlotId,
     options: UseContentOptions<I, F> = {},
 ): SlotContent | I | F {
-    const {fallback, initial, cacheKey, expiration, ...fetchOptions} = options;
+    const {
+        fallback,
+        cacheKey,
+        expiration,
+        initial: initialContent,
+        staleWhileLoading = false,
+        ...fetchOptions
+    } = options;
+
+    const [initial, setInitial] = useState<SlotContent | I | F | undefined>(initialContent);
     const {preferredLocale} = fetchOptions;
     const croct = useCroct();
 
-    return useLoader({
+    const result: SlotContent | I | F = useLoader({
         cacheKey: hash(
             `useContent:${cacheKey ?? ''}`
             + `:${id}`
             + `:${preferredLocale ?? ''}`
-            + `:${JSON.stringify(fetchOptions.attributes ?? '')}`,
+            + `:${JSON.stringify(fetchOptions.attributes ?? {})}`,
         ),
         loader: () => croct.fetch(id, fetchOptions).then(({content}) => content),
         initial: initial,
         fallback: fallback,
         expiration: expiration,
     });
+
+    useEffect(
+        () => {
+            if (staleWhileLoading) {
+                setInitial(current => {
+                    if (current !== result) {
+                        return result;
+                    }
+
+                    return current;
+                });
+            }
+        },
+        [result, staleWhileLoading],
+    );
+
+    return result;
 }
 
 function useSsrContent<I, F>(

package/src/hooks/useEvaluation.test.ts

@@ -1,4 +1,4 @@
-import {renderHook} from '@testing-library/react';
+import {renderHook, waitFor} from '@testing-library/react';
 import {EvaluationOptions} from '@croct/sdk/facade/evaluatorFacade';
 import {Plug} from '@croct/plug';
 import {useEvaluation} from './useEvaluation';
@@ -22,7 +22,6 @@ jest.mock(
 
 describe('useEvaluation', () => {
     beforeEach(() => {
-        jest.resetModules();
         jest.resetAllMocks();
     });
 
@@ -91,4 +90,91 @@ describe('useEvaluation', () => {
 
         expect(evaluate).toHaveBeenCalledWith(query, {});
     });
+
+    it('should use the initial value when the cache key changes if the stale-while-loading flag is false', async () => {
+        const key = {
+            current: 'initial',
+        };
+
+        const evaluate: Plug['evaluate'] = jest.fn();
+
+        jest.mocked(useCroct).mockReturnValue({evaluate: evaluate} as Plug);
+
+        jest.mocked(useLoader).mockImplementation(
+            () => (key.current === 'initial' ? 'first' : 'second'),
+        );
+
+        const query = 'location';
+
+        const {result, rerender} = renderHook(
+            () => useEvaluation(query, {
+                cacheKey: key.current,
+                initial: 'initial',
+            }),
+        );
+
+        expect(useCroct).toHaveBeenCalled();
+
+        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
+            cacheKey: hash(`useEvaluation:${key.current}:${query}:${JSON.stringify({})}`),
+            initial: 'initial',
+        }));
+
+        await waitFor(() => expect(result.current).toEqual('first'));
+
+        key.current = 'next';
+
+        rerender();
+
+        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
+            cacheKey: hash(`useEvaluation:${key.current}:${query}:${JSON.stringify({})}`),
+            initial: 'initial',
+        }));
+
+        await waitFor(() => expect(result.current).toEqual('second'));
+    });
+
+    it('should use the last evaluation result if the stale-while-loading flag is true', async () => {
+        const key = {
+            current: 'initial',
+        };
+
+        const evaluate: Plug['evaluate'] = jest.fn();
+
+        jest.mocked(useCroct).mockReturnValue({evaluate: evaluate} as Plug);
+
+        jest.mocked(useLoader).mockImplementation(
+            () => (key.current === 'initial' ? 'first' : 'second'),
+        );
+
+        const query = 'location';
+
+        const {result, rerender} = renderHook(
+            () => useEvaluation(query, {
+                cacheKey: key.current,
+                initial: 'initial',
+                staleWhileLoading: true,
+            }),
+        );
+
+        expect(useCroct).toHaveBeenCalled();
+
+        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
+            cacheKey: hash(`useEvaluation:${key.current}:${query}:${JSON.stringify({})}`),
+            initial: 'initial',
+        }));
+
+        await waitFor(() => expect(result.current).toEqual('first'));
+
+        key.current = 'next';
+
+        rerender();
+
+        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
+            cacheKey: hash(`useEvaluation:${key.current}:${query}:${JSON.stringify({})}`),
+            initial: 'first',
+        }));
+
+        await waitFor(() => expect(result.current).toEqual('second'));
+    });
 });