vue-macros · AliceLanniste · Apr 23, 2023 · May 18, 2023 · May 18, 2023 · May 18, 2023
diff --git a/.changeset/seven-jeans-fry.md b/.changeset/seven-jeans-fry.md
@@ -0,0 +1,6 @@
+---
+'@vue-macros/v-scope': minor
+'unplugin-vue-macros': patch
+---
+
+introduce v-scope experimentally
diff --git a/docs/features/v-scope.md b/docs/features/v-scope.md
@@ -0,0 +1,27 @@
+# vScope
+
+<StabilityLevel level="experimental" />
+
+With `v-scope` directive in template, variables can be stored in the template.
+
+- [Related issue](https://github.com/vuejs/rfcs/discussions/505)
+- [Related PR](https://github.com/vuejs/core/pull/7218)
+
+|      Features      |     Supported      |
+| :----------------: | :----------------: |
+|       Vue 3        | :white_check_mark: |
+| Volar / TypeScript |        :x:         |
+
+## Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const msg = ref('Hello')
+</script>
+
+<template>
+  <h1 v-scope="{ foo: `${msg} Vue` }">{{ foo }}</h1>
+</template>
+```
diff --git a/eslint.config.js b/eslint.config.js
@@ -11,6 +11,7 @@ export default sxzz([
       'vue/valid-attribute-name': 'off',
       'vue/no-export-in-script-setup': 'off',
       'vue/no-dupe-keys': 'off',
+      'vue/no-deprecated-scope-attribute': 'off',
     },
   },
   {

diff --git a/packages/macros/package.json b/packages/macros/package.json
@@ -99,6 +99,7 @@
     "@vue-macros/setup-component": "workspace:*",
     "@vue-macros/setup-sfc": "workspace:*",
     "@vue-macros/short-emits": "workspace:*",
+    "@vue-macros/v-scope": "workspace:*",
     "unplugin": "^1.4.0",
     "unplugin-combine": "^0.7.0",
     "unplugin-vue-define-options": "workspace:*"

diff --git a/packages/macros/src/index.ts b/packages/macros/src/index.ts
@@ -69,6 +69,7 @@ import VueSetupSFC, {
 import VueShortEmits, {
   type Options as OptionsShortEmits,
 } from '@vue-macros/short-emits'
+import VScope, { type Options as OptionsVScope } from '@vue-macros/v-scope'
 import { excludeDepOptimize } from './core'
 
 export interface FeatureOptionsMap {
@@ -92,6 +93,7 @@ export interface FeatureOptionsMap {
   setupComponent: OptionsSetupComponent
   setupSFC: OptionsSetupSFC
   shortEmits: OptionsShortEmits
+  vScope: OptionsVScope
 }
 export type FeatureName = keyof FeatureOptionsMap
 export type FeatureOptions = FeatureOptionsMap[FeatureName]
@@ -147,6 +149,7 @@ export function resolveOptions({
   setupComponent,
   setupSFC,
   shortEmits,
+  vScope,
 }: Options): OptionsResolved {
   function resolveSubOptions<K extends FeatureName>(
     options: OptionalSubOptions<FeatureOptionsMap[K]>,
@@ -232,6 +235,7 @@ export function resolveOptions({
       { version },
       version < 3.3
     ),
+    vScope: resolveSubOptions<'vScope'>(vScope, { version }, false),
   }
 }
 
@@ -312,6 +316,7 @@ export default createCombinePlugin<Options | undefined>(
       options.plugins.vue,
       options.plugins.vueJsx,
       resolvePlugin(VueDefineRender, framework, options.defineRender),
+      resolvePlugin(VScope, framework, options.vScope),
       setupComponentPlugins?.[1],
       namedTemplatePlugins?.[1],
       framework === 'vite'

diff --git a/packages/v-scope/README.md b/packages/v-scope/README.md
@@ -0,0 +1,3 @@
+# @vue-macros/v-scope [![npm](https://img.shields.io/npm/v/@vue-macros/v-scope.svg)](https://npmjs.com/package/@vue-macros/v-scope)
+
+Please refer to [README.md](https://github.com/vue-macros/vue-macros#readme)
diff --git a/packages/v-scope/package.json b/packages/v-scope/package.json
@@ -0,0 +1,89 @@
+{
+  "name": "@vue-macros/v-scope",
+  "version": "0.0.0",
+  "packageManager": "[email protected]",
+  "description": "v-scope feature from Vue Macros.",
+  "keywords": [
+    "vue-macros",
+    "macros",
+    "vue",
+    "sfc",
+    "setup",
+    "script-setup",
+    "v-scope",
+    "unplugin"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/vue-macros/vue-macros#readme",
+  "bugs": {
+    "url": "https://github.com/vue-macros/vue-macros/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vue-macros/vue-macros.git",
+    "directory": "packages/v-scope"
+  },
+  "author": "三咲智子 <[email protected]>",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "dev": "./src/index.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./api": {
+      "dev": "./src/api.ts",
+      "require": "./dist/api.js",
+      "import": "./dist/api.mjs"
+    },
+    "./esbuild": {
+      "dev": "./src/esbuild.ts",
+      "require": "./dist/esbuild.js",
+      "import": "./dist/esbuild.mjs"
+    },
+    "./rollup": {
+      "dev": "./src/rollup.ts",
+      "require": "./dist/rollup.js",
+      "import": "./dist/rollup.mjs"
+    },
+    "./vite": {
+      "dev": "./src/vite.ts",
+      "require": "./dist/vite.js",
+      "import": "./dist/vite.mjs"
+    },
+    "./webpack": {
+      "dev": "./src/webpack.ts",
+      "require": "./dist/webpack.js",
+      "import": "./dist/webpack.mjs"
+    },
+    "./*": [
+      "./*",
+      "./*.d.ts"
+    ]
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "DEV=true tsup"
+  },
+  "dependencies": {
+    "@vue-macros/common": "workspace:~",
+    "@vue/compiler-dom": "^3.3.2",
+    "unplugin": "^1.3.1"
+  },
+  "engines": {
+    "node": ">=16.14.0"
+  }
+}
diff --git a/packages/v-scope/src/api.ts b/packages/v-scope/src/api.ts
@@ -0,0 +1 @@
+export * from './core'
diff --git a/packages/v-scope/src/core/constant.ts b/packages/v-scope/src/core/constant.ts
@@ -0,0 +1,2 @@
+export const SCOPE_DIRECTIVE = /\b_directive_scope\b/
+export const TS_LANG = '_defineComponent'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# @vue-macros/v-scope [![npm](https://img.shields.io/npm/v/@vue-macros/v-scope.svg)](https://npmjs.com/package/@vue-macros/v-scope)

		Please refer to [README.md](https://github.com/vue-macros/vue-macros#readme)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const SCOPE_DIRECTIVE = /\b_directive_scope\b/
		export const TS_LANG = '_defineComponent'