Merge pull request #145 from nuxt-modules/feat/crawler-nuxt-3

feat: add crawler support for Nuxt 3

Author: Baroshem

docs/content/2.advanced/5.crawler.md

@@ -7,4 +7,4 @@ description: ''
 
 > This section only applies if you are using Nuxt static site generation.
 
-When setting the `crawler` option of this module (see [Setup](/getting-started/configuration#crawler)), the module will automatically collect your pages' metadata and store them in an Algolia index. This allows you to easily add a search functionality on your website or blog without worrying about updating your indices as the process happens during the Nuxt static generation. This feature works with both Nuxt 2 and Bridge, and will support Nuxt 3 as soon as SSG is fully implemented.
+When setting the `crawler` option of this module (see [Setup](/getting-started/configuration#crawler)), the module will automatically collect your pages' metadata and store them in an Algolia index. This allows you to easily add a search functionality on your website or blog without worrying about updating your indices as the process happens during the Nuxt static generation.

playground/nuxt.config.ts

@@ -4,6 +4,16 @@ export default defineNuxtConfig({
   modules: [
     AlgoliaModule
   ],
+  nitro: {
+    prerender: {
+      crawlLinks: true
+    },
+    routeRules: {
+      '/': {
+        prerender: true
+      }
+    }
+  },
   algolia: {
     // apiKey: process.env.ALGOLIA_API_KEY,
     // applicationId: process.env.ALGOLIA_APPLICATION_ID,
@@ -24,6 +34,10 @@ export default defineNuxtConfig({
         indexName: process.env.ALGOLIA_INDEX_NAME,
         accessToken: process.env.STORYBLOK_ACCESS_TOKEN
       }
+    },
+    crawler: {
+      apiKey: process.env.ALGOLIA_CRAWLER_API_KEY,
+      indexName: process.env.ALGOLIA_CRAWLER_INDEX_NAME
     }
   }
 })

playground/pages/index.vue

@@ -15,10 +15,14 @@
       <h3>DocSearch plugin</h3>
       <AlgoliaDocSearch :options="docSearch" />
     </div>
+    <NuxtLink to="/other-page">
+      Other page
+    </NuxtLink>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useSeoMeta } from '@unhead/vue'
 import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es'
 // Grab DocSearch config from nuxt.config
 // (the component does that by itself as well)
@@ -63,4 +67,12 @@ onMounted(async () => {
   // There should be no error
   typedFoo.hits[0].foo = '1'
 })
+
+useHead({
+  title: 'Nuxt Algolia'
+})
+
+useSeoMeta({
+  description: 'Playground for @nuxtjs/algolia'
+})
 </script>

playground/pages/other-page.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useSeoMeta } from '@unhead/vue'
+
+useHead({
+  title: 'Other Page'
+})
+
+useSeoMeta({
+  description: 'Dolore amet culpa culpa dolore cupidatat dolor magna amet elit aute qui proident. Eu ea aliquip ipsum est. Incididunt aliqua in consequat reprehenderit adipisicing id laboris eiusmod voluptate laboris tempor ullamco ipsum. Mollit culpa non dolore aute deserunt eiusmod pariatur enim sunt aute consequat quis. Quis sint enim consectetur velit ex ullamco. Dolor non aliqua elit anim reprehenderit ut sit ullamco nulla ut consectetur. Occaecat sit fugiat id consectetur nostrud aute dolore anim ex irure.'
+})
+</script>
+
+<template>
+  <div />
+</template>

src/hooks/crawler.ts

@@ -1,21 +1,32 @@
 
-import type { Nuxt, NuxtHooks } from '@nuxt/schema'
 import algoliasearch from 'algoliasearch'
 import scraper from 'metadata-scraper'
 import type { SearchClient, SearchIndex } from 'algoliasearch'
 import type { MetaData } from 'metadata-scraper/lib/types'
+import { Nuxt } from '@nuxt/schema'
 import type { ModuleOptions } from './../module'
 
-// TODO: Nuxt 2 only
-// export type GeneratePageArg = Parameters<NuxtHooks['generate:page']>[0]
-export type GeneratePageArg = any
-
 export type CrawlerPage = { href: string } & MetaData
 
+type CrawlerMetaGetter = ((html: string, route: string) => MetaData | Promise<MetaData>)
+type CrawlerIncludeFilter = ((route: string) => boolean)
+
+export interface CrawlerOptions {
+  apiKey: string;
+  indexName: string;
+  meta?: CrawlerMetaGetter | (keyof MetaData)[]
+  include?: CrawlerIncludeFilter | (string | RegExp)[]
+}
+
+export interface CrawlerConfig extends CrawlerOptions {
+  meta: CrawlerMetaGetter
+  include: CrawlerIncludeFilter
+}
+
 /**
  * Create a function to specify which routes should be indexed.
  */
-function createShouldInclude (options: ModuleOptions) {
+function createShouldInclude (options: ModuleOptions): CrawlerIncludeFilter {
   const { include } = options.crawler
 
   return typeof include === 'function'
@@ -26,7 +37,7 @@ function createShouldInclude (options: ModuleOptions) {
 /**
  * Create a function to collect the routes' metadata.
  */
-function createMetaGetter (options: ModuleOptions) {
+function createMetaGetter (options: ModuleOptions): CrawlerMetaGetter {
   const { meta } = options.crawler
 
   if (typeof meta === 'function') {
@@ -61,11 +72,11 @@ function createDefaultMetaGetter () {
 /**
  * Create the "page:generate" hook callback to collect all the included routes' metadata.
  */
-export function createPageGenerateHook (nuxt, options: ModuleOptions, pages: CrawlerPage[]) {
+export function createPageGenerateHook (nuxt: Nuxt, options: ModuleOptions, pages: CrawlerPage[]) {
   const shouldInclude = createShouldInclude(options)
   const getMeta = createMetaGetter(options)
 
-  return async ({ html, route }: GeneratePageArg) => {
+  return async (html: string, route: string) => {
     if (shouldInclude(route)) {
       const meta = await getMeta(html, route)
       const page = { href: route, ...meta }
@@ -92,7 +103,7 @@ export function createPageGenerateHook (nuxt, options: ModuleOptions, pages: Cra
 /**
    * Create the "generate:done" hook callback to index the collected routes' metadata.
    */
-export function createGenerateDoneHook (nuxt, options: ModuleOptions, pages: CrawlerPage[]) {
+export function createGenerateDoneHook (nuxt: Nuxt, options: ModuleOptions, pages: CrawlerPage[]) {
   return async () => {
     if (pages.length > 0 && options.crawler) {
       const { crawler: { apiKey, indexName }, applicationId } = options
@@ -128,5 +139,5 @@ export interface CrawlerHooks {
 }
 
 declare module '@nuxt/schema' {
-  interface NuxtHooks extends CrawlerHooks {}
+  interface NuxtHooks extends CrawlerHooks { }
 }

src/module.ts

@@ -1,9 +1,8 @@
 import { resolve } from 'path'
 import { fileURLToPath } from 'url'
-import { defineNuxtModule, addPlugin, addComponentsDir, addServerHandler, addImportsDir, isNuxt2, extendViteConfig } from '@nuxt/kit'
-import type { MetaData } from 'metadata-scraper/lib/types'
+import { defineNuxtModule, addPlugin, addComponentsDir, addServerHandler, addImportsDir, isNuxt2 } from '@nuxt/kit'
 import { defu } from 'defu'
-import { createPageGenerateHook, createGenerateDoneHook, CrawlerPage, CrawlerHooks } from './hooks'
+import { createPageGenerateHook, createGenerateDoneHook, CrawlerPage, CrawlerHooks, CrawlerOptions } from './hooks'
 import type { DocSearchOptions } from './types'
 
 enum InstantSearchThemes {
@@ -34,14 +33,7 @@ interface ModuleBaseOptions {
 }
 
 export interface ModuleOptions extends ModuleBaseOptions {
-  crawler?: {
-    apiKey: string;
-    indexName: string;
-    meta:
-            | ((html: string, route: string) => MetaData|Promise<MetaData>)
-            | (keyof MetaData)[]
-    include: ((route: string) => boolean) | (string | RegExp)[]
-  }
+  crawler?: CrawlerOptions
 };
 
 export interface ModuleHooks extends CrawlerHooks {}
@@ -95,11 +87,27 @@ export default defineNuxtModule<ModuleOptions>({
 
       const pages: CrawlerPage[] = []
 
-      nuxt.addHooks({
+      const pageGenerator = createPageGenerateHook(nuxt, options, pages)
+      const doneGenerator = createGenerateDoneHook(nuxt, options, pages)
+
+      if (isNuxt2(nuxt)) {
+        nuxt.addHooks({
         // @ts-expect-error Nuxt 2 only hook
-        'generate:page': createPageGenerateHook(nuxt, options, pages),
-        'generate:done': createGenerateDoneHook(nuxt, options, pages)
-      })
+          'generate:page': createPageGenerateHook(nuxt, options, pages),
+          'generate:done': createGenerateDoneHook(nuxt, options, pages)
+        })
+      } else {
+        nuxt.hooks.hookOnce('nitro:init', (nitro) => {
+          nitro.hooks.hookOnce('prerender:routes', () => {
+            nitro.hooks.hook('prerender:route', async ({ route, contents }) => {
+              await pageGenerator(contents, route)
+            })
+            nitro.hooks.hookOnce('close', async () => {
+              await doneGenerator()
+            })
+          })
+        })
+      }
     }
 
     if (Object.keys(options.docSearch!).length) {
@@ -165,7 +173,7 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.hook('vite:extendConfig', (config, { isClient }) => {
       if (isClient) {
         (config as any).resolve.alias['@algolia/requester-node-http'] =
-          'unenv/runtime/mock/empty';
+          'unenv/runtime/mock/empty'
       }
     })