{"id":18429427,"url":"https://github.com/bigpipe/plugin-xhr","last_synced_at":"2025-04-13T21:44:28.431Z","repository":{"id":26158004,"uuid":"29603338","full_name":"bigpipe/plugin-xhr","owner":"bigpipe","description":"Client side BigPipe plugin to enable xhr","archived":false,"fork":false,"pushed_at":"2020-05-23T12:02:30.000Z","size":34,"stargazers_count":0,"open_issues_count":4,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-19T00:07:06.820Z","etag":null,"topics":[],"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/bigpipe.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":"2015-01-21T17:59:16.000Z","updated_at":"2020-07-30T12:27:30.000Z","dependencies_parsed_at":"2022-08-01T06:18:35.236Z","dependency_job_id":null,"html_url":"https://github.com/bigpipe/plugin-xhr","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigpipe%2Fplugin-xhr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigpipe%2Fplugin-xhr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigpipe%2Fplugin-xhr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigpipe%2Fplugin-xhr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigpipe","download_url":"https://codeload.github.com/bigpipe/plugin-xhr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248788868,"owners_count":21161726,"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":[],"created_at":"2024-11-06T05:17:10.893Z","updated_at":"2025-04-13T21:44:28.404Z","avatar_url":"https://github.com/bigpipe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BigPipe - Plugin XHR\n\n[![Version npm][version]](http://browsenpm.org/package/bigpipe-xhr)[![Build Status][build]](https://travis-ci.org/bigpipe/plugin-xhr)[![Dependencies][david]](https://david-dm.org/bigpipe/plugin-xhr)[![Coverage Status][cover]](https://coveralls.io/r/bigpipe/plugin-xhr?branch=master)\n\n[version]: http://img.shields.io/npm/v/bigpipe-xhr.svg?style=flat-square\n[build]: http://img.shields.io/travis/bigpipe/plugin-xhr/master.svg?style=flat-square\n[david]: https://img.shields.io/david/bigpipe/plugin-xhr.svg?style=flat-square\n[cover]: http://img.shields.io/coveralls/bigpipe/plugin-xhr/master.svg?style=flat-square\n\n[Bigpipe] plugin that will add XHR proxy methods to each pagelet. Allows for\nasynchronous rendering of the page, by only re-rendering the affected pagelet\nand its children.\n\n### Installation\n\nThe XHR plugin is released to npm and can be installed using:\n\n```bash\nnpm install --save bigpipe-xhr\n```\n\n### Usage\n\nTo use the plugin from BigPipe, simply add it after BigPipe is initialized or\nadd it to options#plugins. `bigpipe.use` will execute the plugin logic. Make sure\nthe plugin name is unique, e.g. `xhr` by default.\n\n```js\nvar xhr = require('bigpipe-xhr')\n  , Pipe = require('bigpipe');\n\nvar pipe = new Pipe(http.createServer(), {\n  pages: __dirname + '/pages',\n  public: __dirname + '/public',\n  plugins: [ xhr ]\n}).listen(8080);\n```\n\n## Server API\n\nThe plugin adds the following method to the server.\n\n#### Pagelet.plain()\n\nProxy method that will set the response header `plain` to `true`. This will\nimmediatly write data to the response and close the connection. The header\nensures the client side template is not re-rendered. Instead, data is directly\nprovided to the client side callback. Usage of this method is only required\nif you want to prevent client side rendering, use [pagelet.end][end] otherwise.\n\n```js\nrequire('pagelet').extend({\n  post: function post(fields, files) {\n    this.plain({\n      name: 'some title',\n      desc: 'custom description'\n    });\n  }\n});\n```\n\n### Client API\n\nThe examples assume a browser environment and that the plugin is used\nwith the [BigPipe] framework. The callback will receive an error if the\nresponse returned an error or if the `statusCode \u003e= 400`.\n\nIf the written content is a `string` the pagelet content will be replaced\nwith the `body`. If the written content is JSON of type `object` the\nclient-side template is re-rendered with that data.\n**Rendering is only done if `response.headers.plain` is not `true`**.\n\n#### Pagelet.xhr.get()\n\nExecute a GET request to the provided `uri`. The content written to the response\nwill be used for rendering, see the [introduction].\n\n```js\npipe.on('search:render', function render(pagelet) {\n  document.getElementById('status').addEventListener('click', function get() {\n    pagelet.xhr.get(\n      '/status/102383',                           // uri\n      function (error, response, body)            // callback\n    });\n  });\n});\n```\n\n#### Pagelet.xhr.post()\n\nExecute a POST request to the provided `uri` with optional JSON data. The\ncontent written to the response will be used for rendering, see the\n[introduction].\n\n```js\npipe.on('search:render', function render(pagelet) {\n  document.getElementById('form').addEventListener('submit', function submit() {\n    pagelet.xhr.post(\n      '/search',                                  // uri\n      { query: 'input in form' },                 // JSON data\n      function (error, response, body)            // callback\n    });\n  });\n});\n```\n\n#### Pagelet.xhr.put()\n\nExecute a PUT request to the provided `uri` with optional JSON data. The\ncontent written to the response will be used for rendering, see the\n[introduction].\n\n```js\npipe.on('search:render', function render(pagelet) {\n  document.getElementById('update').addEventListener('click', function update() {\n    pagelet.xhr.put(\n      '/user/update',                             // uri\n      { username: 'peter' },                      // JSON data\n      function (error, response, body)            // callback\n    });\n  });\n});\n```\n\n#### Pagelet.xhr.delete()\n\nExecute a DELETE request to the provided `uri`. The content written to the response\nwill be used for rendering, see the [introduction].\n\n```js\npipe.on('search:render', function render(pagelet) {\n  document.getElementById('delete').addEventListener('click', function delete() {\n    pagelet.xhr.delete(\n      '/user/102383',                             // uri\n      function (error, response, body)            // callback\n    });\n  });\n});\n```\n\n### Tests\n\n```bash\nnpm run test\nnpm run coverage\n```\n\n### License\n\nBigpipe-xhr is released under MIT.\n\n[Bigpipe]: http://bigpipe.io\n[end]: http://bigpipe.io/#pageletend\n[introduction]: #client-api\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigpipe%2Fplugin-xhr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigpipe%2Fplugin-xhr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigpipe%2Fplugin-xhr/lists"}