0
# Vue JSX Merge Props
1

2
Vue JSX Merge Props is a specialized Babel helper utility that intelligently merges Vue JSX props across spread elements. It provides smart merging logic for different types of Vue props including normal attributes, array-merged properties, and functional event handlers, ensuring that JSX spread syntax works correctly in Vue components.
3

4
## Package Information
5

6
- **Package Name**: @vue/babel-helper-vue-jsx-merge-props
7
- **Package Type**: npm
8
- **Language**: JavaScript (ES6+)
9
- **Installation**: This is an internal utility used by Vue JSX transformers - not intended for direct installation
10

11
## Core Imports
12

13
```javascript
14
import mergeJsxProps from "@vue/babel-helper-vue-jsx-merge-props";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const mergeJsxProps = require("@vue/babel-helper-vue-jsx-merge-props");
21
```
22

23
## Basic Usage
24

25
```javascript
26
import mergeJsxProps from "@vue/babel-helper-vue-jsx-merge-props";
27

28
// Merge multiple prop objects with intelligent merging rules
29
const merged = mergeJsxProps([
30
  {
31
    attrs: { id: "btn1", disabled: false },
32
    class: "primary",
33
    on: { click: handler1 }
34
  },
35
  {
36
    attrs: { disabled: true, title: "Click me" },
37
    class: ["secondary", "large"],
38
    on: { click: handler2, hover: handler3 }
39
  }
40
]);
41

42
// Result: {
43
//   attrs: { id: "btn1", disabled: true, title: "Click me" },
44
//   class: ["primary", "secondary", "large"],
45
//   on: { click: [handler1, handler2], hover: handler3 }
46
// }
47
```
48

49
## Capabilities
50

51
### Props Merging
52

53
Merges an array of Vue JSX prop objects using intelligent rules based on property types.
54

55
```javascript { .api }
56
/**
57
 * Merges an array of Vue JSX prop objects using Vue-specific merging rules
58
 * @param {Array<Object>} objects - Array of prop objects to merge
59
 * @returns {Object} Merged prop object
60
 */
61
const mergeJsxProps = objects => objects.reduce((a, b) => {
62
  // Implementation details...
63
}, {});
64

65
// Default export (this is the main and only export)
66
export default mergeJsxProps
67
```
68

69
The function handles different Vue prop types with specific merging strategies:
70

71
- **Normal merge** (`attrs`, `props`, `domProps`): Object spread merge where later values override earlier ones
72
- **Array merge** (`class`, `style`, `directives`): Convert to arrays and concatenate all values
73
- **Functional merge** (`on`, `nativeOn`): Merge event handlers by event name, supporting arrays of handlers
74
- **Hook merge** (`hook`): Special handling for Vue lifecycle hooks using function composition
75
- **Default**: Last value wins for unrecognized properties
76

77
### Prop Merging Rules
78

79
#### Normal Properties
80
Properties like `attrs`, `props`, and `domProps` are merged using object spread:
81

82
```javascript
83
// Input
84
[{ attrs: { a: 1, b: 2 } }, { attrs: { a: 3, c: 4 } }]
85
// Output
86
{ attrs: { a: 3, b: 2, c: 4 } }
87
```
88

89
#### Array Properties  
90
Properties like `class`, `style`, and `directives` are converted to arrays and concatenated:
91

92
```javascript
93
// Input
94
[{ class: "foo" }, { class: ["bar", "baz"] }]
95
// Output  
96
{ class: ["foo", "bar", "baz"] }
97
```
98

99
#### Event Handlers
100
Properties like `on` and `nativeOn` merge event handlers by event name:
101

102
```javascript
103
// Input
104
[
105
  { on: { click: handler1, hover: handler2 } },
106
  { on: { click: handler3 } }
107
]
108
// Output
109
{ on: { click: [handler1, handler3], hover: handler2 } }
110
```
111

112
#### Hook Functions
113
Vue lifecycle hooks are composed into sequential functions:
114

115
```javascript
116
// Input
117
[
118
  { hook: { insert: fn1 } },
119
  { hook: { insert: fn2, destroy: fn3 } }
120
]
121
// Output - hook.insert calls fn1 then fn2
122
{ hook: { insert: composedFunction, destroy: fn3 } }
123
```
124

125
## Internal Implementation Details
126

127
The merging behavior is controlled by these internal categorizations:
128

129
```javascript
130
/** Properties merged by object spread */
131
const normalMerge = ['attrs', 'props', 'domProps'];
132

133
/** Properties merged by array concatenation */
134
const toArrayMerge = ['class', 'style', 'directives'];
135

136
/** Properties with event handlers requiring special merging */
137
const functionalMerge = ['on', 'nativeOn'];
138

139
/**
140
 * Internal helper that merges hook functions into a single function 
141
 * that calls both in sequence
142
 */
143
const mergeFn = (fn1, fn2) => function() {
144
  fn1 && fn1.apply(this, arguments);
145
  fn2 && fn2.apply(this, arguments);
146
};
147
```
148

149
## Distribution
150

151
The package is built to multiple formats:
152
- **CommonJS**: `dist/helper.js` (main entry point)
153
- **ES Modules**: `dist/helper.esm.js`
154
- **Testing**: `dist/helper.testing.js`