backpage - npm Package Compare versions

Comparing version 0.0.1-10 to 0.0.1-11

bld/backpage/backpage.js

@@ -0,1 +1,3 @@
+import { createRequire } from 'module';
+import Chalk from 'chalk';
 import React from 'react';
@@ -6,2 +8,4 @@ import { createRoot } from 'react-dom/client';
 import { FrontPageTunnel } from './tunnels/index.js';
+const require = createRequire(import.meta.url);
+const { version, description } = require('../../package.json');
 const NOTIFY_TIMEOUT_DEFAULT = 30000;
@@ -82,3 +86,10 @@ export class BackPage {
         const url = await this.getURL();
-        console.info(url);
+        console.info(`\
+
+  ${Chalk.bold('BackPage')} ${Chalk.dim(`v${version}`)}
+
+  ${Chalk.dim(description)}
+
+  🌏 Open ${Chalk.cyan(url)} to visit this page.
+`);
     }
@@ -85,0 +96,0 @@ render(node) {

bld/frontpage/main.js

@@ -7,3 +7,6 @@ import DiffMatchPatch from 'diff-match-patch';
 const dmp = new DiffMatchPatch();
-let html;
+let pendingNotifications = 0;
+let latestTitle = document.title;
+let latestHTML;
+document.addEventListener('visibilitychange', () => updateTitle());
 connect();
@@ -32,13 +35,14 @@ function connect() {
     function update({ title, content }) {
-        if (document.title !== title) {
-            document.title = title;
+        if (title !== undefined) {
+            latestTitle = title;
+            updateTitle();
         }
         if (typeof content === 'string') {
-            html = content;
-            document.body.innerHTML = html;
+            latestHTML = content;
+            document.body.innerHTML = latestHTML;
         }
-        else if (html !== undefined) {
-            [html] = dmp.patch_apply(content, html);
+        else if (latestHTML !== undefined) {
+            [latestHTML] = dmp.patch_apply(content, latestHTML);
             const body = document.createElement('body');
-            body.innerHTML = html;
+            body.innerHTML = latestHTML;
             morphdom(document.body, body, {
@@ -61,2 +65,4 @@ getNodeKey: node => {
     async function notify({ id, title, body, }) {
+        pendingNotifications++;
+        updateTitle();
         switch (Notification.permission) {
@@ -92,2 +98,13 @@ case 'granted':
 }
+function updateTitle() {
+    if (document.visibilityState === 'visible') {
+        pendingNotifications = 0;
+    }
+    const title = pendingNotifications > 0
+        ? `(${pendingNotifications}) ${latestTitle}`
+        : latestTitle;
+    if (document.title !== title) {
+        document.title = title;
+    }
+}
 //# sourceMappingURL=main.js.map

package.json

 {
   "name": "backpage",
-  "version": "0.0.1-10",
+  "version": "0.0.1-11",
+  "description": "Naive static HTML streaming based on React for Node.js CLI applications.",
   "repository": "https://github.com/vilicvane/backpage.git",
@@ -37,2 +38,3 @@ "license": "MIT",
     "ansi-to-html": "^0.7.2",
+    "chalk": "^5.3.0",
     "diff-match-patch": "^1.0.5",
@@ -39,0 +41,0 @@ "express": "^4.18.2",

src/frontpage/main.ts

@@ -18,4 +18,10 @@ import DiffMatchPatch from 'diff-match-patch';
 
-let html: string | undefined;
+let pendingNotifications = 0;
 
+let latestTitle = document.title;
+
+let latestHTML: string | undefined;
+
+document.addEventListener('visibilitychange', () => updateTitle());
+
 connect();
@@ -50,16 +56,18 @@
   function update({title, content}: BackFrontUpdateMessage): void {
-    if (document.title !== title) {
-      document.title = title;
+    if (title !== undefined) {
+      latestTitle = title;
+
+      updateTitle();
     }
 
     if (typeof content === 'string') {
-      html = content;
+      latestHTML = content;
 
-      document.body.innerHTML = html;
-    } else if (html !== undefined) {
-      [html] = dmp.patch_apply(content, html);
+      document.body.innerHTML = latestHTML;
+    } else if (latestHTML !== undefined) {
+      [latestHTML] = dmp.patch_apply(content, latestHTML);
 
       const body = document.createElement('body');
 
-      body.innerHTML = html;
+      body.innerHTML = latestHTML;
 
@@ -85,2 +93,6 @@ morphdom(document.body, body, {
   }: BackFrontNotifyMessage): Promise<void> {
+    pendingNotifications++;
+
+    updateTitle();
+
     switch (Notification.permission) {
@@ -120,1 +132,16 @@ case 'granted':
 }
+
+function updateTitle(): void {
+  if (document.visibilityState === 'visible') {
+    pendingNotifications = 0;
+  }
+
+  const title =
+    pendingNotifications > 0
+      ? `(${pendingNotifications}) ${latestTitle}`
+      : latestTitle;
+
+  if (document.title !== title) {
+    document.title = title;
+  }
+}

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

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

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

Improved metrics

Total package byte prevSize

189909

increased by1.75%

Lines of code

4361

increased by1.58%

Worsened metrics

Dependency count

23

increased by4.55%

Number of low supply chain risk alerts

3

increased by50%

Dependency changes

• + Addedchalk@^5.3.0

• + Addedchalk@5.3.0(transitive)