@cleanweb/react 2.1.5 → 2.1.7-beta.0

package/build/base/methods.js

@@ -4,8 +4,6 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMethods = exports.ComponentMethods = void 0;
-// JSDoc references
-var helpers_1 = require("../helpers");
 // Values
 var react_1 = require("react");
 /**
@@ -81,11 +79,12 @@ exports.ComponentMethods = ComponentMethods;
  * `state` should be an instance of `CleanState` created with {@link useCleanState}.
  */
 var useMethods = function () {
+    var _a;
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         args[_i] = arguments[_i];
     }
-    var Methods = args[0], _a = args[1], props = _a === void 0 ? {} : _a, state = args[2];
+    var Methods = args[0], _b = args[1], props = _b === void 0 ? {} : _b, state = args[2];
     // Vite HMR seems to sometimes reinitialize useMemo calls after a hot update,
     // causing the instance to be unexpectedly recreated in the middle of the component's lifecycle.
     // But useRef and useState values appear to always be preserved whenever this happens.
@@ -95,52 +94,32 @@ var useMethods = function () {
     // latestInstance is only extracted into a separate variable for use in dev mode during HMR.
     var latestInstance = (0, react_1.useMemo)(function () { return new Methods(); }, [Methods]);
     var instanceRef = (0, react_1.useRef)(latestInstance);
-    if (process.env.NODE_ENV === 'development') {
-        var rerender_1 = (0, helpers_1.useRerender)();
-        (0, react_1.useEffect)(function () {
-            var _a;
-            if (instanceRef.current === latestInstance)
-                return;
-            console.log([
-                'HMR-updated component class detected.',
-                'Creating a new instance with the updated class.',
-                'All stateful values will be copied over.\n\n',
-                'Note that this mechanism only works in the `development` environment during HMR.',
-                'In production, the class argument will be ignored after the first render.\n\n',
-                'If this wasn\'t an HMR update, you should refactor your code to make sure',
-                'all clean-react hooks receive the same class argument on every render.'
-            ].join(' '));
-            var oldInstance = instanceRef.current;
-            latestInstance._hmrPreserveKeys.forEach(function (_key) {
-                var key = _key;
-                // @ts-expect-error We're assigning to readonly properties. Also, Typescript doesn't know that the type of the left and right side will always match, due to the dynamic access.
-                latestInstance[key] = oldInstance[key];
-            });
-            (_a = latestInstance._onHmrUpdate) === null || _a === void 0 ? void 0 : _a.call(latestInstance, oldInstance);
-            Reflect.ownKeys(oldInstance).forEach(function (_key) {
-                var key = _key;
-                delete oldInstance[key];
-            });
-            Object.setPrototypeOf(oldInstance, latestInstance);
-            instanceRef.current = latestInstance;
-            rerender_1();
+    var refreshState = function () {
+        // @ts-expect-error
+        instanceRef.current.props = props;
+        // @ts-expect-error
+        if (state)
+            instanceRef.current.state = state;
+    };
+    if (process.env.NODE_ENV === 'development' && instanceRef.current !== latestInstance) {
+        var oldInstance_1 = instanceRef.current;
+        latestInstance._hmrPreserveKeys.forEach(function (_key) {
+            var key = _key;
+            // @ts-expect-error We're assigning to readonly properties. Also, Typescript doesn't know that the type of the left and right side will always match, due to the dynamic access.
+            latestInstance[key] = oldInstance_1[key];
         });
+        Reflect.ownKeys(oldInstance_1).forEach(function (_key) {
+            var key = _key;
+            delete oldInstance_1[key];
+        });
+        Object.setPrototypeOf(oldInstance_1, latestInstance);
+        instanceRef.current = latestInstance;
+        refreshState();
+        (_a = latestInstance._onHmrUpdate) === null || _a === void 0 ? void 0 : _a.call(latestInstance, oldInstance_1);
     }
-    var methods = instanceRef.current;
-    /**
-     * A proxy variable to allow typechecking of the assignment
-     * to a readonly property,
-     * despite the need for "readonly" error suppression.
-     */
-    var _propsProxy;
-    /** @see {@link _propsProxy} */
-    var _stateProxy;
-    // @ts-expect-error
-    methods.props = (_propsProxy = props);
-    // @ts-expect-error
-    if (state)
-        methods.state = (_stateProxy = state);
-    return methods;
+    else
+        refreshState();
+    return instanceRef.current;
 };
 exports.useMethods = useMethods;
 /** /testing: {

package/build/classy/logic/index.js

@@ -97,61 +97,47 @@ exports.ComponentLogic = ComponentLogic;
  * @see https://cleanjsweb.github.io/neat-react/functions/API.useLogic.html
  */
 var useLogic = function () {
-    var _a, _b;
+    var _a;
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         args[_i] = arguments[_i];
     }
-    var Logic = args[0], _c = args[1], props = _c === void 0 ? {} : _c;
+    var Logic = args[0], _b = args[1], props = _b === void 0 ? {} : _b;
     // In production, we only use the latestInstance the first time, and it's ignored every other time.
     // This means changing the class at runtime will have no effect in production.
     // latestInstance is only extracted into a separate variable for use in dev mode during HMR.
     var latestInstance = (0, react_1.useMemo)(function () { return new Logic(); }, [Logic]);
+    // const latestInstance = useMemo(() => new Logic(), []);
     var instanceRef = (0, react_1.useRef)(latestInstance);
-    if (process.env.NODE_ENV === 'development') {
-        if (instanceRef.current !== latestInstance) {
-            console.log([
-                'HMR-updated component class detected.',
-                'Creating a new instance with the updated class.',
-                'All stateful values will be copied over.\n\n',
-                'Note that this mechanism only works in the `development` environment during HMR.',
-                'In production, the class argument will be ignored after the first render.\n\n',
-                'If this wasn\'t an HMR update, you should refactor your code to make sure',
-                'all clean-react hooks receive the same class argument on every render.'
-            ].join(' '));
-            var oldInstance_1 = instanceRef.current;
-            latestInstance._hmrPreserveKeys.forEach(function (_key) {
-                var key = _key;
-                // @ts-expect-error We're assigning to readonly properties. Also, Typescript doesn't know that the type of the left and right side will always match, due to the dynamic access.
-                latestInstance[key] = oldInstance_1[key];
-            });
-            (_a = latestInstance._onHmrUpdate) === null || _a === void 0 ? void 0 : _a.call(latestInstance, oldInstance_1);
-            instanceRef.current = latestInstance;
-            Reflect.ownKeys(oldInstance_1).forEach(function (_key) {
-                var key = _key;
-                delete oldInstance_1[key];
-            });
-            Object.setPrototypeOf(oldInstance_1, latestInstance);
-        }
+    var refreshState = function () {
+        var _a;
+        // @ts-expect-error
+        instanceRef.current.props = props;
+        // @ts-expect-error
+        instanceRef.current.state = (0, state_1.useCleanState)(instanceRef.current.getInitialState, props);
+        // @ts-expect-error
+        instanceRef.current.hooks = (_a = instanceRef.current.useHooks()) !== null && _a !== void 0 ? _a : {};
+    };
+    if (process.env.NODE_ENV === 'development' && instanceRef.current !== latestInstance) {
+        var oldInstance_1 = instanceRef.current;
+        latestInstance._hmrPreserveKeys.forEach(function (_key) {
+            var key = _key;
+            // @ts-expect-error We're assigning to readonly properties. Also, Typescript doesn't know that the type of the left and right side will always match, due to the dynamic access.
+            latestInstance[key] = oldInstance_1[key];
+        });
+        Reflect.ownKeys(oldInstance_1).forEach(function (_key) {
+            var key = _key;
+            delete oldInstance_1[key];
+        });
+        Object.setPrototypeOf(oldInstance_1, latestInstance);
+        instanceRef.current = latestInstance;
+        refreshState();
+        (_a = latestInstance._onHmrUpdate) === null || _a === void 0 ? void 0 : _a.call(latestInstance, oldInstance_1);
     }
-    var self = instanceRef.current;
-    /**
-     * A proxy variable to allow typechecking of the assignment
-     * to a readonly property,
-     * despite the need for "readonly" error suppression.
-     */
-    var _propsProxy;
-    /** @see {@link _propsProxy} */
-    var _stateProxy;
-    /** @see {@link _propsProxy} */
-    var _hooksProxy;
-    // @ts-expect-error
-    self.props = (_propsProxy = props);
-    // @ts-expect-error
-    self.state = (_stateProxy = (0, state_1.useCleanState)(self.getInitialState, props));
-    // @ts-expect-error
-    self.hooks = (_hooksProxy = (_b = self.useHooks()) !== null && _b !== void 0 ? _b : {});
-    return self;
+    else
+        refreshState();
+    return instanceRef.current;
+    ;
 };
 exports.useLogic = useLogic;
 /** /

package/build/helpers/index.d.ts

@@ -2,6 +2,7 @@
  * <!-- @ mergeModuleWith API -->
  * @module Helpers
  */
+import type { ComponentLogic } from '../classy';
 export * from './mount-state';
 export * from './rerender';
 export * from './use-component';
@@ -11,3 +12,5 @@ export * from './type-guards';
  * It returns (void) without performing any operations.
  */
 export declare const noOp: () => void;
+export type StateFragment<TComponent extends ComponentLogic<any>> = Partial<ReturnType<TComponent['getInitialState']>>;
+export type { StateFragment as SF };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleanweb/react",
-  "version": "2.1.5",
+  "version": "2.1.7-beta.0",
   "description": "A suite of helpers for writing cleaner React function components.",
   "engines": {
     "node": ">=18"