Add loading progress indicator to blitz console (#1336)

(patch)

packages/repl/package.json

@@ -33,7 +33,11 @@
   "dependencies": {
     "chokidar": "3.4.2",
     "globby": "11.0.0",
-    "pkg-dir": "4.2.0"
+    "pkg-dir": "4.2.0",
+    "progress": "^2.0.3"
   },
-  "gitHead": "d3b9fce0bdd251c2b1890793b0aa1cd77c1c0922"
+  "gitHead": "d3b9fce0bdd251c2b1890793b0aa1cd77c1c0922",
+  "devDependencies": {
+    "@types/progress": "^2.0.3"
+  }
 }

packages/repl/src/repl.ts

@@ -11,12 +11,13 @@ import {getBlitzModulePaths, loadBlitz} from "./utils/load-blitz"
 
 const projectRoot = pkgDir.sync() || process.cwd()
 
-const loadBlitzModules = async (repl: REPLServer) => {
-  Object.assign(repl.context, await loadBlitz())
+const loadBlitzModules = (repl: REPLServer, modules: any) => {
+  Object.assign(repl.context, modules)
 }
+
 const loadModules = async (repl: REPLServer) => {
   // loadBlitzDependencies(repl)
-  await loadBlitzModules(repl)
+  loadBlitzModules(repl, await loadBlitz())
 }
 
 const commands = {
@@ -67,10 +68,12 @@ const setupHistory = (repl: any) => {
 }
 
 const initializeRepl = async (replOptions: REPL.ReplOptions) => {
+  const modules = await loadBlitz()
+
   const repl = REPL.start(replOptions)
 
+  loadBlitzModules(repl, modules)
   defineCommands(repl, commands)
-  await loadModules(repl)
   setupHistory(repl)
 
   return repl
@@ -81,7 +84,7 @@ const setupFileWatchers = async (repl: REPLServer) => {
     // watch('package.json').on('change', () => Console.loadDependencies(repl)),
     watch(await getBlitzModulePaths(), {
       ignoreInitial: true,
-    }).on("all", () => loadBlitzModules(repl)),
+    }).on("all", () => loadModules(repl)),
   ]
 
   repl.on("reset", () => loadModules(repl))

packages/repl/src/utils/load-blitz.ts

@@ -2,6 +2,7 @@ import {forceRequire} from "./module"
 import path from "path"
 import globby from "globby"
 import pkgDir from "pkg-dir"
+import ProgressBar from "progress"
 
 const projectRoot = pkgDir.sync() || process.cwd()
 
@@ -22,7 +23,12 @@ export async function getBlitzModulePaths() {
 
 export const loadBlitz = async () => {
   const paths = await getBlitzModulePaths()
-  return Object.assign(
+
+  const percentage = new ProgressBar("Loading Modules :current/:total", {
+    total: paths.length,
+  })
+
+  const modules: Record<string, any>[] = Object.assign(
     {},
     ...paths.map((modulePath) => {
       let name = path.parse(modulePath).name
@@ -34,6 +40,9 @@ export const loadBlitz = async () => {
       try {
         const module = forceRequire(modulePath)
         const contextObj = module.default || module
+
+        percentage.tick()
+
         //TODO: include all exports here, not just default
         return {
           [name]: contextObj,
@@ -43,4 +52,8 @@ export const loadBlitz = async () => {
       }
     }),
   )
+
+  percentage.terminate()
+
+  return modules
 }

packages/repl/test/repl.test.ts

@@ -27,7 +27,7 @@ jest.mock(`${process.cwd()}/package.json`, () => ({
 }))
 
 const pathToModulesMock = ["/module", "module2"]
-const loadBlitzMock = {blitz: "app"}
+const loadBlitzMock = [{blitz: "app"}]
 
 describe("Console command", () => {
   beforeEach(() => {

yarn.lock

@@ -4304,6 +4304,13 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.0.0.tgz#dc85454b953178cc6043df5208b9e949b54a3bc4"
   integrity sha512-/rM+sWiuOZ5dvuVzV37sUuklsbg+JPOP8d+nNFlo2ZtfpzPiPvh1/gc8liWOLBqe+sR+ZM7guPaIcTt6UZTo7Q==
 
+"@types/progress@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/progress/-/progress-2.0.3.tgz#7ccbd9c6d4d601319126c469e73b5bb90dfc8ccc"
+  integrity sha512-bPOsfCZ4tsTlKiBjBhKnM8jpY5nmIll166IPD58D92hR7G7kZDfx5iB9wGF4NfZrdKolebjeAr3GouYkSGoJ/A==
+  dependencies:
+    "@types/node" "*"
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"