@cleanweb/oore 2.0.0-alpha.34 → 2.0.0-alpha.35
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/build/base/index.d.ts +3 -3
- package/build/base/index.js +19 -3
- package/build/base/merged-state.d.ts +1 -0
- package/build/base/merged-state.js +58 -30
- package/build/base/methods.d.ts +6 -5
- package/build/base/methods.js +28 -19
- package/build/base/state/class-types.d.ts +2 -2
- package/build/base/state/class-types.js +2 -1
- package/build/base/state/class.d.ts +1 -1
- package/build/base/state/class.js +72 -45
- package/build/base/state/hook-types.d.ts +1 -1
- package/build/base/state/hook-types.js +2 -1
- package/build/base/state/hooks.d.ts +1 -1
- package/build/base/state/hooks.js +16 -8
- package/build/base/state/index.d.ts +6 -5
- package/build/base/state/index.js +32 -3
- package/build/classy/class/index.d.ts +5 -18
- package/build/classy/class/index.js +87 -98
- package/build/classy/class/types/extractor.d.ts +1 -1
- package/build/classy/class/types/extractor.js +2 -1
- package/build/classy/class/utils/function-name.js +5 -1
- package/build/classy/index.d.ts +3 -3
- package/build/classy/index.js +19 -3
- package/build/classy/instance/index.d.ts +4 -4
- package/build/classy/instance/index.js +88 -58
- package/build/classy/instance/mount-callbacks.d.ts +1 -1
- package/build/classy/instance/mount-callbacks.js +12 -8
- package/build/classy/instance/types/hook.d.ts +1 -1
- package/build/classy/instance/types/hook.js +2 -1
- package/build/classy/logic/index.d.ts +2 -2
- package/build/classy/logic/index.js +32 -22
- package/build/classy/logic/types/hook.d.ts +1 -1
- package/build/classy/logic/types/hook.js +2 -1
- package/build/docs-src/api/base-classes.d.ts +3 -3
- package/build/docs-src/api/base-classes.js +9 -3
- package/build/docs-src/api/index.d.ts +8 -8
- package/build/docs-src/api/index.js +39 -8
- package/build/docs-src/api/references.d.ts +5 -5
- package/build/docs-src/api/references.js +31 -5
- package/build/globals.d.ts +83 -130
- package/build/globals.js +4 -0
- package/build/helpers/errors.js +5 -1
- package/build/helpers/index.d.ts +4 -7
- package/build/helpers/index.js +23 -8
- package/build/helpers/mount-state.js +10 -6
- package/build/helpers/rerender.js +16 -12
- package/build/helpers/type-guards.js +6 -2
- package/build/helpers/use-component/index.d.ts +1 -1
- package/build/helpers/use-component/index.js +9 -5
- package/build/helpers/use-component/types.js +2 -1
- package/build/index.d.ts +4 -3
- package/build/index.js +19 -3
- package/build/slots/hook.d.ts +2 -2
- package/build/slots/hook.js +78 -44
- package/build/slots/index.d.ts +1 -1
- package/build/slots/index.js +17 -1
- package/build/slots/types.d.ts +14 -11
- package/build/slots/types.js +2 -1
- package/build/tsconfig.json +6 -9
- package/package.json +11 -31
- package/build/_cjs/base/index.d.ts +0 -3
- package/build/_cjs/base/index.js +0 -19
- package/build/_cjs/base/merged-state.d.ts +0 -19
- package/build/_cjs/base/merged-state.js +0 -60
- package/build/_cjs/base/methods.d.ts +0 -58
- package/build/_cjs/base/methods.js +0 -95
- package/build/_cjs/base/state/class-types.d.ts +0 -20
- package/build/_cjs/base/state/class-types.js +0 -2
- package/build/_cjs/base/state/class.d.ts +0 -69
- package/build/_cjs/base/state/class.js +0 -129
- package/build/_cjs/base/state/hook-types.d.ts +0 -32
- package/build/_cjs/base/state/hook-types.js +0 -2
- package/build/_cjs/base/state/hooks.d.ts +0 -12
- package/build/_cjs/base/state/hooks.js +0 -41
- package/build/_cjs/base/state/index.d.ts +0 -8
- package/build/_cjs/base/state/index.js +0 -34
- package/build/_cjs/classy/class/index.d.ts +0 -128
- package/build/_cjs/classy/class/index.js +0 -176
- package/build/_cjs/classy/class/types/extractor.d.ts +0 -5
- package/build/_cjs/classy/class/types/extractor.js +0 -2
- package/build/_cjs/classy/class/utils/function-name.d.ts +0 -2
- package/build/_cjs/classy/class/utils/function-name.js +0 -17
- package/build/_cjs/classy/index.d.ts +0 -3
- package/build/_cjs/classy/index.js +0 -19
- package/build/_cjs/classy/instance/index.d.ts +0 -144
- package/build/_cjs/classy/instance/index.js +0 -177
- package/build/_cjs/classy/instance/mount-callbacks.d.ts +0 -5
- package/build/_cjs/classy/instance/mount-callbacks.js +0 -30
- package/build/_cjs/classy/instance/types/hook.d.ts +0 -13
- package/build/_cjs/classy/instance/types/hook.js +0 -2
- package/build/_cjs/classy/logic/index.d.ts +0 -116
- package/build/_cjs/classy/logic/index.js +0 -123
- package/build/_cjs/classy/logic/types/hook.d.ts +0 -16
- package/build/_cjs/classy/logic/types/hook.js +0 -2
- package/build/_cjs/docs-src/api/base-classes.d.ts +0 -3
- package/build/_cjs/docs-src/api/base-classes.js +0 -9
- package/build/_cjs/docs-src/api/index.d.ts +0 -13
- package/build/_cjs/docs-src/api/index.js +0 -44
- package/build/_cjs/docs-src/api/references.d.ts +0 -5
- package/build/_cjs/docs-src/api/references.js +0 -31
- package/build/_cjs/helpers/debounce/index.d.ts +0 -55
- package/build/_cjs/helpers/debounce/index.js +0 -111
- package/build/_cjs/helpers/debounce/react-state.d.ts +0 -14
- package/build/_cjs/helpers/debounce/react-state.js +0 -32
- package/build/_cjs/helpers/errors.d.ts +0 -10
- package/build/_cjs/helpers/errors.js +0 -21
- package/build/_cjs/helpers/index.d.ts +0 -16
- package/build/_cjs/helpers/index.js +0 -34
- package/build/_cjs/helpers/mount-state.d.ts +0 -5
- package/build/_cjs/helpers/mount-state.js +0 -25
- package/build/_cjs/helpers/object-gate.d.ts +0 -74
- package/build/_cjs/helpers/object-gate.js +0 -67
- package/build/_cjs/helpers/rerender.d.ts +0 -24
- package/build/_cjs/helpers/rerender.js +0 -42
- package/build/_cjs/helpers/type-guards.d.ts +0 -1
- package/build/_cjs/helpers/type-guards.js +0 -8
- package/build/_cjs/helpers/use-component/index.d.ts +0 -6
- package/build/_cjs/helpers/use-component/index.js +0 -17
- package/build/_cjs/helpers/use-component/types.d.ts +0 -22
- package/build/_cjs/helpers/use-component/types.js +0 -2
- package/build/_cjs/index.d.ts +0 -3
- package/build/_cjs/index.js +0 -19
- package/build/_cjs/slots/hook.d.ts +0 -20
- package/build/_cjs/slots/hook.js +0 -147
- package/build/_cjs/slots/index.d.ts +0 -1
- package/build/_cjs/slots/index.js +0 -17
- package/build/_cjs/slots/types.d.ts +0 -128
- package/build/_cjs/slots/types.js +0 -2
- package/build/helpers/debounce/index.d.ts +0 -55
- package/build/helpers/debounce/index.js +0 -107
- package/build/helpers/debounce/react-state.d.ts +0 -14
- package/build/helpers/debounce/react-state.js +0 -29
- package/build/helpers/object-gate.d.ts +0 -74
- package/build/helpers/object-gate.js +0 -64
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useRerender = void 0;
|
|
4
|
+
var react_1 = require("react");
|
|
5
|
+
var mount_state_1 = require("../helpers/mount-state");
|
|
3
6
|
;
|
|
4
7
|
/**
|
|
5
8
|
* Returns a function that can be called to manually trigger
|
|
6
9
|
* a rerender of your component.
|
|
7
10
|
*/
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
var useRerender = function () {
|
|
12
|
+
var isMounted = (0, mount_state_1.useMountState)();
|
|
13
|
+
var renderCount = (0, react_1.useRef)(0);
|
|
14
|
+
var _a = (0, react_1.useState)(renderCount.current), forceRerender = _a[1];
|
|
12
15
|
renderCount.current++;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
var rerender = (0, react_1.useCallback)(function () {
|
|
17
|
+
var resolve;
|
|
18
|
+
var promise = new Promise(function (_r) { return resolve = _r; });
|
|
19
|
+
var execute = function () {
|
|
17
20
|
forceRerender(renderCount.current);
|
|
18
21
|
resolve({
|
|
19
22
|
previousCount: renderCount.current,
|
|
@@ -23,7 +26,7 @@ export const useRerender = () => {
|
|
|
23
26
|
if (isMounted())
|
|
24
27
|
execute();
|
|
25
28
|
else {
|
|
26
|
-
setTimeout(()
|
|
29
|
+
setTimeout(function () {
|
|
27
30
|
if (isMounted())
|
|
28
31
|
execute();
|
|
29
32
|
else
|
|
@@ -32,7 +35,8 @@ export const useRerender = () => {
|
|
|
32
35
|
}
|
|
33
36
|
return promise;
|
|
34
37
|
}, [forceRerender, renderCount]);
|
|
35
|
-
|
|
38
|
+
var refresher = function () { return rerender(); };
|
|
36
39
|
refresher.currentCount = renderCount.current;
|
|
37
40
|
return refresher;
|
|
38
41
|
};
|
|
42
|
+
exports.useRerender = useRerender;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.canIndex = void 0;
|
|
4
|
+
var canIndex = function (key, targetObject) {
|
|
5
|
+
var test = typeof key === 'number' ? "".concat(key) : key;
|
|
3
6
|
return Reflect.ownKeys(targetObject).includes(test);
|
|
4
7
|
};
|
|
8
|
+
exports.canIndex = canIndex;
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Use = void 0;
|
|
4
|
+
var react_1 = require("react");
|
|
2
5
|
/**
|
|
3
6
|
* A component you can use to consume React hooks
|
|
4
7
|
* in a {@link Component | React.Component} class.
|
|
5
8
|
*/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
useEffect(()
|
|
9
|
+
var Use = function (params) {
|
|
10
|
+
var useGenericHook = params.hook, argumentsList = params.argumentsList, onUpdate = params.onUpdate;
|
|
11
|
+
var output = useGenericHook.apply(void 0, argumentsList);
|
|
12
|
+
(0, react_1.useEffect)(function () {
|
|
10
13
|
onUpdate(output);
|
|
11
14
|
}, [output]);
|
|
12
15
|
return null;
|
|
13
16
|
};
|
|
17
|
+
exports.Use = Use;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
package/build/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
export * from './classy
|
|
2
|
-
export * from './base
|
|
3
|
-
export * from './helpers
|
|
1
|
+
export * from './classy';
|
|
2
|
+
export * from './base';
|
|
3
|
+
export * from './helpers';
|
|
4
|
+
export type { EmptyObject, NeverObject };
|
package/build/index.js
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
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("./classy"), exports);
|
|
18
|
+
__exportStar(require("./base"), exports);
|
|
19
|
+
__exportStar(require("./helpers"), exports);
|
package/build/slots/hook.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactElement, ReactNode, ReactPortal } from 'react';
|
|
2
|
-
import type { IUseSlots, PotentialSlotComponent } from './types
|
|
2
|
+
import type { IUseSlots, PotentialSlotComponent } from './types';
|
|
3
3
|
export declare const isElementChild: (child: ReactNode) => child is ReactElement<any, any>;
|
|
4
4
|
interface IGetSlotName {
|
|
5
5
|
(TargetComponent: PotentialSlotComponent, child?: ReactElement): string | undefined;
|
|
@@ -17,4 +17,4 @@ export declare const isPortalChild: (child: ReactNode) => child is ReactPortal;
|
|
|
17
17
|
* @see {@link SlotComponent} for more on how to use the returned slot nodes.
|
|
18
18
|
*/
|
|
19
19
|
export declare const useSlots: IUseSlots;
|
|
20
|
-
export type { SlottedComponent, TSlotsRecord, SlotComponent, PotentialSlotComponent, } from './types
|
|
20
|
+
export type { WithSlotsConfig, WithSlotsConfig as SlottedComponent, TSlotsRecord, SlotComponent, PotentialSlotComponent, } from './types';
|
package/build/slots/hook.js
CHANGED
|
@@ -1,15 +1,51 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
26
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
27
|
+
if (ar || !(i in from)) {
|
|
28
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
29
|
+
ar[i] = from[i];
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
33
|
+
};
|
|
34
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
35
|
+
exports.useSlots = exports.isPortalChild = exports.getComponentSlotName = exports.isElementChild = void 0;
|
|
36
|
+
var errors_1 = require("../helpers/errors");
|
|
37
|
+
var react_1 = __importStar(require("react"));
|
|
38
|
+
var isElementChild = function (child) {
|
|
4
39
|
if (child && typeof child === 'object' && 'type' in child) {
|
|
5
40
|
return true;
|
|
6
41
|
}
|
|
7
42
|
return false;
|
|
8
43
|
};
|
|
9
|
-
|
|
44
|
+
exports.isElementChild = isElementChild;
|
|
45
|
+
var getComponentSlotName = function (TargetComponent, child) {
|
|
10
46
|
if (child) {
|
|
11
|
-
|
|
12
|
-
|
|
47
|
+
var keyTypes = ['string', 'number', 'symbol'];
|
|
48
|
+
var slotName = child.props['data-slot-name'];
|
|
13
49
|
if (keyTypes.includes(typeof slotName)) {
|
|
14
50
|
return slotName;
|
|
15
51
|
}
|
|
@@ -23,16 +59,15 @@ export const getComponentSlotName = (TargetComponent, child) => {
|
|
|
23
59
|
else if ('displayName' in TargetComponent) {
|
|
24
60
|
return TargetComponent.displayName;
|
|
25
61
|
}
|
|
26
|
-
else if ('name' in TargetComponent) {
|
|
27
|
-
return TargetComponent.name;
|
|
28
|
-
}
|
|
29
62
|
return undefined;
|
|
30
63
|
};
|
|
31
|
-
|
|
64
|
+
exports.getComponentSlotName = getComponentSlotName;
|
|
65
|
+
var isPortalChild = function (child) {
|
|
32
66
|
return (!!child
|
|
33
67
|
&& typeof child === 'object'
|
|
34
68
|
&& 'children' in child);
|
|
35
69
|
};
|
|
70
|
+
exports.isPortalChild = isPortalChild;
|
|
36
71
|
/**
|
|
37
72
|
* Groups `children` prop into predefined slots.
|
|
38
73
|
*
|
|
@@ -43,58 +78,57 @@ export const isPortalChild = (child) => {
|
|
|
43
78
|
*
|
|
44
79
|
* @see {@link SlotComponent} for more on how to use the returned slot nodes.
|
|
45
80
|
*/
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
entries.forEach(([alias, RegisteredSlotComponent]) => {
|
|
54
|
-
const slotName = getComponentSlotName(RegisteredSlotComponent);
|
|
81
|
+
var useSlots = function (children, Caller) {
|
|
82
|
+
var slotsAliasLookup = (0, react_1.useMemo)(function () {
|
|
83
|
+
var entries = Object.entries(Caller.Slots);
|
|
84
|
+
var aliasLookup = {};
|
|
85
|
+
entries.forEach(function (_a) {
|
|
86
|
+
var alias = _a[0], RegisteredSlotComponent = _a[1];
|
|
87
|
+
var slotName = (0, exports.getComponentSlotName)(RegisteredSlotComponent);
|
|
55
88
|
if (!slotName) {
|
|
56
|
-
|
|
57
|
-
|
|
89
|
+
(0, errors_1.throwDevError)("A registered slot component did not have a slot name. All components registered as slots must either be a string tag-name or a React component with either \"slotName\" or \"displayName\". The affected component was: ".concat(RegisteredSlotComponent));
|
|
90
|
+
return;
|
|
58
91
|
}
|
|
59
|
-
|
|
60
|
-
aliasLookup.byName[slotName] = alias;
|
|
92
|
+
aliasLookup[slotName] = alias;
|
|
61
93
|
});
|
|
62
94
|
return aliasLookup;
|
|
63
95
|
}, [Caller.Slots]);
|
|
64
96
|
// @todo Expose original source order of `children` with respect to slot aliases.
|
|
65
|
-
|
|
97
|
+
var result = (0, react_1.useMemo)(function () {
|
|
66
98
|
var _a;
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
const child = _child;
|
|
99
|
+
var slotNodes = {};
|
|
100
|
+
var unmatchedChildren = [];
|
|
101
|
+
var invalidChildren = [];
|
|
102
|
+
var requiredSlotAliases = __spreadArray([], ((_a = Caller.requiredSlotAliases) !== null && _a !== void 0 ? _a : []), true);
|
|
103
|
+
react_1.default.Children.forEach(children, function (_child) {
|
|
104
|
+
var _a;
|
|
105
|
+
var child = _child;
|
|
75
106
|
if (!child) {
|
|
76
107
|
invalidChildren.push(child);
|
|
77
108
|
return;
|
|
78
109
|
}
|
|
79
|
-
if (!
|
|
80
|
-
console.warn(
|
|
110
|
+
if (!react_1.default.isValidElement(child)) {
|
|
111
|
+
console.warn("Invalid node found in JSX children while parsing slots. Got: \"".concat(child, "\"."));
|
|
81
112
|
invalidChildren.push(child);
|
|
82
113
|
return;
|
|
83
114
|
}
|
|
84
115
|
;
|
|
85
116
|
// @todo Check for fragment
|
|
86
|
-
if (!isElementChild(child)) {
|
|
117
|
+
if (!(0, exports.isElementChild)(child)) {
|
|
87
118
|
unmatchedChildren.push(child);
|
|
88
119
|
return;
|
|
89
120
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
: slotsAliasLookup.byIdentity.get(child.type);
|
|
95
|
-
return alias !== null && alias !== void 0 ? alias : null;
|
|
121
|
+
var slotAlias = (function () {
|
|
122
|
+
var _a;
|
|
123
|
+
var slotName = (0, exports.getComponentSlotName)(child.type, child);
|
|
124
|
+
return slotName ? (_a = slotsAliasLookup[slotName]) !== null && _a !== void 0 ? _a : null : null;
|
|
96
125
|
})();
|
|
97
126
|
if (slotAlias) {
|
|
127
|
+
if (typeof Caller.Slots[slotAlias] !== 'string') {
|
|
128
|
+
if ((_a = Caller.Slots[slotAlias]) === null || _a === void 0 ? void 0 : _a.isRequiredSlot) {
|
|
129
|
+
requiredSlotAliases.push(slotAlias);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
98
132
|
if (slotNodes[slotAlias]) {
|
|
99
133
|
slotNodes[slotAlias].push(child);
|
|
100
134
|
}
|
|
@@ -105,13 +139,13 @@ export const useSlots = (children, Caller) => {
|
|
|
105
139
|
else
|
|
106
140
|
unmatchedChildren.push(child);
|
|
107
141
|
});
|
|
108
|
-
|
|
109
|
-
requiredSlotAliases.forEach((slotAlias) => {
|
|
142
|
+
requiredSlotAliases.forEach(function (slotAlias) {
|
|
110
143
|
if (!slotNodes[slotAlias]) {
|
|
111
|
-
throwDevError(
|
|
144
|
+
(0, errors_1.throwDevError)("Missing required slot \"".concat(String(slotAlias), "\"."));
|
|
112
145
|
}
|
|
113
146
|
});
|
|
114
147
|
return [slotNodes, unmatchedChildren, invalidChildren];
|
|
115
148
|
}, [children]);
|
|
116
149
|
return result;
|
|
117
150
|
};
|
|
151
|
+
exports.useSlots = useSlots;
|
package/build/slots/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './hook
|
|
1
|
+
export * from './hook';
|
package/build/slots/index.js
CHANGED
|
@@ -1 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
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("./hook"), exports);
|
package/build/slots/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ReactElement, ReactNode, ComponentType, JSX } from 'react';
|
|
1
|
+
import type { ReactElement, ReactNode, ComponentType, ReactPortal, JSX } from 'react';
|
|
2
2
|
/** @todo ComponentType force children to be ReactNode, but custom components can have any children type. */
|
|
3
3
|
type JSXTagLike = string | keyof JSX.IntrinsicElements | ComponentType<any>;
|
|
4
4
|
/** This fixes overly narrow T type used by React's ComponentProps type. */
|
|
@@ -18,7 +18,12 @@ export type DisplayNamedComponent<TComponent extends ComponentType<any> = Compon
|
|
|
18
18
|
displayName: TName;
|
|
19
19
|
};
|
|
20
20
|
interface ISlotConfig<TName> {
|
|
21
|
-
slotName
|
|
21
|
+
slotName: TName;
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated The SlottedComponent should be responsible for indicating which slots it requires.
|
|
24
|
+
* Individual slot components may be reused by multiple slotted components with varying requirements.
|
|
25
|
+
*/
|
|
26
|
+
isRequiredSlot?: boolean;
|
|
22
27
|
}
|
|
23
28
|
/**
|
|
24
29
|
* A child component used to insert content into a specific slot in the parent component.
|
|
@@ -81,22 +86,21 @@ export type SlotComponent<TComponent extends JSXTagLike = ComponentType<any>, TN
|
|
|
81
86
|
* directly from the parent component itself,
|
|
82
87
|
* through an alias that is easy to remember.
|
|
83
88
|
*/
|
|
84
|
-
export type
|
|
89
|
+
export type WithSlotsConfig<TOwner extends object = ComponentType<any>, TSlots extends TSlotsRecord = TSlotsRecord> = TOwner & {
|
|
85
90
|
Slots: TSlots;
|
|
86
91
|
requiredSlotAliases?: Array<keyof TSlots>;
|
|
87
92
|
};
|
|
88
|
-
export type
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
export type TSlotNode<TSlotted extends SlottedComponent, Key extends keyof TSlotted['Slots'] = keyof TSlotted['Slots']> = (TypedNode<ComponentProps<TSlotted['Slots'][Key]>, TSlotted['Slots'][Key]>);
|
|
93
|
+
export type { WithSlotsConfig as SlottedComponent };
|
|
94
|
+
export type TypedNode<P, T extends JSXTagLike> = (ReactElement<P, T> | (ReactElement<P, T> & ReactPortal));
|
|
95
|
+
export type TSlotNode<TConfig extends WithSlotsConfig<object>, Key extends keyof TConfig['Slots'] = keyof TConfig['Slots']> = (TypedNode<ComponentProps<TConfig['Slots'][Key]>, TConfig['Slots'][Key]>);
|
|
92
96
|
/**
|
|
93
97
|
* A record of slot aliases mapped to the corresponding `ReactNode`(s)
|
|
94
98
|
* to be rendered for that slot.
|
|
95
99
|
*/
|
|
96
|
-
export type TSlotNodes<TSlotted extends
|
|
100
|
+
export type TSlotNodes<TSlotted extends WithSlotsConfig> = {
|
|
97
101
|
[Key in keyof TSlotted['Slots']]?: Array<TSlotNode<TSlotted, Key>>;
|
|
98
102
|
};
|
|
99
|
-
export type TUseSlotsResult<TSlotted extends
|
|
103
|
+
export type TUseSlotsResult<TSlotted extends WithSlotsConfig> = Readonly<[
|
|
100
104
|
/**
|
|
101
105
|
* A record of slot aliases to their corresponding React nodes.
|
|
102
106
|
* Each alias maps to an array of one or more React nodes that were passed
|
|
@@ -116,7 +120,7 @@ export type TUseSlotsResult<TSlotted extends SlottedComponent> = Readonly<[
|
|
|
116
120
|
invalidChildren: any[]
|
|
117
121
|
]>;
|
|
118
122
|
export interface IUseSlots {
|
|
119
|
-
<TSlotted extends
|
|
123
|
+
<TSlotted extends WithSlotsConfig>(
|
|
120
124
|
/**
|
|
121
125
|
* Your component's `children` prop.
|
|
122
126
|
* The nodes it contains will be categorized and
|
|
@@ -125,4 +129,3 @@ export interface IUseSlots {
|
|
|
125
129
|
children: ReactNode, Caller: TSlotted): TUseSlotsResult<TSlotted>;
|
|
126
130
|
}
|
|
127
131
|
export type PotentialSlotComponent = string | SlotComponent | ComponentType<any>;
|
|
128
|
-
export {};
|
package/build/slots/types.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
package/build/tsconfig.json
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
"compilerOptions": {
|
|
3
3
|
"baseUrl": ".",
|
|
4
4
|
"rootDir": ".",
|
|
5
|
-
"outDir": "
|
|
5
|
+
"outDir": "build",
|
|
6
6
|
"paths": {
|
|
7
7
|
"@/*": [
|
|
8
8
|
"./*"
|
|
9
9
|
]
|
|
10
10
|
},
|
|
11
|
-
"target": "
|
|
11
|
+
"target": "es5",
|
|
12
12
|
"lib": [
|
|
13
13
|
"dom",
|
|
14
14
|
"dom.iterable",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"forceConsistentCasingInFileNames": true,
|
|
24
24
|
"incremental": false,
|
|
25
25
|
"esModuleInterop": true,
|
|
26
|
-
"module": "
|
|
27
|
-
"moduleResolution": "
|
|
26
|
+
"module": "NodeNext",
|
|
27
|
+
"moduleResolution": "NodeNext",
|
|
28
28
|
"resolveJsonModule": true,
|
|
29
29
|
"isolatedModules": true,
|
|
30
30
|
"jsx": "react-jsx",
|
|
@@ -35,16 +35,13 @@
|
|
|
35
35
|
"strictBindCallApply": true,
|
|
36
36
|
"exactOptionalPropertyTypes": true,
|
|
37
37
|
},
|
|
38
|
-
"tsc-alias": {
|
|
39
|
-
"resolveFullPaths": true,
|
|
40
|
-
"resolveFullExtension": ".js"
|
|
41
|
-
},
|
|
42
38
|
"include": [
|
|
43
|
-
"
|
|
39
|
+
// "**/[!globals].ts",
|
|
44
40
|
"**/*.ts",
|
|
45
41
|
"**/*.tsx"
|
|
46
42
|
],
|
|
47
43
|
"exclude": [
|
|
44
|
+
"**/globals.ts",
|
|
48
45
|
"node_modules/**/**.*",
|
|
49
46
|
"build/**/**.*",
|
|
50
47
|
"mirror-pkg/**/**.*"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cleanweb/oore",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.35",
|
|
4
4
|
"description": "A library of helpers for writing cleaner React function components with object-oriented patterns.",
|
|
5
5
|
"engines": {
|
|
6
6
|
"node": ">=22"
|
|
@@ -9,37 +9,18 @@
|
|
|
9
9
|
"build",
|
|
10
10
|
".npmrc"
|
|
11
11
|
],
|
|
12
|
-
"main": "
|
|
13
|
-
"module": "./build/index.js",
|
|
14
|
-
"types": "./build/index.d.ts",
|
|
12
|
+
"main": "build/index.js",
|
|
15
13
|
"exports": {
|
|
16
|
-
".":
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
"./
|
|
21
|
-
"import": "./build/base/index.js",
|
|
22
|
-
"require": "./build/_cjs/base/index.js"
|
|
23
|
-
},
|
|
24
|
-
"./helpers": {
|
|
25
|
-
"import": "./build/helpers/index.js",
|
|
26
|
-
"require": "./build/_cjs/helpers/index.js"
|
|
27
|
-
},
|
|
28
|
-
"./slots": {
|
|
29
|
-
"import": "./build/slots/index.js",
|
|
30
|
-
"require": "./build/_cjs/slots/index.js"
|
|
31
|
-
},
|
|
32
|
-
"./all": {
|
|
33
|
-
"import": "./build/index.js",
|
|
34
|
-
"require": "./build/_cjs/index.js"
|
|
35
|
-
}
|
|
14
|
+
".": "./build/classy/index.js",
|
|
15
|
+
"./base": "./build/base/index.js",
|
|
16
|
+
"./helpers": "./build/helpers/index.js",
|
|
17
|
+
"./slots": "./build/slots/index.js",
|
|
18
|
+
"./all": "./build/index.js"
|
|
36
19
|
},
|
|
37
20
|
"scripts": {
|
|
38
21
|
"prebuild": "rimraf ./build",
|
|
39
|
-
"build": "
|
|
40
|
-
"
|
|
41
|
-
"build:cjs": "tsc -p tsconfig.cjs.json && tsc-alias -p tsconfig.cjs.json",
|
|
42
|
-
"postbuild": "copyfiles tsconfig.json globals.d.ts build",
|
|
22
|
+
"build": "tsc && tsc-alias",
|
|
23
|
+
"postbuild": "copyfiles tsconfig.json build",
|
|
43
24
|
"build:docs": "typedoc",
|
|
44
25
|
"_": "",
|
|
45
26
|
"serve-docs": "serve docs",
|
|
@@ -81,7 +62,7 @@
|
|
|
81
62
|
"devDependencies": {
|
|
82
63
|
"@babel/eslint-parser": "^7.25.9",
|
|
83
64
|
"@babel/preset-typescript": "^7.26.0",
|
|
84
|
-
"@types/node": "
|
|
65
|
+
"@types/node": "20.14.10",
|
|
85
66
|
"@types/react": "^16",
|
|
86
67
|
"@types/webpack-env": "^1.18.8",
|
|
87
68
|
"babel-preset-react-app": "^10.0.1",
|
|
@@ -90,10 +71,9 @@
|
|
|
90
71
|
"eslint-plugin-jsdoc": "^50.5.0",
|
|
91
72
|
"eslint-plugin-react": "^7.37.2",
|
|
92
73
|
"globals": "^15.12.0",
|
|
93
|
-
"jsonc-parser": "~3.3.1",
|
|
94
74
|
"rimraf": "^6.0.1",
|
|
95
75
|
"serve": "^14.2.4",
|
|
96
|
-
"tsc-alias": "1.8.
|
|
76
|
+
"tsc-alias": "1.8.10",
|
|
97
77
|
"typedoc": "latest",
|
|
98
78
|
"typedoc-plugin-coverage": "^3.4.1",
|
|
99
79
|
"typedoc-plugin-markdown": "^4.4.1",
|
package/build/_cjs/base/index.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
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("./state/index.js"), exports);
|
|
18
|
-
__exportStar(require("./methods.js"), exports);
|
|
19
|
-
__exportStar(require("./merged-state.js"), exports);
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
declare class MergedState<TState extends object> {
|
|
2
|
-
static useRefresh<TState extends object>(this: MergedState<TState>): void;
|
|
3
|
-
reservedKeys: string[];
|
|
4
|
-
valueKeys: string[];
|
|
5
|
-
private _initialValues_;
|
|
6
|
-
private _values_;
|
|
7
|
-
private setState;
|
|
8
|
-
private _setters_;
|
|
9
|
-
get put(): { [Key in keyof TState]: (value: TState[Key]) => void; };
|
|
10
|
-
get initialState(): TState;
|
|
11
|
-
constructor(initialState: TState);
|
|
12
|
-
putMany: (newValues: Partial<TState>) => void;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* Similar to {@link useCleanState},
|
|
16
|
-
* but uses a single `useState` call for the entire state object.
|
|
17
|
-
*/
|
|
18
|
-
export declare const useMergedState: <TState extends object>(initialState: TState) => MergedState<TState> & TState;
|
|
19
|
-
export {};
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useMergedState = void 0;
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
class MergedState {
|
|
6
|
-
static useRefresh() {
|
|
7
|
-
[this._values_, this.setState] = (0, react_1.useState)(this.initialState);
|
|
8
|
-
}
|
|
9
|
-
get put() {
|
|
10
|
-
return Object.assign({}, this._setters_);
|
|
11
|
-
}
|
|
12
|
-
get initialState() {
|
|
13
|
-
return Object.assign({}, this._initialValues_);
|
|
14
|
-
}
|
|
15
|
-
constructor(initialState) {
|
|
16
|
-
this._initialValues_ = {};
|
|
17
|
-
this._values_ = {};
|
|
18
|
-
this._setters_ = {};
|
|
19
|
-
this.putMany = (newValues) => {
|
|
20
|
-
this.setState(Object.assign(Object.assign({}, this._values_), newValues));
|
|
21
|
-
};
|
|
22
|
-
this.reservedKeys = Object.keys(this);
|
|
23
|
-
this.valueKeys = [];
|
|
24
|
-
this._initialValues_ = Object.assign({}, initialState);
|
|
25
|
-
this._values_ = Object.assign({}, initialState);
|
|
26
|
-
Object.keys(initialState).forEach((_key) => {
|
|
27
|
-
const key = _key;
|
|
28
|
-
if (this.reservedKeys.includes(key)) {
|
|
29
|
-
throw new Error(`The name "${key}" is reserved by CleanState and cannot be used to index state variables. Please use a different key.`);
|
|
30
|
-
}
|
|
31
|
-
this.valueKeys.push(key);
|
|
32
|
-
this._setters_[key] = (value) => {
|
|
33
|
-
// this._values_[key] = value;
|
|
34
|
-
this.setState(Object.assign(Object.assign({}, this._values_), { [key]: value }));
|
|
35
|
-
};
|
|
36
|
-
const self = this;
|
|
37
|
-
Object.defineProperty(this, key, {
|
|
38
|
-
get() {
|
|
39
|
-
return self._values_[key];
|
|
40
|
-
},
|
|
41
|
-
set(value) {
|
|
42
|
-
self._setters_[key](value);
|
|
43
|
-
},
|
|
44
|
-
enumerable: true,
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
/**
|
|
50
|
-
* Similar to {@link useCleanState},
|
|
51
|
-
* but uses a single `useState` call for the entire state object.
|
|
52
|
-
*/
|
|
53
|
-
const useMergedState = (initialState) => {
|
|
54
|
-
const cleanState = (0, react_1.useRef)((0, react_1.useMemo)(() => {
|
|
55
|
-
return new MergedState(initialState);
|
|
56
|
-
}, [])).current;
|
|
57
|
-
MergedState.useRefresh.call(cleanState);
|
|
58
|
-
return cleanState;
|
|
59
|
-
};
|
|
60
|
-
exports.useMergedState = useMergedState;
|