fix(components): hide dev (#44)

* fix: hide dev if disabled in config

* fix: hide dev

* fix: show dev

* fix: hide products on content projections

* test(dev): add missing composable mock

app.config.ts

@@ -3,7 +3,7 @@ import { FSXAFileConfig } from "./types";
 
 const fsxaConfig: FSXAFileConfig = {
   logLevel: LogLevel.NONE,
-  devMode: true,
+  devMode: false,
   defaultLocale: "de_DE",
   enableEventStream: false,
 };

components/Dev.vue

@@ -83,7 +83,7 @@
         </button>
 
         <button
-          v-if="products"
+          v-if="products && !isContentProjection"
           class="rounded-t p-2 font-bold text-white"
           :class="{
             'bg-gray-800 ': activeItem === 'products',

components/Elements/UnknownRichtextElement.vue

@@ -4,6 +4,7 @@
     data-testid="unknown"
   >
     <Dev
+      v-if="showDev"
       :content="richTextElement"
       class="hidden group-hover:block"
       component-name="unknown richtext element"
@@ -17,4 +18,6 @@ import { RichTextElement } from "fsxa-api/dist/types";
 defineProps<{
   richTextElement?: RichTextElement;
 }>();
+
+const { showDev } = useDev();
 </script>

components/Page/Body.vue

@@ -6,8 +6,9 @@
       class="group relative my-10"
       data-testid="pageBodyChild"
     >
-      <DevOnly v-if="appDevMode || envDevMode">
+      <DevOnly>
         <Dev
+          v-if="showDev"
           :content="pageBodyContent"
           :dataset="currentDataset"
           class="hidden group-hover:block"
@@ -27,9 +28,8 @@ import { PageBody, PageBodyContent } from "fsxa-api";
 
 defineProps<{ pageBody: PageBody }>();
 
-const { devMode: appDevMode } = useAppConfig();
-const { devMode: envDevMode } = useRuntimeConfig();
 const { currentDataset } = useContent();
+const { showDev } = useDev();
 
 function getComponentFromPageBodyContent(pageBodyContent: PageBodyContent) {
   switch (pageBodyContent.type) {

components/PageBodyContent/Content2Section.vue

@@ -1,7 +1,7 @@
 <template>
   <div data-testid="content2section">
-    <DevOnly v-if="!content2SectionComponent">
-      <Unknown :content="content" />
+    <DevOnly>
+      <Unknown v-if="showDev" :content="content" />
     </DevOnly>
     <component :is="content2SectionComponent" :content="content" />
   </div>
@@ -12,6 +12,8 @@ import { Content2Section } from "fsxa-api";
 
 const props = defineProps<{ content: Content2Section }>();
 
+const { showDev } = useDev();
+
 const content2SectionComponent = computed(() => {
   switch (props.content.sectionType) {
     // TODO

components/PageBodyContent/Dataset.vue

@@ -1,7 +1,8 @@
 <template>
   <div data-testid="dataset">
-    <DevOnly v-if="!datasetComponent">
-      <Unknown :content="content" />
+    <DevOnly>
+      <Unknown v-if="!datasetComponent && showDev"></Unknown>
+      :content="content" />
     </DevOnly>
     <component
       :is="datasetComponent"
@@ -15,6 +16,8 @@
 import { Dataset } from "fsxa-api";
 const props = defineProps<{ content: Dataset }>();
 
+const { showDev } = useDev();
+
 const datasetComponent = computed(() => {
   switch (props.content.template) {
     // TODO

components/PageBodyContent/Section.vue

@@ -1,11 +1,11 @@
 <template>
   <div data-testid="section">
-    <DevOnly v-if="!sectionComponent">
-      <Unknown :content="content" />
+    <DevOnly>
+      <Unknown v-if="!sectionComponent && showDev" :content="content" />
     </DevOnly>
     <component
       :is="sectionComponent"
-      v-else
+      v-if="sectionComponent"
       :data-preview-id="content.previewId"
       :data="content.data"
     />
@@ -16,6 +16,8 @@
 import { Section } from "fsxa-api";
 const props = defineProps<{ content: Section }>();
 
+const { showDev } = useDev();
+
 const sectionComponent = computed(() => {
   switch (props.content.sectionType) {
     case "interesting_facts":

components/Section/Header.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="group relative h-64" data-testid="headerSection">
-    <DevOnly v-if="appDevMode || envDevMode">
+    <DevOnly>
       <Dev
+        v-if="showDev"
         :content="data"
         class="hidden group-hover:block"
         component-name="Page Header"
@@ -38,8 +39,8 @@
 import { DataEntries } from "fsxa-api";
 
 defineProps<{ data: DataEntries }>();
-const { devMode: appDevMode } = useAppConfig();
-const { devMode: envDevMode } = useRuntimeConfig();
+
+const { showDev } = useDev();
 
 const breadcrumbs = computed(() => {
   const { slug } = useRoute().params;

components/Section/Slider.vue

@@ -1,8 +1,9 @@
 <template>
   <div data-testid="sliderSection">
     <div class="group relative">
-      <DevOnly v-if="appDevMode || envDevMode">
+      <DevOnly>
         <Dev
+          v-if="showDev"
           :content="data"
           class="hidden group-hover:block"
           component-name="Slider"
@@ -73,6 +74,8 @@
 <script setup lang="ts">
 import { Image, RichTextElement, Section } from "fsxa-api";
 
+const { showDev } = useDev();
+
 interface SliderSlide extends Section {
   data: {
     st_button: {
@@ -88,9 +91,6 @@ interface SliderSlide extends Section {
   };
 }
 
-const { devMode: appDevMode } = useAppConfig();
-const { devMode: envDevMode } = useRuntimeConfig();
-
 const props = defineProps<{ data: SliderSlide[] }>();
 
 const activeImageIndex = ref(0);

components/Unknown.vue

@@ -4,6 +4,7 @@
     data-testid="unknown"
   >
     <Dev
+      v-if="showDev"
       :content="content"
       class="hidden group-hover:block"
       component-name="unknown section"
@@ -17,6 +18,8 @@ const props = defineProps<{
   content?: Section | Dataset | Content2Section | Page;
 }>();
 
+const { showDev } = useDev();
+
 const componentType = computed(() => {
   switch (props.content?.type) {
     case "Section":

composables/showDev.ts

@@ -0,0 +1,4 @@
+export function useDev() {
+  const showDev = useState<boolean>("showDev");
+  return { showDev };
+}

pages/[...slug].vue

@@ -9,7 +9,7 @@
       :page="currentPage"
     />
     <DevOnly>
-      <div class="fixed top-0 right-0 z-30">
+      <div v-if="showDev" class="fixed top-0 right-0 z-30">
         <Dev v-if="currentPage" :content="currentPage" component-name="page" />
       </div>
     </DevOnly>
@@ -30,6 +30,8 @@ const { activeLocale } = useLocale();
 const { activeNavigationItem } = useNavigationData();
 const currentRoute = decodeURIComponent(useRoute().path);
 
+const { showDev } = useDev();
+
 // fetch page and dataset
 const { pending } = useAsyncData(async () => {
   // This state should not be possible.

plugins/1.setupRemoteApi.server.ts

@@ -10,6 +10,9 @@ export default defineNuxtPlugin(() => {
   const runtimeConfig = useRuntimeConfig(); // .env
   const appConfig = useAppConfig(); // app.config.ts
 
+  const { showDev } = useDev();
+  showDev.value = !!(appConfig?.devMode || runtimeConfig?.private?.devMode);
+
   const remoteApiConfig: FSXARemoteApiConfig = {
     apikey: runtimeConfig.private.apiKey,
     caasURL: runtimeConfig.private.caas,

tests/testutils/nuxtMocks.ts

@@ -5,6 +5,7 @@ import toplevelDE from "../fixtures/toplevelNavigation_de_DE.json";
 import toplevelEN from "../fixtures/toplevelNavigation_en_GB.json";
 import page from "../fixtures/page.json";
 import projectProperties from "../fixtures/projectProperties.json";
+import { useDev } from "../../composables/showDev";
 import { useLocale } from "../../composables/locale";
 import { useContent } from "../../composables/content";
 import { useNavigationData } from "../../composables/navigation";
@@ -98,6 +99,7 @@ export function useRouter() {
 }
 
 export {
+  useDev,
   useLocale,
   fetchTopLevelNavigation,
   fetchNavigationItemFromRoute,

vitest.config.ts

@@ -24,6 +24,7 @@ export default defineConfig({
             "useRouter",
             "useNuxtApp",
             "useHead",
+            "useDev",
             "navigateTo",
             "createError",
             "definePageMeta",