Make it harder to break Calypso (Automattic#24827)

 - Stop transforming imports from state/selectors
 - Makes import paths explicit
 - Allows IDEs to do their job indicating when an import is or isn't valid
 - Enables auto-completing selector imports
 - Reconnects the disconnection between source code and filesystem
 - Speeds up the build process by doing less

See Automattic#21811 for previous work.

.babelrc.js

@@ -44,16 +44,7 @@ const config = {
 		],
 		'@babel/plugin-proposal-export-default-from',
 		'@babel/transform-runtime',
-		[
-			'transform-imports',
-			{
-				'state/selectors': {
-					transform: 'state/selectors/${member}',
-					kebabCase: true,
-				},
-			},
-		],
-		isCalypsoClient && './inline-imports.js', // inline-imports can only occur after transform-imports
+		isCalypsoClient && './inline-imports.js',
 	] ),
 	env: {
 		test: {

bin/codemods/src/unglobalize-selectors.js

@@ -0,0 +1,28 @@
+/** @format */
+
+import config from './config';
+import { kebabCase } from 'lodash';
+
+export default function transformer( file, api ) {
+	const j = api.jscodeshift;
+
+	return j( file.source )
+		.find( j.ImportDeclaration )
+		.filter( p => p.node.source.value === 'state/selectors' )
+		.forEach( path => {
+			path.node.specifiers
+				.map( s => [ s.imported.name, s.local.name ] )
+				.sort( ( a, b ) => a[ 0 ].localeCompare( b[ 0 ] ) )
+				.map( ( [ name, alias ], i ) => ( {
+					...j.importDeclaration(
+						[ j.importDefaultSpecifier( j.identifier( alias ) ) ],
+						j.stringLiteral( `state/selectors/${ kebabCase( name ) }` )
+					),
+					...( i === 0 ? { comments: path.node.comments } : {} ),
+				} ) )
+				.forEach( i => j( path ).insertBefore( i ) );
+
+			j( path ).remove();
+		} )
+		.toSource( config.recastOptions );
+}

client/account-recovery/account-recovery-root/index.jsx

@@ -25,13 +25,11 @@ import ResetPasswordConfirmForm from 'account-recovery/reset-password-confirm-fo
 import ResetPasswordSucceeded from 'account-recovery/reset-password-succeeded';
 import ResetCodeValidation from 'account-recovery/reset-code-validation';
 import { ACCOUNT_RECOVERY_STEPS as STEPS } from 'account-recovery/constants';
-import {
-	isAccountRecoveryResetOptionsReady,
-	isAccountRecoveryUserDataReady,
-	isAccountRecoveryResetPasswordSucceeded,
-	getAccountRecoveryResetSelectedMethod,
-	getAccountRecoveryValidationKey,
-} from 'state/selectors';
+import getAccountRecoveryResetSelectedMethod from 'state/selectors/get-account-recovery-reset-selected-method';
+import getAccountRecoveryValidationKey from 'state/selectors/get-account-recovery-validation-key';
+import isAccountRecoveryResetOptionsReady from 'state/selectors/is-account-recovery-reset-options-ready';
+import isAccountRecoveryResetPasswordSucceeded from 'state/selectors/is-account-recovery-reset-password-succeeded';
+import isAccountRecoveryUserDataReady from 'state/selectors/is-account-recovery-user-data-ready';
 
 const getPageInfo = ( translate, step ) => {
 	const concatHeadTitle = ( parentTitle, childTitle ) => parentTitle + ' ‹ ' + childTitle;

client/account-recovery/forgot-username-form/index.jsx

@@ -18,10 +18,8 @@ import FormLabel from 'components/forms/form-label';
 import FormInput from 'components/forms/form-text-input';
 import { fetchResetOptionsByNameAndUrl } from 'state/account-recovery/reset/actions';
 
-import {
-	isRequestingAccountRecoveryResetOptions,
-	getAccountRecoveryResetOptionsError,
-} from 'state/selectors';
+import getAccountRecoveryResetOptionsError from 'state/selectors/get-account-recovery-reset-options-error';
+import isRequestingAccountRecoveryResetOptions from 'state/selectors/is-requesting-account-recovery-reset-options';
 
 export class ForgotUsernameFormComponent extends Component {
 	constructor( props ) {

client/account-recovery/lost-password-form/index.jsx

@@ -19,10 +19,8 @@ import FormLabel from 'components/forms/form-label';
 import FormInput from 'components/forms/form-text-input';
 import { fetchResetOptionsByLogin } from 'state/account-recovery/reset/actions';
 
-import {
-	isRequestingAccountRecoveryResetOptions,
-	getAccountRecoveryResetOptionsError,
-} from 'state/selectors';
+import getAccountRecoveryResetOptionsError from 'state/selectors/get-account-recovery-reset-options-error';
+import isRequestingAccountRecoveryResetOptions from 'state/selectors/is-requesting-account-recovery-reset-options';
 
 export class LostPasswordFormComponent extends Component {
 	constructor( props ) {

client/account-recovery/reset-code-validation/index.js

@@ -21,10 +21,8 @@ import {
 	validateRequestError,
 } from 'state/account-recovery/reset/actions';
 
-import {
-	getAccountRecoveryValidationError,
-	getAccountRecoveryValidationKey,
-} from 'state/selectors';
+import getAccountRecoveryValidationError from 'state/selectors/get-account-recovery-validation-error';
+import getAccountRecoveryValidationKey from 'state/selectors/get-account-recovery-validation-key';
 
 class ResetPasswordEmailValidation extends Component {
 	getQueryString = () => {

client/account-recovery/reset-password-confirm-form/index.jsx

@@ -18,13 +18,11 @@ import FormPasswordInput from 'components/forms/form-password-input';
 import FormLabel from 'components/forms/form-label';
 import FormButton from 'components/forms/form-button';
 import { STRONG_PASSWORD } from 'lib/url/support';
-import {
-	getAccountRecoveryResetUserData,
-	getAccountRecoveryResetSelectedMethod,
-	getAccountRecoveryValidationKey,
-	getAccountRecoveryResetPasswordError,
-	isRequestingResetPassword,
-} from 'state/selectors';
+import getAccountRecoveryResetPasswordError from 'state/selectors/get-account-recovery-reset-password-error';
+import getAccountRecoveryResetSelectedMethod from 'state/selectors/get-account-recovery-reset-selected-method';
+import getAccountRecoveryResetUserData from 'state/selectors/get-account-recovery-reset-user-data';
+import getAccountRecoveryValidationKey from 'state/selectors/get-account-recovery-validation-key';
+import isRequestingResetPassword from 'state/selectors/is-requesting-reset-password';
 import { requestResetPassword } from 'state/account-recovery/reset/actions';
 
 class ResetPasswordConfirmForm extends Component {

client/account-recovery/reset-password-form/index.jsx

@@ -20,12 +20,10 @@ import ResetOptionSet from './reset-option-set';
 import ErrorMessage from 'account-recovery/components/account-recovery-error-message';
 import { setResetMethod, requestReset } from 'state/account-recovery/reset/actions';
 
-import {
-	getAccountRecoveryResetUserData,
-	getAccountRecoveryResetOptions,
-	getAccountRecoveryResetRequestError,
-	isRequestingAccountRecoveryReset,
-} from 'state/selectors';
+import getAccountRecoveryResetOptions from 'state/selectors/get-account-recovery-reset-options';
+import getAccountRecoveryResetRequestError from 'state/selectors/get-account-recovery-reset-request-error';
+import getAccountRecoveryResetUserData from 'state/selectors/get-account-recovery-reset-user-data';
+import isRequestingAccountRecoveryReset from 'state/selectors/is-requesting-account-recovery-reset';
 
 export class ResetPasswordFormComponent extends Component {
 	static propTypes = {

client/account-recovery/reset-password-sms-form/index.jsx

@@ -16,12 +16,10 @@ import Card from 'components/card';
 import FormTextInput from 'components/forms/form-text-input';
 import FormButton from 'components/forms/form-button';
 import ErrorMessage from 'account-recovery/components/account-recovery-error-message';
-import {
-	getAccountRecoveryResetUserData,
-	getAccountRecoveryResetSelectedMethod,
-	getAccountRecoveryValidationError,
-	isValidatingAccountRecoveryKey,
-} from 'state/selectors';
+import getAccountRecoveryResetSelectedMethod from 'state/selectors/get-account-recovery-reset-selected-method';
+import getAccountRecoveryResetUserData from 'state/selectors/get-account-recovery-reset-user-data';
+import getAccountRecoveryValidationError from 'state/selectors/get-account-recovery-validation-error';
+import isValidatingAccountRecoveryKey from 'state/selectors/is-validating-account-recovery-key';
 
 import {
 	setValidationKey,

client/blocks/all-sites/index.jsx

@@ -16,7 +16,7 @@ import classNames from 'classnames';
  */
 import AllSitesIcon from 'my-sites/all-sites-icon';
 import Count from 'components/count';
-import { getSites } from 'state/selectors';
+import getSites from 'state/selectors/get-sites';
 import { getCurrentUserVisibleSiteCount } from 'state/current-user/selectors';
 
 class AllSites extends Component {

client/blocks/app-banner/index.jsx

@@ -18,7 +18,7 @@ import Button from 'components/button';
 import Card from 'components/card';
 import { getSectionName } from 'state/ui/selectors';
 import { getPreference, isFetchingPreferences } from 'state/preferences/selectors';
-import { isNotificationsOpen } from 'state/selectors';
+import isNotificationsOpen from 'state/selectors/is-notifications-open';
 import {
 	bumpStat,
 	composeAnalytics,

client/blocks/blog-stickers/index.jsx

@@ -13,7 +13,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import QueryReaderTeams from 'components/data/query-reader-teams';
 import QueryBlogStickers from 'components/data/query-blog-stickers';
-import { getReaderTeams, getBlogStickers } from 'state/selectors';
+import getBlogStickers from 'state/selectors/get-blog-stickers';
+import getReaderTeams from 'state/selectors/get-reader-teams';
 import BlogStickersList from 'blocks/blog-stickers/list';
 import InfoPopover from 'components/info-popover';
 import { isAutomatticTeamMember } from 'reader/lib/teams';

client/blocks/calendar-popover/index.jsx

@@ -12,7 +12,9 @@ import { noop, pick } from 'lodash';
 /**
  * Internal dependencies
  */
-import { getSiteGmtOffset, getSiteTimezoneValue } from 'state/selectors';
+import getSiteGmtOffset from 'state/selectors/get-site-gmt-offset';
+
+import getSiteTimezoneValue from 'state/selectors/get-site-timezone-value';
 import Popover from 'components/popover';
 import PostSchedule from 'components/post-schedule';
 

client/blocks/comments/post-comment-list.jsx

@@ -11,7 +11,7 @@ import { get, size, takeRight, delay } from 'lodash';
 /**
  * Internal dependencies
  */
-import { getActiveReplyCommentId } from 'state/selectors';
+import getActiveReplyCommentId from 'state/selectors/get-active-reply-comment-id';
 import {
 	getPostCommentsTree,
 	commentsFetchingStatus,

client/blocks/conversation-follow-button/index.jsx

@@ -14,7 +14,7 @@ import { connect } from 'react-redux';
  * Internal dependencies
  */
 import ConversationFollowButton from './button';
-import { isFollowingReaderConversation } from 'state/selectors';
+import isFollowingReaderConversation from 'state/selectors/is-following-reader-conversation';
 import { followConversation, muteConversation } from 'state/reader/conversations/actions';
 import { getTracksPropertiesForPost } from 'reader/stats';
 import { recordTracksEvent } from 'state/analytics/actions';

client/blocks/conversations/list.jsx

@@ -10,7 +10,7 @@ import { map, zipObject, fill, size, filter, get, compact, partition, min, noop
 /***
  * Internal dependencies
  */
-import { getActiveReplyCommentId } from 'state/selectors';
+import getActiveReplyCommentId from 'state/selectors/get-active-reply-comment-id';
 import PostComment from 'blocks/comments/post-comment';
 import { POST_COMMENT_DISPLAY_TYPES } from 'state/comments/constants';
 import {

client/blocks/daily-post-button/index.jsx

@@ -21,7 +21,7 @@ import Button from 'components/button';
 import { markPostSeen } from 'state/reader/posts/actions';
 import { recordGaEvent, recordAction, recordTrackForPost } from 'reader/stats';
 import { getDailyPostType } from './helper';
-import { getPrimarySiteId } from 'state/selectors';
+import getPrimarySiteId from 'state/selectors/get-primary-site-id';
 import { getSiteSlug } from 'state/sites/selectors';
 import { getCurrentUser } from 'state/current-user/selectors';
 

client/blocks/disconnect-jetpack/index.jsx

@@ -28,7 +28,7 @@ import { setAllSitesSelected, navigate } from 'state/ui/actions';
 import { successNotice, errorNotice, infoNotice, removeNotice } from 'state/notices/actions';
 import { getPlanClass } from 'lib/plans/constants';
 import { getSiteSlug, getSiteTitle, getSitePlanSlug } from 'state/sites/selectors';
-import { getRewindState } from 'state/selectors';
+import getRewindState from 'state/selectors/get-rewind-state';
 
 class DisconnectJetpack extends PureComponent {
 	static propTypes = {

client/blocks/domain-to-plan-nudge/index.jsx

@@ -26,7 +26,7 @@ import {
 } from 'state/sites/plans/selectors';
 import QuerySitePlans from 'components/data/query-site-plans';
 import formatCurrency from 'lib/format-currency';
-import { isEligibleForDomainToPaidPlanUpsell } from 'state/selectors';
+import isEligibleForDomainToPaidPlanUpsell from 'state/selectors/is-eligible-for-domain-to-paid-plan-upsell';
 
 class DomainToPlanNudge extends Component {
 	static propTypes = {

client/blocks/follow-button/index.jsx

@@ -13,7 +13,7 @@ import { connect } from 'react-redux';
  * Internal Dependencies
  */
 import FollowButton from './button';
-import { isFollowing } from 'state/selectors';
+import isFollowing from 'state/selectors/is-following';
 import { follow, unfollow } from 'state/reader/follows/actions';
 
 class FollowButtonContainer extends Component {

client/blocks/google-my-business-stats-nudge/index.js

@@ -17,10 +17,8 @@ import Card from 'components/card';
 import { recordTracksEvent } from 'state/analytics/actions';
 import SectionHeader from 'components/section-header';
 import QueryPreferences from 'components/data/query-preferences';
-import {
-	isGoogleMyBusinessStatsNudgeDismissed,
-	getGoogleMyBusinessStatsNudgeDismissCount,
-} from 'state/selectors';
+import getGoogleMyBusinessStatsNudgeDismissCount from 'state/selectors/get-google-my-business-stats-nudge-dismiss-count';
+import isGoogleMyBusinessStatsNudgeDismissed from 'state/selectors/is-google-my-business-stats-nudge-dismissed';
 import { dismissNudge } from './actions';
 
 class GoogleMyBusinessStatsNudge extends Component {

client/blocks/image-editor/image-editor-canvas.jsx

@@ -26,7 +26,7 @@ import {
 	setImageEditorCropBounds,
 	setImageEditorImageHasLoaded,
 } from 'state/ui/editor/image-editor/actions';
-import { getImageEditorIsGreaterThanMinimumDimensions } from 'state/selectors';
+import getImageEditorIsGreaterThanMinimumDimensions from 'state/selectors/get-image-editor-is-greater-than-minimum-dimensions';
 
 export class ImageEditorCanvas extends Component {
 	static propTypes = {

client/blocks/image-editor/image-editor-crop.jsx

@@ -24,7 +24,7 @@ import {
 import { AspectRatios } from 'state/ui/editor/image-editor/constants';
 import { imageEditorCrop, imageEditorComputedCrop } from 'state/ui/editor/image-editor/actions';
 import { defaultCrop } from 'state/ui/editor/image-editor/reducer';
-import { getImageEditorOriginalAspectRatio } from 'state/selectors';
+import getImageEditorOriginalAspectRatio from 'state/selectors/get-image-editor-original-aspect-ratio';
 
 class ImageEditorCrop extends Component {
 	static propTypes = {

client/blocks/image-editor/image-editor-toolbar.jsx

@@ -24,7 +24,7 @@ import {
 	imageEditorFlip,
 	setImageEditorAspectRatio,
 } from 'state/ui/editor/image-editor/actions';
-import { getImageEditorIsGreaterThanMinimumDimensions } from 'state/selectors';
+import getImageEditorIsGreaterThanMinimumDimensions from 'state/selectors/get-image-editor-is-greater-than-minimum-dimensions';
 
 export class ImageEditorToolbar extends Component {
 	static propTypes = {

client/blocks/inline-help/inline-help-contact-view.jsx

@@ -15,7 +15,7 @@ import getInlineHelpSupportVariation, {
 	SUPPORT_FORUM,
 } from 'state/selectors/get-inline-help-support-variation';
 import { getHelpSelectedSite } from 'state/help/selectors';
-import { isSupportVariationDetermined } from 'state/selectors';
+import isSupportVariationDetermined from 'state/selectors/is-support-variation-determined';
 
 const InlineHelpContactView = ( {
 	/* eslint-disable no-unused-vars, no-shadow */

client/blocks/inline-help/inline-help-query-support-types.jsx

@@ -21,7 +21,7 @@ import {
 	getTicketSupportRequestError,
 } from 'state/help/ticket/selectors';
 import isHappychatUserEligible from 'state/happychat/selectors/is-happychat-user-eligible';
-import { isDirectlyUninitialized } from 'state/selectors';
+import isDirectlyUninitialized from 'state/selectors/is-directly-uninitialized';
 
 class QueryInlineHelpSupportTypes extends Component {
 	componentDidMount() {

client/blocks/payment-methods/index.jsx

@@ -13,7 +13,7 @@ import Gridicon from 'gridicons';
  * Internal dependencies
  */
 import PaymentLogo from 'components/payment-logo';
-import { getCurrentUserPaymentMethods } from 'state/selectors';
+import getCurrentUserPaymentMethods from 'state/selectors/get-current-user-payment-methods';
 
 class PaymentMethods extends Component {
 	renderPaymentMethods = methods => {

client/blocks/post-item/index.jsx

@@ -18,7 +18,8 @@ import { getEditorPath } from 'state/ui/editor/selectors';
 import { getSelectedSiteId } from 'state/ui/selectors';
 import { getNormalizedPost } from 'state/posts/selectors';
 import { isSingleUserSite } from 'state/sites/selectors';
-import { areAllSitesSingleUser, canCurrentUserEditPost } from 'state/selectors';
+import areAllSitesSingleUser from 'state/selectors/are-all-sites-single-user';
+import canCurrentUserEditPost from 'state/selectors/can-current-user-edit-post';
 import {
 	isSharePanelOpen,
 	isMultiSelectEnabled,

client/blocks/post-likes/index.jsx

@@ -13,7 +13,8 @@ import { localize } from 'i18n-calypso';
  */
 import Gravatar from 'components/gravatar';
 import QueryPostLikes from 'components/data/query-post-likes';
-import { getPostLikes, countPostLikes } from 'state/selectors';
+import countPostLikes from 'state/selectors/count-post-likes';
+import getPostLikes from 'state/selectors/get-post-likes';
 import { recordGoogleEvent } from 'state/analytics/actions';
 
 class PostLikes extends React.PureComponent {

client/blocks/post-likes/popover.jsx

@@ -13,7 +13,7 @@ import classnames from 'classnames';
  */
 import Popover from 'components/popover';
 import PostLikes from './index';
-import { getPostLikes } from 'state/selectors';
+import getPostLikes from 'state/selectors/get-post-likes';
 
 function PostLikesPopover( props ) {
 	const {

client/blocks/post-share/index.jsx

@@ -21,14 +21,12 @@ import QuerySitePlans from 'components/data/query-site-plans';
 import Button from 'components/button';
 import ButtonGroup from 'components/button-group';
 import NoticeAction from 'components/notice/notice-action';
-import {
-	getPostSharePublishedActions,
-	getPostShareScheduledActions,
-	getScheduledPublicizeShareActionTime,
-	isPublicizeEnabled,
-	isSchedulingPublicizeShareAction,
-	isSchedulingPublicizeShareActionError,
-} from 'state/selectors';
+import getPostSharePublishedActions from 'state/selectors/get-post-share-published-actions';
+import getPostShareScheduledActions from 'state/selectors/get-post-share-scheduled-actions';
+import getScheduledPublicizeShareActionTime from 'state/selectors/get-scheduled-publicize-share-action-time';
+import isPublicizeEnabled from 'state/selectors/is-publicize-enabled';
+import isSchedulingPublicizeShareAction from 'state/selectors/is-scheduling-publicize-share-action';
+import isSchedulingPublicizeShareActionError from 'state/selectors/is-scheduling-publicize-share-action-error';
 import { getSiteSlug, getSitePlanSlug, isJetpackSite } from 'state/sites/selectors';
 import { getCurrentUserId, getCurrentUserCurrencyCode } from 'state/current-user/selectors';
 

client/blocks/post-share/publicize-actions-list.jsx

@@ -13,7 +13,9 @@ import Gridicon from 'gridicons';
 /**
  * Internal dependencies
  */
-import { getPostShareScheduledActions, getPostSharePublishedActions } from 'state/selectors';
+import getPostSharePublishedActions from 'state/selectors/get-post-share-published-actions';
+
+import getPostShareScheduledActions from 'state/selectors/get-post-share-scheduled-actions';
 import QuerySharePostActions from 'components/data/query-share-post-actions/index.jsx';
 import SocialLogo from 'social-logos';
 import EllipsisMenu from 'components/ellipsis-menu';

client/blocks/privacy-policy-banner/index.jsx

@@ -19,7 +19,8 @@ import config from 'config';
 import PrivacyPolicyDialog from './privacy-policy-dialog';
 import QueryPrivacyPolicy from 'components/data/query-privacy-policy';
 
-import { getPrivacyPolicyByEntity, getCurrentUserRegisterDate } from 'state/selectors';
+import getCurrentUserRegisterDate from 'state/selectors/get-current-user-register-date';
+import getPrivacyPolicyByEntity from 'state/selectors/get-privacy-policy-by-entity';
 
 import { AUTOMATTIC_ENTITY, PRIVACY_POLICY_PREFERENCE } from './constants';