Externalize and bump framer motion to 4.1.17

WordPress · Aug 3, 2021 · b20bceb · b20bceb
1 parent e6cc4d7
commit b20bceb
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 10 deletions.
diff --git a/docs/contributors/code/scripts.md b/docs/contributors/code/scripts.md
@@ -45,12 +45,13 @@ The editor includes a number of packages to enable various pieces of functionali
 
 The editor also uses some popular third-party packages and scripts. Plugin developers can use these scripts as well without bundling them in their code (and increasing file sizes).
 
-| Script Name                                          | Handle    | Description                                                                                           |
-| ---------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| [React](https://reactjs.org)                         | react     | React is a JavaScript library for building user interfaces                                            |
-| [React Dom](https://reactjs.org/docs/react-dom.html) | react-dom | Serves as the entry point to the DOM and server renderers for React, intended to be paired with React |
-| [Moment](https://momentjs.com/)                      | moment    | Parse, validate, manipulate, and display dates and times in JavaScript                                |
-| [Lodash](https://lodash.com)                         | lodash    | Lodash is a JavaScript library which provides utility functions for common programming tasks          |
+| Script Name                                          | Handle        | Description                                                                                           |
+| ---------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------- |
+| [React](https://reactjs.org)                         | react         | React is a JavaScript library for building user interfaces                                            |
+| [React Dom](https://reactjs.org/docs/react-dom.html) | react-dom     | Serves as the entry point to the DOM and server renderers for React, intended to be paired with React |
+| [Moment](https://momentjs.com/)                      | moment        | Parse, validate, manipulate, and display dates and times in JavaScript                                |
+| [Lodash](https://lodash.com)                         | lodash        | Lodash is a JavaScript library which provides utility functions for common programming tasks          |
+| [Framer Motion](https://www.framer.com/docs/)        | framer-motion | Use Framer Motion to create animated, interactive interfaces                                          |
 
 ## Polyfill Scripts
 

diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -235,6 +235,18 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 		array(),
 		'2.3.5'
 	);
+
+	/*
+	 * This script registration and the corresponding function should be removed
+	 * removed once the plugin is updated to support WordPress 5.9.0 and newer.
+	 */
+	gutenberg_register_vendor_script(
+		$scripts,
+		'framer-motion',
+		'https://unpkg.com/[email protected]/dist/framer-motion.js',
+		array( 'react' ),
+		'4.1.17'
+	);
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -52,7 +52,7 @@
 		"classnames": "^2.3.1",
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
-		"framer-motion": "^4.1.3",
+		"framer-motion": "^4.1.17",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
 		"lodash": "^4.17.21",

diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -17,6 +17,9 @@ function defaultRequestToExternal( request ) {
 		case 'moment':
 			return request;
 
+		case 'framer-motion':
+			return 'FramerMotion';
+
 		case '@babel/runtime/regenerator':
 			return 'regeneratorRuntime';
 

diff --git a/packages/dependency-extraction-webpack-plugin/test/util.js b/packages/dependency-extraction-webpack-plugin/test/util.js
@@ -47,6 +47,12 @@ describe( 'defaultRequestToExternal', () => {
 			defaultRequestToExternal( '@wordpress/some-future-package' )
 		).toEqual( [ 'wp', 'someFuturePackage' ] );
 	} );
+
+	test( 'Handles framer-motion request', () => {
+		expect( defaultRequestToExternal( 'framer-motion' ) ).toBe(
+			'FramerMotion'
+		);
+	} );
 } );
 
 describe( 'defaultRequestToHandle', () => {

diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
@@ -53,7 +53,7 @@
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/warning": "file:../warning",
 		"classnames": "^2.3.1",
-		"framer-motion": "^4.1.3",
+		"framer-motion": "^4.1.17",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"rememo": "^3.0.0",