style: added BaseTabs and BaseTab functional components for unified tab displaying; workflow: added .js files check when purging in prod

src/components/globals/BaseTabs.js

@@ -0,0 +1,33 @@
+import { defineComponent } from '@vue/composition-api'
+
+// https://vuejs.org/v2/guide/render-function.html
+// https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
+export const BaseTab = defineComponent({
+	name: 'BaseTab',
+	functional: true,
+	render(h, ctx) {
+		return h(
+			'li',
+			{
+				class: [ctx.data.class, 'section-tabs__tab', 'uppercase-first-letter'],
+				on: ctx.data.on
+			},
+			ctx.slots().default
+		)
+	}
+})
+
+export const BaseTabs = defineComponent({
+	name: 'BaseTabs',
+	functional: true,
+	render(h, ctx) {
+		return h(
+			'ul',
+			{
+				class: [ctx.data.class, 'my-8', 'section-tabs'],
+				on: ctx.data.on
+			},
+			ctx.slots().default
+		)
+	}
+})

src/components/pages/Artist.vue

@@ -13,17 +13,16 @@
 			</div>
 		</header>
 
-		<ul class="my-8 section-tabs">
+		<BaseTabs>
-			<li
+			<BaseTab
 				v-for="(item, name) in artistReleases"
 				:key="name"
-				class="section-tabs__tab uppercase-first-letter"
 				@click="changeTab(name)"
 				:class="{ active: currentTab === name }"
 			>
 				{{ $tc(`globals.listTabs.${name}`, 2) }}
-			</li>
+			</BaseTab>
-		</ul>
+		</BaseTabs>
 
 		<table class="table">
 			<thead>
@@ -82,6 +81,8 @@
 import { defineComponent, ref, unref, reactive, computed, onMounted, toRefs } from '@vue/composition-api'
 import { orderBy } from 'lodash-es'
 
+import { BaseTabs, BaseTab } from '@components/globals/BaseTabs'
+
 import { socket } from '@/utils/socket'
 import { sendAddToQueue } from '@/utils/downloads'
 import { checkNewRelease } from '@/utils/dates'
@@ -89,6 +90,10 @@ import { formatArtistData, getArtistData } from '@/data/artist'
 import { standardizeData } from '@/data/standardize'
 
 export default defineComponent({
+	components: {
+		BaseTabs,
+		BaseTab
+	},
 	setup(props, ctx) {
 		const state = reactive({
 			currentTab: '',

src/components/pages/Favorites.vue

@@ -13,17 +13,11 @@
 			</div>
 		</h1>
 
-		<ul class="section-tabs">
+		<BaseTabs>
-			<li
+			<BaseTab v-for="tab in tabs" :key="tab" :class="{ active: activeTab === tab }" @click="activeTab = tab">
-				v-for="tab in tabs"
-				:key="tab"
-				class="section-tabs__tab favorites_tablinks"
-				:class="{ active: activeTab === tab }"
-				@click="activeTab = tab"
-			>
 				{{ $tc(`globals.listTabs.${tab}`, 2) }}
-			</li>
+			</BaseTab>
-		</ul>
+		</BaseTabs>
 
 		<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
 			{{ $t('globals.download', { thing: $tc(`globals.listTabs.${activeTab}N`, getTabLenght()) }) }}
@@ -197,11 +191,14 @@ import { getFavoritesData } from '@/data/favorites'
 import EventBus from '@/utils/EventBus'
 import PreviewControls from '@components/globals/PreviewControls.vue'
 import CoverContainer from '@components/globals/CoverContainer.vue'
+import { BaseTabs, BaseTab } from '@components/globals/BaseTabs'
 
 export default {
 	components: {
 		PreviewControls,
-		CoverContainer
+		CoverContainer,
+		BaseTabs,
+		BaseTab
 	},
 	data() {
 		return {

src/components/pages/Search.vue

@@ -6,17 +6,16 @@
 		</div>
 
 		<div v-show="showSearchTab">
-			<ul class="section-tabs">
+			<BaseTabs>
-				<li
+				<BaseTab
-					class="section-tabs__tab"
 					v-for="tab in tabs"
 					:key="tab.name"
 					@click="currentTab = tab"
 					:class="{ active: currentTab.name === tab.name }"
 				>
 					{{ tab.name }}
-				</li>
+				</BaseTab>
-			</ul>
+			</BaseTabs>
 
 			<keep-alive>
 				<component
@@ -38,6 +37,7 @@ import ResultsAlbums from '@components/search/ResultsAlbums.vue'
 import ResultsArtists from '@components/search/ResultsArtists.vue'
 import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
 import ResultsTracks from '@components/search/ResultsTracks.vue'
+import { BaseTabs, BaseTab } from '@components/globals/BaseTabs'
 
 import { socket } from '@/utils/socket'
 import { sendAddToQueue } from '@/utils/downloads'
@@ -51,7 +51,9 @@ const resetObj = { data: [], next: 0, total: 0, hasLoaded: false }
 
 export default {
 	components: {
-		BaseLoadingPlaceholder
+		BaseLoadingPlaceholder,
+		BaseTabs,
+		BaseTab
 	},
 	props: {
 		performScrolledSearch: {

src/data/artist.js

@@ -34,26 +34,16 @@ function formatArtistReleases(artistReleases) {
 	return formattedReleases
 }
 
-let artistData = {}
-let cached = false
-
 export function getArtistData(artistID) {
-	if (cached) {
+	socket.emit('getTracklist', {
-		return artistData
+		type: 'artist',
-	} else {
+		id: artistID
-		socket.emit('getTracklist', {
+	})
-			type: 'artist',
-			id: artistID
-		})
 
-		return new Promise((resolve, reject) => {
+	return new Promise((resolve, reject) => {
-			socket.on('show_artist', data => {
+		socket.on('show_artist', data => {
-				artistData = data
+			socket.off('show_artist')
-				// cached = true
+			resolve(data)
-
-				socket.off('show_artist')
-				resolve(data)
-			})
 		})
-	}
+	})
 }

tailwind.config.js

@@ -7,7 +7,7 @@ module.exports = {
 	},
 	purge: {
 		// https://medium.com/@kyis/vue-tailwind-purgecss-the-right-way-c70d04461475
-		content: [`./public/**/*.html`, `./src/**/*.vue`],
+		content: [`./public/**/*.html`, `./src/**/*.vue`, `./src/**/*.js`],
 		defaultExtractor(content) {
 			const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
 			return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []