vuejs / babel-helper-vue-jsx-merge-props Goto Github PK
View Code? Open in Web Editor NEWbabel helper for vue jsx spread.
babel helper for vue jsx spread.
When rendered with ts-loader
and babel!ts
, there is a non existent pointer being used for babel_helper_vue_jsx_merge_props_1
, that pointer is babel_helper_vue_jsx_merge_props_1.default
, babel_helper_vue_jsx_merge_props_1
returns the correct function, where as babel_helper_vue_jsx_merge_props_1.default
returns undefined.
.tsconfig
{
"compilerOptions": {
"jsx": "preserve",
"module": "commonjs",
"outDir": "bin/",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/typings/**/*.ts"
],
"files": [
"./src/app/app.tsx"
]
}
webpack.config.js
module.exports = {
entry: './src/app/app.tsx',
output: {
filename: 'bin/bundle.js'
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{
test: /\.tsx?$/,
loader: 'ts-loader'
},
{
test: /\.tsx$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel!ts',
}
]
}
};
Ten@nu-test src % npm i @vue/babel-helper-vue-jsx-merge-props
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@vue%2fbabel-helper-vue-jsx-merge-props - Not found
npm ERR! 404
npm ERR! 404 '@vue/babel-helper-vue-jsx-merge-props@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Ten/.npm/_logs/2020-08-06T11_14_34_934Z-debug.log
It look the npm package is wrong?
Using this in a component with a keypress event,
<input text="text" on-keypress={this.keypress} v-model={this.d} />
works correctly and the keypress event is called and the model is bound
however
<input text="text" v-model={this.d} on-keypress={this.keypress} />
causes
Uncaught TypeError: Cannot read property 'apply' of undefined
at eval (index.js?9ef6:52)
at HTMLInputElement.invoker (vue.esm.js?efeb:1821)
Error
which I traced to a.apply(this.arguments)
in
function mergeFn (a, b) {
return function () {
a.apply(this, arguments)
b.apply(this, arguments)
}
}
So there is implication that the order of the attribute declarations is causing a difference of outcome in the mergeJSXProps
function, where I would expect the outcome from the function would be the same?
(The v-model attribute is being supplied by the "babel-plugin-jsx-v-model" plugin).
When this helper is injected via babel-plugin-transform-vue-jsx
, it’s injected as ES import
signature, but this package uses CommonJS exports signature (module.exports
) which can create issues with tools like Rollup which expect proper definition as opposed to e.g. Webpack 2 which understands both syntaxes out of the box.
Maybe this should be changed to ES modules export
by default? Or use main
for current file, and module
package.json property for ES version?
on-click={flag ? this.onClick : null}
when flag is false,the program will throw error
I am using[email protected]
with [email protected]
and encountered a problem somewhat like This directive makes v-show not work when been added after it
After reading the codes I found that [email protected]
is using babel-helper-vue-jsx-merge-props
to merge props but nest merge of 'directives' is not supported, that is what causes the problem.
Owing to my limited knowledge, I cannot see why. Please consider it if it's reasonable.
for the case <div class="a" {...{class: "b"}}></div>
it's better to render <div class="a b"></div>
This project is missing a LICENSE or COPYING file containing a copy of MIT license.
When specifying event handlers by both prefixed style and JSX-spread style like below:
<div
on-click={ () => console.log("click") }
{ ...{ on: { mousedown: () => console.log("mousedown") } } }
/>;
Vue throws error when mousedown event occurred
Uncaught TypeError: Cannot read property 'apply' of undefined
Above code might seems nonsense.
More practical example is below (in functional component).
render(h, { data }) {
return <div on-click={ doSomething } { ...data } />;
}
I suppose this could be intended behavior, but if it is, I think it shouldn't be.
I was writing some stories for my vue storybook and ran into an instance where I was iterating over different variations of a component like so:
render() {
types = [...blah];
types.map(t => {
const data = { attrs: { types[t]: true } };
<ProfilePic {...data} />
<ProfilePic url={picUrl} {...data} />
}
}
I was getting odd behavior on the second component, and I managed to track it down to the fact that the data
object is actually mutated in the creation of the first element. All the props are removed from the data
object when props are "extracted" and applied to the element.
Is this intended behavior? or a bug? It seems like the data object to be merged should be cloned instead of mutated, but let me know if there's a reason for this. I can create a repro code pen if needed.
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.