feat(vue-jsx-vapor): introduce useProps and useFullProps

Author: zhiyuanzmj

packages/macros/src/core/babel-utils.ts

@@ -1,12 +1,15 @@
-import { walkAST } from '@vue-macros/common'
+import { walkAST, type MagicStringAST } from '@vue-macros/common'
 // should only use types from @babel/types
 // do not import runtime methods
 import type {
+  ArrowFunctionExpression,
   BlockStatement,
   ForInStatement,
   ForOfStatement,
   ForStatement,
   Function,
+  FunctionDeclaration,
+  FunctionExpression,
   Identifier,
   JSXIdentifier,
   Node,
@@ -534,3 +537,55 @@ export function isStaticNode(node: Node): boolean {
   }
   return false
 }
+
+export type FunctionalNode =
+  | FunctionDeclaration
+  | FunctionExpression
+  | ArrowFunctionExpression
+
+export function prependFunctionalNode(
+  node: FunctionalNode,
+  s: MagicStringAST,
+  result: string,
+): void {
+  const isBlockStatement = node.body.type === 'BlockStatement'
+  const start = node.body.extra?.parenthesized
+    ? (node.body.extra.parenStart as number)
+    : node.body.start!
+  s.appendRight(
+    start + (isBlockStatement ? 1 : 0),
+    `${result};${!isBlockStatement ? 'return ' : ''}`,
+  )
+  if (!isBlockStatement) {
+    s.appendLeft(start, '{')
+    s.appendRight(node.end!, '}')
+  }
+}
+
+export function isFunctionalNode(node?: Node | null): node is FunctionalNode {
+  return !!(
+    node &&
+    (node.type === 'ArrowFunctionExpression' ||
+      node.type === 'FunctionDeclaration' ||
+      node.type === 'FunctionExpression')
+  )
+}
+
+export function getParamsStart(node: FunctionalNode, code: string): number {
+  return node.params[0]
+    ? node.params[0].start!
+    : node.start! +
+        (code.slice(node.start!, node.body.start!).match(/\(\s*\)/)?.index ||
+          0) +
+        1
+}
+
+export function getDefaultValue(node: Node): Node {
+  if (node.type === 'TSNonNullExpression') {
+    return getDefaultValue(node.expression)
+  }
+  if (node.type === 'TSAsExpression') {
+    return getDefaultValue(node.expression)
+  }
+  return node
+}

packages/macros/src/core/define-component/await.ts

@@ -6,7 +6,7 @@ import {
   walkAST,
   type MagicStringAST,
 } from '@vue-macros/common'
-import type { FunctionalNode } from '..'
+import type { FunctionalNode } from '../babel-utils'
 import type { AwaitExpression, Node, Statement } from '@babel/types'
 
 export function transformAwait(root: FunctionalNode, s: MagicStringAST): void {

packages/macros/src/core/define-component/index.ts

@@ -1,7 +1,17 @@
-import { importHelperFn, type MagicStringAST } from '@vue-macros/common'
-import { isFunctionalNode, type FunctionalNode, type Macros } from '..'
-import { walkIdentifiers } from '../babel-utils'
-import { getDefaultValue, restructure } from '../restructure'
+import {
+  HELPER_PREFIX,
+  importHelperFn,
+  type MagicStringAST,
+} from '@vue-macros/common'
+import {
+  getDefaultValue,
+  isFunctionalNode,
+  prependFunctionalNode,
+  walkIdentifiers,
+  type FunctionalNode,
+} from '../babel-utils'
+import { restructure } from '../restructure'
+import type { Macros } from '..'
 import { transformAwait } from './await'
 import { transformReturn } from './return'
 import type { Node, ObjectExpression } from '@babel/types'
@@ -28,6 +38,22 @@ export function transformDefineComponent(
   if (root.params[0]) {
     if (root.params[0].type === 'Identifier') {
       getWalkedIds(root, propsName).forEach((id) => (props[id] = null))
+      prependFunctionalNode(
+        root,
+        s,
+        `const ${propsName} = ${importHelperFn(
+          s,
+          0,
+          'useFullProps',
+          undefined,
+          'vue-jsx-vapor',
+        )}()`,
+      )
+      s.overwrite(
+        root.params[0].start!,
+        root.params[0].end!,
+        `${HELPER_PREFIX}props`,
+      )
     } else if (root.params[0].type === 'ObjectPattern') {
       const restructuredProps = root.params[0]
       for (const prop of restructuredProps.properties) {

packages/macros/src/core/define-component/return.ts

@@ -1,4 +1,4 @@
-import { isFunctionalNode, type FunctionalNode } from '..'
+import { isFunctionalNode, type FunctionalNode } from '../babel-utils'
 import type { MagicStringAST } from '@vue-macros/common'
 
 export function transformReturn(root: FunctionalNode, s: MagicStringAST): void {

packages/macros/src/core/define-expose.ts

@@ -4,13 +4,10 @@ import type { CallExpression } from '@babel/types'
 export function transformDefineExpose(
   node: CallExpression,
   s: MagicStringAST,
-  version: number,
 ): void {
   s.overwriteNode(node.callee, ';')
   s.appendRight(
     node.arguments[0]?.start || node.end! - 1,
-    version >= 3.6
-      ? `${importHelperFn(s, 0, 'currentInstance')}.exposed = `
-      : `${importHelperFn(s, 0, 'getCurrentInstance')}().exposed = `,
+    `${importHelperFn(s, 0, 'getCurrentInstance', undefined, 'vue-jsx-vapor')}().exposed = `,
   )
 }

packages/macros/src/core/define-style.ts

@@ -1,12 +1,8 @@
 import { walkAST, type MagicStringAST } from '@vue-macros/common'
 import hash from 'hash-sum'
 import { helperPrefix } from './helper'
-import {
-  isFunctionalNode,
-  type DefineStyle,
-  type FunctionalNode,
-  type Macros,
-} from '.'
+import type { FunctionalNode } from './babel-utils'
+import { isFunctionalNode, type DefineStyle, type Macros } from '.'
 import type { Node } from '@babel/types'
 
 export function transformDefineStyle(

packages/macros/src/core/index.ts

@@ -8,27 +8,21 @@ import {
   type CodeTransform,
 } from '@vue-macros/common'
 import type { OptionsResolved } from '../options'
+import {
+  getParamsStart,
+  isFunctionalNode,
+  type FunctionalNode,
+} from './babel-utils'
 import { transformDefineComponent } from './define-component'
 import { transformDefineExpose } from './define-expose'
 import { transformDefineModel } from './define-model'
 import { transformDefineSlots } from './define-slots'
 import { transformDefineStyle } from './define-style'
-import type {
-  ArrowFunctionExpression,
-  CallExpression,
-  FunctionDeclaration,
-  FunctionExpression,
-  LVal,
-  Node,
-  Program,
-} from '@babel/types'
+import type { CallExpression, LVal, Node, Program } from '@babel/types'
 
-export { restructure } from './restructure'
+export { isFunctionalNode }
 
-export type FunctionalNode =
-  | FunctionDeclaration
-  | FunctionExpression
-  | ArrowFunctionExpression
+export { restructure } from './restructure'
 
 export type DefineStyle = {
   expression: CallExpression
@@ -123,7 +117,7 @@ export function transformJsxMacros(
       transformDefineSlots(macros.defineSlots.expression, s)
     }
     if (macros.defineExpose) {
-      transformDefineExpose(macros.defineExpose, s, options.version)
+      transformDefineExpose(macros.defineExpose, s)
     }
   }
 
@@ -204,15 +198,6 @@ function getRootMap(ast: Program, s: MagicStringAST, options: OptionsResolved) {
   return rootMap
 }
 
-export function isFunctionalNode(node?: Node | null): node is FunctionalNode {
-  return !!(
-    node &&
-    (node.type === 'ArrowFunctionExpression' ||
-      node.type === 'FunctionDeclaration' ||
-      node.type === 'FunctionExpression')
-  )
-}
-
 export function getMacroExpression(
   node: Node,
   options: OptionsResolved,
@@ -242,12 +227,3 @@ export function getMacroExpression(
     }
   }
 }
-
-export function getParamsStart(node: FunctionalNode, code: string): number {
-  return node.params[0]
-    ? node.params[0].start!
-    : node.start! +
-        (code.slice(node.start!, node.body.start!).match(/\(\s*\)/)?.index ||
-          0) +
-        1
-}

packages/macros/src/core/restructure.ts

@@ -3,9 +3,13 @@ import {
   importHelperFn,
   type MagicStringAST,
 } from '@vue-macros/common'
-import { walkIdentifiers } from './babel-utils'
+import {
+  getDefaultValue,
+  prependFunctionalNode,
+  walkIdentifiers,
+  type FunctionalNode,
+} from './babel-utils'
 import { withDefaultsHelperId } from './helper'
-import type { FunctionalNode } from '.'
 import type { Node } from '@babel/types'
 
 type Options = {
@@ -204,32 +208,3 @@ function getProps(
   })
   return props.length ? props : undefined
 }
-
-export function getDefaultValue(node: Node): Node {
-  if (node.type === 'TSNonNullExpression') {
-    return getDefaultValue(node.expression)
-  }
-  if (node.type === 'TSAsExpression') {
-    return getDefaultValue(node.expression)
-  }
-  return node
-}
-
-function prependFunctionalNode(
-  node: FunctionalNode,
-  s: MagicStringAST,
-  result: string,
-): void {
-  const isBlockStatement = node.body.type === 'BlockStatement'
-  const start = node.body.extra?.parenthesized
-    ? (node.body.extra.parenStart as number)
-    : node.body.start!
-  s.appendRight(
-    start + (isBlockStatement ? 1 : 0),
-    `${result};${!isBlockStatement ? 'return ' : ''}`,
-  )
-  if (!isBlockStatement) {
-    s.appendLeft(start, '{')
-    s.appendRight(node.end!, '}')
-  }
-}

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

@@ -4,6 +4,7 @@ exports[`defineComponent autoReturnFunction fixtures > ./fixtures/define-compone
 "
 import { useAttrs as __MACROS_useAttrs } from "vue";
 import { useModel as __MACROS_useModel } from "vue-jsx-vapor/macros/use-model";
+import { useFullProps as __MACROS_useFullProps } from "vue-jsx-vapor";
 import { withAsyncContext as __MACROS_withAsyncContext } from "vue";import { defineComponent, nextTick, unref } from 'vue'
 
 const $ = unref
@@ -38,7 +39,7 @@ const Comp = defineComponent(
 }, ...{ Comp: Object }} },
 )
 
-const Comp1 = defineComponent((props: { bar: 'bar'; 'onUpdate:bar': any, comp: any }) => {
+const Comp1 = defineComponent((__MACROS_props) => {const props = __MACROS_useFullProps();
   const foo = __MACROS_useModel(props, 'foo')
   return () => <div>
       {[foo.value, props['bar'], props['onUpdate:bar']]}
@@ -104,6 +105,7 @@ exports[`fixtures > ./fixtures/define-component.tsx 1`] = `
 "
 import { useAttrs as __MACROS_useAttrs } from "vue";
 import { useModel as __MACROS_useModel } from "vue-jsx-vapor/macros/use-model";
+import { useFullProps as __MACROS_useFullProps } from "vue-jsx-vapor";
 import { withAsyncContext as __MACROS_withAsyncContext } from "vue";import { defineComponent, nextTick, unref } from 'vue'
 
 const $ = unref
@@ -138,7 +140,7 @@ const Comp = defineComponent(
 }, ...{ Comp: Object }} },
 )
 
-const Comp1 = defineComponent((props: { bar: 'bar'; 'onUpdate:bar': any, comp: any }) => {
+const Comp1 = defineComponent((__MACROS_props) => {const props = __MACROS_useFullProps();
   const foo = __MACROS_useModel(props, 'foo')
   return <div>
       {[foo.value, props['bar'], props['onUpdate:bar']]}
@@ -202,22 +204,22 @@ defineComponent((__MACROS_props) => {
 
 exports[`fixtures > ./fixtures/define-expose.tsx 1`] = `
 "
-import { currentInstance as __MACROS_currentInstance } from "vue";export function Comp(__MACROS_props) {
-  ;(__MACROS_currentInstance.exposed = {
+import { getCurrentInstance as __MACROS_getCurrentInstance } from "vue-jsx-vapor";export function Comp(__MACROS_props) {
+  ;(__MACROS_getCurrentInstance().exposed = {
     foo: 1,
   })
   return <div />
 }
 
 export const Comp1 = function (props: any) {
-  ;(__MACROS_currentInstance.exposed = {
+  ;(__MACROS_getCurrentInstance().exposed = {
     foo: props.foo,
   })
   return <div />
 }
 
 export const Comp2 = ({ foo, ...__MACROS_props }: any) => {
-  ;(__MACROS_currentInstance.exposed = {
+  ;(__MACROS_getCurrentInstance().exposed = {
     foo,
   })
   return <div />