feat: add vScope

.changeset/seven-jeans-fry.md

@@ -0,0 +1,6 @@
+---
+'@vue-macros/v-scope': minor
+'unplugin-vue-macros': patch
+---
+
+introduce v-scope experimentally

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>
+```

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',
  },
  },
  {

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:*"

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'

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)

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"
+ }
+}

packages/v-scope/src/api.ts

@@ -0,0 +1 @@
+export * from './core'

packages/v-scope/src/core/constant.ts

@@ -0,0 +1,2 @@
+export const SCOPE_DIRECTIVE = /\b_directive_scope\b/
+export const TS_LANG = '_defineComponent'