chore: get rid of debug logs on prod

packages/ui/src/components/base/Avatar.vue

@@ -51,9 +51,10 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
 
-import { useFullImageContextMenu } from '../../composables'
+import { useDebugLogger, useFullImageContextMenu } from '../../composables'
 
 const onFullImageContextMenu = useFullImageContextMenu()
+const debug = useDebugLogger('Avatar')
 
 const pixelated = ref(false)
 const hasTransparentCorners = ref(false)
@@ -141,7 +142,7 @@ function clearDetectionTimeout() {
 function onError(e) {
 	clearDetectionTimeout()
 	detectingSource = undefined
-	console.log('Avatar image failed to load:', props.src, e)
+	debug('Avatar image failed to load:', props.src, e)
 	failed.value = true
 }
 

packages/ui/src/components/billing/AddPaymentMethod.vue

@@ -3,8 +3,11 @@ import { createStripeElements } from '@modrinth/utils'
 import { loadStripe, type Stripe as StripsJs, type StripeElements } from '@stripe/stripe-js'
 import { ref } from 'vue'
 
+import { useDebugLogger } from '../../composables/debug-logger'
 import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 
+const debug = useDebugLogger('AddPaymentMethod')
+
 const emit = defineEmits<{
 	(e: 'startLoading' | 'stopLoading'): void
 }>()
@@ -70,7 +73,7 @@ async function submit(): Promise<boolean> {
 		},
 	})
 
-	console.log(result)
+	debug(result)
 
 	const { error } = result
 

packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue

@@ -15,6 +15,7 @@ import { computed, nextTick, onBeforeUnmount, ref, toRef, useTemplateRef, watch
 import { Button } from '#ui/components/base/buttons'
 import { injectNotificationManager } from '#ui/providers/web-notifications.ts'
 
+import { useDebugLogger } from '../../composables/debug-logger'
 import { defineMessage, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { useStripe } from '../../composables/stripe'
 import { commonMessages } from '../../utils'
@@ -28,6 +29,7 @@ import ConfirmPurchase from './ServersPurchase3Review.vue'
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
 const queryClient = useQueryClient()
+const debug = useDebugLogger('ModrinthServersPurchaseModal')
 
 export type RegionPing = {
 	region: string
@@ -246,7 +248,7 @@ const nextStep = computed(() => {
 const canProceed = computed(() => {
 	switch (currentStep.value) {
 		case 'plan':
-			console.log('Plan step:', {
+			debug('Plan step:', {
 				customServer: customServer.value,
 				selectedPlan: selectedPlan.value,
 				existingPlan: props.existingPlan,

packages/ui/src/components/billing/PurchaseModal.vue

@@ -466,6 +466,7 @@ import { calculateSavings, createStripeElements, getCurrency } from '@modrinth/u
 import dayjs from 'dayjs'
 import { computed, nextTick, reactive, ref, watch } from 'vue'
 
+import { useDebugLogger } from '../../composables/debug-logger'
 import { useVIntl } from '../../composables/i18n'
 import { useFormatDateTime, useFormatPrice } from '../../composables/index.ts'
 import { paymentMethodMessages } from '../../utils/common-messages'
@@ -481,6 +482,7 @@ import NewModal from '../modal/NewModal.vue'
 const { formatMessage } = useVIntl()
 const formatPrice = useFormatPrice()
 const formatDate = useFormatDateTime({ dateStyle: 'long' })
+const debug = useDebugLogger('PurchaseModal')
 
 const props = defineProps({
 	product: {
@@ -648,7 +650,7 @@ const updateCustomServerStock = async () => {
 						mutatedProduct.value,
 					)
 					customOutOfStock.value = capacityStatus.custom?.available === 0
-					console.log(capacityStatus)
+					debug(capacityStatus)
 				}
 			} else {
 				const capacityStatus = await props.fetchCapacityStatuses(mutatedProduct.value)

packages/ui/src/components/chart/Chart.vue

@@ -147,8 +147,7 @@ const chartOptions = ref({
 		},
 	},
 	tooltip: {
-		custom({ series, seriesIndex, dataPointIndex, w }) {
-			console.log(seriesIndex, w)
+		custom({ series, dataPointIndex, w }) {
 			return (
 				`<div class="bar-tooltip">` +
 				`<div class="seperated-entry title">` +

packages/ui/src/components/chart/CompactChart.vue

@@ -118,8 +118,7 @@ const chartOptions = ref({
 		},
 	},
 	tooltip: {
-		custom({ series, seriesIndex, dataPointIndex, w }) {
-			console.log(seriesIndex, w)
+		custom({ series, dataPointIndex, w }) {
 			return `<div class="bar-tooltip">${series
 				.map((value) =>
 					value[dataPointIndex] > 0

packages/ui/src/components/modal/ShareModal.vue

@@ -15,8 +15,11 @@ import { computed, nextTick, ref } from 'vue'
 import { ButtonLink, IconButton } from '#ui/components/base/buttons'
 import { injectNotificationManager } from '#ui/providers'
 
+import { useDebugLogger } from '../../composables/debug-logger'
 import { NewModal, Textarea } from '../index'
 
+const debug = useDebugLogger('ShareModal')
+
 const props = defineProps({
 	header: {
 		type: String,
@@ -83,11 +86,11 @@ const show = async (passedContent) => {
 	if (props.link) {
 		url.value = passedContent
 		nextTick(() => {
-			console.log(qrCode.value)
+			debug(qrCode.value)
 			fetch(qrCode.value.getElementsByTagName('canvas')[0].toDataURL('image/png'))
 				.then((res) => res.blob())
 				.then((blob) => {
-					console.log(blob)
+					debug(blob)
 					qrImage.value = blob
 				})
 		})

packages/ui/src/components/skin/CapeButton.vue

@@ -21,8 +21,6 @@ const props = withDefaults(
 	},
 )
 
-console.log(props)
-
 const highlighted = computed(() => props.selected ?? props.isEquipped)
 </script>
 

packages/ui/src/composables/debug-logger.ts

@@ -18,7 +18,11 @@ function getCallerLocation(): string {
 	}
 }
 
+const noop = () => {}
+
 export function useDebugLogger(namespace: string) {
+	if (process.env.NODE_ENV === 'production') return noop
+
 	// eslint-disable-next-line
 	return (...args: any[]) => {
 		const location = getCallerLocation()

packages/ui/src/composables/skin-rendering/use-skin-preview-animation.ts

@@ -2,8 +2,11 @@ import { useRenderLoop } from '@tresjs/core'
 import * as THREE from 'three'
 import { computed, type ComputedRef, type Ref, ref, watch } from 'vue'
 
+import { useDebugLogger } from '../debug-logger'
 import type { SkinPreviewAnimationConfig } from './types'
 
+const debug = useDebugLogger('SkinPreviewAnimation')
+
 type AnimationFinishedListener = (
 	event: THREE.AnimationMixerEventMap['finished'] & {
 		readonly type: 'finished'
@@ -103,7 +106,7 @@ export function useSkinPreviewAnimation(
 		const action = actions.value[name]
 
 		if (currentAnimation.value === name && action.isRunning() && name !== baseAnimation.value) {
-			console.log(`Animation "${name}" is already running, ignoring request`)
+			debug(`Animation "${name}" is already running, ignoring request`)
 			return false
 		}
 
@@ -196,7 +199,7 @@ export function useSkinPreviewAnimation(
 		const action = actions.value[name]
 
 		if (currentAnimation.value === name && action.isRunning()) {
-			console.log(`Animation "${name}" is already running, ignoring request`)
+			debug(`Animation "${name}" is already running, ignoring request`)
 			return
 		}
 

packages/ui/src/composables/skin-rendering/use-skin-preview-fit.ts

@@ -10,6 +10,7 @@ import {
 	watch,
 } from 'vue'
 
+import { useDebugLogger } from '../debug-logger'
 import type {
 	SkinPreviewBounds,
 	SkinPreviewFitLock,
@@ -18,6 +19,8 @@ import type {
 	SkinPreviewTuple,
 } from './types'
 
+const debug = useDebugLogger('SkinPreviewFit')
+
 const FRAMING_PRESETS = {
 	page: {
 		fov: 35,
@@ -456,7 +459,7 @@ export function useSkinPreviewFit({
 
 		entries.push(snapshot)
 		if (entries.length > 100) entries.splice(0, entries.length - 100)
-		console.log('[SkinPreviewDebug]', snapshot)
+		debug(snapshot)
 	}
 
 	function queueDebugSnapshot(reason: string) {

packages/ui/src/composables/stripe.ts

@@ -6,6 +6,7 @@ import { computed, type Ref, ref } from 'vue'
 
 import type { ServerBillingInterval } from '../components/billing/ModrinthServersPurchaseModal.vue'
 import { getPriceForInterval } from '../utils/product-utils'
+import { useDebugLogger } from './debug-logger'
 
 // export type CreateElements = (
 //   paymentMethods: Stripe.PaymentMethod[],
@@ -35,6 +36,8 @@ export const useStripe = (
 	onError: (err: Error) => void,
 	affiliateCode?: Ref<string | null>,
 ) => {
+	const debug = useDebugLogger('Stripe')
+
 	const stripe = ref<StripeJs | null>(null)
 
 	let elements: StripeElements | undefined = undefined
@@ -188,7 +191,7 @@ export const useStripe = (
 			}
 		} catch (err) {
 			loadingFailed.value = String(err)
-			console.log(err)
+			console.error(err)
 		}
 	}
 
@@ -241,7 +244,7 @@ export const useStripe = (
 				total.value = result.total
 				noPaymentRequired.value = false
 
-				console.log(
+				debug(
 					`${paymentIntentId.value ? 'Updated' : 'Created'} payment intent: ${interval.value} for ${result.total}`,
 				)
 			}
@@ -392,8 +395,8 @@ export const useStripe = (
 	}
 
 	async function reloadPaymentIntent() {
-		console.log('selected:', selectedPaymentMethod.value)
-		console.log('token:', confirmationToken.value)
+		debug('selected:', selectedPaymentMethod.value)
+		debug('token:', confirmationToken.value)
 		if (selectedPaymentMethod.value) {
 			await refreshPaymentIntent(selectedPaymentMethod.value.id, false)
 		} else if (confirmationToken.value) {

packages/ui/src/layouts/wrapped/hosting/manage/root.vue

@@ -879,10 +879,10 @@ const popupOptions = computed(
 				modpack_id: serverProject.value?.id,
 				modpack_name: serverProject.value?.title,
 			},
-			onOpen: () => console.log(`Opened survey notice: ${surveyNotice.value?.id}`),
+			onOpen: () => debug(`Opened survey notice: ${surveyNotice.value?.id}`),
 			onClose: async () => await dismissSurvey(),
 			onSubmit: (payload: unknown) => {
-				console.log('Form submitted:', payload)
+				debug('Form submitted:', payload)
 			},
 		}) satisfies TallyPopupOptions,
 )