fix(deps): replace ora and log-symbols with tiny dependency picospinner (#7026)

* fix(deps): replace ora and log-symbols with tiny dep

This should reduce our package size.

I also added some missing types along the way.

* fix(deps): use nanospinner instead

Author: serhalp

package-lock.json

@@ -129,16 +129,15 @@
     "lambda-local": "2.2.0",
     "locate-path": "7.2.0",
     "lodash": "4.17.21",
-    "log-symbols": "7.0.0",
     "log-update": "6.1.0",
     "maxstache": "1.0.7",
     "maxstache-stream": "1.0.4",
     "multiparty": "4.2.3",
+    "nanospinner": "^1.2.2",
     "netlify": "13.3.3",
     "netlify-redirector": "0.5.0",
     "node-fetch": "3.3.2",
     "open": "10.1.0",
-    "ora": "8.2.0",
     "p-filter": "4.1.0",
     "p-map": "7.0.3",
     "p-wait-for": "5.0.2",

package.json

@@ -3,7 +3,7 @@ import { dirname, join } from 'path'
 import { fileURLToPath } from 'url'
 
 import execa from 'execa'
-import ora from 'ora'
+import { createSpinner } from 'nanospinner'
 
 // These scripts from package.json need to be preserved on publish
 const preserveScripts = new Set([
@@ -15,10 +15,7 @@ const preserveScripts = new Set([
   'prepublishOnly',
 ])
 
-let spinner = ora({
-  spinner: 'star',
-  text: 'Patching package.json (removing devDependencies, scripts, etc)',
-}).start()
+let spinner = createSpinner('Patching package.json (removing devDependencies, scripts, etc)').start()
 
 const dir = dirname(fileURLToPath(import.meta.url))
 const packageJsonPath = join(dir, '../package.json')
@@ -41,18 +38,12 @@ pkgJson.scripts.postinstall = pkgJson.scripts['postinstall-pack']
 delete pkgJson.scripts['postinstall-pack']
 
 await writeFile(packageJsonPath, JSON.stringify(pkgJson, null, 2))
-spinner.succeed()
+spinner.success()
 
-spinner = ora({
-  spinner: 'star',
-  text: 'Running `npm install --no-audit`',
-}).start()
+spinner = createSpinner('Running `npm install --no-audit`').start()
 await execa('npm', ['install', '--no-audit'])
-spinner.succeed()
+spinner.success()
 
-spinner = ora({
-  spinner: 'star',
-  text: 'Running `npm shrinkwrap`',
-}).start()
+spinner = createSpinner('Running `npm shrinkwrap`').start()
 await execa('npm', ['shrinkwrap'])
-spinner.succeed()
+spinner.success()

scripts/prepare-for-publish.js

@@ -17,7 +17,7 @@ import { getBootstrapURL } from '../../lib/edge-functions/bootstrap.js'
 import { featureFlags as edgeFunctionsFeatureFlags } from '../../lib/edge-functions/consts.js'
 import { normalizeFunctionsConfig } from '../../lib/functions/config.js'
 import { BACKGROUND_FUNCTIONS_WARNING } from '../../lib/log.js'
-import { startSpinner, stopSpinner } from '../../lib/spinner.js'
+import { type Spinner, startSpinner, stopSpinner } from '../../lib/spinner.js'
 import { detectFrameworkSettings, getDefaultConfig } from '../../utils/build-info.js'
 import {
   NETLIFYDEV,
@@ -33,7 +33,7 @@ import {
   APIError,
 } from '../../utils/command-helpers.js'
 import { DEFAULT_DEPLOY_TIMEOUT } from '../../utils/deploy/constants.js'
-import { deploySite } from '../../utils/deploy/deploy-site.js'
+import { type DeployEvent, deploySite } from '../../utils/deploy/deploy-site.js'
 import { getEnvelopeEnv } from '../../utils/env/index.js'
 import { getFunctionsManifestPath, getInternalFunctionsDir } from '../../utils/functions/index.js'
 import openBrowser from '../../utils/open-browser.js'
@@ -309,40 +309,30 @@ const reportDeployError = ({ error_, failAndExit }) => {
 }
 
 const deployProgressCb = function () {
-  /**
-   * @type {Record<string, import('ora').Ora>}
-   */
-  const events = {}
-  // @ts-expect-error TS(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  return (event) => {
+  const spinnersByType: Record<DeployEvent['type'], Spinner> = {}
+  return (event: DeployEvent) => {
     switch (event.phase) {
       case 'start': {
-        // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        events[event.type] = startSpinner({
+        spinnersByType[event.type] = startSpinner({
           text: event.msg,
         })
         return
       }
       case 'progress': {
-        // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        const spinner = events[event.type]
+        const spinner = spinnersByType[event.type]
         if (spinner) {
-          spinner.text = event.msg
+          spinner.update({ text: event.msg })
         }
         return
       }
       case 'error':
-        // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        stopSpinner({ error: true, spinner: events[event.type], text: event.msg })
-        // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        delete events[event.type]
+        stopSpinner({ error: true, spinner: spinnersByType[event.type], text: event.msg })
+        delete spinnersByType[event.type]
         return
       case 'stop':
       default: {
-        // @ts-expect-error TS(2345) FIXME: Argument of type '{ spinner: any; text: any; }' is... Remove this comment to see the full error message
-        stopSpinner({ spinner: events[event.type], text: event.msg })
-        // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        delete events[event.type]
+        stopSpinner({ spinner: spinnersByType[event.type], text: event.msg })
+        delete spinnersByType[event.type]
       }
     }
   }

src/commands/deploy/deploy.ts

@@ -11,7 +11,7 @@ import { findUp } from 'find-up'
 import fuzzy from 'fuzzy'
 import inquirer from 'inquirer'
 import fetch from 'node-fetch'
-import ora from 'ora'
+import { createSpinner } from 'nanospinner'
 
 import { fileExistsAsync } from '../../lib/fs.js'
 import { getAddons, getCurrentAddon, getSiteData } from '../../utils/addons/prepare.js'
@@ -45,6 +45,11 @@ const languages = [
   { name: 'Rust', value: 'rust' },
 ]
 
+const MOON_SPINNER = {
+  interval: 80,
+  frames: ['🌑 ', '🌒 ', '🌓 ', '🌔 ', '🌕 ', '🌖 ', '🌗 ', '🌘 '],
+}
+
 /**
  * prompt for a name if name not supplied
  * @param {string} argumentName
@@ -541,12 +546,9 @@ const scaffoldFromTemplate = async function (command, options, argumentName, fun
 
     // npm install
     if (functionPackageJson !== undefined) {
-      const spinner = ora({
-        text: `Installing dependencies for ${name}`,
-        spinner: 'moon',
-      }).start()
+      const spinner = createSpinner(`Installing dependencies for ${name}`, MOON_SPINNER).start()
       await installDeps({ functionPackageJson, functionPath, functionsDir })
-      spinner.succeed(`Installed dependencies for ${name}`)
+      spinner.success(`Installed dependencies for ${name}`)
     }
 
     if (funcType === 'edge') {

src/commands/functions/functions-create.ts

@@ -8,16 +8,14 @@ import BaseCommand from '../base-command.js'
 
 export const sitesList = async (options: OptionValues, command: BaseCommand) => {
   const { api } = command.netlify
-  /** @type {import('ora').Ora} */
   let spinner
   if (!options.json) {
     spinner = startSpinner({ text: 'Loading your sites' })
   }
   await command.authenticate()
 
   const sites = await listSites({ api, options: { filter: 'all' } })
-  if (!options.json) {
-    // @ts-expect-error TS(2345) FIXME: Argument of type '{ spinner: Ora | undefined; }' i... Remove this comment to see the full error message
+  if (spinner) {
     stopSpinner({ spinner })
   }
 

src/commands/sites/sites-list.ts

@@ -1,8 +1,9 @@
 import { OptionValues } from 'commander'
 import pWaitFor from 'p-wait-for'
 import prettyjson from 'prettyjson'
+import type { NetlifyAPI } from 'netlify'
 
-import { startSpinner, stopSpinner } from '../../lib/spinner.js'
+import { type Spinner, startSpinner, stopSpinner } from '../../lib/spinner.js'
 import { chalk, error, log } from '../../utils/command-helpers.js'
 import BaseCommand from '../base-command.js'
 import { init } from '../init/init.js'
@@ -15,28 +16,18 @@ const BUILD_FINISH_INTERVAL = 1e3
 // 20 minutes
 const BUILD_FINISH_TIMEOUT = 12e5
 
-/**
- *
- * @param {import('netlify').NetlifyAPI} api
- * @param {string} siteId
- * @param {import('ora').Ora} spinner
- * @returns {Promise<boolean>}
- */
-// @ts-expect-error TS(7006) FIXME: Parameter 'api' implicitly has an 'any' type.
-const waitForBuildFinish = async function (api, siteId, spinner) {
+const waitForBuildFinish = async function (api: NetlifyAPI, siteId: string, spinner: Spinner) {
   let firstPass = true
 
   const waitForBuildToFinish = async function () {
     const builds = await api.listSiteBuilds({ siteId })
     // build.error
-    // @ts-expect-error TS(7006) FIXME: Parameter 'build' implicitly has an 'any' type.
     const currentBuilds = builds.filter((build) => !build.done)
 
     // if build.error
     // @TODO implement build error messages into this
 
     if (!currentBuilds || currentBuilds.length === 0) {
-      // @ts-expect-error TS(2345) FIXME: Argument of type '{ spinner: any; }' is not assign... Remove this comment to see the full error message
       stopSpinner({ spinner })
       return true
     }
@@ -64,7 +55,7 @@ export const watch = async (options: OptionValues, command: BaseCommand) => {
   if (!siteId) {
     // TODO: build init command
     const siteData = await init({}, command)
-    siteId = siteData.id
+    siteId = siteData.id as string
   }
 
   // wait for 1 sec for everything to kickoff
@@ -101,7 +92,7 @@ export const watch = async (options: OptionValues, command: BaseCommand) => {
 
     const noActiveBuilds = await waitForBuildFinish(client, siteId, spinner)
 
-    const siteData = await client.getSite({ siteId: siteId as string })
+    const siteData = await client.getSite({ siteId })
 
     const message = chalk.cyanBright.bold.underline(noActiveBuilds ? 'Last build' : 'Deploy complete')
     log()

src/commands/watch/watch.ts

@@ -16,7 +16,7 @@ const MAX_PAGES = 10
 const MAX_PER_PAGE = 100
 
 // @ts-expect-error TS(7023) FIXME: 'listSites' implicitly has return type 'any' becau... Remove this comment to see the full error message
-export const listSites = async ({ api, options }): SiteInfo[] => {
+export const listSites = async ({ api, options }): Promise<SiteInfo[]> => {
   const { maxPages = MAX_PAGES, page = FIRST_PAGE, ...rest } = options
   const sites = await api.listSites({ page, per_page: MAX_PER_PAGE, ...rest })
   // TODO: use pagination headers when js-client returns them

src/lib/api.ts

@@ -13,7 +13,7 @@ import { FeatureFlags, getFeatureFlagsFromSiteInfo } from '../../utils/feature-f
 import { BlobsContextWithEdgeAccess } from '../blobs/blobs.js'
 import { getGeoLocation } from '../geo-location.js'
 import { getPathInProject } from '../settings.js'
-import { startSpinner, stopSpinner } from '../spinner.js'
+import { type Spinner, startSpinner, stopSpinner } from '../spinner.js'
 
 import { getBootstrapURL } from './bootstrap.js'
 import { DIST_IMPORT_MAP_PATH, EDGE_FUNCTIONS_SERVE_FOLDER } from './consts.js'
@@ -25,7 +25,7 @@ const headersSymbol = Symbol('Edge Functions Headers')
 const LOCAL_HOST = '127.0.0.1'
 
 const getDownloadUpdateFunctions = () => {
-  let spinner: ReturnType<typeof startSpinner>
+  let spinner: Spinner
 
   const onAfterDownload = (error_: unknown) => {
     stopSpinner({ error: Boolean(error_), spinner })

src/lib/edge-functions/proxy.ts

@@ -1,34 +1,34 @@
-import logSymbols from 'log-symbols'
-import ora, { Ora } from 'ora'
+import { createSpinner, type Spinner } from 'nanospinner'
+
+const DOTS_SPINNER = {
+  interval: 80,
+  frames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
+}
 
 /**
  * Creates a spinner with the following text
  */
-export const startSpinner = ({ text }: { text: string }) =>
-  ora({
-    text,
-  }).start()
+export const startSpinner = ({ text }: { text: string }) => createSpinner(text, DOTS_SPINNER).start()
 
 /**
  * Stops the spinner with the following text
  */
-export const stopSpinner = ({ error, spinner, text }: { error: boolean; spinner: Ora; text?: string }) => {
+export const stopSpinner = ({ error, spinner, text }: { error?: boolean; spinner: Spinner; text?: string }) => {
   if (!spinner) {
     return
   }
-  // TODO: refactor no package needed `log-symbols` for that
-  const symbol = error ? logSymbols.error : logSymbols.success
-  spinner.stopAndPersist({
-    text,
-    symbol,
-  })
+  if (error === true) {
+    spinner.error(text)
+  } else {
+    spinner.stop(text)
+  }
 }
 
 /**
  * Clears the spinner
  */
-export const clearSpinner = ({ spinner }: { spinner: Ora }) => {
-  if (spinner) {
-    spinner.stop()
-  }
+export const clearSpinner = ({ spinner }: { spinner: Spinner }) => {
+  spinner.clear()
 }
+
+export type { Spinner }