Merge pull request #120 from aeagle/feature/react-18

Upgrade dev dependencies to React 18 and applied fix for React 18 strict mode

.storybook/main.js

@@ -6,18 +6,13 @@ module.exports = {
 		"@storybook/addon-actions",
 		"@storybook/addon-links",
 		{
-			name: "@storybook/addon-docs/preset",
+			name: "@storybook/addon-docs",
 			options: {
 				configureJSX: true,
 				inlineStories: false,
 			},
 		},
 	],
-	typescript: {
-		check: true,
-		checkOptions: {},
-		reactDocgen: "react-docgen-typescript",
-	},
 	webpackFinal: async (config, { configType }) => {
 		if (process.env.NODE === "production") {
 			config.output.publicPath = "/react-spaces/docs";
@@ -31,4 +26,7 @@ module.exports = {
 
 		return config;
 	},
+	reactOptions: {
+		strictMode: true,
+	},
 };

package.json

@@ -32,22 +32,22 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.5.5",
-		"@rollup/plugin-commonjs": "^21.0.1",
 		"@rollup/plugin-babel": "^5.3.0",
+		"@rollup/plugin-commonjs": "^21.0.1",
 		"@rollup/plugin-node-resolve": "^13.0.6",
-		"@storybook/addon-actions": "^6.3.12",
-		"@storybook/addon-docs": "^6.3.12",
+		"@storybook/addon-actions": "^6.5.5",
+		"@storybook/addon-docs": "^6.5.5",
 		"@storybook/addon-knobs": "^6.3.1",
-		"@storybook/addon-links": "^6.3.12",
-		"@storybook/addons": "^6.3.12",
-		"@storybook/react": "^6.3.12",
+		"@storybook/addon-links": "^6.5.5",
+		"@storybook/addons": "^6.5.5",
+		"@storybook/react": "^6.5.5",
 		"@testing-library/jest-dom": "^5.15.0",
 		"@testing-library/react": "^12.1.2",
 		"@types/jest": "^24.0.15",
 		"@types/node": "^12.6.8",
 		"@types/prop-types": "^15.7.3",
-		"@types/react": "^16.8.23",
-		"@types/react-dom": "^16.8.4",
+		"@types/react": "^18.0.9",
+		"@types/react-dom": "^18.0.5",
 		"acorn": "^7.1.1",
 		"awesome-typescript-loader": "^5.2.1",
 		"babel-loader": "^8.0.6",
@@ -56,18 +56,18 @@
 		"is-svg": "^4.2.2",
 		"jest": "^25.4.0",
 		"jest-expect-message": "^1.0.2",
-		"node-sass": "^7.0.0",
 		"prettier": "^1.19.1",
-		"react": "^17.0.2",
+		"react": "^18.1.0",
 		"react-docgen-typescript-loader": "^3.7.0",
-		"react-dom": "^17.0.2",
+		"react-dom": "^18.1.0",
 		"rollup": "^2.60.0",
 		"rollup-plugin-fork-ts-checker": "0.0.6",
 		"rollup-plugin-postcss": "^3.1.8",
 		"rollup-plugin-sourcemaps": "^0.6.3",
 		"rollup-plugin-typescript2": "^0.31.0",
 		"rollup-plugin-uglify": "^6.0.4",
 		"rollup-watch": "^4.3.1",
+		"sass": "^1.52.1",
 		"sass-loader": "^8.0.2",
 		"ts-jest": "^25.4.0",
 		"ts-loader": "^6.2.1",
@@ -78,8 +78,8 @@
 		"cssstyle": "2.3.0"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17",
-		"react-dom": "^16.8.0 || ^17"
+		"react": "^16.8.0 || ^17 || ^18",
+		"react-dom": "^16.8.0 || ^17 || ^18"
 	},
 	"scripts": {
 		"start": "rollup -c -w",

src/components/Centered.tsx

@@ -1,3 +1,7 @@
 import * as React from "react";
 
-export const Centered: React.FC = (props) => <div className={`spaces-centered`}>{props.children}</div>;
+interface IProps {
+	children?: React.ReactNode;
+}
+
+export const Centered: React.FC<IProps> = (props) => <div className={`spaces-centered`}>{props.children}</div>;

src/components/CenteredVertically.tsx

@@ -1,3 +1,7 @@
 import * as React from "react";
 
-export const CenteredVertically: React.FC = (props) => <div className={`spaces-centered-vertically`}>{props.children}</div>;
+interface IProps {
+	children?: React.ReactNode;
+}
+
+export const CenteredVertically: React.FC<IProps> = (props) => <div className={`spaces-centered-vertically`}>{props.children}</div>;

src/components/Layer.tsx

@@ -2,7 +2,12 @@ import * as React from "react";
 import { LayerContext } from "../core-react";
 import * as PropTypes from "prop-types";
 
-export const Layer: React.FC<{ zIndex: number }> = (props) => <LayerContext.Provider value={props.zIndex}>{props.children}</LayerContext.Provider>;
+interface IProps {
+	zIndex: number;
+	children?: React.ReactNode;
+}
+
+export const Layer: React.FC<IProps> = (props) => <LayerContext.Provider value={props.zIndex}>{props.children}</LayerContext.Provider>;
 
 Layer.propTypes = {
 	zIndex: PropTypes.number.isRequired,

src/components/Options.tsx

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { IReactSpacesOptions, OptionsContext } from "../core-react";
 
-export const Options: React.FC<IReactSpacesOptions> = ({ children, ...opts }) => {
+interface IProps extends IReactSpacesOptions {
+	children?: React.ReactNode;
+}
+
+export const Options: React.FC<IProps> = ({ children, ...opts }) => {
 	return <OptionsContext.Provider value={opts}>{children}</OptionsContext.Provider>;
 };

src/components/Space.tsx

@@ -1,5 +1,5 @@
 import { CenterType, ResizeHandlePlacement, AnchorType, Type } from "../core-types";
-import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceInnerProps } from "../core-react";
+import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceInnerProps, useEffectOnce } from "../core-react";
 import * as React from "react";
 import { Centered } from "./Centered";
 import { CenteredVertically } from "./CenteredVertically";
@@ -59,9 +59,9 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 		...{ id: props.id || props.wrapperInstance["_react_spaces_uniqueid"] },
 	});
 
-	React.useEffect(() => {
+	useEffectOnce(() => {
 		space.element = elementRef.current!;
-	}, []);
+	});
 
 	const userClasses = className ? className.split(" ").map((c) => c.trim()) : [];
 

src/components/stories/Utils.tsx

@@ -23,7 +23,7 @@ export const CommonHeader = () => (
 	</div>
 );
 
-export const PropsTable: React.FC = (props) => (
+export const PropsTable: React.FC<{ children?: React.ReactNode }> = (props) => (
 	<table className="sbdocs sbdocs-table properties-table css-lckf62">
 		<tbody>
 			<tr>
@@ -47,7 +47,7 @@ const propHeaderStyle: CSSProperties = {
 	fontWeight: 500,
 };
 
-export const PropsHeader: React.FC = (props) => (
+export const PropsHeader: React.FC<{ children?: React.ReactNode }> = (props) => (
 	<tr>
 		<td colSpan={4} style={propHeaderStyle}>
 			{props.children}

src/core-react.ts

@@ -1,9 +1,56 @@
 import * as React from "react";
 import { createStore } from "./core";
-import { ISpaceProps, ISpaceStore, ISpaceDefinition, ResizeType, CenterType, ISpaceContext, ICommonProps } from "./core-types";
+import {
+	ISpaceProps,
+	ISpaceStore,
+	ISpaceDefinition,
+	ResizeType,
+	CenterType,
+	ISpaceContext,
+	ICommonProps,
+	ResizeMouseEvent,
+	OnDragEnd,
+	ResizeTouchEvent,
+} from "./core-types";
 import { coalesce, shortuuid } from "./core-utils";
 import { ResizeSensor } from "css-element-queries";
 import * as PropTypes from "prop-types";
+import { useEffect, useRef, useState } from "react";
+
+// WORKAROUND for React18 strict mode
+// https://blog.ag-grid.com/avoiding-react-18-double-mount/
+export const useEffectOnce = (effect: () => void | (() => void)) => {
+	const destroyFunc = useRef<void | (() => void)>();
+	const effectCalled = useRef(false);
+	const renderAfterCalled = useRef(false);
+	const [_val, setVal] = useState<number>(0);
+
+	if (effectCalled.current) {
+		renderAfterCalled.current = true;
+	}
+
+	useEffect(() => {
+		// only execute the effect first time around
+		if (!effectCalled.current) {
+			destroyFunc.current = effect();
+			effectCalled.current = true;
+		}
+
+		// this forces one render after the effect is run
+		setVal((val) => val + 1);
+
+		return () => {
+			// if the comp didn't render since the useEffect was called,
+			// we know it's the dummy React cycle
+			if (!renderAfterCalled.current) {
+				return;
+			}
+			if (destroyFunc.current) {
+				destroyFunc.current();
+			}
+		};
+	}, []);
+};
 
 export const ParentContext = React.createContext<string | undefined>(undefined);
 export const DOMRectContext = React.createContext<DOMRect | undefined>(undefined);
@@ -52,6 +99,7 @@ export interface IReactEvents {
 export interface IReactSpaceCommonProps extends ICommonProps, IReactEvents {
 	style?: React.CSSProperties;
 	as?: keyof React.ReactDOM | React.ComponentType<ICommonProps>;
+	children?: React.ReactNode;
 }
 
 export interface IReactSpaceInnerProps extends IReactSpaceCommonProps, ISpaceProps, IReactEvents {
@@ -104,7 +152,7 @@ export function useSpace(props: IReactSpaceInnerProps) {
 
 	const resizeHandles = useSpaceResizeHandles(store, space);
 
-	React.useEffect(() => {
+	useEffectOnce(() => {
 		const rect = elementRef.current!.getBoundingClientRect() as DOMRect;
 		space!.dimension = {
 			...rect,
@@ -138,7 +186,7 @@ export function useSpace(props: IReactSpaceInnerProps) {
 			resizeSensor.current && resizeSensor.current.detach();
 			store.removeSpace(space!);
 		};
-	}, []);
+	});
 
 	return { space: space, resizeHandles: resizeHandles, domRect: domRect, elementRef: elementRef };
 }
@@ -207,8 +255,14 @@ export function useCurrentSpace() {
 
 	const domRect = React.useContext(DOMRectContext);
 	const layer = React.useContext(LayerContext);
-	const onMouseDrag = React.useCallback((e, onDragEnd) => (space ? store.startMouseDrag(space, e, onDragEnd) : null), [spaceId]);
-	const onTouchDrag = React.useCallback((e, onDragEnd) => (space ? store.startTouchDrag(space, e, onDragEnd) : null), [spaceId]);
+	const onMouseDrag = React.useCallback(
+		(e: ResizeMouseEvent, onDragEnd: OnDragEnd | undefined) => (space ? store.startMouseDrag(space, e, onDragEnd) : null),
+		[spaceId],
+	);
+	const onTouchDrag = React.useCallback(
+		(e: ResizeTouchEvent, onDragEnd: OnDragEnd | undefined) => (space ? store.startTouchDrag(space, e, onDragEnd) : null),
+		[spaceId],
+	);
 	const onForceUpdate = React.useCallback(() => (space ? store.updateStyles(space) : null), [spaceId]);
 
 	const defaults = { width: 0, height: 0, x: 0, y: 0 };