refactor: use script setup

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

@@ -4,51 +4,52 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { onMounted } from 'vue'
+import { defineProps, onMounted } from 'vue'
 
 /* global _bsa */
 const ID = 'bsa-cpc-script'
+const { code, placement } = defineProps<{ code: string; placement: string }>()
 
-export default {
+declare global {
-  name: 'BuySellAds',
+  var _bsa: BSA | undefined
-  props: {
+  interface BSA {
-    code: {
+    init(
-      type: String,
+      name: string,
-      required: true
+      code: string,
-    },
+      placement: string,
-    placement: {
+      options: {
-      type: String,
+        target: string
-      required: true
+        align: string
-    }
+        disable_css?: 'true' | 'false'
-  },
-
-  setup(props) {
-    function load() {
-      if (typeof _bsa !== 'undefined' && _bsa) {
-        _bsa.init('default', props.code, `placement:${props.placement}`, {
-          target: '.bsa-cpc',
-          align: 'horizontal',
-          disable_css: 'true'
-        })
       }
-    }
+    ): void
+  }
+}
 
-    onMounted(() => {
+function load() {
-      if (!document.getElementById(ID)) {
+  if (typeof _bsa !== 'undefined' && _bsa) {
-        const s = document.createElement('script')
+    _bsa.init('default', code, `placement:${placement}`, {
-        s.id = ID
+      target: '.bsa-cpc',
-        s.src = `//m.servedby-buysellads.com/monetization.js`
+      align: 'horizontal',
-        document.head.appendChild(s)
+      disable_css: 'true'
-        s.onload = () => {
-          load()
-        }
-      } else {
-        load()
-      }
     })
   }
 }
+
+onMounted(() => {
+  if (!document.getElementById(ID)) {
+    const s = document.createElement('script')
+    s.id = ID
+    s.src = `//m.servedby-buysellads.com/monetization.js`
+    document.head.appendChild(s)
+    s.onload = () => {
+      load()
+    }
+  } else {
+    load()
+  }
+})
 </script>
 
 <style>

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

@@ -2,35 +2,22 @@
   <div class="carbon-ads" ref="el"></div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { defineProps, onMounted, ref } from 'vue'
 
-export default {
+const { code, placement } = defineProps<{
-  name: 'CarbonAds',
+  code: string
-  props: {
+  placement: string
-    code: {
+}>()
-      type: String,
-      required: true
-    },
-    placement: {
-      type: String,
-      required: true
-    }
-  },
 
-  setup(props) {
+const el = ref()
-    const el = ref()
 
-    onMounted(() => {
+onMounted(() => {
-      const s = document.createElement('script')
+  const s = document.createElement('script')
-      s.id = '_carbonads_js'
+  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)
+  el.value.appendChild(s)
-    })
+})
-
-    return { el }
-  }
-}
 </script>
 
 <style>