@croct/plug-react 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CroctProvider.cjs +81 -0
- package/CroctProvider.d.cts +11 -0
- package/CroctProvider.d.ts +8 -4
- package/CroctProvider.js +57 -46
- package/api.cjs +22 -0
- package/{src/react-app-env.d.ts → api.d.cts} +1 -0
- package/api.d.ts +1 -0
- package/api.js +1 -18
- package/components/Personalization/index.cjs +36 -0
- package/components/Personalization/index.d.cts +13 -0
- package/components/Personalization/index.d.ts +7 -4
- package/components/Personalization/index.js +10 -11
- package/components/Slot/index.cjs +36 -0
- package/components/Slot/index.d.cts +22 -0
- package/components/Slot/index.d.ts +9 -6
- package/components/Slot/index.js +10 -12
- package/components/index.cjs +24 -0
- package/components/index.d.cts +9 -0
- package/components/index.d.ts +9 -2
- package/components/index.js +2 -19
- package/global.d.cjs +1 -0
- package/{src/global.d.ts → global.d.d.cts} +1 -1
- package/global.d.d.ts +7 -0
- package/global.d.js +0 -0
- package/hash.cjs +36 -0
- package/hash.d.cts +2 -0
- package/hash.d.ts +2 -1
- package/hash.js +10 -11
- package/hooks/Cache.cjs +88 -0
- package/hooks/Cache.d.cts +9 -0
- package/hooks/Cache.d.ts +4 -17
- package/hooks/Cache.js +58 -56
- package/hooks/index.cjs +26 -0
- package/hooks/index.d.cts +8 -0
- package/hooks/index.d.ts +8 -3
- package/hooks/index.js +3 -20
- package/hooks/useContent.cjs +92 -0
- package/hooks/useContent.d.cts +20 -0
- package/hooks/useContent.d.ts +6 -5
- package/hooks/useContent.js +65 -42
- package/hooks/useCroct.cjs +38 -0
- package/hooks/useCroct.d.cts +5 -0
- package/hooks/useCroct.d.ts +4 -1
- package/hooks/useCroct.js +12 -12
- package/hooks/useEvaluation.cjs +85 -0
- package/hooks/useEvaluation.d.cts +14 -0
- package/hooks/useEvaluation.d.ts +5 -3
- package/hooks/useEvaluation.js +54 -45
- package/hooks/useLoader.cjs +82 -0
- package/hooks/useLoader.d.cts +7 -0
- package/hooks/useLoader.d.ts +5 -3
- package/hooks/useLoader.js +54 -59
- package/index.cjs +32 -0
- package/index.d.cts +13 -0
- package/index.d.ts +10 -3
- package/index.js +6 -23
- package/package.json +42 -11
- package/react-app-env.d.cjs +1 -0
- package/react-app-env.d.d.cts +2 -0
- package/react-app-env.d.d.ts +2 -0
- package/react-app-env.d.js +0 -0
- package/ssr-polyfills.cjs +86 -0
- package/ssr-polyfills.d.cts +2 -0
- package/ssr-polyfills.d.ts +2 -3
- package/ssr-polyfills.js +49 -64
- package/CroctProvider.js.map +0 -1
- package/api.js.map +0 -1
- package/components/Personalization/index.js.map +0 -1
- package/components/Slot/index.js.map +0 -1
- package/components/index.js.map +0 -1
- package/hash.js.map +0 -1
- package/hooks/Cache.js.map +0 -1
- package/hooks/index.js.map +0 -1
- package/hooks/useContent.js.map +0 -1
- package/hooks/useCroct.js.map +0 -1
- package/hooks/useEvaluation.js.map +0 -1
- package/hooks/useLoader.js.map +0 -1
- package/index.js.map +0 -1
- package/src/api.ts +0 -1
- package/src/components/index.ts +0 -2
- package/src/hash.test.ts +0 -22
- package/src/hash.ts +0 -12
- package/src/hooks/Cache.test.ts +0 -280
- package/src/hooks/Cache.ts +0 -97
- package/src/hooks/index.ts +0 -3
- package/src/hooks/useContent.ssr.test.ts +0 -23
- package/src/hooks/useContent.test.ts +0 -183
- package/src/hooks/useContent.ts +0 -107
- package/src/hooks/useCroct.ts +0 -16
- package/src/hooks/useEvaluation.ssr.test.ts +0 -23
- package/src/hooks/useEvaluation.test.ts +0 -180
- package/src/hooks/useEvaluation.ts +0 -94
- package/src/hooks/useLoader.test.ts +0 -407
- package/src/hooks/useLoader.ts +0 -84
- package/src/index.ts +0 -6
- package/src/ssr-polyfills.ssr.test.ts +0 -46
- package/src/ssr-polyfills.test.ts +0 -65
- package/src/ssr-polyfills.ts +0 -70
- package/ssr-polyfills.js.map +0 -1
package/hooks/Cache.cjs
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var Cache_exports = {};
|
|
20
|
+
__export(Cache_exports, {
|
|
21
|
+
Cache: () => Cache
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(Cache_exports);
|
|
24
|
+
class Cache {
|
|
25
|
+
constructor(defaultExpiration) {
|
|
26
|
+
this.cache = {};
|
|
27
|
+
this.defaultExpiration = defaultExpiration;
|
|
28
|
+
}
|
|
29
|
+
load(configuration) {
|
|
30
|
+
const { cacheKey, loader, fallback, expiration = this.defaultExpiration } = configuration;
|
|
31
|
+
const cachedEntry = this.get(cacheKey);
|
|
32
|
+
if (cachedEntry !== void 0) {
|
|
33
|
+
if (cachedEntry.error !== void 0) {
|
|
34
|
+
if (fallback !== void 0) {
|
|
35
|
+
return fallback;
|
|
36
|
+
}
|
|
37
|
+
if (cachedEntry.result === void 0) {
|
|
38
|
+
throw cachedEntry.error;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
if (cachedEntry.result !== void 0) {
|
|
42
|
+
return cachedEntry.result;
|
|
43
|
+
}
|
|
44
|
+
throw cachedEntry.promise;
|
|
45
|
+
}
|
|
46
|
+
const entry = {
|
|
47
|
+
dispose: () => {
|
|
48
|
+
if (entry.timeout !== void 0 || expiration < 0) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
entry.timeout = window.setTimeout(
|
|
52
|
+
() => {
|
|
53
|
+
delete this.cache[cacheKey];
|
|
54
|
+
},
|
|
55
|
+
expiration
|
|
56
|
+
);
|
|
57
|
+
},
|
|
58
|
+
promise: loader().then((result) => {
|
|
59
|
+
entry.result = result;
|
|
60
|
+
return result;
|
|
61
|
+
}).catch((error) => {
|
|
62
|
+
entry.result = fallback;
|
|
63
|
+
entry.error = error;
|
|
64
|
+
return fallback;
|
|
65
|
+
}).finally(() => {
|
|
66
|
+
entry.dispose();
|
|
67
|
+
})
|
|
68
|
+
};
|
|
69
|
+
this.cache[cacheKey] = entry;
|
|
70
|
+
throw entry.promise;
|
|
71
|
+
}
|
|
72
|
+
get(cacheKey) {
|
|
73
|
+
const entry = this.cache[cacheKey];
|
|
74
|
+
if (entry === void 0) {
|
|
75
|
+
return void 0;
|
|
76
|
+
}
|
|
77
|
+
if (entry.timeout !== void 0) {
|
|
78
|
+
clearTimeout(entry.timeout);
|
|
79
|
+
delete entry.timeout;
|
|
80
|
+
entry.dispose();
|
|
81
|
+
}
|
|
82
|
+
return entry;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
86
|
+
0 && (module.exports = {
|
|
87
|
+
Cache
|
|
88
|
+
});
|
package/hooks/Cache.d.ts
CHANGED
|
@@ -1,22 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
type EntryLoader<R> = (...args: any) => Promise<R>;
|
|
2
|
+
type EntryOptions<R> = {
|
|
3
3
|
cacheKey: string;
|
|
4
4
|
loader: EntryLoader<R>;
|
|
5
5
|
fallback?: R;
|
|
6
6
|
expiration?: number;
|
|
7
7
|
};
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
result?: R;
|
|
11
|
-
dispose: () => void;
|
|
12
|
-
timeout?: number;
|
|
13
|
-
error?: any;
|
|
14
|
-
};
|
|
15
|
-
export declare class Cache {
|
|
16
|
-
private readonly cache;
|
|
17
|
-
private readonly defaultExpiration;
|
|
18
|
-
constructor(defaultExpiration: number);
|
|
19
|
-
load<R>(configuration: EntryOptions<R>): R;
|
|
20
|
-
get<R>(cacheKey: string): Entry<R> | undefined;
|
|
21
|
-
}
|
|
22
|
-
export {};
|
|
8
|
+
|
|
9
|
+
export type { EntryLoader, EntryOptions };
|
package/hooks/Cache.js
CHANGED
|
@@ -1,62 +1,64 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Cache = void 0;
|
|
4
1
|
class Cache {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
throw cachedEntry.error;
|
|
18
|
-
}
|
|
19
|
-
if (cachedEntry.result !== undefined) {
|
|
20
|
-
return cachedEntry.result;
|
|
21
|
-
}
|
|
22
|
-
throw cachedEntry.promise;
|
|
2
|
+
constructor(defaultExpiration) {
|
|
3
|
+
this.cache = {};
|
|
4
|
+
this.defaultExpiration = defaultExpiration;
|
|
5
|
+
}
|
|
6
|
+
load(configuration) {
|
|
7
|
+
const { cacheKey, loader, fallback, expiration = this.defaultExpiration } = configuration;
|
|
8
|
+
const cachedEntry = this.get(cacheKey);
|
|
9
|
+
if (cachedEntry !== void 0) {
|
|
10
|
+
if (cachedEntry.error !== void 0) {
|
|
11
|
+
if (fallback !== void 0) {
|
|
12
|
+
return fallback;
|
|
23
13
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
if (entry.timeout !== undefined || expiration < 0) {
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
entry.timeout = window.setTimeout(() => {
|
|
30
|
-
delete this.cache[cacheKey];
|
|
31
|
-
}, expiration);
|
|
32
|
-
},
|
|
33
|
-
promise: loader()
|
|
34
|
-
.then((result) => {
|
|
35
|
-
entry.result = result;
|
|
36
|
-
return result;
|
|
37
|
-
})
|
|
38
|
-
.catch(error => {
|
|
39
|
-
entry.error = error;
|
|
40
|
-
})
|
|
41
|
-
.finally(() => {
|
|
42
|
-
entry.dispose();
|
|
43
|
-
}),
|
|
44
|
-
};
|
|
45
|
-
this.cache[cacheKey] = entry;
|
|
46
|
-
throw entry.promise;
|
|
47
|
-
}
|
|
48
|
-
get(cacheKey) {
|
|
49
|
-
const entry = this.cache[cacheKey];
|
|
50
|
-
if (entry === undefined) {
|
|
51
|
-
return undefined;
|
|
14
|
+
if (cachedEntry.result === void 0) {
|
|
15
|
+
throw cachedEntry.error;
|
|
52
16
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
17
|
+
}
|
|
18
|
+
if (cachedEntry.result !== void 0) {
|
|
19
|
+
return cachedEntry.result;
|
|
20
|
+
}
|
|
21
|
+
throw cachedEntry.promise;
|
|
22
|
+
}
|
|
23
|
+
const entry = {
|
|
24
|
+
dispose: () => {
|
|
25
|
+
if (entry.timeout !== void 0 || expiration < 0) {
|
|
26
|
+
return;
|
|
57
27
|
}
|
|
58
|
-
|
|
28
|
+
entry.timeout = window.setTimeout(
|
|
29
|
+
() => {
|
|
30
|
+
delete this.cache[cacheKey];
|
|
31
|
+
},
|
|
32
|
+
expiration
|
|
33
|
+
);
|
|
34
|
+
},
|
|
35
|
+
promise: loader().then((result) => {
|
|
36
|
+
entry.result = result;
|
|
37
|
+
return result;
|
|
38
|
+
}).catch((error) => {
|
|
39
|
+
entry.result = fallback;
|
|
40
|
+
entry.error = error;
|
|
41
|
+
return fallback;
|
|
42
|
+
}).finally(() => {
|
|
43
|
+
entry.dispose();
|
|
44
|
+
})
|
|
45
|
+
};
|
|
46
|
+
this.cache[cacheKey] = entry;
|
|
47
|
+
throw entry.promise;
|
|
48
|
+
}
|
|
49
|
+
get(cacheKey) {
|
|
50
|
+
const entry = this.cache[cacheKey];
|
|
51
|
+
if (entry === void 0) {
|
|
52
|
+
return void 0;
|
|
53
|
+
}
|
|
54
|
+
if (entry.timeout !== void 0) {
|
|
55
|
+
clearTimeout(entry.timeout);
|
|
56
|
+
delete entry.timeout;
|
|
57
|
+
entry.dispose();
|
|
59
58
|
}
|
|
59
|
+
return entry;
|
|
60
|
+
}
|
|
60
61
|
}
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
export {
|
|
63
|
+
Cache
|
|
64
|
+
};
|
package/hooks/index.cjs
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
+
var hooks_exports = {};
|
|
17
|
+
module.exports = __toCommonJS(hooks_exports);
|
|
18
|
+
__reExport(hooks_exports, require('./useEvaluation.cjs'), module.exports);
|
|
19
|
+
__reExport(hooks_exports, require('./useContent.cjs'), module.exports);
|
|
20
|
+
__reExport(hooks_exports, require('./useCroct.cjs'), module.exports);
|
|
21
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
22
|
+
0 && (module.exports = {
|
|
23
|
+
...require('./useEvaluation.cjs'),
|
|
24
|
+
...require('./useContent.cjs'),
|
|
25
|
+
...require('./useCroct.cjs')
|
|
26
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { UseEvaluationOptions, useEvaluation } from './useEvaluation.cjs';
|
|
2
|
+
export { UseContentOptions, useContent } from './useContent.cjs';
|
|
3
|
+
export { useCroct } from './useCroct.cjs';
|
|
4
|
+
import '@croct/plug/sdk/json';
|
|
5
|
+
import '@croct/sdk/facade/evaluatorFacade';
|
|
6
|
+
import '@croct/plug/slot';
|
|
7
|
+
import '@croct/plug/plug';
|
|
8
|
+
import '@croct/plug';
|
package/hooks/index.d.ts
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
export { UseEvaluationOptions, useEvaluation } from './useEvaluation.js';
|
|
2
|
+
export { UseContentOptions, useContent } from './useContent.js';
|
|
3
|
+
export { useCroct } from './useCroct.js';
|
|
4
|
+
import '@croct/plug/sdk/json';
|
|
5
|
+
import '@croct/sdk/facade/evaluatorFacade';
|
|
6
|
+
import '@croct/plug/slot';
|
|
7
|
+
import '@croct/plug/plug';
|
|
8
|
+
import '@croct/plug';
|
package/hooks/index.js
CHANGED
|
@@ -1,20 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./useEvaluation"), exports);
|
|
18
|
-
__exportStar(require("./useContent"), exports);
|
|
19
|
-
__exportStar(require("./useCroct"), exports);
|
|
20
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export * from "./useEvaluation.js";
|
|
2
|
+
export * from "./useContent.js";
|
|
3
|
+
export * from "./useCroct.js";
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var useContent_exports = {};
|
|
20
|
+
__export(useContent_exports, {
|
|
21
|
+
useContent: () => useContent
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(useContent_exports);
|
|
24
|
+
var import_react = require("react");
|
|
25
|
+
var import_content = require("@croct/content");
|
|
26
|
+
var import_useLoader = require('./useLoader.cjs');
|
|
27
|
+
var import_useCroct = require('./useCroct.cjs');
|
|
28
|
+
var import_ssr_polyfills = require('../ssr-polyfills.cjs');
|
|
29
|
+
var import_hash = require('../hash.cjs');
|
|
30
|
+
function useCsrContent(id, options = {}) {
|
|
31
|
+
const {
|
|
32
|
+
cacheKey,
|
|
33
|
+
expiration,
|
|
34
|
+
fallback: fallbackContent,
|
|
35
|
+
initial: initialContent,
|
|
36
|
+
staleWhileLoading = false,
|
|
37
|
+
...fetchOptions
|
|
38
|
+
} = options;
|
|
39
|
+
const preferredLocale = normalizePreferredLocale(fetchOptions.preferredLocale);
|
|
40
|
+
const defaultContent = (0, import_react.useMemo)(
|
|
41
|
+
() => (0, import_content.getSlotContent)(id, preferredLocale) ?? void 0,
|
|
42
|
+
[id, preferredLocale]
|
|
43
|
+
);
|
|
44
|
+
const fallback = fallbackContent === void 0 ? defaultContent : fallbackContent;
|
|
45
|
+
const [initial, setInitial] = (0, import_react.useState)(
|
|
46
|
+
() => initialContent === void 0 ? defaultContent : initialContent
|
|
47
|
+
);
|
|
48
|
+
const croct = (0, import_useCroct.useCroct)();
|
|
49
|
+
const result = (0, import_useLoader.useLoader)({
|
|
50
|
+
cacheKey: (0, import_hash.hash)(
|
|
51
|
+
`useContent:${cacheKey ?? ""}:${id}:${preferredLocale ?? ""}:${JSON.stringify(fetchOptions.attributes ?? {})}`
|
|
52
|
+
),
|
|
53
|
+
loader: () => croct.fetch(id, {
|
|
54
|
+
...fetchOptions,
|
|
55
|
+
preferredLocale,
|
|
56
|
+
fallback
|
|
57
|
+
}).then(({ content }) => content),
|
|
58
|
+
initial,
|
|
59
|
+
expiration
|
|
60
|
+
});
|
|
61
|
+
(0, import_react.useEffect)(
|
|
62
|
+
() => {
|
|
63
|
+
if (staleWhileLoading) {
|
|
64
|
+
setInitial((current) => {
|
|
65
|
+
if (current !== result) {
|
|
66
|
+
return result;
|
|
67
|
+
}
|
|
68
|
+
return current;
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
[result, staleWhileLoading]
|
|
73
|
+
);
|
|
74
|
+
return result;
|
|
75
|
+
}
|
|
76
|
+
function useSsrContent(slotId, { initial, preferredLocale } = {}) {
|
|
77
|
+
const resolvedInitialContent = initial === void 0 ? (0, import_content.getSlotContent)(slotId, normalizePreferredLocale(preferredLocale)) ?? void 0 : initial;
|
|
78
|
+
if (resolvedInitialContent === void 0) {
|
|
79
|
+
throw new Error(
|
|
80
|
+
"The initial content is required for server-side rendering (SSR). For help, see https://croct.help/sdk/react/missing-slot-content"
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
return resolvedInitialContent;
|
|
84
|
+
}
|
|
85
|
+
function normalizePreferredLocale(preferredLocale) {
|
|
86
|
+
return preferredLocale !== void 0 && preferredLocale !== "" ? preferredLocale : void 0;
|
|
87
|
+
}
|
|
88
|
+
const useContent = (0, import_ssr_polyfills.isSsr)() ? useSsrContent : useCsrContent;
|
|
89
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
90
|
+
0 && (module.exports = {
|
|
91
|
+
useContent
|
|
92
|
+
});
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { VersionedSlotMap, VersionedSlotId, SlotContent } from '@croct/plug/slot';
|
|
2
|
+
import { JsonObject } from '@croct/plug/sdk/json';
|
|
3
|
+
import { FetchOptions } from '@croct/plug/plug';
|
|
4
|
+
|
|
5
|
+
type UseContentOptions<I, F> = FetchOptions<F> & {
|
|
6
|
+
initial?: I;
|
|
7
|
+
cacheKey?: string;
|
|
8
|
+
expiration?: number;
|
|
9
|
+
staleWhileLoading?: boolean;
|
|
10
|
+
};
|
|
11
|
+
type UseContentHook = {
|
|
12
|
+
<P extends JsonObject, I = P, F = P>(id: keyof VersionedSlotMap extends never ? string : never, options?: UseContentOptions<I, F>): P | I | F;
|
|
13
|
+
<S extends VersionedSlotId>(id: S, options?: UseContentOptions<never, never>): SlotContent<S>;
|
|
14
|
+
<I, S extends VersionedSlotId>(id: S, options?: UseContentOptions<I, never>): SlotContent<S> | I;
|
|
15
|
+
<F, S extends VersionedSlotId>(id: S, options?: UseContentOptions<never, F>): SlotContent<S> | F;
|
|
16
|
+
<I, F, S extends VersionedSlotId>(id: S, options?: UseContentOptions<I, F>): SlotContent<S> | I | F;
|
|
17
|
+
};
|
|
18
|
+
declare const useContent: UseContentHook;
|
|
19
|
+
|
|
20
|
+
export { type UseContentOptions, useContent };
|
package/hooks/useContent.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { VersionedSlotMap, VersionedSlotId, SlotContent } from '@croct/plug/slot';
|
|
2
2
|
import { JsonObject } from '@croct/plug/sdk/json';
|
|
3
3
|
import { FetchOptions } from '@croct/plug/plug';
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
|
|
5
|
+
type UseContentOptions<I, F> = FetchOptions<F> & {
|
|
6
6
|
initial?: I;
|
|
7
7
|
cacheKey?: string;
|
|
8
8
|
expiration?: number;
|
|
@@ -15,5 +15,6 @@ type UseContentHook = {
|
|
|
15
15
|
<F, S extends VersionedSlotId>(id: S, options?: UseContentOptions<never, F>): SlotContent<S> | F;
|
|
16
16
|
<I, F, S extends VersionedSlotId>(id: S, options?: UseContentOptions<I, F>): SlotContent<S> | I | F;
|
|
17
17
|
};
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
declare const useContent: UseContentHook;
|
|
19
|
+
|
|
20
|
+
export { type UseContentOptions, useContent };
|
package/hooks/useContent.js
CHANGED
|
@@ -1,45 +1,68 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const ssr_polyfills_1 = require("../ssr-polyfills");
|
|
8
|
-
const hash_1 = require("../hash");
|
|
1
|
+
import { useEffect, useMemo, useState } from "react";
|
|
2
|
+
import { getSlotContent } from "@croct/content";
|
|
3
|
+
import { useLoader } from "./useLoader.js";
|
|
4
|
+
import { useCroct } from "./useCroct.js";
|
|
5
|
+
import { isSsr } from "../ssr-polyfills.js";
|
|
6
|
+
import { hash } from "../hash.js";
|
|
9
7
|
function useCsrContent(id, options = {}) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
(
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
8
|
+
const {
|
|
9
|
+
cacheKey,
|
|
10
|
+
expiration,
|
|
11
|
+
fallback: fallbackContent,
|
|
12
|
+
initial: initialContent,
|
|
13
|
+
staleWhileLoading = false,
|
|
14
|
+
...fetchOptions
|
|
15
|
+
} = options;
|
|
16
|
+
const preferredLocale = normalizePreferredLocale(fetchOptions.preferredLocale);
|
|
17
|
+
const defaultContent = useMemo(
|
|
18
|
+
() => getSlotContent(id, preferredLocale) ?? void 0,
|
|
19
|
+
[id, preferredLocale]
|
|
20
|
+
);
|
|
21
|
+
const fallback = fallbackContent === void 0 ? defaultContent : fallbackContent;
|
|
22
|
+
const [initial, setInitial] = useState(
|
|
23
|
+
() => initialContent === void 0 ? defaultContent : initialContent
|
|
24
|
+
);
|
|
25
|
+
const croct = useCroct();
|
|
26
|
+
const result = useLoader({
|
|
27
|
+
cacheKey: hash(
|
|
28
|
+
`useContent:${cacheKey ?? ""}:${id}:${preferredLocale ?? ""}:${JSON.stringify(fetchOptions.attributes ?? {})}`
|
|
29
|
+
),
|
|
30
|
+
loader: () => croct.fetch(id, {
|
|
31
|
+
...fetchOptions,
|
|
32
|
+
preferredLocale,
|
|
33
|
+
fallback
|
|
34
|
+
}).then(({ content }) => content),
|
|
35
|
+
initial,
|
|
36
|
+
expiration
|
|
37
|
+
});
|
|
38
|
+
useEffect(
|
|
39
|
+
() => {
|
|
40
|
+
if (staleWhileLoading) {
|
|
41
|
+
setInitial((current) => {
|
|
42
|
+
if (current !== result) {
|
|
43
|
+
return result;
|
|
44
|
+
}
|
|
45
|
+
return current;
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
[result, staleWhileLoading]
|
|
50
|
+
);
|
|
51
|
+
return result;
|
|
36
52
|
}
|
|
37
|
-
function useSsrContent(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
53
|
+
function useSsrContent(slotId, { initial, preferredLocale } = {}) {
|
|
54
|
+
const resolvedInitialContent = initial === void 0 ? getSlotContent(slotId, normalizePreferredLocale(preferredLocale)) ?? void 0 : initial;
|
|
55
|
+
if (resolvedInitialContent === void 0) {
|
|
56
|
+
throw new Error(
|
|
57
|
+
"The initial content is required for server-side rendering (SSR). For help, see https://croct.help/sdk/react/missing-slot-content"
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
return resolvedInitialContent;
|
|
43
61
|
}
|
|
44
|
-
|
|
45
|
-
|
|
62
|
+
function normalizePreferredLocale(preferredLocale) {
|
|
63
|
+
return preferredLocale !== void 0 && preferredLocale !== "" ? preferredLocale : void 0;
|
|
64
|
+
}
|
|
65
|
+
const useContent = isSsr() ? useSsrContent : useCsrContent;
|
|
66
|
+
export {
|
|
67
|
+
useContent
|
|
68
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var useCroct_exports = {};
|
|
20
|
+
__export(useCroct_exports, {
|
|
21
|
+
useCroct: () => useCroct
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(useCroct_exports);
|
|
24
|
+
var import_react = require("react");
|
|
25
|
+
var import_CroctProvider = require('../CroctProvider.cjs');
|
|
26
|
+
function useCroct() {
|
|
27
|
+
const context = (0, import_react.useContext)(import_CroctProvider.CroctContext);
|
|
28
|
+
if (context === null) {
|
|
29
|
+
throw new Error(
|
|
30
|
+
"useCroct() can only be used in the context of a <CroctProvider> component. For help, see https://croct.help/sdk/react/missing-provider"
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
return context.plug;
|
|
34
|
+
}
|
|
35
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
36
|
+
0 && (module.exports = {
|
|
37
|
+
useCroct
|
|
38
|
+
});
|
package/hooks/useCroct.d.ts
CHANGED
package/hooks/useCroct.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.useCroct = useCroct;
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
const CroctProvider_1 = require("../CroctProvider");
|
|
1
|
+
import { useContext } from "react";
|
|
2
|
+
import { CroctContext } from "../CroctProvider.js";
|
|
6
3
|
function useCroct() {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
const context = useContext(CroctContext);
|
|
5
|
+
if (context === null) {
|
|
6
|
+
throw new Error(
|
|
7
|
+
"useCroct() can only be used in the context of a <CroctProvider> component. For help, see https://croct.help/sdk/react/missing-provider"
|
|
8
|
+
);
|
|
9
|
+
}
|
|
10
|
+
return context.plug;
|
|
13
11
|
}
|
|
14
|
-
|
|
12
|
+
export {
|
|
13
|
+
useCroct
|
|
14
|
+
};
|