TypeScript compat changes for CRA and AF (#45)

Author: flexdinesh

src/constants.ts

@@ -1,3 +1,5 @@
+import { Settings } from './types';
+
 export const PACKAGE_NAME = 'react-loosely-lazy';
 
 export const MODE = {
@@ -15,10 +17,6 @@ export const PHASE_LAZY_DELAY = 50;
 
 export const COLLECTED = new Map();
 
-export type Settings = {
-  CURRENT_MODE: typeof MODE.HYDRATE | typeof MODE.RENDER;
-};
-
 export const SETTINGS: Settings = {
   CURRENT_MODE: MODE.HYDRATE,
 };

src/index.ts

@@ -1,5 +1,4 @@
 export { MODE, SETTINGS } from './constants';
-export type { Settings } from './constants';
 
 export { LooselyLazy as default } from './init';
 
@@ -11,15 +10,17 @@ export {
   LoaderError,
 } from './lazy';
 
-export type {
+export {
   ClientLoader,
   Loader,
-  Options as LazyOptions,
+  LazyOptions,
   ServerLoader,
+  LazyComponent,
 } from './lazy';
 
 export { LazySuspense } from './suspense';
-export type { Fallback, LazySuspenseProps } from './suspense';
+export { Fallback, LazySuspenseProps } from './suspense';
 
 export { LazyWait, useLazyPhase } from './phase';
-export type { LazyWaitProps } from './phase';
+export { LazyWaitProps } from './phase';
+export { Settings } from './types';

src/lazy/__tests__/lazy.typescript.test.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentType } from 'react';
 import { lazyForPaint } from 'react-loosely-lazy';
-import type { FooProps } from './__fixtures__/foo';
+import { FooProps } from './__fixtures__/foo';
 
 const UntypedEmptyPropsTestComponent = lazyForPaint(() =>
   import('./__fixtures__/empty-props')

src/lazy/index.tsx

@@ -1,48 +1,25 @@
-import type { ComponentProps, ComponentType, FunctionComponent } from 'react';
+import { ComponentProps, ComponentType, FunctionComponent } from 'react';
 
 import { PHASE } from '../constants';
 import { hash, displayNameFromId, isNodeEnvironment } from '../utils';
-import type { Asset, Manifest } from '../webpack';
+import { Asset, Manifest } from '../webpack';
 
 import { createComponentClient } from './components/client';
 import { createComponentServer } from './components/server';
 import { createDeferred } from './deferred';
 import { ClientLoader, Loader, ServerLoader } from './loader';
+import { LazyOptions, LazyComponent } from './types';
 
-export type { Asset, Manifest };
-
-export type Options = {
-  /**
-   * Whenever it should be required and rendered in SSR
-   * If false it will just render the provided fallback
-   */
-  ssr?: boolean;
-  /**
-   * Id of `PHASE` responsible for start loading
-   */
-  defer?: number;
-  /**
-   * Id of the module being imported (normally its path).
-   * It's calculated and provided by babel plugin
-   */
-  moduleId?: string;
-};
-
-export type LazyComponent<C extends ComponentType<any>> = FunctionComponent<
-  ComponentProps<C>
-> & {
-  preload: () => void;
-  getAssetUrls: (manifest: Manifest) => string[] | undefined;
-};
+export { Asset, Manifest, LazyOptions, LazyComponent };
 
 function lazyProxy<C extends ComponentType<any>>(
   loader: Loader<C>,
-  { defer = PHASE.PAINT, moduleId = '', ssr = true }: Options = {}
+  { defer = PHASE.PAINT, moduleId = '', ssr = true }: LazyOptions = {}
 ): LazyComponent<C> {
   const isServer = isNodeEnvironment();
   const dataLazyId = hash(moduleId);
 
-  const LazyComponent: FunctionComponent<ComponentProps<C>> = isServer
+  const LazyInternal: FunctionComponent<ComponentProps<C>> = isServer
     ? createComponentServer({
         dataLazyId,
         loader: loader as ServerLoader<C>,
@@ -57,7 +34,7 @@ function lazyProxy<C extends ComponentType<any>>(
         ssr,
       });
 
-  LazyComponent.displayName = `Lazy(${displayNameFromId(moduleId)})`;
+  LazyInternal.displayName = `Lazy(${displayNameFromId(moduleId)})`;
 
   const getAssetUrls = (manifest: Manifest) => {
     if (!manifest[moduleId]) {
@@ -87,7 +64,7 @@ function lazyProxy<C extends ComponentType<any>>(
     head.appendChild(link);
   };
 
-  return Object.assign(LazyComponent, {
+  return Object.assign(LazyInternal, {
     getAssetUrls,
     preload,
   });
@@ -103,7 +80,7 @@ export const DEFAULT_OPTIONS: {
 
 export function lazyForPaint<C extends ComponentType<any>>(
   loader: Loader<C>,
-  opts?: Options
+  opts?: LazyOptions
 ) {
   return lazyProxy<C>(loader, {
     ...DEFAULT_OPTIONS.lazyForPaint,
@@ -113,7 +90,7 @@ export function lazyForPaint<C extends ComponentType<any>>(
 
 export function lazyAfterPaint<C extends ComponentType<any>>(
   loader: Loader<C>,
-  opts?: Options
+  opts?: LazyOptions
 ) {
   return lazyProxy<C>(loader, {
     ...DEFAULT_OPTIONS.lazyAfterPaint,
@@ -123,13 +100,13 @@ export function lazyAfterPaint<C extends ComponentType<any>>(
 
 export function lazy<C extends ComponentType<any>>(
   loader: Loader<C>,
-  opts?: Options
+  opts?: LazyOptions
 ) {
   return lazyProxy<C>(loader, {
     ...DEFAULT_OPTIONS.lazy,
     ...(opts || {}),
   });
 }
 
-export type { ClientLoader, Loader, ServerLoader };
+export { ClientLoader, Loader, ServerLoader };
 export { LoaderError, isLoaderError } from './errors/loader-error';

src/lazy/types.ts

@@ -0,0 +1,26 @@
+import { ComponentProps, ComponentType, FunctionComponent } from 'react';
+import { Manifest } from '../webpack';
+
+export type LazyOptions = {
+  /**
+   * Whenever it should be required and rendered in SSR
+   * If false it will just render the provided fallback
+   */
+  ssr?: boolean;
+  /**
+   * Id of `PHASE` responsible for start loading
+   */
+  defer?: number;
+  /**
+   * Id of the module being imported (normally its path).
+   * It's calculated and provided by babel plugin
+   */
+  moduleId?: string;
+};
+
+export type LazyComponent<C extends ComponentType<any>> = FunctionComponent<
+  ComponentProps<C>
+> & {
+  preload: () => void;
+  getAssetUrls: (manifest: Manifest) => string[] | undefined;
+};

src/phase/component.tsx

@@ -1,20 +1,10 @@
-import React, {
-  ReactNode,
-  useContext,
-  useMemo,
-  useRef,
-  useEffect,
-} from 'react';
+import React, { useContext, useMemo, useRef, useEffect } from 'react';
 
 import { PHASE } from '../constants';
 import { LazyPhaseContext } from './context';
 import { Listener } from './listeners';
 import { createSubscribe } from './utils';
-
-export type LazyWaitProps = {
-  until: boolean;
-  children: ReactNode;
-};
+import { LazyWaitProps } from './types';
 
 export const LazyWait = ({ until, children }: LazyWaitProps) => {
   const { api: ctxApi } = useContext(LazyPhaseContext);

src/phase/index.tsx

@@ -1,5 +1,5 @@
 export { LazyWait } from './component';
-export type { LazyWaitProps } from './component';
 export { useLazyPhase, LazyPhaseContext, setCurrent } from './context';
 export { usePhaseSubscription } from './controller';
 export { LISTENERS } from './listeners';
+export { LazyWaitProps } from './types';

src/phase/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export type LazyWaitProps = {
+  until: boolean;
+  children: ReactNode;
+};

src/suspense/component.tsx

@@ -5,15 +5,8 @@ import React, {
   FunctionComponent,
 } from 'react';
 import { isNodeEnvironment } from '../utils';
-import {
-  Fallback,
-  LazySuspenseContext,
-  LazySuspenseContextType,
-} from './context';
-
-export type LazySuspenseProps = {
-  fallback: Fallback;
-};
+import { LazySuspenseContext } from './context';
+import { Fallback, LazySuspenseContextType, LazySuspenseProps } from './types';
 
 type LazySuspenseState = LazySuspenseContextType;
 

src/suspense/context.tsx

@@ -1,11 +1,5 @@
-import React, { Fragment, createContext, SuspenseProps } from 'react';
-
-export type Fallback = SuspenseProps['fallback'];
-
-export type LazySuspenseContextType = {
-  fallback: Fallback;
-  setFallback(fallback: Fallback): void;
-};
+import React, { Fragment, createContext } from 'react';
+import { Fallback, LazySuspenseContextType } from './types';
 
 export const LazySuspenseContext = createContext<LazySuspenseContextType>({
   fallback: <Fragment />,