or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-vue--babel-helper-vue-jsx-merge-props

Babel helper utility for intelligently merging Vue JSX props with spread syntax support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/babel-helper-vue-jsx-merge-props@1.4.x

To install, run

npx @tessl/cli install tessl/npm-vue--babel-helper-vue-jsx-merge-props@1.4.0

index.mddocs/

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 mergeJsxProps

The 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