diff --git a/packages/tuono/src/dynamic/RouteLazyLoading.tsx b/packages/tuono/src/dynamic/RouteLazyLoading.tsx deleted file mode 100644 index 3fb82a60..00000000 --- a/packages/tuono/src/dynamic/RouteLazyLoading.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { lazy, createElement } from 'react' -import type { ReactElement } from 'react' - -import type { RouteComponent } from 'tuono-router' - -type ImportFn = () => Promise<{ default: RouteComponent }> - -export const RouteLazyLoading = (factory: ImportFn): RouteComponent => { - let LoadedComponent: RouteComponent | undefined - const LazyComponent = lazy(factory) - - const loadComponent = (): Promise => - factory().then((module) => { - LoadedComponent = module.default - }) - - const Component = ( - props: React.ComponentProps, - ): ReactElement => createElement(LoadedComponent || LazyComponent, props) - - Component.preload = loadComponent - - return Component -} diff --git a/packages/tuono/src/dynamic/dynamic.tsx b/packages/tuono/src/dynamic/dynamic.tsx deleted file mode 100644 index 022f0b49..00000000 --- a/packages/tuono/src/dynamic/dynamic.tsx +++ /dev/null @@ -1,88 +0,0 @@ -/** - * This component is heavily inspired by Next.js dynamic function - * Link: https://github.com/vercel/next.js/blob/1df81bcea62800198884438a2bb27ba14c9d506a/packages/next/src/shared/lib/dynamic.tsx - */ -import { lazy, Suspense, Fragment } from 'react' -import type { ComponentType } from 'react' - -const isServerSide = typeof window === 'undefined' - -interface ComponentModule { - default: React.ComponentType -} - -interface DynamicOptions { - ssr?: boolean - loading?: React.ComponentType | null -} - -type Loader = () => Promise< - React.ComponentType | ComponentModule -> - -interface LoadableOptions extends DynamicOptions { - loader: Loader -} - -type LoadableFn = (options: LoadableOptions) => ComponentType - -const defaultLoaderOptions: LoadableOptions = { - ssr: true, - loading: null, - loader: () => Promise.resolve(() => null), -} - -function noSSR( - LoadableInitializer: LoadableFn, - loadableOptions: LoadableOptions, -): React.ComponentType { - if (!isServerSide) { - return LoadableInitializer(loadableOptions) - } - - if (!loadableOptions.loading) return () => null - - const Loading = loadableOptions.loading - // This will only be rendered on the server side - function NoSSRLoading(): React.JSX.Element { - return - } - return NoSSRLoading -} - -function Loadable(options: LoadableOptions): ComponentType { - const opts = { ...defaultLoaderOptions, ...options } - const Lazy = lazy(() => opts.loader().then()) - const Loading = opts.loading - - function LoadableComponent(props: T): React.JSX.Element { - const fallbackElement = Loading ? : null - - const Wrap = Loading ? Suspense : Fragment - const wrapProps = Loading ? { fallback: fallbackElement } : {} - - // TODO: In case ssr = false handle also the assets preloading - return ( - - - - ) - } - LoadableComponent.displayName = 'LoadableComponent' - - return LoadableComponent -} - -/** - * This function lets you dynamically import a component. - * It uses [React.lazy()](https://react.dev/reference/react/lazy) with [Suspense](https://react.dev/reference/react/Suspense) under the hood. - */ -export function dynamic( - importFn: Loader, - opts?: DynamicOptions, -): ComponentType { - if (typeof opts?.ssr === 'boolean' && !opts.ssr) { - return noSSR(Loadable, { ...opts, loader: importFn }) - } - return Loadable({ ...opts, loader: importFn }) -}