From 8fd4d6f57c286ca2e43e2e0823824916265acd83 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Mon, 14 Oct 2024 00:31:25 +0900
Subject: [PATCH] feat(docs): rewrite installation/Customization in TS

Rewrites `src/pages/installation/Customization.vue` in TypeScript.

Fixes the issue that Vite complained about the missing `buefy` package,
which was not actually used. This was caused by the code snippets in
`Customization.vue`, which Vite conufsed with the actual code and tried
to translate them. Moves these code snippets to a separate TypeScript
file `usage/customization.ts`.

Here is 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.
---
 .../src/pages/installation/Customization.vue  | 111 +++---------------
 .../pages/installation/usage/customization.ts |  95 +++++++++++++++
 2 files changed, 114 insertions(+), 92 deletions(-)
 create mode 100644 packages/docs/src/pages/installation/usage/customization.ts

diff --git a/packages/docs/src/pages/installation/Customization.vue b/packages/docs/src/pages/installation/Customization.vue
index 8c9bac6b1..f6d202fbf 100644
--- a/packages/docs/src/pages/installation/Customization.vue
+++ b/packages/docs/src/pages/installation/Customization.vue
@@ -49,103 +49,30 @@
     </div>
 </template>
 
-<script>
-    import { preformat } from '@/utils'
-
-    export default {
-        data() {
-            return {
-                sass: `
-                // Import Bulma's core
-                @import "~bulma/sass/utilities/_all";
-
-                // Set your colors
-                $primary: #8c67ef;
-                $primary-light: findLightColor($primary);
-                $primary-dark: findDarkColor($primary);
-                $primary-invert: findColorInvert($primary);
-                $twitter: #4099FF;
-                $twitter-invert: findColorInvert($twitter);
+<script lang="ts">
+    import { defineComponent } from 'vue'
 
-                // Lists and maps
-                $custom-colors: null !default;
-                $custom-shades: null !default;
-                
-                // Setup $colors to use as bulma classes (e.g. 'is-twitter')
-                $colors: mergeColorMaps(
-                    (
-                        "white": (
-                            $white,
-                            $black,
-                        ),
-                        "black": (
-                            $black,
-                            $white,
-                        ),
-                        "light": (
-                            $light,
-                            $light-invert,
-                        ),
-                        "dark": (
-                            $dark,
-                            $dark-invert,
-                        ),
-                        "primary": (
-                            $primary,
-                            $primary-invert,
-                            $primary-light,
-                            $primary-dark,
-                        ),
-                        "link": (
-                            $link,
-                            $link-invert,
-                            $link-light,
-                            $link-dark,
-                        ),
-                        "info": (
-                            $info,
-                            $info-invert,
-                            $info-light,
-                            $info-dark,
-                        ),
-                        "success": (
-                            $success,
-                            $success-invert,
-                            $success-light,
-                            $success-dark,
-                        ),
-                        "warning": (
-                            $warning,
-                            $warning-invert,
-                            $warning-light,
-                            $warning-dark,
-                        ),
-                        "danger": (
-                            $danger,
-                            $danger-invert,
-                            $danger-light,
-                            $danger-dark,
-                        ),
-                    ),
-                    $custom-colors
-                );
+    import { BMessage } from '@ntohq/buefy-next'
 
-                // Links
-                $link: $primary;
-                $link-invert: $primary-invert;
-                $link-focus-border: $primary;
+    import CodeView from '@/components/CodeView.vue'
+    import { preformat } from '@/utils'
 
-                // Import Bulma and Buefy styles
-                @import "~bulma";
-                @import "~buefy/src/scss/buefy";
-                `,
-                importing: `
-                import Vue from 'vue'
-                import Buefy from 'buefy'
+    import {
+        importing,
+        sass
+    } from './usage/customization'
 
-                Vue.use(Buefy)`
+    export default defineComponent({
+        components: {
+            BMessage,
+            CodeView
+        },
+        data() {
+            return {
+                sass,
+                importing
             }
         },
         methods: { preformat }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/installation/usage/customization.ts b/packages/docs/src/pages/installation/usage/customization.ts
new file mode 100644
index 000000000..d65021fb9
--- /dev/null
+++ b/packages/docs/src/pages/installation/usage/customization.ts
@@ -0,0 +1,95 @@
+// Code snippets used in the `Customization` 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 sass = `
+// Import Bulma's core
+@import "~bulma/sass/utilities/_all";
+
+// Set your colors
+$primary: #8c67ef;
+$primary-light: findLightColor($primary);
+$primary-dark: findDarkColor($primary);
+$primary-invert: findColorInvert($primary);
+$twitter: #4099FF;
+$twitter-invert: findColorInvert($twitter);
+
+// Lists and maps
+$custom-colors: null !default;
+$custom-shades: null !default;
+
+// Setup $colors to use as bulma classes (e.g. 'is-twitter')
+$colors: mergeColorMaps(
+    (
+        "white": (
+            $white,
+            $black,
+        ),
+        "black": (
+            $black,
+            $white,
+        ),
+        "light": (
+            $light,
+            $light-invert,
+        ),
+        "dark": (
+            $dark,
+            $dark-invert,
+        ),
+        "primary": (
+            $primary,
+            $primary-invert,
+            $primary-light,
+            $primary-dark,
+        ),
+        "link": (
+            $link,
+            $link-invert,
+            $link-light,
+            $link-dark,
+        ),
+        "info": (
+            $info,
+            $info-invert,
+            $info-light,
+            $info-dark,
+        ),
+        "success": (
+            $success,
+            $success-invert,
+            $success-light,
+            $success-dark,
+        ),
+        "warning": (
+            $warning,
+            $warning-invert,
+            $warning-light,
+            $warning-dark,
+        ),
+        "danger": (
+            $danger,
+            $danger-invert,
+            $danger-light,
+            $danger-dark,
+        ),
+    ),
+    $custom-colors
+);
+
+// Links
+$link: $primary;
+$link-invert: $primary-invert;
+$link-focus-border: $primary;
+
+// Import Bulma and Buefy styles
+@import "~bulma";
+@import "~buefy/src/scss/buefy";
+`
+
+export const importing = `
+import Vue from 'vue'
+import Buefy from 'buefy'
+
+Vue.use(Buefy)`