chore: fix tsc for examples

docs/cypress/e2e/dark-mode.cypress.cy.js

@@ -6,12 +6,12 @@ describe('Dark Mode', () => {
   }
 
   const assertTheme = (theme) =>
-    cy.get('html').then(html =>
+    cy.get('html').then((html) =>
       expect(html.hasClass('dark')).to.equal(theme === 'dark'))
 
   it('can toggle on and off', () => {
     visitHome()
-    cy.get('html').then(html => {
+    cy.get('html').then((html) => {
       if (html.hasClass('dark')) toggleTheme()
       assertTheme('light')
     })

docs/cypress/e2e/docsearch.cypress.cy.js

@@ -15,7 +15,7 @@ describe('DocSearch', () => {
   const searchModal = () =>
     cy.get('.DocSearch-Modal')
 
-  const closeSearchModal = () =>{
+  const closeSearchModal = () => {
     cy.get('body').type('{esc}')
     searchModal().should('not.exist')
   }

docs/src/components/Iles.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-const props = defineProps({
+const { heading, small } = defineProps({
   heading: { type: Boolean, default: false },
   small: { type: Boolean, default: false },
   noText: { type: Boolean, default: false },
 })
-const marginTop = props.heading ? '-mt-3 mx-1' : props.small ? '-mt-2.3 mx-0.5' : '-mt-4.8'
-const size = props.small ? 'h-6' : 'h-10'
+
+const marginTop = heading ? '-mt-3 mx-1' : small ? '-mt-2.3 mx-0.5' : '-mt-4.8'
+const size = small ? 'h-6' : 'h-10'
 </script>
 
 <template>

docs/src/components/NavBarLink.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-const props = defineProps({
+const { href, external } = defineProps({
   href: { type: String, default: undefined },
   external: { type: Boolean, default: false },
   text: { type: String, default: '' },
 })
 
 const route = useRoute()
-let attrs = $computed(() => props.external ? { rel: 'noreferrer', target: '_blank' } : {})
-let isActive = $computed(() => props.href && route.path.includes(props.href))
+let attrs = $computed(() => external ? { rel: 'noreferrer', target: '_blank' } : {})
+let isActive = $computed(() => href && route.path.includes(href))
 </script>
 
 <template>

docs/src/components/NavBarLinks.vue

@@ -2,7 +2,7 @@
   <div v-for="(item, index) in $site.nav" :key="item.text" class="item">
     <NavBarLink :class="{ '<md:hidden': index > 1 }" :href="item.link" :text="item.text"/>
   </div>
-  <NavBarLink aria-label="Follow on Twitter" class="text-2xl hover:text-primary-soft ml-6" :href="$site.twitter" external>
+  <NavBarLink aria-label="Follow on Twitter" class="text-xl hover:text-primary-soft ml-6" :href="$site.twitter" external>
     <IconCarbonLogoTwitter/>
   </NavBarLink>
   <NavBarLink aria-label="Fork in GitHub" class="text-xl hover:text-primary-soft ml-2" :href="$site.github" external>

docs/src/components/SidebarLink.vue

@@ -1,15 +1,9 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
-import type { SideBarItem, SideBarGroup } from '~/logic/config'
+import type { SideBarGroup } from '~/logic/config'
 
-const props = defineProps({
-  item: {
-    type: Object as PropType<SideBarItem>,
-    required: true,
-  },
-})
+const { item } = defineProps<{ item: SideBarGroup }>()
 
-let children = $computed(() => (props.item as SideBarGroup).children)
+let children = $computed(() => item.children)
 </script>
 
 <template>

docs/src/components/SidebarLinkItem.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import { useAppConfig } from 'iles'
-import { toRef } from 'vue'
 import type { SideBarItem } from '~/logic/config'
 import { joinUrl } from '~/logic/utils'
 import { useActive } from '~/logic/sidebar'
 
-const props = defineProps<{ item: SideBarItem; header?: boolean; table?: boolean }>()
-const { item, header, table } = $(props)
+const { item, header, table } = defineProps<{ item: SideBarItem; header?: boolean; table?: boolean }>()
 
 const { base } = useAppConfig()
 
-const active = $(useActive(toRef(props, 'item')))
+const active = $(useActive(() => item))
 const link = $computed(() => item.link && joinUrl(base, item.link))
 
 const style = $computed(() => ([

docs/src/components/TimeAgo.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { watch, onBeforeUnmount } from 'vue'
 
-const props = defineProps<{ date: Date }>()
-let { date } = $(props)
+const { date } = defineProps<{ date: Date }>()
 
 let relativeTimeStr = $ref('')
 let dateStr = $computed(() => date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' }))
@@ -19,12 +18,13 @@ if (!import.meta.env.SSR) {
     return date.toLocaleDateString('en-US', { day: 'numeric', month: 'long' })
   }
 
-  const updateRelativeTimeStr = () =>
+  const updateRelativeTimeStr = () => {
     relativeTimeStr = currentTime((Number(new Date()) - Number(date)) / (60 * 60 * 1000))
+  }
 
   let activeInterval = setInterval(updateRelativeTimeStr, 60 * 1000)
   onBeforeUnmount(() => clearInterval(activeInterval))
-  watch($$(date), updateRelativeTimeStr, { immediate: true })
+  watch(() => date, updateRelativeTimeStr, { immediate: true })
 }
 </script>
 

docs/src/logic/sidebar.ts

@@ -1,4 +1,4 @@
-import { Ref, computed } from 'vue'
+import { MaybeRefOrGetter, computed, toValue } from 'vue'
 
 import type { Heading } from '@islands/headings'
 import type { SideBarItem, SideBarGroup } from '~/logic/config'
@@ -37,11 +37,11 @@ export function useSideBar () {
   })
 }
 
-export function useActive (itemRef: Ref<SideBarItem>) {
+export function useActive (itemRef: MaybeRefOrGetter<SideBarItem>) {
   const { route } = usePage()
 
   return computed(() => {
-    const { link, ...item } = itemRef.value
+    const { link, ...item } = toValue(itemRef)
 
     if (link === undefined)
       return false

docs/src/pages/guide/documents.mdx

@@ -87,15 +87,6 @@ export function usePosts () {
 }
 ```
 
-If you want to avoid using `value`, you can use [ref sugar] by wrapping it with `$()`:
-
-```ts
-export function usePosts () {
-  const posts = $(useDocuments('~/pages/posts'))
-  return computed(() => posts.sort(byDate))
-}
-```
-
 ## Comparison with `import.meta.glob`
 
 - Significantly __faster__ than `import.meta.glob('./dir/*.mdx', { eager: true })`, as it serves a single file

docs/src/pages/guide/rss.mdx

@@ -82,9 +82,9 @@ which are convenient to enable intellisense and type-checking for the feed optio
 ```ts
 import type { FeedItem } from '@islands/feed'
 
-const posts = $(useDocuments('~/pages/posts'))
+const posts = useDocuments('~/pages/posts')
 
-const items = posts.map<FeedItem>((post) => ({
+const items = posts.value.map<FeedItem>((post) => ({
   link: url + post.href,
   date: post.date,
   title: post.title,

docs/tsconfig.json

@@ -14,7 +14,10 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
-    "types": ["vite-plugin-pwa/client"],
+    "types": [
+      "@vue-macros/reactivity-transform/macros-global",
+      "vite-plugin-pwa/client"
+    ],
     "paths": {
       "~/*": ["src/*"]
     }

playground/the-vue-point/src/components/BackLink.tsx

@@ -1,4 +1,6 @@
-const BackLink = ({ href, children }: { href: string, children: any }) =>
+/** @jsxImportSource solid-js */
+
+const BackLink = ({ href, children }: { href: string, children?: any }) =>
   <a class="link" href={ href }>← { children }</a>
 
 export default BackLink

playground/the-vue-point/src/pages/index.vue

@@ -36,7 +36,7 @@ let posts = $(getPosts())
               <h2 class="text-2xl leading-8 font-bold tracking-tight">
                 <a class="text-gray-900" :href="post.href">{{ post.title }}</a>
               </h2>
-              <div class="prose max-w-none text-gray-500">
+              <div class="max-w-none prose text-gray-500">
                 <component :is="post" excerpt/>
               </div>
             </div>

playground/the-vue-point/src/pages/posts/[page].vue

@@ -32,7 +32,7 @@ defineProps<{
             <h2 class="text-2xl leading-8 font-bold tracking-tight">
               <a class="text-gray-900" :href="post.href">{{ post.title }}</a>
             </h2>
-            <div class="prose max-w-none text-gray-500">
+            <div class="max-w-none prose text-gray-500">
               <component :is="post" excerpt/>
             </div>
           </div>

playground/the-vue-point/tsconfig.json

@@ -13,6 +13,9 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
+    "types": [
+      "@vue-macros/reactivity-transform/macros-global"
+    ],
     "paths": {
       "~/*": ["src/*"]
     }