✨ refactor: remove all @ts-* directives

Author: kravetsone

components/blog/Layout.vue

@@ -20,12 +20,7 @@
                 </p>
             </div>
         </aside> -->
-        <img
-            :src="props.src"
-            :alt="props.alt"
-            class="w-full my-6"
-            :class="props.shadow ? 'shadow-xl' : 'border'"
-        />
+        <img :src="props.src" :alt="props.alt" class="w-full my-6" :class="props.shadow ? 'shadow-xl' : 'border'" />
         <main id="blog-content">
             <slot />
         </main>
@@ -64,14 +59,12 @@ onMounted(() => {
     mutated.forEach((selector) => {
         console.log(document.querySelector(selector))
 
-        // @ts-ignore
         document.querySelector(selector)?.classList.add('blog')
     })
 })
 
 onUnmounted(() => {
     mutated.forEach((selector) => {
-        // @ts-ignore
         document.querySelector(selector)?.classList.remove('blog')
     })
 })
@@ -97,26 +90,26 @@ onUnmounted(() => {
     @apply text-lg mt-0;
 }
 
-#blog > img {
+#blog>img {
     @apply rounded-lg;
 }
 
-#blog > h1 {
+#blog>h1 {
     @apply !text-3xl md:!text-4xl font-semibold;
 }
 
-#blog > h2 {
+#blog>h2 {
     @apply !text-2xl md:!text-3xl font-semibold;
 }
 
-#blog > h3 {
+#blog>h3 {
     @apply !text-xl md:!text-2xl font-semibold;
 }
 
-#blog-content > video,
-#blog-content > * > video,
-#blog-content > img,
-#blog-content > * > img {
+#blog-content>video,
+#blog-content>*>video,
+#blog-content>img,
+#blog-content>*>img {
     @apply rounded-xl my-4;
     /* box-shadow: 0 8px 25px rgba(0,0,0,.1) */
 }
@@ -127,7 +120,7 @@ onUnmounted(() => {
 }
 
 @media (min-width: 768px) {
-    #blog > h1 {
+    #blog>h1 {
         line-height: 3.25rem !important;
     }
 }

components/midori/editor.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import Prism from 'vue-prism-component'
-// @ts-ignore
 import PrismJS from 'prismjs';
 const { highlight, languages } = PrismJS
 
 import { Elysia } from 'elysia'
-import { text } from 'stream/consumers'
 
 let code = `const app = new Elysia()
     .get('/', () => 'Hello!')
@@ -18,7 +16,6 @@ export default app
 `
 
 function saveCaretPosition(context) {
-    // @ts-ignore
     const selection = window.getSelection()
     const range = selection.getRangeAt(0)
     range.setStart(context, 0)
@@ -28,15 +25,13 @@ function saveCaretPosition(context) {
         const pos = getTextNodeAtPosition(context, len)
         selection.removeAllRanges()
 
-        // @ts-ignore
         const range = new Range()
         range.setStart(pos.node, pos.position)
         selection.addRange(range)
     }
 }
 
 function nextCaretPosition(context) {
-    // @ts-ignore
     const selection = window.getSelection()
     const range = selection.getRangeAt(0)
     range.setStart(context, 0)
@@ -46,28 +41,23 @@ function nextCaretPosition(context) {
         const pos = getTextNodeAtPosition(context, len)
         selection.removeAllRanges()
 
-        // @ts-ignore
         const range = new Range()
         range.setStart(pos.node, pos.position)
         selection.addRange(range)
     }
 }
 
 function getTextNodeAtPosition(root, index) {
-    // @ts-ignore
     const NODE_TYPE = NodeFilter.SHOW_TEXT
-    // @ts-ignore
     const treeWalker = document.createTreeWalker(
         root,
         NODE_TYPE,
         function next(elem) {
             if (index > elem.textContent.length) {
                 index -= elem.textContent.length
-                // @ts-ignore
                 return NodeFilter.FILTER_REJECT
             }
 
-            // @ts-ignore
             return NodeFilter.FILTER_ACCEPT
         }
     )
@@ -84,7 +74,7 @@ let response = ref('Hello from Elysia!')
 
 let instance = new Elysia()
     .get('/', () => 'Hello!')
-    .get('/hello', () => 'Hello from Elysia!')
+    .get('/hello', () => 'Hello from Elysia!') as Elysia<any, any>
 
 let editorError = ref(undefined as Error | undefined)
 let responseError = ref(undefined as Error | undefined)
@@ -113,8 +103,7 @@ const execute = async () => {
 }
 
 onMounted(() => {
-    // @ts-ignore
-    const editor = document.querySelector('pre.elysia-editor')
+    const editor = document.querySelector<HTMLElement>('pre.elysia-editor')
 
     function rehighlight(event) {
         const restore = saveCaretPosition(this)
@@ -135,6 +124,7 @@ onMounted(() => {
                     'export default is missing'
                 ))
 
+
             instance = new Function(
                 'Elysia',
                 `
@@ -165,63 +155,46 @@ onMounted(() => {
 </script>
 
 <template>
-    <article
-        class="flex flex-col justify-center items-center w-full max-w-6xl mx-auto mt-6 md:my-12"
-    >
+    <article class="flex flex-col justify-center items-center w-full max-w-6xl mx-auto mt-6 md:my-12">
         <h2
-            class="text-6xl w-full text-left sm:text-center font-bold !leading-tight text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-violet-400 mb-6"
-        >
+            class="text-6xl w-full text-left sm:text-center font-bold !leading-tight text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-violet-400 mb-6">
             Try it out
         </h2>
 
-        <p
-            class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-2xl"
-        >
+        <p class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-2xl">
             Being WinterCG compliant, Elysia can run in your browser!
             <br />
             Edit the code and see live update immediately.
         </p>
 
         <aside class="flex flex-col md:flex-row justify-center items-center w-full max-w-6xl gap-8 my-8">
-            <section
-                class="flex flex-col w-full h-96 border dark:border-slate-700 bg-white dark:bg-slate-800 rounded-2xl"
-            >
+            <section class="flex flex-col w-full h-96 border dark:border-slate-700 bg-white dark:bg-slate-800 rounded-2xl">
                 <div class="mockup-window flex relative w-full h-full shadow-xl">
                     <Prism
                         class="elysia-editor block !bg-transparent !text-base !font-mono rounded-xl w-full max-w-xl h-full !pt-0 !px-2 outline-none"
-                        language="typescript"
-                        contenteditable="true"
-                    >
+                        language="typescript" contenteditable="true">
                         {{ code }}
                     </Prism>
 
-                    <footer
-                        v-if="editorError"
-                        class="absolute bottom-0 flex flex-col w-full max-h-40 overflow-y-auto text-white font-medium px-4 py-2 bg-red-500"
-                    >
+                    <footer v-if="editorError"
+                        class="absolute bottom-0 flex flex-col w-full max-h-40 overflow-y-auto text-white font-medium px-4 py-2 bg-red-500">
                         {{ editorError.cause }}
                         {{ editorError.stack }}
                     </footer>
                 </div>
             </section>
-            <div class="w-full mockup-browser h-96 shadow-xl border dark:border-slate-700 bg-white dark:bg-slate-800 max-w-full">
+            <div
+                class="w-full mockup-browser h-96 shadow-xl border dark:border-slate-700 bg-white dark:bg-slate-800 max-w-full">
                 <div class="mockup-browser-toolbar">
                     <form class="input font-medium !bg-gray-100 dark:!bg-slate-700" @submit.prevent="execute">
                         <span class="text-gray-400 dark:text-gray-300">localhost</span>
-                        <input
-                            class="absolute"
-                            type="text"
-                            v-model="url"
-                            v-on:blur="execute"
-                        />
+                        <input class="absolute" type="text" v-model="url" v-on:blur="execute" />
                     </form>
                 </div>
                 <div class="flex px-4">{{ response }}</div>
 
-                <footer
-                    v-if="responseError"
-                    class="absolute bottom-0 flex flex-col w-full max-h-40 overflow-y-auto text-white font-medium px-4 py-2 bg-red-500"
-                >
+                <footer v-if="responseError"
+                    class="absolute bottom-0 flex flex-col w-full max-h-40 overflow-y-auto text-white font-medium px-4 py-2 bg-red-500">
                     {{ responseError.cause }}
                     {{ responseError.stack }}
                 </footer>