{"id":16535151,"url":"https://github.com/devinivy/funk","last_synced_at":"2025-10-28T11:32:15.003Z","repository":{"id":58221166,"uuid":"48975458","full_name":"devinivy/funk","owner":"devinivy","description":"Polymer high-fives Reflux","archived":false,"fork":false,"pushed_at":"2016-04-24T20:30:09.000Z","size":2729,"stargazers_count":23,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-23T03:46:39.889Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://devinivy.github.io/funk","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/devinivy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-04T04:55:00.000Z","updated_at":"2025-07-23T21:22:47.000Z","dependencies_parsed_at":"2022-08-31T02:01:37.662Z","dependency_job_id":null,"html_url":"https://github.com/devinivy/funk","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/devinivy/funk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devinivy%2Ffunk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devinivy%2Ffunk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devinivy%2Ffunk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devinivy%2Ffunk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devinivy","download_url":"https://codeload.github.com/devinivy/funk/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devinivy%2Ffunk/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281430970,"owners_count":26500240,"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","status":"online","status_checked_at":"2025-10-28T02:00:06.022Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-10-11T18:26:32.383Z","updated_at":"2025-10-28T11:32:14.732Z","avatar_url":"https://github.com/devinivy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# funk\n\nPolymer high-fives Reflux\n\n[![Build Status](https://travis-ci.org/devinivy/funk.svg?branch=master)](https://travis-ci.org/devinivy/funk)\n\n## Usage\nFunk marries Polymer and Reflux by allowing you to use standard Polymer v1 data-binding alongside Reflux's stores and actions.  It leverages the [`yarn-state-behavior`](https://github.com/yarn-co/yarn-state-behavior) to share state throughout your app.\n  - Your **view** layer is Polymer.\n  - Your **actions** are Reflux actions.\n  - Your **stores** are Polymerized Reflux stores.\n    - Views subscribe to stores via **Polymer data-binding!**\n\n### What You'll Find\n#### `Funk.Reflux`\nAn alias for [reflux-core](https://github.com/reflux/reflux-core) (identical to [RefluxJS](https://github.com/reflux/refluxjs), but without the React helpers).  You'll find all the standard goodies on here like `Funk.Reflux.createActions()`.\n\n#### `Funk.StoreBehavior`\nThe Polymer behavior used to create a Polymerized Reflux store.  Enables data-binding from the store to your views.\n\n#### `Funk.ViewBehavior`\nThe Polymer behavior used to enable data-binding to a view from your stores.\n\n#### `Funk.CollectionBehavior`\nThe Polymer behavior used by `Funk.StoreBehavior` to provide crucial helpers for working with lists and collections.\n\n### Example\nCheck out the full [polymer-funky-flux](https://github.com/devinivy/polymer-funky-flux) demo or learn to use Funk by walking through this commented code!  If you're unfamiliar with Reflux or the flux pattern, start reading [here](https://github.com/reflux/refluxjs) to see how it will make your life better-er.\n\n#### `view.html`\n```html\n\u003clink rel=\"import\" href=\"bower_components/polymer/polymer.html\"\u003e\n\u003clink rel=\"import\" href=\"bower_components/funk/funk.html\"\u003e\n\u003clink rel=\"import\" href=\"actions.html\"\u003e\n\n\u003cdom-module id=\"my-view\"\u003e\n  \u003ctemplate\u003e\n    \u003c!-- Look, a binding from myStore! --\u003e\n    \u003ch1\u003eFinger length: [[_length(state.myStore.finger)]]\u003c/h1\u003e\n    \u003cul on-click=\"_clickedFinger\"\u003e\n      \u003cli\u003ering\u003c/li\u003e\n      \u003cli\u003ethumb\u003c/li\u003e\n      \u003cli\u003epinky\u003c/li\u003e\n      \u003cli\u003emiddle\u003c/li\u003e\n      \u003cli\u003epointer\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/template\u003e\n\u003c/dom-module\u003e\n\n\u003cscript\u003e\nPolymer({\n\n  is: 'my-view',\n\n  // Use the ViewBehavior to receive state changes from myStore\n  behaviors: [\n    Funk.ViewBehavior\n  ],\n\n  // Put MyActions to good use and give a whiff!\n  _clickedFinger: function(e) {\n    if (e.path[0].tagName === 'LI') {\n      MyActions.smellFinger(e.path[0].innerHTML);\n    }\n  },\n\n  _length: function(str) {\n    return (str || '').length;\n  }\n\n});\n\u003c/script\u003e\n```\n\n#### `actions.html`\n```html\n\u003clink rel=\"import\" href=\"bower_components/funk/funk.html\"\u003e\n\n\u003cscript\u003e\n  // Funk.Reflux is just a reference to the Reflux library\n  var MyActions = Funk.Reflux.createActions([\n    'smellFinger'\n  ]);\n\u003c/script\u003e\n```\n\n#### `store.html`\n```html\n\u003clink rel=\"import\" href=\"bower_components/polymer/polymer.html\"\u003e\n\u003clink rel=\"import\" href=\"bower_components/funk/funk.html\"\u003e\n\u003clink rel=\"import\" href=\"actions.html\"\u003e\n\n\u003cscript\u003e\nPolymer({\n\n  is: 'my-store',\n\n  // The StoreBehavior makes this element act\n  // like a Reflux store... but in Polymer-land.\n  behaviors: [\n    Funk.StoreBehavior\n  ],\n\n  properties: {\n\n    storeName: {\n      type: String,\n      value: 'myStore' // Name of the store as found on `state.myStore`\n    },\n\n    finger: {\n      type: String,\n      value: '',    // Initial finger state\n      notify: true  // Indicates that this prop is part of app state\n    }\n\n  },\n\n  // Subscribe to actions!\n  // This works identically to Reflux's \"listenables\"\n  funkListenables: MyActions,\n\n  onSmellFinger: function(whichFinger) {\n    // Setting finger here will notify\n    // state.myStore.finger across your app\n    this.finger = whichFinger;\n  }\n\n});\n\u003c/script\u003e\n```\n\n## Docs and Tests\n[API docs](http://devinivy.github.io/funk) | [View demo](http://devinivy.github.io/funk/components/funk/demo/) | [Run tests](http://devinivy.github.io/funk/components/funk/test/)\n\n### Locally\nThe relative paths used in this project assume that `funk` will be included alongside its dependencies using bower.  So, to test this repo and view documentation, a small amount of massaging must be done.  Also, HTML imports require CORS support, so we must use a simple web server to view the tests and API-level documentation.\n```bash\nbower install\nln -s .. bower_components/funk\npython -m SimpleHTTPServer 8000\n# Now navigate to, for example,\n# http://localhost:8000/bower_components/funk/\n```\n\n#### Documentation\nTo view the API-level documentation for the Polymer behaviors, follow the process above then navigate to **http://localhost:8000/bower_components/funk/**.\n\n#### Tests\nTests are placed inside the `test` folder and can be accessed at **http://localhost:8000/bower_components/funk/test/**.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevinivy%2Ffunk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevinivy%2Ffunk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevinivy%2Ffunk/lists"}