generate-pages.js

/*
  This javascript script defines a utility function named generatePages,
  which is intended for use in a project structure with nested page directories. 
  The function generates an index file for dynamic imports using the Loadable Component library. 
  It scans the specified base directory, identifies folders containing pages, 
  and creates dynamic import statements for each page. The resulting statements are written to an output file, 
  consolidating page exports for efficient code splitting and loading. 
  Dependencies include the 'fs' and 'path' modules for file operations, 
  and the '@loadable/component' library for dynamic imports.
*/


import fs from 'fs'
import path from 'path'

export const generatePages = ({
  basePath = __dirname,

  pagesFolderPostfix = 'Pages',
  pageFolderPostfix = 'Page',
  outputFileName = 'index.tsx',
}) => {
  if (!path.isAbsolute(basePath)) {
    throw new Error('basePath must be absolute')
  }

  const pagesDir = basePath

  fs.readdirSync(pagesDir).forEach((file) => {
    const currentPath = path.resolve(pagesDir, file)

    const isPagesFolder = fs.statSync(currentPath) && currentPath.endsWith(pagesFolderPostfix)

    if (isPagesFolder) {
      const pageExports = fs
        .readdirSync(currentPath)
        .map((pageDir) => {
          const pathPageDir = path.resolve(pagesDir, currentPath, pageDir)

          const isPageDirectory =
            fs.statSync(pathPageDir).isDirectory() && pathPageDir.endsWith(pageFolderPostfix)

          if (isPageDirectory && fs.existsSync(path.resolve(pathPageDir, 'index.tsx'))) {
            const pagePath = pathPageDir.replace(pagesDir, '')

            return `
export const ${pageDir} = loadable(() =>
  import('${path.join('@/pages', pagePath)}').then((module) => ({
    default: module.${pageDir},
  })), {
  fallback: <LoadingScreen loading={true} />,
}
)
          `
          }
        })
        .filter((exports) => !!exports)

      const outputFileContent = [
        "import loadable from '@loadable/component'\n",
        "import { LoadingScreen } from '@/screens/CommonScreens'\n",
        ...pageExports,
      ].join('')

      fs.writeFileSync(path.resolve(currentPath, outputFileName), outputFileContent)
    }
  })
}

index.js

/*
  This javascript script defines a Rollup plugin named rollupPluginGeneratePages.
  The plugin utilizes the generatePages function to automate the creation of an index file during the Rollup build process. 
  By default, it hooks into the 'buildStart' phase, triggering the generation of dynamic import statements for project pages.
  The plugin can be configured with options such as base path and hook. 
  To use, include this plugin in your Rollup configuration along with other plugins. 
  Dependencies include the generatePages function from './generate-pages.js'.
*/

import { generatePages } from './generate-pages.js'

export const rollupPluginGeneratePages = (options = { hook: 'buildStart' }) => {
  const { hook, ...pluginOptions } = options

  return {
    name: 'rollup-plugin-generate-pages',
    buildStart: () => {
      generatePages(pluginOptions)
    },
  }
}