Adds support for importing calypso package in Typescript projects

[scinos]

Background

See #44602

Changes

Allows Typescript projects inside ./client to import from calypso/... package.

Test

1. Checkout this branch and run yarn to install deps.
2. Change the severity of wpcalypso/no-package-relative-imports from off to warn in ./.eslintrc.js
3. Auto-fix the above rule by running ./node_modules/.bin/eslint-nibble --ext .js,.jsx,.ts,.tsx --rule wpcalypso/no-package-relative-imports client/landing/gutenboarding
4. Do a strict typecheck by running yarn run tsc --project client/landing/gutenboarding

Step (4) should fail in master, but work in this branch.

patch applying steps 2 + 3

diff --git a/.eslintrc.js b/.eslintrc.js
index 39a9a71132..8e069294a1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -223,7 +223,7 @@ module.exports = {
 		],
 		// Disabled for now until we finish the migration
 		'wpcalypso/no-package-relative-imports': [
-			'off',
+			'warn',
 			{
 				mappings: [
 					{
diff --git a/client/landing/gutenboarding/components/plans-button/index.tsx b/client/landing/gutenboarding/components/plans-button/index.tsx
index df34b1d019..aa5a1e68b6 100644
--- a/client/landing/gutenboarding/components/plans-button/index.tsx
+++ b/client/landing/gutenboarding/components/plans-button/index.tsx
@@ -10,7 +10,7 @@ import { useI18n } from '@automattic/react-i18n';
 /**
  * Internal dependencies
  */
-import JetpackLogo from 'components/jetpack-logo'; // @TODO: extract to @automattic package
+import JetpackLogo from 'calypso/components/jetpack-logo'; // @TODO: extract to @automattic package
 import { useSelectedPlan } from '../../hooks/use-selected-plan';
 import { usePath, Step } from '../../path';
 import Link from '../link';
diff --git a/client/landing/gutenboarding/devtools.ts b/client/landing/gutenboarding/devtools.ts
index 44bb160b79..c016970c01 100644
--- a/client/landing/gutenboarding/devtools.ts
+++ b/client/landing/gutenboarding/devtools.ts
@@ -16,7 +16,7 @@ export const setupWpDataDebug = () => {
 			if ( ! window.wp.data ) {
 				window.wp.data = require( '@wordpress/data' );
 
-				const config = require( 'config' ).default;
+				const config = require( 'calypso/config' ).default;
 				const clientCreds = {
 					client_id: config( 'wpcom_signup_id' ),
 					client_secret: config( 'wpcom_signup_key' ),
diff --git a/client/landing/gutenboarding/hooks/use-step-navigation.ts b/client/landing/gutenboarding/hooks/use-step-navigation.ts
index 698e361f56..de91da23b8 100644
--- a/client/landing/gutenboarding/hooks/use-step-navigation.ts
+++ b/client/landing/gutenboarding/hooks/use-step-navigation.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEnabled } from 'config';
+import { isEnabled } from 'calypso/config';
 import { useHistory } from 'react-router-dom';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useI18n } from '@automattic/react-i18n';
diff --git a/client/landing/gutenboarding/hooks/use-typer.ts b/client/landing/gutenboarding/hooks/use-typer.ts
index 273d3b2641..7431d41a52 100644
--- a/client/landing/gutenboarding/hooks/use-typer.ts
+++ b/client/landing/gutenboarding/hooks/use-typer.ts
@@ -6,7 +6,7 @@ import { useState } from 'react';
 /**
  * Internal dependencies
  */
-import { useInterval } from 'lib/interval/use-interval';
+import { useInterval } from 'calypso/lib/interval/use-interval';
 
 type TyperMode = 'TYPING' | 'DELETING';
 
diff --git a/client/landing/gutenboarding/index.tsx b/client/landing/gutenboarding/index.tsx
index 5ec9e91293..69a5aaadcd 100644
--- a/client/landing/gutenboarding/index.tsx
+++ b/client/landing/gutenboarding/index.tsx
@@ -17,20 +17,20 @@ import { xorWith, isEqual, isEmpty, shuffle } from 'lodash';
 import Gutenboard from './gutenboard';
 import { LocaleContext } from './components/locale-context';
 import { setupWpDataDebug } from './devtools';
-import accessibleFocus from 'lib/accessible-focus';
+import accessibleFocus from 'calypso/lib/accessible-focus';
 import availableDesigns from './available-designs';
 import { Step, path } from './path';
 import { SITE_STORE } from './stores/site';
 import { STORE_KEY as ONBOARD_STORE } from './stores/onboard';
-import { addHotJarScript } from 'lib/analytics/hotjar';
+import { addHotJarScript } from 'calypso/lib/analytics/hotjar';
 import { WindowLocaleEffectManager } from './components/window-locale-effect-manager';
 import type { Design } from './stores/onboard/types';
 
 /**
  * Style dependencies
  */
-import 'assets/stylesheets/gutenboarding.scss';
-import 'components/environment-badge/style.scss';
+import 'calypso/assets/stylesheets/gutenboarding.scss';
+import 'calypso/components/environment-badge/style.scss';
 
 // TODO: remove when all needed core types are available
 /*#__PURE__*/ import './gutenberg-types-patch';
diff --git a/client/landing/gutenboarding/onboarding-block/acquire-intent/index.tsx b/client/landing/gutenboarding/onboarding-block/acquire-intent/index.tsx
index dd0e64757a..308dcb9a31 100644
--- a/client/landing/gutenboarding/onboarding-block/acquire-intent/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/acquire-intent/index.tsx
@@ -6,7 +6,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useViewportMatch } from '@wordpress/compose';
 import { useI18n } from '@automattic/react-i18n';
 import { SkipButton, NextButton } from '@automattic/onboarding';
-import config from 'config';
+import config from 'calypso/config';
 
 /**
  * Internal dependencies
diff --git a/client/landing/gutenboarding/onboarding-block/acquire-intent/site-title.tsx b/client/landing/gutenboarding/onboarding-block/acquire-intent/site-title.tsx
index a9e77eb1b9..222cdbdf86 100644
--- a/client/landing/gutenboarding/onboarding-block/acquire-intent/site-title.tsx
+++ b/client/landing/gutenboarding/onboarding-block/acquire-intent/site-title.tsx
@@ -7,7 +7,7 @@ import { useI18n } from '@automattic/react-i18n';
 import { Icon } from '@wordpress/icons';
 import classnames from 'classnames';
 import { useViewportMatch } from '@wordpress/compose';
-import config from 'config';
+import config from 'calypso/config';
 
 /**
  * Internal dependencies
diff --git a/client/landing/gutenboarding/onboarding-block/create-site-error/index.tsx b/client/landing/gutenboarding/onboarding-block/create-site-error/index.tsx
index ff3f9f66f6..3ffd6cf281 100644
--- a/client/landing/gutenboarding/onboarding-block/create-site-error/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/create-site-error/index.tsx
@@ -11,7 +11,7 @@ import { useI18n } from '@automattic/react-i18n';
  * Internal dependencies
  */
 import Link from '../../components/link';
-import { localizeUrl } from 'lib/i18n-utils';
+import { localizeUrl } from 'calypso/lib/i18n-utils';
 import { SITE_STORE } from '../../stores/site';
 import { Title, SubTitle } from '@automattic/onboarding';
 
diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
index 4a17420962..a13664e858 100644
--- a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
@@ -16,7 +16,7 @@ import { useTrackStep } from '../../hooks/use-track-step';
 import useStepNavigation from '../../hooks/use-step-navigation';
 import Badge from '../../components/badge';
 import { getDesignImageUrl } from '../../available-designs';
-import JetpackLogo from 'components/jetpack-logo'; // @TODO: extract to @automattic package
+import JetpackLogo from 'calypso/components/jetpack-logo'; // @TODO: extract to @automattic package
 import type { Design } from '../../stores/onboard/types';
 
 /**
diff --git a/client/landing/gutenboarding/onboarding-block/edit.tsx b/client/landing/gutenboarding/onboarding-block/edit.tsx
index f064470eb3..646acf305e 100644
--- a/client/landing/gutenboarding/onboarding-block/edit.tsx
+++ b/client/landing/gutenboarding/onboarding-block/edit.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { Redirect, Switch, Route, useLocation } from 'react-router-dom';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { isEnabled } from 'config';
+import { isEnabled } from 'calypso/config';
 
 /**
  * Internal dependencies
diff --git a/client/landing/gutenboarding/onboarding-block/plans/index.tsx b/client/landing/gutenboarding/onboarding-block/plans/index.tsx
index 48b1dc4489..91e3205af3 100644
--- a/client/landing/gutenboarding/onboarding-block/plans/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/plans/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import * as React from 'react';
-import { isEnabled } from 'config';
+import { isEnabled } from 'calypso/config';
 import { useHistory } from 'react-router-dom';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useI18n } from '@automattic/react-i18n';
diff --git a/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx b/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx
index 04a8ee21fb..0ed64ece4c 100644
--- a/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx
+++ b/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx
@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { STORE_KEY } from '../../stores/onboard';
 import { useLangRouteParam } from '../../path';
-import { isEnabled } from 'config';
+import { isEnabled } from 'calypso/config';
 import { fontPairings } from '../../constants';
 import type { Viewport } from './types';
 
diff --git a/client/landing/gutenboarding/stores/domain-suggestions/index.ts b/client/landing/gutenboarding/stores/domain-suggestions/index.ts
index 3a1ed72f13..35fe95295f 100644
--- a/client/landing/gutenboarding/stores/domain-suggestions/index.ts
+++ b/client/landing/gutenboarding/stores/domain-suggestions/index.ts
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { DomainSuggestions } from '@automattic/data-stores';
-import { getSuggestionsVendor } from 'lib/domains/suggestions';
+import { getSuggestionsVendor } from 'calypso/lib/domains/suggestions';
 
 export const DOMAIN_SUGGESTIONS_STORE = DomainSuggestions.register( {
 	/* Returns an ID for the domain suggestions vendor. Passing `{ isSignup: true }` to getSuggestionsVendor returns the signup variant.*/
diff --git a/client/landing/gutenboarding/stores/onboard/actions.ts b/client/landing/gutenboarding/stores/onboard/actions.ts
index d87eec05f3..1de6e890a3 100644
--- a/client/landing/gutenboarding/stores/onboard/actions.ts
+++ b/client/landing/gutenboarding/stores/onboard/actions.ts
@@ -4,7 +4,7 @@
 import type { DomainSuggestions, Site, VerticalsTemplates, Plans } from '@automattic/data-stores';
 import { dispatch, select } from '@wordpress/data-controls';
 import guessTimezone from '../../../../lib/i18n-utils/guess-timezone';
-import { getLanguage } from 'lib/i18n-utils';
+import { getLanguage } from 'calypso/lib/i18n-utils';
 
 /**
  * Internal dependencies
@@ -16,7 +16,7 @@ import { PLANS_STORE } from '../plans';
 import type { State } from '.';
 import type { FontPair } from '../../constants';
 import type { FeatureId } from '../../onboarding-block/features/data';
-import { isEnabled } from 'config';
+import { isEnabled } from 'calypso/config';
 
 type CreateSiteParams = Site.CreateSiteParams;
 type DomainSuggestion = DomainSuggestions.DomainSuggestion;

[matticbot]

Test live: https://calypso.live/?branch=fix/tsc-support-for-calypso-package

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[sirreal]

Looks good, tests well 👍