From 18e17dc5c13d030d1a2000e63f1fc5aacf2e2f90 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Thu, 16 Jan 2025 09:53:43 +0900
Subject: [PATCH] feat(docs): rewrite CodepenEdit in TS (#394)

Rewrites `src/components/CodepenEdit.vue` in TypeScript:
- Makes `code` required so that null checks are unnecessary

A tip for TypeScript migration:
- Explicitly import and register Buefy components so that they are
  type-checked. Note that no type-checking is performed for globally
  registered components.
---
 packages/docs/src/components/CodepenEdit.vue | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/docs/src/components/CodepenEdit.vue b/packages/docs/src/components/CodepenEdit.vue
index dee5a005e..a5f98460c 100644
--- a/packages/docs/src/components/CodepenEdit.vue
+++ b/packages/docs/src/components/CodepenEdit.vue
@@ -22,14 +22,21 @@
     </form>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BButton } from '@ntohq/buefy-next'
+
 // https://vitejs.dev/guide/assets.html#importing-asset-as-string
 import dataTest from '@/data/sample.json?raw'
 import { preformat } from '@/utils'
 
-export default {
+export default defineComponent({
+    components: { BButton },
     props: {
-        code: String,
+        code: {
+            type: String,
+            required: true
+        },
         title: String
     },
     data() {
@@ -152,9 +159,9 @@ export default {
             const end = this.code.lastIndexOf('</style>')
             if (start < 0 || end < 0) return
 
-            return this.code.substring(start + match[0].length, end)
+            return this.code.substring(start + match![0].length, end)
         },
-        hasContent(startTag, endTag) {
+        hasContent(startTag: string, endTag: string) {
             const start = this.code.indexOf(startTag)
             const end = this.code.lastIndexOf(endTag)
             return !(start < 0 || end < 0)
@@ -163,5 +170,5 @@ export default {
     mounted() {
         this.hasHtml = this.hasContent('<template>', '</template>')
     }
-}
+})
 </script>