@khanacademy/wonder-blocks-core 4.5.0 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @khanacademy/wonder-blocks-core
 
+## 4.6.0
+
+### Minor Changes
+
+-   b561425a: Add useIsMounted() hook
+-   a566e232: Add useOnMountEffect hook
+-   d2b21a6e: Export useOnMountEffect hook
+
 ## 4.5.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -442,6 +442,21 @@ const useForceUpdate = () => {
   return forceUpdate;
 };
 
+const useOnMountEffect = callback => {
+  React.useEffect(callback, []);
+};
+
+const useIsMounted = () => {
+  const isMounted = React.useRef(false);
+  useOnMountEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  });
+  return React.useCallback(() => isMounted.current, []);
+};
+
 const useOnline = () => {
   const forceUpdate = useForceUpdate();
   useEffect$1(() => {
@@ -490,4 +505,4 @@ RenderStateRoot.defaultProps = {
   throwIfNested: true
 };
 
-export { IDProvider, RenderState, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useForceUpdate, useOnline, useRenderState, useUniqueIdWithMock, useUniqueIdWithoutMock };
+export { IDProvider, RenderState, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useForceUpdate, useIsMounted, useOnMountEffect, useOnline, useRenderState, useUniqueIdWithMock, useUniqueIdWithoutMock };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -25,7 +25,7 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.4.0"
+    "wb-dev-build-settings": "^0.5.0"
   },
   "author": "",
   "license": "MIT"

package/src/__docs__/exports.use-is-mounted.stories.mdx

@@ -0,0 +1,19 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Core / Exports / useIsMounted()"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# useIsMounted()
+
+```ts
+function useIsMounted(): () => boolean;
+```
+
+The `useIsMounted` hook returns a function that can be called to determine if
+the component is mounted or not.

package/src/__docs__/exports.use-on-mount-effect.stories.mdx

@@ -0,0 +1,50 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Core / Exports / useOnMountEffect()"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# useOnMountEffect()
+
+```ts
+function useOnMountEffect(callback: (void | () => void)) void;
+```
+
+The `useOnMountEffect` can be used to run an effect once on mount. This avoids
+having to pass `useEffect` an empty deps array and disable the
+`react-hooks/exhaustive-deps` lint.
+
+If `callback` returns a cleanup function, it will be called when the component
+is unmounted.
+
+NOTE: This hook is equivalent to:
+
+```js
+useEffect(() => {
+    callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+}, []);
+```
+
+## Usage
+
+```js
+import * as React.from "react";
+import {useOnMountEffect} from "@khanacademy/wonder-blocks-core";
+
+import {useMarkConversion} from "~/path/to/use-mark-conversion.js";
+
+const MyComponent = (props: {}): React.Node => {
+    const markConversion = useMarkConversion();
+    useOnMountEffect(() => {
+        markConversion("my-conversion"); // Will only be called once, on mount
+    });
+
+    return <h1>Hello, world</h1>;
+};
+```

package/src/components/__tests__/id-provider.test.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from "react";
-import {mount, shallow} from "enzyme";
-import "jest-enzyme";
+import {render} from "@testing-library/react";
 
 import IDProvider from "../id-provider.js";
 
@@ -13,6 +12,7 @@ jest.mock("@khanacademy/wonder-blocks-core", () => {
     return {
         ...Core,
         UniqueIDProvider: (props) =>
+            // eslint-disable-next-line testing-library/no-node-access
             props.children({
                 get: () => mockIDENTIFIER,
             }),
@@ -26,7 +26,7 @@ describe("UniqueDialog", () => {
         const titleId = "custom-title";
 
         // Act
-        shallow(
+        render(
             <IDProvider id={titleId} scope="component">
                 {renderDialogFn}
             </IDProvider>,
@@ -41,7 +41,7 @@ describe("UniqueDialog", () => {
         const renderDialogFn = jest.fn(() => <div />);
 
         // Act
-        mount(<IDProvider scope="component">{renderDialogFn}</IDProvider>);
+        render(<IDProvider scope="component">{renderDialogFn}</IDProvider>);
 
         // Assert
         expect(renderDialogFn).toHaveBeenCalledWith(mockIDENTIFIER);

package/src/components/__tests__/unique-id-provider.test.js

@@ -1,8 +1,7 @@
 // @flow
 import * as React from "react";
 import * as ReactDOMServer from "react-dom/server.js";
-import {mount} from "enzyme";
-import "jest-enzyme";
+import {render} from "@testing-library/react";
 
 import View from "../view.js";
 
@@ -40,7 +39,7 @@ describe("UniqueIDProvider", () => {
             );
 
             // Act
-            mount(nodes);
+            render(nodes);
 
             // Assert
             // Called once; for real render.
@@ -54,15 +53,15 @@ describe("UniqueIDProvider", () => {
         test("all renders get same unique id factory", () => {
             // Arrange
             const children = jest.fn(() => <View />);
-            const nodes = (
+            const UnderTest = () => (
                 <UniqueIDProvider mockOnFirstRender={false}>
                     {children}
                 </UniqueIDProvider>
             );
-            const wrapper = mount(nodes);
+            const {rerender} = render(<UnderTest />);
 
             // Act
-            wrapper.instance().forceUpdate();
+            rerender(<UnderTest />);
 
             // Assert
             // Check our forced render worked and we rendered three times.
@@ -103,7 +102,7 @@ describe("UniqueIDProvider", () => {
             );
 
             // Act
-            mount(nodes);
+            render(nodes);
 
             // Assert
             // Called twice; once for initial mock render, and again for real
@@ -115,22 +114,22 @@ describe("UniqueIDProvider", () => {
         test("children calls after first get same unique id factory", () => {
             // Arrange
             const children = jest.fn(() => null);
-            const nodes = (
+            const UnderTest = () => (
                 <UniqueIDProvider mockOnFirstRender={true}>
                     {children}
                 </UniqueIDProvider>
             );
-            const wrapper = mount(nodes);
+            const {rerender} = render(<UnderTest />);
 
             // Act
-            wrapper.instance().forceUpdate();
+            rerender(<UnderTest />);
 
             // Assert
             // Check our forced render worked and we rendered three times.
             expect(children).toHaveBeenCalledTimes(3);
             // Check the second render gets a UniqueIDFactory instance.
             expect(children.mock.calls[1][0]).toBeInstanceOf(UniqueIDFactory);
-            // Check the third render gets the same UniqueIDFactory instance.
+            // // Check the third render gets the same UniqueIDFactory instance.
             expect(children.mock.calls[2][0]).toBe(children.mock.calls[1][0]);
         });
     });
@@ -150,7 +149,7 @@ describe("UniqueIDProvider", () => {
             );
 
             // Act
-            mount(nodes);
+            render(nodes);
 
             // Assert
             expect(foo).toHaveBeenCalled();
@@ -171,7 +170,7 @@ describe("UniqueIDProvider", () => {
             );
 
             // Act
-            mount(nodes);
+            render(nodes);
 
             // Assert
             expect(foo).toHaveBeenCalled();

package/src/components/__tests__/with-ssr-placeholder.test.js

@@ -1,8 +1,7 @@
 // @flow
 import * as React from "react";
 import * as ReactDOMServer from "react-dom/server.js";
-import {mount} from "enzyme";
-import "jest-enzyme";
+import {render} from "@testing-library/react";
 
 import WithSSRPlaceholder from "../with-ssr-placeholder.js";
 import {RenderStateRoot} from "../render-state-root.js";
@@ -23,7 +22,7 @@ describe("WithSSRPlaceholder", () => {
                 );
 
                 // Act
-                mount(nodes);
+                render(nodes);
             });
 
             // Assert
@@ -57,7 +56,7 @@ describe("WithSSRPlaceholder", () => {
                     );
 
                     // Act
-                    mount(nodes);
+                    render(nodes);
                 });
 
                 // Assert
@@ -90,7 +89,7 @@ describe("WithSSRPlaceholder", () => {
                     );
 
                     // Act
-                    mount(nodes);
+                    render(nodes);
                 });
 
                 // Assert
@@ -206,7 +205,7 @@ describe("WithSSRPlaceholder", () => {
                 );
 
                 // Act
-                mount(nodes);
+                render(nodes);
             });
 
             // Assert

package/src/hooks/__tests__/use-is-mounted.test.js

@@ -0,0 +1,38 @@
+// @flow
+import {renderHook} from "@testing-library/react-hooks";
+
+import {useIsMounted} from "../use-is-mounted.js";
+
+describe("useIsMounted", () => {
+    it("should return false on first call", () => {
+        // Arrange
+
+        // Act
+        const {result} = renderHook(useIsMounted);
+
+        // Assert
+        expect(result.current()).toBeTrue();
+    });
+
+    it("should return true on true on subsequent calls", () => {
+        // Arrange
+        const {result, rerender} = renderHook(useIsMounted);
+
+        // Act
+        rerender();
+
+        // assert
+        expect(result.current()).toBeTrue();
+    });
+
+    it("should return false on unmount", () => {
+        // Arrange
+        const {result, unmount} = renderHook(useIsMounted);
+
+        // Act
+        unmount();
+
+        // Assert
+        expect(result.current()).toBeFalse();
+    });
+});

package/src/hooks/__tests__/use-on-mount-effect.test.js

@@ -0,0 +1,31 @@
+// @flow
+import {renderHook} from "@testing-library/react-hooks";
+
+import {useOnMountEffect} from "../use-on-mount-effect.js";
+
+describe("#useOnMountEffect", () => {
+    it("should call the callback once", () => {
+        // Arrange
+        const callback = jest.fn();
+
+        // Act
+        const {rerender} = renderHook(() => useOnMountEffect(callback));
+        rerender();
+
+        // Assert
+        expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call the cleanup function if one is returned by the callback", () => {
+        // Arrange
+        const cleanup = jest.fn();
+        const callback = jest.fn().mockReturnValue(cleanup);
+
+        // Act
+        const {unmount} = renderHook(() => useOnMountEffect(callback));
+        unmount();
+
+        // Assert
+        expect(cleanup).toHaveBeenCalled();
+    });
+});

package/src/hooks/use-is-mounted.js

@@ -0,0 +1,23 @@
+// @flow
+import * as React from "react";
+
+import {useOnMountEffect} from "./use-on-mount-effect.js";
+
+/**
+ * Hook to provide a function for determining component mounted state.
+ *
+ * NOTE: Based on https://github.com/juliencrn/usehooks-ts/blob/d5f3de88cc319c790f2a4e90ba6a8904298957a5/src/useIsMounted/useIsMounted.ts
+ *
+ * @returns {() => boolean} A function that returns the component mounted state.
+ */
+export const useIsMounted = (): (() => boolean) => {
+    const isMounted = React.useRef<boolean>(false);
+    useOnMountEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    });
+
+    return React.useCallback(() => isMounted.current, []);
+};

package/src/hooks/use-on-mount-effect.js

@@ -0,0 +1,27 @@
+// @flow
+import * as React from "react";
+
+/**
+ * Runs a callback once on mount.
+ *
+ * If the callback returns a cleanup function, it will be called when the component is unmounted.
+ *
+ * @param {() => (void | (() => void))} callback function that forces the component to update.
+ *
+ * The following code snippets are equivalent
+ * ```
+ * useOnMountEffect(() => {
+ *    doTheThing();
+ * });
+ * ```
+ *
+ * ```
+ * useEffect(() => {
+ *    doTheThing();
+ * // eslint-disable-next-line react-hooks/exhaustive-deps
+ * }, []);
+ */
+export const useOnMountEffect = (callback: () => void | (() => void)): void => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(callback, []);
+};

package/src/index.js

@@ -13,6 +13,8 @@ export {
     useUniqueIdWithoutMock,
 } from "./hooks/use-unique-id.js";
 export {useForceUpdate} from "./hooks/use-force-update.js";
+export {useIsMounted} from "./hooks/use-is-mounted.js";
+export {useOnMountEffect} from "./hooks/use-on-mount-effect.js";
 export {useOnline} from "./hooks/use-online.js";
 export {useRenderState} from "./hooks/use-render-state.js";
 export {RenderStateRoot} from "./components/render-state-root.js";

package/src/util/__tests__/add-style.test.js

@@ -1,8 +1,7 @@
 // @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
-import {mount} from "enzyme";
-import "jest-enzyme";
+import {screen, render} from "@testing-library/react";
 
 import addStyle from "../add-style.js";
 
@@ -27,40 +26,62 @@ describe("addStyle", () => {
     });
 
     it("should set the className if no style is provided", () => {
-        const wrapper = mount(<StyledDiv className="foo" />);
+        // Arrange
+        render(<StyledDiv className="foo" data-test-id="styled-div" />);
 
-        const div = wrapper.find("div");
+        // Act
+        const div = screen.getByTestId("styled-div");
 
-        expect(div).toHaveProp("className", "foo");
+        // Assert
+        expect(div).toHaveAttribute("class", "foo");
     });
 
     it("should set the className to include foo and inlineStyles", () => {
-        const wrapper = mount(
-            <StyledDiv className="foo" style={{width: "100%"}} />,
+        // Arrange
+        render(
+            <StyledDiv
+                className="foo"
+                style={{width: "100%"}}
+                data-test-id="styled-div"
+            />,
         );
 
-        const div = wrapper.find("div");
+        // Act
+        const div = screen.getByTestId("styled-div");
 
-        const classNames = div.props().className.split(" ");
+        // Assert
+        const classNames = div.className.split(" ");
         expect(classNames).toHaveLength(2);
         expect(classNames[0].startsWith("inlineStyles")).toBeTruthy();
         expect(classNames[1]).toEqual("foo");
     });
 
-    it("should set the className if an stylesheet style is provided", () => {
-        const wrapper = mount(<StyledDiv style={styles.foo} />);
+    it("should set the class if an stylesheet style is provided", () => {
+        // Arrange
+        render(<StyledDiv style={styles.foo} data-test-id="styled-div" />);
 
-        const div = wrapper.find("div");
+        // Act
+        const div = screen.getByTestId("styled-div");
 
-        expect(div).toHaveProp("className", expect.any(String));
+        // Assert
+        expect(div).toHaveAttribute("class", expect.any(String));
     });
 
     it("should set the className if an stylesheet style is provided", () => {
-        const wrapper = mount(<StyledDiv className="foo" style={styles.foo} />);
+        // Arrange
+        render(
+            <StyledDiv
+                className="foo"
+                style={styles.foo}
+                data-test-id="styled-div"
+            />,
+        );
 
-        const div = wrapper.find("div");
+        // Act
+        const div = screen.getByTestId("styled-div");
 
-        const classNames = div.props().className.split(" ");
+        // Assert
+        const classNames = div.className.split(" ");
         expect(classNames).toHaveLength(2);
         expect(classNames[0]).toEqual(expect.any(String));
         expect(classNames[1]).toEqual("foo");