feat(reactivity-transform-vue2): init

closes #92

.changeset/tall-spiders-unite.md

@@ -0,0 +1,6 @@
+---
+'unplugin-vue-macros': minor
+'@vue-macros/reactivity-transform-vue2': patch
+---
+
+support reactivity transform in Vue 2

.gitignore

@@ -4,6 +4,7 @@ coverage
 .turbo
 .idea
 dev-dist
+docs/.vitepress/cache
 
 .DS_Store
 .pnpm-debug.log*

docs/.vitepress/configs/navs.ts

@@ -88,6 +88,10 @@ export const sidebar: DefaultTheme.Sidebar = [
         text: 'betterDefine',
         link: '/features/better-define',
       },
+      {
+        text: 'reactivityTransformVue2',
+        link: '/features/reactivity-transform-vue2',
+      },
     ],
   },
 ]

docs/features/reactivity-transform-vue2.md

@@ -0,0 +1,5 @@
+# Reactivity Transform on Vue 2
+
+<small>Stability: <code class="!text-yellow-600">unstable</code></small>
+
+See also [official docs](https://vuejs.org/guide/extras/reactivity-transform.html)

docs/macros/define-model.md

@@ -58,14 +58,6 @@ const { modelValue } = defineModel({
 
 ::: warning
 
-[Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) is required. You should enable it first. Otherwise, it will lose the reactivity connection.
-
-Unfortunately Reactivity Transform is not implemented in Vue 2, so this macro doesn't support Vue 2 now.
-
-:::
-
-::: warning
-
 Assignment expression is only supported in `<script setup>` block. In other words invalid in `<template>`.
 
 :::

packages/macros/package.json

@@ -81,6 +81,7 @@
     "@vue-macros/define-slots": "workspace:*",
     "@vue-macros/hoist-static": "workspace:*",
     "@vue-macros/named-template": "workspace:*",
+    "@vue-macros/reactivity-transform-vue2": "workspace:*",
     "@vue-macros/setup-block": "workspace:*",
     "@vue-macros/setup-component": "workspace:*",
     "@vue-macros/setup-sfc": "workspace:*",

packages/macros/src/index.ts

@@ -7,6 +7,7 @@ import VueDefineRender from '@vue-macros/define-render'
 import VueDefineSlots from '@vue-macros/define-slots'
 import VueHoistStatic from '@vue-macros/hoist-static'
 import VueNamedTemplate from '@vue-macros/named-template'
+import VueReactivityTransformVue2 from '@vue-macros/reactivity-transform-vue2'
 import VueSetupBlock from '@vue-macros/setup-block'
 import VueSetupComponent from '@vue-macros/setup-component'
 import VueSetupSFC from '@vue-macros/setup-sfc'
@@ -23,6 +24,7 @@ import type { Options as OptionsDefineRender } from '@vue-macros/define-render'
 import type { Options as OptionsDefineSlots } from '@vue-macros/define-slots'
 import type { Options as OptionsHoistStatic } from '@vue-macros/hoist-static'
 import type { Options as OptionsNamedTemplate } from '@vue-macros/named-template'
+import type { Options as OptionsReactivityTransformVue2 } from '@vue-macros/reactivity-transform-vue2'
 import type { Options as OptionsSetupBlock } from '@vue-macros/setup-block'
 import type { Options as OptionsSetupComponent } from '@vue-macros/setup-component'
 import type { Options as OptionsSetupSFC } from '@vue-macros/setup-sfc'
@@ -37,6 +39,7 @@ export interface FeatureOptionsMap {
   defineSlots: OptionsDefineSlots
   hoistStatic: OptionsHoistStatic
   namedTemplate: OptionsNamedTemplate
+  reactivityTransformVue2: OptionsReactivityTransformVue2
   setupBlock: OptionsSetupBlock
   setupComponent: OptionsSetupComponent
   setupSFC: OptionsSetupSFC
@@ -78,6 +81,7 @@ function resolveOptions({
   defineSlots,
   hoistStatic,
   namedTemplate,
+  reactivityTransformVue2,
   setupBlock,
   setupComponent,
   setupSFC,
@@ -90,9 +94,9 @@ function resolveOptions({
     > = {},
     defaultEnabled = true
   ): FeatureOptionsMap[K] | false {
-    if (defaultEnabled ? options === false : !options) return false
-    else if (options === true || options === undefined)
-      return { ...commonOptions }
+    options = options ?? defaultEnabled
+    if (!options) return false
+    else if (options === true) return { ...commonOptions }
     else return { ...options, ...commonOptions }
   }
 
@@ -115,6 +119,11 @@ function resolveOptions({
     defineSlots: resolveSubOptions<'defineSlots'>(defineSlots, { version }),
     hoistStatic: resolveSubOptions<'hoistStatic'>(hoistStatic),
     namedTemplate: resolveSubOptions<'namedTemplate'>(namedTemplate),
+    reactivityTransformVue2: resolveSubOptions<'reactivityTransformVue2'>(
+      reactivityTransformVue2,
+      undefined,
+      version === 2
+    ),
     setupBlock: resolveSubOptions<'setupBlock'>(setupBlock, undefined, false),
     setupComponent: resolveSubOptions<'setupComponent'>(setupComponent, {
       root,
@@ -172,6 +181,11 @@ export default createCombinePlugin((userOptions: Options = {}, meta) => {
     resolvePlugin(VueShortEmits, framework, options.shortEmits),
     resolvePlugin(VueDefineModel, framework, options.defineModel),
     resolvePlugin(VueDefineSlots, framework, options.defineSlots),
+    resolvePlugin(
+      VueReactivityTransformVue2,
+      framework,
+      options.reactivityTransformVue2
+    ),
     resolvePlugin(VueBetterDefine, framework, options.betterDefine),
     resolvePlugin(VueDefineOptions, framework, options.defineOptions),
     options.plugins.vue,

packages/macros/tests/__snapshots__/fixtures.test.ts.snap

@@ -169,12 +169,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: [\\"input\\", \\"changeInput\\", \\"change\\"],
   setup(__props, { emit }) {
-    const { title } = __props;
     let { modelValue, value } = _DM_useVModel([\\"modelValue\\", \\"value\\", \\"input\\"], [\\"value\\", \\"value\\", \\"changeInput\\"]);
     const handleClick = () => {
       emit(\\"change\\");
-      modelValue.value = \\"hello, \\" + title;
-      value.value = \\"Word,\\" + title;
+      modelValue.value = \\"hello, \\" + __props.title;
+      value.value = \\"Word,\\" + __props.title;
     };
     return () => {
     };

packages/reactivity-transform-vue2/README.md

@@ -0,0 +1,3 @@
+# @vue-macros/reactivity-transform-vue2 [![npm](https://img.shields.io/npm/v/@vue-macros/reactivity-transform-vue2.svg)](https://npmjs.com/package/@vue-macros/reactivity-transform-vue2)
+
+Please refer to [README.md](https://github.com/sxzz/unplugin-vue-macros#readme)

packages/reactivity-transform-vue2/macros-global.d.ts

@@ -0,0 +1,19 @@
+import type {
+  $ as _$,
+  $$ as _$$,
+  $computed as _$computed,
+  $customRef as _$customRef,
+  $ref as _$ref,
+  $shallowRef as _$shallowRef,
+  $toRef as _$toRef,
+} from './macros'
+
+declare global {
+  const $: typeof _$
+  const $$: typeof _$$
+  const $ref: typeof _$ref
+  const $shallowRef: typeof _$shallowRef
+  const $computed: typeof _$computed
+  const $customRef: typeof _$customRef
+  const $toRef: typeof _$toRef
+}

packages/reactivity-transform-vue2/macros.d.ts

@@ -0,0 +1,112 @@
+import type {
+  ComputedRef,
+  CustomRefFactory,
+  DebuggerOptions,
+  Ref,
+  UnwrapRef,
+  WritableComputedOptions,
+  WritableComputedRef,
+} from 'vue'
+
+export declare const RefType: unique symbol
+
+export declare const enum RefTypes {
+  Ref = 1,
+  ComputedRef = 2,
+  WritableComputedRef = 3,
+}
+
+type RefValue<T> = T extends null | undefined ? T : ReactiveVariable<T>
+
+type ReactiveVariable<T> = T & { [RefType]?: RefTypes.Ref }
+
+type ComputedRefValue<T> = T extends null | undefined ? T : ComputedVariable<T>
+
+type ComputedVariable<T> = T & { [RefType]?: RefTypes.ComputedRef }
+
+type WritableComputedRefValue<T> = T extends null | undefined
+  ? T
+  : WritableComputedVariable<T>
+
+type WritableComputedVariable<T> = T & {
+  [RefType]?: RefTypes.WritableComputedRef
+}
+
+type NormalObject<T extends object> = T & { [RefType]?: never }
+
+/**
+ * Vue ref transform macro for binding refs as reactive variables.
+ */
+export declare function $<T>(arg: ComputedRef<T>): ComputedRefValue<T>
+export declare function $<T>(
+  arg: WritableComputedRef<T>
+): WritableComputedRefValue<T>
+export declare function $<T>(arg: Ref<T>): RefValue<T>
+export declare function $<T extends object>(arg?: T): DestructureRefs<T>
+
+type DestructureRefs<T extends object> = {
+  [K in keyof T]: T[K] extends ComputedRef<infer V>
+    ? ComputedRefValue<V>
+    : T[K] extends WritableComputedRef<infer V>
+    ? WritableComputedRefValue<V>
+    : T[K] extends Ref<infer V>
+    ? RefValue<V>
+    : T[K]
+}
+
+/**
+ * Vue ref transform macro for accessing underlying refs of reactive variables.
+ */
+export declare function $$<T extends object>(arg: NormalObject<T>): ToRawRefs<T>
+export declare function $$<T>(value: RefValue<T>): Ref<T>
+export declare function $$<T>(value: ComputedRefValue<T>): ComputedRef<T>
+export declare function $$<T>(
+  value: WritableComputedRefValue<T>
+): WritableComputedRef<T>
+
+type ToRawRefs<T extends object> = {
+  [K in keyof T]: T[K] extends RefValue<infer V>
+    ? Ref<V>
+    : T[K] extends ComputedRefValue<infer V>
+    ? ComputedRef<V>
+    : T[K] extends WritableComputedRefValue<infer V>
+    ? WritableComputedRef<V>
+    : T[K] extends object
+    ? T[K] extends
+        | Function
+        | Map<any, any>
+        | Set<any>
+        | WeakMap<any, any>
+        | WeakSet<any>
+      ? T[K]
+      : ToRawRefs<T[K]>
+    : T[K]
+}
+
+export declare function $ref<T>(): RefValue<T | undefined>
+export declare function $ref<T>(arg: T | Ref<T>): RefValue<UnwrapRef<T>>
+
+export declare function $shallowRef<T>(): RefValue<T | undefined>
+export declare function $shallowRef<T>(arg: T): RefValue<T>
+
+export declare function $toRef<T extends object, K extends keyof T>(
+  object: T,
+  key: K
+): RefValue<T[K]>
+
+export declare function $toRef<T extends object, K extends keyof T>(
+  object: T,
+  key: K,
+  defaultValue: T[K]
+): RefValue<Exclude<T[K], undefined>>
+
+export declare function $customRef<T>(factory: CustomRefFactory<T>): RefValue<T>
+
+export declare function $computed<T>(
+  getter: () => T,
+  debuggerOptions?: DebuggerOptions
+): ComputedRefValue<T>
+export declare function $computed<T>(
+  options: WritableComputedOptions<T>,
+  debuggerOptions?: DebuggerOptions
+): WritableComputedRefValue<T>

packages/reactivity-transform-vue2/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@vue-macros/reactivity-transform-vue2",
+  "version": "0.0.0",
+  "packageManager": "pnpm@7.20.0",
+  "description": "",
+  "keywords": [
+    "unplugin",
+    "vue",
+    "sfc",
+    "setup",
+    "macros",
+    "script-setup",
+    "reactivity-transform-vue2"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/sxzz/unplugin-vue-macros#readme",
+  "bugs": {
+    "url": "https://github.com/sxzz/unplugin-vue-macros/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sxzz/unplugin-vue-macros.git"
+  },
+  "author": "三咲智子 <sxzz@sxzz.moe>",
+  "files": [
+    "dist",
+    "macros.d.ts",
+    "macros-global.d.ts"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./vite": {
+      "require": "./dist/vite.js",
+      "import": "./dist/vite.mjs"
+    },
+    "./webpack": {
+      "require": "./dist/webpack.js",
+      "import": "./dist/webpack.mjs"
+    },
+    "./rollup": {
+      "require": "./dist/rollup.js",
+      "import": "./dist/rollup.mjs"
+    },
+    "./esbuild": {
+      "require": "./dist/esbuild.js",
+      "import": "./dist/esbuild.mjs"
+    },
+    "./macros": "./macros.d.ts",
+    "./macros-global": "./macros-global.d.ts",
+    "./*": "./*"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsup && tsx ../../scripts/postbuild.mts",
+    "dev": "DEV=1 tsup"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.0"
+  },
+  "dependencies": {
+    "@rollup/pluginutils": "^5.0.2",
+    "@vue-macros/common": "workspace:~",
+    "@vue/reactivity-transform": "^3.2.45",
+    "unplugin": "^1.0.1"
+  },
+  "devDependencies": {
+    "vue": "^2.7.14"
+  },
+  "engines": {
+    "node": ">=14.19.0"
+  }
+}

packages/reactivity-transform-vue2/src/core/helper.ts

@@ -0,0 +1,13 @@
+export const helperId = '/vue2-reactivity-transform-helper'
+export const helperCode = `export function createPropsRestProxy(props, excludedKeys) {
+  const ret = {}
+  for (const key in props) {
+    if (!excludedKeys.includes(key)) {
+      Object.defineProperty(ret, key, {
+        enumerable: true,
+        get: () => props[key],
+      })
+    }
+  }
+  return ret
+}`