This is small helper function that helps to create functional components.
Table of Contents
I'd like VueJs to behave more React way in my hands. More deatils here.
This library is mostly useful when you use:
- vuejs with render functions
# npm 5+
npm install great-vue-func-com
# or
yarn add great-vue-func-com
import Vue from 'vue';
import fcom from 'great-vue-func-com';
const MyComp = fcom({ props: { value: {} } })(
(h, { value }) => <div>{value}</div>,
);
/* eslint-disable no-new */
new Vue({ el: '#example-app', render: h => (<MyComp value={1} />) });
/* eslint-enable no-new */
This library uses pretty same API as hoc helper. does.
<T>(options: Options<T> = {}) => (com: RenderFunction<T>) => typeof Vue
type RenderFunction<T> = (
h: any,
props?: T,
children: Vue[],
payload?: RenderPayload<T>
) => any
interface Options<T> {
// Inject props values into the child component
injectProps?: (props: T, self?: Vue, options?: Options<T>, metadata?: any) => T,
// Prepare vue vm render data object
prepareData?: (self: Vue, options?: Options<T>) => any,
// Additional props definitions
props?: T,
// This object has to have shape of Vue component options
options?: any,
/**
* Initial values for unbinded data for vnode instance.
* The idea is that all vue data object (with props, data, methods etc.)
* is under tight control by things like proxies, observers, watchers,
* and any other things that can influnce or react on your values some way or
* prevent you from operating it the way you want.
* This is a safe place to keep some data that relates to your HOC.
*/
metadata?: any,
}
interface RenderPayload<T> {
self: Vue,
props?: T,
metadata?: any,
}
This module is provided under the MIT License. You have to read LICENSE.md file for details.
Copyright (c) 2017 by Igor Tkachenko vash.igor@gmail.com. All Rights Reserved.