test: init tests with mocha (#90)

example/components/Alert.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="alert" :class="type">
+    <Markdown unwrap="p" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'info'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.alert {
+  padding: 1rem;
+  border-radius: 5px;
+}
+.info {
+  background: #acdffa;
+}
+.success {
+  background: #acfab2;
+}
+.warning {
+  background: #faacac;
+}
+</style>

example/components/CodePreview.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="source-container">
+    <div>
+      <Markdown />
+    </div>
+    <div>
+      <Markdown use="preview" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.source-container {
+  display: flex;
+}
+.source-container div {
+  flex: 1;
+  padding: 1rem;
+  border: 1px solid #ccc;
+  overflow: auto;
+}
+</style>

example/content/features/mdc.md

@@ -0,0 +1,103 @@
+<div id="span">
+
+# Span
+| Syntax           | Preview        |
+| ---------------- | -------------- |
+| `[Span Content]` | [Span Content] |
+
+</div>
+
+
+# Components
+
+## Simple usage
+
+::code-preview
+
+  :H3[Source]
+
+  ```md
+  ::alert
+  The alert component.
+  ::
+  ```
+
+#preview
+
+  :H3[Preview]
+
+  ::alert
+  The alert component.
+  ::
+::
+
+
+## With inline attributes
+
+::code-preview
+
+  :H3[Source]
+
+  ```md
+  ::alert{type=success}
+  The alert component.
+  ::
+  ```
+
+#preview
+
+  :H3[Preview]
+
+  ::alert{type=success}
+  The alert component.
+  ::
+::
+
+
+## With YAML attributes
+
+::code-preview
+
+  :H3[Source]
+
+  ```md
+  ::alert
+  ---
+  type: warning
+  ---
+  The alert component.
+  ::
+  ```
+
+#preview
+
+  :H3[Preview]
+
+  ::alert
+  ---
+  type: warning
+  ---
+  The alert component.
+  ::
+::
+
+## With inline styles (Not Recommended)
+
+::code-preview
+
+  :H3[Source]
+
+  ```md
+  ::alert{style="background: tomato; color: white"}
+  The alert component.
+  ::
+  ```
+
+#preview
+
+  :H3[Preview]
+
+  ::alert{style="background: tomato; color: white"}
+  The alert component.
+  ::
+::

example/content/features/native-markdown.md

@@ -1,3 +1,10 @@
+Links
+
+<div id="links">
+
+[Nuxt.js official website](https://nuxtjs.org)
+
+</div>
 
 Typography
 
@@ -12,6 +19,53 @@ Typography
 
 </div>
 
-Links
 
-[Nuxt.js official website](https://nuxtjs.org)
+<div id="lists">
+
+## Unordered list
+
+- First item
+- Second item
+- Third item
+  - Indented item
+  - Indented item
+- Fourth item
+
+## Ordered list
+
+
+1. First item
+2. Second item
+    - Indented item
+    - Indented item
+3. Third item
+   1. Indented item
+   2. Indented item
+4. Fourth item
+
+</div>
+
+
+<div id="codes">
+
+## Code
+
+At the command prompt, type `nano`.
+
+``Use `code` in your Markdown file.``
+
+```js
+export default {}
+```
+
+</div>
+
+<div id="hr">
+
+***
+
+---
+
+_________________
+
+</div>

example/nuxt.config.ts

@@ -21,6 +21,9 @@ const config = defineNuxtConfig({
     experiments: {
       wasm: true
     }
+  },
+  content: {
+    dirs: ['content', ['test', 'content/test']]
   }
 })
 

example/test/dir1/page1.md

@@ -0,0 +1,5 @@
+---
+title: Page 1
+---
+
+Page 1

example/test/en/dir2/page2.md

@@ -0,0 +1,5 @@
+---
+title: page 2
+---
+
+Page 2

example/test/fa/dir1/sub-page.md

@@ -0,0 +1,5 @@
+---
+title: Sub page
+---
+
+Sub page

example/test/fa/dir2/page2.md

@@ -0,0 +1,5 @@
+---
+title: page 2
+---
+
+Page 2

example/test/fa/index.md

@@ -0,0 +1,5 @@
+---
+title: Home
+---
+
+This is home.

example/test/index.md

@@ -0,0 +1,5 @@
+---
+title: Home
+---
+
+This is home.

package.json

@@ -32,7 +32,7 @@
     "generate": "nuxt generate example",
     "start": "nuxt start example",
     "lint": "eslint --ext .js,.ts,.vue .",
-    "test": "yarn lint && jest --forceExit",
+    "test": "yarn lint && mocha  --exit -r jiti/register test/**/*.test.ts",
     "clean:example": "rm -rf example/.nuxt example/node_modules",
     "clean:dist": "rm -rf dist node_modules",
     "clean": "yarn clean:example && yarn clean:dist"
@@ -66,23 +66,23 @@
     "@babel/preset-typescript": "latest",
     "@nuxt/test-utils": "latest",
     "@nuxtjs/eslint-config-typescript": "latest",
+    "@types/chai": "^4.2.22",
     "@types/debounce": "^1.2.1",
-    "@types/jest": "latest",
     "@types/micromatch": "^4.0.2",
+    "@types/mocha": "^9.0.0",
     "@types/node-fetch": "^3.0.3",
     "@types/object-hash": "^2.2.1",
     "@types/ws": "^8.2.0",
     "babel-core": "^6.26.3",
-    "babel-jest": "latest",
+    "chai": "^4.3.4",
     "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-nuxt": "^3.0.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "jest": "latest",
+    "mocha": "^9.1.3",
     "nuxt-edge": "^2.16.0-27276495.ab1c6cb4",
     "playwright": "^1.16.3",
     "prettier": "^2.4.1",
-    "unbuild": "^0.5.11",
-    "vue-jest": "^3.0.7"
+    "unbuild": "^0.5.11"
   }
 }

src/context.ts

@@ -1,13 +1,17 @@
-import type { DocusContext, DocusOptions } from 'types'
+import { Nuxt } from '@nuxt/kit'
+import type { DocusContext } from 'types'
 
-export const useDefaultContext = (options: DocusOptions): DocusContext => ({
+export const useDefaultContext = (nuxt: Nuxt): DocusContext => ({
+  apiBase: '_docus',
+  dirs: ['content'],
+  watch: nuxt.options.dev,
   locales: {
     codes: ['en'],
     defaultLocale: 'en'
   },
   database: {
-    provider: options.database.provider || 'local',
-    options: options.database.options || {}
+    provider: 'local',
+    options: {}
   },
   ignoreList: [],
   search: {

src/module.dev.ts

@@ -12,20 +12,24 @@ import fsDriver from 'unstorage/drivers/fs'
 import { useWebSocket } from './runtime/server/socket'
 import { logger } from './runtime/utils'
 import { useNuxtIgnoreList } from './utils'
+import { DocusContext } from 'types'
 
-export default function setupDevTarget(options: any, nuxt: Nuxt) {
+export default function setupDevTarget(options: DocusContext, nuxt: Nuxt) {
   const ws = useWebSocket()
 
   if (options.watch) {
     const storage = createStorage()
     useNuxtIgnoreList(nuxt).then(ignoreList => {
-      storage.mount(
-        'content',
-        fsDriver({
-          base: resolve(nuxt.options.rootDir, 'content'),
-          ignore: ignoreList
-        })
-      )
+      options.dirs.forEach(dir => {
+        const [path, key] = Array.isArray(dir) ? dir : [dir, dir]
+        storage.mount(
+          key,
+          fsDriver({
+            base: resolve(nuxt.options.rootDir, path),
+            ignore: ignoreList
+          })
+        )
+      })
     })
 
     // create socket server
@@ -61,7 +65,7 @@ function createDebounceContentWatcher(callback: WatchCallback) {
   const handleEvent = debounce(callback, 200)
 
   return (event: WatchEvent, key: string) => {
-    if (key.endsWith('.md') && ['content'].some(mount => key.startsWith(mount))) {
+    if (key.endsWith('.md')) {
       handleEvent(event, key)
       logger.info(`[DOCUS]: ${key} ${event}`)
     }