refactor: remove reactivity transform

src/App.vue

@@ -12,7 +12,7 @@ import type parserTypescript from 'prettier/parser-typescript'
 import type parserBabel from 'prettier/parser-babel'
 import type parserPostcss from 'prettier/parser-postcss'
 
-let loading = $ref(true)
+const loading = ref(true)
 
 // enable experimental features
 const sfcOptions: SFCOptions = {
@@ -53,7 +53,7 @@ if (store.pr) {
     store.userOptions.value.styleSource = `https://preview-${store.pr}-element-plus.surge.sh/bundle/index.css`
   store.versions.elementPlus = 'preview'
 }
-store.init().then(() => (loading = false))
+store.init().then(() => (loading.value = false))
 if (!store.pr && store.userOptions.value.styleSource) {
   store.pr = store.userOptions.value.styleSource.split('-', 2)[1]
 }

src/components/Header.vue

@@ -9,7 +9,7 @@ import {
 const appVersion = import.meta.env.APP_VERSION
 const replVersion = import.meta.env.REPL_VERSION
 
-const nightly = $ref(false)
+const nightly = ref(false)
 const dark = useDark()
 const toggleDark = useToggle(dark)
 
@@ -26,7 +26,7 @@ interface Version {
 const versions = reactive<Record<VersionKey, Version>>({
   elementPlus: {
     text: 'Element Plus',
-    published: getSupportedEpVersions($$(nightly)),
+    published: getSupportedEpVersions(nightly),
     active: store.versions.elementPlus,
   },
   vue: {
@@ -43,7 +43,7 @@ async function setVersion(key: VersionKey, v: string) {
 }
 
 const toggleNightly = () => {
-  store.toggleNightly(nightly)
+  store.toggleNightly(nightly.value)
   setVersion('elementPlus', 'latest')
 }
 

src/composables/store.ts

@@ -34,10 +34,10 @@ export const useStore = (initial: Initial) => {
     initial.versions || { vue: 'latest', elementPlus: 'latest' }
   )
 
-  let compiler = $(shallowRef<typeof import('vue/compiler-sfc')>())
-  const [nightly, toggleNightly] = $(useToggle(false))
-  let userOptions = $ref<UserOptions>(initial.userOptions || {})
-  const hideFile = $computed(() => !IS_DEV && !userOptions.showHidden)
+  const compiler = shallowRef<typeof import('vue/compiler-sfc')>()
+  const [nightly, toggleNightly] = useToggle(false)
+  const userOptions = ref<UserOptions>(initial.userOptions || {})
+  const hideFile = computed(() => !IS_DEV && !userOptions.value.showHidden)
 
   const _files = initFiles(initial.serializedState || '')
   const state = reactive<StoreState>({
@@ -50,10 +50,10 @@ export const useStore = (initial: Initial) => {
     resetFlip: false,
   })
 
-  const bultinImportMap = $computed<ImportMap>(() =>
-    genImportMap(versions, nightly)
+  const bultinImportMap = computed<ImportMap>(() =>
+    genImportMap(versions, nightly.value)
   )
-  const userImportMap = $computed<ImportMap>(() => {
+  const userImportMap = computed<ImportMap>(() => {
     const code = state.files[USER_IMPORT_MAP]?.code.trim()
     if (!code) return {}
     let map: ImportMap = {}
@@ -64,8 +64,8 @@ export const useStore = (initial: Initial) => {
     }
     return map
   })
-  const importMap = $computed<ImportMap>(() =>
-    mergeImportMap(bultinImportMap, userImportMap)
+  const importMap = computed<ImportMap>(() =>
+    mergeImportMap(bultinImportMap.value, userImportMap.value)
   )
 
   // eslint-disable-next-line no-console
@@ -74,7 +74,7 @@ export const useStore = (initial: Initial) => {
   const store: Store = reactive({
     init,
     state,
-    compiler: $$(compiler!) as any,
+    compiler: compiler as any,
     setActive,
     addFile,
     deleteFile,
@@ -85,12 +85,12 @@ export const useStore = (initial: Initial) => {
   })
 
   watch(
-    $$(importMap),
+    importMap,
     (content) => {
       state.files[IMPORT_MAP] = new File(
         IMPORT_MAP,
         JSON.stringify(content, undefined, 2),
-        hideFile
+        hideFile.value
       )
     },
     { immediate: true, deep: true }
@@ -100,8 +100,8 @@ export const useStore = (initial: Initial) => {
     (version) => {
       const file = new File(
         ELEMENT_PLUS_FILE,
-        generateElementPlusCode(version, userOptions.styleSource).trim(),
-        hideFile
+        generateElementPlusCode(version, userOptions.value.styleSource).trim(),
+        hideFile.value
       )
       state.files[ELEMENT_PLUS_FILE] = file
       compileFile(store, file)
@@ -123,7 +123,7 @@ export const useStore = (initial: Initial) => {
   async function setVueVersion(version: string) {
     const { compilerSfc, runtimeDom } = genVueLink(version)
 
-    compiler = await import(/* @vite-ignore */ compilerSfc)
+    compiler.value = await import(/* @vite-ignore */ compilerSfc)
     state.vueRuntimeURL = runtimeDom
     versions.vue = version
 
@@ -152,7 +152,7 @@ export const useStore = (initial: Initial) => {
 
   function serialize() {
     const state: SerializeState = { ...getFiles() }
-    state._o = userOptions
+    state._o = userOptions.value
     return utoa(JSON.stringify(state))
   }
   function deserialize(text: string): SerializeState {
@@ -168,11 +168,11 @@ export const useStore = (initial: Initial) => {
         if (filename === '_o') continue
         files[filename] = new File(filename, file as string)
       }
-      userOptions = saved._o || {}
+      userOptions.value = saved._o || {}
     } else {
       files[APP_FILE] = new File(APP_FILE, welcomeCode)
     }
-    files[MAIN_FILE] = new File(MAIN_FILE, mainCode, hideFile)
+    files[MAIN_FILE] = new File(MAIN_FILE, mainCode, hideFile.value)
     if (!files[USER_IMPORT_MAP]) {
       files[USER_IMPORT_MAP] = new File(
         USER_IMPORT_MAP,
@@ -272,7 +272,7 @@ export const useStore = (initial: Initial) => {
   }
 
   function getImportMap() {
-    return importMap
+    return importMap.value
   }
 
   async function setVersion(key: VersionKey, version: string) {
@@ -294,8 +294,8 @@ export const useStore = (initial: Initial) => {
     ...store,
 
     versions,
-    nightly: $$(nightly),
-    userOptions: $$(userOptions),
+    nightly,
+    userOptions,
 
     init,
     serialize,

src/env.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="vite/client" />
 /// <reference types="element-plus/global" />
-/// <reference types="vue/macros-global" />

src/utils/dependency.ts

@@ -98,17 +98,19 @@ export const getVersions = (pkg: MaybeRef<string>) => {
 }
 
 export const getSupportedVueVersions = () => {
-  const versions = $(getVersions('vue'))
-  return computed(() => versions.filter((version) => gte(version, '3.2.0')))
+  const versions = getVersions('vue')
+  return computed(() =>
+    versions.value.filter((version) => gte(version, '3.2.0'))
+  )
 }
 
 export const getSupportedEpVersions = (nightly: MaybeRef<boolean>) => {
   const pkg = computed(() =>
     unref(nightly) ? '@element-plus/nightly' : 'element-plus'
   )
-  const versions = $(getVersions(pkg))
+  const versions = getVersions(pkg)
   return computed(() => {
-    if (unref(nightly)) return versions
-    return versions.filter((version) => gte(version, '1.1.0-beta.18'))
+    if (unref(nightly)) return versions.value
+    return versions.value.filter((version) => gte(version, '1.1.0-beta.18'))
   })
 }

vite.config.ts

@@ -36,9 +36,9 @@ export default defineConfig(async () => {
     },
     plugins: [
       vue({
-        reactivityTransform: true,
         script: {
           defineModel: true,
+          propsDestructure: true,
           fs: {
             fileExists: fs.existsSync,
             readFile: (file) => fs.readFileSync(file, 'utf-8'),