@uxf/core 3.1.0 → 4.0.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/README.md +35 -0
- package/package.json +1 -1
- package/utils/resizer.d.ts +9 -8
- package/utils/resizer.js +28 -21
package/README.md
CHANGED
|
@@ -17,6 +17,41 @@
|
|
|
17
17
|
- `is-required`
|
|
18
18
|
- `is-selected`
|
|
19
19
|
|
|
20
|
+
## Resizer
|
|
21
|
+
!!! Required [@uxf/resizer](https://www.npmjs.com/package/@uxf/resizer) version `>= 2.3.2` which supported `quality` parameter.
|
|
22
|
+
|
|
23
|
+
### Config
|
|
24
|
+
```json
|
|
25
|
+
[
|
|
26
|
+
{
|
|
27
|
+
"route": "/generated/static/:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)/:version/:filename(*).:extension.:toFormat",
|
|
28
|
+
"source": "https://uxf-base.uxf.dev/:filename+.:extension"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"route": "/generated/:namespace/:p1/:p2/:filename([a-f0-9\\-]+)_:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)_:extension.:toFormat",
|
|
32
|
+
"source": "https://s3.uxf.dev/${APP_NAME}-${APP_ENV}/:namespace/:p1/:p2/:filename.:extension"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Usage for generated images
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import {resizerImageUrl} from "@uxf/core/utils/resizer";
|
|
41
|
+
|
|
42
|
+
<img src={resizerImageUrl(file, width, height, params)}/>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Usage for static images
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import {resizerImageUrl} from "@uxf/core/utils/resizer";
|
|
49
|
+
|
|
50
|
+
import staticImage from "./path/to/static-image.png";
|
|
51
|
+
|
|
52
|
+
<img src={resizerImageUrl(staticImage, width, height, params)}/>
|
|
53
|
+
```
|
|
54
|
+
|
|
20
55
|
## Cookie
|
|
21
56
|
|
|
22
57
|
- Cookie options
|
package/package.json
CHANGED
package/utils/resizer.d.ts
CHANGED
|
@@ -3,6 +3,13 @@ interface FileResponse {
|
|
|
3
3
|
namespace?: string | null;
|
|
4
4
|
extension: string;
|
|
5
5
|
}
|
|
6
|
+
export declare type StaticImageData = {
|
|
7
|
+
src: string;
|
|
8
|
+
height: number;
|
|
9
|
+
width: number;
|
|
10
|
+
blurDataURL?: string;
|
|
11
|
+
};
|
|
12
|
+
export declare type ImageSource = FileResponse | StaticImageData | string;
|
|
6
13
|
declare const fitMapper: {
|
|
7
14
|
cover: string;
|
|
8
15
|
fill: string;
|
|
@@ -36,13 +43,7 @@ export interface ResizerImageProps {
|
|
|
36
43
|
background?: keyof typeof backgroundMapper | string;
|
|
37
44
|
trim?: keyof typeof trimMapper | number;
|
|
38
45
|
toFormat?: "webp" | "png" | "avif" | string;
|
|
46
|
+
quality?: number;
|
|
39
47
|
}
|
|
40
|
-
export declare const resizerImageUrl: (
|
|
41
|
-
declare type StaticImageData = {
|
|
42
|
-
src: string;
|
|
43
|
-
height: number;
|
|
44
|
-
width: number;
|
|
45
|
-
blurDataURL?: string;
|
|
46
|
-
};
|
|
47
|
-
export declare const resizerStaticImageUrl: (src: string | StaticImageData, width?: number | "auto", height?: number | "auto", props?: ResizerImageProps, version?: number) => string;
|
|
48
|
+
export declare const resizerImageUrl: (source: ImageSource | null | undefined, width?: number | "auto", height?: number | "auto", props?: ResizerImageProps, version?: number) => string | null;
|
|
48
49
|
export {};
|
package/utils/resizer.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.resizerImageUrl = void 0;
|
|
4
4
|
var fitMapper = {
|
|
5
5
|
cover: "cv",
|
|
6
6
|
fill: "f",
|
|
@@ -28,46 +28,53 @@ var backgroundMapper = {
|
|
|
28
28
|
var trimMapper = {
|
|
29
29
|
"not-trim": "nt",
|
|
30
30
|
};
|
|
31
|
-
var
|
|
31
|
+
var resizerStaticImageUrl = function (src, width, height, props, version) {
|
|
32
|
+
var _a;
|
|
32
33
|
if (width === void 0) { width = "auto"; }
|
|
33
34
|
if (height === void 0) { height = "auto"; }
|
|
34
35
|
if (props === void 0) { props = {}; }
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
var filename =
|
|
40
|
-
|
|
36
|
+
if (version === void 0) { version = 1; }
|
|
37
|
+
var _b = props.fit, fit = _b === void 0 ? "cover" : _b, _c = props.position, position = _c === void 0 ? "center" : _c, _d = props.toFormat, toFormat = _d === void 0 ? undefined : _d, _e = props.trim, trim = _e === void 0 ? "not-trim" : _e, _f = props.background, background = _f === void 0 ? "FFF" : _f;
|
|
38
|
+
var filepath = typeof src === "string" ? src : src.src;
|
|
39
|
+
var dotIndex = filepath.lastIndexOf(".");
|
|
40
|
+
var filename = filepath.slice(0, dotIndex);
|
|
41
|
+
var extension = filepath.slice(dotIndex + 1);
|
|
42
|
+
var directory = [
|
|
41
43
|
width === "auto" ? "x" : width,
|
|
42
44
|
height === "auto" ? "x" : height,
|
|
43
45
|
fitMapper[fit],
|
|
44
46
|
positionMapper[position],
|
|
45
47
|
background === "transparent" ? backgroundMapper[background] : background,
|
|
46
48
|
trim === "not-trim" ? trimMapper[trim] : trim,
|
|
47
|
-
|
|
49
|
+
(_a = props.quality) !== null && _a !== void 0 ? _a : "x",
|
|
48
50
|
].join("_");
|
|
49
|
-
return "/generated/".concat(
|
|
51
|
+
return "/generated/static/".concat(directory, "/").concat(version).concat(filename, ".").concat(extension, ".").concat(toFormat !== null && toFormat !== void 0 ? toFormat : extension);
|
|
50
52
|
};
|
|
51
|
-
|
|
52
|
-
var
|
|
53
|
+
var resizerImageUrl = function (source, width, height, props, version) {
|
|
54
|
+
var _a;
|
|
53
55
|
if (width === void 0) { width = "auto"; }
|
|
54
56
|
if (height === void 0) { height = "auto"; }
|
|
55
57
|
if (props === void 0) { props = {}; }
|
|
56
58
|
if (version === void 0) { version = 1; }
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
if (source === null || source === undefined) {
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
if (typeof source === "string" || "src" in source) {
|
|
63
|
+
return resizerStaticImageUrl(source, width, height, props, version);
|
|
64
|
+
}
|
|
65
|
+
var _b = props.fit, fit = _b === void 0 ? "cover" : _b, _c = props.position, position = _c === void 0 ? "center" : _c, _d = props.toFormat, toFormat = _d === void 0 ? source.extension : _d, _e = props.trim, trim = _e === void 0 ? "not-trim" : _e, _f = props.background, background = _f === void 0 ? "FFF" : _f;
|
|
66
|
+
var filename = [
|
|
67
|
+
source.uuid,
|
|
63
68
|
width === "auto" ? "x" : width,
|
|
64
69
|
height === "auto" ? "x" : height,
|
|
65
70
|
fitMapper[fit],
|
|
66
71
|
positionMapper[position],
|
|
67
72
|
background === "transparent" ? backgroundMapper[background] : background,
|
|
68
73
|
trim === "not-trim" ? trimMapper[trim] : trim,
|
|
74
|
+
(_a = props.quality) !== null && _a !== void 0 ? _a : "x",
|
|
75
|
+
"".concat(source.extension, ".").concat(toFormat),
|
|
69
76
|
].join("_");
|
|
70
|
-
return "/generated/
|
|
77
|
+
return "/generated/".concat(source.namespace, "/").concat(source.uuid.charAt(0), "/").concat(source.uuid.charAt(1), "/").concat(filename);
|
|
71
78
|
};
|
|
72
|
-
exports.
|
|
73
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
79
|
+
exports.resizerImageUrl = resizerImageUrl;
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzaXplci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy91dGlscy9yZXNpemVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQWVBLElBQU0sU0FBUyxHQUFHO0lBQ2QsS0FBSyxFQUFFLElBQUk7SUFDWCxJQUFJLEVBQUUsR0FBRztJQUNULE9BQU8sRUFBRSxJQUFJO0lBQ2IsTUFBTSxFQUFFLElBQUk7SUFDWixPQUFPLEVBQUUsS0FBSztDQUNqQixDQUFDO0FBRUYsSUFBTSxjQUFjLEdBQUc7SUFDbkIsU0FBUyxFQUFFLEdBQUc7SUFDZCxNQUFNLEVBQUUsR0FBRztJQUNYLE1BQU0sRUFBRSxHQUFHO0lBQ1gsTUFBTSxFQUFFLEdBQUc7SUFDWCxPQUFPLEVBQUUsR0FBRztJQUNaLElBQUksRUFBRSxHQUFHO0lBQ1QsYUFBYSxFQUFFLElBQUk7SUFDbkIsVUFBVSxFQUFFLElBQUk7SUFDaEIsS0FBSyxFQUFFLEdBQUc7SUFDVixjQUFjLEVBQUUsSUFBSTtJQUNwQixXQUFXLEVBQUUsSUFBSTtJQUNqQixHQUFHLEVBQUUsR0FBRztDQUNYLENBQUM7QUFFRixJQUFNLGdCQUFnQixHQUFHO0lBQ3JCLFdBQVcsRUFBRSxHQUFHO0NBQ25CLENBQUM7QUFFRixJQUFNLFVBQVUsR0FBRztJQUNmLFVBQVUsRUFBRSxJQUFJO0NBQ25CLENBQUM7QUFXRixJQUFNLHFCQUFxQixHQUFHLFVBQzFCLEdBQTZCLEVBQzdCLEtBQStCLEVBQy9CLE1BQWdDLEVBQ2hDLEtBQTZCLEVBQzdCLE9BQVc7O0lBSFgsc0JBQUEsRUFBQSxjQUErQjtJQUMvQix1QkFBQSxFQUFBLGVBQWdDO0lBQ2hDLHNCQUFBLEVBQUEsVUFBNkI7SUFDN0Isd0JBQUEsRUFBQSxXQUFXO0lBRUgsSUFBQSxLQUFvRyxLQUFLLElBQTVGLEVBQWIsR0FBRyxtQkFBRyxPQUFPLEtBQUEsRUFBRSxLQUFxRixLQUFLLFNBQXZFLEVBQW5CLFFBQVEsbUJBQUcsUUFBUSxLQUFB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
|