load-components.ts

import { IncomingMessage, ServerResponse } from 'http'
import { ParsedUrlQuery } from 'querystring'
import {
  BUILD_MANIFEST,
  CLIENT_STATIC_FILES_PATH,
  REACT_LOADABLE_MANIFEST,
  SERVER_DIRECTORY,
} from '../lib/constants'
import { join } from 'path'
import { PageConfig } from '../../types'
import { requirePage } from './require'

export function interopDefault(mod: any) {
  return mod.default || mod
}

export type LoadComponentsReturnType = {
  Component: any
  pageConfig: PageConfig
  unstable_getStaticProps?: (params: {
    params: { [key: string]: string | string[] }
  }) => {
    props: any
    revalidate?: number | boolean
  }
  unstable_getStaticPaths?: () => Promise<
    Array<string | { [key: string]: string | string[] }>
  >
  unstable_getServerProps?: (context: {
    params: { [key: string]: string | string[] }
    req: IncomingMessage
    res: ServerResponse
    query: ParsedUrlQuery
  }) => Promise<{ [key: string]: any }>
  buildManifest?: any
  reactLoadableManifest?: any
  Document?: any
  DocumentMiddleware?: any
  App?: any
}

export async function loadComponents(
  distDir: string,
  buildId: string,
  pathname: string,
  serverless: boolean
): Promise<LoadComponentsReturnType> {
  if (serverless) {
    const Component = await requirePage(pathname, distDir, serverless)
    return {
      Component,
      pageConfig: Component.config || {},
      unstable_getStaticProps: Component.unstable_getStaticProps,
      unstable_getStaticPaths: Component.unstable_getStaticPaths,
    }
  }
  const documentPath = join(
    distDir,
    SERVER_DIRECTORY,
    CLIENT_STATIC_FILES_PATH,
    buildId,
    'pages',
    '_document'
  )
  const appPath = join(
    distDir,
    SERVER_DIRECTORY,
    CLIENT_STATIC_FILES_PATH,
    buildId,
    'pages',
    '_app'
  )

  const DocumentMod = require(documentPath)
  const { middleware: DocumentMiddleware } = DocumentMod

  const AppMod = require(appPath)

  const ComponentMod = requirePage(pathname, distDir, serverless)

  const [
    buildManifest,
    reactLoadableManifest,
    Component,
    Document,
    App,
  ] = await Promise.all([
    require(join(distDir, BUILD_MANIFEST)),
    require(join(distDir, REACT_LOADABLE_MANIFEST)),
    interopDefault(ComponentMod),
    interopDefault(DocumentMod),
    interopDefault(AppMod),
  ])

  return {
    App,
    Document,
    Component,
    buildManifest,
    DocumentMiddleware,
    reactLoadableManifest,
    pageConfig: ComponentMod.config || {},
    unstable_getServerProps: ComponentMod.unstable_getServerProps,
    unstable_getStaticProps: ComponentMod.unstable_getStaticProps,
    unstable_getStaticPaths: ComponentMod.unstable_getStaticPaths,
  }
}