diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..b185203 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +registry = https://registry.npmjs.org diff --git a/README.md b/README.md index 3ce9817..23570b0 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# < use-stomp > +# < react-use-stomp > react providers, decorators, and hooks for handling websockets using the stomp protocol. @@ -14,17 +14,17 @@ The list is based on the notifications received from the websocket channel and n - queueing/dismissal management - cross tab/window syncing of notifications -Automatic reconnection is built into the [webSocketWorkerInstance](./src/webSocketWorkerInstance.ts). You can control -the max number of attempts and interval for reconnecting. +Automatic reconnection is built into the [webSocketWorkerInstance](./src/webSocketWorkerInstance.ts). You can control +the max number of attempts and interval for reconnecting. -Additionally, all [ < SnackProvider > ](https://iamhosseindhv.com/notistack/api#snackbarprovider) props are accepted and +Additionally, all [ < SnackProvider > ](https://iamhosseindhv.com/notistack/api#snackbarprovider) props are accepted and passed to the SnackProvider component. For more info, please see the typescript definition for the provider for the full list of props. ```typescript jsx import React, {useState} from 'react'; -import {UseStompNotificationsProvider} from 'use-stomp'; +import {UseStompNotificationsProvider} from 'react-use-stomp'; const App = () => { @@ -48,6 +48,16 @@ const App = () => { } ``` +\* Make sure install dependencies in your project, or add in package.json + +``` +"peerDependencies": { + "react": "^16.8.0", + "react-dom": "^16.8.0", + "@material-ui/core": "^4.0.0" + }, +``` + \* Make sure your public/dist folder contains the [webSocketWorkerInstance.js](./webSocketWorkerInstance.js) AND the [webSocketWorkerInstance.js.map](./webSocketWorkerInstance.js.map) files: @@ -65,7 +75,7 @@ Please see the typescript definition for the provider; it has notes regarding al ```typescript jsx import React, {useState} from 'react'; -import {UseStompProvider} from 'use-stomp'; +import {UseStompProvider} from 'react-use-stomp'; const App = () => { @@ -100,7 +110,7 @@ Two additional/optional options are available: ```typescript jsx import React from 'react'; -import {useStompNotifications} from 'use-stomp'; +import {useStompNotifications} from 'react-use-stomp'; export default () => { @@ -164,7 +174,7 @@ export default () => { ```typescript jsx import React from 'react'; -import {useStomp} from 'use-stomp'; +import {useStomp} from 'react-use-stomp'; export default () => { @@ -207,7 +217,7 @@ If you need direct access to the context, use this hook. ```typescript jsx import React from 'react'; -import {useStompCtx} from 'use-stomp'; +import {useStompCtx} from 'react-use-stomp'; export default () => { @@ -225,7 +235,7 @@ The decorator allows you to use the useStomp hook with legacy class-based compon ```typescript jsx import React from 'react'; -import {withUseStomp} from 'use-stomp'; +import {withUseStomp} from 'react-use-stomp'; @withUseStomp('/message/channel') class ExampleDecorator extends React.Component { @@ -262,7 +272,7 @@ This decorator provides decorates your component with the props provided by `use ```typescript jsx import React from 'react'; -import {withUseStompNotifications} from 'use-stomp'; +import {withUseStompNotifications} from 'react-use-stomp'; @withUseStompNotifications('/message/channel',{ action: (dismiss) => ( diff --git a/package-lock.json b/package-lock.json index a10860c..0704531 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "use-stomp", - "version": "1.1.1", + "name": "react-use-stomp", + "version": "3.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 6d49abf..bbaeb57 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "use-stomp", - "version": "1.1.1", + "name": "react-use-stomp", + "version": "3.0.0", "description": "react provider, class decorator, and a hook for websockets using the stomp protocol", "main": "cjs/index.js", "module": "esm/index.js", @@ -21,7 +21,7 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/mentierd/use-stomp.git" + "url": "git+https://github.com/wxsolo/react-use-stomp.git" }, "keywords": [ "react", @@ -32,12 +32,15 @@ "stomp", "stompjs" ], - "author": "dayne mentier", + "author": [ + "dayne mentier", + "wxsolo" + ], "license": "ISC", "bugs": { - "url": "https://github.com/mentierd/use-stomp/issues" + "url": "https://github.com/wxsolo/react-use-stomp/issues" }, - "homepage": "https://github.com/mentierd/use-stomp#readme", + "homepage": "https://github.com/wxsolo/react-use-stomp#readme", "dependencies": { "core-js": "~3.8.0", "notistack": "~1.0.2", @@ -71,7 +74,6 @@ "babel-plugin-styled-components": "~1.11.1", "husky": "~4.2.5", "import-sort-style-module": "6.0.0", - "notistack": "^1.0.2", "prettier": "^2.1.2", "prettier-plugin-import-sort": "0.0.6", "raw.macro": "0.4.2", diff --git a/src/useStompNotificationsProvider.tsx b/src/useStompNotificationsProvider.tsx index d181970..e6e4cdc 100644 --- a/src/useStompNotificationsProvider.tsx +++ b/src/useStompNotificationsProvider.tsx @@ -11,6 +11,10 @@ export type UseStompNotificationsProviderProps = SnackbarProviderProps & { * url to connect to stomp protocol */ url: string; + /** + * children React.ReactNode | React.ReactNode[] + */ + children: React.ReactNode | React.ReactNode[]; /** * request auth header will be passed to the server or agent through the STOMP connection frame */ diff --git a/src/useStompProvider.tsx b/src/useStompProvider.tsx index cff57ae..fa77105 100644 --- a/src/useStompProvider.tsx +++ b/src/useStompProvider.tsx @@ -10,6 +10,10 @@ export type UseStompProviderProps = { * HTTP to connect */ url: string; + /** + * children React.ReactNode | React.ReactNode[] + */ + children: React.ReactNode | React.ReactNode[]; /** * Add console logs for debugging */ @@ -26,6 +30,10 @@ export type UseStompProviderProps = { * The request header will be passed to the server or agent through the STOMP connection frame */ headers?: Record; + /** + * The request header that will be passed when subscribing to the target + */ + subscribeHeaders?: Record; /** * override default parsing of messages */ @@ -34,10 +42,6 @@ export type UseStompProviderProps = { * override default packaging of messages */ packageMessage?(channel: string, msg: any, optHeaders: any): any; - /** - * The request header that will be passed when subscribing to the target - */ - subscribeHeaders?: Record; }; export default React.memo((props) => { diff --git a/webSocketWorkerInstance.js b/webSocketWorkerInstance.js index c6e1586..663c83f 100644 --- a/webSocketWorkerInstance.js +++ b/webSocketWorkerInstance.js @@ -13960,10 +13960,10 @@ module.exports = __webpack_require__(/*! ../package.json */ "./node_modules/webs /*!*********************************************!*\ !*** ./node_modules/websocket/package.json ***! \*********************************************/ -/*! exports provided: _from, _id, _inBundle, _integrity, _location, _phantomChildren, _requested, _requiredBy, _resolved, _shasum, _spec, _where, author, browser, bugs, bundleDependencies, config, contributors, dependencies, deprecated, description, devDependencies, directories, engines, homepage, keywords, license, main, name, repository, scripts, version, default */ +/*! exports provided: _args, _from, _id, _inBundle, _integrity, _location, _phantomChildren, _requested, _requiredBy, _resolved, _spec, _where, author, browser, bugs, config, contributors, dependencies, description, devDependencies, directories, engines, homepage, keywords, license, main, name, repository, scripts, version, default */ /***/ (function(module) { -module.exports = JSON.parse("{\"_from\":\"websocket@^1.0.32\",\"_id\":\"websocket@1.0.32\",\"_inBundle\":false,\"_integrity\":\"sha512-i4yhcllSP4wrpoPMU2N0TQ/q0O94LRG/eUQjEAamRltjQ1oT1PFFKOG4i877OlJgCG8rw6LrrowJp+TYCEWF7Q==\",\"_location\":\"/websocket\",\"_phantomChildren\":{},\"_requested\":{\"type\":\"range\",\"registry\":true,\"raw\":\"websocket@^1.0.32\",\"name\":\"websocket\",\"escapedName\":\"websocket\",\"rawSpec\":\"^1.0.32\",\"saveSpec\":null,\"fetchSpec\":\"^1.0.32\"},\"_requiredBy\":[\"/\"],\"_resolved\":\"https://registry.npmjs.org/websocket/-/websocket-1.0.32.tgz\",\"_shasum\":\"1f16ddab3a21a2d929dec1687ab21cfdc6d3dbb1\",\"_spec\":\"websocket@^1.0.32\",\"_where\":\"/Users/dayne/Sites/use-stomp\",\"author\":{\"name\":\"Brian McKelvey\",\"email\":\"theturtle32@gmail.com\",\"url\":\"https://github.com/theturtle32\"},\"browser\":\"lib/browser.js\",\"bugs\":{\"url\":\"https://github.com/theturtle32/WebSocket-Node/issues\"},\"bundleDependencies\":false,\"config\":{\"verbose\":false},\"contributors\":[{\"name\":\"Iñaki Baz Castillo\",\"email\":\"ibc@aliax.net\",\"url\":\"http://dev.sipdoc.net\"}],\"dependencies\":{\"bufferutil\":\"^4.0.1\",\"debug\":\"^2.2.0\",\"es5-ext\":\"^0.10.50\",\"typedarray-to-buffer\":\"^3.1.5\",\"utf-8-validate\":\"^5.0.2\",\"yaeti\":\"^0.0.6\"},\"deprecated\":false,\"description\":\"Websocket Client & Server Library implementing the WebSocket protocol as specified in RFC 6455.\",\"devDependencies\":{\"buffer-equal\":\"^1.0.0\",\"gulp\":\"^4.0.2\",\"gulp-jshint\":\"^2.0.4\",\"jshint\":\"^2.0.0\",\"jshint-stylish\":\"^2.2.1\",\"tape\":\"^4.9.1\"},\"directories\":{\"lib\":\"./lib\"},\"engines\":{\"node\":\">=4.0.0\"},\"homepage\":\"https://github.com/theturtle32/WebSocket-Node\",\"keywords\":[\"websocket\",\"websockets\",\"socket\",\"networking\",\"comet\",\"push\",\"RFC-6455\",\"realtime\",\"server\",\"client\"],\"license\":\"Apache-2.0\",\"main\":\"index\",\"name\":\"websocket\",\"repository\":{\"type\":\"git\",\"url\":\"git+https://github.com/theturtle32/WebSocket-Node.git\"},\"scripts\":{\"gulp\":\"gulp\",\"test\":\"tape test/unit/*.js\"},\"version\":\"1.0.32\"}"); +module.exports = JSON.parse("{\"_args\":[[\"websocket@1.0.32\",\"/Users/xing.wu/workspace/opensource/use-stomp\"]],\"_from\":\"websocket@1.0.32\",\"_id\":\"websocket@1.0.32\",\"_inBundle\":false,\"_integrity\":\"sha512-i4yhcllSP4wrpoPMU2N0TQ/q0O94LRG/eUQjEAamRltjQ1oT1PFFKOG4i877OlJgCG8rw6LrrowJp+TYCEWF7Q==\",\"_location\":\"/websocket\",\"_phantomChildren\":{},\"_requested\":{\"type\":\"version\",\"registry\":true,\"raw\":\"websocket@1.0.32\",\"name\":\"websocket\",\"escapedName\":\"websocket\",\"rawSpec\":\"1.0.32\",\"saveSpec\":null,\"fetchSpec\":\"1.0.32\"},\"_requiredBy\":[\"/\",\"/use-stomp\"],\"_resolved\":\"https://registry.npmjs.org/websocket/-/websocket-1.0.32.tgz\",\"_spec\":\"1.0.32\",\"_where\":\"/Users/xing.wu/workspace/opensource/use-stomp\",\"author\":{\"name\":\"Brian McKelvey\",\"email\":\"theturtle32@gmail.com\",\"url\":\"https://github.com/theturtle32\"},\"browser\":\"lib/browser.js\",\"bugs\":{\"url\":\"https://github.com/theturtle32/WebSocket-Node/issues\"},\"config\":{\"verbose\":false},\"contributors\":[{\"name\":\"Iñaki Baz Castillo\",\"email\":\"ibc@aliax.net\",\"url\":\"http://dev.sipdoc.net\"}],\"dependencies\":{\"bufferutil\":\"^4.0.1\",\"debug\":\"^2.2.0\",\"es5-ext\":\"^0.10.50\",\"typedarray-to-buffer\":\"^3.1.5\",\"utf-8-validate\":\"^5.0.2\",\"yaeti\":\"^0.0.6\"},\"description\":\"Websocket Client & Server Library implementing the WebSocket protocol as specified in RFC 6455.\",\"devDependencies\":{\"buffer-equal\":\"^1.0.0\",\"gulp\":\"^4.0.2\",\"gulp-jshint\":\"^2.0.4\",\"jshint\":\"^2.0.0\",\"jshint-stylish\":\"^2.2.1\",\"tape\":\"^4.9.1\"},\"directories\":{\"lib\":\"./lib\"},\"engines\":{\"node\":\">=4.0.0\"},\"homepage\":\"https://github.com/theturtle32/WebSocket-Node\",\"keywords\":[\"websocket\",\"websockets\",\"socket\",\"networking\",\"comet\",\"push\",\"RFC-6455\",\"realtime\",\"server\",\"client\"],\"license\":\"Apache-2.0\",\"main\":\"index\",\"name\":\"websocket\",\"repository\":{\"type\":\"git\",\"url\":\"git+https://github.com/theturtle32/WebSocket-Node.git\"},\"scripts\":{\"gulp\":\"gulp\",\"test\":\"tape test/unit/*.js\"},\"version\":\"1.0.32\"}"); /***/ }), @@ -15128,7 +15128,7 @@ _self.addEventListener('connect', function (e) { /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { -module.exports = __webpack_require__(/*! /Users/dayne/Sites/use-stomp/src/webSocketWorkerInstance.ts */"./src/webSocketWorkerInstance.ts"); +module.exports = __webpack_require__(/*! /Users/xing.wu/workspace/opensource/use-stomp/src/webSocketWorkerInstance.ts */"./src/webSocketWorkerInstance.ts"); /***/ })