⬆️ (bridge) upgrade bridge; fix module (#70)

Co-authored-by: Farnabaz <[email protected]>

example/content/index.md

@@ -1,7 +1,5 @@
-
 # Hello **:)**
 
-
 A simple paragraph with [span]
 
-:HelloWorld
+:HelloWorld

example/nuxt.config.ts

@@ -1,7 +1,7 @@
 import { resolve } from 'pathe'
-import { defineNuxtConfig } from '@nuxt/kit'
+import { defineNuxtConfig } from '@nuxt/bridge'
 
-export default defineNuxtConfig({
+const config = defineNuxtConfig({
   components: [
     {
       path: resolve(__dirname, 'components'),
@@ -10,9 +10,10 @@ export default defineNuxtConfig({
       level: 2
     }
   ],
-  buildModules: ['@nuxtjs/composition-api/module'],
   modules: ['../src'],
-  bridge: {
-    capi: false
+  build: {
+    transpile: ['@nuxt/bridge']
   }
 })
+
+export default config

example/pages/_.vue

@@ -25,9 +25,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { withoutTrailingSlash, joinURL } from 'ufo'
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent } from '@vue/composition-api'
 
 export default defineComponent({
   name: 'PageSlug',
@@ -36,22 +36,26 @@ export default defineComponent({
     if (params.pathMatch === 'index') redirect(app.localePath('/'))
   },
 
-  async asyncData({ $content, params, error, ssrContext, $config }) {
+  async asyncData({ $content, params, error, $config }) {
     // const language = i18n.locale
 
     // Get the proper current path
-    let to = joinURL($config?._app?.basePath || '', withoutTrailingSlash(`/${params.pathMatch || ''}`)) || '/'
+    const to = joinURL($config?._app?.basePath || '', withoutTrailingSlash(`/${params.pathMatch || ''}`)) || '/'
 
     const preview = to.startsWith('/_preview')
+
+    // TODO: Fix this preview detection
+    /*
     if (preview) {
-      $config?._app?.basePath = '/_preview/'
-      ssrContext?.runtimeConfig?.public?._app?.basePath = '/_preview/'
+      $config._app.basePath = '/_preview/'
+      ssrContext.runtimeConfig.public._app.basePath = '/_preview/'
       to = to.replace(/^\/_preview/, '') || '/'
       $content = $content.preview()
     } else {
-      $config?._app?.basePath = '/'
-      ssrContext?.runtimeConfig?.public?._app?.basePath = '/'
+      $config.app.basePath = '/'
+      ssrContext.runtimeConfig.public._app.basePath = '/'
     }
+    */
 
     // TODO: Fix the draft system
     const draft = false
@@ -75,29 +79,45 @@ export default defineComponent({
     togglePreviewMode() {
       if (this.preview) {
         this.$router.replace(this.$route.fullPath.replace(/^\/_preview/, '') || '/')
-        this.$config?._app?.basePath = '/preview/'
+        // TODO: Fix this preview detection
+        // this.$config._app.basePath = '/preview/'
       } else {
-        this.$config?._app?.basePath = '/'
+        // TODO: Fix this preview detection
+        // this.$config._app.basePath = '/'
         this.$router.replace('/_preview' + this.$route.fullPath)
       }
     },
     async randomContent() {
       const id = parseInt(Math.random() * 10e4)
-      console.log('ID generated')
+
+      // eslint-disable-next-line no-console
+      console.log('Generated ID: ' + id)
+
       const $preview = this.$content.preview()
-      await $preview.setItem('content:random-conten-t' + id + '.md', `# Random Content #${id}
+      await $preview.setItem(
+        'content:random-content-' + id + '.md',
+        `# Random Content #${id}
 
         Hello 👋
 
-        I just got modified
+        I just got modified`
+      )
+
+      // eslint-disable-next-line no-console
+      console.log('Document added!')
 
-    `)
-      console.log('Document Added')
+      // eslint-disable-next-line no-console
       console.log('Fetching new navigation', this.preview)
+
       const $content = this.preview ? this.$content.preview() : this.$content
+
       const navigation = await $content.fetch('navigation')
+
+      // eslint-disable-next-line no-console
       console.log('Navigation loaded')
       this.navigation = navigation
+
+      // eslint-disable-next-line no-console
       console.log('Navigation updated')
     }
   }

package.json

@@ -39,7 +39,6 @@
     "@docus/mdc": "npm:@docus/mdc-edge@latest",
     "@nuxt/bridge": "npm:@nuxt/bridge-edge@latest",
     "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
-    "@nuxtjs/composition-api": "^0.29.2",
     "consola": "^2.15.3",
     "debounce": "^1.2.1",
     "defu": "^5.0.0",

shims.d.ts

@@ -0,0 +1,9 @@
+declare namespace NodeJS {
+  interface Process {
+    dev: boolean
+    client: boolean
+    server: boolean
+    options: any
+    previewUrl: string
+  }
+}

src/module.ts

@@ -4,7 +4,6 @@ import {
   resolveModule,
   addServerMiddleware,
   addPlugin,
-  installModule,
   useNuxt,
   addTemplate,
   extendWebpackConfig
@@ -25,15 +24,15 @@ export const resolveApiRoute = (route: string) => {
 }
 
 export default defineNuxtModule((nuxt: Nuxt) => ({
+  configKey: 'content',
   defaults: {
     apiBase: '_docus',
     watch: nuxt.options.dev,
     database: {
       provider: 'lokijs'
     }
   },
-  configKey: 'content',
-  async setup(options: DocusOptions, nuxt: Nuxt) {
+  setup(options: DocusOptions, nuxt: Nuxt) {
     // Extend context
     const docusContext = defaultContext
 
@@ -61,7 +60,7 @@ export default defineNuxtModule((nuxt: Nuxt) => ({
     nuxt.options.alias['~docus/content'] = runtimeDir
     nuxt.options.alias['~docus/database'] = resolveRuntimeDir('database/providers', options.database.provider)
 
-    // Register api
+    // Register API
     nuxt.hook('nitro:context', (ctx: NitroContext) => {
       ctx.assets.dirs.content = {
         dir: resolve(nuxt.options.rootDir, 'content'),
@@ -72,6 +71,8 @@ export default defineNuxtModule((nuxt: Nuxt) => ({
         driver: 'memory'
       }
     })
+
+    // Add server routes for each content functions
     for (const api of ['get', 'list', 'search', 'navigation', 'preview']) {
       addServerMiddleware({
         route: resolveApiRoute(api),
@@ -150,8 +151,5 @@ export default defineNuxtModule((nuxt: Nuxt) => ({
         options: { paths }
       })
     })
-
-    // Install @nuxt/bridge
-    await installModule(nuxt, { src: resolveModule('@nuxt/bridge') })
   }
 }))

src/runtime/components/DocusContent.vue

@@ -124,8 +124,9 @@ function processNode(node: MDCNode, h: CreateElement, doc: DocusDocument): VNode
   }
 
   // Add component name to lazyComponents set
-  if ((process as any).server && typeof Vue.component(pascalCase(node.tag)) === 'function')
+  if (process.server && typeof Vue.component(pascalCase(node.tag)) === 'function') {
     lazyComponents.add(pascalCase(node.tag))
+  }
 
   // Return VNode
   return h(node.tag, data, children)
@@ -217,7 +218,7 @@ export default {
     const children = (body.children as MDCNode[]).map(child => processNode(child, h, document))
 
     // If server side, add components into lazy components set
-    if ((process as any).server) {
+    if (process.server) {
       ;(parent.$root as any).context.beforeSerialize((nuxtState: any) => {
         if (nuxtState.fetch._lazyComponents) lazyComponents.forEach(name => nuxtState.fetch._lazyComponents.add(name))
         else nuxtState.fetch._lazyComponents = lazyComponents

src/runtime/components/Props.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { computed, defineComponent } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@vue/composition-api'
 
 export default defineComponent({
   props: {

src/runtime/navigation.ts

@@ -21,14 +21,20 @@ const isIndex = (path: string) => path.endsWith('index.md')
  * @returns
  */
 function sortItems(keys: any[]) {
-  return [...keys].sort((a, b) => {
-    const isA = isIndex(a.id)
-    const isB = isIndex(b.id)
-    if (isA && isB) return a.id.length - b.id.length
-    if (isB) return 1
-    if (isA) return -1
-    return 0
-  })
+  return (
+    [...keys]
+      // Sort alphabetically to ensure even without ordering keys, the navigation always look the same.
+      .sort((a, b) => a.id.localeCompare(b.id))
+      // Put index.md at top
+      .sort((a, b) => {
+        const isA = isIndex(a.id)
+        const isB = isIndex(b.id)
+        if (isA && isB) return a.id.length - b.id.length
+        if (isB) return 1
+        if (isA) return -1
+        return 0
+      })
+  )
 }
 
 /**

src/runtime/templates/hot.ts

@@ -4,16 +4,18 @@ import { useWebSocket } from '~docus/content/composables/websocket'
 
 export default async function (ctx: any) {
   let { $docus } = ctx.$config ? ctx.$config : ctx.nuxtState
+
   // TODO: replace with public runtime config
   if (!$docus) {
     $docus = {
       apiBase: '_docus',
       wsUrl: 'ws://localhost:4000'
     }
   }
-  if ((process as any).client) {
+
+  if (process.client) {
     const protocol = location.protocol === 'https:' ? 'wss' : 'ws'
     const baseUrl = joinURL($docus.wsUrl || `${protocol}://${location.hostname}:${location.port}`, $docus.apiBase)
     useWebSocket(baseUrl).connect()
   }
-}
+}