@uscreentv/turbo-train - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

package.json

 {
   "name": "@uscreentv/turbo-train",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "turbo-train.js",

turbo-train.js

 import { Turbo } from "@hotwired/turbo-rails"
 
+
 export default class TurboTrain extends HTMLElement {
   static get observedAttributes() {
-    return [ 'href' ];
+    return [ 'href' ]
   }
 
+  error = null
+
+  #eventSource = null
+
   constructor() {
-    super();
+    super()
   }
 
   connectedCallback() {
-    this.eventSource = new EventSource(this.href);
-    Turbo.connectStreamSource(this.eventSource);
+    this.init()
   }
 
+  // Public API - client can trigger initialization manually
+  init = () => {
+    this.#eventSource = new EventSource(this.href)
+    this.#eventSource.addEventListener('message', this.#onMessage)
+    this.#eventSource.addEventListener('error', this.#onError)
+    this.#eventSource.addEventListener('open', this.#onOpen)
+
+    if (this.shouldConnectTurboStream) {
+      Turbo.connectStreamSource(this.#eventSource)
+    }
+  }
+
   disconnectedCallback() {
-    Turbo.disconnectStreamSource(this.eventSource);
+    this.destroy()
   }
 
+  // Public API - client can trigger destruction manually
+  destroy = () => {
+    this.#eventSource?.close()
+    if (this.shouldConnectTurboStream) {
+      Turbo.disconnectStreamSource(this.#eventSource)
+    }
+    this.#eventSource?.removeEventListener('message', this.#onMessage)
+    this.#eventSource?.removeEventListener('error', this.#onError)
+    this.#eventSource?.removeEventListener('open', this.#onOpen)
+  }
+
   get href() {
-    return this.getAttribute('href');
+    return this.getAttribute('href')
   }
+
+  // By default component should always connect to turbo stream
+  // Only in case when we want to listen for event with JS we don't need to connect to turbo stream
+  get shouldConnectTurboStream() {
+    return !this.hasAttribute('no-turbo-stream')
+  }
+
+  // Humanize event source ready state
+  get state() {
+    if (!this.#eventSource) return null
+
+    switch (this.#eventSource.readyState) {
+      case EventSource.CONNECTING:
+        return 'connecting'
+      case EventSource.OPEN:
+        return 'open'
+      case EventSource.CLOSED:
+        return 'closed'
+    }
+  }
+
+  #onMessage = (event) => {
+    this.error = null
+    try {
+      const data = JSON.parse(event.data)
+      this.#emit('message', { detail: data, contentType: 'application/json' })
+    } catch (error) {
+      this.#emit('message', { detail: event.data, contentType: 'text/plain' })
+    }
+  }
+
+  #onError = (error) => {
+    this.error = error
+    this.#emit('error', { detail: error })
+  }
+
+  #onOpen = (event) => {
+    this.#emit('open', { detail: event })
+  }
+
+  #emit = (name, options = {}) => {
+    const event = new CustomEvent(name, {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: {},
+      ...options
+    })
+    this.dispatchEvent(event)
+    return event
+  }
 }
@@ -25,0 +103,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3849

increased by112.42%

Lines of code

92

increased by240.74%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes