From e1f772ee43efef5b4d8a0e67776fce54954441cb Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Fri, 28 May 2021 08:54:13 -0700
Subject: [PATCH 1/5] =?UTF-8?q?compose:=20Try=20typing=20`withState`=20in?=
=?UTF-8?q?=20a=20na=C3=AFve=20way?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/compose/README.md | 4 +-
.../src/higher-order/with-state/index.js | 48 -----------
.../src/higher-order/with-state/index.tsx | 82 +++++++++++++++++++
packages/compose/tsconfig.json | 1 +
4 files changed, 85 insertions(+), 50 deletions(-)
delete mode 100644 packages/compose/src/higher-order/with-state/index.js
create mode 100644 packages/compose/src/higher-order/with-state/index.tsx
diff --git a/packages/compose/README.md b/packages/compose/README.md
index 0d60b1c223c29..fd030ad544022 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -542,11 +542,11 @@ via props.
_Parameters_
-- _initialState_ `?Object`: Optional initial state of the component.
+- _initialState_ `TStateProps`: Optional initial state of the component.
_Returns_
-- `WPComponent`: Wrapped component.
+- `HigherOrderComponent< TProps & TStateProps & { setState: Component[ 'setState' ]; }, TProps >`: A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
diff --git a/packages/compose/src/higher-order/with-state/index.js b/packages/compose/src/higher-order/with-state/index.js
deleted file mode 100644
index 33791593d5e6d..0000000000000
--- a/packages/compose/src/higher-order/with-state/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
-
-/**
- * A Higher Order Component used to provide and manage internal component state
- * via props.
- *
- * @deprecated Use `useState` instead.
- *
- * @param {?Object} initialState Optional initial state of the component.
- *
- * @return {WPComponent} Wrapped component.
- */
-export default function withState( initialState = {} ) {
- deprecated( 'wp.compose.withState', {
- alternative: 'wp.element.useState',
- } );
-
- return createHigherOrderComponent( ( OriginalComponent ) => {
- return class WrappedComponent extends Component {
- constructor() {
- super( ...arguments );
-
- this.setState = this.setState.bind( this );
-
- this.state = initialState;
- }
-
- render() {
- return (
-
- );
- }
- };
- }, 'withState' );
-}
diff --git a/packages/compose/src/higher-order/with-state/index.tsx b/packages/compose/src/higher-order/with-state/index.tsx
new file mode 100644
index 0000000000000..eacd8ee1c3f0e
--- /dev/null
+++ b/packages/compose/src/higher-order/with-state/index.tsx
@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { ComponentType } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import createHigherOrderComponent from '../../utils/create-higher-order-component';
+// eslint-disable-next-line no-duplicate-imports
+import type { HigherOrderComponent } from '../../utils/create-higher-order-component';
+
+/**
+ * A Higher Order Component used to provide and manage internal component state
+ * via props.
+ *
+ * @deprecated Use `useState` instead.
+ *
+ * @param initialState Optional initial state of the component.
+ *
+ * @return A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
+ */
+export default function withState<
+ TProps extends object,
+ TStateProps extends object
+>(
+ initialState: TStateProps = {} as TStateProps
+): HigherOrderComponent<
+ TProps &
+ TStateProps & {
+ setState: Component< TProps, TStateProps >[ 'setState' ];
+ },
+ TProps
+> {
+ deprecated( 'wp.compose.withState', {
+ alternative: 'wp.element.useState',
+ } );
+ return createHigherOrderComponent(
+ (
+ OriginalComponent: ComponentType<
+ TProps &
+ TStateProps & {
+ setState: Component<
+ TProps,
+ TStateProps
+ >[ 'setState' ];
+ }
+ >
+ ) => {
+ return class WrappedComponent extends Component<
+ TProps,
+ TStateProps
+ > {
+ constructor( props: any ) {
+ super( props );
+
+ this.setState = this.setState.bind( this );
+
+ this.state = initialState;
+ }
+
+ render() {
+ return (
+
+ );
+ }
+ };
+ },
+ 'withState'
+ );
+}
diff --git a/packages/compose/tsconfig.json b/packages/compose/tsconfig.json
index 8c7e42cd8d99f..f135ca48bd374 100644
--- a/packages/compose/tsconfig.json
+++ b/packages/compose/tsconfig.json
@@ -17,6 +17,7 @@
"src/higher-order/pure/**/*",
"src/higher-order/with-instance-id/**/*",
"src/higher-order/with-global-events/**/*",
+ "src/higher-order/with-state/**/*",
"src/hooks/use-async-list/**/*",
"src/hooks/use-constrained-tabbing/**/*",
"src/hooks/use-copy-on-click/**/*",
From 112ff782022b6e7dc4f89984565ff2a5c512dc25 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Sun, 13 Jun 2021 16:15:26 -0700
Subject: [PATCH 2/5] compose: Type withState as any
---
.../src/higher-order/with-state/index.tsx | 43 ++++---------------
1 file changed, 8 insertions(+), 35 deletions(-)
diff --git a/packages/compose/src/higher-order/with-state/index.tsx b/packages/compose/src/higher-order/with-state/index.tsx
index eacd8ee1c3f0e..60c04126aca9f 100644
--- a/packages/compose/src/higher-order/with-state/index.tsx
+++ b/packages/compose/src/higher-order/with-state/index.tsx
@@ -1,9 +1,3 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import type { ComponentType } from 'react';
-
/**
* WordPress dependencies
*/
@@ -14,8 +8,6 @@ import deprecated from '@wordpress/deprecated';
* Internal dependencies
*/
import createHigherOrderComponent from '../../utils/create-higher-order-component';
-// eslint-disable-next-line no-duplicate-imports
-import type { HigherOrderComponent } from '../../utils/create-higher-order-component';
/**
* A Higher Order Component used to provide and manage internal component state
@@ -27,37 +19,18 @@ import type { HigherOrderComponent } from '../../utils/create-higher-order-compo
*
* @return A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
*/
-export default function withState<
- TProps extends object,
- TStateProps extends object
->(
- initialState: TStateProps = {} as TStateProps
-): HigherOrderComponent<
- TProps &
- TStateProps & {
- setState: Component< TProps, TStateProps >[ 'setState' ];
- },
- TProps
-> {
+export default function withState(
+ initialState: any
+): any {
deprecated( 'wp.compose.withState', {
alternative: 'wp.element.useState',
} );
+
return createHigherOrderComponent(
(
- OriginalComponent: ComponentType<
- TProps &
- TStateProps & {
- setState: Component<
- TProps,
- TStateProps
- >[ 'setState' ];
- }
- >
+ OriginalComponent: any
) => {
- return class WrappedComponent extends Component<
- TProps,
- TStateProps
- > {
+ return class WrappedComponent extends Component {
constructor( props: any ) {
super( props );
@@ -69,8 +42,8 @@ export default function withState<
render() {
return (
);
From 63f706dd944808ce6fb0a903a78de36d48e7b488 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Sun, 13 Jun 2021 16:17:52 -0700
Subject: [PATCH 3/5] Move withState back to regular JavaScript
---
packages/compose/README.md | 4 ++--
.../higher-order/with-state/{index.tsx => index.js} | 12 ++++++------
2 files changed, 8 insertions(+), 8 deletions(-)
rename packages/compose/src/higher-order/with-state/{index.tsx => index.js} (72%)
diff --git a/packages/compose/README.md b/packages/compose/README.md
index fd030ad544022..33e0238fb4ddb 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -542,11 +542,11 @@ via props.
_Parameters_
-- _initialState_ `TStateProps`: Optional initial state of the component.
+- _initialState_ `any`: Optional initial state of the component.
_Returns_
-- `HigherOrderComponent< TProps & TStateProps & { setState: Component[ 'setState' ]; }, TProps >`: A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
+- `any`: A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
diff --git a/packages/compose/src/higher-order/with-state/index.tsx b/packages/compose/src/higher-order/with-state/index.js
similarity index 72%
rename from packages/compose/src/higher-order/with-state/index.tsx
rename to packages/compose/src/higher-order/with-state/index.js
index 60c04126aca9f..9b8fb63419d05 100644
--- a/packages/compose/src/higher-order/with-state/index.tsx
+++ b/packages/compose/src/higher-order/with-state/index.js
@@ -15,23 +15,23 @@ import createHigherOrderComponent from '../../utils/create-higher-order-componen
*
* @deprecated Use `useState` instead.
*
- * @param initialState Optional initial state of the component.
+ * @param {any} initialState Optional initial state of the component.
*
- * @return A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
+ * @return {any} A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
*/
export default function withState(
- initialState: any
-): any {
+ initialState
+) {
deprecated( 'wp.compose.withState', {
alternative: 'wp.element.useState',
} );
return createHigherOrderComponent(
(
- OriginalComponent: any
+ OriginalComponent
) => {
return class WrappedComponent extends Component {
- constructor( props: any ) {
+ constructor( /** @type {any} */ props ) {
super( props );
this.setState = this.setState.bind( this );
From 6934140c2d051168a7becea80b67338c05970868 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Sun, 13 Jun 2021 16:21:25 -0700
Subject: [PATCH 4/5] Fix file formatting
---
.../src/higher-order/with-state/index.js | 47 ++++++++-----------
1 file changed, 20 insertions(+), 27 deletions(-)
diff --git a/packages/compose/src/higher-order/with-state/index.js b/packages/compose/src/higher-order/with-state/index.js
index 9b8fb63419d05..bc88113e55055 100644
--- a/packages/compose/src/higher-order/with-state/index.js
+++ b/packages/compose/src/higher-order/with-state/index.js
@@ -12,44 +12,37 @@ import createHigherOrderComponent from '../../utils/create-higher-order-componen
/**
* A Higher Order Component used to provide and manage internal component state
* via props.
- *
+ *
* @deprecated Use `useState` instead.
*
* @param {any} initialState Optional initial state of the component.
*
* @return {any} A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
*/
-export default function withState(
- initialState
-) {
+export default function withState( initialState ) {
deprecated( 'wp.compose.withState', {
alternative: 'wp.element.useState',
} );
- return createHigherOrderComponent(
- (
- OriginalComponent
- ) => {
- return class WrappedComponent extends Component {
- constructor( /** @type {any} */ props ) {
- super( props );
+ return createHigherOrderComponent( ( OriginalComponent ) => {
+ return class WrappedComponent extends Component {
+ constructor( /** @type {any} */ props ) {
+ super( props );
- this.setState = this.setState.bind( this );
+ this.setState = this.setState.bind( this );
- this.state = initialState;
- }
+ this.state = initialState;
+ }
- render() {
- return (
-
- );
- }
- };
- },
- 'withState'
- );
+ render() {
+ return (
+
+ );
+ }
+ };
+ }, 'withState' );
}
From e446a2cfa1df1f01b8bf122b9f81c6b4a0db539c Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Sun, 13 Jun 2021 16:22:19 -0700
Subject: [PATCH 5/5] Put back initialState default value
---
packages/compose/src/higher-order/with-state/index.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/compose/src/higher-order/with-state/index.js b/packages/compose/src/higher-order/with-state/index.js
index bc88113e55055..1f75d62182486 100644
--- a/packages/compose/src/higher-order/with-state/index.js
+++ b/packages/compose/src/higher-order/with-state/index.js
@@ -19,7 +19,7 @@ import createHigherOrderComponent from '../../utils/create-higher-order-componen
*
* @return {any} A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
*/
-export default function withState( initialState ) {
+export default function withState( initialState = {} ) {
deprecated( 'wp.compose.withState', {
alternative: 'wp.element.useState',
} );