improve: client dev scripts

docker-compose.yml

@@ -40,6 +40,6 @@ volumes:
     driver: local
   verdaccio:
     driver: local
-
-  mocks:
   storage:
+    driver: local
+  mocks:

sources/@roots/bud-extensions/src/Controller/controller.service.ts

@@ -371,13 +371,16 @@ export class Controller {
     await this.mixin()
     await this.api()
 
-    if (isFunction(this._module.register))
+    if (isFunction(this._module.register)) {
       await this._module.register(this.app, this.moduleLogger)
 
-    this.moduleLogger.success({
-      message: `register called`,
-      suffix: chalk.dim`${this.name}`,
-    })
+      await this.app.api.processQueue()
+
+      this.moduleLogger.success({
+        message: `register called`,
+        suffix: chalk.dim`${this.name}`,
+      })
+    }
 
     return this
   }
@@ -505,6 +508,8 @@ export class Controller {
     if (isFunction(this._module.boot)) {
       await this._module.boot(this.app, this.moduleLogger)
 
+      await this.app.api.processQueue()
+
       this.moduleLogger.success({
         message: `${this.name} booted`,
       })

sources/@roots/bud-server/src/client/index.ts

@@ -1,42 +1,87 @@
+/* eslint-disable no-console */
 /* global __resourceQuery */
 
+interface Controller {
+  update: (payload) => void
+}
+
+interface BaseOptions {
+  autoConnect: boolean
+  timeout: number
+  overlay: boolean
+  reload: boolean
+  log: boolean
+  warn: boolean
+  name: string
+  overlayWarnings: boolean
+  path: string
+}
+
+interface Options extends BaseOptions {
+  'bud.overlay': boolean
+  'bud.indicator': boolean
+}
+
 ;(async (query: string) => {
   const querystring = await import('querystring')
   const hmr = await import('./bridge')
-  const {IndicatorController} = await import(
-    './indicator/indicator.controller'
-  )
-  const {OverlayController} = await import('./overlay/overlay.controller')
 
-  const indicator = new IndicatorController()
-  const overlay = new OverlayController()
+  const controllers: Array<Controller> = []
 
-  const instance = {
-    path: '/__bud/hmr',
+  const FALLBACK_OPTS: Options = {
+    ['bud.overlay']: true,
+    ['bud.indicator']: true,
+    autoConnect: false,
     timeout: 20 * 1000,
-    overlay: true,
+    overlay: false,
+    reload: false,
     log: false,
-    warn: true,
+    warn: false,
     name: '',
-    autoConnect: false,
     overlayWarnings: false,
-    ...querystring.parse(query.slice(1)),
+    path: '/__bud/hmr',
   }
 
-  hmr.setOptionsAndConnect(instance)
+  const options: Options = Object.entries(
+    querystring.parse(query.slice(1)),
+  ).reduce((a: Options, [k, v]: [keyof Options, any]) => {
+    if (v === 'true') v = true
+    if (v === 'false') v = false
+    return {...a, [k]: v}
+  }, FALLBACK_OPTS)
+
+  hmr.setOptionsAndConnect(options)
+
+  const registerIndicator = async () => {
+    if (!options['bud.indicator']) return
+    const controllerModule = await import('./indicator/index.js')
+    const controller = await controllerModule.make()
+    controller?.update && controllers.push(controller)
+  }
+
+  const registerOverlay = async () => {
+    if (!options['bud.overlay']) return
+    const controllerModule = await import('./overlay/index.js')
+    const controller = await controllerModule.make()
+    controller?.update && controllers.push(controller)
+  }
+
+  await registerIndicator()
+  await registerOverlay()
+
   hmr.subscribeAll(payload => {
-    if (payload.action === 'reload') window.location.reload()
+    console.table({
+      name: payload.name,
+      action: payload.action,
+      hash: payload.hash,
+    })
 
-    indicator.update(payload)
-    overlay.update(payload)
+    payload.warnings.map(console.warn)
+    payload.errors.map(console.error)
 
-    // eslint-disable-next-line no-console
-    console.log(
-      `%c[bud]%c %c${payload.action}`,
-      'background: #525ddc; color: #ffffff;',
-      'background: transparent;',
-      'background: white; color: #343a40;',
-    )
+    controllers.map(controller => controller.update(payload))
+
+    if (payload.action === 'reload') window.location.reload()
   })
 })(
   // @ts-ignore

sources/@roots/bud-server/src/client/indicator/index.ts

@@ -0,0 +1,10 @@
+export const make = async (): Promise<{update: (data) => void}> => {
+  const {Controller} = await import('./indicator.controller')
+  const {Component} = await import('./indicator.component')
+
+  if (customElements.get('bud-activity-indicator')) return
+
+  customElements.define('bud-activity-indicator', Component)
+
+  return new Controller()
+}

sources/@roots/bud-server/src/client/indicator/indicator.component.ts

@@ -4,7 +4,7 @@ import {pulse} from './indicator.pulse'
  * Indicator web component
  * @public
  */
-export class IndicatorComponent extends HTMLElement {
+export class Component extends HTMLElement {
   /**
    * Has component rendered
    * @public

sources/@roots/bud-server/src/client/indicator/indicator.controller.ts

@@ -1,10 +1,8 @@
-import {IndicatorComponent} from './indicator.component'
-
 /**
  * Activity indicator controller
  * @public
  */
-export class IndicatorController {
+export class Controller {
   /**
    * DOM node
    * @public
@@ -24,7 +22,6 @@ export class IndicatorController {
   public constructor() {
     this.node = document.createElement('bud-activity-indicator')
     document.body && document.body.appendChild(this.node)
-    customElements.define('bud-activity-indicator', IndicatorComponent)
   }
 
   /**

sources/@roots/bud-server/src/client/inject.ts

@@ -30,6 +30,7 @@ export const inject: inject = async (instance: Framework, injection) => {
         `${instance.name} entrypoints are malformed`,
         `skipping inject`,
       )
+
       return entrypoints
     }
 

sources/@roots/bud-server/src/client/overlay/index.ts

@@ -0,0 +1,10 @@
+export const make = async (): Promise<{update: (data) => void}> => {
+  const {Controller} = await import('./overlay.controller')
+  const {Component} = await import('./overlay.component')
+
+  if (customElements.get('bud-error')) return
+
+  customElements.define('bud-error', Component)
+
+  return new Controller()
+}

sources/@roots/bud-server/src/client/overlay/overlay.component.ts

@@ -55,6 +55,7 @@ export class Component extends HTMLElement {
       }
       .${this.name}__visible {
         backdrop-filter: blur(10px);
+        background: rgba(255, 255, 255, 0.75);
         border-top: 3px solid red;
         display: flex;
         align-items: center;

sources/@roots/bud-server/src/client/overlay/overlay.controller.ts

@@ -1,8 +1,6 @@
 import stripAnsi from 'strip-ansi'
 import {StatsError} from 'webpack'
 
-import {Component} from './overlay.component'
-
 interface Payload {
   hash: string
   errors: Array<StatsError>
@@ -12,7 +10,7 @@ interface Payload {
  * Overlay controller
  * @public
  */
-export class OverlayController {
+export class Controller {
   /**
    * Element
    * @public
@@ -45,9 +43,6 @@ export class OverlayController {
    * @public
    */
   public constructor() {
-    !customElements.get('bud-error') &&
-      customElements.define('bud-error', Component)
-
     this.element = document.createElement('bud-error')
     document.body && document.body.appendChild(this.element)
   }

sources/@roots/bud-server/src/seed.ts

@@ -46,7 +46,10 @@ export const seed = (app: Framework) => {
     .hooks.on(
       `dev.client.scripts`,
       new Set([
-        app => src(`index.js?name=${app.name}&path=/__bud/hmr`),
+        app =>
+          src(
+            `index.js?name=${app.name}&bud.overlay=${app.context.args.overlay}&bud.indicator=${app.context.args.indicator}&path=/__bud/hmr`,
+          ),
         () => src(`proxy-click-interceptor.js`),
       ]),
     )

sources/@roots/bud/src/cli/commands/build.ts

@@ -148,17 +148,17 @@ export class BuildCommand extends BaseCommand {
   })
 
   /**
-   * --log
+   * --indicator
    */
-  public log = Option.Boolean(`--log`, undefined, {
-    description: 'Enable logging',
+  public indicator = Option.Boolean(`--indicator`, true, {
+    description: 'Enable development status indicator',
   })
 
   /**
-   * --verbose
+   * --log
    */
-  public verbose = Option.Boolean(`--verbose`, false, {
-    description: 'Set logging level',
+  public log = Option.Boolean(`--log`, undefined, {
+    description: 'Enable logging',
   })
 
   /**
@@ -175,12 +175,25 @@ export class BuildCommand extends BaseCommand {
     description: 'Minimize compiled assets',
   })
 
+  /**
+   * --modules
+   */
   public modules = Option.String(`--modules`, undefined, {
     description: 'Module resolution path',
   })
 
+  /**
+   * --notify
+   */
   public notify = Option.Boolean(`--notify`, true, {
-    description: 'Allow OS notifications',
+    description: 'Enable notfication center messages',
+  })
+
+  /**
+   * --overlay
+   */
+  public overlay = Option.Boolean(`--overlay`, true, {
+    description: 'Enable error overlay in development mode',
   })
 
   /**
@@ -208,6 +221,13 @@ export class BuildCommand extends BaseCommand {
     description: 'Limit compilation to particular compilers',
   })
 
+  /**
+   * --verbose
+   */
+  public verbose = Option.Boolean(`--verbose`, false, {
+    description: 'Set logging level',
+  })
+
   /**
    * Execute command
    */
@@ -225,6 +245,7 @@ export class BuildCommand extends BaseCommand {
       flush: this.flush ?? null,
       hash: this.hash ?? null,
       html: this.html ?? null,
+      indicator: this.indicator ?? null,
       inject: this.inject ?? null,
       log: this.log ?? null,
       verbose: this.verbose ?? null,
@@ -233,6 +254,7 @@ export class BuildCommand extends BaseCommand {
       mode: this.mode ?? null,
       modules: this.modules ?? null,
       notify: this.notify ?? null,
+      overlay: this.overlay ?? null,
       publicPath: this.publicPath ?? null,
       src: this.src ?? null,
       splitChunks: this.splitChunks ?? null,

tests/unit/bud/services/project/project.test.ts

@@ -1,5 +1,7 @@
 import {Bud, factory} from '@repo/test-kit/bud'
 
+jest.setTimeout(15000)
+
 describe('bud.project', function () {
   let bud: Bud