{"id":20016619,"url":"https://github.com/iwtkachenko/great-vue-func-com","last_synced_at":"2025-03-02T03:14:19.656Z","repository":{"id":57253872,"uuid":"95253311","full_name":"iwtkachenko/great-vue-func-com","owner":"iwtkachenko","description":"Helper that allows to create functional components for VueJs","archived":false,"fork":false,"pushed_at":"2017-07-06T21:33:16.000Z","size":107,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-13T16:48:17.888Z","etag":null,"topics":["functional-components","vue","vue-components","vue2","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iwtkachenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-23T20:15:52.000Z","updated_at":"2019-02-01T20:19:43.000Z","dependencies_parsed_at":"2022-09-04T14:40:46.701Z","dependency_job_id":null,"html_url":"https://github.com/iwtkachenko/great-vue-func-com","commit_stats":null,"previous_names":["iwtkachenko/great-vue-func-com","vashigor/great-vue-func-com"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iwtkachenko%2Fgreat-vue-func-com","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iwtkachenko%2Fgreat-vue-func-com/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iwtkachenko%2Fgreat-vue-func-com/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iwtkachenko%2Fgreat-vue-func-com/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iwtkachenko","download_url":"https://codeload.github.com/iwtkachenko/great-vue-func-com/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241451667,"owners_count":19964901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["functional-components","vue","vue-components","vue2","vuejs2"],"created_at":"2024-11-13T08:12:17.161Z","updated_at":"2025-03-02T03:14:19.640Z","avatar_url":"https://github.com/iwtkachenko.png","language":"JavaScript","readme":"# Vue JS true functional components\nThis is small helper function that helps to create functional components.\n\n**Table of Contents**\n\n- [Vue JS true functional components](#)\n  - [Motivation](#motivation)\n  - [Limitations](#limitations)\n  - [Installation](#installation)\n  - [Usage](#usage)\n  - [API](#api)\n    - [Helper itself](#funccomponent)\n    - [RenderFunction](#renderfunction)\n    - [Options](#options)\n    - [RenderPayload](#renderpayload)\n  - [License](#license)\n\n---\n## Motivation\nI'd like VueJs to behave more React way in my hands. [More deatils here.](https://github.com/vashigor/great-vue-hoc-helper#motivation)\n\n\n## Limitations\nThis library is mostly useful when you use:\n* vuejs with render functions\n\n\n## Installation\n```bash\n# npm 5+\nnpm install great-vue-func-com\n# or\nyarn add great-vue-func-com\n```\n\n\n# Usage\n```javascript\nimport Vue from 'vue';\nimport fcom from 'great-vue-func-com';\n\nconst MyComp = fcom({ props: { value: {} } })(\n  (h, { value }) =\u003e \u003cdiv\u003e{value}\u003c/div\u003e,\n);\n\n/* eslint-disable no-new */\nnew Vue({ el: '#example-app', render: h =\u003e (\u003cMyComp value={1} /\u003e) });\n/* eslint-enable no-new */\n```\n\n## API\nThis library uses pretty same API as [hoc helper.](https://github.com/vashigor/great-vue-hoc-helper#motivation) does.\n### func-component\n```javascript\n\u003cT\u003e(options: Options\u003cT\u003e = {}) =\u003e (com: RenderFunction\u003cT\u003e) =\u003e typeof Vue\n```\n\n### RenderFunction\n```javascript\ntype RenderFunction\u003cT\u003e = (\n  h: any,\n  props?: T,\n  children: Vue[],\n  payload?: RenderPayload\u003cT\u003e\n) =\u003e any\n```\n\n### Options\n```javascript\ninterface Options\u003cT\u003e {\n  // Inject props values into the child component\n  injectProps?: (props: T, self?: Vue, options?: Options\u003cT\u003e, metadata?: any) =\u003e T,\n  // Prepare vue vm render data object\n  prepareData?: (self: Vue, options?: Options\u003cT\u003e) =\u003e any,\n  // Additional props definitions\n  props?: T,\n  // This object has to have shape of Vue component options\n  options?: any,\n  /**\n   * Initial values for unbinded data for vnode instance.\n   * The idea is that all vue data object (with props, data, methods etc.)\n   * is under tight control by things like proxies, observers, watchers,\n   * and any other things that can influnce or react on your values some way or\n   * prevent you from operating it the way you want.\n   * This is a safe place to keep some data that relates to your HOC.\n   */\n  metadata?: any,\n}\n```\n\n### RenderPayload\n```javascript\ninterface RenderPayload\u003cT\u003e {\n  self: Vue,\n  props?: T,\n  metadata?: any,\n}\n```\n\n\n## License\nThis module is provided under the MIT License. You have to read LICENSE.md file for details.\n\n---\nCopyright (c) 2017 by Igor Tkachenko \u003cvash.igor@gmail.com\u003e. All Rights Reserved.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiwtkachenko%2Fgreat-vue-func-com","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiwtkachenko%2Fgreat-vue-func-com","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiwtkachenko%2Fgreat-vue-func-com/lists"}