@khanacademy/wonder-blocks-core 4.2.1 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-core
 
+## 4.3.0
+
+### Minor Changes
+
+-   246a921d: NEW: `useForceUpdate` hook. This should rarely be used and likely only ever from other hooks.
+
 ## 4.2.1
 
 ## 4.2.0

package/dist/es/index.js

@@ -682,6 +682,25 @@ const useUniqueIdWithoutMock = scope => {
   return idFactory.current;
 };
 
+/**
+ * Hook for forcing a component to update on demand.
+ *
+ * This is for use inside other hooks that do some advanced
+ * trickery with storing state outside of React's own state
+ * mechanisms. As such this should never be called directly
+ * outside of a hook, and more often than not, is the wrong
+ * choice for whatever you are trying to do. If in doubt,
+ * don't use it.
+ *
+ * @returns {() => void} A function that forces the component to update.
+ */
+
+const useForceUpdate = () => {
+  const [, setState] = React.useState(false);
+  const forceUpdate = React.useCallback(() => setState(state => !state), []);
+  return forceUpdate;
+};
+
 const {
   useContext,
   useEffect,
@@ -716,4 +735,4 @@ RenderStateRoot.defaultProps = {
   throwIfNested: true
 };
 
-export { IDProvider, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useUniqueIdWithMock, useUniqueIdWithoutMock };
+export { IDProvider, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useForceUpdate, useUniqueIdWithMock, useUniqueIdWithoutMock };

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 15);
+/******/ 	return __webpack_require__(__webpack_require__.s = 16);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -101,7 +101,7 @@ module.exports = require("react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 
-const RenderState = __webpack_require__(17)({
+const RenderState = __webpack_require__(18)({
   Root: "root",
   Initial: "initial",
   Standard: "standard"
@@ -573,7 +573,7 @@ function processStyleList(style) {
     className: aphrodite__WEBPACK_IMPORTED_MODULE_0__["css"].apply(void 0, stylesheetStyles)
   };
 }
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(16)))
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(17)))
 
 /***/ }),
 /* 8 */
@@ -917,6 +917,34 @@ let serverSide = false;
 /* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useForceUpdate; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+/**
+ * Hook for forcing a component to update on demand.
+ *
+ * This is for use inside other hooks that do some advanced
+ * trickery with storing state outside of React's own state
+ * mechanisms. As such this should never be called directly
+ * outside of a hook, and more often than not, is the wrong
+ * choice for whatever you are trying to do. If in doubt,
+ * don't use it.
+ *
+ * @returns {() => void} A function that forces the component to update.
+ */
+
+const useForceUpdate = () => {
+  const [, setState] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](false);
+  const forceUpdate = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => setState(state => !state), []);
+  return forceUpdate;
+};
+
+/***/ }),
+/* 15 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RenderStateRoot; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
@@ -963,7 +991,7 @@ RenderStateRoot.defaultProps = {
 };
 
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -994,8 +1022,12 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useUniqueIdWithoutMock", function() { return _hooks_use_unique_id_js__WEBPACK_IMPORTED_MODULE_7__["b"]; });
 
-/* harmony import */ var _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(14);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RenderStateRoot", function() { return _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
+/* harmony import */ var _hooks_use_force_update_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(14);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useForceUpdate", function() { return _hooks_use_force_update_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
+
+/* harmony import */ var _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(15);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RenderStateRoot", function() { return _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
+
 
 
 
@@ -1008,7 +1040,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, exports) {
 
 var g;
@@ -1034,7 +1066,7 @@ module.exports = g;
 
 
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"

package/src/hooks/__tests__/use-force-update.test.js

@@ -0,0 +1,54 @@
+// @flow
+import * as React from "react";
+import {render, act} from "@testing-library/react";
+import {renderHook} from "@testing-library/react-hooks";
+
+import {useForceUpdate} from "../use-force-update.js";
+
+describe("#useForceUpdate", () => {
+    it("should return a function", () => {
+        // Arrange
+
+        // Act
+        const {
+            result: {current: result},
+        } = renderHook(() => useForceUpdate());
+
+        // Assert
+        expect(result).toBeInstanceOf(Function);
+    });
+
+    describe("returned function", () => {
+        beforeEach(() => {
+            jest.useFakeTimers();
+        });
+
+        it("should cause component to render", () => {
+            // Arrange
+            const Component = (props): React.Node => {
+                const countRef = React.useRef(0);
+                const forceUpdate = useForceUpdate();
+                React.useEffect(() => {
+                    countRef.current++;
+
+                    setTimeout(forceUpdate, 50);
+                });
+                return countRef.current;
+            };
+
+            // Act
+            const wrapper = render(<Component />);
+            act(() => {
+                // Advance enough for the timeout to run 4 times.
+                // Which means the component should have rendered 4 times,
+                // with one more pending for the timeout that was setup in
+                // the last render.
+                jest.advanceTimersByTime(204);
+            });
+            const result = wrapper.container.textContent;
+
+            // Assert
+            expect(result).toBe("4");
+        });
+    });
+});

package/src/hooks/use-force-update.js

@@ -0,0 +1,23 @@
+// @flow
+import * as React from "react";
+
+/**
+ * Hook for forcing a component to update on demand.
+ *
+ * This is for use inside other hooks that do some advanced
+ * trickery with storing state outside of React's own state
+ * mechanisms. As such this should never be called directly
+ * outside of a hook, and more often than not, is the wrong
+ * choice for whatever you are trying to do. If in doubt,
+ * don't use it.
+ *
+ * @returns {() => void} A function that forces the component to update.
+ */
+export const useForceUpdate = (): (() => void) => {
+    const [, setState] = React.useState(false);
+    const forceUpdate = React.useCallback(
+        () => setState((state) => !state),
+        [],
+    );
+    return forceUpdate;
+};

package/src/index.js

@@ -12,6 +12,7 @@ export {
     useUniqueIdWithMock,
     useUniqueIdWithoutMock,
 } from "./hooks/use-unique-id.js";
+export {useForceUpdate} from "./hooks/use-force-update.js";
 export {RenderStateRoot} from "./components/render-state-root.js";
 
 export type {AriaProps, IIdentifierFactory, StyleType};