Revert "fix(deps): update volarjs to v2 (major) (#633)"

This reverts commit 11e0519.

docs/guide/getting-started.md

@@ -9,7 +9,8 @@ We assume you are already familiar with the basic usages of Vue before you conti
 - Node.js 16.14.0 or higher.
 - Vue >= 2.7 or Vue >= 3.0.
  - Some features need Vue >= 3.2.25.
-- VSCode installed the [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) **latest** extension.
+- VSCode installed the [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) **v1.8.27** (the latest v1) extension.
+ - ❌ Considering that v2 is not yet stable and some issues remain unresolved, plus adapting to 2.x would mean an almost irreversible upgrade for Vue Macros, we've decided not to support 2.x at this time. In other words, we will continue to support v1.
  - ❌ WebStorm is not supported.
 
 ## Creating a Vue Macros Project

docs/zh-CN/guide/getting-started.md

@@ -9,7 +9,8 @@ Vue Macros 是一个库，用于实现尚未被 Vue 正式实现的提案或想
 - Node.js 16.14.0 或更高
 - Vue >= 2.7 或 Vue >= 3.0
  - 某些功能需要 Vue >= 3.2.25
-- VSCode 安装了 [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) **最新的**扩展
+- VSCode 安装了 [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) **v1.8.27**（最新的 v1）扩展
+ - ❌ 考虑到 2.x 版本尚未稳定，还有一些问题未被解决。并且适配 2.x 对 Vue Macros 几乎是不可逆的升级。所以我们决定目前不兼容 2.x，換而言之，我们依然支持 1.x。
  - ❌ 不支持 WebStorm
 
 ## 搭建第一个 Vue Macros 项目

package.json

@@ -65,7 +65,7 @@
  "vite": "^5.2.10",
  "vitest": "^1.5.2",
  "vue": "^3.4.25",
- "vue-tsc": "2.0.16",
+ "vue-tsc": "1.8.27",
  "vue2": "npm:vue@^2.7.16",
  "webpack": "^5.91.0"
  },

packages/nuxt/package.json

@@ -56,7 +56,7 @@
  "devDependencies": {
  "@nuxt/devtools": "^1.2.0",
  "@nuxt/schema": "^3.11.2",
- "@vue/language-core": "2.0.16"
+ "@vue/language-core": "1.8.27"
  },
  "engines": {
  "node": ">=16.14.0"

packages/volar/package.json

@@ -40,7 +40,7 @@
  "dev": "tsup --watch"
  },
  "peerDependencies": {
- "vue-tsc": "^2.0.0"
+ "vue-tsc": "^1.6.0"
  },
  "peerDependenciesMeta": {
  "vue-tsc": {
@@ -53,13 +53,13 @@
  "@vue-macros/define-props": "workspace:*",
  "@vue-macros/short-bind": "workspace:*",
  "@vue-macros/short-vmodel": "workspace:*",
- "@vue/language-core": "2.0.16",
+ "@vue/language-core": "1.8.27",
  "@vue/shared": "^3.4.25"
  },
  "devDependencies": {
  "@vue/compiler-dom": "^3.4.25",
  "typescript": "~5.4.5",
- "vue-tsc": "2.0.16"
+ "vue-tsc": "1.8.27"
  },
  "engines": {
  "node": ">=16.14.0"

packages/volar/src/common.ts

@@ -1,5 +1,6 @@
 import {
- type Code,
+ type FileRangeCapabilities,
+ type Segment,
  type Sfc,
  type VueCompilerOptions,
  replaceAll,
@@ -10,7 +11,11 @@ export function getVueLibraryName(vueVersion: number) {
  return vueVersion < 2.7 ? '@vue/runtime-dom' : 'vue'
 }
 
-export function addProps(content: Code[], decl: Code[]) {
+export function addProps(
+ content: Segment<FileRangeCapabilities>[],
+ decl: Segment<FileRangeCapabilities>[],
+ vueLibName: string,
+) {
  replaceAll(
  content,
  /setup\(\) {/g,
@@ -19,10 +24,17 @@ export function addProps(content: Code[], decl: Code[]) {
  '),\n',
  'setup() {',
  )
+ content.push(
+ `type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;\n`,
+ `type __VLS_TypePropsToRuntimeProps<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? { type: import('${vueLibName}').PropType<__VLS_NonUndefinedable<T[K]>> } : { type: import('${vueLibName}').PropType<T[K]>, required: true } };\n`,
+ )
  return true
 }
 
-export function addEmits(content: Code[], decl: Code[]) {
+export function addEmits(
+ content: Segment<FileRangeCapabilities>[],
+ decl: Segment<FileRangeCapabilities>[],
+) {
  replaceAll(
  content,
  /setup\(\) {/g,
@@ -40,56 +52,35 @@ export function getVolarOptions(
  return vueCompilerOptions.vueMacros
 }
 
-export function getImportNames(ts: typeof import('typescript'), sfc: Sfc) {
+export function getImportNames(
+ ts: typeof import('typescript/lib/tsserverlibrary'),
+ sfc: Sfc,
+) {
  const names: string[] = []
  const sourceFile = sfc.scriptSetup!.ast
- ts.forEachChild(sourceFile, (node) => {
+ sourceFile.forEachChild((node) => {
  if (
  ts.isImportDeclaration(node) &&
- node.attributes?.elements.some(
+ node.assertClause?.elements.some(
  (el) =>
- getText(el.name, { ts, sfc, source: 'scriptSetup' }) === 'type' &&
+ el.name.text === 'type' &&
  ts.isStringLiteral(el.value) &&
- getText(el.value, { ts, sfc, source: 'scriptSetup' }) === 'macro',
+ el.value.text === 'macro',
  )
  ) {
- const name = node.importClause?.name?.escapedText
+ const name = node.importClause?.name?.text
  if (name) names.push(name)
 
  if (node.importClause?.namedBindings) {
  const bindings = node.importClause.namedBindings
  if (ts.isNamespaceImport(bindings)) {
- names.push(bindings.name.escapedText!)
+ names.push(bindings.name.text)
  } else {
- for (const el of bindings.elements) names.push(el.name.escapedText!)
+ for (const el of bindings.elements) names.push(el.name.text)
  }
  }
  }
  })
 
  return names
 }
-
-interface Options {
- sfc: Sfc
- ts: typeof import('typescript')
- source?: 'script' | 'scriptSetup'
-}
-
-export function getStart(
- node: import('typescript').Node,
- { ts, sfc, source = 'scriptSetup' }: Options,
-) {
- return (ts as any).getTokenPosOfNode(node, sfc[source]!.ast)
-}
-
-export function getText(node: import('typescript').Node, options: Options) {
- const { sfc, source = 'scriptSetup' } = options
- return sfc[source]!.content.slice(getStart(node, options), node.end)
-}
-
-export function isJsxExpression(
- node?: import('typescript').Node,
-): node is import('typescript').JsxExpression {
- return node?.kind === 294
-}

packages/volar/src/define-models.ts

@@ -1,9 +1,10 @@
 import { DEFINE_MODELS, DEFINE_MODELS_DOLLAR } from '@vue-macros/common'
 import {
- type Code,
+ FileKind,
+ FileRangeCapabilities,
+ type Segment,
  type Sfc,
  type VueLanguagePlugin,
- allCodeFeatures,
 } from '@vue/language-core'
 import {
  addEmits,
@@ -16,18 +17,28 @@ function transformDefineModels({
  codes,
  sfc,
  typeArg,
+ vueLibName,
  unified,
 }: {
- codes: Code[]
+ codes: Segment<FileRangeCapabilities>[]
  sfc: Sfc
- typeArg: import('typescript').TypeNode
+ typeArg: import('typescript/lib/tsserverlibrary').TypeNode
  vueLibName: string
  unified: boolean
 }) {
  const source = sfc.scriptSetup!.content.slice(typeArg.pos, typeArg.end)
- const seg: Code = [source, 'scriptSetup', typeArg!.pos, allCodeFeatures]
+ const seg: Segment<FileRangeCapabilities> = [
+ source,
+ 'scriptSetup',
+ typeArg!.pos,
+ FileRangeCapabilities.full,
+ ]
  mergeProps() ||
- addProps(codes, ['__VLS_TypePropsToOption<__VLS_ModelToProps<', seg, '>>'])
+ addProps(
+ codes,
+ ['__VLS_TypePropsToRuntimeProps<__VLS_ModelToProps<', seg, '>>'],
+ vueLibName,
+ )
  mergeEmits() || addEmits(codes, ['__VLS_ModelToEmits<', seg, '>'])
 
  codes.push(
@@ -45,19 +56,13 @@ function transformDefineModels({
 
  function mergeProps() {
  const indexes = codes.reduce((res: number[], code, index) => {
- if (code === '__VLS_TypePropsToOption<') res.unshift(index)
+ if (code === '__VLS_TypePropsToRuntimeProps<') res.unshift(index)
  return res
  }, [])
  if (indexes.length === 0) return false
 
  for (const idx of indexes)
- codes.splice(
- idx + 2,
- 0,
- ' & __VLS_TypePropsToOption<__VLS_ModelToProps<',
- seg,
- '>>',
- )
+ codes.splice(idx + 2, 0, ' & __VLS_ModelToProps<', seg, '>')
  return true
  }
 
@@ -75,15 +80,16 @@ function transformDefineModels({
  }
 }
 
-function getTypeArg(ts: typeof import('typescript'), sfc: Sfc) {
- function getCallArg(node: import('typescript').Node) {
+function getTypeArg(
+ ts: typeof import('typescript/lib/tsserverlibrary'),
+ sfc: Sfc,
+) {
+ function getCallArg(node: import('typescript/lib/tsserverlibrary').Node) {
  if (
  !(
  ts.isCallExpression(node) &&
  ts.isIdentifier(node.expression) &&
- [DEFINE_MODELS, DEFINE_MODELS_DOLLAR].includes(
- node.expression.escapedText!,
- ) &&
+ [DEFINE_MODELS, DEFINE_MODELS_DOLLAR].includes(node.expression.text) &&
  node.typeArguments?.length === 1
  )
  )
@@ -92,11 +98,11 @@ function getTypeArg(ts: typeof import('typescript'), sfc: Sfc) {
  }
 
  const sourceFile = sfc.scriptSetup!.ast
- return ts.forEachChild(sourceFile, (node) => {
+ return sourceFile.forEachChild((node) => {
  if (ts.isExpressionStatement(node)) {
  return getCallArg(node.expression)
  } else if (ts.isVariableStatement(node)) {
- return ts.forEachChild(node.declarationList, (decl) => {
+ return node.declarationList.forEachChild((decl) => {
  if (!ts.isVariableDeclaration(decl) || !decl.initializer) return
  return getCallArg(decl.initializer)
  })
@@ -110,10 +116,10 @@ const plugin: VueLanguagePlugin = ({
 }) => {
  return {
  name: 'vue-macros-define-models',
- version: 2,
- resolveEmbeddedCode(fileName, sfc, embeddedFile) {
+ version: 1,
+ resolveEmbeddedFile(fileName, sfc, embeddedFile) {
  if (
- !['ts', 'tsx'].includes(embeddedFile.lang) ||
+ embeddedFile.kind !== FileKind.TypeScriptHostFile ||
  !sfc.scriptSetup ||
  !sfc.scriptSetup.ast
  )

packages/volar/src/define-options.ts

@@ -1,45 +1,51 @@
 import { DEFINE_OPTIONS } from '@vue-macros/common'
 import {
- type Code,
+ FileKind,
+ FileRangeCapabilities,
+ type Segment,
  type Sfc,
  type VueLanguagePlugin,
- allCodeFeatures,
- replaceAll,
+ replace,
 } from '@vue/language-core'
 
 function transformDefineOptions({
  codes,
  sfc,
  arg,
 }: {
- codes: Code[]
+ codes: Segment<FileRangeCapabilities>[]
  sfc: Sfc
- arg: import('typescript').Node
+ arg: import('typescript/lib/tsserverlibrary').Node
 }) {
  const source = sfc.scriptSetup!.content.slice(arg.pos, arg.end)
- const seg: Code = [source, 'scriptSetup', arg!.pos, allCodeFeatures]
- replaceAll(codes, /setup\(\) {/g, '...', seg, ',\nsetup() {')
+ const seg: Segment<FileRangeCapabilities> = [
+ source,
+ 'scriptSetup',
+ arg!.pos,
+ FileRangeCapabilities.full,
+ ]
+ replace(codes, /setup\(\) {/, '...', seg, ',\nsetup() {')
 }
 
-function getArg(ts: typeof import('typescript'), sfc: Sfc) {
- function getCallArg(node: import('typescript').Node) {
+function getArg(ts: typeof import('typescript/lib/tsserverlibrary'), sfc: Sfc) {
+ function getCallArg(node: import('typescript/lib/tsserverlibrary').Node) {
  if (
  !(
  ts.isCallExpression(node) &&
  ts.isIdentifier(node.expression) &&
- node.expression.escapedText === DEFINE_OPTIONS
+ node.expression.text === DEFINE_OPTIONS
  )
  )
  return undefined
  return node.arguments[0]
  }
 
  const sourceFile = sfc.scriptSetup!.ast
- return ts.forEachChild(sourceFile, (node) => {
+ return sourceFile.forEachChild((node) => {
  if (ts.isExpressionStatement(node)) {
  return getCallArg(node.expression)
  } else if (ts.isVariableStatement(node)) {
- return ts.forEachChild(node.declarationList, (decl) => {
+ return node.declarationList.forEachChild((decl) => {
  if (!ts.isVariableDeclaration(decl) || !decl.initializer) return
  return getCallArg(decl.initializer)
  })
@@ -50,9 +56,14 @@ function getArg(ts: typeof import('typescript'), sfc: Sfc) {
 const plugin: VueLanguagePlugin = ({ modules: { typescript: ts } }) => {
  return {
  name: 'vue-macros-define-options',
- version: 2,
- resolveEmbeddedCode(fileName, sfc, embeddedFile) {
- if (!sfc.scriptSetup || !sfc.scriptSetup.ast) return
+ version: 1,
+ resolveEmbeddedFile(fileName, sfc, embeddedFile) {
+ if (
+ embeddedFile.kind !== FileKind.TypeScriptHostFile ||
+ !sfc.scriptSetup ||
+ !sfc.scriptSetup.ast
+ )
+ return
 
  const arg = getArg(ts, sfc)
  if (!arg) return

packages/volar/src/define-props-refs.ts

@@ -5,7 +5,7 @@ const plugin: VueLanguagePlugin = ({ vueCompilerOptions }) => {
 
  return {
  name: 'vue-macros-define-props-refs',
- version: 2,
+ version: 1,
  }
 }
 

packages/volar/src/define-props.ts

@@ -5,7 +5,7 @@ const plugin: VueLanguagePlugin = ({ vueCompilerOptions }) => {
 
  return {
  name: 'vue-macros-define-props',
- version: 2,
+ version: 1,
  }
 }