tessl/npm-vue--babel-helper-vue-jsx-merge-props
Babel helper utility for intelligently merging Vue JSX props with spread syntax support
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Vue JSX Merge Props
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.
Package Information
- Package Name: @vue/babel-helper-vue-jsx-merge-props
- Package Type: npm
- Language: JavaScript (ES6+)
- Installation: This is an internal utility used by Vue JSX transformers - not intended for direct installation
Core Imports
import mergeJsxProps from "@vue/babel-helper-vue-jsx-merge-props";For CommonJS:
const mergeJsxProps = require("@vue/babel-helper-vue-jsx-merge-props");Basic Usage
import mergeJsxProps from "@vue/babel-helper-vue-jsx-merge-props";
// Merge multiple prop objects with intelligent merging rules
const merged = mergeJsxProps([
{
attrs: { id: "btn1", disabled: false },
class: "primary",
on: { click: handler1 }
},
{
attrs: { disabled: true, title: "Click me" },
class: ["secondary", "large"],
on: { click: handler2, hover: handler3 }
}
]);
// Result: {
// attrs: { id: "btn1", disabled: true, title: "Click me" },
// class: ["primary", "secondary", "large"],
// on: { click: [handler1, handler2], hover: handler3 }
// }Capabilities
Props Merging
Merges an array of Vue JSX prop objects using intelligent rules based on property types.
/**
* Merges an array of Vue JSX prop objects using Vue-specific merging rules
* @param {Array<Object>} objects - Array of prop objects to merge
* @returns {Object} Merged prop object
*/
const mergeJsxProps = objects => objects.reduce((a, b) => {
// Implementation details...
}, {});
// Default export (this is the main and only export)
export default mergeJsxPropsThe function handles different Vue prop types with specific merging strategies:
- Normal merge (
attrs,props,domProps): Object spread merge where later values override earlier ones - Array merge (
class,style,directives): Convert to arrays and concatenate all values - Functional merge (
on,nativeOn): Merge event handlers by event name, supporting arrays of handlers - Hook merge (
hook): Special handling for Vue lifecycle hooks using function composition - Default: Last value wins for unrecognized properties
Prop Merging Rules
Normal Properties
Properties like attrs, props, and domProps are merged using object spread:
// Input
[{ attrs: { a: 1, b: 2 } }, { attrs: { a: 3, c: 4 } }]
// Output
{ attrs: { a: 3, b: 2, c: 4 } }Array Properties
Properties like class, style, and directives are converted to arrays and concatenated:
// Input
[{ class: "foo" }, { class: ["bar", "baz"] }]
// Output
{ class: ["foo", "bar", "baz"] }Event Handlers
Properties like on and nativeOn merge event handlers by event name:
// Input
[
{ on: { click: handler1, hover: handler2 } },
{ on: { click: handler3 } }
]
// Output
{ on: { click: [handler1, handler3], hover: handler2 } }Hook Functions
Vue lifecycle hooks are composed into sequential functions:
// Input
[
{ hook: { insert: fn1 } },
{ hook: { insert: fn2, destroy: fn3 } }
]
// Output - hook.insert calls fn1 then fn2
{ hook: { insert: composedFunction, destroy: fn3 } }Internal Implementation Details
The merging behavior is controlled by these internal categorizations:
/** Properties merged by object spread */
const normalMerge = ['attrs', 'props', 'domProps'];
/** Properties merged by array concatenation */
const toArrayMerge = ['class', 'style', 'directives'];
/** Properties with event handlers requiring special merging */
const functionalMerge = ['on', 'nativeOn'];
/**
* Internal helper that merges hook functions into a single function
* that calls both in sequence
*/
const mergeFn = (fn1, fn2) => function() {
fn1 && fn1.apply(this, arguments);
fn2 && fn2.apply(this, arguments);
};Distribution
The package is built to multiple formats:
- CommonJS:
dist/helper.js(main entry point) - ES Modules:
dist/helper.esm.js - Testing:
dist/helper.testing.js
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Publish Source
- CLI
- Badge
