diff --git a/src/App.vue b/src/App.vue index 572f1e1..b07596f 100644 --- a/src/App.vue +++ b/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] } diff --git a/src/components/Header.vue b/src/components/Header.vue index 0cfc632..cc7e2f5 100644 --- a/src/components/Header.vue +++ b/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>({ 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') } diff --git a/src/composables/store.ts b/src/composables/store.ts index dd43b5b..0d996f8 100644 --- a/src/composables/store.ts +++ b/src/composables/store.ts @@ -34,10 +34,10 @@ export const useStore = (initial: Initial) => { initial.versions || { vue: 'latest', elementPlus: 'latest' } ) - let compiler = $(shallowRef()) - const [nightly, toggleNightly] = $(useToggle(false)) - let userOptions = $ref(initial.userOptions || {}) - const hideFile = $computed(() => !IS_DEV && !userOptions.showHidden) + const compiler = shallowRef() + const [nightly, toggleNightly] = useToggle(false) + const userOptions = ref(initial.userOptions || {}) + const hideFile = computed(() => !IS_DEV && !userOptions.value.showHidden) const _files = initFiles(initial.serializedState || '') const state = reactive({ @@ -50,10 +50,10 @@ export const useStore = (initial: Initial) => { resetFlip: false, }) - const bultinImportMap = $computed(() => - genImportMap(versions, nightly) + const bultinImportMap = computed(() => + genImportMap(versions, nightly.value) ) - const userImportMap = $computed(() => { + const userImportMap = computed(() => { 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(() => - mergeImportMap(bultinImportMap, userImportMap) + const importMap = computed(() => + 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, diff --git a/src/env.d.ts b/src/env.d.ts index 646866a..f614c5b 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1,3 +1,2 @@ /// /// -/// diff --git a/src/utils/dependency.ts b/src/utils/dependency.ts index 33d936d..81a93ff 100644 --- a/src/utils/dependency.ts +++ b/src/utils/dependency.ts @@ -98,17 +98,19 @@ export const getVersions = (pkg: MaybeRef) => { } 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) => { 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')) }) } diff --git a/vite.config.ts b/vite.config.ts index b2e008c..195445d 100644 --- a/vite.config.ts +++ b/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'),