chore(core|utils): unit test for functions, fixed minor issues (#12)

Author: nekomeowww

.github/workflows/ci.yml

@@ -45,6 +45,27 @@ jobs:
         run: |
           pnpm run build
 
+  unit-test:
+    name: Unit Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Build
+        run: |
+          pnpm run build
+
+      - name: Unit Test
+        run: pnpm run test:run
+
   typecheck:
     name: Type Check
     runs-on: ubuntu-latest

examples/native-node/src/md.ts

@@ -2,16 +2,12 @@ import { readFile } from 'node:fs/promises'
 import { renderMarkdownString } from '@velin-dev/core'
 import { ref } from 'vue'
 
-(async () => {
+async function main() {
   const markdownString = await readFile('./src/assets/markdown.md', 'utf-8')
-  // const composableString = await fs.readFile('examples/assets/Composable.md', 'utf-8')
-
   const result1 = await renderMarkdownString(markdownString, { language: ref('TypeScript') })
 
-  // const result2 = await processMarkdown(composableString, {
-  //   markdown: ref(result1),
-  // })
-
   // eslint-disable-next-line no-console
   console.log(result1)
-})()
+}
+
+main()

examples/native-node/src/sfc.ts

@@ -2,10 +2,12 @@ import { readFile } from 'node:fs/promises'
 import { renderSFCString } from '@velin-dev/core'
 import { ref } from 'vue'
 
-(async () => {
+async function main() {
   const source = await readFile('./src/assets/MyComponent.vue', 'utf-8')
-
   const html = await renderSFCString(source, { language: ref('TypeScript') })
+
   // eslint-disable-next-line no-console
   console.log(html)
-})()
+}
+
+main()

packages/core/package.json

@@ -65,6 +65,7 @@
     "@vue/shared": "^3.5.13",
     "defu": "^6.1.4",
     "error-stack-parser": "^2.1.4",
+    "hast-util-from-html": "^2.0.3",
     "path-browserify-esm": "^1.0.6",
     "vue": "^3.5.13"
   }

packages/core/src/render-node/markdown.test.ts

@@ -0,0 +1,24 @@
+import { readFile } from 'node:fs/promises'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+import { renderMarkdownString } from './markdown'
+
+describe('renderMarkdownString', async () => {
+  it('should be able to render simple SFC', async () => {
+    const content = await readFile(join(dirname(fileURLToPath(import.meta.url)), 'testdata', 'simple.velin.md'), 'utf-8')
+    const result = await renderMarkdownString(content)
+    expect(result).toBeDefined()
+    expect(result).not.toBe('')
+    expect(result).toBe('# Hello, world!\n')
+  })
+
+  it('should be able to render script setup SFC', async () => {
+    const content = await readFile(join(dirname(fileURLToPath(import.meta.url)), 'testdata', 'script-setup.velin.md'), 'utf-8')
+    const result = await renderMarkdownString(content)
+    expect(result).toBeDefined()
+    expect(result).not.toBe('')
+    expect(result).toBe('Count: 0\n')
+  })
+})

packages/core/src/render-node/markdown.ts

@@ -15,8 +15,9 @@ export async function renderMarkdownString<RawProps = any>(
 
   const { remainingHTML, scriptContent } = scriptFrom(html)
   const sfcString = createSFC(remainingHTML, scriptContent)
-  const renderedHTML = await renderSFC(sfcString, data, basePath)
 
+  const renderedHTML = await renderSFC(sfcString, data, basePath)
   const markdownResult = await toMarkdown(renderedHTML)
+
   return markdownResult
 }

packages/core/src/render-node/sfc.test.ts

@@ -0,0 +1,24 @@
+import { readFile } from 'node:fs/promises'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+import { renderSFCString } from './sfc'
+
+describe('renderMarkdownString', async () => {
+  it('should be able to render simple SFC', async () => {
+    const content = await readFile(join(dirname(fileURLToPath(import.meta.url)), 'testdata', 'simple.velin.vue'), 'utf-8')
+    const result = await renderSFCString(content)
+    expect(result).toBeDefined()
+    expect(result).not.toBe('')
+    expect(result).toBe('# Hello, world!\n')
+  })
+
+  it('should be able to render script setup SFC', async () => {
+    const content = await readFile(join(dirname(fileURLToPath(import.meta.url)), 'testdata', 'script-setup.velin.vue'), 'utf-8')
+    const result = await renderSFCString(content)
+    expect(result).toBeDefined()
+    expect(result).not.toBe('')
+    expect(result).toBe('# Count: 0\n')
+  })
+})

packages/core/src/render-node/sfc.ts

@@ -7,6 +7,7 @@ import { toMarkdown } from '@velin-dev/utils/to-md'
 import { compileScript, compileTemplate, parse } from '@vue/compiler-sfc'
 import defu from 'defu'
 import ErrorStackParser from 'error-stack-parser'
+import { fromHtml } from 'hast-util-from-html'
 import path from 'path-browserify-esm'
 
 import { onlyRender } from '../render-shared'
@@ -94,6 +95,12 @@ export async function renderSFCString<RawProps = any>(
   data?: InputProps<RawProps>,
   basePath?: string,
 ): Promise<string> {
+  const hastRoot = fromHtml(source, { fragment: true })
+  const hasScript = hastRoot.children.some(node => node.type === 'element' && node.tagName === 'script')
+  if (!hasScript) {
+    source = `${source}\n<script setup>/* EMPTY */</script>`
+  }
+
   const html = await renderSFC(source, data, basePath)
   return toMarkdown(html)
 }

packages/core/src/render-node/testdata/script-setup.velin.md

@@ -0,0 +1,7 @@
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+Count: {{ count }}

packages/core/src/render-node/testdata/script-setup.velin.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<template>
+  <div>
+    <h1>Count: {{ count }}</h1>
+  </div>
+</template>