feat(volar): add short vmodel support (#88)

vue-macros · Oct 13, 2022 · fa3b4e6 · fa3b4e6
1 parent 7c09da5
commit fa3b4e6
Show file tree

Hide file tree

Showing 20 changed files with 219 additions and 158 deletions.
diff --git a/.changeset/old-stingrays-visit.md b/.changeset/old-stingrays-visit.md
@@ -0,0 +1,6 @@
+---
+'@vue-macros/short-vmodel': minor
+'@vue-macros/volar': minor
+---
+
+add volar support of short-vmodel
diff --git a/README-zh-CN.md b/README-zh-CN.md
@@ -117,6 +117,26 @@ module.exports = {
 }
 ```
 
+### Volar 支持
+
+```bash
+npm i -D @vue-macros/volar
+```
+
+```jsonc
+// tsconfig.json
+{
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/define-model",
+      "@vue-macros/volar/short-vmodel"
+    ],
+    // `shortVmodel` 特性的 prefix
+    "shortVmodelPrefix": "$"
+  }
+}
+```
+
 ## 使用
 
 ### `defineOptions`
@@ -188,6 +208,8 @@ export default {
 
 ### `defineModel`
 
+✅ Volar 支持
+
 在 `<script setup>` 中可使用 `defineModel` 宏。
 可以像普通变量一样定义和使用 `v-model` 参数。
 
@@ -282,6 +304,8 @@ const emits = defineEmits<
 
 ### `shortVmodel`
 
+✅ Volar 支持
+
 `v-model:` -> `::` / `$`/ `*`
 
 缩写 `v-model`。
@@ -290,6 +314,10 @@ const emits = defineEmits<
 
 #### 安装
 
+```bash
+npm i @vue-macros/short-vmodel
+```
+
 ```ts
 // vite.config.ts
 import { defineConfig } from 'vite'
@@ -341,7 +369,6 @@ export default defineConfig({
 
 #### 已知问题
 
-- TypeScript / Volar 暂不支持；
 - Prettier 会把 `::=` 格式化为 `:=`。如果 `prefix` 为 `::`，需要使用 `prettier-ignore`。
 
 ### `hoistStatic`

diff --git a/README.md b/README.md
@@ -117,6 +117,26 @@ module.exports = {
 }
 ```
 
+### Volar Support
+
+```bash
+npm i -D @vue-macros/volar
+```
+
+```jsonc
+// tsconfig.json
+{
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/define-model",
+      "@vue-macros/volar/short-vmodel"
+    ],
+    // prefix for `shortVmodel` feature
+    "shortVmodelPrefix": "$"
+  }
+}
+```
+
 ## Usage
 
 ### `defineOptions`
@@ -190,6 +210,8 @@ export default {
 
 ### `defineModel`
 
+✅ Volar Support
+
 Introduce a macro in `<script setup>`, `defineModel`.
 To be able define and change `v-model` props as the same as normal variable.
 
@@ -284,6 +306,8 @@ const emits = defineEmits<
 
 ### `shortVmodel`
 
+✅ Volar Support
+
 `v-model:` -> `::` / `$`/ `*`
 
 A shorthand for `v-model`.
@@ -292,6 +316,10 @@ If you have any questions about this feature, you can comment on [RFC Discussion
 
 #### Setup
 
+```bash
+npm i @vue-macros/short-vmodel
+```
+
 ```ts
 // vite.config.ts
 import { defineConfig } from 'vite'
@@ -343,7 +371,6 @@ export default defineConfig({
 
 #### Known issues
 
-- TypeScript / Volar is not supported.
 - Prettier will format `::=` to `:=`, `prettier-ignore` is required if `prefix` is `::`.
 
 ### `hoistStatic`

diff --git a/packages/short-vmodel/src/index.ts b/packages/short-vmodel/src/index.ts
@@ -57,7 +57,7 @@ const processDirective = (node: NodeElement) => {
   }
 }
 
-const processAttribute = (
+export const processAttribute = (
   prefix: string,
   node: NodeElement,
   context: TransformContext
@@ -72,28 +72,51 @@ const processAttribute = (
     )
       continue
 
+    const expLoc = prop.value.loc
+    {
+      // remove "
+      expLoc.start.offset++
+      expLoc.start.column++
+      expLoc.end.offset--
+      expLoc.end.column--
+      expLoc.source = expLoc.source.slice(1, -1)
+    }
     const simpleExpression = createSimpleExpression(
       prop.value.content,
       false,
-      prop.loc,
+      expLoc,
       0 /* ConstantTypes.NOT_CONSTANT */
     )
     const exp = processExpression(simpleExpression, context)
 
     const argName = prop.name.slice(prefix.length)
+    const arg =
+      argName.length > 0
+        ? {
+            type: 4 /* NodeTypes.SIMPLE_EXPRESSION */,
+            content: argName,
+            constType: 3 /* ConstantTypes.CAN_STRINGIFY */,
+            isStatic: true,
+            loc: {
+              source: argName,
+              start: {
+                offset: prop.loc.start.offset + prefix.length,
+                column: prop.loc.start.line + prefix.length,
+                line: prop.loc.start.line,
+              },
+              end: {
+                offset: prop.loc.start.offset + prefix.length + argName.length,
+                column: prop.loc.start.line + prefix.length + argName.length,
+                line: prop.loc.start.line,
+              },
+            },
+          }
+        : undefined
+
     node.props[i] = {
       type: 7 /* NodeTypes.DIRECTIVE */,
       name: 'model',
-      arg:
-        argName.length > 0
-          ? {
-              type: 4 /* NodeTypes.SIMPLE_EXPRESSION */,
-              content: argName,
-              constType: 3 /* ConstantTypes.CAN_STRINGIFY */,
-              isStatic: true,
-              loc: node.loc,
-            }
-          : undefined,
+      arg,
       exp,
       modifiers: [],
       loc: prop.loc,

diff --git a/packages/short-vmodel/tests/__snapshots__/compiler.test.ts.snap b/packages/short-vmodel/tests/__snapshots__/compiler.test.ts.snap
@@ -9,15 +9,15 @@ exports[`compiler > asterisk sign > default name 1`] = `
     "isStatic": false,
     "loc": {
       "end": {
-        "column": 15,
+        "column": 14,
         "line": 1,
-        "offset": 14,
+        "offset": 13,
       },
-      "source": "*=\\"foo\\"",
+      "source": "foo",
       "start": {
-        "column": 8,
+        "column": 11,
         "line": 1,
-        "offset": 7,
+        "offset": 10,
       },
     },
     "type": 4,
@@ -49,15 +49,15 @@ exports[`compiler > asterisk sign > w/ name 1`] = `
     "isStatic": true,
     "loc": {
       "end": {
-        "column": 21,
+        "column": 5,
         "line": 1,
-        "offset": 20,
+        "offset": 11,
       },
-      "source": "<input *foo=\\"foo\\" />",
+      "source": "foo",
       "start": {
-        "column": 1,
+        "column": 2,
         "line": 1,
-        "offset": 0,
+        "offset": 8,
       },
     },
     "type": 4,
@@ -68,15 +68,15 @@ exports[`compiler > asterisk sign > w/ name 1`] = `
     "isStatic": false,
     "loc": {
       "end": {
-        "column": 18,
+        "column": 17,
         "line": 1,
-        "offset": 17,
+        "offset": 16,
       },
-      "source": "*foo=\\"foo\\"",
+      "source": "foo",
       "start": {
-        "column": 8,
+        "column": 14,
         "line": 1,
-        "offset": 7,
+        "offset": 13,
       },
     },
     "type": 4,
@@ -109,15 +109,15 @@ exports[`compiler > dollar sign > default name 1`] = `
     "isStatic": false,
     "loc": {
       "end": {
-        "column": 15,
+        "column": 14,
         "line": 1,
-        "offset": 14,
+        "offset": 13,
       },
-      "source": "$=\\"foo\\"",
+      "source": "foo",
       "start": {
-        "column": 8,
+        "column": 11,
         "line": 1,
-        "offset": 7,
+        "offset": 10,
       },
     },
     "type": 4,
@@ -149,15 +149,15 @@ exports[`compiler > dollar sign > w/ name 1`] = `
     "isStatic": true,
     "loc": {
       "end": {
-        "column": 21,
+        "column": 5,
         "line": 1,
-        "offset": 20,
+        "offset": 11,
       },
-      "source": "<input $foo=\\"foo\\" />",
+      "source": "foo",
       "start": {
-        "column": 1,
+        "column": 2,
         "line": 1,
-        "offset": 0,
+        "offset": 8,
       },
     },
     "type": 4,
@@ -168,15 +168,15 @@ exports[`compiler > dollar sign > w/ name 1`] = `
     "isStatic": false,
     "loc": {
       "end": {
-        "column": 18,
+        "column": 17,
         "line": 1,
-        "offset": 17,
+        "offset": 16,
       },
-      "source": "$foo=\\"foo\\"",
+      "source": "foo",
       "start": {
-        "column": 8,
+        "column": 14,
         "line": 1,
-        "offset": 7,
+        "offset": 13,
       },
     },
     "type": 4,

diff --git a/packages/volar/package.json b/packages/volar/package.json
@@ -32,19 +32,24 @@
   "exports": {
     "./define-model": {
       "require": "./define-model.js"
+    },
+    "./short-vmodel": {
+      "require": "./short-vmodel.js"
     }
   },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch"
   },
   "dependencies": {
-    "@volar/language-core": "^1.0.3"
+    "@volar/language-core": "^1.0.7",
+    "@vue-macros/short-vmodel": "workspace:^"
   },
   "devDependencies": {
-    "@volar/vue-language-core": "^1.0.3",
+    "@volar/vue-language-core": "^1.0.7",
+    "@vue/compiler-dom": "^3.2.40",
     "muggle-string": "^0.1.0",
     "typescript": "^4.8.4",
-    "vue-tsc": "^1.0.3"
+    "vue-tsc": "^1.0.7"
   }
 }
diff --git a/packages/volar/playground/index.vue b/packages/volar/playground/index.vue