{"_id":"@amokrushin/webpack-hot-client","_rev":"1-68d075ef897dbdf64f80235c6d9b097b","name":"@amokrushin/webpack-hot-client","dist-tags":{"latest":"3.1.0"},"versions":{"3.1.0":{"name":"@amokrushin/webpack-hot-client","version":"3.1.0","description":"A client for enabling, and interacting with, webpack Hot Module Replacement","license":"MIT","repository":{"type":"git","url":"git+https://github.com/webpack-contrib/webpack-hot-client.git"},"author":{"name":"Andrew Powell","email":"andrew@shellscape.org"},"homepage":"http://github.com/webpack-contrib/webpack-hot-client","main":"index.js","engines":{"node":">=6"},"scripts":{"beautify":"npm run lint -- --fix","ci":"npm run lint && npm run test","cover":"nyc report --reporter=text-lcov > coverage.lcov && codecov --token=$WHC_CODECOV_TOKEN","compile:client":"babel lib/client --out-dir client","lint":"eslint index.js lib test","mocha":"mocha test/test.js --full-trace --exit","prepublishOnly":"npm run compile:client","test":"npm run compile:client && nyc npm run mocha"},"files":["client/","index.js","lib/HotClientError.js","lib/util.js","LICENSE","README.md"],"peerDependencies":{"webpack":"^4.0.0"},"dependencies":{"json-stringify-safe":"^5.0.1","loglevelnext":"^1.0.2","strip-ansi":"^4.0.0","uuid":"^3.1.0","webpack-log":"^1.1.1","ws":"^4.0.0"},"devDependencies":{"@babel/cli":"^7.0.0-beta.37","@babel/core":"^7.0.0-beta.37","@babel/polyfill":"^7.0.0-beta.37","@babel/preset-env":"^7.0.0-beta.37","@babel/register":"^7.0.0-beta.37","ansi-regex":"^3.0.0","babel-loader":"^8.0.0-beta.0","codecov":"^3.0.0","eslint":"^4.6.1","eslint-config-webpack":"^1.2.5","eslint-plugin-import":"^2.8.0","expect":"^22.4.3","loud-rejection":"^1.6.0","memory-fs":"^0.4.1","mocha":"^5.0.0","nyc":"^11.4.1","time-fix-plugin":"^2.0.0","touch":"^3.1.0","webpack":"^4.0.1"},"publishConfig":{"access":"public"},"gitHead":"95ef246d79aa556c5a5fb26a4cc85f45797c8833","bugs":{"url":"https://github.com/webpack-contrib/webpack-hot-client/issues"},"_id":"@amokrushin/webpack-hot-client@3.1.0","_npmVersion":"6.1.0","_nodeVersion":"10.4.1","_npmUser":{"name":"amokrushin","email":"anton@mokr.org"},"dist":{"integrity":"sha512-HVYsrM0ldPldB2KhGpvJ0bWftnjzeoJVKqk2nscE/6ohjWJTVSDZaRlhJstAh6YuESJr5TJxaTzx3xGHudIJ1g==","shasum":"6ff03943ce8a16315853ff1d4e9f9ce4e9629a07","tarball":"https://registry.npmjs.org/@amokrushin/webpack-hot-client/-/webpack-hot-client-3.1.0.tgz","fileCount":11,"unpackedSize":34083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbKnEbCRA9TVsSAnZWagAA9gAP/AnIRTPDOqn4Tj+QfOPB\nQSWQSvpQ3NkMxk+1ub0y4RFLiHsON7iPibpUh/VmkdvRHD7a+5CzSFkfotPV\nuWgh6rY7KeP08E2BMdeSCIC4Ar3yztj9aQlkzHhdsrbAEF4C2N6/pv4LZTvI\nimCEOUsPIeEIezYjFYiu5gSE3zq4o31vzQoQj7KodnkyLE6l83wYsZoRk9Yo\n6Sm9wkJw8Rs939BwZo0ITRwDxhYytYnHjclp4G4UrN+/iFT87sbPWvSLK0Yb\noBLelbq12P61uh5syU9yUdeo/PW1w7J0Pfphzdpumy8zrh6u6UTEvPU/gEqJ\n1qOZXN1dLxWIVu7RLmsrltmjs5ijjAz1S7LopSNDXPMkuvtXXee4ezqwo1zZ\n+7ZgAHkGJDKoe7kbdTKLD3p0shdq5DqIHtm1CXIgkqNnQgw1H7WCRgNUZ3yg\nnFDpKm83DoBupem1m6VLu2Jek3kqUNbvGnQ2kK4GrPEKHsdej4HbDrj8j6ZM\nGRH6cwZCUuQpuktC5ohkePlL0Suf4zusojqKQfV5DLyO7fivShYK96HplJCr\nT1hCXcTZPqIhddVF9MVySK+XY3r/mxdr8R7wvp27D/NdpxbF6B89+iVuyLkU\nbZgg7Rii92r7PSDpeygEJVmV24Q/NlODUFG3eGvZRB04JQmja2949iFi9BIW\nPgZw\r\n=N0jQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAmG2bknN9lw8M5e/K8AfxP30SJziddb0zT9LkzbADhQIgLxD4oFgsx/Tud9PLVIWE8ShG1oRjTahczCbRdVg7SRc="}]},"maintainers":[{"name":"amokrushin","email":"anton@mokr.org"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/webpack-hot-client_3.1.0_1529508121365_0.3745872090653608"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-20T15:22:01.087Z","3.1.0":"2018-06-20T15:22:01.438Z","modified":"2022-04-04T13:50:34.740Z"},"maintainers":[{"name":"amokrushin","email":"anton@mokr.org"}],"description":"A client for enabling, and interacting with, webpack Hot Module Replacement","homepage":"http://github.com/webpack-contrib/webpack-hot-client","repository":{"type":"git","url":"git+https://github.com/webpack-contrib/webpack-hot-client.git"},"author":{"name":"Andrew Powell","email":"andrew@shellscape.org"},"bugs":{"url":"https://github.com/webpack-contrib/webpack-hot-client/issues"},"license":"MIT","readme":"
\n \n \n \n
\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![deps][deps]][deps-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![chat][chat]][chat-url]\n\n# webpack-hot-client\n\nA client for enabling, and interacting with, webpack [Hot Module Replacement][hmr-docs].\n\nThis is intended to work in concert with [`webpack-dev-middleware`][dev-middleware]\nand allows for adding Hot Module Replacement to an existing server, without a\ndependency upon [`webpack-dev-server`][dev-server]. This comes in handy for testing\nin projects that already use server frameworks such as `Express` or `Koa`.\n\n`webpack-hot-client` accomplishes this by creating a `WebSocket` server, providing\nthe necessary client (browser) scripts that communicate via `WebSocket`s, and\nautomagically adding the necessary webpack plugins and config entries. All of\nthat allows for a seamless integration of Hot Module Support.\n\nCurious about the differences between this module and `webpack-hot-middleware`?\n[Read more here](https://github.com/webpack-contrib/webpack-hot-client/issues/18).\n\n## Getting Started\n\nTo begin, you'll need to install `webpack-hot-client`:\n\n```console\n$ npm install webpack-hot-client --save-dev\n```\n\n## Gotchas\n\nIn order to use `webpack-hot-client`, your `webpack` config should include an\n`entry` option that is set to an `Array` of `String`, or an `Object` who's keys\nare set to an `Array` of `String`. You may also use a `Function`, but that\nfunction should return a value in one of the two valid formats.\n\nThis is primarily due to restrictions in\n`webpack` itself and the way that it processes options and entries. For users of\nwebpack v4+ that go the zero-config route, you must specify an `entry` option.\n\nIt's also worth noting that `webpack-hot-client` adds `HotModuleReplacementPlugin`\nand the necessary entries to your `webpack` config for you at runtime. Including\nthe plugin in your config manually while using this module may produce unexpected\nor wonky results.\n\n### Express\n\nFor setting up the module for use with an `Express` server, try the following:\n\n```js\nconst client = require('webpack-hot-client');\nconst middleware = require('webpack-dev-middleware');\nconst webpack = require('webpack');\nconst config = require('./webpack.config');\n\nconst compiler = webpack(config);\nconst { publicPath } = config.output;\nconst options = { ... }; // webpack-hot-client options\n\n// we recommend calling the client _before_ adding the dev middleware\nclient(compiler, options);\n\napp.use(middleware(compiler, { publicPath }));\n```\n\n### Koa\n\nSince `Koa`@2.0.0 was released, the patterns and requirements for using\n`webpack-dev-middleware` have changed somewhat, due to use of `async/await` in\nKoa. As such, one potential solution is to use [`koa-webpack`][koa-webpack],\nwhich wires up the dev middleware properly for Koa, and also implements this\nmodule. If you'd like to use both modules without `koa-webpack`, you may examine\nthat module's code for implementation details.\n\n## Browser Support\n\nBecause this module leverages _native_ `WebSockets`, the browser support for this\nmodule is limited to only those browsers which support native `WebSocket`. That\ntypically means the last two major versions of a particular browser.\n\n_Note: We won't be accepting requests for changes to this facet of the module._\n\n## API\n\n### client(compiler, [options])\n\nReturns an `Object` containing:\n\n- `close()` *(Function)* - Closes the WebSocketServer started by the module.\n- `wss` *(WebSocketServer)* - A WebSocketServer instance.\n\n#### options\n\nType: `Object`\n\n##### autoConfigure\n\nType: `Boolean` \nDefault: `true`\n\nIf true, automatically configures the `entry` for the webpack compiler, and adds\nthe `HotModuleReplacementPlugin` to the compiler.\n\n##### host\n\nType: `String|Object` \nDefault: `'localhost'`\n\nSets the host that the `WebSocket` server will listen on. If this doesn't match\nthe host of the server the module is used with, the module may not function\nproperly. If the `server` option is defined, this option is ignored.\n\nIf using the module in a specialized environment, you may choose to specify an\n`object` to define `client` and `server` host separately. The `object` value\nshould match `{ client: , server: }`. Be aware that the `client`\nhost will be used _in the browser_ by `WebSockets`. You should not use this\noption in this way unless _you know what you're doing._ Using a mismatched\n`client` and `server` host will be **unsupported by the project** as the behavior\nin the browser can be unpredictable and is specific to a particular environment.\n\n##### hot\n\nType: `Boolean` \nDefault: `true`\n\nIf true, instructs the client script to attempt hot patching of modules.\n\n##### https\n\nType: `Boolean` \nDefault: `false`\n\nIf true, instructs the client script to use `wss://` as the `WebSocket` protocol.\nIf you're using a server setup with `HTTPS`, you must set this to `true` or the\nsockets cannot communicate and this module won't function properly.\n\n##### logLevel\n\nType: `String` \nDefault: `'info'`\n\nSets the minimum level of logs that will be displayed in the console. Please see\n[webpack-log/#levels][levels] for valid values.\n\n##### logTime\n\nType: `Boolean` \nDefault: `false`\n\nIf true, instructs the internal logger to prepend log output with a timestamp.\n\n##### port\n\nType: `Number` \nDefault: `8081`\n\nThe port the `WebSocket` server should listen on. It's recommended that a\n[`server`](#server) instance is passed to assure there aren't any port conflicts.\n\n##### reload\n\nType: `Boolean` \nDefault: `true`\n\nIf true, instructs the browser to physically refresh the entire page if / when\nwebpack indicates that a hot patch cannot be applied and a full refresh is needed. \n\nThis option also instructs the browser whether or not to refresh the entire page\nwhen `hot: false` is used.\n\n_Note: If both `hot` and `reload` are false, and these are permanent settings,\nit makes this module fairly useless._\n\n##### server\n\nType: `Object` \nDefault: `null`\n\nIf a server instance (eg. Express or Koa) is provided, the `WebSocket` server\nwill attempt to attach to the server instance instead of using a separate port.\n\n##### stats\n\nType: `Object` \nDefault: `{ context: process.cwd() }`\n\nAn object specifying the webpack [stats][stats] configuration. This does not\ntypically need to be modified.\n\n## Webpack Build Targets\n\nBy default, `webpack-hot-client` is meant to, and expects to function on the\n[`'web'` build target](https://webpack.js.org/configuration/target). However,\nyou can manipulate this by setting the `WHC_TARGET` environment variable. eg.\n\n```console\n$ export WHC_TARGET=electon-renderer; webpack-serve ...\n```\n\nOr by setting `process.env.WHC_TARGET` before executing the API.\n\n_Note: Changing this value is allowed but is **unsupported**._\n\n## Communicating with Client WebSockets\n\nIn some rare situations, you may have the need to communicate with the attached\n`WebSockets` in the browser. To accomplish this, open a new `WebSocket` to the\nserver, and send a `broadcast` message. eg.\n\n```js\nconst stringify = require('json-stringify-safe');\nconst { WebSocket } = require('ws');\n\nconst socket = new WebSocket('ws://localhost:8081'); // this should match the server settings\nconst data = {\n type: 'broadcast',\n data: { // the message you want to broadcast\n type: '', // the message type you want to broadcast\n data: { ... } // the message data you want to broadcast\n }\n};\n\nsocket.send(stringify(data));\n```\n\n_Note: The `data` property of the message should contain the enveloped message\nyou wish to broadcast to all other client `WebSockets`._\n\n## Contributing\n\nWe welcome your contributions! Please have a read of [CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to get involved.\n\n## License\n\n#### [MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/webpack-hot-client.svg\n[npm-url]: https://npmjs.com/package/webpack-hot-client\n\n[node]: https://img.shields.io/node/v/webpack-hot-client.svg\n[node-url]: https://nodejs.org\n\n[deps]: https://david-dm.org/webpack-contrib/webpack-hot-client.svg\n[deps-url]: https://david-dm.org/webpack-contrib/webpack-hot-client\n\n[tests]: \thttps://img.shields.io/circleci/project/github/webpack-contrib/webpack-hot-client.svg\n[tests-url]: https://circleci.com/gh/webpack-contrib/webpack-hot-client/tree/master\n\n[cover]: https://codecov.io/gh/webpack-contrib/webpack-hot-client/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/webpack-hot-client\n\n[chat]: https://badges.gitter.im/webpack/webpack.svg\n[chat-url]: https://gitter.im/webpack/webpack\n\n[koa-webpack]: https://github.com/shellscape/koa-webpack\n[dev-middleware]: https://github.com/webpack/webpack-dev-middleware\n[dev-server]: https://github.com/webpack/webpack-dev-server\n[hmr-docs]: https://webpack.js.org/concepts/hot-module-replacement/\n[stats]: https://webpack.js.org/configuration/stats/#stats\n[levels]: https://github.com/webpack-contrib/webpack-log#level","readmeFilename":"README.md"}