refactor: use script setup

src/client/theme-default/components/BuySellAds.vue

@@ -4,29 +4,32 @@
   </div>
 </template>
 
-<script>
-import { onMounted } from 'vue'
+<script setup lang="ts">
+import { defineProps, onMounted } from 'vue'
 
 /* global _bsa */
 const ID = 'bsa-cpc-script'
+const { code, placement } = defineProps<{ code: string; placement: string }>()
 
-export default {
-  name: 'BuySellAds',
-  props: {
-    code: {
-      type: String,
-      required: true
-    },
-    placement: {
-      type: String,
-      required: true
-    }
-  },
+declare global {
+  var _bsa: BSA | undefined
+  interface BSA {
+    init(
+      name: string,
+      code: string,
+      placement: string,
+      options: {
+        target: string
+        align: string
+        disable_css?: 'true' | 'false'
+      }
+    ): void
+  }
+}
 
-  setup(props) {
 function load() {
   if (typeof _bsa !== 'undefined' && _bsa) {
-        _bsa.init('default', props.code, `placement:${props.placement}`, {
+    _bsa.init('default', code, `placement:${placement}`, {
       target: '.bsa-cpc',
       align: 'horizontal',
       disable_css: 'true'
@@ -47,8 +50,6 @@ export default {
     load()
   }
 })
-  }
-}
 </script>
 
 <style>

src/client/theme-default/components/CarbonAds.vue

@@ -2,35 +2,22 @@
   <div class="carbon-ads" ref="el"></div>
 </template>
 
-<script>
-import { onMounted, ref } from 'vue'
+<script setup lang="ts">
+import { defineProps, onMounted, ref } from 'vue'
 
-export default {
-  name: 'CarbonAds',
-  props: {
-    code: {
-      type: String,
-      required: true
-    },
-    placement: {
-      type: String,
-      required: true
-    }
-  },
+const { code, placement } = defineProps<{
+  code: string
+  placement: string
+}>()
 
-  setup(props) {
 const el = ref()
 
 onMounted(() => {
   const s = document.createElement('script')
   s.id = '_carbonads_js'
-      s.src = `//cdn.carbonads.com/carbon.js?serve=${props.code}&placement=${props.placement}`
+  s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
   el.value.appendChild(s)
 })
-
-    return { el }
-  }
-}
 </script>
 
 <style>