Removed @vue-macros/reactivity-transform

docs/iles.config.ts

@@ -10,7 +10,6 @@ import windicss from 'vite-plugin-windicss'
 import inspect from 'vite-plugin-inspect'
 import lastUpdated from './modules/lastUpdated'
 import site from './src/site'
-import ReactivityTransform from '@vue-macros/reactivity-transform/vite'
 
 const { title, description } = site
 
@@ -105,7 +104,6 @@ export default defineConfig({
       },
     },
     plugins: [
-      ReactivityTransform(),
       windicss(),
       Boolean(process.env.DEBUG) && inspect(),
     ],

docs/package.json

@@ -24,7 +24,6 @@
     "@islands/pwa": "workspace:*",
     "@preact/preset-vite": "^2.9.0",
     "@types/cross-spawn": "^6.0.6",
-    "@vue-macros/reactivity-transform": "^1.0.0",
     "@vueuse/core": "^10.11.0",
     "autoprefixer": "^10.4.19",
     "cross-spawn": "^7.0.3",
@@ -39,17 +38,6 @@
   },
   "dependencies": {
     "@docsearch/css": "^3.6.1",
-    "@mussi/docsearch": "^3.1.2-beta.0"
-  },
-  "eslintConfig": {
-    "rules": {
-      "react/react-in-jsx-scope": "off"
-    },
-    "globals": {
-      "$ref": "readonly",
-      "$computed": "readonly",
-      "$$": "readonly",
-      "$": "readonly"
-    }
+    "@mussi/docsearch": "3.1.2-beta.0"
   }
 }

docs/src/components/EditLink.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 let { meta, site } = usePage()
 
-let url = $computed(() => `${site.github}/edit/main/docs/${meta.filename}`)
+let url = computed(() => `${site.github}/edit/main/docs/${meta.filename}`)
 </script>
 
 <template>

docs/src/components/MetaTags.vue

@@ -2,10 +2,11 @@
 import bannerSrc from '/images/banner.png'
 import logoSrc from '/icons/logo.svg'
 import faviconSrc from '/images/favicon.ico'
+import { computed } from 'vue'
 
 const { frontmatter, site } = usePage()
 
-let imageUrl = $computed(() => `${site.url}${frontmatter.image || bannerSrc}`)
+let imageUrl = computed(() => `${site.url}${frontmatter.image || bannerSrc}`)
 
 const isProd = import.meta.env.PROD
 </script>

docs/src/components/NavBarLink.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = 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(() => props.external ? { rel: 'noreferrer', target: '_blank' } : {})
+let isActive = computed(() => props.href && route.path.includes(props.href))
 </script>
 
 <template>

docs/src/components/NextAndPrevLinks.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useSideBarLinks } from '~/logic/sidebar'
 
-const { next, prev } = $(useSideBarLinks())
+const { next, prev } = useSideBarLinks()
 </script>
 
 <template>

docs/src/components/SidebarLink.vue

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

docs/src/components/SidebarLinkItem.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
 import { useAppConfig } from 'iles'
-import { toRef } from 'vue'
+import { computed, 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 } = props
 
 const { base } = useAppConfig()
 
-const active = $(useActive(toRef(props, 'item')))
-const link = $computed(() => item.link && joinUrl(base, item.link))
+const active = useActive(toRef(props, 'item'))
+const link = computed(() => item.link && joinUrl(base, item.link))
 
-const style = $computed(() => ([
+const style = computed(() => ([
   header
     ? 'font-bold py-2'
     : table
       ? 'toc-link'
       : 'sidebar-link',
-  { active: !table && active },
+  { active: !table && active.value },
 ]))
 
 </script>

docs/src/components/SidebarNav.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useSideBar } from '~/logic/sidebar'
 
 let items = useSideBar()
-let hasItem = $computed(() => items.value.length > 0)
+let hasItem = computed(() => items.value.length > 0)
 </script>
 
 <template>

docs/src/components/TableOfContents.vue

@@ -7,24 +7,24 @@ interface HeadingWithChildren extends Heading {
 }
 
 let { meta, frontmatter } = usePage()
-let level = $computed(() => frontmatter.tocLevel || (frontmatter.sidebar === 'auto' ? 3 : 2))
+let level = computed(() => frontmatter.tocLevel || (frontmatter.sidebar === 'auto' ? 3 : 2))
 
-let headings = $computed(() => resolveHeaders(meta.headings || []))
+let headings = computed(() => resolveHeaders(meta.headings || []))
 
 function resolveHeaders (headings: Heading[]): SideBarItem[] {
-  return mapHeaders(groupHeaders(headings))
+  return mapHeaders(groupHeaders(headings.value))
 }
 
 function groupHeaders (headings: Heading[]): HeadingWithChildren[] {
-  headings = headings.map(h => Object.assign({}, h))
+  headings.value = headings.value.map(h => Object.assign({}, h))
   let lastHeading: HeadingWithChildren
-  headings.forEach((h) => {
+  headings.value.forEach((h) => {
     if (h.level === level)
       lastHeading = h
     else if (lastHeading)
       (lastHeading.children || (lastHeading.children = [])).push(h)
   })
-  return headings.filter(h => h.level === level)
+  return headings.value.filter(h => h.level === level.value)
 }
 
 function mapHeaders (headings: HeadingWithChildren[]): SideBarItem[] {

docs/src/components/TimeAgo.vue

@@ -2,11 +2,11 @@
 import { watch, onBeforeUnmount } from 'vue'
 
 const props = defineProps<{ date: Date }>()
-let { date } = $(props)
+let { date } = props
 
-let relativeTimeStr = $ref('')
-let dateStr = $computed(() => date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' }))
-let timeStr = $computed(() => date.toISOString())
+let relativeTimeStr = ref('')
+let dateStr = computed(() => date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' }))
+let timeStr = computed(() => date.toISOString())
 
 if (!import.meta.env.SSR) {
   const currentTime = (hoursAgo: number): string => {
@@ -20,11 +20,11 @@ if (!import.meta.env.SSR) {
   }
 
   const updateRelativeTimeStr = () =>
-    relativeTimeStr = currentTime((Number(new Date()) - Number(date)) / (60 * 60 * 1000))
+    relativeTimeStr.value = 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

@@ -8,13 +8,13 @@ import { normalize } from '~/logic/utils'
 export function useSideBarLinks () {
   const { route, site } = usePage()
 
-  const currentPath = $computed(() => normalize(route.path))
-  const links = $computed(() => site.sidebar.flatMap(group => group.children || group))
-  const index = $computed(() => links.findIndex(item => normalize(item.link) === currentPath))
+  const currentPath = computed(() => normalize(route.path))
+  const links = computed(() => site.sidebar.flatMap(group => group.children || group))
+  const index = computed(() => links.value.findIndex(item => normalize(item.link) === currentPath.value))
 
   return {
-    next: computed(() => index > -1 && links[index + 1]),
-    prev: computed(() => index > -1 && links[index - 1]),
+    next: computed(() => index.value > -1 && links.value[index.value + 1]),
+    prev: computed(() => index.value > -1 && links.value[index.value - 1]),
   }
 }
 

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,

eslint.config.mjs

@@ -16,11 +16,6 @@ export default [{
 }, ...compat.extends("@mussi/eslint-config"), {
     languageOptions: {
         globals: {
-            $ref: "readonly",
-            $computed: "readonly",
-            $shallowRef: "readonly",
-            $$: "readonly",
-            $: "readonly",
             usePage: "readonly",
             useRoute: "readonly",
             useHead: "readonly",

packages/images/src/Picture.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 const { src } = defineProps<{ src: string | any[] }>()
 
-const allSources = $computed(() => Array.isArray(src) ? src : [{ srcset: src, src }])
-const sources = $computed(() => allSources.slice(0, -1))
-const lastSource = $computed(() => allSources[allSources.length - 1])
+const allSources = computed(() => Array.isArray(src) ? src : [{ srcset: src, src }])
+const sources = computed(() => allSources.value.slice(0, -1))
+const lastSource = computed(() => allSources[allSources.value.length - 1])
 </script>
 
 <script lang="ts">

playground/the-vue-point/iles.config.ts

@@ -9,7 +9,6 @@ import prism from '@islands/prism'
 
 import windicss from 'vite-plugin-windicss'
 import inspect from 'vite-plugin-inspect'
-import ReactivityTransform from '@vue-macros/reactivity-transform/vite'
 
 const presets = {
   narrow: hdPreset({
@@ -60,7 +59,6 @@ export default defineConfig({
   },
   vite: {
     plugins: [
-      ReactivityTransform(),
       windicss(),
       Boolean(process.env.DEBUG) && inspect(),
     ],

playground/the-vue-point/package.json

@@ -21,7 +21,6 @@
     "@islands/icons": "workspace:*",
     "@islands/images": "workspace:*",
     "@islands/prism": "workspace:*",
-    "@vue-macros/reactivity-transform": "^1.0.0",
     "iles": "workspace:*",
     "remark-gfm": "^4.0.0",
     "vite-plugin-windicss": "^1.9.3",

playground/the-vue-point/src/layouts/post.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
 import { usePage } from 'iles'
 import { getPosts } from '~/logic/posts'
+import { computed } from 'vue'
 
-const posts = $(getPosts())
+const posts = getPosts()
 
-const { page } = $(usePage())
+const { page } = usePage()
 
-const currentIndex = $computed(() => posts.findIndex(p => p.href === page.href))
-const post = $computed(() => posts[currentIndex])
-const nextPost = $computed(() => posts[currentIndex - 1])
-const prevPost = $computed(() => posts[currentIndex + 1])
+const currentIndex = computed(() => posts.value.findIndex(p => p.href === page.value.href))
+const post = computed(() => posts.value[currentIndex.value])
+const nextPost = computed(() => posts.value[currentIndex.value - 1])
+const prevPost = computed(() => posts.value[currentIndex.value + 1])
 
-const author = $computed(() => {
-  const { twitter, avatar, gravatar, author } = post
+const author = computed(() => {
+  const { twitter, avatar, gravatar, author } = post.value
   return { twitter, avatar, gravatar, author }
 })
 </script>

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

@@ -5,6 +5,7 @@ path: /feed.rss
 <script setup lang="ts">
 import type { FeedOptions, FeedItem } from '@islands/feed'
 import { getPosts } from '~/logic/posts'
+import { computed } from 'vue'
 
 const { site } = usePage()
 const url = site.url
@@ -21,8 +22,8 @@ const options: FeedOptions = {
     'Copyright (c) 2021-present, Yuxi (Evan) You and blog contributors',
 }
 
-const posts = $(getPosts())
-const items = $computed(() => posts.map(async (doc) => {
+const posts = getPosts()
+const items = computed(() => posts.value.map(async (doc) => {
   const post = await doc.component()
   return {
     title: post.title,

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

@@ -5,7 +5,7 @@ alias: ['/posts']
 <script setup lang="ts">
 import { getPosts } from '~/logic/posts'
 
-let posts = $(getPosts())
+let posts = getPosts()
 </script>
 
 <template>

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

@@ -5,8 +5,8 @@ import { paginate } from '~/logic/pagination'
 
 export default definePageComponent({
   getStaticPaths () {
-    const posts = $(getPosts())
-    return paginate(posts, { pageSize: 2 })
+    const posts = getPosts()
+    return paginate(posts.value, { pageSize: 2 })
   },
 })
 </script>