Vue.js util for intelligently merging data passed to functional components.
Home Page: https://www.npmjs.com/package/vue-functional-data-merge
License: MIT License
Hi @alexsasharegan,
in my local tests I am getting this strange behavior where the passed in objects are being mutated.
Example
const def = {on: { event }}
const def2 = {on: { event2 }}
const data = dataMerge(data, def, def2)
console.log(def) // { on: [event, event2] }Before making some deeper tests and solutions I wanted to expose this issue and see if there is any reason behind.
Thank you.
Over here a bug is described which is about scoped styles not being properly applied when nesting functional components in regular components with scoped styles.
Not every scenario described there might be solvable, but the one where a functional component is nested in a scoped regular component might be.
I did some digging and it turns out the scope id is exposed in the $options object, so getting it from the parent would be as simple as:
const scope = this.$parent.$options._scopeId
With some extra logic, this could make functional components apply the correct scoped styles from the parent when a class attribute has passed overwritten as a prop and the style definition lives in the parent component's scoped stylesheet.
This might not be the intended responsibility of this library, but since it is about increasing the compatibility of functional and regular components within Vue it might be worth to have this fixed here :)
Create a V3 to handle the new flattened props interface as per #18
I get the following error message in Firefox console for a project using Laravel and VueJS:
Source map error: request failed with status 404
Resource URL : http://backend.test/js/app.js
Source Map URL : lib.esm.js.map
When I check where lib.esm.js.map is used in my project:
$ grep -rn lib.esm.js.map *
I get this answer:
public/js/app.js:95525://# sourceMappingURL=lib.esm.js.map
node_modules/vue-functional-data-merge/dist/lib.esm.js:2://# sourceMappingURL=lib.esm.js.map
node_modules/bootstrap-vue/dist/bootstrap-vue-icons.js.map:1
And when I go further to check public/js/app.js, I can see this paragraph:
/***/ "./node_modules/vue-functional-data-merge/dist/lib.esm.js":
/*!****************************************************************!*\
!*** ./node_modules/vue-functional-data-merge/dist/lib.esm.js ***!
\****************************************************************/
/*! exports provided: mergeData */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mergeData", function() { return a; });
var e=function(){return(e=Object.assign||function(e){for(var t,r=1,s=arguments.length;r<s;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e}).apply(this,arguments)},t={kebab:/-(\w)/g,styleProp:/:(.*)/,styleList:/;(?![^(]*\))/g};function r(e,t){return t?t.toUpperCase():""}function s(e){for(var s,a={},c=0,o=e.split(t.styleList);c<o.length;c++){var n=o[c].split(t.styleProp),i=n[0],l=n[1];(i=i.trim())&&("string"==typeof l&&(l=l.trim()),a[(s=i,s.replace(t.kebab,r))]=l)}return a}function a(){for(var t,r,a={},c=arguments.length;c--;)for(var o=0,n=Object.keys(arguments[c]);o<n.length;o++)switch(t=n[o]){case"class":case"style":case"directives":if(Array.isArray(a[t])||(a[t]=[]),"style"===t){var i=void 0;i=Array.isArray(arguments[c].style)?arguments[c].style:[arguments[c].style];for(var l=0;l<i.length;l++){var y=i[l];"string"==typeof y&&(i[l]=s(y))}arguments[c].style=i}a[t]=a[t].concat(arguments[c][t]);break;case"staticClass":if(!arguments[c][t])break;void 0===a[t]&&(a[t]=""),a[t]&&(a[t]+=" "),a[t]+=arguments[c][t].trim();break;case"on":case"nativeOn":a[t]||(a[t]={});for(var p=0,f=Object.keys(arguments[c][t]||{});p<f.length;p++)r=f[p],a[t][r]?a[t][r]=[].concat(a[t][r],arguments[c][t][r]):a[t][r]=arguments[c][t][r];break;case"attrs":case"props":case"domProps":case"scopedSlots":case"staticStyle":case"hook":case"transition":a[t]||(a[t]={}),a[t]=e({},arguments[c][t],a[t]);break;case"slot":case"key":case"ref":case"tag":case"show":case"keepAlive":default:a[t]||(a[t]=arguments[c][t])}return a}
//# sourceMappingURL=lib.esm.js.map
Is this warning linked to vue-functional-data-merge ? How can I fix it ?
suppose
mergeData({
on: undefined
}, { staticClass: 'foo'})
it will raise a Cannot convert null or undefined to object
ps: Great lib, cheers !
The documentation of the vue-3.x branch is no longer valid since it spies examples that reflect the Vue 2.x syntax.
Since Vue 3 changed the VNode props format, this library is only compatible with Vue 2.
It would be awesome to have a new major version with Vue 3 support.
Hello,
can you please add license file?
Hi. thank you for the nice util 👍
Is there any changelog that I can found what's new in the releases?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.