{"id":18802457,"url":"https://github.com/conveyal/woonerf","last_synced_at":"2025-04-13T18:10:47.100Z","repository":{"id":57103899,"uuid":"72402354","full_name":"conveyal/woonerf","owner":"conveyal","description":"React/Redux bootstrapping and common libs for Conveyal","archived":false,"fork":false,"pushed_at":"2019-12-28T18:00:01.000Z","size":1080,"stargazers_count":3,"open_issues_count":2,"forks_count":2,"subscribers_count":7,"default_branch":"dev","last_synced_at":"2025-03-27T08:58:18.529Z","etag":null,"topics":["bootstrap","react","redux"],"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/conveyal.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-10-31T04:56:50.000Z","updated_at":"2019-12-30T17:12:05.000Z","dependencies_parsed_at":"2022-08-20T21:10:14.138Z","dependency_job_id":null,"html_url":"https://github.com/conveyal/woonerf","commit_stats":null,"previous_names":["conveyal/reboot"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conveyal%2Fwoonerf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conveyal%2Fwoonerf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conveyal%2Fwoonerf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conveyal%2Fwoonerf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/conveyal","download_url":"https://codeload.github.com/conveyal/woonerf/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248373291,"owners_count":21093157,"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":["bootstrap","react","redux"],"created_at":"2024-11-07T22:28:22.022Z","updated_at":"2025-04-13T18:10:47.078Z","avatar_url":"https://github.com/conveyal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# woonerf\n\n[![NPM version][npm-image]][npm-url]\n[![Build status][travis-image]][travis-url]\n\n\u003e React/Redux bootstrapping and common libs for Conveyal.\n\nModern JavaScript applications take a lot of bootstrapping. This library helps with some common libs to include and use on the client to help.\n\n## Table of Contents\n\n* [Pronunciation](#pronuncation)\n* [Usage](#usage)\n* [API](#api)\n  * [Auth0](#auth0)\n  * [fetch](#fetch)\n  * [fetchMultiple](#fetchmultiple)\n  * [html](#html)\n  * [message](#message)\n* [Install](#install)\n* [See Also](#see-also)\n* [License](#license)\n\n## Pronunciation\n\n\"Woonerf\" is a Dutch word for a small neighborhood street where vehicles must move very slowly. The kind of road you can imagine allowing kids to play in. Although it's fun to pronounce it as \"woo nerf\", the break is after the n (woon == living, erf == yard). A good transliteration for an American English speaker would be \"Vone Airf\".\n\n## Usage\n\nLet's create a Redux application:\n\n```js\nconst mount = require('@conveyal/woonerf/mount')\n\nconst Application = require('./containers/application')\nconst reducers = require('./reducers')\n\nmount({\n  app: Application,\n  id: 'root',\n  reducers\n})\n```\n\nThis will create a redux store with the `fetch`, `history`, `logger`, `multi`, and `promise` middleware applied, wrap your application with a redux provider, initialize the browser history, and mount your component to `#id`. The component passed as `app` will be passed `history` from [react-router-redux](https://github.com/reactjs/react-router-redux) and the initialized redux `store` as props.\n\n## API\n\n### auth0\n\n#### Login Component\n\nCreate a simple login component with custom [Auth0-lock options](https://auth0.com/docs/libraries/lock/v10/customization).\n\n```js\nimport Auth0 from '@conveyal/woonerf/components/auth0-lock'\n\nexport default function Login () {\n  const lockOptions = {}\n  return (\n    \u003cAuth0\n      lockOptions={lockOptions}\n      /\u003e\n  )\n}\n```\n\n#### Authentication helpers\n\n##### refreshUser\n\nRefresh a user.  To be used within a redux connected component.  Will send update actions to a redux store based on response from Auth0.\n\n```js\nimport {refreshUser} from '@conveyal/woonerf/auth0'\n\n...\n\nfunction mapDispatchToProps (dispatch) {\n  return {\n    refreshUserToken: () =\u003e refreshUser(dispatch)\n  }\n}\n\n...\n```\n\n### fetch\n\n`fetch({url, options, next, retry, type, id})`\n\nCreate a fetch action to be dispatched by the store. Key features:\n\n* Automatically `JSON.stringify` bodies that are objects and automatically `JSON.parse` responses that are `application/json`.\n* `next` is a function that's result will be dispatched by the store. It can be an `async` function.\n* `retry` is a function that receives the response and needs to resolve to a Boolean. It can be an `async` function.\n* `Authorization`, `Content-Type` and `Accept` headers are added automatically (if you want to make a request\n   without one of these headers, for instance suppressing the Authorization header when calling a\n   remote service, simply set it to null in the `headers` field of `options`).\n* `type` is a string that can designate a category of fetches that will only run one at a time.\n* `id` can be used to later abort the specific fetch by dispatching an `abortFetch` action.\n\n#### fetch errors\n\nThe arity of `next` determines how errors are handled.\n\n1. When no `next` is present, a `fetchError` action is dispatched.\n2. When a `next` function with arity \u003c 2 is present, then on error `fetchError` is dispatched and `next` is not called.\n3. When `next` has an arity \u003e= 2 then errors are passed to `next` and `fetchError` is *not* dispatched.\n\n```js\nconst fetch = require('@conveyal/woonerf/fetch')\n\nstore.dispatch(fetch({\n  url: 'http://conveyal.com',\n  options: {\n    method: 'post',\n    body: {hello: 'world'}\n  },\n  retry: async (response) =\u003e {\n    if (response.status !== 200) {\n      await timeout(2000)\n      return true\n    } else {\n      return false\n    }\n  },\n  next: async (error, response) =\u003e {\n    return actionBasedOn(response)\n  }\n}))\n```\n\n#### abort fetch\n\nAbort a fetch by dispatching `abortFetch({type, id})`.\n\n```js\nconst fetch, {abortFetch, getID} = require('@conveyal/woonerf/fetch')\nconst id = getID()\nstore.dispatch(fetch({\n  url: 'http://conveyal.com',\n  id,\n  next: () =\u003e {\n    throw new Error('Will not be called')\n  }\n}))\nstore.dispatch(abortFetch({id}))\n```\n\n### fetchMultiple\n\n`fetchMultiple({fetches, next})`\n\nAllows you to dispatch a single action that will call next with all of the responses.\n\n```js\nconst {fetchMultiple} = require('@conveyal/woonerf/fetch')\n\nstore.dispatch(fetchMultiple({\n  fetches: [{\n    url: 'http://conveyal.com',\n    options: {\n      body: {hello: 'world'}\n    }\n  }],\n  next: async (error, responses) =\u003e {\n    return actionBasedOn(response)\n  }\n}))\n```\n\n### html\n\n`html({staticHost, title})`\n\nUsed for creating the default HTML needed to use a woonerf application.  Accepts the following parameters:\n\n* `staticHost`: (optional) The host server of the static files.  This gets prepended to an expected assets folder for the static files.  The files loaded will be: `${staticHost}assets/favicon.ico`, `${staticHost}assets/index.css` and `${staticHost}assets/index.js`.  If omitted, the host path will be an empty string.\n* `title`: The string to insert into the `title` tag.\n\n### message\n\n`message(key, defaultMessage, parameters)`\n\nPass a key, an optional default message, and an optional parameters object that will replace corresponding `%(key)`. It auto-parses `process.env.MESSAGES` brought in by [`mastarm`](https://github.com/conveyal/mastarm) and allows you to set your own messages directly with `setMessages`. Message lookup is done with [`lodash/get`](https://lodash.com/docs/#get) for nested objects.\n\n```js\nimport message, {setMessages} from '@conveyal/woonerf/message'\n\nsetMessages({one:'hello world', two:'hola %(s)', three: {four: 'wat'}})\n\nmessage('key.doesnt.exist', 'default message') // 'default message'\nmessage('one', 'default message') // 'hello world'\nmessage('three.four', 'default message') // 'wat'\nmessage('fake.key', 'hello %(world)s', {world: 'bob'}) // 'hello bob'\nmessage('two', 'hello %(s)', {s: 'bob'}) // 'hola bob'\nmessage('fake.key', 'hello %(a) %(b)', {a: 'bob', b: 'tim'}) // 'hello bob tim'\n```\n\n## Install\n\nWith [yarn](https://yarnpkg.com/) installed, run\n\n```sh\n$ yarn add @conveyal/woonerf\n```\n\n## See Also\n\n- [conveyal/mastarm](https://github.com/conveyal/mastarm)\n- [facebook/react](https://github.com/facebook/react)\n- [reactjs/redux](https://github.com/reactjs/redux)\n- [woonerf](https://en.wikipedia.org/wiki/Woonerf)\n\n## License\n\nMIT\n\n[npm-image]: https://img.shields.io/npm/v/@conveyal/woonerf.svg?maxAge=2592000\u0026style=flat-square\n[npm-url]: https://www.npmjs.com/package/@conveyal/woonerf\n[travis-image]: https://img.shields.io/travis/conveyal/woonerf.svg?style=flat-square\n[travis-url]: https://travis-ci.org/conveyal/woonerf\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconveyal%2Fwoonerf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconveyal%2Fwoonerf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconveyal%2Fwoonerf/lists"}