Merge pull request #222 from studiopress/update/pluginade/0.0.3

Update to Pluginade 0.0.3

.eslintrc

@@ -0,0 +1,38 @@
+{
+  "extends": [
+    "plugin:@wordpress/eslint-plugin/recommended"
+  ],
+  "globals": {
+    "beforeEach": "readonly",
+    "describe": "readonly",
+    "expect": "readonly",
+    "it": "readonly",
+    "jest": "readonly",
+    "test": "readonly"
+  },
+  "settings": {
+    "jsdoc": {
+      "mode": "typescript"
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "rules": {
+    "react/jsx-no-target-blank": "off"
+  },
+  "overrides": [
+    {
+      "files": [ "*.ts", "*.tsx" ],
+      "rules": {
+        "jsdoc/require-param": "off",
+        "jsdoc/require-param-type": "off",
+        "jsdoc/require-returns-type": "off",
+        "no-unused-vars": "off",
+        "no-undef": "off"
+      }
+    }
+  ]
+}

pluginade.sh

@@ -4,7 +4,7 @@
 
 # Set this to the version of pluginade-scripts you want to use.
 # For a list of available versions, see https://github.com/pluginade/pluginade-scripts/tags
-pluginadeversion="0.0.2";
+pluginadeversion="0.0.3-beta-8";
 
 # Change the following variables to your plugin's namespace and textdomain:
 textdomain="pattern-manager";

wp-modules/app/js/src/components/App/index.scss

@@ -140,7 +140,7 @@ html body.toplevel_page_pattern-manager {
 
 			.components-notice__content {
 				margin-right: 0;
-	
+
 				span {
 					margin-left: 2px;
 					text-decoration: none;
@@ -439,4 +439,4 @@ input[type="checkbox"]:checked::before {
 .pm-nav ul li ul li {
 	clear: both;
 	width: 100%;
-}
+}

wp-modules/app/js/src/components/Patterns/PatternGrid.tsx

@@ -31,7 +31,7 @@ export default function PatternGrid( {
 	patterns,
 	siteUrl,
 }: Props ) {
-	useForceRerender( [ patterns ] );
+	useForceRerender( patterns );
 
 	return (
 		<>

wp-modules/app/js/src/hooks/useForceRerender.ts

@@ -1,15 +1,16 @@
 import { useLayoutEffect, useState } from '@wordpress/element';
+import type { Patterns } from '../types';
 
 type WindowDimensions = [ number, number ];
 
 /** Re-render the calling component when the window is resized or dependencies update. */
 export default function useForceRerender< T extends unknown >(
-	dependencies: T[]
+	dependencies: Patterns
 ) {
 	const [ , setForceUpdate ] = useState< T[] | WindowDimensions >();
 
 	useLayoutEffect( () => {
-		setForceUpdate( dependencies );
+		setForceUpdate( [ window.innerWidth, window.innerHeight ] );
 
 		function updateSizeAndRerender() {
 			setForceUpdate( [ window.innerWidth, window.innerHeight ] );
@@ -18,5 +19,5 @@ export default function useForceRerender< T extends unknown >(
 		window.addEventListener( 'resize', updateSizeAndRerender );
 		return () =>
 			window.removeEventListener( 'resize', updateSizeAndRerender );
-	}, [ ...dependencies ] );
+	}, [ dependencies ] );
 }

wp-modules/app/js/src/hooks/useLazyRender.ts

@@ -79,7 +79,7 @@ export default function useLazyRender< T extends Element >(
 		return () => {
 			observer.disconnect();
 		};
-	}, [ lazyContainerRef ] );
+	}, [ lazyContainerRef, observerOptions ] );
 
 	return {
 		lazyIsIntersecting:

wp-modules/editor/js/src/components/Toggles/ModalToggle.tsx

@@ -20,6 +20,9 @@ export default function ModalToggle( {
 		if ( isDisabled && isChecked ) {
 			handleChangeMulti( false, 'blockTypes', blockTypeForModal );
 		}
+		// Disable eslint for exhaustive-deps as handleChangeMulti
+		// is a stable function and does not need to be included in the dependency array.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ isDisabled, isChecked, blockTypeForModal ] );
 
 	return (

wp-modules/editor/js/src/hooks/usePatternData.ts

@@ -154,6 +154,9 @@ export default function usePatternData( postMeta: PostMeta ) {
 		) {
 			updatePostMeta( 'postTypes', filteredPostTypes );
 		}
+		// We can ignore this because updatePostMeta is always created fresh on every render.
+		// NOTE: make sure that other dependencies required are added in the future, as the linter could miss them here.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		postMeta.postTypes,
 		templatePartBlockTypeSelected,

wp-modules/editor/js/src/hooks/useSave.ts

@@ -15,6 +15,9 @@ export default function useSave(
 		if ( isSavingPost ) {
 			updatePatternNames();
 		}
+		// We can ignore this because updatePatternNames is always created fresh on every render.
+		// NOTE: make sure that other dependencies required are added in the future, as the linter could miss them here.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ isSavingPost ] );
 
 	async function updatePatternNames() {

wp-modules/editor/js/src/utils/flatUnorderedEquals.ts

@@ -1,6 +1,6 @@
 /** Check if two flat arrays are loosely equal. */
 export default function flatUnorderedEquals<
-	T extends string | number | boolean
+	T extends string | number | boolean,
 >( arrayA: T[], arrayB: T[] ) {
 	arrayA.sort();
 	arrayB.sort();

wp-modules/editor/js/src/utils/getCustomCategories.ts

@@ -7,7 +7,7 @@ import type { PostMeta } from '../types';
  * Human readable labels are used for the return array.
  */
 export default function getCustomCategories<
-	T extends { label: string; value: string; pm_custom?: boolean }
+	T extends { label: string; value: string; pm_custom?: boolean },
 >( selections: PostMeta[ 'categories' ], categoryOptions: T[] ) {
 	return categoryOptions.reduce(
 		( acc: PostMeta[ 'customCategories' ], category ) => {

wp-modules/editor/js/src/utils/getSelectedOptions.ts

@@ -4,7 +4,7 @@ export default function getSelectedOptions<
 		label: string;
 		name?: string;
 		value?: string;
-	}
+	},
 >( selections: string[], availableOptions: T[], optionKey: keyof T ) {
 	return selections
 		.reduce(