implement notification action

src/actions.ts

@@ -2,16 +2,17 @@ import { TurboStreamActions } from "@hotwired/turbo"
 
 import * as Attributes from "./actions/attributes"
 import * as Browser from "./actions/browser"
-import * as Document from "./actions/document"
-import * as DOM from "./actions/dom"
 import * as Debug from "./actions/debug"
 import * as Deprecated from "./actions/deprecated"
+import * as Document from "./actions/document"
+import * as DOM from "./actions/dom"
 import * as Events from "./actions/events"
 import * as Form from "./actions/form"
 import * as History from "./actions/history"
+import * as Notification from "./actions/notification"
 import * as Storage from "./actions/storage"
-import * as TurboFrame from "./actions/turbo_frame"
 import * as Turbo from "./actions/turbo"
+import * as TurboFrame from "./actions/turbo_frame"
 
 export * from "./actions/attributes"
 export * from "./actions/browser"
@@ -22,9 +23,10 @@ export * from "./actions/dom"
 export * from "./actions/events"
 export * from "./actions/form"
 export * from "./actions/history"
+export * from "./actions/notification"
 export * from "./actions/storage"
-export * from "./actions/turbo_frame"
 export * from "./actions/turbo"
+export * from "./actions/turbo_frame"
 
 export function register(streamActions: TurboStreamActions) {
   Attributes.registerAttributesActions(streamActions)
@@ -36,7 +38,8 @@ export function register(streamActions: TurboStreamActions) {
   Events.registerEventsActions(streamActions)
   Form.registerFormActions(streamActions)
   History.registerHistoryActions(streamActions)
+  Notification.registerNotificationActions(streamActions)
   Storage.registerStorageActions(streamActions)
-  TurboFrame.registerTurboFrameActions(streamActions)
   Turbo.registerTurboActions(streamActions)
+  TurboFrame.registerTurboFrameActions(streamActions)
 }

src/actions/notification.ts

@@ -0,0 +1,48 @@
+import { StreamElement, TurboStreamActions } from "@hotwired/turbo"
+import { camelize, typecast } from "../utils"
+
+const PERMITTED_ATTRIBUTES = [
+  "dir",
+  "lang",
+  "badge",
+  "body",
+  "tag",
+  "icon",
+  "image",
+  "data",
+  "vibrate",
+  "renotify",
+  "require-interaction",
+  "actions",
+  "silent",
+]
+
+const createNotification = (streamElement: StreamElement) => {
+  const title = streamElement.getAttribute("title") || ""
+
+  const attributes = Array.from(streamElement.attributes)
+    .filter((attribute) => PERMITTED_ATTRIBUTES.includes(attribute.name))
+    .map((attribute) => [camelize(attribute.name), typecast(attribute.value)])
+
+  const options = Object.fromEntries(attributes)
+
+  new Notification(title, options)
+}
+
+export function notification(this: StreamElement) {
+  if (!window.Notification) {
+    alert("This browser does not support desktop notification")
+  } else if (Notification.permission === "granted") {
+    createNotification(this)
+  } else if (Notification.permission !== "denied") {
+    Notification.requestPermission().then((permission) => {
+      if (permission === "granted") {
+        createNotification(this)
+      }
+    })
+  }
+}
+
+export function registerNotificationActions(streamActions: TurboStreamActions) {
+  streamActions.notification = notification
+}

test/notifications/create_notification.test.js

@@ -0,0 +1,120 @@
+import sinon from "sinon"
+import { assert } from "@open-wc/testing"
+import { executeStream, registerAction } from "../test_helpers"
+
+registerAction("notification")
+
+describe("notification", () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  context("Notification is not supported", () => {
+    it("alerts with a message", async () => {
+      const stub = sinon.stub(window, "Notification").value(undefined)
+      const mock = sinon
+        .mock(window)
+        .expects("alert")
+        .once()
+        .withArgs("This browser does not support desktop notification")
+
+      await executeStream(`<turbo-stream action="notification"></turbo-stream>`)
+      assert.equal(stub.callCount, 0)
+      mock.verify()
+    })
+  })
+
+  context("requestPermission is required", () => {
+    it("permission is granted", async () => {
+      const stub = sinon.stub(window, "Notification")
+      sinon.stub(Notification, "permission").value("default")
+      sinon.stub(Notification, "requestPermission").resolves("granted")
+
+      await executeStream(`<turbo-stream action="notification"></turbo-stream>`)
+
+      assert.equal(stub.callCount, 1)
+    })
+
+    it("permission is denied", async () => {
+      const stub = sinon.stub(window, "Notification")
+      sinon.stub(Notification, "permission").value("default")
+      sinon.stub(Notification, "requestPermission").resolves("denied")
+
+      await executeStream(`<turbo-stream action="notification" ></turbo-stream>`)
+
+      assert.equal(stub.callCount, 0)
+    })
+  })
+
+  context("permission was denied", () => {
+    it("creates no notification", async () => {
+      const stub = sinon.stub(window, "Notification")
+      sinon.stub(Notification, "permission").value("denied")
+
+      await executeStream(`<turbo-stream action="notification" ></turbo-stream>`)
+
+      assert.equal(stub.callCount, 0)
+    })
+  })
+
+  context("permission was granted", () => {
+    it("creates the notification with title only", async () => {
+      const stub = sinon.stub(window, "Notification")
+      sinon.stub(Notification, "permission").value("granted")
+
+      await executeStream(
+        `<turbo-stream
+          action="notification"
+          title="May I have your attention..."
+          ></turbo-stream>`
+      )
+
+      assert.equal(stub.callCount, 1)
+      assert.equal(stub.firstCall.firstArg, "May I have your attention...")
+      assert.equal(stub.firstCall.secondArg, null)
+    })
+
+    it("creates the notification with title and options", async () => {
+      const stub = sinon.stub(window, "Notification")
+      sinon.stub(Notification, "permission").value("granted")
+
+      await executeStream(
+        `<turbo-stream
+          action="notification"
+          title="May I have your attention..."
+          dir="ltr"
+          lang="EN"
+          badge="https://example.com/badge.png"
+          body="This is displayed below the title."
+          tag="Demo"
+          icon="https://example.com/icon.png"
+          image="https://example.com/image.png"
+          data='{"arbitrary": "data"}'
+          vibrate="[200, 100, 200]"
+          renotify="true"
+          require-interaction="true"
+          actions='[{"action": "respond", "title": "Please respond", "icon": "https://example.com/icon.png"}]'
+          silent="true"
+          ></turbo-stream>`
+      )
+
+      assert.equal(stub.callCount, 1)
+      assert.equal(stub.firstCall.firstArg, "May I have your attention...")
+      assert.deepEqual(stub.firstCall.args[1], {
+        dir: "ltr",
+        lang: "EN",
+        badge: "https://example.com/badge.png",
+        body: "This is displayed below the title.",
+        tag: "Demo",
+        icon: "https://example.com/icon.png",
+        image: "https://example.com/image.png",
+        data: { arbitrary: "data" },
+        vibrate: [200, 100, 200],
+        renotify: true,
+        requireInteraction: true,
+        actions: [{ action: "respond", title: "Please respond", icon: "https://example.com/icon.png" }],
+        silent: true,
+      })
+    })
+  })
+})

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "es2015", "scripthost"],
+    "lib": ["dom", "es2019", "scripthost"],
     "module": "es2015",
     "moduleResolution": "node",
     "noUnusedLocals": true,