nickmessing / babel-plugin-jsx-vue-functional Goto Github PK

I'm a little confused by the example you gave that won't work down below

This plugin will transform all named arrow functions that contain JSX and starting with version 2.0.0 so this code will not work:

const A = () => <h1>Hello World</h1> export const B = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}{A()}</div>

Can you please explain, what would work rather as the example above this section is same as well.

TypeScript supposes first argument of functional component is props.

https://www.typescriptlang.org/docs/handbook/jsx.html#stateless-functional-component

It would be nice if some option will be added that treats first argument as props.

Example:

const A = (props: { msg: string }, { listeners }) => <div onClick={listeners.click}>{props.msg}</div>;

will be transpiled into

const A = {
  functional: true,
  render: (h, ctx) => (
    (props, { listeners }) => <div onClick={listeners.click}>{props.msg}</div>
  )(ctx.props, ctx)
}

Documentation says:

This plugin will transform all named exported arrow functions that contain JSX.

What about non-exported functions, e.g. small components defined in same file as larger component? Do you think this makes sense for transpiling, or transpiler can encounter problems with false positives?

Machine windows 10
node version 8.12
npm - 6.4.1

Command - npm i -D babel-plugin-jsx-vue-functional on git bash

Error -

code ENOENT npm ERR! errno -4058 npm ERR! syscall rename npm ERR! enoent ENOENT: no such file or directory, rename 'E:\Projects\vue_deep_dive\node_modules\babel-plugin-jsx-vue-functional' -> 'E:\Projects\vue_deep_dive\node_modules\.babel-plugin-jsx-vue-functional.DELETE' npm ERR! enoent This is related to npm not being able to find a file.

Adding name property could help in debugging your application. This could be defined as option for plugin so it isn’t active by default.

What do you think?

I'm a total newbie at jsx functional components. Hopefully you can provide an example of how to use them. I don't understand what's on the readme and articles such as:

https://alligator.io/vuejs/render-functional-components/

Aren't that helpful for a beginner like me. I'm able to understand "babel-plugin-transform-vue-jsx" ok, but this topic eludes me right now.

From my example I keep on getting "draggableItems is not a function". Although I can console.log it and I see the object just fine. But I'm struggling to make it work.

Here's a quick example:

export default function(h, index, itemsLength) {
	const draggableItems = (index, itemsLength) => {
		let dragControls = [];
		let draggableClass = "...";

		if (index == 0) {
			draggableClass += " right";
			dragControls.push(draggableClass);
		} else if (index < (itemsLength - 1)) {
			draggableClass += " left";
			dragControls.push(draggableClass);
		} else {
			draggableClass += " right";
			dragControls.push(draggableClass);

			draggableClass += " left";
			dragControls.push(draggableClass);
		}		

		const items = dragControls.map((draggableClass) => {
			return <div class={draggableClass}>
				[ ... stuf here ...]
			</div>
		});

		return { items }		
	}	

	return draggableItems(index, itemsLength);
}

https://jsx.egoist.moe/gist/30abaf436a4b819500f91fd4c2a80d70