@cleanweb/react 1.0.4 → 1.0.5
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.js +18 -2
- package/build/base/methods.js +8 -4
- package/build/base/state.js +12 -7
- package/build/classy/class.js +11 -8
- package/build/classy/index.js +19 -3
- package/build/classy/instance.js +21 -15
- package/build/classy/logic.js +10 -6
- package/build/index.js +17 -1
- package/build/tsconfig.json +2 -2
- package/package.json +6 -1
package/build/base/index.js
CHANGED
@@ -1,2 +1,18 @@
|
|
1
|
-
|
2
|
-
|
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"), exports);
|
18
|
+
__exportStar(require("./methods"), exports);
|
package/build/base/methods.js
CHANGED
@@ -1,3 +1,4 @@
|
|
1
|
+
"use strict";
|
1
2
|
var __assign = (this && this.__assign) || function () {
|
2
3
|
__assign = Object.assign || function(t) {
|
3
4
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
@@ -9,16 +10,18 @@ var __assign = (this && this.__assign) || function () {
|
|
9
10
|
};
|
10
11
|
return __assign.apply(this, arguments);
|
11
12
|
};
|
12
|
-
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.useMethods = exports.ComponentMethods = void 0;
|
15
|
+
var react_1 = require("react");
|
13
16
|
var ComponentMethods = /** @class */ (function () {
|
14
17
|
function ComponentMethods() {
|
15
18
|
}
|
16
19
|
return ComponentMethods;
|
17
20
|
}());
|
18
|
-
|
21
|
+
exports.ComponentMethods = ComponentMethods;
|
19
22
|
;
|
20
|
-
|
21
|
-
var methods = useMemo(function () {
|
23
|
+
var useMethods = function (Methods, state, props) {
|
24
|
+
var methods = (0, react_1.useMemo)(function () {
|
22
25
|
// See useLogic implementation for a discussion of this type assertion.
|
23
26
|
return new Methods();
|
24
27
|
}, []);
|
@@ -27,3 +30,4 @@ export var useMethods = function (Methods, state, props) {
|
|
27
30
|
// Return a gate object to "passthrough" all methods but filter out properties that should be private.
|
28
31
|
return __assign(__assign({}, methods), { props: undefined, state: undefined });
|
29
32
|
};
|
33
|
+
exports.useMethods = useMethods;
|
package/build/base/state.js
CHANGED
@@ -1,4 +1,7 @@
|
|
1
|
-
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.useMountState = exports.useCleanState = void 0;
|
4
|
+
var react_1 = require("react");
|
2
5
|
var _CleanState_ = /** @class */ (function () {
|
3
6
|
function _CleanState_(stateAndSetters) {
|
4
7
|
var _this = this;
|
@@ -44,11 +47,11 @@ var _CleanState = _CleanState_;
|
|
44
47
|
* and it guarantees that the same useState calls will be made on every render in the exact same order.
|
45
48
|
* Therefore, it is safe to silence the linters, and required for this implementation to work smoothly.
|
46
49
|
*/
|
47
|
-
var retrieveState = useState;
|
48
|
-
|
50
|
+
var retrieveState = react_1.useState;
|
51
|
+
var useCleanState = function (_initialState, props) {
|
49
52
|
var initialState = typeof _initialState === 'function' ? _initialState(props) : _initialState;
|
50
53
|
var stateKeys = Object.keys(initialState);
|
51
|
-
var initialCount = useState(stateKeys.length)[0];
|
54
|
+
var initialCount = (0, react_1.useState)(stateKeys.length)[0];
|
52
55
|
if (stateKeys.length !== initialCount) {
|
53
56
|
throw new Error('The keys in your state object must be consistent throughout your components lifetime. Look up "rules of hooks" for more context.');
|
54
57
|
}
|
@@ -62,20 +65,22 @@ export var useCleanState = function (_initialState, props) {
|
|
62
65
|
// so keeping the CleanState wrapper persistent may be unnecessary.
|
63
66
|
return new _CleanState(stateAndSetters);
|
64
67
|
};
|
68
|
+
exports.useCleanState = useCleanState;
|
65
69
|
/**
|
66
70
|
* Returns a value that is false before the component has been mounted,
|
67
71
|
* then true during all subsequent rerenders.
|
68
72
|
*/
|
69
|
-
|
73
|
+
var useMountState = function () {
|
70
74
|
/**
|
71
75
|
* This must not be a stateful value. It should not be the cause of a rerender.
|
72
76
|
* It merely provides information about the render count,
|
73
77
|
* without influencing that count itself.
|
74
78
|
* So `mounted` should never be set with `useState`.
|
75
79
|
*/
|
76
|
-
var mounted = useRef(false);
|
77
|
-
useEffect(function () {
|
80
|
+
var mounted = (0, react_1.useRef)(false);
|
81
|
+
(0, react_1.useEffect)(function () {
|
78
82
|
mounted.current = true;
|
79
83
|
}, []);
|
80
84
|
return mounted.current;
|
81
85
|
};
|
86
|
+
exports.useMountState = useMountState;
|
package/build/classy/class.js
CHANGED
@@ -1,3 +1,4 @@
|
|
1
|
+
"use strict";
|
1
2
|
var __extends = (this && this.__extends) || (function () {
|
2
3
|
var extendStatics = function (d, b) {
|
3
4
|
extendStatics = Object.setPrototypeOf ||
|
@@ -13,9 +14,11 @@ var __extends = (this && this.__extends) || (function () {
|
|
13
14
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
14
15
|
};
|
15
16
|
})();
|
16
|
-
|
17
|
-
|
18
|
-
|
17
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
18
|
+
exports.ClassComponent = void 0;
|
19
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
20
|
+
var react_1 = require("react");
|
21
|
+
var instance_1 = require("./instance");
|
19
22
|
/** Provide more useful stack traces for otherwise non-specific function names. */
|
20
23
|
var setFunctionName = function (func, newName) {
|
21
24
|
try {
|
@@ -40,10 +43,10 @@ var ClassComponent = /** @class */ (function (_super) {
|
|
40
43
|
if (!Component.getInitialState || !isClassComponentType)
|
41
44
|
throw new Error('Attempted to initialize ClassComponent with invalid Class type. Either pass a class that extends ClassComponent to FC (e.g `export FC(MyComponent);`), or ensure it is called as a method on a ClassComponent constructor type (e.g `export MyComponent.FC()`).');
|
42
45
|
var Wrapper = function (props) {
|
43
|
-
var Render = useInstance(Component, props).Render;
|
46
|
+
var Render = (0, instance_1.useInstance)(Component, props).Render;
|
44
47
|
// Add calling component name to Render function name in stack traces.
|
45
|
-
useMemo(function () { return setFunctionName(Render, "".concat(Component.name, ".Render")); }, []);
|
46
|
-
return
|
48
|
+
(0, react_1.useMemo)(function () { return setFunctionName(Render, "".concat(Component.name, ".Render")); }, []);
|
49
|
+
return (0, jsx_runtime_1.jsx)(Render, {});
|
47
50
|
};
|
48
51
|
// Include calling component name in wrapper function name on stack traces.
|
49
52
|
var wrapperName = "ClassComponent".concat(Wrapper.name, " > ").concat(Component.name);
|
@@ -51,5 +54,5 @@ var ClassComponent = /** @class */ (function (_super) {
|
|
51
54
|
return Wrapper;
|
52
55
|
};
|
53
56
|
return ClassComponent;
|
54
|
-
}(ComponentInstance));
|
55
|
-
|
57
|
+
}(instance_1.ComponentInstance));
|
58
|
+
exports.ClassComponent = ClassComponent;
|
package/build/classy/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("./logic"), exports);
|
18
|
+
__exportStar(require("./instance"), exports);
|
19
|
+
__exportStar(require("./class"), exports);
|
package/build/classy/instance.js
CHANGED
@@ -1,3 +1,4 @@
|
|
1
|
+
"use strict";
|
1
2
|
var __extends = (this && this.__extends) || (function () {
|
2
3
|
var extendStatics = function (d, b) {
|
3
4
|
extendStatics = Object.setPrototypeOf ||
|
@@ -13,31 +14,34 @@ var __extends = (this && this.__extends) || (function () {
|
|
13
14
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
14
15
|
};
|
15
16
|
})();
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
17
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
18
|
+
exports.useInstance = exports.useMountCallbacks = exports.ComponentInstance = exports.noOp = void 0;
|
19
|
+
var react_1 = require("react");
|
20
|
+
var state_1 = require("../base/state");
|
21
|
+
var logic_1 = require("./logic");
|
22
|
+
var noOp = function () { };
|
23
|
+
exports.noOp = noOp;
|
20
24
|
var ComponentInstance = /** @class */ (function (_super) {
|
21
25
|
__extends(ComponentInstance, _super);
|
22
26
|
function ComponentInstance() {
|
23
27
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
24
28
|
_this.beforeMount = function () { };
|
25
|
-
_this.onMount = function () { return noOp; };
|
29
|
+
_this.onMount = function () { return exports.noOp; };
|
26
30
|
_this.beforeRender = function () { };
|
27
|
-
_this.onRender = function () { return noOp; };
|
31
|
+
_this.onRender = function () { return exports.noOp; };
|
28
32
|
_this.cleanUp = function () { };
|
29
33
|
return _this;
|
30
34
|
}
|
31
35
|
return ComponentInstance;
|
32
|
-
}(ComponentLogic));
|
33
|
-
|
36
|
+
}(logic_1.ComponentLogic));
|
37
|
+
exports.ComponentInstance = ComponentInstance;
|
34
38
|
;
|
35
|
-
|
39
|
+
var useMountCallbacks = function (instance) {
|
36
40
|
var _a;
|
37
|
-
var mounted = useMountState();
|
41
|
+
var mounted = (0, state_1.useMountState)();
|
38
42
|
if (!mounted)
|
39
43
|
(_a = instance.beforeMount) === null || _a === void 0 ? void 0 : _a.call(instance);
|
40
|
-
useEffect(function () {
|
44
|
+
(0, react_1.useEffect)(function () {
|
41
45
|
var _a;
|
42
46
|
var mountHandlerCleanUp = (_a = instance.onMount) === null || _a === void 0 ? void 0 : _a.call(instance);
|
43
47
|
return function () {
|
@@ -55,14 +59,15 @@ export var useMountCallbacks = function (instance) {
|
|
55
59
|
};
|
56
60
|
}, []);
|
57
61
|
};
|
58
|
-
|
62
|
+
exports.useMountCallbacks = useMountCallbacks;
|
63
|
+
var useInstance = function (Component, props) {
|
59
64
|
var _a;
|
60
65
|
// useCustomHooks.
|
61
|
-
var instance = useLogic(Component, props);
|
66
|
+
var instance = (0, logic_1.useLogic)(Component, props);
|
62
67
|
// beforeMount, onMount, cleanUp.
|
63
|
-
useMountCallbacks(instance);
|
68
|
+
(0, exports.useMountCallbacks)(instance);
|
64
69
|
(_a = instance.beforeRender) === null || _a === void 0 ? void 0 : _a.call(instance);
|
65
|
-
useEffect(function () {
|
70
|
+
(0, react_1.useEffect)(function () {
|
66
71
|
var _a;
|
67
72
|
var cleanupAfterRerender = (_a = instance.onRender) === null || _a === void 0 ? void 0 : _a.call(instance);
|
68
73
|
return function () {
|
@@ -79,3 +84,4 @@ export var useInstance = function (Component, props) {
|
|
79
84
|
});
|
80
85
|
return instance;
|
81
86
|
};
|
87
|
+
exports.useInstance = useInstance;
|
package/build/classy/logic.js
CHANGED
@@ -1,22 +1,25 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.useLogic = exports.ComponentLogic = void 0;
|
4
|
+
var react_1 = require("react");
|
5
|
+
var state_1 = require("../base/state");
|
3
6
|
var ComponentLogic = /** @class */ (function () {
|
4
7
|
function ComponentLogic() {
|
5
8
|
}
|
6
9
|
return ComponentLogic;
|
7
10
|
}());
|
8
|
-
|
11
|
+
exports.ComponentLogic = ComponentLogic;
|
9
12
|
;
|
10
|
-
|
13
|
+
var useLogic = function (Methods, props) {
|
11
14
|
var _a;
|
12
|
-
var state = useCleanState(Methods.getInitialState, props);
|
15
|
+
var state = (0, state_1.useCleanState)(Methods.getInitialState, props);
|
13
16
|
// There's apparently a bug? with Typescript that pegs the return type of "new Methods()" to "ComponentLogic<{}, {}, {}>",
|
14
17
|
// completely ignoring the type specified for Methods in the function's type definition.
|
15
18
|
// `new Methods()` should return whatever the InstanceType of TClass is, as that is the type explicitly specified for Methods.
|
16
19
|
// Ignoring the specified type to gin up something else and then complain about it is quite weird.
|
17
20
|
// Regardless, even when `extends ComponentLogicConstructor<TState, TProps, THooks>` is specified using generics instead of a set type,
|
18
21
|
// the issue persists. Which is absurd since this should ensure that InstanceType<Class> should exactly match ComponentLogic<TState, TProps, THooks>
|
19
|
-
var methods = useMemo(function () {
|
22
|
+
var methods = (0, react_1.useMemo)(function () {
|
20
23
|
return new Methods();
|
21
24
|
}, []);
|
22
25
|
methods.state = state;
|
@@ -24,3 +27,4 @@ export var useLogic = function (Methods, props) {
|
|
24
27
|
methods.hooks = ((_a = methods.useCustomHooks) === null || _a === void 0 ? void 0 : _a.call(methods)) || {};
|
25
28
|
return methods;
|
26
29
|
};
|
30
|
+
exports.useLogic = useLogic;
|
package/build/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("./classy"), exports);
|
package/build/tsconfig.json
CHANGED
@@ -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",
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@cleanweb/react",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.5",
|
4
4
|
"description": "A suite of helpers for writing cleaner React function components.",
|
5
5
|
"engines": {
|
6
6
|
"node": ">=18"
|
@@ -10,6 +10,11 @@
|
|
10
10
|
".npmrc"
|
11
11
|
],
|
12
12
|
"main": "build/index.js",
|
13
|
+
".": {
|
14
|
+
"require": "./src/index.cjs",
|
15
|
+
"import": "./src/index.mjs"
|
16
|
+
},
|
17
|
+
"//type": "module",
|
13
18
|
"exports": {
|
14
19
|
".": "./build/index.js",
|
15
20
|
"./base": "./build/base/index.js",
|