feat: implement defineProps

unplugin · Dec 7, 2024 · c5c68a3 · c5c68a3
1 parent f238f30
commit c5c68a3
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/src/core/markdown.ts b/src/core/markdown.ts
@@ -61,6 +61,24 @@ function extractCustomBlock(html: string, options: ResolvedOptions) {
   return { html, blocks }
 }
 
+function createDefinePropsWithDefaults(props: {
+  [s: string]: unknown
+}) {
+  const propsValue = Object
+    .entries(props)
+    .reduce((acc, [key, cur]) => `${acc}${key}:{default:${getPropsDefaultValue(cur)}},`, ``)
+
+  return `defineProps({${propsValue}})`
+}
+
+function getPropsDefaultValue<T = unknown>(value: T) {
+  return typeof value === 'string'
+    ? `\`${value}\``
+    : typeof value === 'object'
+      ? JSON.stringify(value)
+      : value
+}
+
 export function createMarkdown(options: ResolvedOptions) {
   const isVue2 = options.vueVersion.startsWith('2.')
 
@@ -171,7 +189,7 @@ export function createMarkdown(options: ResolvedOptions) {
       if (options.excerpt && !excerptKeyOverlapping && frontmatter.excerpt !== undefined)
         delete frontmatter.excerpt
 
-      scriptLines.push(`const frontmatter = ${JSON.stringify(frontmatter)}`)
+      scriptLines.push(`const frontmatter = ${createDefinePropsWithDefaults(frontmatter)}`)
 
       if (options.exportFrontmatter) {
         frontmatterExportsLines = Object.entries(frontmatter)

diff --git a/test/__snapshots__/excerpt.test.ts.snap b/test/__snapshots__/excerpt.test.ts.snap
@@ -11,7 +11,7 @@ exports[`excerpt > raw excerpt 1`] = `
 </ul>
 </div></template>
 <script setup>
-const frontmatter = {"title":"Hey"}
+const frontmatter = defineProps({title:{default:\`Hey\`},})
 defineExpose({ frontmatter })
 const excerpt = "\\nThis is an excerpt which is kept as **raw Markdown**.\\n\\n"
 </script>
@@ -32,7 +32,7 @@ exports[`excerpt > rendered excerpt 1`] = `
 </ul>
 </div></template>
 <script setup>
-const frontmatter = {"title":"Hey"}
+const frontmatter = defineProps({title:{default:\`Hey\`},})
 defineExpose({ frontmatter })
 const excerpt = "<p>This is an excerpt which has been rendered to <strong>HTML</strong>.</p>\\n"
 </script>

diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
@@ -9,7 +9,7 @@ exports[`transform > basic 1`] = `
 </ul>
 </div></template>
 <script setup>
-const frontmatter = {"title":"Hey"}
+const frontmatter = defineProps({title:{default:\`Hey\`},})
 defineExpose({ frontmatter })
 </script>
 <script>
@@ -23,7 +23,7 @@ exports[`transform > code escape 1`] = `
 </code></pre>
 </div></template>
 <script setup>
-const frontmatter = {}
+const frontmatter = defineProps({})
 defineExpose({ frontmatter })
 </script>"
 `;
@@ -32,7 +32,7 @@ exports[`transform > couldn't expose frontmatter 1`] = `
 "<template><div class="markdown-body">
 </div></template>
 <script setup>
-const frontmatter = {"title":"Hey"}
+const frontmatter = defineProps({title:{default:\`Hey\`},})
 defineExpose({ test: 'test'})
 </script>
 <script>
@@ -46,7 +46,7 @@ exports[`transform > escapeCodeTagInterpolation 1`] = `
 </code></pre>
 </div></template>
 <script setup>
-const frontmatter = {}
+const frontmatter = defineProps({})
 defineExpose({ frontmatter })
 </script>"
 `;
@@ -55,7 +55,7 @@ exports[`transform > export keyword frontmatters 1`] = `
 "<template><div class="markdown-body"><p>Hello</p>
 </div></template>
 <script setup>
-const frontmatter = {"class":"text","default":"foo"}
+const frontmatter = defineProps({class:{default:\`text\`},default:{default:\`foo\`},})
 defineExpose({ frontmatter })
 </script>
 <script>
@@ -68,7 +68,7 @@ exports[`transform > exposes frontmatter 1`] = `
 "<template><div class="markdown-body"><h1>Hello</h1>
 </div></template>
 <script setup>
-const frontmatter = {"title":"Hey"}
+const frontmatter = defineProps({title:{default:\`Hey\`},})
 defineExpose({ frontmatter })
 </script>
 <script>
@@ -81,7 +81,7 @@ exports[`transform > frontmatter interpolation 1`] = `
 <p>This is {{frontmatter.name}}</p>
 </div></template>
 <script setup>
-const frontmatter = {"name":"My Cool App"}
+const frontmatter = defineProps({name:{default:\`My Cool App\`},})
 defineExpose({ frontmatter })
 </script>
 <script>
@@ -94,7 +94,7 @@ exports[`transform > script setup 1`] = `
 
 </div></template>
 <script setup lang="ts">
-const frontmatter = {}
+const frontmatter = defineProps({})
 defineExpose({ frontmatter })
 import Foo from './Foo.vue'
 </script>"
@@ -105,7 +105,7 @@ exports[`transform > style 1`] = `
 
 </div></template>
 <script setup>
-const frontmatter = {}
+const frontmatter = defineProps({})
 defineExpose({ frontmatter })
 </script>
 <style>h1 { color: red }</style>"
@@ -116,7 +116,7 @@ exports[`transform > vue directives 1`] = `
 <p><button @click="onClick"></button></p>
 </div></template>
 <script setup lang="ts">
-const frontmatter = {"name":"My Cool App"}
+const frontmatter = defineProps({name:{default:\`My Cool App\`},})
 defineExpose({ frontmatter })
 function onClick() {
   // ...