feat(DX): hide (most) Vue warnings from bootstrap-vue components

src/main.js

@@ -13,8 +13,14 @@ import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css'
 import '../node_modules/bootstrap/scss/bootstrap.scss'
 import './assets/custom.scss'
 import './assets/styles/tailwind.css'
+import { shouldLog } from '@/utilities'
 
 const app = createApp(App)
+app.config.warnHandler = (message, instance, trace) => {
+  if (shouldLog(message, instance, trace)) {
+    console.warn(`[Vue warn]: ${message}`, trace)
+  }
+}
 
 app.use(store)
 app.use(router)

src/utilities.js

@@ -47,3 +47,17 @@ export function useSelectedShow() {
     return store.state.shows.shows[store.state.shows.selected.index]
   })
 }
+export function shouldLog(message, instance, trace) {
+  // don’t log any Bootstrap-Vue warnings
+  if (/^B[A-Z]/.test(instance?.$options?.name ?? '')) {
+    return false
+  }
+  if (!instance && /^at <B[A-Z]/.test(trace)) {
+    return false
+  }
+  if (/Functional component <B[A-Z]/.test(message)) {
+    return false
+  }
+
+  return instance?.$parent ? shouldLog(message, instance.$parent) : true
+}