vuejs / babel-helper-vue-jsx-merge-props Goto Github PK

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',
      }
    ]
  }
};

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?

for the case <div class="a" {...{class: "b"}}></div>
it's better to render <div class="a b"></div>

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 } />;
}

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).

This project is missing a LICENSE or COPYING file containing a copy of MIT license.

babel/babel#7308 (comment)

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.

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.

on-click={flag ? this.onClick : null}
when flag is false，the program will throw error

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?