tsondb 0.7.9 → 0.7.11

package/dist/src/web/components/InstanceRouteSkeleton.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useLocation, useRoute } from "preact-iso";
 import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 import { removeAt } from "../../shared/utils/array.js";
+import { deepEqual } from "../../shared/utils/compare.js";
 import { getSerializedDisplayNameFromEntityInstance } from "../../shared/utils/displayName.js";
 import { toTitleCase } from "../../shared/utils/string.js";
 import { validateLocaleIdentifier } from "../../shared/validation/identifier.js";
 import { deleteInstanceByEntityNameAndId, getChildInstancesForInstanceByEntityName, } from "../api/declarations.js";
+import { EntitiesContext } from "../context/entities.js";
 import { GitClientContext } from "../context/gitClient.js";
 import { useEntityFromRoute } from "../hooks/useEntityFromRoute.js";
 import { useInstanceNamesByEntity } from "../hooks/useInstanceNamesByEntity.js";
@@ -17,17 +19,35 @@ import { runWithLoading } from "../signals/loading.js";
 import { Layout } from "./Layout.js";
 import { TypeInput } from "./typeInputs/TypeInput.js";
 import { ValidationErrors } from "./typeInputs/utils/ValidationErrors.js";
+const onBeforeUnload = (event) => {
+    event.preventDefault();
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- best practice according to MDN
+    event.returnValue = "unsaved changes";
+};
 export const InstanceRouteSkeleton = ({ mode, buttons, init, titleBuilder, onSubmit, }) => {
     const { params: { name, id }, } = useRoute();
     const [locales] = useSetting("displayedLocales");
     const [getDeclFromDeclName, declsLoaded] = useGetDeclFromDeclName();
     const { declaration: entity, isLocaleEntity } = useEntityFromRoute() ?? {};
+    const { entities } = useContext(EntitiesContext);
     const [instanceNamesByEntity] = useInstanceNamesByEntity();
     const [instanceContent, setInstanceContent] = useState();
+    const [savedInstanceContent, setSavedInstanceContent] = useState();
     const [childInstances, setChildInstances] = useState([]);
     const [customId, setCustomId] = useState("");
     const client = useContext(GitClientContext);
     const { route } = useLocation();
+    useEffect(() => {
+        if (deepEqual(instanceContent, savedInstanceContent)) {
+            window.removeEventListener("beforeunload", onBeforeUnload);
+        }
+        else {
+            window.addEventListener("beforeunload", onBeforeUnload);
+        }
+        return () => {
+            window.removeEventListener("beforeunload", onBeforeUnload);
+        };
+    }, [instanceContent, savedInstanceContent]);
     useEffect(() => {
         document.title =
             (entity && titleBuilder({ locales, entity, instanceContent, instanceId: id })) ??
@@ -35,7 +55,16 @@ export const InstanceRouteSkeleton = ({ mode, buttons, init, titleBuilder, onSub
     }, [entity, id, instanceContent, locales, titleBuilder]);
     useEffect(() => {
         if (entity && instanceContent === undefined && declsLoaded) {
-            runWithLoading(() => init({ locales, entity, instanceId: id, setInstanceContent, getDeclFromDeclName }))
+            runWithLoading(() => init({
+                locales,
+                entity,
+                instanceId: id,
+                setInstanceContent: value => {
+                    setInstanceContent(value);
+                    setSavedInstanceContent(value);
+                },
+                getDeclFromDeclName,
+            }))
                 .then(() => id
                 ? getChildInstancesForInstanceByEntityName(locales, entity.name, id).then(result => {
                     setChildInstances(result.instances);
@@ -46,6 +75,7 @@ export const InstanceRouteSkeleton = ({ mode, buttons, init, titleBuilder, onSub
             });
         }
     }, [entity, declsLoaded, getDeclFromDeclName, id, init, instanceContent, locales, name]);
+    const checkIsLocaleEntity = useCallback((entityName) => entities.some(entity => entity.declaration.name === entityName && entity.isLocaleEntity), [entities]);
     const handleSubmit = (event) => {
         event.preventDefault();
         if (entity && instanceContent !== undefined) {
@@ -61,7 +91,10 @@ export const InstanceRouteSkeleton = ({ mode, buttons, init, titleBuilder, onSub
                 getDeclFromDeclName,
                 isLocaleEntity,
                 setCustomId,
-                setInstanceContent,
+                setInstanceContent: value => {
+                    setInstanceContent(value);
+                    setSavedInstanceContent(value);
+                },
                 childInstances,
                 updateLocalGitState: client?.updateLocalState,
             })).catch((error) => {
@@ -114,5 +147,5 @@ export const InstanceRouteSkeleton = ({ mode, buttons, init, titleBuilder, onSub
                             }
                         }, children: "Delete" }))] }), !id && isLocaleEntity && (_jsxs("div", { class: "field field--id", children: [_jsx("label", { htmlFor: "id", children: "ID" }), _jsx("p", { className: "comment", children: "The instance\u2019s identifier. An IETF language tag (BCP47)." }), _jsx("input", { type: "text", id: "id", value: customId, required: true, pattern: "[a-z]{2,3}(-[A-Z]{2,3})?", placeholder: "en-US, de-DE, \u2026", onInput: event => {
                             setCustomId(event.currentTarget.value);
-                        }, "aria-invalid": idErrors.length > 0 }), _jsx(ValidationErrors, { errors: idErrors })] })), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TypeInput, { type: entity.type, value: instanceContent, path: undefined, instanceNamesByEntity: instanceNamesByEntity, childInstances: childInstances, getDeclFromDeclName: getDeclFromDeclName, onChange: setInstanceContent, onChildChange: handleOnChildChange, onChildAdd: handleOnChildAdd, onChildRemove: handleOnChildRemove }), _jsx("div", { class: "form-footer btns", children: buttons.map(button => (_jsx("button", { type: "submit", name: button.name, class: button.primary ? "primary" : undefined, children: button.label }, button.name))) })] })] }));
+                        }, "aria-invalid": idErrors.length > 0 }), _jsx(ValidationErrors, { errors: idErrors })] })), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TypeInput, { type: entity.type, value: instanceContent, path: undefined, instanceNamesByEntity: instanceNamesByEntity, childInstances: childInstances, getDeclFromDeclName: getDeclFromDeclName, onChange: setInstanceContent, onChildChange: handleOnChildChange, onChildAdd: handleOnChildAdd, onChildRemove: handleOnChildRemove, checkIsLocaleEntity: checkIsLocaleEntity }), _jsx("div", { class: "form-footer btns", children: buttons.map(button => (_jsx("button", { type: "submit", name: button.name, class: button.primary ? "primary" : undefined, children: button.label }, button.name))) })] })] }));
 };

package/dist/src/web/components/Layout.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { useContext } from "preact/hooks";
 import { GitContext } from "../context/git.js";
+import { useSetting } from "../hooks/useSettings.js";
 import { Settings } from "./Settings.js";
 export const Layout = ({ breadcrumbs, children }) => {
-    const [_, setIsGitOpen] = useContext(GitContext);
-    return (_jsxs(_Fragment, { children: [_jsxs("header", { children: [_jsx("nav", { children: _jsx("ol", { children: breadcrumbs.map(({ url, label }) => (_jsx("li", { children: _jsx("a", { href: url, children: label }) }, url))) }) }), _jsxs("div", { class: "nav-buttons", children: [_jsx("button", { class: "git-toggle", onClick: () => {
+    const [_1, setIsGitOpen] = useContext(GitContext);
+    const [isGitAlwaysOpen, _2] = useSetting("gitSidebar");
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { children: [_jsx("nav", { children: _jsx("ol", { children: breadcrumbs.map(({ url, label }) => (_jsx("li", { children: _jsx("a", { href: url, children: label }) }, url))) }) }), _jsxs("div", { class: "nav-buttons", children: [_jsx("button", { class: `git-toggle${!isGitAlwaysOpen ? " git-toggle--no-sidebar" : ""}`, onClick: () => {
                                     setIsGitOpen(b => !b);
                                 }, children: "File changes" }), _jsx(Settings, {})] })] }), _jsx("main", { children: children })] }));
 };

package/dist/src/web/components/Settings.js

@@ -11,6 +11,7 @@ const localeMapper = (result) => result.instances;
 export const Settings = () => {
     const [locales, setLocales] = useSetting("displayedLocales");
     const [enumDisplay, setEnumDisplay] = useSetting("enumDisplay");
+    const [isGitAlwaysOpen, setIsGitAlwaysOpen] = useSetting("gitSidebar");
     const [isSettingsOpen, setIsSettingsOpen] = useState(false);
     const config = useContext(ConfigContext);
     const [localeInstances] = useMappedAPIResource(getLocaleInstances, localeMapper, locales, config.localeEntityName);
@@ -43,5 +44,7 @@ export const Settings = () => {
                                     setEnumDisplay("select");
                                 } }), _jsx("label", { htmlFor: "enum-display-select", children: "Compact (Dropdowns)" })] }), _jsxs("div", { className: "field--option", children: [_jsx("input", { type: "radio", name: "enum-display", id: "enum-display-radio", value: "radio", checked: enumDisplay === "radio", onChange: () => {
                                     setEnumDisplay("radio");
-                                } }), _jsx("label", { htmlFor: "enum-display-radio", children: "Expanded (all nested form fields in radio lists)" })] })] })] }));
+                                } }), _jsx("label", { htmlFor: "enum-display-radio", children: "Expanded (all nested form fields in radio lists)" })] }), _jsx("h3", { children: "Version Control" }), _jsxs("div", { className: "field--option", children: [_jsx("input", { type: "checkbox", name: "git-sidebar-always-open", id: "git-sidebar-always-open", checked: isGitAlwaysOpen, onChange: () => {
+                                    setIsGitAlwaysOpen(v => !v);
+                                } }), _jsx("label", { htmlFor: "git-sidebar-always-open", children: "Display as sidebar in larger viewports" })] })] })] }));
 };

package/dist/src/web/components/git/Git.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-ru
 import { useContext, useState } from "preact/hooks";
 import { GitContext } from "../../context/git.js";
 import { GitClientContext } from "../../context/gitClient.js";
+import { useSetting } from "../../hooks/useSettings.js";
 import { ModalDialog } from "../ModalDialog.js";
 import { GitBranchManager } from "./GitBranchManager.js";
 import { GitFileManager } from "./GitFileManager.js";
@@ -9,6 +10,7 @@ export const Git = () => {
     const [isOpen, setIsOpen] = useContext(GitContext);
     const [mode, setMode] = useState("files");
     const client = useContext(GitClientContext);
+    const [isGitAlwaysOpen] = useSetting("gitSidebar");
     if (!client || !client.isRepo) {
         return null;
     }
@@ -40,7 +42,7 @@ export const Git = () => {
                             default:
                                 return null;
                         }
-                    })()] }), isOpen && mode === "files" ? null : (_jsxs("aside", { class: "git", children: [_jsx("h2", { class: "h1-faded", children: "Version Control" }), _jsx(GitFileManager, { client: client, manageBranches: () => {
+                    })()] }), !isGitAlwaysOpen || (isOpen && mode === "files") ? null : (_jsxs("aside", { class: "git", children: [_jsx("h2", { class: "h1-faded", children: "Version Control" }), _jsx(GitFileManager, { client: client, manageBranches: () => {
                             setIsOpen(true);
                             setMode("branches");
                         } })] }))] }));

package/dist/src/web/components/typeInputs/NestedEntityMapTypeInput.js

@@ -7,7 +7,7 @@ import { Select } from "../Select.js";
 import { TypeInput } from "./TypeInput.js";
 import { MismatchingTypeError } from "./utils/MismatchingTypeError.js";
 export const NestedEntityMapTypeInput = props => {
-    const { type, path, value, instanceNamesByEntity, disabled, getDeclFromDeclName, onChange } = props;
+    const { type, path, value, instanceNamesByEntity, disabled, getDeclFromDeclName, checkIsLocaleEntity, onChange, } = props;
     const [newKey, setNewKey] = useState("");
     if (typeof value !== "object" || value === null || Array.isArray(value)) {
         return _jsx(MismatchingTypeError, { expected: "object", actual: value });
@@ -17,10 +17,11 @@ export const NestedEntityMapTypeInput = props => {
         .slice()
         .filter(instance => !existingKeys.includes(instance.id))
         .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }));
+    const isLocaleEntity = checkIsLocaleEntity(type.secondaryEntity);
     return (_jsxs("div", { class: "field field--container field--nestedentitymap", children: [existingKeys.length > 0 && (_jsx("ul", { children: Object.entries(value).map(([key, item]) => {
                     const name = instanceNamesByEntity[type.secondaryEntity]?.find(instance => instance.id === key)
                         ?.name ?? key;
-                    return (_jsxs("li", { class: "container-item dict-item", children: [_jsxs("div", { className: "container-item-header", children: [_jsx("div", { className: "container-item-title", children: _jsxs("span", { children: [_jsx("strong", { children: name }), " ", _jsx("span", { className: "id", children: key })] }) }), _jsx("div", { className: "btns", children: _jsxs("button", { class: "destructive", onClick: () => {
+                    return (_jsxs("li", { class: "container-item dict-item", ...(isLocaleEntity ? { lang: key } : {}), children: [_jsxs("div", { className: "container-item-header", children: [_jsx("div", { className: "container-item-title", children: _jsxs("span", { children: [_jsx("strong", { children: name }), " ", _jsx("span", { className: "id", children: key })] }) }), _jsx("div", { className: "btns", children: _jsxs("button", { class: "destructive", onClick: () => {
                                                 const newObj = { ...value };
                                                 // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
                                                 delete newObj[key];

package/dist/src/web/components/typeInputs/TypeInput.d.ts

@@ -16,6 +16,7 @@ export type TypeInputProps<T, V = unknown> = {
     onChildChange: (index: number, value: unknown) => void;
     onChildAdd: (entityName: string, value: unknown) => void;
     onChildRemove: (index: number) => void;
+    checkIsLocaleEntity: (entityName: string) => boolean;
 };
 type Props = TypeInputProps<SerializedType>;
 declare const MemoizedTypeInput: FunctionComponent<Props>;

package/dist/src/web/context/settings.js

@@ -3,6 +3,7 @@ import {} from "../hooks/useSettings.js";
 export const defaultSettings = {
     displayedLocales: [],
     enumDisplay: "select",
+    gitSidebar: true,
 };
 export const SettingsContext = createContext({
     settings: defaultSettings,

package/dist/src/web/hooks/useSettings.d.ts

@@ -5,6 +5,7 @@ import { SettingsContext } from "../context/settings.ts";
 export type UserSettings = {
     displayedLocales: string[];
     enumDisplay: "select" | "radio";
+    gitSidebar: boolean;
 };
 export declare const useSettings: (config: WebConfig) => SettingsContext;
 export declare const useSetting: <K extends keyof UserSettings>(key: K) => [UserSettings[K], Dispatch<SetStateAction<UserSettings[K]>>];

package/dist/src/web/hooks/useSettings.js

@@ -3,6 +3,7 @@ import { defaultSettings, SettingsContext } from "../context/settings.js";
 const settingsGuards = {
     displayedLocales: (v) => Array.isArray(v) && v.every(e => typeof e === "string") && v.length > 0,
     enumDisplay: (v) => typeof v === "string" && ["select", "radio"].includes(v),
+    gitSidebar: (v) => typeof v === "boolean",
 };
 const defaultSettingsFromConfig = (config) => ({
     ...defaultSettings,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsondb",
-  "version": "0.7.9",
+  "version": "0.7.11",
   "description": "",
   "license": "ISC",
   "author": "Lukas Obermann",

package/public/css/styles.css

@@ -196,6 +196,24 @@ h3 {
   line-height: 1.2;
 }
 
+h4 {
+  margin: 1.2rem 0 0.6rem;
+  font-size: 1.1rem;
+  line-height: 1.3;
+}
+
+h5 {
+  margin: 1rem 0 0.5rem;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
+h6 {
+  margin: 1rem 0 0.5rem;
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
 p {
   margin: 0.5rem 0;
 }
@@ -747,9 +765,10 @@ form > .field--container {
   padding: 1rem;
   background: var(--color-background-secondary);
   flex: 1 1 0;
+  line-height: 1.6;
 }
 
-.preview p {
+.preview :is(p, ul, ol, table) {
   margin: 0.5rem 0 0;
 }
 
@@ -934,7 +953,7 @@ aside.git h2 {
     display: block;
   }
 
-  .git-toggle {
+  .git-toggle:not(.git-toggle--no-sidebar) {
     display: none;
   }
 }