backpage - npm Package Compare versions

Comparing version 0.0.1-22 to 0.0.1-23

bld/backpage/action.d.ts

@@ -1,3 +0,3 @@
-export type ActionCallback = (data: object) => Promise<void> | void;
+export type ActionCallback<T extends object = object> = (data: T) => Promise<void> | void;
 export declare const ACTION_ROUTE_PATTERN = "/action/:actionName";
 export declare function RELATIVE_ACTION_PATH(name: string): string;

bld/backpage/backpage.d.ts

@@ -28,3 +28,3 @@ import type { ReactNode } from 'react';
     notify(notification: TunnelNotification | string, options?: BackPageNotifyOptions): void;
-    registerAction(name: string, action: ActionCallback): () => void;
+    registerAction<T extends object>(name: string, action: ActionCallback<T>): () => void;
     private updateHTML;
@@ -31,0 +31,0 @@ }

bld/backpage/components/form.d.ts

 import type { FormHTMLAttributes, ReactElement } from 'react';
 import type { ActionCallback } from '../action.js';
-export type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, 'method' | 'action' | 'target'> & {
-    action: ActionCallback;
+export type FormProps<T extends object> = Omit<FormHTMLAttributes<HTMLFormElement>, 'method' | 'action' | 'target'> & {
+    action: ActionCallback<T>;
 };
-export declare function Form({ action, ...props }: FormProps): ReactElement;
+export declare function Form<T extends object>({ action, ...props }: FormProps<T>): ReactElement;

bld/backpage/tunnels/cloud-tunnel.js

@@ -40,3 +40,3 @@ import { WebSocket } from 'ws';
         endpoint = endpoint.replace(/\/$/, '');
-        const url = `${endpoint}/${token}/${encodeURIComponent(name)}`;
+        const url = `${endpoint}/${token}/${encodeURIComponent(name)}/`;
         const urlObject = new URL(url);
@@ -51,3 +51,3 @@ switch (urlObject.protocol) {
         this.url = url;
-        this.wsURL = `${url.replace(/^http/, 'ws')}/back`;
+        this.wsURL = `${url.replace(/^http/, 'ws')}back`;
         this.connect();
@@ -54,0 +54,0 @@ }

bld/backpage/tunnels/frontpage-tunnel.js

@@ -45,4 +45,4 @@ import { createServer } from 'http';
             server.listen(port, host, () => {
-                const address = server.address();
-                resolve(getURL(address));
+                const { address, port } = server.address();
+                resolve(`http://${address}:${port}`);
             });
@@ -73,5 +73,2 @@ });
 }
-function getURL({ address, port }) {
-    return `http://${address}:${port}`;
-}
 //# sourceMappingURL=frontpage-tunnel.js.map

bld/frontpage/main.js

@@ -5,9 +5,3 @@ import morphdom from 'morphdom';
 // Using string replace also handles the case of HTTPS.
-const WS_URL = location.href.replace(/^http/, 'ws');
-const baseURI = document.baseURI;
-if (!baseURI.endsWith('/')) {
-    const base = document.createElement('base');
-    base.href = `${baseURI}/`;
-    document.head.append(base);
-}
+const WS_URL = `${location.protocol.replace(/^http/, 'ws')}//${location.host}${location.pathname}`;
 const INITIAL_CONNECT_DELAY = 1000;
@@ -14,0 +8,0 @@ const RECONNECT_INTERVAL = 1000;

package.json

 {
   "name": "backpage",
-  "version": "0.0.1-22",
+  "version": "0.0.1-23",
   "description": "Naive static HTML streaming based on React for Node.js CLI applications.",
@@ -5,0 +5,0 @@ "repository": "https://github.com/vilicvane/backpage.git",

README.md

@@ -6,7 +6,7 @@ [![NPM version](https://img.shields.io/npm/v/backpage?color=%23cb3837&style=flat-square)](https://www.npmjs.com/package/backpage)
 
-# BackPage
+# BackPage <!-- omit in toc -->
 
 Naive static HTML streaming based on React for Node.js CLI applications.
 
-## How does it work?
+## How does it work? <!-- omit in toc -->
 
@@ -17,3 +17,3 @@ BackPage renders your React application to HTML and streams updates (**static** HTML snapshots) to your browser.
 
-## Features
+## Features <!-- omit in toc -->
 
@@ -25,2 +25,17 @@ - Stream static HTML from React rendering.
 
+## Table of Contents <!-- omit in toc -->
+
+- [Installation](#installation)
+- [Basic Usage](#basic-usage)
+- [Form-based Interaction](#form-based-interaction)
+- [Browser Notification](#browser-notification)
+- [Public URL](#public-url)
+- [Examples](#examples)
+- [Built-in Components](#built-in-components)
+  - [Form](#form)
+  - [ActionButton](#actionbutton)
+  - [Title](#title)
+  - [Style](#style)
+  - [Console](#console)
+
 ## Installation
@@ -48,5 +63,2 @@
 page.guide();
-
-// Send notification to browser (if connected).
-page.notify('Hello BackPage!');
 ```
@@ -75,34 +87,30 @@
 
-## Public URL
+## Form-based Interaction
 
-By specifying a UUID as token, you can get a public URL from [backpage.cloud](https://backpage.cloud):
+See [Form](#form) and [ActionButton](#actionbutton) for simpler usage.
 
+## Browser Notification
+
+To send notification to the browser using `page.notify()`:
+
 ```ts
-import {BackPage, getPersistentToken} from 'backpage';
+page.notify('Hello BackPage!');
 
-const page = new BackPage({
-  // You can also use any random UUID for temporary page.
-  token: getPersistentToken(),
-  // Different pages can be setup using the same token with different names.
-  name: 'project-name',
+page.notify({
+  title: 'Hello BackPage!',
+  body: 'This is a notification from BackPage.',
 });
-
-page.guide();
 ```
 
-> **Note:** [backpage.cloud](https://backpage.cloud) may introduce payments for significant network traffic to cover the expense in the future.
+You can also setup a fallback for notifications not getting **clicked** within the timeout:
 
-## Notify Fallback
-
-You can get notified if no browser is connected or the notification is not **clicked** within the timeout.
-
 ```ts
 const page = new BackPage({
   notify: {
-    timeout: 30_000,
+    // timeout: 30_000,
     fallback: notification => {
       // Handle the notification manually.
 
-      // You can also return a webhook URL or request options to initiate an
-      // HTTP request.
+      // Optionally return a webhook URL or request options to initiate an HTTP
+      // request.
       return 'https://some.webhook/';
@@ -113,8 +121,34 @@ },
 
-page.notify('Hello BackPage!');
+page.notify({
+  title: 'Hello BackPage!',
+  body: 'Click me or your webhook will get fired!',
+});
 ```
 
+## Public URL
+
+By specifying a UUID as token, you can get a public URL from [backpage.cloud](https://backpage.cloud):
+
+```ts
+import {BackPage, getPersistentToken} from 'backpage';
+
+const page = new BackPage({
+  // You can also use any random UUID for temporary page.
+  token: getPersistentToken(),
+  // Different pages can be setup using the same token with different names.
+  // name: 'project-name',
+});
+
+page.guide();
+```
+
+> **Note:** [backpage.cloud](https://backpage.cloud) may introduce payments for significant network traffic to cover the expense in the future.
+
+## Examples
+
+Check out [src/examples](./src/examples).
+
 ## Built-in Components
 
-### `<Form />`
+### Form
 
@@ -132,5 +166,5 @@ Submit a form from the browser to trigger an action:
 
-### `<ActionButton />`
+### ActionButton
 
-It wraps a button within a `<Form />` for simpler usage:
+It wraps a button within a `Form` for simpler usage:
 
@@ -141,3 +175,3 @@ ```tsx
 
-### `<Title />`
+### Title
 
@@ -155,5 +189,5 @@ Setting the title of the page.
 
-### `<Style />`
+### Style
 
-Add a `<style />` tag to the page with content loaded from `src`.
+Add a `style` tag to the page with content loaded from `src`.
 
@@ -169,3 +203,3 @@ ```tsx
 
-### `<Console />`
+### Console
 
@@ -183,4 +217,4 @@ Intercepts console outputs using [patch-console](https://www.npmjs.com/package/patch-console).
 
-## License
+## License <!-- omit in toc -->
 
 MIT License.

src/backpage/action.ts

@@ -1,2 +0,4 @@
-export type ActionCallback = (data: object) => Promise<void> | void;
+export type ActionCallback<T extends object = object> = (
+  data: T,
+) => Promise<void> | void;
 
@@ -3,0 +5,0 @@ export const ACTION_ROUTE_PATTERN = '/action/:actionName';

src/backpage/tunnels/cloud-tunnel.ts

@@ -37,3 +37,3 @@ import {WebSocket} from 'ws';
 
-    const url = `${endpoint}/${token}/${encodeURIComponent(name)}`;
+    const url = `${endpoint}/${token}/${encodeURIComponent(name)}/`;
 
@@ -51,3 +51,3 @@ const urlObject = new URL(url);
     this.url = url;
-    this.wsURL = `${url.replace(/^http/, 'ws')}/back`;
+    this.wsURL = `${url.replace(/^http/, 'ws')}back`;
 
@@ -54,0 +54,0 @@ this.connect();

src/backpage/tunnels/frontpage-tunnel.ts

@@ -66,4 +66,4 @@ import type {Server} from 'http';
       server.listen(port, host, () => {
-        const address = server.address() as AddressInfo;
-        resolve(getURL(address));
+        const {address, port} = server.address() as AddressInfo;
+        resolve(`http://${address}:${port}`);
       });
@@ -102,5 +102,1 @@ });
 }
-
-function getURL({address, port}: AddressInfo): string {
-  return `http://${address}:${port}`;
-}

src/frontpage/main.ts

@@ -14,14 +14,4 @@ import morphdom from 'morphdom';
 // Using string replace also handles the case of HTTPS.
-const WS_URL = location.href.replace(/^http/, 'ws');
+const WS_URL = `${location.protocol.replace(/^http/, 'ws')}//${location.host}${location.pathname}`;
 
-const baseURI = document.baseURI;
-
-if (!baseURI.endsWith('/')) {
-  const base = document.createElement('base');
-
-  base.href = `${baseURI}/`;
-
-  document.head.append(base);
-}
-
 const INITIAL_CONNECT_DELAY = 1000;
@@ -28,0 +18,0 @@

No alert changes

Improved metrics

Total package byte prevSize

201840

increased by0.13%

Number of lines in readme file

210

increased by19.32%

Worsened metrics

Lines of code

4118

decreased by-0.36%

No dependency changes