json-server 1.0.0-beta.10 → 1.0.0-beta.13

package/lib/adapters/normalized-adapter.js

@@ -0,0 +1,31 @@
+import { randomId } from "../random-id.js";
+export const DEFAULT_SCHEMA_PATH = './node_modules/json-server/schema.json';
+export class NormalizedAdapter {
+    #adapter;
+    constructor(adapter) {
+        this.#adapter = adapter;
+    }
+    async read() {
+        const data = await this.#adapter.read();
+        if (data === null) {
+            return null;
+        }
+        delete data['$schema'];
+        for (const value of Object.values(data)) {
+            if (Array.isArray(value)) {
+                for (const item of value) {
+                    if (typeof item['id'] === 'number') {
+                        item['id'] = item['id'].toString();
+                    }
+                    if (item['id'] === undefined) {
+                        item['id'] = randomId();
+                    }
+                }
+            }
+        }
+        return data;
+    }
+    async write(data) {
+        await this.#adapter.write({ ...data, $schema: DEFAULT_SCHEMA_PATH });
+    }
+}

package/lib/app.js

@@ -52,18 +52,22 @@ function parseListParams(req) {
 function withBody(action) {
     return async (req, res, next) => {
         const { name = '' } = req.params;
-        if (isItem(req.body)) {
-            res.locals['data'] = await action(name, req.body);
+        if (!isItem(req.body)) {
+            res.status(400).json({ error: 'Body must be a JSON object' });
+            return;
         }
+        res.locals['data'] = await action(name, req.body);
         next?.();
     };
 }
 function withIdAndBody(action) {
     return async (req, res, next) => {
         const { name = '', id = '' } = req.params;
-        if (isItem(req.body)) {
-            res.locals['data'] = await action(name, id, req.body);
+        if (!isItem(req.body)) {
+            res.status(400).json({ error: 'Body must be a JSON object' });
+            return;
         }
+        res.locals['data'] = await action(name, id, req.body);
         next?.();
     };
 }

package/lib/bin.js

@@ -8,8 +8,9 @@ import JSON5 from "json5";
 import { Low } from "lowdb";
 import { DataFile, JSONFile } from "lowdb/node";
 import { fileURLToPath } from "node:url";
+import { NormalizedAdapter } from "./adapters/normalized-adapter.js";
+import { Observer } from "./adapters/observer.js";
 import { createApp } from "./app.js";
-import { Observer } from "./observer.js";
 function help() {
     console.log(`Usage: json-server [options] <file>
 
@@ -109,7 +110,7 @@ if (extname(file) === ".json5") {
 else {
     adapter = new JSONFile(file);
 }
-const observer = new Observer(adapter);
+const observer = new Observer(new NormalizedAdapter(adapter));
 const db = new Low(observer, {});
 await db.read();
 // Create app

package/lib/random-id.js

@@ -0,0 +1,4 @@
+import { randomBytes } from 'node:crypto';
+export function randomId() {
+    return randomBytes(2).toString('hex');
+}

package/lib/service.js

@@ -1,19 +1,12 @@
-import { randomBytes } from 'node:crypto';
 import inflection from 'inflection';
 import { Low } from 'lowdb';
 import sortOn from 'sort-on';
 import { matchesWhere } from "./matches-where.js";
 import { paginate } from "./paginate.js";
+import { randomId } from "./random-id.js";
 export function isItem(obj) {
     return typeof obj === 'object' && obj !== null && !Array.isArray(obj);
 }
-export function isData(obj) {
-    if (typeof obj !== 'object' || obj === null) {
-        return false;
-    }
-    const data = obj;
-    return Object.values(data).every((value) => Array.isArray(value) ? value.every(isItem) : isItem(value));
-}
 function ensureArray(arg = []) {
     return Array.isArray(arg) ? arg : [arg];
 }
@@ -65,31 +58,9 @@ function deleteDependents(db, name, dependents) {
         }
     });
 }
-function randomId() {
-    return randomBytes(2).toString('hex');
-}
-function fixItemsIds(items) {
-    items.forEach((item) => {
-        if (typeof item['id'] === 'number') {
-            item['id'] = item['id'].toString();
-        }
-        if (item['id'] === undefined) {
-            item['id'] = randomId();
-        }
-    });
-}
-// Ensure all items have an id
-function fixAllItemsIds(data) {
-    Object.values(data).forEach((value) => {
-        if (Array.isArray(value)) {
-            fixItemsIds(value);
-        }
-    });
-}
 export class Service {
     #db;
     constructor(db) {
-        fixAllItemsIds(db.data);
         this.#db = db;
     }
     #get(name) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-server",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.13",
   "description": "",
   "keywords": [
     "JSON",

package/views/index.html

@@ -1,95 +1,147 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JSON Server</title>
     <style>
-      html {
-        font-size: 16px;
-        line-height: 1.5;
-        background-color: #fff;
-        color: #000;
+      :root {
+        color-scheme: light dark;
+        --fg: light-dark(#111, #e8e8e8);
+        --bg: light-dark(#fff, #111214);
+        --muted: light-dark(#999, #9aa0a6);
+        --line: light-dark(#e5e5e5, #2c2f34);
+        --accent: light-dark(#6366f1, #8b90ff);
+        --chip-bg: light-dark(#111, #f5f5f5);
+        --chip-fg: light-dark(#fff, #111214);
       }
-
       body {
-        margin: 0 auto;
-        max-width: 720px;
-        padding: 0 16px;
-        font-family: sans-serif;
+        margin: 40px auto;
+        max-width: 400px;
+        padding: 0 24px;
+        font-family:
+          ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+        background-color: var(--bg);
+        color: var(--fg);
+        line-height: 1.5;
+        font-size: 14px;
+        transition:
+          background-color 0.2s ease,
+          color 0.2s ease,
+          border-color 0.2s ease;
       }
-
       a {
-        color: #db2777;
-        text-decoration: none;
+        color: inherit;
       }
-
       header {
-        margin-bottom: 32px;
-        padding: 16px 0;
+        margin-bottom: 40px;
+        color: var(--muted);
       }
-
-      nav {
+      .topbar {
         display: flex;
         justify-content: space-between;
+        align-items: baseline;
+        margin-bottom: 12px;
+        padding-top: 12px;
+        border-top: 1px solid var(--line);
       }
-
-      nav div a {
-        margin-left: 16px;
+      .topbar a {
+        text-decoration: none;
+        transition: color 0.1s ease;
       }
-
-      ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
+      .topbar a:first-child {
+        color: var(--fg);
       }
-
-      li {
+      .topbar a:hover {
+        color: var(--accent);
+      }
+      .section-title {
         margin-bottom: 8px;
+        color: var(--muted);
       }
-
-      /* Dark mode styles */
-      @media (prefers-color-scheme: dark) {
-        html {
-          background-color: #1e293b;
-          color: #fff;
-        }
-
-        a {
-        }
+      .list {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .list a {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px 0;
+        text-decoration: none;
+        transition: color 0.1s ease;
+      }
+      .list a:hover {
+        color: var(--accent);
+      }
+      .meta {
+        color: var(--muted);
+        font-size: 13px;
+      }
+      .empty {
+        color: var(--muted);
+      }
+      footer {
+        margin-top: 48px;
+        padding-top: 12px;
+        border-top: 1px solid var(--line);
+        color: var(--muted);
+        font-size: 13px;
+      }
+      .heart {
+        position: fixed;
+        bottom: 20px;
+        right: 24px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        color: var(--chip-fg);
+        background-color: var(--chip-bg);
+        text-decoration: none;
+        transition: transform 0.15s ease;
+      }
+      .heart:hover {
+        transform: scale(1.1);
       }
     </style>
   </head>
 
   <body>
+    <% const resources = Object.entries(it.data ?? {}); %>
+
     <header>
-      <nav>
-        <strong>JSON Server</strong>
-        <div>
-          <a href="https://github.com/typicode/json-server">Docs</a>
-          <a href="https://github.com/sponsors/typicode">♡ Sponsor</a>
-        </div>
-      </nav>
+      <div class="topbar">
+        <a href="https://github.com/typicode/json-server" target="_blank">json-server</a>
+        <a href="https://github.com/typicode/json-server" target="_blank">README</a>
+      </div>
+      <div class="intro">Available REST resources from db.json.</div>
     </header>
-    <main class="my-12">
-      <p
-        class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-transparent bg-clip-text"
-      >
-        ✧*｡٩(ˊᗜˋ*)و✧*｡
-      </p>
-      <% if (Object.keys(it.data).length===0) { %>
-      <p>No resources found in JSON file</p>
-      <% } %> <% Object.entries(it.data).forEach(function([name]) { %>
-      <ul>
-        <li>
-          <a href="<%= name %>">/<%= name %></a>
-          <span>
-            <% if (Array.isArray(it.data[name])) { %> - <%= it.data[name].length %> <%=
-            it.data[name].length> 1 ? 'items' : 'item' %>
-          </span>
-          <% } %>
-        </li>
-      </ul>
-      <% }) %>
-    </main>
+
+    <div class="section-title">Resources</div>
+
+    <div class="list">
+      <% if (resources.length === 0) { %>
+      <span class="empty">No resources in db.json.</span>
+      <% } else { %> <% resources.forEach(function([name, value]) { const isCollection =
+      Array.isArray(value); %>
+      <a href="/<%= name %>">
+        <span>/<%= name %></span>
+        <span class="meta">
+          <% if (isCollection) { %> <%= value.length %> items <% } else { %> object <% } %>
+        </span>
+      </a>
+      <% }) %> <% } %>
+    </div>
+
+    <footer>
+      <span>To replace this page, create public/index.html.</span>
+    </footer>
+
+    <a href="https://github.com/sponsors/typicode" target="_blank" class="heart">❤</a>
+
   </body>
 </html>