@wordpress/babel-plugin-import-jsx-pragma - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+## 2.1.0 (unreleased)
+
+### New Feature
+
+- Add Fragment import handling ([#15120](https://github.com/WordPress/gutenberg/pull/15120)).
+
 ## 2.0.0 (2019-03-06)
@@ -9,3 +15,3 @@
 
-- Plugin skips now adding import JSX pragma when the scope variable is defined for all JSX elements ([#13809](https://github.com/WordPress/gutenberg/pull/13809)). 
+- Plugin skips now adding import JSX pragma when the scope variable is defined for all JSX elements ([#13809](https://github.com/WordPress/gutenberg/pull/13809)).
 
@@ -12,0 +18,0 @@ ## 1.1.0 (2018-09-05)

index.js

 /**
  * Default options for the plugin.
  *
- * @property {string}  scopeVariable Name of variable required to be in scope
- *                                   for use by the JSX pragma. For the default
- *                                   pragma of React.createElement, the React
- *                                   variable must be within scope.
- * @property {string}  source        The module from which the scope variable
- *                                   is to be imported when missing.
- * @property {boolean} isDefault     Whether the scopeVariable is the default
- *                                   import of the source module.
+ * @property {string}  scopeVariable     Name of variable required to be in scope
+ *                                       for use by the JSX pragma. For the default
+ *                                       pragma of React.createElement, the React
+ *                                       variable must be within scope.
+ * @property {string}  scopeVariableFrag Name of variable required to be in scope
+ *                                       for use by the Fragment pragma.
+ * @property {string}  source            The module from which the scope variable
+ *                                       is to be imported when missing.
+ * @property {boolean} isDefault         Whether the scopeVariable is the default
+ *                                       import of the source module.
  */
 const DEFAULT_OPTIONS = {
 	scopeVariable: 'React',
+	scopeVariableFrag: null,
 	source: 'react',
@@ -42,3 +45,3 @@ isDefault: true,
 		visitor: {
-			JSXElement( path, state ) {
+			JSX( path, state ) {
 				if ( state.hasUndeclaredScopeVariable ) {
@@ -51,28 +54,51 @@ return;
 			},
+			JSXFragment( path, state ) {
+				if ( state.hasUndeclaredScopeVariableFrag ) {
+					return;
+				}
+
+				const { scopeVariableFrag } = getOptions( state );
+				if ( scopeVariableFrag === null ) {
+					return;
+				}
+
+				state.hasUndeclaredScopeVariableFrag = ! path.scope.hasBinding( scopeVariableFrag );
+			},
 			Program: {
 				exit( path, state ) {
-					if ( ! state.hasUndeclaredScopeVariable ) {
-						return;
+					const { scopeVariable, scopeVariableFrag, source, isDefault } = getOptions( state );
+
+					let scopeVariableSpecifier;
+					let scopeVariableFragSpecifier;
+
+					if ( state.hasUndeclaredScopeVariable ) {
+						if ( isDefault ) {
+							scopeVariableSpecifier = t.importDefaultSpecifier( t.identifier( scopeVariable ) );
+						} else {
+							scopeVariableSpecifier = t.importSpecifier(
+								t.identifier( scopeVariable ),
+								t.identifier( scopeVariable )
+							);
+						}
 					}
 
-					const { scopeVariable, source, isDefault } = getOptions( state );
-
-					let specifier;
-					if ( isDefault ) {
-						specifier = t.importDefaultSpecifier(
-							t.identifier( scopeVariable )
+					if ( state.hasUndeclaredScopeVariableFrag ) {
+						scopeVariableFragSpecifier = t.importSpecifier(
+							t.identifier( scopeVariableFrag ),
+							t.identifier( scopeVariableFrag )
 						);
-					} else {
-						specifier = t.importSpecifier(
-							t.identifier( scopeVariable ),
-							t.identifier( scopeVariable )
-						);
 					}
 
-					const importDeclaration = t.importDeclaration(
-						[ specifier ],
-						t.stringLiteral( source )
-					);
+					const importDeclarationSpecifiers = [
+						scopeVariableSpecifier,
+						scopeVariableFragSpecifier,
+					].filter( Boolean );
+					if ( importDeclarationSpecifiers.length ) {
+						const importDeclaration = t.importDeclaration(
+							importDeclarationSpecifiers,
+							t.stringLiteral( source )
+						);
 
-					path.unshiftContainer( 'body', importDeclaration );
+						path.unshiftContainer( 'body', importDeclaration );
+					}
 				},
@@ -79,0 +105,0 @@ },

package.json

 {
 	"name": "@wordpress/babel-plugin-import-jsx-pragma",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"description": "Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.",
@@ -36,3 +36,3 @@ "author": "The WordPress Contributors",
 	},
-	"gitHead": "1e024a20a20369af7bc9720a676fdd3837a3a105"
+	"gitHead": "87f92f8f58a14a58b44beff0919734c546b3b975"
 }

README.md

@@ -33,3 +33,3 @@ # Babel Plugin Import JSX Pragma
 
-_Note:_ `@wordpress/babel-plugin-import-jsx-pragma` is now included in `@wordpress/babel-preset-default` (default preset for WordPress development). If you are using it, you shouldn't need to include this plugin anymore in your Babel config. 
+_Note:_ `@wordpress/babel-plugin-import-jsx-pragma` is included in `@wordpress/babel-preset-default` (default preset for WordPress development) starting from `v4.0.0`. If you are using this preset, you shouldn't include this plugin in your Babel config. 
 
@@ -48,2 +48,3 @@ ## Options
 			scopeVariable: 'createElement',
+			scopeVariableFrag: 'Fragment',
 			source: '@wordpress/element',
@@ -54,2 +55,3 @@ isDefault: false,
 			pragma: 'createElement',
+			pragmaFrag: 'Fragment',
 		} ],
@@ -66,2 +68,9 @@ ],
 
+### `scopeVariableFrag`
+
+_Type:_ String
+
+Name of variable required to be in scope for `<></>` `Fragment` JSX. Named `<Fragment />` elements
+expect Fragment to be in scope and will not add the import.
+
 ### `source`
@@ -77,4 +86,5 @@
 
-Whether the scopeVariable is the default import of the source module.
+Whether the scopeVariable is the default import of the source module. Note that this has no impact
+on `scopeVariableFrag`.
 
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27255

increased by5.68%

Lines of code

94

increased by32.39%

Number of lines in readme file

86

increased by13.16%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes