https://github.com/iwtkachenko/great-vue-func-com
Helper that allows to create functional components for VueJs
https://github.com/iwtkachenko/great-vue-func-com
functional-components vue vue-components vue2 vuejs2
Last synced: about 1 year ago
JSON representation
Helper that allows to create functional components for VueJs
- Host: GitHub
- URL: https://github.com/iwtkachenko/great-vue-func-com
- Owner: iwtkachenko
- License: mit
- Created: 2017-06-23T20:15:52.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-06T21:33:16.000Z (almost 9 years ago)
- Last Synced: 2025-02-13T16:48:17.888Z (about 1 year ago)
- Topics: functional-components, vue, vue-components, vue2, vuejs2
- Language: JavaScript
- Homepage:
- Size: 104 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Vue JS true functional components
This is small helper function that helps to create functional components.
**Table of Contents**
- [Vue JS true functional components](#)
- [Motivation](#motivation)
- [Limitations](#limitations)
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [Helper itself](#funccomponent)
- [RenderFunction](#renderfunction)
- [Options](#options)
- [RenderPayload](#renderpayload)
- [License](#license)
---
## Motivation
I'd like VueJs to behave more React way in my hands. [More deatils here.](https://github.com/vashigor/great-vue-hoc-helper#motivation)
## Limitations
This library is mostly useful when you use:
* vuejs with render functions
## Installation
```bash
# npm 5+
npm install great-vue-func-com
# or
yarn add great-vue-func-com
```
# Usage
```javascript
import Vue from 'vue';
import fcom from 'great-vue-func-com';
const MyComp = fcom({ props: { value: {} } })(
(h, { value }) =>
{value},
);
/* eslint-disable no-new */
new Vue({ el: '#example-app', render: h => () });
/* eslint-enable no-new */
```
## API
This library uses pretty same API as [hoc helper.](https://github.com/vashigor/great-vue-hoc-helper#motivation) does.
### func-component
```javascript
(options: Options = {}) => (com: RenderFunction) => typeof Vue
```
### RenderFunction
```javascript
type RenderFunction = (
h: any,
props?: T,
children: Vue[],
payload?: RenderPayload
) => any
```
### Options
```javascript
interface Options {
// Inject props values into the child component
injectProps?: (props: T, self?: Vue, options?: Options, metadata?: any) => T,
// Prepare vue vm render data object
prepareData?: (self: Vue, options?: Options) => 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,
}
```
### RenderPayload
```javascript
interface RenderPayload {
self: Vue,
props?: T,
metadata?: any,
}
```
## License
This module is provided under the MIT License. You have to read LICENSE.md file for details.
---
Copyright (c) 2017 by Igor Tkachenko . All Rights Reserved.