diff --git a/package-lock.json b/package-lock.json index 8d03263..1ea45e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,15 @@ { "name": "phx-live-state", - "version": "0.11.0", + "version": "0.11.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "phx-live-state", - "version": "0.11.0", + "version": "0.11.2", "license": "MIT", "dependencies": { - "json-joy": "^1.18.1", + "json-joy": ">= 11.0", "lit": "^2.2.6", "phoenix": "1.6.15", "reflect-metadata": "^0.1.13", @@ -80,6 +80,11 @@ "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.2.tgz", "integrity": "sha512-VMOxsWh/QDwrxPsgkSQnuZ+8mfNy1OTjzzUdLBvvZtpahwPTHTeVZ51RZRqO4xfKVrR+btIPA8D01IL3xeG66w==" }, + "node_modules/@multiformats/base-x": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@multiformats/base-x/-/base-x-4.0.1.tgz", + "integrity": "sha512-eMk0b9ReBbV23xXU693TAIrLyeO5iTgBZGSJfpqriG8UkYvr/hC9u9pyMlAakDNHWmbhMZCDs6KQO0jzKD8OTw==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1621,6 +1626,7 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", + "optional": true, "peer": true }, "node_modules/fast-glob": { @@ -2252,14 +2258,17 @@ "dev": true }, "node_modules/json-joy": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/json-joy/-/json-joy-1.19.0.tgz", - "integrity": "sha512-oILIyxHJu52hQ9BFs1yFMXVKrP2cTYOdljRiNRElHzpcSnA03sSf+VKzwqEE2hGKKL1Zvml71b1wPTAQUl8CHQ==", + "version": "11.38.1", + "resolved": "https://registry.npmjs.org/json-joy/-/json-joy-11.38.1.tgz", + "integrity": "sha512-SFlx1RKLznLXNHLLcuXpstPPnt/6Sa0tZeQM0cwL03tHJic0sSv/oE5yNswfXW8NQ80bBRncl46eQhWMMIr9QA==", "dependencies": { "arg": "^5.0.2", - "hyperdyperid": "^1.2.0" + "hyperdyperid": "^1.2.0", + "multibase": "^4.0.6", + "thingies": "^1.18.0" }, "bin": { + "jj": "bin/jj.js", "json-pack": "bin/json-pack.js", "json-pack-test": "bin/json-pack-test.js", "json-patch": "bin/json-patch.js", @@ -2271,10 +2280,21 @@ "engines": { "node": ">=10.0" }, + "funding": { + "url": "https://github.com/sponsors/streamich" + }, "peerDependencies": { "quill-delta": "^5", "rxjs": "7", "tslib": "2" + }, + "peerDependenciesMeta": { + "quill-delta": { + "optional": true + }, + "rxjs": { + "optional": true + } } }, "node_modules/jsonc-parser": { @@ -2479,6 +2499,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==", + "optional": true, "peer": true }, "node_modules/lodash.get": { @@ -2491,6 +2512,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", + "optional": true, "peer": true }, "node_modules/log-update": { @@ -2687,6 +2709,19 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "node_modules/multibase": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/multibase/-/multibase-4.0.6.tgz", + "integrity": "sha512-x23pDe5+svdLz/k5JPGCVdfn7Q5mZVMBETiC+ORfO+sor9Sgs0smJzAjfTbM5tckeCqnaUuMYoz+k3RXMmJClQ==", + "deprecated": "This module has been superseded by the multiformats module", + "dependencies": { + "@multiformats/base-x": "^4.0.1" + }, + "engines": { + "node": ">=12.0.0", + "npm": ">=6.0.0" + } + }, "node_modules/nanocolors": { "version": "0.2.13", "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.13.tgz", @@ -3213,6 +3248,7 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz", "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==", + "optional": true, "peer": true, "dependencies": { "fast-diff": "^1.3.0", @@ -3449,6 +3485,7 @@ "version": "7.8.1", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", + "optional": true, "peer": true, "dependencies": { "tslib": "^2.1.0" @@ -3817,6 +3854,17 @@ "integrity": "sha512-KU3SA3TjRRM932jpNfD3u4Ec3bSvedyo5ITPI7zgWYnKep7BwQQaxlhI9qbO+lKJoRnoAbEVfMcAHRuKVYikDA==", "dev": true }, + "node_modules/thingies": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.19.1.tgz", + "integrity": "sha512-ByrDDOohyy4AyyIEx1x/a3w0fSjH7ghH7ngjiR/UbdEFiRiq9FPI7NlaxIur1X1d44H4KnSWVwdQQwWro/5SHg==", + "engines": { + "node": ">=10.18" + }, + "peerDependencies": { + "tslib": "^2" + } + }, "node_modules/through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -4219,6 +4267,11 @@ "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.2.tgz", "integrity": "sha512-VMOxsWh/QDwrxPsgkSQnuZ+8mfNy1OTjzzUdLBvvZtpahwPTHTeVZ51RZRqO4xfKVrR+btIPA8D01IL3xeG66w==" }, + "@multiformats/base-x": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@multiformats/base-x/-/base-x-4.0.1.tgz", + "integrity": "sha512-eMk0b9ReBbV23xXU693TAIrLyeO5iTgBZGSJfpqriG8UkYvr/hC9u9pyMlAakDNHWmbhMZCDs6KQO0jzKD8OTw==" + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -5486,6 +5539,7 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", + "optional": true, "peer": true }, "fast-glob": { @@ -5941,12 +5995,14 @@ "dev": true }, "json-joy": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/json-joy/-/json-joy-1.19.0.tgz", - "integrity": "sha512-oILIyxHJu52hQ9BFs1yFMXVKrP2cTYOdljRiNRElHzpcSnA03sSf+VKzwqEE2hGKKL1Zvml71b1wPTAQUl8CHQ==", + "version": "11.38.1", + "resolved": "https://registry.npmjs.org/json-joy/-/json-joy-11.38.1.tgz", + "integrity": "sha512-SFlx1RKLznLXNHLLcuXpstPPnt/6Sa0tZeQM0cwL03tHJic0sSv/oE5yNswfXW8NQ80bBRncl46eQhWMMIr9QA==", "requires": { "arg": "^5.0.2", - "hyperdyperid": "^1.2.0" + "hyperdyperid": "^1.2.0", + "multibase": "^4.0.6", + "thingies": "^1.18.0" } }, "jsonc-parser": { @@ -6137,6 +6193,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==", + "optional": true, "peer": true }, "lodash.get": { @@ -6149,6 +6206,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", + "optional": true, "peer": true }, "log-update": { @@ -6293,6 +6351,14 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "multibase": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/multibase/-/multibase-4.0.6.tgz", + "integrity": "sha512-x23pDe5+svdLz/k5JPGCVdfn7Q5mZVMBETiC+ORfO+sor9Sgs0smJzAjfTbM5tckeCqnaUuMYoz+k3RXMmJClQ==", + "requires": { + "@multiformats/base-x": "^4.0.1" + } + }, "nanocolors": { "version": "0.2.13", "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.13.tgz", @@ -6683,6 +6749,7 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz", "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==", + "optional": true, "peer": true, "requires": { "fast-diff": "^1.3.0", @@ -6854,6 +6921,7 @@ "version": "7.8.1", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", + "optional": true, "peer": true, "requires": { "tslib": "^2.1.0" @@ -7135,6 +7203,12 @@ "integrity": "sha512-KU3SA3TjRRM932jpNfD3u4Ec3bSvedyo5ITPI7zgWYnKep7BwQQaxlhI9qbO+lKJoRnoAbEVfMcAHRuKVYikDA==", "dev": true }, + "thingies": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.19.1.tgz", + "integrity": "sha512-ByrDDOohyy4AyyIEx1x/a3w0fSjH7ghH7ngjiR/UbdEFiRiq9FPI7NlaxIur1X1d44H4KnSWVwdQQwWro/5SHg==", + "requires": {} + }, "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", diff --git a/package.json b/package.json index 2e1ebba..a8a6a2e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "phx-live-state", - "version": "0.11.2", + "version": "0.12.0", "description": "Front end library for live_state", "main": "build/src/index.js", "module": "build/src/index.js", @@ -35,7 +35,7 @@ "typescript": "^4.2.2" }, "dependencies": { - "json-joy": "^1.18.1", + "json-joy": ">= 11.0", "lit": "^2.2.6", "phoenix": "1.6.15", "reflect-metadata": "^0.1.13", diff --git a/src/connectElement.ts b/src/connectElement.ts index de1eb2e..d712a2b 100644 --- a/src/connectElement.ts +++ b/src/connectElement.ts @@ -1,8 +1,8 @@ -import LiveState from "./LiveState"; -import liveState from "./liveStateDecorator"; +import LiveState, {LiveStateConfig} from "./LiveState"; +import liveState, { liveStateConfig } from "./liveStateDecorator"; import subscript from 'subscript'; -export type ConnectOptions = { +export type ConnectOptions = LiveStateConfig & { properties?: Array; attributes?: Array; events?: { @@ -19,17 +19,30 @@ export type ConnectOptions = { * - connect properties and attributes * - call `sendEvent` and `receiveEvent` for each specified event */ -export const connectElement = (liveState: LiveState, el: HTMLElement, { properties, attributes, events }: ConnectOptions) => { - if (el['liveState'] !== liveState) { - liveState.connect(); - connectProperties(liveState, el, properties); - attributes?.forEach((attr) => connectAtttribute(liveState, el, attr)); - events?.send?.forEach((eventName) => sendEvent(liveState, el, eventName)); - events?.receive?.forEach((eventName) => receiveEvent(liveState, el, eventName)); - el['liveState'] = liveState; +export const connectElement = (liveStateOrEl: LiveState | HTMLElement, elOrOptions: HTMLElement | ConnectOptions, options?: ConnectOptions) => { + if (liveStateOrEl instanceof LiveState) { + const liveState = liveStateOrEl as LiveState; + const el = elOrOptions as HTMLElement; + if (el['liveState'] !== liveState) { + doConnect(el, liveState, options); + } + } else { + const liveState = new LiveState(elOrOptions as ConnectOptions); + doConnect(liveStateOrEl as HTMLElement, liveState, elOrOptions as ConnectOptions); } } +const doConnect = (el: HTMLElement, liveState: LiveState, options: ConnectOptions) => { + const { properties, attributes, events } = options; + liveState.connect(); + connectProperties(liveState, el, properties); + attributes?.forEach((attr) => connectAtttribute(liveState, el, attr)); + events?.send?.forEach((eventName) => sendEvent(liveState, el, eventName)); + events?.receive?.forEach((eventName) => receiveEvent(liveState, el, eventName)); + el['liveState'] = liveState; + +} + const connectProperties = (liveState, el, properties) => { let mergedProperties = properties || []; mergedProperties = el._liveStateProperties ? mergedProperties.concat(el._liveStateProperties) : mergedProperties; diff --git a/test/connect-element-test.ts b/test/connect-element-test.ts index 5037102..540d786 100644 --- a/test/connect-element-test.ts +++ b/test/connect-element-test.ts @@ -47,6 +47,17 @@ describe('connectElement', () => { socketMock.expects('connect').exactly(1); }); + it('creates livestate instance with arity 2 version', async() => { + const el: TestElement = await fixture(''); + connectElement(el, { + url: 'ws://foo.bar', + topic: 'howdy', + properties: ['bar'], + attributes: ['foo'] + }); + expect(el['liveState']).to.be.instanceOf(LiveState); + }); + it('updates on state changes', async () => { const el: TestElement = await fixture(''); connectElement(liveState, el, {