fix(types): export all types as "type" to avoid exporting in .js (#4837)

* fix(types): export all types as "type" to avoid exporting in .js

This issue is caused by `export * from './types'` added in #4834, which causes everything in /types to be exposed, but unfortunately because `export from` in the InstantSearch file mixed a type and a value, and thus exported it.

This is done by enabling [consistent-type-imports](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/consistent-type-imports.md) in eslint to make sure it's correct in all cases

references:
- code that throws: https://unpkg.com/browse/[email protected]/es/types/instantsearch.js
- vite reproduction: https://github.com/eunjae-lee/vue-instantsearch-with-vue3-and-vite

* fix ts

* chore(ts): also enable `isolatedModules`

this catches when you export something that's a type as a regular export, further avoiding the issue

.eslintrc.js

@@ -51,6 +51,7 @@ module.exports = {
         },
       },
     ],
+    '@typescript-eslint/consistent-type-imports': 'error',
   },
   overrides: [
     {

examples/e-commerce/src/routing.ts

@@ -1,9 +1,7 @@
 /* eslint complexity: off */
 
-import {
-  history as historyRouter,
-  UiState,
-} from 'instantsearch.js/es/lib/routers';
+import type { UiState } from 'instantsearch.js/es/lib/routers';
+import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
 import {
   getFallbackHitsPerPageRoutingValue,
   getFallbackSortByRoutingValue,

scripts/jest/matchers/__tests__/toWarnDev-test.ts

@@ -1,5 +1,9 @@
 /* eslint-disable no-console */
 
+// export is needed for TS isolatedModules
+// eslint-disable-next-line jest/no-export
+export {};
+
 describe('toWarnDev', () => {
   describe('usage', () => {
     test('fails with incorrect type of message', () => {

src/components/Answers/Answers.tsx

@@ -3,11 +3,11 @@
 import { h } from 'preact';
 import cx from 'classnames';
 import Template from '../Template/Template';
-import {
+import type {
   AnswersCSSClasses,
   AnswersTemplates,
 } from '../../widgets/answers/answers';
-import { ComponentCSSClasses, Hits } from '../../types';
+import type { ComponentCSSClasses, Hits } from '../../types';
 
 export type AnswersComponentCSSClasses = ComponentCSSClasses<AnswersCSSClasses>;
 

src/components/Answers/__tests__/Answers-test.tsx

@@ -2,7 +2,8 @@
 
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
-import Answers, { AnswersProps } from '../Answers';
+import type { AnswersProps } from '../Answers';
+import Answers from '../Answers';
 
 const defaultProps: AnswersProps = {
   hits: [],

src/components/Breadcrumb/Breadcrumb.tsx

@@ -3,13 +3,13 @@
 import { h } from 'preact';
 import cx from 'classnames';
 import Template from '../Template/Template';
-import {
+import type {
   BreadcrumbCSSClasses,
   BreadcrumbTemplates,
 } from '../../widgets/breadcrumb/breadcrumb';
-import { ComponentCSSClasses } from '../../types';
-import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
-import { BreadcrumbConnectorParamsItem } from '../../connectors/breadcrumb/connectBreadcrumb';
+import type { ComponentCSSClasses } from '../../types';
+import type { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
+import type { BreadcrumbConnectorParamsItem } from '../../connectors/breadcrumb/connectBreadcrumb';
 
 export type BreadcrumbComponentCSSClasses =
   ComponentCSSClasses<BreadcrumbCSSClasses>;

src/components/Breadcrumb/__tests__/Breadcrumb-test.tsx

@@ -2,7 +2,8 @@
 
 import { h } from 'preact';
 import { render, fireEvent } from '@testing-library/preact';
-import Breadcrumb, { BreadcrumbProps } from '../Breadcrumb';
+import type { BreadcrumbProps } from '../Breadcrumb';
+import Breadcrumb from '../Breadcrumb';
 import { prepareTemplateProps } from '../../../lib/utils';
 import defaultTemplates from '../../../widgets/breadcrumb/defaultTemplates';
 

src/components/ClearRefinements/ClearRefinements.tsx

@@ -3,13 +3,13 @@
 import { h } from 'preact';
 import cx from 'classnames';
 import Template from '../Template/Template';
-import { ClearRefinementsRenderState } from '../../connectors/clear-refinements/connectClearRefinements';
-import {
+import type { ClearRefinementsRenderState } from '../../connectors/clear-refinements/connectClearRefinements';
+import type {
   ClearRefinementsCSSClasses,
   ClearRefinementsTemplates,
 } from '../../widgets/clear-refinements/clear-refinements';
-import { ComponentCSSClasses } from '../../types';
-import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
+import type { ComponentCSSClasses } from '../../types';
+import type { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 
 export type ClearRefinementsComponentCSSClasses =
   ComponentCSSClasses<ClearRefinementsCSSClasses>;

src/components/CurrentRefinements/CurrentRefinements.tsx

@@ -2,12 +2,12 @@
 
 import { h } from 'preact';
 import { isSpecialClick, capitalize } from '../../lib/utils';
-import {
+import type {
   CurrentRefinementsConnectorParamsItem,
   CurrentRefinementsConnectorParamsRefinement,
 } from '../../connectors/current-refinements/connectCurrentRefinements';
-import { CurrentRefinementsCSSClasses } from '../../widgets/current-refinements/current-refinements';
-import { ComponentCSSClasses } from '../../types';
+import type { CurrentRefinementsCSSClasses } from '../../widgets/current-refinements/current-refinements';
+import type { ComponentCSSClasses } from '../../types';
 
 export type CurrentRefinementsComponentCSSClasses =
   ComponentCSSClasses<CurrentRefinementsCSSClasses>;

src/components/GeoSearchControls/GeoSearchButton.tsx

@@ -1,6 +1,7 @@
 /** @jsx h */
 
-import { h, ComponentChildren } from 'preact';
+import type { ComponentChildren } from 'preact';
+import { h } from 'preact';
 
 type Props = {
   className: string;

src/components/GeoSearchControls/GeoSearchControls.tsx

@@ -5,12 +5,12 @@ import cx from 'classnames';
 import Template from '../Template/Template';
 import GeoSearchButton from './GeoSearchButton';
 import GeoSearchToggle from './GeoSearchToggle';
-import {
+import type {
   GeoSearchCSSClasses,
   GeoSearchTemplates,
 } from '../../widgets/geo-search/geo-search';
-import { ComponentCSSClasses } from '../../types';
-import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
+import type { ComponentCSSClasses } from '../../types';
+import type { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 
 type Props = {
   cssClasses: ComponentCSSClasses<GeoSearchCSSClasses>;

src/components/GeoSearchControls/GeoSearchToggle.tsx

@@ -1,6 +1,7 @@
 /** @jsx h */
 
-import { h, ComponentChildren } from 'preact';
+import type { ComponentChildren } from 'preact';
+import { h } from 'preact';
 
 type Props = {
   classNameLabel: string;

src/components/Hits/Hits.tsx

@@ -3,11 +3,11 @@
 import { h } from 'preact';
 import cx from 'classnames';
 import Template from '../Template/Template';
-import { SearchResults } from 'algoliasearch-helper';
-import { BindEventForHits, SendEventForHits } from '../../lib/utils';
-import { ComponentCSSClasses, Hits as HitsArray } from '../../types';
-import { HitsCSSClasses, HitsTemplates } from '../../widgets/hits/hits';
-import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
+import type { SearchResults } from 'algoliasearch-helper';
+import type { BindEventForHits, SendEventForHits } from '../../lib/utils';
+import type { ComponentCSSClasses, Hits as HitsArray } from '../../types';
+import type { HitsCSSClasses, HitsTemplates } from '../../widgets/hits/hits';
+import type { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 
 export type HitsComponentCSSClasses = ComponentCSSClasses<HitsCSSClasses>;
 export type HitsComponentTemplates = Required<HitsTemplates>;

src/components/Hits/__tests__/Hits-test.tsx

@@ -5,7 +5,8 @@ import { shallow, mount } from '../../../../test/utils/enzyme';
 import { highlight } from '../../../helpers';
 import { prepareTemplateProps, TAG_REPLACEMENT } from '../../../lib/utils';
 import Template from '../../Template/Template';
-import Hits, { HitsProps } from '../Hits';
+import type { HitsProps } from '../Hits';
+import Hits from '../Hits';
 import { createSingleSearchResponse } from '../../../../test/mock/createAPIResponse';
 import { SearchParameters, SearchResults } from 'algoliasearch-helper';
 import defaultTemplates from '../../../widgets/hits/defaultTemplates';

src/components/InfiniteHits/InfiniteHits.tsx

@@ -3,13 +3,13 @@
 import { h } from 'preact';
 import cx from 'classnames';
 import Template from '../Template/Template';
-import { SearchResults } from 'algoliasearch-helper';
-import { ComponentCSSClasses, Hits } from '../../types';
-import {
+import type { SearchResults } from 'algoliasearch-helper';
+import type { ComponentCSSClasses, Hits } from '../../types';
+import type {
   InfiniteHitsCSSClasses,
   InfiniteHitsTemplates,
 } from '../../widgets/infinite-hits/infinite-hits';
-import { SendEventForHits, BindEventForHits } from '../../lib/utils';
+import type { SendEventForHits, BindEventForHits } from '../../lib/utils';
 
 export type InfiniteHitsComponentCSSClasses =
   ComponentCSSClasses<InfiniteHitsCSSClasses>;

src/components/InfiniteHits/__tests__/InfiniteHits-test.tsx

@@ -4,7 +4,7 @@ import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { SearchParameters, SearchResults } from 'algoliasearch-helper';
 import InfiniteHits from '../InfiniteHits';
-import { Hits, SearchResponse } from '../../../types';
+import type { Hits, SearchResponse } from '../../../types';
 import { createSingleSearchResponse } from '../../../../test/mock/createAPIResponse';
 
 function createResults(partialResults: Partial<SearchResponse<any>>) {

src/components/MenuSelect/MenuSelect.tsx

@@ -4,12 +4,12 @@ import { h } from 'preact';
 import cx from 'classnames';
 import { find } from '../../lib/utils';
 import Template from '../Template/Template';
-import {
+import type {
   MenuSelectCSSClasses,
   MenuSelectTemplates,
 } from '../../widgets/menu-select/menu-select';
-import { MenuRenderState } from '../../connectors/menu/connectMenu';
-import { ComponentCSSClasses } from '../../types';
+import type { MenuRenderState } from '../../connectors/menu/connectMenu';
+import type { ComponentCSSClasses } from '../../types';
 
 export type MenuSelectComponentCSSClasses =
   ComponentCSSClasses<MenuSelectCSSClasses>;

src/components/Pagination/Pagination.tsx

@@ -5,11 +5,11 @@ import cx from 'classnames';
 
 import PaginationLink from './PaginationLink';
 import { isSpecialClick } from '../../lib/utils';
-import {
+import type {
   PaginationCSSClasses,
   PaginationTemplates,
 } from '../../widgets/pagination/pagination';
-import { ComponentCSSClasses } from '../../types';
+import type { ComponentCSSClasses } from '../../types';
 
 export type PaginationComponentCSSClasses =
   ComponentCSSClasses<PaginationCSSClasses>;

src/components/Pagination/__tests__/Pagination-test.tsx

@@ -2,7 +2,8 @@
 
 import { h } from 'preact';
 import { mount } from '../../../../test/utils/enzyme';
-import Pagination, { PaginationProps } from '../Pagination';
+import type { PaginationProps } from '../Pagination';
+import Pagination from '../Pagination';
 import Paginator from '../../../connectors/pagination/Paginator';
 
 describe('Pagination', () => {

src/components/Panel/Panel.tsx

@@ -4,8 +4,11 @@ import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 import cx from 'classnames';
 import Template from '../Template/Template';
-import { PanelCSSClasses, PanelTemplates } from '../../widgets/panel/panel';
-import {
+import type {
+  PanelCSSClasses,
+  PanelTemplates,
+} from '../../widgets/panel/panel';
+import type {
   ComponentCSSClasses,
   RenderOptions,
   UnknownWidgetFactory,

src/components/Panel/__tests__/Panel-test.tsx

@@ -2,7 +2,8 @@
 
 import { h } from 'preact';
 import { render, fireEvent } from '@testing-library/preact';
-import Panel, { PanelProps } from '../Panel';
+import type { PanelProps } from '../Panel';
+import Panel from '../Panel';
 import { createRenderOptions } from '../../../../test/mock/createWidget';
 
 const cssClasses = {

src/components/PoweredBy/PoweredBy.tsx

@@ -1,8 +1,8 @@
 /** @jsx h */
 
 import { h } from 'preact';
-import { ComponentCSSClasses } from '../../types';
-import { PoweredByCSSClasses } from '../../widgets/powered-by/powered-by';
+import type { ComponentCSSClasses } from '../../types';
+import type { PoweredByCSSClasses } from '../../widgets/powered-by/powered-by';
 
 export type PoweredByComponentCSSClasses =
   ComponentCSSClasses<PoweredByCSSClasses>;

src/components/QueryRuleCustomData/QueryRuleCustomData.tsx

@@ -1,8 +1,8 @@
 /** @jsx h */
 
 import { h } from 'preact';
-import { ComponentCSSClasses } from '../../types';
-import {
+import type { ComponentCSSClasses } from '../../types';
+import type {
   QueryRuleCustomDataCSSClasses,
   QueryRuleCustomDataTemplates,
 } from '../../widgets/query-rule-custom-data/query-rule-custom-data';

src/components/RangeInput/RangeInput.tsx

@@ -3,12 +3,15 @@
 import { h, Component } from 'preact';
 import cx from 'classnames';
 import Template from '../Template/Template';
-import {
+import type {
   RangeInputCSSClasses,
   RangeInputTemplates,
 } from '../../widgets/range-input/range-input';
-import { Range, RangeBoundaries } from '../../connectors/range/connectRange';
-import { ComponentCSSClasses } from '../../types';
+import type {
+  Range,
+  RangeBoundaries,
+} from '../../connectors/range/connectRange';
+import type { ComponentCSSClasses } from '../../types';
 
 export type RangeInputComponentCSSClasses =
   ComponentCSSClasses<RangeInputCSSClasses>;

src/components/RangeInput/__tests__/RangeInput-test.tsx

@@ -3,7 +3,8 @@
 import { h } from 'preact';
 import { shallow } from '../../../../test/utils/enzyme';
 import { render, fireEvent } from '@testing-library/preact';
-import RangeInput, { RangeInputProps } from '../RangeInput';
+import type { RangeInputProps } from '../RangeInput';
+import RangeInput from '../RangeInput';
 
 describe('RangeInput', () => {
   const defaultProps: RangeInputProps = {

src/components/RefinementList/RefinementList.tsx

@@ -1,20 +1,22 @@
 /** @jsx h */
 
+import type { JSX } from 'preact';
 import { h, createRef, Component } from 'preact';
 import cx from 'classnames';
 import { isSpecialClick, isEqual } from '../../lib/utils';
-import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
+import type { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 import Template from '../Template/Template';
 import RefinementListItem from './RefinementListItem';
-import SearchBox, {
+import type {
   SearchBoxComponentCSSClasses,
   SearchBoxComponentTemplates,
 } from '../SearchBox/SearchBox';
-import { HierarchicalMenuItem } from '../../connectors/hierarchical-menu/connectHierarchicalMenu';
-import { ComponentCSSClasses, CreateURL, Templates } from '../../types';
-import { RefinementListOwnCSSClasses } from '../../widgets/refinement-list/refinement-list';
-import { RatingMenuComponentCSSClasses } from '../../widgets/rating-menu/rating-menu';
-import { HierarchicalMenuComponentCSSClasses } from '../../widgets/hierarchical-menu/hierarchical-menu';
+import SearchBox from '../SearchBox/SearchBox';
+import type { HierarchicalMenuItem } from '../../connectors/hierarchical-menu/connectHierarchicalMenu';
+import type { ComponentCSSClasses, CreateURL, Templates } from '../../types';
+import type { RefinementListOwnCSSClasses } from '../../widgets/refinement-list/refinement-list';
+import type { RatingMenuComponentCSSClasses } from '../../widgets/rating-menu/rating-menu';
+import type { HierarchicalMenuComponentCSSClasses } from '../../widgets/hierarchical-menu/hierarchical-menu';
 
 // CSS types
 type RefinementListOptionalClasses =
@@ -66,7 +68,7 @@ export type RefinementListProps<TTemplates extends Templates> = {
   hasExhaustiveItems?: boolean;
   canToggleShowMore?: boolean;
   className?: string;
-  children?: h.JSX.Element;
+  children?: JSX.Element;
 
   // searchable props are optional, but will definitely be present in a searchable context
   isFromSearch?: boolean;

src/components/RefinementList/RefinementListItem.tsx

@@ -1,5 +1,6 @@
 /** @jsx h */
 
+import type { JSX } from 'preact';
 import { h } from 'preact';
 import Template from '../Template/Template';
 
@@ -11,7 +12,7 @@ export type RefinementListItemProps = {
     originalEvent: MouseEvent;
   }) => void;
   isRefined: boolean;
-  subItems?: h.JSX.Element;
+  subItems?: JSX.Element;
   templateData: Record<string, any>;
   templateKey: string;
   templateProps?: Record<string, any>;

src/components/RefinementList/__tests__/RefinementList-test.tsx

@@ -2,9 +2,10 @@
 
 import { h } from 'preact';
 import { render, fireEvent } from '@testing-library/preact';
-import RefinementList, { RefinementListProps } from '../RefinementList';
+import type { RefinementListProps } from '../RefinementList';
+import RefinementList from '../RefinementList';
 import defaultTemplates from '../../../widgets/refinement-list/defaultTemplates';
-import {
+import type {
   RefinementListItemData,
   RefinementListTemplates,
 } from '../../../widgets/refinement-list/refinement-list';

src/components/RefinementList/__tests__/RefinementListItem-test.tsx

@@ -2,9 +2,8 @@
 
 import { h } from 'preact';
 import { shallow } from '../../../../test/utils/enzyme';
-import RefinementListItem, {
-  RefinementListItemProps,
-} from '../RefinementListItem';
+import type { RefinementListItemProps } from '../RefinementListItem';
+import RefinementListItem from '../RefinementListItem';
 
 describe('RefinementListItem', () => {
   const props: RefinementListItemProps = {