@caboodle-tech/node-simple-server 4.2.7 → 4.3.0

package/README.md

@@ -83,8 +83,11 @@ const serverOptions = {
 // Get a new instance of NSS.
 const Server = new NodeSimpleServer(serverOptions);
 
-// A bare minimum callback to handle most development changes.
-function watcherCallback(event, path, statsOrDetails) {
+/**
+ * A bare minimum callback to handle most development changes. You register only for
+ * the events you need; unhandled events (e.g. unlink/unlinkDir if not listed) are ignored.
+ */
+const watcherCallback = (event, path, statsOrDetails) => {
     const extension = statsOrDetails.ext;
     if (extension === 'css') {
         Server.reloadAllStyles();
@@ -102,7 +105,11 @@ function watcherCallback(event, path, statsOrDetails) {
     if (event === 'change') {
         Server.reloadSinglePage(path);
     }
-}
+    // When a file or directory is removed, reload so the browser does not show stale content.
+    if (event === 'unlink' || event === 'unlinkDir') {
+        Server.reloadAllPages();
+    }
+};
 
 /**
  * A bare minimum callback to handle all websocket messages from the frontend. By
@@ -111,15 +118,12 @@ function watcherCallback(event, path, statsOrDetails) {
  * 
  * NSS_WS.send([string|int|bool|object]) // Pathname lookup will be used.
  */
-function websocketCallback(messageObject, pageId) {
-    // Interpret and do what you need to with the message:
-    const datatype = messageObject.type
+const websocketCallback = (messageObject, pageId) => {
+    const datatype = messageObject.type;
     const data = messageObject.data;
-    console.log(`Received ${datatype} data from page ${pageId}: ${data}`)
-
-    // Respond to the page that sent the message if you like:
-    Server.message(pageId, 'Messaged received!');
-}
+    console.log(`Received ${datatype} data from page ${pageId}: ${data}`);
+    Server.message(pageId, 'Message received!');
+};
 Server.addWebsocketCallback('.*', websocketCallback);
 
 /**
@@ -129,21 +133,21 @@ Server.addWebsocketCallback('.*', websocketCallback);
  * 
  * NSS_WS.send([string|int|bool|object], [route string]) // Route lookup will be used.
  */
-function websocketCallback(messageObject, pageId) {
-    // Interpret and do what you need to with the message:
-    const datatype = messageObject.type
+const websocketCallbackRoute = (messageObject, pageId) => {
+    const datatype = messageObject.type;
     const data = messageObject.data;
-    console.log(`Route received ${datatype} data from page ${pageId}: ${data}`)
-
-    // Respond to the page that sent the message if you like:
-    Server.message(pageId, 'Route specific messaged received!');
-}
-Server.addWebsocketCallback('api/search', websocketCallback);
+    console.log(`Route received ${datatype} data from page ${pageId}: ${data}`);
+    Server.message(pageId, 'Route specific message received!');
+};
+Server.addWebsocketCallback('api/search', websocketCallbackRoute);
 
-// A bare minimum watcher options object; use for development, omit for production.
+/**
+ * Watcher options: the events you register are your intent. Only registered events
+ * are handled; others (e.g. unlink, unlinkDir) are ignored unless you add them.
+ */
 const watcherOptions = {
     events: {
-        all: watcherCallback, // Just send everything to a single function.
+        all: watcherCallback,
     },
 };
 
@@ -154,7 +158,7 @@ Server.start();
 Server.watch(websiteRoot, watcherOptions);
 ```
 
-The `options` object **required** by the `watch` method must include an `events` property with at least one watched event. The demo code above used `all` to capture any event. This object takes a lot of settings and is explained below in the **Watch Options** table.
+The `options` object **required** by the `watch` method must include an `events` property with at least one watched event. The demo code above used `all` to capture any event. You express intent by which events you register: only those are handled; others are ignored. If your app has a build step (e.g. source → output), register for `unlink` and `unlinkDir` in `events` to react when files or directories are removed (e.g. to keep your output in sync). This object takes a lot of settings and is explained below in the **Watch Options** table.
 
 NSS uses `process.cwd()` as the live servers root if omitted and is pre-configured with several additional default settings. You can change these by providing your own `options` object when instantiating the server. How this looks in code is shown below, the following table **Server Options** explains all available options.
 
@@ -210,7 +214,7 @@ const Server = new NodeSimpleServer(options);
 
 #### **events**
 
--   Set to an object that can have any combination of these properties: `all`, `add`, `addDir`, `change`, `unlink`, `unlinkDir`, `ready`, `raw`, `error`. Any property set on `events` should point to a callback function that will handle that event.
+-   Set to an object that can have any combination of these properties: `all`, `add`, `addDir`, `change`, `unlink`, `unlinkDir`, `ready`, `raw`, `error`. Any property set on `events` should point to a callback function that will handle that event. Only the events you register are handled; others are ignored. Use `unlink` and `unlinkDir` when you need to react to file or directory deletion (e.g. to sync your build output or trigger a reload).
 
 #### **persistent**    default: true
 

package/bin/nss.js

@@ -43,7 +43,7 @@ class NodeSimpleServer {
         map: {}
     };
 
-    #VERSION = '4.2.7';
+    #VERSION = '4.2.8';
 
     #watching = [];
 
@@ -130,9 +130,11 @@ class NodeSimpleServer {
      * @return {Array} An array of loop back ip addresses and LAN addresses to this server.
      */
     getAddresses(port) {
-        // Use provided port, or fall back to portInUse (actual port server is using),
-        // or finally to the configured port
-        // Check for undefined/null specifically to allow 0 if explicitly provided (though unlikely)
+        /*
+         * Use provided port, or fall back to portInUse (actual port server is using),
+         * or finally to the configured port. Check for undefined/null specifically to
+         * allow 0 if explicitly provided (though unlikely).
+         */
         const actualPort = port !== undefined && port !== null ? port : this.#OPS.portInUse || this.#OPS.port;
         const locals = this.#getLocalAddresses();
         const addresses = [
@@ -495,8 +497,8 @@ class NodeSimpleServer {
             pattern = this.makeRegex(pattern);
         }
         // See if the pattern is a page id first.
-        if (this.#sockets.map[original]) {
-            this.#sockets.map[original].send('reload');
+        if (this.#sockets.map[`S${original}`]) {
+            this.#sockets.map[`S${original}`].send('reload');
             return;
         }
         // See if the pattern matches a specific URL and reload all those pages.
@@ -541,8 +543,8 @@ class NodeSimpleServer {
             pattern = this.makeRegex(pattern) || original;
         }
         // See if the pattern is a page id first.
-        if (this.#sockets.map[original]) {
-            this.#sockets.map[original].send('refreshCSS');
+        if (this.#sockets.map[`S${original}`]) {
+            this.#sockets.map[`S${original}`].send('refreshCSS');
             return;
         }
         // See if the pattern matches a specific URL and reload all those pages.
@@ -682,29 +684,40 @@ class NodeSimpleServer {
             return;
         }
 
-        // Get the file.
-        const file = Fs.readFileSync(systemPath, { encoding: 'binary' });
-
-        // Output the file to the browser.
-        resp.writeHead(HTTPStatus.ok, this.#getHeaders({
-            contentType: ContentTypes[ext] || this.#OPS.contentType,
-            file: systemPath
-        }));
+        const contentType = ContentTypes[ext] || this.#OPS.contentType;
+        const isText = contentType.startsWith('text/') ||
+            contentType === 'application/json' ||
+            contentType === 'application/ld+json' ||
+            contentType === 'application/manifest+json' ||
+            contentType === 'application/xhtml+xml';
+
+        // Read with no encoding: returns Buffer of raw bytes (Node.js fs docs). Sending that
+        // Buffer preserves the file bytes; do not use 'binary' (alias for latin1) which
+        // misinterprets UTF-8 multi-byte sequences.
+        const file = Fs.readFileSync(systemPath);
+
+        // Output the file to the browser. Only set charset for text types.
+        const headerSettings = { contentType, file: systemPath };
+        if (isText) {
+            headerSettings.charset = 'utf-8';
+        }
+        resp.writeHead(HTTPStatus.ok, this.#getHeaders(headerSettings));
 
-        // If needed inject NSS's WebSocket at the end of the page.
+        // If needed inject NSS's WebSocket at the end of the page, decode to string, modify, re-encode.
         if (this.#reload.includes(ext)) {
-            let html = file.toString();
+            const html = file.toString('utf8');
             const last = html.lastIndexOf('</body>');
+            let body;
             if (last && last > 0) {
                 const start = html.substring(0, last);
                 const end = html.substring(last);
-                html = start + this.#handlers.liveReloading + end;
-                resp.write(html, 'utf-8');
+                body = Buffer.from(start + this.#handlers.liveReloading + end, 'utf8');
             } else {
-                resp.write(file, 'binary');
+                body = Buffer.from(html, 'utf8');
             }
+            resp.write(body);
         } else {
-            resp.write(file, 'binary');
+            resp.write(file);
         }
         resp.end();
     }
@@ -879,7 +892,7 @@ class NodeSimpleServer {
             for (let i = 0; i < connections.length; i++) {
                 if (connections[i].nssUid === pageId) {
                     connections.splice(i, 1);
-                    delete this.#sockets.map[pageId];
+                    delete this.#sockets.map[`S${pageId}`];
                     break;
                 }
             }
@@ -923,9 +936,11 @@ class NodeSimpleServer {
             return;
         }
 
-        // Create the HTTP server.
+        /*
+         * Create the HTTP server. Capture connection upgrade requests so we don't
+         * break WebSocket connections.
+         */
         this.#server = Http.createServer(this.#serverListener.bind(this));
-        // Capture connection upgrade requests so we don't break WebSocket connections.
         // eslint-disable-next-line no-unused-vars
         this.#server.on('upgrade', (request, socket) => {
             /*
@@ -944,9 +959,11 @@ class NodeSimpleServer {
                 return;
             }
         });
-        // Capture server errors and respond as needed.
+        /*
+         * Capture server errors and respond as needed. The port we tried to use is
+         * taken, increment and try to start again.
+         */
         this.#server.on('error', (error) => {
-            // The port we tried to use is taken, increment and try to start again.
             if (error.code === 'EADDRINUSE') {
                 if (port) {
                     // Stop trying new ports after 100 attempts.
@@ -968,7 +985,7 @@ class NodeSimpleServer {
             Print.error(`Server Error:\n${error}`);
         });
 
-        // Attempt to start the server now.
+        /* Attempt to start the server now. */
         // eslint-disable-next-line no-param-reassign
         port = port || this.#OPS.port;
         this.#server.listen(port, () => {
@@ -1091,6 +1108,7 @@ class NodeSimpleServer {
             // Start watching the path(s).
             const watcher = Chokidar.watch(paths, options);
             this.#watching.push(watcher);
+
             // Prepare to modify some of the standard Chokidar listeners.
             const alterAddUpdates = ['add', 'addDir', 'change'];
             const alterCatchAlls = ['all', 'raw'];

package/changelogs/v4.md

@@ -1,3 +1,11 @@
+### NSS 4.2.8 (unreleased)
+
+- fix: Socket map key on close and in reloadSinglePage/reloadSingleStyles use `S${pageId}` consistently.
+- fix: Serve file bodies as raw bytes (read with no encoding); only decode/re-encode when injecting live-reload script. Fixes UTF-8 mojibake (e.g. entities, em dashes, Arabic, CJK) that occurred when using `encoding: 'binary'` (latin1).
+- fix: Example controllers no longer call printListeningAddresses() after start(); start() already prints once.
+- refactor: README and example code use const arrow functions instead of function declarations; watcher examples clarify intent via events (e.g. unlink/unlinkDir).
+- docs: Example www-website includes character-test.html demo (entities, emojis, RTL/LTR, UTF-8).
+
 ### NSS 4.2.7 (5 January 2026)
 
 - build: Migrate ESLint configuration to flat config format

package/examples/controllers/prod-website.js

@@ -25,8 +25,7 @@ const WebsiteDemo = () => {
     // Start the server.
     server.start();
 
-    // A bare minimum callback to handle changes.
-    function callback(event, path, ext) {
+    const callback = (event, path, ext) => {
         console.log(event, path, ext);
         if (ext === 'css') {
             server.reloadAllStyles();
@@ -39,7 +38,7 @@ const WebsiteDemo = () => {
         if (event === 'change') {
             server.reloadSinglePage(path);
         }
-    }
+    };
 
     // Build a bare minimum watcher options object.
     const watcherOptions = {
@@ -57,9 +56,6 @@ const WebsiteDemo = () => {
      * setting up `watch`.
      */
     server.watch(websiteRoot, watcherOptions);
-
-    // Log the server's address so we can access it.
-    server.printListeningAddresses();
 };
 
 export default WebsiteDemo;

package/examples/controllers/website.js

@@ -23,8 +23,7 @@ const WebsiteDemo = () => {
     // Start the server.
     server.start();
 
-    // A bare minimum callback to handle changes.
-    function callback(event, path, ext) {
+    const callback = (event, path, ext) => {
         console.log(event, path, ext);
         if (ext === 'css') {
             server.reloadAllStyles();
@@ -37,7 +36,7 @@ const WebsiteDemo = () => {
         if (event === 'change') {
             server.reloadSinglePage(path);
         }
-    }
+    };
 
     // Build a bare minimum watcher options object.
     const watcherOptions = {
@@ -55,9 +54,6 @@ const WebsiteDemo = () => {
      * setting up `watch`.
      */
     server.watch(websiteRoot, watcherOptions);
-
-    // Log the server's address so we can access it.
-    server.printListeningAddresses();
 };
 
 export default WebsiteDemo;

package/examples/controllers/websocket.js

@@ -23,8 +23,7 @@ const WebsocketDemo = () => {
     // Start the server.
     server.start();
 
-    // A bare minimum callback to handle changes.
-    function callback(event, path, ext) {
+    const callback = (event, path, ext) => {
         if (ext === 'css') {
             server.reloadAllStyles();
             return;
@@ -36,7 +35,7 @@ const WebsocketDemo = () => {
         if (event === 'change') {
             server.reloadSinglePage(path);
         }
-    }
+    };
 
     // Build a bare minimum watcher options object.
     const watcherOptions = {
@@ -58,28 +57,20 @@ const WebsocketDemo = () => {
     // Keep a reply count so we can distinguish replies.
     const replyCount = {};
 
-    // Build a simple websocket watcher (handler).
-    function websocketHandler(message, pageId) {
-        // Our demo only sends stings so ignore anything else.
+    const websocketHandler = (message, pageId) => {
         if (message.type === 'string') {
-            // We record reply counts by page so make sure we have a record for this page.
             if (!replyCount[pageId]) { replyCount[pageId] = 0; }
-            // Display the users message in the servers (NSS's) terminal.
             console.log(`[websocket:${pageId}] Message from frontend --> ${message.message}`);
-            // To demonstrate we can reply send a message back after a delay.
             setTimeout(() => {
                 replyCount[pageId] += 1;
                 server.message(pageId, `Reply ${replyCount[pageId]} from backend to page with id: ${pageId}`);
             }, 2000);
         }
-    }
+    };
 
     // Register our websocket handler to respond to only index pages.
     server.addWebsocketCallback('index.html', websocketHandler);
 
-    // Log the server's address so we can access it.
-    server.printListeningAddresses();
-
     // NOTE: We could add as many callbacks as we like for different pages or patterns.
 };
 

package/examples/www-production/js/main.js

@@ -1,5 +1,4 @@
-function loadFoxImage() {
-
+const loadFoxImage = () => {
     const container = document.getElementById('fox-container');
     if (!container) {
         console.log('DEMO: Could not locate the image container for the fox image.');
@@ -23,7 +22,7 @@ function loadFoxImage() {
         .catch((_) => {
             console.log('DEMO: There was an error trying to load the fox image.');
         });
-}
+};
 
 document.addEventListener('DOMContentLoaded', () => {
     console.log('DEMO: Loading a random image of a fox in 3 seconds...');

package/examples/www-website/character-test.html

@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Character Test Page</title>
+    <link rel="stylesheet" href="./css/normalize.css">
+    <link rel="stylesheet" href="./css/main.css">
+    <style>
+        .edge-section { margin: 2rem 0; }
+        .edge-section h2 { font-size: 1.8rem; margin-bottom: 0.75rem; border-bottom: 1px solid #ccc; }
+        .edge-section table { border-collapse: collapse; width: 100%; max-width: 640px; }
+        .edge-section th, .edge-section td { border: 1px solid #ccc; padding: 0.5rem 0.75rem; text-align: left; }
+        .edge-section th { background: #f5f5f5; }
+        .rtl-block { direction: rtl; text-align: right; }
+        .ltr-block { direction: ltr; text-align: left; }
+        .mixed-rtl-ltr { unicode-bidi: bidi-override; }
+        .back-link { display: inline-block; margin-bottom: 1rem; }
+    </style>
+</head>
+<body>
+    <div id="page-container">
+        <main>
+            <div class="content">
+                <a class="back-link" href="./index.html">← Back to Website Demo</a>
+                <h1>Character Test Page</h1>
+                <p>
+                    This page tests that the server and browser handle UTF-8 correctly: HTML entities,
+                    emojis, RTL/LTR text, and mixed scripts.
+                </p>
+
+                <section class="edge-section" id="entities">
+                    <h2>HTML Entities (Table)</h2>
+                    <p>Rendered via reference: character from entity, decimal, or hex. Rendered via literal: character typed directly in the source (UTF-8).</p>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Entity</th>
+                                <th>Decimal</th>
+                                <th>Hex</th>
+                                <th>Via Reference</th>
+                                <th>Via Literal</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Ampersand</td>
+                                <td><code>&amp;amp;</code></td>
+                                <td><code>&amp;#38;</code></td>
+                                <td><code>&amp;#x26;</code></td>
+                                <td>&#38;</td>
+                                <td>n/a</td>
+                            </tr>
+                            <tr>
+                                <td>Less than</td>
+                                <td><code>&amp;lt;</code></td>
+                                <td><code>&amp;#60;</code></td>
+                                <td><code>&amp;#x3C;</code></td>
+                                <td>&#60;</td>
+                                <td>n/a</td>
+                            </tr>
+                            <tr>
+                                <td>Greater than</td>
+                                <td><code>&amp;gt;</code></td>
+                                <td><code>&amp;#62;</code></td>
+                                <td><code>&amp;#x3E;</code></td>
+                                <td>&#62;</td>
+                                <td>n/a</td>
+                            </tr>
+                            <tr>
+                                <td>Double quote</td>
+                                <td><code>&amp;quot;</code></td>
+                                <td><code>&amp;#34;</code></td>
+                                <td><code>&amp;#x22;</code></td>
+                                <td>"</td>
+                                <td>"</td>
+                            </tr>
+                            <tr>
+                                <td>Apostrophe</td>
+                                <td><code>&amp;apos;</code></td>
+                                <td><code>&amp;#39;</code></td>
+                                <td><code>&amp;#x27;</code></td>
+                                <td>'</td>
+                                <td>'</td>
+                            </tr>
+                            <tr>
+                                <td>Non-breaking space</td>
+                                <td><code>&amp;nbsp;</code></td>
+                                <td><code>&amp;#160;</code></td>
+                                <td><code>&amp;#xA0;</code></td>
+                                <td>[&#160;]</td>
+                                <td>[&#160;]</td>
+                            </tr>
+                            <tr>
+                                <td>Copyright</td>
+                                <td><code>&amp;copy;</code></td>
+                                <td><code>&amp;#169;</code></td>
+                                <td><code>&amp;#xA9;</code></td>
+                                <td>&#169;</td>
+                                <td>©</td>
+                            </tr>
+                            <tr>
+                                <td>En dash</td>
+                                <td><code>&amp;ndash;</code></td>
+                                <td><code>&amp;#8211;</code></td>
+                                <td><code>&amp;#x2013;</code></td>
+                                <td>&#8211;</td>
+                                <td>–</td>
+                            </tr>
+                            <tr>
+                                <td>Em dash</td>
+                                <td><code>&amp;mdash;</code></td>
+                                <td><code>&amp;#8212;</code></td>
+                                <td><code>&amp;#x2014;</code></td>
+                                <td>&#8212;</td>
+                                <td>—</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </section>
+
+                <section class="edge-section" id="emojis">
+                    <h2>Emojis &amp; Symbols (Unicode)</h2>
+                    <p>Via reference: numeric character reference (e.g. &#x1F600;). Via literal: character typed in source (UTF-8). Both render as Unicode.</p>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Unicode</th>
+                                <th>Via Reference</th>
+                                <th>Via Literal</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Grinning face</td>
+                                <td><code>U+1F600</code></td>
+                                <td>&#x1F600;</td>
+                                <td>😀</td>
+                            </tr>
+                            <tr>
+                                <td>Party popper</td>
+                                <td><code>U+1F389</code></td>
+                                <td>&#x1F389;</td>
+                                <td>🎉</td>
+                            </tr>
+                            <tr>
+                                <td>Red heart</td>
+                                <td><code>U+2764</code></td>
+                                <td>&#x2764;</td>
+                                <td>❤</td>
+                            </tr>
+                            <tr>
+                                <td>Light bulb</td>
+                                <td><code>U+1F4A1</code></td>
+                                <td>&#x1F4A1;</td>
+                                <td>💡</td>
+                            </tr>
+                            <tr>
+                                <td>Check mark</td>
+                                <td><code>U+2714</code></td>
+                                <td>&#x2714;</td>
+                                <td>✔</td>
+                            </tr>
+                            <tr>
+                                <td>Cross mark</td>
+                                <td><code>U+274C</code></td>
+                                <td>&#x274C;</td>
+                                <td>❌</td>
+                            </tr>
+                            <tr>
+                                <td>Star</td>
+                                <td><code>U+2B50</code></td>
+                                <td>&#x2B50;</td>
+                                <td>⭐</td>
+                            </tr>
+                            <tr>
+                                <td>Flag (United States)</td>
+                                <td><code>U+1F1FA U+1F1F8</code></td>
+                                <td>&#x1F1FA;&#x1F1F8;</td>
+                                <td>🇺🇸</td>
+                            </tr>
+                            <tr>
+                                <td>Flag (United Kingdom)</td>
+                                <td><code>U+1F1EC U+1F1E7</code></td>
+                                <td>&#x1F1EC;&#x1F1E7;</td>
+                                <td>🇬🇧</td>
+                            </tr>
+                            <tr>
+                                <td>Flag (Canada)</td>
+                                <td><code>U+1F1E8 U+1F1E6</code></td>
+                                <td>&#x1F1E8;&#x1F1E6;</td>
+                                <td>🇨🇦</td>
+                            </tr>
+                            <tr>
+                                <td>Flag (Japan)</td>
+                                <td><code>U+1F1EF U+1F1F5</code></td>
+                                <td>&#x1F1EF;&#x1F1F5;</td>
+                                <td>🇯🇵</td>
+                            </tr>
+                            <tr>
+                                <td>Flag (France)</td>
+                                <td><code>U+1F1EB U+1F1F7</code></td>
+                                <td>&#x1F1EB;&#x1F1F7;</td>
+                                <td>🇫🇷</td>
+                            </tr>
+                            <tr>
+                                <td>Flag (Australia)</td>
+                                <td><code>U+1F1E6 U+1F1FA</code></td>
+                                <td>&#x1F1E6;&#x1F1FA;</td>
+                                <td>🇦🇺</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </section>
+
+                <section class="edge-section" id="arabic">
+                    <h2>Arabic (RTL)</h2>
+                    <p class="rtl-block" dir="rtl" lang="ar">
+                        النص العربي للاختبار. إذا ظهر هذا النص بشكل صحيح ومن اليمين إلى اليسار، فإن الترميز واتجاه النص يعملان بشكل سليم.
+                    </p>
+                    <p><em>Above: Arabic sample. Direction should be right-to-left.</em></p>
+                </section>
+
+                <section class="edge-section" id="mandarin">
+                    <h2>Mandarin / Chinese</h2>
+                    <p class="ltr-block" lang="zh">
+                        这是中文测试。简体字与繁体字：简体 = 简体字，繁体 = 繁體字。如果这些字符显示正确，说明 UTF-8 编码正常。
+                    </p>
+                    <p><em>Above: Mandarin (Simplified and Traditional). Direction LTR.</em></p>
+                </section>
+
+                <section class="edge-section" id="mixed">
+                    <h2>Mixed RTL and LTR</h2>
+                    <p>
+                        English sentence with <span dir="rtl" lang="ar">كلمة عربية</span> in the middle, then more English.
+                    </p>
+                    <p dir="rtl">
+                        جملة عربية <span dir="ltr" lang="en">with English in the middle</span> ثم تكملة عربية.
+                    </p>
+                </section>
+
+                <section class="edge-section" id="raw-unicode">
+                    <h2>Raw Unicode in Page (No Entities)</h2>
+                    <p>Emoji in source: 😀 🎉 中文 العربية</p>
+                </section>
+            </div>
+        </main>
+    </div>
+</body>
+</html>

package/examples/www-website/index.html

@@ -19,7 +19,7 @@
             <div class="content">
                 <h1>Website Demo</h1>
                 <p>
-                    This is a simple demo of using Node Simple Server (NSS) for static website (HTML, CSS, JS) development. Try editing the example files for this site and watch how the page auto reloads your changes. You can also open the developer console to see helpful messages being printed by the demo.
+                    This is a simple demo of using Node Simple Server (NSS) for static website (HTML, CSS, JS) development. Try editing the example files for this site and watch how the page auto reloads your changes. You can also open the developer console to see helpful messages being printed by the demo. You should also view your terminal to see the messages being printed by the demo.
                 </p>
                 <div id="fox-container">
                     <svg class="loader" version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
@@ -38,6 +38,9 @@
             </div>
         </main>
         <footer>
+            <p>
+                <a href="./character-test.html">Character test page</a> for complex text: HTML entities, emojis, RTL and LTR, multilingual content.
+            </p>
             <div class="content">
                 Made with <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 1l-6 4-6-4-6 5v7l12 10 12-10v-7z"/></svg> by Caboodle Tech
             </div>

package/examples/www-website/js/main.js

@@ -1,5 +1,4 @@
-function loadFoxImage() {
-
+const loadFoxImage = () => {
     const container = document.getElementById('fox-container');
     if (!container) {
         console.log('DEMO: Could not locate the image container for the fox image.');
@@ -23,7 +22,7 @@ function loadFoxImage() {
         .catch((_) => {
             console.log('DEMO: There was an error trying to load the fox image.');
         });
-}
+};
 
 document.addEventListener('DOMContentLoaded', () => {
     console.log('DEMO: Loading a random image of a fox in 3 seconds...');

package/examples/www-websockets/js/main.js

@@ -1,4 +1,4 @@
-function setupChatApp() {
+const setupChatApp = () => {
     // Make sure the basic elements are present on the page.
     const chatContainer = document.getElementById('chat');
     if (!chatContainer) { return; }
@@ -28,9 +28,11 @@ function setupChatApp() {
         textarea.style.height = `${textarea.scrollHeight}px`;
     });
 
-    // Handle websocket messages from the server.
+    /*
+     * Handle websocket messages from the server. NSS demos only use strings so
+     * check for that.
+     */
     NSS_WS.registerCallback((msgObj) => {
-        // NSS demos only use strings so check for that.
         if (msgObj.type === 'string') {
             // Add the servers response to the chat app.
             const msgDiv = document.createElement('div');
@@ -43,19 +45,19 @@ function setupChatApp() {
 
     // When the submit button (send icon) is pressed send a websocket message.
     button.addEventListener('click', () => {
-        // Send the message.
+        /*
+         * Send the message. Add the message to the chat app.
+         */
         NSS_WS.send(textarea.value.replace(/\n/g, ' '));
-        // Add the message to the chat app.
         const msgDiv = document.createElement('div');
         msgDiv.classList.add('msg');
         msgDiv.classList.add('frontend');
         msgDiv.innerHTML = textarea.value.replace(/\n/g, '<br>');
         msgContainer.appendChild(msgDiv);
-        // Reset the chat message box.
         textarea.value = '';
         textarea.style.height = 'initial';
     });
-}
+};
 
 // Wait until the page is ready and then setup the demo.
 document.addEventListener('DOMContentLoaded', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@caboodle-tech/node-simple-server",
-    "version": "4.2.7",
+    "version": "4.3.0",
     "description": "Node Simple Server (NSS): A small but effective node based server for development sites, customizable live reloading, and websocket support built-in.",
     "main": "bin/nss.js",
     "scripts": {
@@ -46,8 +46,8 @@
     "devDependencies": {
         "@html-eslint/eslint-plugin": "^0.32.0",
         "@html-eslint/parser": "^0.32.0",
-        "eslint": "^9.39.2",
-        "eslint-plugin-jsonc": "^2.21.0",
+        "eslint": "^9.39.4",
+        "eslint-plugin-jsonc": "^2.21.1",
         "jsonc-eslint-parser": "^2.4.2"
     }
 }