feat: adapt to changes in rmnd_headless_solr and update eslint config

.eslintrc

@@ -1,6 +1,3 @@
 {
-    "extends": ["@remindgmbh/eslint-config-nuxt"],
-    "settings": {
-        "import/ignore": ["vee-validate"]
-    }
+    "extends": ["@remindgmbh/eslint-config-nuxt"]
 }

package.json

@@ -32,23 +32,23 @@
         "typecheck": "nuxi typecheck"
     },
     "dependencies": {
-        "@nuxt/kit": "^3.8.2",
+        "@nuxt/kit": "^3.10.1",
         "defu": "^6.1.3"
     },
     "peerDependencies": {
         "@remindgmbh/nuxt-typo3": "^4.0.0 || ^4.0.0-develop"
     },
     "devDependencies": {
-        "@nuxt/module-builder": "^0.5.4",
-        "@nuxt/schema": "^3.8.2",
-        "@remindgmbh/eslint-config-nuxt": "^1.0.5",
+        "@nuxt/module-builder": "^0.5.5",
+        "@nuxt/schema": "^3.10.1",
+        "@remindgmbh/eslint-config-nuxt": "^1.3.0",
         "@remindgmbh/nuxt-typo3": "^4.0.0-develop",
-        "@types/node": "^20.9.4",
-        "eslint": "^8.54.0",
-        "nuxt": "^3.8.2",
-        "prettier": "^3.1.0",
-        "typescript": "^5.3.2",
-        "vue-tsc": "^1.8.22"
+        "@types/node": "^20.11.17",
+        "eslint": "^8.56.0",
+        "nuxt": "^3.10.1",
+        "prettier": "^3.2.5",
+        "typescript": "^5.3.3",
+        "vue-tsc": "^1.8.27"
     },
     "volta": {
         "node": "20.9.0"

playground/app.vue

@@ -25,9 +25,9 @@
                 </template>
             </div>
             <T3SolrSearchForm
-                v-if="currentSearchForm"
-                :search-form="currentSearchForm"
+                v-if="searchForm"
                 default-value=""
+                :search-form="searchForm"
             />
         </T3TopbarLayoutHeader>
         <T3TopbarLayoutContent>
@@ -37,9 +37,9 @@
 </template>
 
 <script setup lang="ts">
-import { useT3Navigation, useT3SolrData, useT3Languages } from '#imports'
+import { useT3Languages, useT3Navigation, useT3SolrData } from '#imports'
 
 const { rootPageNavigation } = useT3Navigation()
-const { currentSearchForm } = useT3SolrData()
+const { searchForm } = useT3SolrData()
 const { availableLanguages } = useT3Languages()
 </script>

playground/nuxt.config.ts

@@ -1,36 +1,27 @@
 export default defineNuxtConfig({
+    components: [
+        {
+            global: true,
+            path: '@/components',
+        },
+    ],
+    imports: {
+        autoImport: false,
+    },
+    modules: ['@remindgmbh/nuxt-typo3', '@remindgmbh/nuxt-typo3-solr'],
     runtimeConfig: {
         public: {
             typo3: {
-                baseUrl: '',
                 api: {
                     baseUrl: '',
                 },
+                baseUrl: '',
                 cookiebotUid: '',
             },
         },
     },
-    components: [
-        {
-            path: '@/components',
-            global: true,
-        },
-    ],
     typescript: {
         shim: false,
         strict: true,
     },
-    modules: ['@remindgmbh/nuxt-typo3', '@remindgmbh/nuxt-typo3-solr'],
-    vite: {
-        server: {
-            hmr: {
-                protocol: 'wss',
-                clientPort: 443,
-                path: 'hmr/',
-            },
-        },
-    },
-    imports: {
-        autoImport: false,
-    },
 })

src/module.ts

@@ -3,32 +3,19 @@ import {
     addImports,
     addImportsDir,
     addPlugin,
-    addRouteMiddleware,
     createResolver,
     defineNuxtModule,
 } from '@nuxt/kit'
-import { defu } from 'defu'
 import { name, version } from '../package.json'
+import { defu } from 'defu'
 
 export const CONFIG_KEY = 'typo3Solr'
 
-export interface ModuleOptions {
-    api: {
-        // Type number of global search, only required if changed in backend
-        searchType?: number
-    }
-}
-
-export default defineNuxtModule<ModuleOptions>({
+export default defineNuxtModule({
     meta: {
+        configKey: CONFIG_KEY,
         name,
         version,
-        configKey: CONFIG_KEY,
-    },
-    defaults: {
-        api: {
-            searchType: 7385,
-        },
     },
     setup(options, nuxt) {
         const resolver = createResolver(import.meta.url)
@@ -43,21 +30,16 @@ export default defineNuxtModule<ModuleOptions>({
         addPlugin({
             src: resolver.resolve('runtime/plugins/i18n'),
         })
-        addRouteMiddleware({
-            name: 't3-solr-data',
-            path: resolver.resolve('runtime/middleware/data.global'),
-            global: true,
-        })
         addImportsDir(resolver.resolve('runtime/composables/**/*'))
         addImports({
+            as: 'T3SolrModel',
             from: resolver.resolve('runtime/models'),
             name: '*',
-            as: 'T3SolrModel',
         })
         addComponentsDir({
+            global: true,
             path: resolver.resolve('runtime/components'),
             pathPrefix: false,
-            global: true,
         })
     },
 })

src/runtime/components/content/helper/T3SolrSearchForm.vue

@@ -2,29 +2,29 @@
     <form ref="formRef" class="t3-solr-search-form" @submit="submit">
         <T3Autocomplete
             class="t3-solr-search-form__input"
+            :default-value="defaultValue ?? query"
             :disabled="loading"
             :name="inputName"
-            :placeholder="placeholder"
-            :default-value="defaultValue ?? query"
             :option-groups="optionGroups"
+            :placeholder="placeholder"
             @input="onInput"
             @select="onSelect"
         />
         <button
             class="t3-solr-search-form__submit"
-            type="submit"
             :disabled="loading"
+            type="submit"
         >
-            <slot name="submit" :loading="loading">
+            <slot :loading="loading" name="submit">
                 {{ submitLabel }}
             </slot>
         </button>
     </form>
 </template>
 
 <script setup lang="ts">
-import { ref, toRef } from 'vue'
 import { T3SolrModel, useT3SolrSearchForm } from '#imports'
+import { ref, toRef } from 'vue'
 
 const props = defineProps<{
     searchForm: T3SolrModel.Typo3.SearchForm
@@ -38,8 +38,8 @@ const {
     loading,
     optionGroups,
     placeholder,
-    query,
     submitLabel,
+    query,
     onInput,
     submit,
 } = useT3SolrSearchForm(toRef(() => props.searchForm))

src/runtime/composables/content/useT3SolrSearchForm.ts

@@ -1,11 +1,10 @@
-import { computed, ref, type Ref } from 'vue'
-import { navigateTo } from '#app'
-import { useI18n } from 'vue-i18n'
-import { useForm } from 'vee-validate'
+import { type Ref, computed, ref } from 'vue'
+import { type T3Model, type T3SolrModel, useRoute, useT3Api } from '#imports'
 import { type RouteLocationRaw } from 'vue-router'
 import { debounce } from 'perfect-debounce'
-import { Input } from '@remindgmbh/nuxt-typo3/dist/runtime/models'
-import { T3SolrModel, useT3Api, useRoute } from '#imports'
+import { navigateTo } from '#app'
+import { useForm } from 'vee-validate'
+import { useI18n } from 'vue-i18n'
 
 export function useT3SolrSearchForm(
     searchForm: Ref<T3SolrModel.Typo3.SearchForm>,
@@ -15,11 +14,11 @@ export function useT3SolrSearchForm(
     const route = useRoute()
     const { handleSubmit } = useForm()
     const { t } = useI18n()
-    const optionGroups = ref<Input.Autocomplete.OptionGroup[]>([])
+    const optionGroups = ref<T3Model.Input.Autocomplete.OptionGroup[]>([])
     const loading = ref(false)
 
-    const query = computed(
-        () => route.query[searchForm.value.search.queryParam]?.toString(),
+    const query = computed(() =>
+        route.query[searchForm.value.search.queryParam]?.toString(),
     )
 
     const placeholder = computed(() => t('solr.placeholder'))
@@ -54,8 +53,8 @@ export function useT3SolrSearchForm(
                 ),
             },
             {
-                name: 'links',
                 label: t('solr.topResults'),
+                name: 'links',
                 options: (suggestions.documents ?? []).map((document) => ({
                     key: document.link ? document.link : document.title,
                     label: document.title,
@@ -99,6 +98,7 @@ export function useT3SolrSearchForm(
         placeholder,
         query,
         submitLabel,
+
         getRoute,
         onInput: debounce(onInput, 300),
         submit,

src/runtime/composables/useT3SolrData.ts

@@ -1,62 +1,14 @@
-import { type Ref, computed } from 'vue'
-import { useLogger } from '#imports'
-import { Typo3 } from '../models'
-import {
-    useRuntimeConfig,
-    useState,
-    useT3Api,
-    useT3Data,
-    useRoute,
-} from '#imports'
+import { type T3SolrModel, useT3Data } from '#imports'
+import { computed } from 'vue'
 
 export function useT3SolrData() {
-    const api = useT3Api()
-    const config = useRuntimeConfig()
-    const logger = useLogger()
-    const { getLocalizedRootPath } = useT3Data()
+    const { currentInitialData } = useT3Data()
 
-    const searchForm: Ref<{
-        [path: string]: Typo3.SearchForm | undefined
-    }> = useState('t3-solr-searchForm', () => ({}))
-
-    const currentRootPath = computed(() =>
-        getLocalizedRootPath(useRoute().fullPath),
+    const searchForm = computed<T3SolrModel.Typo3.SearchForm | undefined>(() =>
+        currentInitialData.value?.solr
+            ? (currentInitialData.value?.solr as T3SolrModel.Typo3.SearchForm)
+            : undefined,
     )
 
-    const currentSearchForm = computed<Typo3.SearchForm | undefined>({
-        get() {
-            return searchForm.value[currentRootPath.value]
-        },
-        set(value) {
-            searchForm.value[currentRootPath.value] = value
-        },
-    })
-
-    async function loadSearchForm(
-        path: string,
-    ): Promise<Typo3.SearchForm | undefined> {
-        const rootPath = getLocalizedRootPath(path)
-
-        if (!searchForm.value[rootPath]) {
-            try {
-                const result = await api.get<Typo3.SearchForm>(rootPath, {
-                    params: {
-                        type: config.public.typo3Solr.api.searchType,
-                    },
-                })
-                searchForm.value[rootPath] = result
-                return result
-            } catch (error) {
-                // log error and do nothing so undefined is returned
-                logger.error(error)
-            }
-        }
-        return searchForm.value[rootPath]
-    }
-
-    return {
-        currentSearchForm,
-        searchForm,
-        loadSearchForm,
-    }
+    return { searchForm }
 }

src/runtime/models/typo3/document.ts

@@ -1,9 +1,9 @@
-import { Typo3 } from '@remindgmbh/nuxt-typo3/dist/runtime/models'
+import type { T3Model } from '#imports'
 
 export interface Document {
     title: string
     content: string
     link: string
-    image?: Typo3.Asset
+    image?: T3Model.Typo3.Asset
     [key: string]: any
 }

src/runtime/models/typo3/solrPiResults.ts

@@ -1,11 +1,11 @@
-import type { Typo3 } from '@remindgmbh/nuxt-typo3/dist/runtime/models'
 import type { Document, Facet } from '.'
+import type { T3Model } from '#imports'
 
-export interface SolrPiResults extends Typo3.Content.Data.Header {
+export interface SolrPiResults extends T3Model.Typo3.Content.Data.Header {
     data: {
         query?: string
         count: number
-        pagination: Typo3.Extbase.Pagination
+        pagination: T3Model.Typo3.Extbase.Pagination
         facets: Facet[]
         documents: Document[]
         spellchecking: string[]

src/runtime/models/typo3/solrPiSearch.ts

@@ -1,6 +1,6 @@
-import type { Typo3 } from '@remindgmbh/nuxt-typo3/dist/runtime/models'
 import type { SearchForm } from '.'
+import type { T3Model } from '#imports'
 
-export interface SolrPiSearch extends Typo3.Content.Data.Header {
+export interface SolrPiSearch extends T3Model.Typo3.Content.Data.Header {
     data: SearchForm
 }

src/runtime/plugins/i18n.ts

@@ -1,5 +1,6 @@
 import { defineNuxtPlugin } from '#imports'
 import { i18n } from '#nuxt-typo3/plugins/i18n'
+
 import de from '#nuxt-typo3-solr/locales/de'
 import en from '#nuxt-typo3-solr/locales/en'