improve connectElement to take livestate confit options

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",

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<LiveStateProperty>;
   attributes?: Array<string>;
   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;

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('<test-element></test-element>');
+    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('<test-element></test-element>');
     connectElement(liveState, el, {