feat(compiler-sfc): introduce defineRender

vuejs · Oct 17, 2023 · 9a8053c · 9a8053c
1 parent 9177199
commit 9a8053c
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 5 deletions.
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineRender.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineRender.spec.ts.snap
@@ -0,0 +1,47 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`defineRender() > JSX Element 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+      
+return () => <div />
+}
+
+})"
+`;
+
+exports[`defineRender() > function 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+      
+return () => <div />
+}
+
+})"
+`;
+
+exports[`defineRender() > identifier 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { renderFn } from './ctx'
+      
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+      
+return renderFn
+}
+
+})"
+`;
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineRender.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineRender.spec.ts
@@ -0,0 +1,46 @@
+import { compileSFCScript as compile, assertCode } from '../utils'
+
+describe('defineRender()', () => {
+  test('JSX Element', () => {
+    const { content } = compile(
+      `
+      <script setup lang="tsx">
+      defineRender(<div />)
+      </script>
+    `,
+      { defineRender: true }
+    )
+    assertCode(content)
+    expect(content).toMatch(`return () => <div />`)
+    expect(content).not.toMatch('defineRender')
+  })
+
+  test('function', () => {
+    const { content } = compile(
+      `
+      <script setup lang="tsx">
+      defineRender(() => <div />)
+      </script>
+    `,
+      { defineRender: true }
+    )
+    assertCode(content)
+    expect(content).toMatch(`return () => <div />`)
+    expect(content).not.toMatch('defineRender')
+  })
+
+  test('identifier', () => {
+    const { content } = compile(
+      `
+      <script setup lang="ts">
+      import { renderFn } from './ctx'
+      defineRender(renderFn)
+      </script>
+    `,
+      { defineRender: true }
+    )
+    assertCode(content)
+    expect(content).toMatch(`return renderFn`)
+    expect(content).not.toMatch('defineRender')
+  })
+})
diff --git a/packages/compiler-sfc/__tests__/utils.ts b/packages/compiler-sfc/__tests__/utils.ts
@@ -25,7 +25,7 @@ export function assertCode(code: string) {
   try {
     babelParse(code, {
       sourceType: 'module',
-      plugins: ['typescript']
+      plugins: ['typescript', 'jsx']
     })
   } catch (e: any) {
     console.log(code)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
@@ -53,6 +53,7 @@ import {
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
 import { isImportUsed } from './script/importUsageCheck'
 import { processAwait } from './script/topLevelAwait'
+import { DEFINE_RENDER, processDefineRender } from './script/defineRender'
 
 export interface SFCScriptCompileOptions {
   /**
@@ -108,6 +109,11 @@ export interface SFCScriptCompileOptions {
    * @default false
    */
   defineModel?: boolean
+  /**
+   * (**Experimental**) Enable macro `defineRender`
+   * @default false
+   */
+  defineRender?: boolean
   /**
    * (**Experimental**) Enable reactive destructure for `defineProps`
    * @default false
@@ -512,7 +518,8 @@ export function compileScript(
         processDefineProps(ctx, expr) ||
         processDefineEmits(ctx, expr) ||
         processDefineOptions(ctx, expr) ||
-        processDefineSlots(ctx, expr)
+        processDefineSlots(ctx, expr) ||
+        processDefineRender(ctx, expr)
       ) {
         ctx.s.remove(node.start! + startOffset, node.end! + startOffset)
       } else if (processDefineExpose(ctx, expr)) {
@@ -550,7 +557,8 @@ export function compileScript(
             !isDefineProps && processDefineEmits(ctx, init, decl.id)
           !isDefineEmits &&
             (processDefineSlots(ctx, init, decl.id) ||
-              processDefineModel(ctx, init, decl.id))
+              processDefineModel(ctx, init, decl.id) ||
+              processDefineRender(ctx, init))
 
           if (
             isDefineProps &&
@@ -832,8 +840,19 @@ export function compileScript(
   }
 
   // 10. generate return statement
-  let returned
-  if (
+  let returned = ''
+  if (ctx.renderFunction) {
+    if (sfc.template) {
+      warnOnce(`<template> is ignored when using ${DEFINE_RENDER}().`)
+    }
+    if (ctx.renderFunction.type === 'JSXElement') {
+      returned = '() => '
+    }
+    returned += scriptSetup.content.slice(
+      ctx.renderFunction.start!,
+      ctx.renderFunction.end!
+    )
+  } else if (
     !options.inlineTemplate ||
     (!sfc.template && ctx.hasDefaultExportRender)
   ) {

diff --git a/packages/compiler-sfc/src/script/context.ts b/packages/compiler-sfc/src/script/context.ts
@@ -35,6 +35,7 @@ export class ScriptCompileContext {
   hasDefaultExportRender = false
   hasDefineOptionsCall = false
   hasDefineSlotsCall = false
+  hasDefineRenderCall = false
   hasDefineModelCall = false
 
   // defineProps
@@ -58,6 +59,9 @@ export class ScriptCompileContext {
   // defineOptions
   optionsRuntimeDecl: Node | undefined
 
+  // defineRender
+  renderFunction?: Node
+
   // codegen
   bindingMetadata: BindingMetadata = {}
   helperImports: Set<string> = new Set()

diff --git a/packages/compiler-sfc/src/script/defineRender.ts b/packages/compiler-sfc/src/script/defineRender.ts
@@ -0,0 +1,34 @@
+import { Node } from '@babel/types'
+import { isCallOf } from './utils'
+import { ScriptCompileContext } from './context'
+import { warnOnce } from '../warn'
+
+export const DEFINE_RENDER = 'defineRender'
+
+export function processDefineRender(
+  ctx: ScriptCompileContext,
+  node: Node
+): boolean {
+  if (!isCallOf(node, DEFINE_RENDER)) {
+    return false
+  }
+
+  if (!ctx.options.defineRender) {
+    warnOnce(
+      `${DEFINE_RENDER}() is an experimental feature and disabled by default.\n` +
+        `To enable it, follow the RFC at https://github.com/vuejs/rfcs/discussions/TODO.`
+    )
+    return false
+  }
+
+  if (ctx.hasDefineRenderCall) {
+    ctx.error(`duplicate ${DEFINE_RENDER}() call`, node)
+  }
+
+  ctx.hasDefineRenderCall = true
+  if (node.arguments.length > 0) {
+    ctx.renderFunction = node.arguments[0]
+  }
+
+  return true
+}