fix: avoid exporting js keywords

Author: antfu

src/markdown.ts

@@ -9,6 +9,28 @@ import { preprocessHead } from './head'
 const scriptSetupRE = /<\s*script([^>]*)\bsetup\b([^>]*)>([\s\S]*)<\/script>/mg
 const defineExposeRE = /defineExpose\s*\(/mg
 
+const EXPORTS_KEYWORDS = [
+  'class',
+  'default',
+  'export',
+  'function',
+  'import',
+  'let',
+  'var',
+  'const',
+  'from',
+  'as',
+  'return',
+  'if',
+  'else',
+  'switch',
+  'case',
+  'break',
+  'for',
+  'while',
+  'do',
+]
+
 interface ScriptMeta {
   code: string
   attr: string
@@ -150,7 +172,14 @@ export function createMarkdown(options: ResolvedOptions) {
 
       scriptLines.push(`const frontmatter = ${JSON.stringify(frontmatter)}`)
 
-      frontmatterExportsLines = Object.entries(frontmatter).map(([key, value]) => `export const ${key} = ${JSON.stringify(value)}`)
+      if (options.exportFontmatter) {
+        frontmatterExportsLines = Object.entries(frontmatter)
+          .map(([key, value]) => {
+            if (EXPORTS_KEYWORDS.includes(key))
+              key = `_${key}`
+            return `export const ${key} = ${JSON.stringify(value)}`
+          })
+      }
 
       if (!isVue2 && options.exposeFrontmatter && !hasExplicitExports())
         scriptLines.push('defineExpose({ frontmatter })')

src/options.ts

@@ -9,6 +9,7 @@ export function resolveOptions(userOptions: Options): ResolvedOptions {
     excerpt: false,
     exposeFrontmatter: true,
     exposeExcerpt: false,
+    exportFontmatter: true,
     escapeCodeTagInterpolation: true,
     customSfcBlocks: ['route', 'i18n', 'style'],
     componentOptions: {},

src/types.ts

@@ -132,6 +132,13 @@ export interface Options {
    */
   exposeExcerpt?: boolean
 
+  /**
+   * Export frontmatter in component module
+   *
+   * @default true
+   */
+  exportFontmatter?: boolean
+
   /**
    * Add `v-pre` to `<code>` tag to escape curly brackets interpolation
    *

test/__snapshots__/transform.test.ts.snap

@@ -56,6 +56,19 @@ defineExpose({ frontmatter })
 </script>"
 `;
 
+exports[`transform > export keyword frontmatters 1`] = `
+"<template><div class=\\"markdown-body\\"><p>Hello</p>
+</div></template>
+<script setup>
+const frontmatter = {\\"class\\":\\"text\\",\\"default\\":\\"foo\\"}
+defineExpose({ frontmatter })
+</script>
+<script>
+export const _class = \\"text\\"
+export const _default = \\"foo\\"
+</script>"
+`;
+
 exports[`transform > exposes frontmatter 1`] = `
 "<template><div class=\\"markdown-body\\"><h1>Hello</h1>
 </div></template>

test/transform.test.ts

@@ -98,6 +98,18 @@ function onClick() {
 </script>
 
 <button @click="onClick"></button>
+`
+    expect(markdownToVue('', md).code).toMatchSnapshot()
+  })
+
+  it('export keyword frontmatters', () => {
+    const md = `
+---
+class: 'text'
+default: 'foo'
+---
+
+Hello
 `
     expect(markdownToVue('', md).code).toMatchSnapshot()
   })