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

package/eslint/js-rules.js

@@ -0,0 +1,143 @@
+/**
+ * Caboodle Tech's opinionated rules for linting JavaScript with ESLint. Feel free to adapt or
+ * modify these rules to suit your needs.
+ *
+ * ESLint Rules: {@link https://eslint.org/docs/latest/rules/ ESLint Docs}
+ */
+export default {
+    'class-methods-use-this': 'off',
+    'comma-dangle': ['error', 'never'],
+    'default-case': 'off',
+    indent: [
+        'error',
+        4,
+        {
+            SwitchCase: 1
+        }
+    ],
+    'max-len': ['warn', 120],
+    'no-continue': 'warn',
+    'no-param-reassign': 'warn',
+    'no-plusplus': [
+        'error',
+        {
+            allowForLoopAfterthoughts: true
+        }
+    ],
+    'no-restricted-syntax': 'off',
+    'no-use-before-define': 'off',
+    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    'object-curly-spacing': ['error', 'always'],
+    'padded-blocks': [
+        'error',
+        {
+            classes: 'always'
+        }
+    ],
+    'arrow-body-style': ['error', 'always'],
+    'arrow-parens': ['error', 'always'],
+    'arrow-spacing': ['error', { before: true, after: true }],
+    'block-spacing': ['error', 'always'],
+    'brace-style': ['error', '1tbs', { allowSingleLine: true }],
+    'comma-spacing': ['error', { before: false, after: true }],
+    'computed-property-spacing': ['error', 'never'],
+    'dot-location': ['error', 'property'],
+    'dot-notation': ['error', { allowKeywords: true }],
+    'eol-last': ['error', 'always'],
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
+    'func-call-spacing': ['error', 'never'],
+    'func-name-matching': 'error',
+    'func-names': ['error', 'always'],
+    'func-style': [
+        'error',
+        'declaration',
+        { allowArrowFunctions: true }
+    ],
+    'generator-star-spacing': ['error', { before: true, after: true }],
+    'key-spacing': ['error', { beforeColon: false, afterColon: true }],
+    'keyword-spacing': ['error', { before: true, after: true }],
+    'lines-between-class-members': [
+        'error',
+        'always',
+        { exceptAfterSingleLine: true }
+    ],
+    'newline-per-chained-call': ['error', { ignoreChainWithDepth: 4 }],
+    'no-confusing-arrow': ['error', { allowParens: true }],
+    'no-dupe-class-members': 'error',
+    'no-duplicate-imports': 'error',
+    'no-else-return': ['error', { allowElseIf: false }],
+    'no-eval': 'error',
+    'no-extra-parens': [
+        'error',
+        'all',
+        { nestedBinaryExpressions: false }
+    ],
+    'no-floating-decimal': 'error',
+    'no-lonely-if': 'error',
+    'no-mixed-operators': 'error',
+    'no-multi-assign': 'error',
+    'no-multiple-empty-lines': [
+        'error',
+        { max: 1, maxEOF: 0, maxBOF: 0 }
+    ],
+    'no-return-await': 'error',
+    'no-self-compare': 'error',
+    'no-trailing-spaces': 'error',
+    'no-unneeded-ternary': 'error',
+    'no-useless-concat': 'error',
+    'no-var': 'error',
+    'object-curly-newline': ['error', { consistent: true }],
+    'object-curly-spacing': ['error', 'always'],
+    'object-shorthand': [
+        'error',
+        'always',
+        { ignoreConstructors: false, avoidQuotes: true }
+    ],
+    'one-var': ['error', 'never'],
+    'one-var-declaration-per-line': ['error', 'always'],
+    'operator-assignment': ['error', 'always'],
+    'operator-linebreak': ['error', 'after'],
+    'prefer-arrow-callback': 'error',
+    'prefer-const': 'error',
+    'prefer-destructuring': [
+        'error',
+        {
+            VariableDeclarator: { array: false, object: true },
+            AssignmentExpression: { array: true, object: true }
+        }
+    ],
+    'prefer-numeric-literals': 'error',
+    'prefer-template': 'error',
+    'quote-props': ['error', 'as-needed'],
+    quotes: [
+        'error',
+        'single',
+        { avoidEscape: true, allowTemplateLiterals: true }
+    ],
+    'require-await': 'off',
+    'rest-spread-spacing': ['error', 'never'],
+    semi: ['error', 'always'],
+    'semi-spacing': ['error', { before: false, after: true }],
+    'semi-style': ['error', 'last'],
+    'space-before-blocks': 'error',
+    'space-before-function-paren': ['error', 'never'],
+    'space-in-parens': ['error', 'never'],
+    'space-infix-ops': 'error',
+    'space-unary-ops': ['error', { words: true, nonwords: false }],
+    'spaced-comment': [
+        'error',
+        'always',
+        {
+            line: { markers: ['/'] },
+            block: {
+                balanced: true,
+                markers: ['*'],
+                exceptions: ['*']
+            }
+        }
+    ],
+    'template-curly-spacing': ['error', 'never'],
+    'template-tag-spacing': ['error', 'never'],
+    yoda: ['error', 'never', { exceptRange: true }]
+};
+

package/eslint/json-rules.js

@@ -0,0 +1,21 @@
+/**
+ * Caboodle Tech's opinionated rules for linting JSON with ESLint. Feel free to adapt or modify
+ * these rules to suit your needs.
+ *
+ * ESLint Plugin: {@link https://www.npmjs.com/package/eslint-plugin-jsonc eslint-plugin-jsonc}
+ * JSON ESLint Parser: {@link https://www.npmjs.com/package/jsonc-eslint-parser jsonc-eslint-parser}
+ * JSON ESLint Rules: {@link https://ota-meshi.github.io/eslint-plugin-jsonc/rules/ JSON ESLint Docs}
+ */
+export default {
+    'jsonc/array-bracket-spacing': ['error', 'never'],
+    'jsonc/comma-dangle': ['error', 'never'],
+    'jsonc/comma-style': ['error', 'last'],
+    'jsonc/indent': ['error', 4],
+    'jsonc/key-spacing': ['error', { beforeColon: false, afterColon: true }],
+    'jsonc/object-curly-newline': ['error', { consistent: true }],
+    'jsonc/object-curly-spacing': ['error', 'always'],
+    'jsonc/object-property-newline': ['error', { allowMultiplePropertiesPerLine: true }],
+    'jsonc/quote-props': ['error', 'always'],
+    'jsonc/quotes': ['error', 'double']
+};
+

package/eslint.config.js

@@ -0,0 +1,44 @@
+import HtmlParser from '@html-eslint/parser';
+import HtmlPlugin from '@html-eslint/eslint-plugin';
+import HtmlRules from './eslint/html-rules.js';
+import JsRules from './eslint/js-rules.js';
+import JsonRules from './eslint/json-rules.js';
+import JsoncParser from 'jsonc-eslint-parser';
+import JsoncPlugin from 'eslint-plugin-jsonc';
+
+export default [
+    {
+        // Caboodle Tech HTML settings.
+        ...HtmlPlugin.configs['flat/recommended'],
+        files: ['**/*.html'],
+        plugins: {
+            '@html-eslint': HtmlPlugin
+        },
+        rules: { ...HtmlRules },
+        languageOptions: {
+            parser: HtmlParser
+        }
+    },
+    {
+        // Caboodle Tech JavaScript settings.
+        files: ['**/*.js'],
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module'
+        },
+        rules: { ...JsRules }
+    },
+    {
+        // Caboodle Tech JSON settings.
+        files: ['**/*.json'],
+        languageOptions: {
+            parser: JsoncParser,
+            ecmaVersion: 'latest'
+        },
+        plugins: {
+            jsonc: JsoncPlugin
+        },
+        rules: { ...JsonRules }
+    }
+];
+

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 = {

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 = {

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,21 +57,16 @@ 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);

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', () => {