tsondb 0.5.8 → 0.5.12

package/dist/src/web/routes/Instance.js

@@ -1,24 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useLocation, useRoute } from "preact-iso";
-import { useEffect, useMemo, useState } from "preact/hooks";
-import { deepEqual } from "../../shared/utils/compare.js";
-import { getDisplayNameFromEntityInstance } from "../../shared/utils/displayName.js";
+import { useCallback, useEffect, useState } from "preact/hooks";
+import { getSerializedDisplayNameFromEntityInstance } from "../../shared/utils/displayName.js";
+import { toTitleCase } from "../../shared/utils/string.js";
 import { deleteInstanceByEntityNameAndId, getInstanceByEntityNameAndId, updateInstanceByEntityNameAndId, } from "../api.js";
 import { Layout } from "../components/Layout.js";
 import { TypeInput } from "../components/typeInputs/TypeInput.js";
 import { useEntityFromRoute } from "../hooks/useEntityFromRoute.js";
 import { useInstanceNamesByEntity } from "../hooks/useInstanceNamesByEntity.js";
 import { useGetDeclFromDeclName } from "../hooks/useSecondaryDeclarations.js";
+import { printJson } from "../utils/debug.js";
 import { NotFound } from "./NotFound.js";
 export const Instance = () => {
     const { params: { name, id }, } = useRoute();
-    const getDeclFromDeclName = useGetDeclFromDeclName();
+    const [getDeclFromDeclName, declsLoaded] = useGetDeclFromDeclName();
     const entityFromRoute = useEntityFromRoute();
     const [instanceNamesByEntity] = useInstanceNamesByEntity();
     const [instance, setInstance] = useState();
     const [originalInstance, setOriginalInstance] = useState();
     const { route } = useLocation();
-    const hasChanges = useMemo(() => !deepEqual(instance?.content, originalInstance?.content), [instance?.content, originalInstance?.content]);
+    useEffect(() => {
+        if (entityFromRoute?.entity && instance?.content && id) {
+            const defaultName = id;
+            const instanceName = getSerializedDisplayNameFromEntityInstance(entityFromRoute.entity, instance.content, defaultName);
+            const entityName = entityFromRoute.entity.name;
+            document.title = instanceName + " — " + toTitleCase(entityName) + " — TSONDB";
+        }
+        else {
+            document.title = "Not found — TSONDB";
+        }
+    }, [entityFromRoute?.entity, id, instance?.content]);
     useEffect(() => {
         if (name && id) {
             getInstanceByEntityNameAndId(name, id)
@@ -33,7 +44,7 @@ export const Instance = () => {
     }, [id, name]);
     const handleSubmit = (event) => {
         event.preventDefault();
-        if (name && id && instance) {
+        if (event.submitter?.getAttribute("name") === "save" && name && id && instance) {
             updateInstanceByEntityNameAndId(name, id, instance.content)
                 .then(updatedInstance => {
                 setInstance(updatedInstance.instance);
@@ -46,17 +57,24 @@ export const Instance = () => {
             });
         }
     };
+    const handleOnChange = useCallback((value) => {
+        setInstance(container => container && { ...container, content: value });
+    }, []);
     if (!name || !id) {
         return _jsx(NotFound, {});
     }
-    if (!entityFromRoute || !instance || !originalInstance) {
+    if (!entityFromRoute ||
+        !instance ||
+        !originalInstance ||
+        !instanceNamesByEntity ||
+        !declsLoaded) {
         return (_jsxs(Layout, { breadcrumbs: [
                 { url: "/", label: "Home" },
                 { url: `/entities/${name}`, label: name },
             ], children: [_jsx("h1", { children: id }), _jsx("p", { className: "loading", children: "Loading \u2026" })] }));
     }
     const defaultName = id;
-    const instanceName = getDisplayNameFromEntityInstance(entityFromRoute.entity, instance.content, defaultName);
+    const instanceName = getSerializedDisplayNameFromEntityInstance(entityFromRoute.entity, instance.content, defaultName);
     return (_jsxs(Layout, { breadcrumbs: [
             { url: "/", label: "Home" },
             { url: `/entities/${name}`, label: entityFromRoute.entity.name },
@@ -72,8 +90,5 @@ export const Instance = () => {
                                     }
                                 });
                             }
-                        }, children: "Delete" })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TypeInput, { type: entityFromRoute.entity.type, value: instance.content, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: value => {
-                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                            setInstance(container => ({ ...container, content: value }));
-                        } }), _jsx("button", { type: "submit", disabled: !hasChanges, class: "primary", children: "Save" })] })] }));
+                        }, children: "Delete" })] }), _jsxs("div", { class: "debug-compare", style: { display: "flex", gap: "1rem", width: "100%" }, children: [_jsxs("div", { style: { flex: "1 1 0", position: "relative" }, children: [_jsx("p", { children: "Original" }), _jsx("pre", { style: { overflowX: "scroll", width: "40rem", maxWidth: "100%" }, children: _jsx("code", { dangerouslySetInnerHTML: { __html: printJson(originalInstance.content) } }) })] }), _jsxs("div", { style: { flex: "1 1 0", position: "relative" }, children: [_jsx("p", { children: "Current" }), _jsx("pre", { style: { overflowX: "scroll", width: "40rem", maxWidth: "100%" }, children: _jsx("code", { dangerouslySetInnerHTML: { __html: printJson(instance.content) } }) })] })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TypeInput, { type: entityFromRoute.entity.type, value: instance.content, path: undefined, instanceNamesByEntity: instanceNamesByEntity, getDeclFromDeclName: getDeclFromDeclName, onChange: handleOnChange }), _jsx("div", { class: "form-footer btns", children: _jsx("button", { type: "submit", name: "save", class: "primary", children: "Save" }) })] })] }));
 };

package/dist/src/web/routes/NotFound.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect } from "preact/hooks";
 import { Layout } from "../components/Layout.js";
 export const NotFound = () => {
+    useEffect(() => {
+        document.title = "Not found — TSONDB";
+    }, []);
     return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: "Home" }], children: [_jsx("h1", { children: "404 Not Found" }), _jsx("p", { children: "The page you are looking for does not exist." })] }));
 };

package/dist/src/web/utils/debug.d.ts

@@ -0,0 +1 @@
+export declare const printJson: (data: unknown) => string;

package/dist/src/web/utils/debug.js

@@ -0,0 +1,5 @@
+export const printJson = (data) => JSON.stringify(data, undefined, 2)
+    .replace(/\n *([}\]],?)/g, " $1")
+    .replace(/((?:^|\n *)[{[])\n +/g, "$1 ")
+    .replace(/"(.+?)":/g, '<span style="color: darkorange">$1</span>:')
+    .replace(/ "(.*?)"([ ,])/g, ' <span style="color: darkgreen">"$1"</span>$2');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsondb",
-  "version": "0.5.8",
+  "version": "0.5.12",
   "description": "",
   "license": "ISC",
   "author": "Lukas Obermann",
@@ -17,7 +17,7 @@
     ".": "./dist/src/index.js",
     "./renderer/jsonschema": "./dist/src/node/renderers/jsonschema/index.js",
     "./renderer/ts": "./dist/src/node/renderers/ts/index.js",
-    "./schema": "./dist/src/node/Schema.js",
+    "./schema": "./dist/src/node/schema/Schema.js",
     "./schema/def": "./dist/src/node/schema/index.js"
   },
   "scripts": {
@@ -31,18 +31,18 @@
     "release:sign": "commit-and-tag-version --sign --signoff"
   },
   "devDependencies": {
-    "@eslint/js": "^9.34.0",
+    "@eslint/js": "^9.35.0",
     "@types/debug": "^4.1.12",
     "@types/express": "^5.0.3",
     "@types/node": "^24.3.1",
     "commit-and-tag-version": "^12.6.0",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.3.0",
     "prettier": "^3.6.2",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.42.0"
+    "typescript-eslint": "^8.43.0"
   },
   "dependencies": {
     "debug": "^4.4.1",
@@ -51,7 +51,7 @@
     "preact-iso": "^2.10.0",
     "simple-cli-args": "^0.1.2",
     "simple-git": "^3.28.0",
-    "uuid": "^11.1.0"
+    "uuid": "^13.0.0"
   },
   "repository": "github:elyukai/tsondb",
   "bugs": {

package/public/css/styles.css

@@ -1,12 +1,16 @@
-* {
+*,
+*::after,
+*::before {
   box-sizing: border-box;
 }
 
 :root {
-  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --background: white;
   --markdown-background: #e1e3e7;
@@ -227,7 +231,8 @@ button.destructive:disabled {
 
 input,
 textarea,
-select {
+select,
+.textarea-grow-wrap::after {
   background: var(--background);
   color: var(--color);
   font-family: var(--font-sans);
@@ -247,6 +252,28 @@ select[aria-invalid="true"] {
   color: var(--error-color);
 }
 
+/* https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */
+
+.textarea-grow-wrap {
+  display: grid;
+}
+
+.textarea-grow-wrap::after {
+  content: attr(data-value) " ";
+  white-space: pre-wrap;
+  visibility: hidden;
+}
+
+.textarea-grow-wrap > textarea {
+  resize: none;
+  overflow: hidden;
+}
+
+.textarea-grow-wrap > textarea,
+.textarea-grow-wrap::after {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
 input[type="checkbox"] {
   height: 1rem;
   width: 1rem;
@@ -265,18 +292,13 @@ input[type="checkbox"]:checked {
 input[type="checkbox"]:checked::before {
   content: "";
   display: block;
-  border-width: 0 0 1px 1px;
+  border-width: 0 0 0.125rem 0.125rem;
   border-style: solid;
-  width: 0.6rem;
-  height: 0.3rem;
+  width: 0.8rem;
+  height: 0.4rem;
   border-color: var(--background);
   transform: rotate(-45deg);
-  margin: calc(-0.2rem - 1px) 0 0 calc(-0.275rem - 1px);
-}
-
-textarea {
-  min-height: 5rem;
-  resize: vertical;
+  margin: calc(-0.325rem) 0 0 calc(-0.4rem);
 }
 
 .select-wrapper {
@@ -327,59 +349,109 @@ select {
   margin-top: 2.3rem;
 }
 
-.entities,
-.instances {
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.list-header form {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.entries {
   list-style-type: " ";
   padding: 0;
   margin: 1.5rem 0 0;
+  container-type: inline-size;
 }
 
-.entity-item,
-.instance-item {
-  display: flex;
-  gap: 1.5rem;
+.entries-item {
+  display: grid;
+  gap: 0.125rem 1.5rem;
   padding: 0.5rem 0;
   border-top: 1px solid var(--separator-color);
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
+  grid-template-areas: "title side" "subtitle side" ". side";
+  align-items: center;
+  --text-padding: 0.5rem;
 }
 
-.entity-item:first-child,
-.instance-item:first-child {
+@container (min-width: 40rem) {
+  .entries-item {
+    grid-template-columns: 1fr auto auto;
+    grid-template-rows: auto;
+    grid-template-areas: "title subtitle side";
+    align-items: center;
+  }
+}
+
+.entries-item:first-child {
   border-top: none;
 }
 
-.entity-item h2,
-.instance-item h2 {
+.entries-item--created {
+  color: var(--highlight-color);
+  background: var(--highlight-background);
+}
+
+.entries-item h2 {
   font-size: 1rem;
   margin: 0;
   flex: 1 1 auto;
-  padding: 0.65rem 0;
+  line-height: 1.3;
 }
 
-.entity-item .title {
-  flex: 1 1 0;
+.entries-item__title {
+  grid-area: title;
+  padding-top: var(--text-padding);
 }
 
-.entity-item .title p {
+@container (min-width: 40rem) {
+  .entries-item__title {
+    padding-block: var(--text-padding);
+  }
+}
+
+.entries-item__title p {
   color: var(--secondary-color);
+  margin: 0.125rem 0 0;
+}
+
+.entries-item__title .description {
   margin: 0;
-  padding-bottom: 0.5rem;
 }
 
-.entity-item .meta,
-.instance-item .id {
+.entries-item__subtitle {
   color: var(--secondary-color);
   margin: 0;
-  padding: 0.5rem 0;
+  padding: 0;
   white-space: nowrap;
+  grid-area: subtitle;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-bottom: var(--text-padding);
 }
 
-.instance-item .id {
+@container (min-width: 40rem) {
+  .entries-item__subtitle {
+    padding-block: var(--text-padding);
+  }
+}
+
+.entries-item__subtitle--id {
   font-family: var(--font-mono);
 }
 
-.instance-item--created {
-  color: var(--highlight-color);
-  background: var(--highlight-background);
+.entries-item__side {
+  grid-area: side;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
 .field.field--id {
@@ -464,8 +536,15 @@ form > .field--container {
 
 .field--string {
   display: flex;
+  flex-direction: column;
   gap: 1rem;
-  align-items: start;
+}
+
+@container (min-width: 40rem) {
+  .field--string {
+    flex-direction: row;
+    align-items: start;
+  }
 }
 
 .field--string .editor {
@@ -490,6 +569,10 @@ form > .field--container {
   margin-bottom: 0;
 }
 
+.container-item {
+  container-type: inline-size;
+}
+
 .container-item-header {
   display: flex;
   align-items: center;
@@ -555,6 +638,17 @@ button[type="submit"] {
   margin: 0.35rem 0 0;
 }
 
+main:has(.form-footer) {
+  margin-bottom: -1.5rem;
+}
+
+.form-footer {
+  position: sticky;
+  bottom: 0;
+  padding-bottom: 1.5rem;
+  background: var(--background);
+}
+
 .git-status {
   width: 1.75rem;
   height: 1.75rem;