From 393f695f743bce39765e540aae717182beb5866b Mon Sep 17 00:00:00 2001
From: Hiroki KIYOHARA <hirokiky@gmail.com>
Date: Thu, 22 Feb 2024 23:21:12 +0900
Subject: [PATCH 1/3] Migrated Skeleton to Vue 3 functional component

---
 .../src/components/skeleton/Skeleton.vue      | 137 +++++++++---------
 1 file changed, 68 insertions(+), 69 deletions(-)

diff --git a/packages/buefy-next/src/components/skeleton/Skeleton.vue b/packages/buefy-next/src/components/skeleton/Skeleton.vue
index 82563bf33..dd4fe4508 100644
--- a/packages/buefy-next/src/components/skeleton/Skeleton.vue
+++ b/packages/buefy-next/src/components/skeleton/Skeleton.vue
@@ -1,77 +1,76 @@
 <script>
-import { h as createElement } from 'vue'
+import { createCommentVNode, h as createElement } from 'vue'
 
-export default {
-    name: 'BSkeleton',
-    functional: true,
-    props: {
-        active: {
-            type: Boolean,
-            default: true
-        },
-        animated: {
-            type: Boolean,
-            default: true
-        },
-        width: [Number, String],
-        height: [Number, String],
-        circle: Boolean,
-        rounded: {
-            type: Boolean,
-            default: true
-        },
-        count: {
-            type: Number,
-            default: 1
-        },
-        position: {
-            type: String,
-            default: '',
-            validator(value) {
-                return [
-                    '',
-                    'is-centered',
-                    'is-right'
-                ].indexOf(value) > -1
+const BSkeleton = (props) => {
+    if (!props.active) return createCommentVNode()
+    const items = []
+    const width = props.width
+    const height = props.height
+    for (let i = 0; i < props.count; i++) {
+        items.push(createElement('div', {
+            class: [
+                'b-skeleton-item',
+                { 'is-rounded': props.rounded }
+            ],
+            key: i,
+            style: {
+                height: height === undefined
+                    ? null
+                    : (isNaN(height) ? height : height + 'px'),
+                width: width === undefined
+                    ? null
+                    : (isNaN(width) ? width : width + 'px'),
+                borderRadius: props.circle ? '50%' : null
             }
+        }))
+    }
+    return createElement(
+        'div',
+        {
+            class: [
+                'b-skeleton',
+                props.size,
+                props.position,
+                { 'is-animated': props.animated }
+            ]
         },
-        size: String
+        items
+    )
+}
+
+BSkeleton.props = {
+    active: {
+        type: Boolean,
+        default: true
     },
-    render(props) {
-        if (!props.active) return
-        const items = []
-        const width = props.width
-        const height = props.height
-        for (let i = 0; i < props.count; i++) {
-            items.push(createElement('div', {
-                class: [
-                    'b-skeleton-item',
-                    { 'is-rounded': props.rounded }
-                ],
-                key: i,
-                style: {
-                    height: height === undefined
-                        ? null
-                        : (isNaN(height) ? height : height + 'px'),
-                    width: width === undefined
-                        ? null
-                        : (isNaN(width) ? width : width + 'px'),
-                    borderRadius: props.circle ? '50%' : null
-                }
-            }))
+    animated: {
+        type: Boolean,
+        default: true
+    },
+    width: [Number, String],
+    height: [Number, String],
+    circle: Boolean,
+    rounded: {
+        type: Boolean,
+        default: true
+    },
+    count: {
+        type: Number,
+        default: 1
+    },
+    position: {
+        type: String,
+        default: '',
+        validator(value) {
+            return [
+                '',
+                'is-centered',
+                'is-right'
+            ].indexOf(value) > -1
         }
-        return createElement(
-            'div',
-            {
-                class: [
-                    'b-skeleton',
-                    props.size,
-                    props.position,
-                    { 'is-animated': props.animated }
-                ]
-            },
-            items
-        )
-    }
+    },
+    size: String
 }
+
+export default BSkeleton
 </script>

From 58df9a5870428e98417fd94bcdf8799bca70e50f Mon Sep 17 00:00:00 2001
From: Hiroki KIYOHARA <hirokiky@gmail.com>
Date: Fri, 23 Feb 2024 17:15:56 +0900
Subject: [PATCH 2/3] Fixes name mangling problem of Functional Components in
 production

See https://github.com/ntohq/buefy-next/commit/d44e6d20a3420efb1f91c092d6dd21fbf5481153
---
 packages/buefy-next/src/components/skeleton/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/buefy-next/src/components/skeleton/index.js b/packages/buefy-next/src/components/skeleton/index.js
index 3ac9dcb49..5ba46314f 100644
--- a/packages/buefy-next/src/components/skeleton/index.js
+++ b/packages/buefy-next/src/components/skeleton/index.js
@@ -4,7 +4,9 @@ import { use, registerComponent } from '../../utils/plugins'
 
 const Plugin = {
     install(Vue) {
-        registerComponent(Vue, Skeleton)
+        // explicit `name` is needed to avoid name mangling of
+        // Functional Component in production
+        registerComponent(Vue, Skeleton, 'BSkeleton')
     }
 }
 

From 100d667b01b8d78706fbab7b045f161ca8788c7a Mon Sep 17 00:00:00 2001
From: Hiroki KIYOHARA <hirokiky@gmail.com>
Date: Tue, 27 Feb 2024 14:47:03 +0900
Subject: [PATCH 3/3] Render function can return undefined/null

undefined/null will be normalized as comment VNode inside Vue runtime.
So we don't need to take care of it explicitly.
---
 packages/buefy-next/src/components/skeleton/Skeleton.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/buefy-next/src/components/skeleton/Skeleton.vue b/packages/buefy-next/src/components/skeleton/Skeleton.vue
index dd4fe4508..461ea84a6 100644
--- a/packages/buefy-next/src/components/skeleton/Skeleton.vue
+++ b/packages/buefy-next/src/components/skeleton/Skeleton.vue
@@ -1,8 +1,8 @@
 <script>
-import { createCommentVNode, h as createElement } from 'vue'
+import { h as createElement } from 'vue'
 
 const BSkeleton = (props) => {
-    if (!props.active) return createCommentVNode()
+    if (!props.active) return
     const items = []
     const width = props.width
     const height = props.height