feat: support reactivity transform (#3737)

Co-authored-by: pooya parsa <pyapar@gmail.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>

examples/with-reactivity-transform/app.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Label from './label.vue'
+
+let count = $ref(0)
+
+function inc () {
+  count++
+}
+function dec () {
+  count--
+}
+</script>
+
+<template>
+  <NuxtExampleLayout :show-tips="true" example="with-reactivity-transform">
+    <div>
+      <Label :count="count" />
+      <div class="flex gap-1 justify-center">
+        <NButton @click="inc()">
+          Inc
+        </NButton>
+        <NButton @click="dec()">
+          Dec
+        </NButton>
+      </div>
+    </div>
+
+    <template #tips>
+      <div class="flex-auto">
+        Read the documentation about
+        <NLink href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank">
+          Reactivity Transform.
+        </NLink>
+      </div>
+    </template>
+  </NuxtExampleLayout>
+</template>

examples/with-reactivity-transform/label.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { count } = defineProps<{
+  count: number,
+}>()
+const doubled = $computed(() => count * 2)
+</script>
+
+<template>
+  <div class="pb2">
+    Count <b>{{ count }}</b><br>
+    Doubled <b>{{ doubled }}</b>
+  </div>
+</template>

examples/with-reactivity-transform/nuxt.config.ts

@@ -0,0 +1,11 @@
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ],
+  experimental: {
+    reactivityTransform: true
+  }
+  // builder: 'webpack'
+})

examples/with-reactivity-transform/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "example-with-reactivity-transform",
+  "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
+  }
+}

examples/with-reactivity-transform/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

package.json

@@ -19,7 +19,7 @@
     "play": "yarn run nuxi dev playground",
     "release": "yarn && yarn lint && FORCE_COLOR=1 lerna publish -m \"chore: release\" && yarn stub",
     "stub": "lerna run prepack -- --stub",
-    "test:fixtures": "JITI_ESM_RESOLVE=1 vitest --dir test",
+    "test:fixtures": "yarn nuxi prepare test/fixtures/basic && JITI_ESM_RESOLVE=1 vitest --dir test",
     "test:fixtures:webpack": "TEST_WITH_WEBPACK=1 yarn test:fixtures",
     "test:types": "yarn run nuxi prepare test/fixtures/basic && cd test/fixtures/basic && npx vue-tsc --noEmit",
     "test:unit": "JITI_ESM_RESOLVE=1 yarn vitest --dir packages",

packages/nuxi/src/utils/prepare.ts

@@ -68,6 +68,10 @@ export const writeTypes = async (nuxt: Nuxt) => {
     .filter(f => typeof f === 'string')
     .map(id => ({ types: getNearestPackage(id, modulePaths)?.name || id }))
 
+  if (nuxt.options.experimental.reactivityTransform) {
+    references.push({ types: 'vue/macros-global' })
+  }
+
   const declarations: string[] = []
 
   await nuxt.callHook('prepare:types', { references, declarations, tsConfig })

packages/schema/src/config/experimental.ts

@@ -9,5 +9,12 @@ export default {
    * Use vite-node for on-demand server chunk loading
    * @version 3
    */
-  viteNode: process.env.EXPERIMENTAL_VITE_NODE ? true : false
+  viteNode: process.env.EXPERIMENTAL_VITE_NODE ? true : false,
+
+  /**
+   * Enable Vue's reactivity transform
+   * @see https://vuejs.org/guide/extras/reactivity-transform.html
+   * @version 3
+   */
+  reactivityTransform: false
 }

packages/vite/src/vite.ts

@@ -65,6 +65,9 @@ export async function bundle (nuxt: Nuxt) {
         plugins: [
           virtual(nuxt.vfs)
         ],
+        vue: {
+          reactivityTransform: nuxt.options.experimental.reactivityTransform
+        },
         server: {
           watch: {
             ignored: isIgnored

packages/webpack/src/presets/vue.ts

@@ -14,7 +14,10 @@ export function vue (ctx: WebpackConfigContext) {
   config.module.rules.push({
     test: /\.vue$/i,
     loader: 'vue-loader',
-    options: options.webpack.loaders.vue
+    options: {
+      reactivityTransform: ctx.nuxt.options.experimental.reactivityTransform,
+      ...options.webpack.loaders.vue
+    }
   })
 
   if (ctx.isClient) {

test/basic.test.ts

@@ -148,4 +148,12 @@ describe('fixtures:basic', async () => {
       expect(html).toContain('Custom Layout:')
     })
   })
+
+  describe('reactivity transform', () => {
+    it('should works', async () => {
+      const html = await $fetch('/')
+
+      expect(html).toContain('Sugar Counter 12 x 2 = 24')
+    })
+  })
 })

test/fixtures/basic/components/SugarCounter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { count } = defineProps<{
+  count: number,
+}>()
+// eslint-disable-next-line prefer-const
+let multiplier = $ref(2)
+const doubled = $computed(() => count * multiplier)
+</script>
+
+<template>
+  <div>
+    Sugar Counter {{ count }} x {{ multiplier }} = {{ doubled }}
+  </div>
+</template>

test/fixtures/basic/nuxt.config.ts

@@ -22,5 +22,8 @@ export default defineNuxtConfig({
         filePath: '~/other-components-folder/named-export'
       })
     }
+  },
+  experimental: {
+    reactivityTransform: true
   }
 })

test/fixtures/basic/pages/index.vue

@@ -8,6 +8,7 @@
     <div>Composable | foo: {{ foo }}</div>
     <div>Composable | bar: {{ bar }}</div>
     <div>Plugin | myPlugin: {{ $myPlugin() }}</div>
+    <SugarCounter :count="12" />
     <CustomComponent />
   </div>
 </template>

vitest.config.ts

@@ -5,5 +5,8 @@ export default defineConfig({
   alias: {
     '#app': resolve('./packages/nuxt3/src/app/index.ts'),
     '@nuxt/test-utils': resolve('./packages/test-utils/src/index.ts')
+  },
+  esbuild: {
+    tsconfigRaw: '{}'
   }
 })

yarn.lock

@@ -10580,6 +10580,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"example-with-reactivity-transform@workspace:examples/with-reactivity-transform":
+  version: 0.0.0-use.local
+  resolution: "example-with-reactivity-transform@workspace:examples/with-reactivity-transform"
+  dependencies:
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
+    nuxt3: latest
+  languageName: unknown
+  linkType: soft
+
 "example-with-test@workspace:examples/with-test":
   version: 0.0.0-use.local
   resolution: "example-with-test@workspace:examples/with-test"