improve: client dev scripts (#1293)

* add white bg to error overlay

* --overlay and --indicator flags

* compartmentalize indicator

* compartmentalize overlay

* improve client entry

* fix: !flag

* Critical dependency eats the bowl

* fix for proxy issues

* maybe fix proxy for the kids

* move proxy replacements to preset-wordpress

* improve server

* fix: bud.server

* fix: test

* fix: test

* improve: logger-ish

* fix: unbreak http server

docker-compose.yml

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

sources/@repo/docs/content/guides/paths.mdx

@@ -0,0 +1,7 @@
+---
+title: Pathing
+description: Working with paths
+slug: installation
+sidebar_label: Paths
+sidebar_position: 3
+---

sources/@repo/docs/content/guides/requirements.mdx

@@ -3,7 +3,7 @@ title: Requirements
 description: bud.js requirements
 slug: requirements
 sidebar_label: Requirements
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 :::danger WSL required for use in Windows

sources/@roots/bud-api/src/api/methods/proxy/index.ts

@@ -23,13 +23,16 @@ export const enableMiddleware = (
   middleware: Array<keyof Server.Middleware.Available>,
 ): Array<keyof Server.Middleware.Available> => [
   ...(disableMiddleware(middleware) ?? []),
+  'cookie',
   'proxy',
 ]
 
 export const disableMiddleware = (
   middleware: Array<keyof Server.Middleware.Available>,
 ): Array<keyof Server.Middleware.Available> =>
-  middleware?.filter(middleware => middleware !== 'proxy') ?? []
+  middleware?.filter(
+    middleware => middleware !== 'proxy' && middleware !== 'cookie',
+  ) ?? []
 
 export const method: method = function (input) {
   const ctx = this as Framework

sources/@roots/bud-api/src/api/methods/serve/index.ts

@@ -1,117 +1,42 @@
 import type {Framework} from '@roots/bud-framework'
-import {chokidar} from '@roots/bud-support'
+import {Connection} from '@roots/bud-framework/src/Server'
+import {lodash} from '@roots/bud-support'
 
-/**
- * Input object
- *
- * @public
- */
-export interface UserRecordInput {
-  /**
-   * URL object or url string
-   *
-   * @defaultValue URL('http://localhost:3000')
-   */
-  url?: URL | string
-  /**
-   * Path to ssl certificate
-   *
-   * @defaultValue undefined
-   */
-  cert?: string
-  /**
-   * Path to ssl key
-   *
-   * @defaultValue undefined
-   */
-  key?: string
-  /**
-   * Client options
-   */
-  client?: {
-    /**
-     * Scripts to be injected before application scripts
-     */
-    scripts: Set<(app: Framework) => string>
-  }
-
-  /**
-   * FSWatcher
-   */
-  watch?: {
-    /**
-     * Watched files
-     */
-    files: Array<string>
-    /**
-     * Watcher options
-     */
-    options?: chokidar.WatchOptions
-  }
-}
-
-export type UserInput = URL | string | number | UserRecordInput
+const {isFunction} = lodash
 
 export interface method {
-  (input?: UserInput): Framework
+  (
+    url: URL | string,
+    options?:
+      | Connection.Options
+      | ((options: Connection.Options) => Connection.Options),
+  ): Framework
 }
 
 export type facade = method
 
-export const method: method = function (input) {
-  const ctx = this as Framework
+export const method: method = function (input, options?) {
+  const app = this as Framework
+
+  if (!app.isDevelopment) return app
 
-  if (!ctx.isDevelopment) return ctx
+  if (options) {
+    const unwrapped = isFunction(options)
+      ? options(app.hooks.filter('dev.options') ?? {})
+      : options
 
-  if (typeof input === 'number') {
-    return ctx.hooks.on('dev.url', url => {
-      url.port = `${input}`
-      return url
-    })
+    app.hooks.on('dev.options', value =>
+      value ? {...value, ...unwrapped} : unwrapped,
+    )
   }
 
   if (typeof input === 'string') {
-    return ctx.hooks.on('dev.url', new URL(input))
+    return app.hooks.on('dev.url', new URL(input))
   }
 
   if (input instanceof URL) {
-    return ctx.hooks.on('dev.url', input)
+    return app.hooks.on('dev.url', input)
   }
 
-  input.url &&
-    ctx.hooks.on(
-      'dev.url',
-      input.url instanceof URL ? input.url : new URL(input.url),
-    )
-
-  input.key && ctx.hooks.on('dev.ssl.key', input.key)
-  input.cert && ctx.hooks.on('dev.ssl.cert', input.cert)
-
-  ctx.hooks.filter('dev.ssl.key') &&
-    ctx.hooks.filter('dev.ssl.cert') &&
-    ctx.hooks.on('dev.url', url => {
-      url.protocol = `https:`
-      url.port = url.port ?? `443`
-      return url
-    })
-
-  input.watch?.files &&
-    ctx.hooks.on('dev.watch.files', files => {
-      input.watch.files.forEach(file => files.add(file))
-      return files
-    })
-
-  input.watch?.options &&
-    ctx.hooks.on('dev.watch.options', options => ({
-      ...options,
-      ...input.watch.options,
-    }))
-
-  input.client?.scripts &&
-    ctx.hooks.on('dev.client.scripts', scripts => {
-      input.client.scripts.forEach(script => scripts.add(script))
-      return scripts
-    })
-
-  return ctx
+  return app
 }

sources/@roots/bud-api/src/api/methods/watch/index.ts

@@ -1,33 +1,21 @@
 import type {Framework} from '@roots/bud-framework'
-import {chokidar} from '@roots/bud-support'
 
 export interface watch {
   (
     /**
      * Watched files
      */
-    files: Array<string>,
-    /**
-     * Watcher options
-     */
-    options?: chokidar.WatchOptions,
+    ...files: Array<string>
   ): Framework
 }
 
-export const watch: watch = function (files, options = {}) {
-  const ctx = this as Framework
-
-  files = Array.isArray(files) ? files : [files]
+export const watch: watch = function (...input) {
+  const app = this as Framework
 
-  ctx.hooks
-    .on('dev.watch.files', fileSet => {
-      files.forEach(file => fileSet.add(file))
-      return fileSet
-    })
-    .hooks.on('dev.watch.options', hookValue => ({
-      ...(hookValue ?? {}),
-      ...(options ?? {}),
-    }))
+  input = Array.isArray(input) ? input : [input]
+  app.hooks.on('dev.watch.files', files =>
+    input.reduce((files, file) => files.add(file), files),
+  )
 
-  return ctx
+  return app
 }

sources/@roots/bud-build/src/Build/index.ts

@@ -116,21 +116,21 @@ export class Build extends Framework.Service implements Framework.Build {
 
     if (!this.app.hooks.has(`build.${key}`)) return false
 
-    const type = rest.length && rest.shift() ? 'async' : 'sync'
+    const type = rest.length && rest.shift() ? true : false
     const count = this.app.hooks.count(`build.${key}`)
 
     return [key, type, count]
   }
 
   @bind
   @memo()
-  public async memoMapValue([propKey, type, _count]: [
+  public async memoMapValue([propKey, isAsync, _count]: [
     keyof Configuration,
-    'async' | 'sync',
+    boolean,
     number,
   ]) {
     const propValue =
-      type == 'async'
+      isAsync === true
         ? await this.app.hooks.filterAsync(`build.${propKey}` as any)
         : this.app.hooks.filter(`build.${propKey}` as any)
 

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-framework/src/Framework/framework.process.ts

@@ -8,11 +8,13 @@ const {removeSync} = fs
  * Render error
  */
 const renderError = (msg: string, name?: string) => {
-  global.process.stderr.write(
-    boxen(msg, {
+  process.stderr.write(
+    boxen(`\n${msg}\n`, {
       title: name ?? 'error',
       borderStyle: 'bold',
       borderColor: 'red',
+      padding: 1,
+      margin: 1,
     }),
   )
 }
@@ -24,24 +26,26 @@ const curryHandler = function (code: number) {
   const ERROR = code !== 0
 
   const close = () => {
-    if (ERROR) removeSync(this.path('@storage/cache'))
+    process.stdout.write(`\n`)
 
-    global.process.exitCode = code
-    global.process.exit()
+    try {
+      ERROR && removeSync(this.path('@storage/cache'))
+    } catch (err) {}
+
+    process.exitCode = code
+    setTimeout(() => process.exit(), 100)
   }
 
   return (exitMessage: string | Error) => {
-    const exit = () => setTimeout(close, 100).unref()
-
-    if (!ERROR) return exit()
+    if (!ERROR) return close()
 
     if (exitMessage instanceof Error) {
       renderError(exitMessage.message, exitMessage.name)
     } else {
-      renderError(exitMessage, 'error')
+      renderError(`\n${exitMessage}\n`, 'error')
     }
 
-    return exit()
+    return close()
   }
 }
 
@@ -59,12 +63,12 @@ const curryHandler = function (code: number) {
 export const initialize = (app: Framework) => {
   const makeHandler = curryHandler.bind(app)
 
-  global.process
+  process
     // only works when there is no task running
     // because we have a server always listening port, this handler will NEVER execute
     .on('beforeExit', makeHandler(0))
 
-    // only works when the global.process normally exits
+    // only works when the process normally exits
     // on windows, ctrl-c will not trigger this handler (it is unnormal)
     // unless you listen on 'SIGINT'
     .on('exit', makeHandler(0))

sources/@roots/bud-framework/src/Framework/index.ts

@@ -730,6 +730,7 @@ export abstract class Framework {
   @bind
   public error(...messages: any[]) {
     this.logger.instance.error(...messages)
+
     if (this.isProduction) {
       process.exitCode = 1
       process.exit()

sources/@roots/bud-framework/src/Hooks.ts

@@ -202,19 +202,18 @@ export namespace Hooks {
   export interface Map
     extends Server.Middleware.Middleware<`options`>,
       Server.Middleware.Middleware<`factory`>,
+      Server.Connection.OptionsMap,
       LocationKeyMap,
       ConfigMap {
     [`extension`]: ValueOf<Plugins> | ValueOf<Modules>
-    [`dev.ssl.enabled`]: boolean
-    [`dev.ssl.cert`]: string
-    [`dev.ssl.key`]: string
-    [`dev.ssl.port`]: number
+    [`dev.options`]: Server.Connection.Options
     [`dev.url`]: URL
     [`dev.watch.files`]: Set<string>
     [`dev.watch.options`]: WatchOptions
     [`dev.client.scripts`]: Set<(app: Framework) => string>
     [`middleware.enabled`]: Array<keyof Server.Middleware.Available>
     [`middleware.proxy.target`]: URL
+    [`middleware.proxy.replacements`]: Array<[string, string]>
 
     // here down is wack
     [key: Server.Middleware.OptionsKey]: any