fix(SSR): explicitly load KtNavbar as a component

A change in the template of NavBar.vue produced a very hard to trace down bug
which caused the navbar to not render in the documentation. Although the source
of this bug could not be made out, it seemed to have to do with how nuxt is
resolving components. Adding an explicit import of KtNavbar in the file (and
therefore not relying on the kotti-ui plugin for nuxt) fixes this.

As the file change that triggered this is very unrelated and it would be impossible
to see this very unrelated effect in code review, a test was added that should at
least stop the very same event to occur

Co-Authored-By: Florian Wendelborn <[email protected]>

packages/documentation/components/NavBar.vue

@@ -15,6 +15,7 @@
 
 <script lang="ts">
 import type { Kotti } from '@3yourmind/kotti-ui'
+import { KtNavbar } from '@3yourmind/kotti-ui'
 import { computed, defineComponent, ref } from 'vue'
 
 import navLogo from '../assets/img/nav_logo.svg'
@@ -38,6 +39,9 @@ const saveSavedFieldsToLocalStorage = (isNarrow: boolean) => {
 
 export default defineComponent({
 	name: 'NavBar',
+	components: {
+		KtNavbar,
+	},
 	setup() {
 		const route = useRoute()
 

packages/documentation/package.json

@@ -41,7 +41,7 @@
 	},
 	"private": true,
 	"scripts": {
-		"build": "nuxt generate",
+		"build": "nuxt generate && ./scripts/test-for-ssr-bug.sh",
 		"check:eslint": "eslint --max-warnings=0 .",
 		"check:prettier": "yarn --cwd ../.. run prettier --check --ignore-path=.gitignore ./packages/documentation",
 		"check:stylelint": "stylelint './**/*.{css,scss,vue}'",

packages/documentation/scripts/test-for-ssr-bug.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+if grep '</ktnavbar>' ./dist/index.html;
+then echo "The output of nuxt contains a 'ktnavbar' tag, this might be the result of a strange SSR bug" && false;
+else true;
+fi

packages/kotti-ui/source/kotti-navbar/KtNavbar.vue

@@ -93,6 +93,7 @@ export default defineComponent({
 		watch(
 			() => props.theme,
 			(newTheme) => {
+				if (typeof document === 'undefined') return
 				const rootElement = document.querySelector(':root') as HTMLElement
 
 				rootElement.style.setProperty(