@koine/utils 1.0.85 → 1.0.87
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/getMediaQueryWidthResolvers.d.ts +10 -0
- package/getMediaQueryWidthResolvers.js +68 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/invariant.d.ts +19 -0
- package/invariant.js +34 -0
- package/node/getMediaQueryWidthResolvers.js +72 -0
- package/node/index.js +1 -0
- package/node/invariant.js +38 -0
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare type GetMediaQueryWidthResolversBreakpoints = Record<string, number>;
|
|
2
|
+
export declare function getMediaQueryWidthResolvers<TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig): {
|
|
3
|
+
max: (br: Extract<keyof TBreakpointsConfig, string>) => string;
|
|
4
|
+
min: (br: Extract<keyof TBreakpointsConfig, string>) => string;
|
|
5
|
+
down: (br: Extract<keyof TBreakpointsConfig, string>) => string;
|
|
6
|
+
up: (br: Extract<keyof TBreakpointsConfig, string>) => string;
|
|
7
|
+
between: (br1: Extract<keyof TBreakpointsConfig, string>, br2?: Extract<keyof TBreakpointsConfig, string> | undefined) => string;
|
|
8
|
+
only: (br: Extract<keyof TBreakpointsConfig, string>) => string;
|
|
9
|
+
};
|
|
10
|
+
export default getMediaQueryWidthResolvers;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { __assign } from "tslib";
|
|
2
|
+
export function getMediaQueryWidthResolvers(customBreakpoints) {
|
|
3
|
+
var breakpoints = __assign({ xs: 0 }, customBreakpoints);
|
|
4
|
+
var sortedBreakpointsNames = Object.keys(breakpoints).map(function (key) {
|
|
5
|
+
var br = key;
|
|
6
|
+
return [br, breakpoints[br]];
|
|
7
|
+
})
|
|
8
|
+
.sort(function (a, b) { return a[1] - b[1]; })
|
|
9
|
+
.map(function (item) { return item[0]; });
|
|
10
|
+
var getNextBreakpoint = function (breakpoint) {
|
|
11
|
+
var index = sortedBreakpointsNames.indexOf(breakpoint);
|
|
12
|
+
return sortedBreakpointsNames[index + 1];
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* It behaves the same as `(min-width: ${value}px)`
|
|
16
|
+
* where value is the given breakpoint value.
|
|
17
|
+
* For ease of use this can be used both as a function `min("md")` and as an
|
|
18
|
+
* object literal `min.md`.
|
|
19
|
+
*/
|
|
20
|
+
var min = function (br) { return "(min-width: ".concat(breakpoints[br], "px)"); };
|
|
21
|
+
/**
|
|
22
|
+
* It behaves the same as `(max-width: ${value}px)`
|
|
23
|
+
* where value is the given breakpoint value.
|
|
24
|
+
* For ease of use this can be used both as a function `max("md")` and as an
|
|
25
|
+
* object literal `max.md`.
|
|
26
|
+
*/
|
|
27
|
+
var max = function (br) { return "(max-width: ".concat(breakpoints[br] - 0.02, "px)"); };
|
|
28
|
+
/**
|
|
29
|
+
* It behaves the same as `min`
|
|
30
|
+
* @inheritdoc {max}
|
|
31
|
+
*/
|
|
32
|
+
var up = min;
|
|
33
|
+
/**
|
|
34
|
+
* It behaves similarly to `max` but you will use the "next" breakpoint,
|
|
35
|
+
* specifying CSS that will apply from the given breakpoint and down.
|
|
36
|
+
*/
|
|
37
|
+
var down = function (br) {
|
|
38
|
+
var brNext = getNextBreakpoint(br);
|
|
39
|
+
// TODO: if br does not exists otherwise throw Error
|
|
40
|
+
return brNext && "(max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
|
|
41
|
+
};
|
|
42
|
+
/**
|
|
43
|
+
* Media query between the two given breakpoints
|
|
44
|
+
*/
|
|
45
|
+
var between = function (br1, br2) {
|
|
46
|
+
br2 = br2 || getNextBreakpoint(br1);
|
|
47
|
+
return br2
|
|
48
|
+
? "(min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)")
|
|
49
|
+
: min(br1);
|
|
50
|
+
};
|
|
51
|
+
/**
|
|
52
|
+
* Media query to apply from the given breakpoint until the next, just for its
|
|
53
|
+
* full range
|
|
54
|
+
*/
|
|
55
|
+
var only = function (br) {
|
|
56
|
+
var brNext = getNextBreakpoint(br);
|
|
57
|
+
return brNext ? between(br, brNext) : min(br);
|
|
58
|
+
};
|
|
59
|
+
return {
|
|
60
|
+
max: max,
|
|
61
|
+
min: min,
|
|
62
|
+
down: down,
|
|
63
|
+
up: up,
|
|
64
|
+
between: between,
|
|
65
|
+
only: only,
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
export default getMediaQueryWidthResolvers;
|
package/index.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ export * from "./ensureInt";
|
|
|
20
20
|
export * from "./findDuplicatedIndexes";
|
|
21
21
|
export * from "./getEmptyArray";
|
|
22
22
|
export * from "./getKeys";
|
|
23
|
+
export * from "./getMediaQueryWidthResolvers";
|
|
23
24
|
export * from "./getNonce";
|
|
24
25
|
export * from "./getParamAmong";
|
|
25
26
|
export * from "./getParamAsInt";
|
package/index.js
CHANGED
|
@@ -21,6 +21,7 @@ export * from "./ensureInt";
|
|
|
21
21
|
export * from "./findDuplicatedIndexes";
|
|
22
22
|
export * from "./getEmptyArray";
|
|
23
23
|
export * from "./getKeys";
|
|
24
|
+
export * from "./getMediaQueryWidthResolvers";
|
|
24
25
|
export * from "./getNonce";
|
|
25
26
|
export * from "./getParamAmong";
|
|
26
27
|
export * from "./getParamAsInt";
|
package/invariant.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FIXME: invariant calls do not get tree shaked in minified output of projects
|
|
3
|
+
* using it. Let's not use it internally and not export it from `@koine/utils`
|
|
4
|
+
* until we find a tree-shakeable way of doing this. For now just wrapping
|
|
5
|
+
* the logging code into `if (process.env["NODE_ENV"] !== "production") {}`
|
|
6
|
+
* works better despite it is more verbose.
|
|
7
|
+
*
|
|
8
|
+
* @resources
|
|
9
|
+
* - https://github.com/alexreardon/tiny-invariant
|
|
10
|
+
* - https://github.com/zertosh/invariant
|
|
11
|
+
* - https://stackoverflow.com/q/39055159/1938970
|
|
12
|
+
*
|
|
13
|
+
* @param condition The condition that, if `true` will throw the error during development
|
|
14
|
+
* @param message A string or a function that returns a string
|
|
15
|
+
* @param lib The library name to show in the error message prefix. When `lib` is also specified it outputs `[lib:prefix]: the message`, otherwise just `[lib|prefix]: the message`)
|
|
16
|
+
* @param prefix The library name to show in the error message prefix. When `lib` is also specified it outputs `[lib:prefix]: the message`, otherwise just `[lib|prefix]: the message`)
|
|
17
|
+
*/
|
|
18
|
+
export declare function invariant(condition: any, message?: string | (() => string), lib?: string, prefix?: string): asserts condition;
|
|
19
|
+
export default invariant;
|
package/invariant.js
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FIXME: invariant calls do not get tree shaked in minified output of projects
|
|
3
|
+
* using it. Let's not use it internally and not export it from `@koine/utils`
|
|
4
|
+
* until we find a tree-shakeable way of doing this. For now just wrapping
|
|
5
|
+
* the logging code into `if (process.env["NODE_ENV"] !== "production") {}`
|
|
6
|
+
* works better despite it is more verbose.
|
|
7
|
+
*
|
|
8
|
+
* @resources
|
|
9
|
+
* - https://github.com/alexreardon/tiny-invariant
|
|
10
|
+
* - https://github.com/zertosh/invariant
|
|
11
|
+
* - https://stackoverflow.com/q/39055159/1938970
|
|
12
|
+
*
|
|
13
|
+
* @param condition The condition that, if `true` will throw the error during development
|
|
14
|
+
* @param message A string or a function that returns a string
|
|
15
|
+
* @param lib The library name to show in the error message prefix. When `lib` is also specified it outputs `[lib:prefix]: the message`, otherwise just `[lib|prefix]: the message`)
|
|
16
|
+
* @param prefix The library name to show in the error message prefix. When `lib` is also specified it outputs `[lib:prefix]: the message`, otherwise just `[lib|prefix]: the message`)
|
|
17
|
+
*/
|
|
18
|
+
export function invariant(condition, message, lib, prefix) {
|
|
19
|
+
if (process.env["NODE_ENV"] !== "production") {
|
|
20
|
+
if (condition) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
var msgProvided = typeof message === "function" ? message() : message;
|
|
24
|
+
var msgPrefix = "";
|
|
25
|
+
if (lib && prefix) {
|
|
26
|
+
msgPrefix = "[".concat(lib, ":").concat(prefix, "] ");
|
|
27
|
+
}
|
|
28
|
+
else if (lib) {
|
|
29
|
+
msgPrefix = "[".concat(lib, "] ");
|
|
30
|
+
}
|
|
31
|
+
throw new Error(msgPrefix + msgProvided);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
export default invariant;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getMediaQueryWidthResolvers = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
function getMediaQueryWidthResolvers(customBreakpoints) {
|
|
6
|
+
var breakpoints = tslib_1.__assign({ xs: 0 }, customBreakpoints);
|
|
7
|
+
var sortedBreakpointsNames = Object.keys(breakpoints).map(function (key) {
|
|
8
|
+
var br = key;
|
|
9
|
+
return [br, breakpoints[br]];
|
|
10
|
+
})
|
|
11
|
+
.sort(function (a, b) { return a[1] - b[1]; })
|
|
12
|
+
.map(function (item) { return item[0]; });
|
|
13
|
+
var getNextBreakpoint = function (breakpoint) {
|
|
14
|
+
var index = sortedBreakpointsNames.indexOf(breakpoint);
|
|
15
|
+
return sortedBreakpointsNames[index + 1];
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* It behaves the same as `(min-width: ${value}px)`
|
|
19
|
+
* where value is the given breakpoint value.
|
|
20
|
+
* For ease of use this can be used both as a function `min("md")` and as an
|
|
21
|
+
* object literal `min.md`.
|
|
22
|
+
*/
|
|
23
|
+
var min = function (br) { return "(min-width: ".concat(breakpoints[br], "px)"); };
|
|
24
|
+
/**
|
|
25
|
+
* It behaves the same as `(max-width: ${value}px)`
|
|
26
|
+
* where value is the given breakpoint value.
|
|
27
|
+
* For ease of use this can be used both as a function `max("md")` and as an
|
|
28
|
+
* object literal `max.md`.
|
|
29
|
+
*/
|
|
30
|
+
var max = function (br) { return "(max-width: ".concat(breakpoints[br] - 0.02, "px)"); };
|
|
31
|
+
/**
|
|
32
|
+
* It behaves the same as `min`
|
|
33
|
+
* @inheritdoc {max}
|
|
34
|
+
*/
|
|
35
|
+
var up = min;
|
|
36
|
+
/**
|
|
37
|
+
* It behaves similarly to `max` but you will use the "next" breakpoint,
|
|
38
|
+
* specifying CSS that will apply from the given breakpoint and down.
|
|
39
|
+
*/
|
|
40
|
+
var down = function (br) {
|
|
41
|
+
var brNext = getNextBreakpoint(br);
|
|
42
|
+
// TODO: if br does not exists otherwise throw Error
|
|
43
|
+
return brNext && "(max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* Media query between the two given breakpoints
|
|
47
|
+
*/
|
|
48
|
+
var between = function (br1, br2) {
|
|
49
|
+
br2 = br2 || getNextBreakpoint(br1);
|
|
50
|
+
return br2
|
|
51
|
+
? "(min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)")
|
|
52
|
+
: min(br1);
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* Media query to apply from the given breakpoint until the next, just for its
|
|
56
|
+
* full range
|
|
57
|
+
*/
|
|
58
|
+
var only = function (br) {
|
|
59
|
+
var brNext = getNextBreakpoint(br);
|
|
60
|
+
return brNext ? between(br, brNext) : min(br);
|
|
61
|
+
};
|
|
62
|
+
return {
|
|
63
|
+
max: max,
|
|
64
|
+
min: min,
|
|
65
|
+
down: down,
|
|
66
|
+
up: up,
|
|
67
|
+
between: between,
|
|
68
|
+
only: only,
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
exports.getMediaQueryWidthResolvers = getMediaQueryWidthResolvers;
|
|
72
|
+
exports.default = getMediaQueryWidthResolvers;
|
package/node/index.js
CHANGED
|
@@ -24,6 +24,7 @@ tslib_1.__exportStar(require("./ensureInt"), exports);
|
|
|
24
24
|
tslib_1.__exportStar(require("./findDuplicatedIndexes"), exports);
|
|
25
25
|
tslib_1.__exportStar(require("./getEmptyArray"), exports);
|
|
26
26
|
tslib_1.__exportStar(require("./getKeys"), exports);
|
|
27
|
+
tslib_1.__exportStar(require("./getMediaQueryWidthResolvers"), exports);
|
|
27
28
|
tslib_1.__exportStar(require("./getNonce"), exports);
|
|
28
29
|
tslib_1.__exportStar(require("./getParamAmong"), exports);
|
|
29
30
|
tslib_1.__exportStar(require("./getParamAsInt"), exports);
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.invariant = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* FIXME: invariant calls do not get tree shaked in minified output of projects
|
|
6
|
+
* using it. Let's not use it internally and not export it from `@koine/utils`
|
|
7
|
+
* until we find a tree-shakeable way of doing this. For now just wrapping
|
|
8
|
+
* the logging code into `if (process.env["NODE_ENV"] !== "production") {}`
|
|
9
|
+
* works better despite it is more verbose.
|
|
10
|
+
*
|
|
11
|
+
* @resources
|
|
12
|
+
* - https://github.com/alexreardon/tiny-invariant
|
|
13
|
+
* - https://github.com/zertosh/invariant
|
|
14
|
+
* - https://stackoverflow.com/q/39055159/1938970
|
|
15
|
+
*
|
|
16
|
+
* @param condition The condition that, if `true` will throw the error during development
|
|
17
|
+
* @param message A string or a function that returns a string
|
|
18
|
+
* @param lib The library name to show in the error message prefix. When `lib` is also specified it outputs `[lib:prefix]: the message`, otherwise just `[lib|prefix]: the message`)
|
|
19
|
+
* @param prefix The library name to show in the error message prefix. When `lib` is also specified it outputs `[lib:prefix]: the message`, otherwise just `[lib|prefix]: the message`)
|
|
20
|
+
*/
|
|
21
|
+
function invariant(condition, message, lib, prefix) {
|
|
22
|
+
if (process.env["NODE_ENV"] !== "production") {
|
|
23
|
+
if (condition) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
var msgProvided = typeof message === "function" ? message() : message;
|
|
27
|
+
var msgPrefix = "";
|
|
28
|
+
if (lib && prefix) {
|
|
29
|
+
msgPrefix = "[".concat(lib, ":").concat(prefix, "] ");
|
|
30
|
+
}
|
|
31
|
+
else if (lib) {
|
|
32
|
+
msgPrefix = "[".concat(lib, "] ");
|
|
33
|
+
}
|
|
34
|
+
throw new Error(msgPrefix + msgProvided);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
exports.invariant = invariant;
|
|
38
|
+
exports.default = invariant;
|