From 26c47de234e8b64ea0c26e44f984d2d13d128ffc Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Thu, 16 Jan 2025 22:11:12 +0900
Subject: [PATCH] feat(docs): rewrite installation/ConstructorOptions.vue in TS
 (#399)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rewrites `src/pages/installation/ConstructorOptions.vue` in TypeScript.
Also renames `src/pages/installation/api/constructor-options.(js → ts).

Fixes the issue that Vite complained about the missing `buefy` package,
which was not actually used. This was caused by the code snippets
`ConstructorOptions.vue`, which Vite conufsed with the actual code and
tried to translate them. Moves these code snippets to a separate
TypeScript file `usage/constructor-options.ts`.
---
 .../pages/installation/ConstructorOptions.vue | 44 +++++++++----------
 ...ctor-options.js => constructor-options.ts} |  0
 .../installation/usage/constructor-options.ts | 27 ++++++++++++
 3 files changed, 47 insertions(+), 24 deletions(-)
 rename packages/docs/src/pages/installation/api/{constructor-options.js => constructor-options.ts} (100%)
 create mode 100644 packages/docs/src/pages/installation/usage/constructor-options.ts

diff --git a/packages/docs/src/pages/installation/ConstructorOptions.vue b/packages/docs/src/pages/installation/ConstructorOptions.vue
index 6d1ad6b32..a5eb15480 100644
--- a/packages/docs/src/pages/installation/ConstructorOptions.vue
+++ b/packages/docs/src/pages/installation/ConstructorOptions.vue
@@ -16,37 +16,33 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+    import { defineComponent } from 'vue'
+
+    import ApiView from '@/components/ApiView.vue'
+    import CodeView from '@/components/CodeView.vue'
     import { preformat } from '@/utils'
+
     import api from './api/constructor-options'
+    import {
+        usageBundle,
+        usageCdn,
+        usageComponents,
+    } from './usage/constructor-options'
 
-    export default {
+    export default defineComponent({
+        components: {
+            ApiView,
+            CodeView
+        },
         data() {
             return {
                 api,
-                usageBundle: `
-                Vue.use(Buefy, {
-                    defaultIconPack: 'fas',
-                    // ...
-                })`,
-                usageComponents: `
-                import { ConfigProgrammatic, Table, Input } from 'buefy'
-
-                Vue.use(Table)
-                Vue.use(Input)
-                ConfigProgrammatic.setOptions({
-                    defaultIconPack: 'fas',
-                    // ...
-                })`,
-                usageCdn: `
-                // When using CDN, Buefy automatically attaches itself on Vue
-                Vue.prototype.$buefy.config.setOptions({
-                    defaultIconPack: 'fas',
-                    // ...
-                })
-                `
+                usageBundle,
+                usageComponents,
+                usageCdn,
             }
         },
         methods: { preformat }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/installation/api/constructor-options.js b/packages/docs/src/pages/installation/api/constructor-options.ts
similarity index 100%
rename from packages/docs/src/pages/installation/api/constructor-options.js
rename to packages/docs/src/pages/installation/api/constructor-options.ts
diff --git a/packages/docs/src/pages/installation/usage/constructor-options.ts b/packages/docs/src/pages/installation/usage/constructor-options.ts
new file mode 100644
index 000000000..42fb8fa9e
--- /dev/null
+++ b/packages/docs/src/pages/installation/usage/constructor-options.ts
@@ -0,0 +1,27 @@
+// Code snippets used in the `ConstructorOptions` component.
+//
+// Vite may confuse these examples with the legitimate code and try to compile
+// them, if they are in the component (.vue) file.
+
+export const usageBundle = `
+Vue.use(Buefy, {
+    defaultIconPack: 'fas',
+    // ...
+})`
+
+export const usageComponents = `
+import { ConfigProgrammatic, Table, Input } from 'buefy'
+
+Vue.use(Table)
+Vue.use(Input)
+ConfigProgrammatic.setOptions({
+    defaultIconPack: 'fas',
+    // ...
+})`
+
+export const usageCdn = `
+// When using CDN, Buefy automatically attaches itself on Vue
+Vue.prototype.$buefy.config.setOptions({
+    defaultIconPack: 'fas',
+    // ...
+})`