@maxlkatze/cms/dist/runtime/client/composables/cms/useEditContentStorage.js

A git based Nuxt Module CMS - zero effort, zero cost

import { createStorage } from "unstorage";
import localStorageDriver from "unstorage/drivers/localstorage";
import { ref, useRuntimeConfig, computed } from "#imports";
const editContent = ref({});
export const useEditContentStorage = () => {
  const runtimeConfig = useRuntimeConfig();
  const content = runtimeConfig.public.content;
  let editStorage = void 0;
  const storageItemKey = "edit-content";
  const loadContent = async () => {
    if (import.meta.client) {
      editStorage = createStorage({
        driver: localStorageDriver({ base: "cms:" })
      });
    }
    if (!editStorage) return;
    if (await editStorage.getItem(storageItemKey) === null) {
      await editStorage.setItem(storageItemKey, content);
    }
    const savedEditContent = await editStorage.getItem(storageItemKey);
    if (savedEditContent === null) {
      console.error("SAVED EDIT CONTENT IS NULL");
      return;
    }
    editContent.value = mergedContent(content, savedEditContent);
  };
  const updateContentByKey = async (key, value) => {
    if (!editStorage) return;
    editContent.value[key] = value;
    await editStorage.setItem(storageItemKey, editContent.value);
  };
  const revertChangeByKey = async (key) => {
    if (!editStorage) return;
    if (key in content) {
      editContent.value[key] = content[key];
    } else {
      delete editContent.value[key];
    }
    await editStorage.setItem(storageItemKey, editContent.value);
  };
  const getChanges = (runtimeContent, editContent2) => {
    const changes2 = {};
    for (const key in editContent2) {
      if (!(key in runtimeContent) || !isDeepEqual(runtimeContent[key], editContent2[key])) {
        changes2[key] = editContent2[key];
      }
    }
    return changes2;
  };
  const changes = computed(() => getChanges(content, editContent.value));
  return {
    loadContent,
    getChanges,
    updateContentByKey,
    revertChangeByKey,
    // New function
    editContent,
    changes
    // New computed property
  };
};
const mergedContent = (runtimeContent, editContent2) => {
  const merged = { ...runtimeContent };
  for (const key in editContent2) {
    merged[key] = editContent2[key];
  }
  return merged;
};
const isDeepEqual = (value1, value2) => {
  if (value1 === value2) {
    return true;
  }
  if (typeof value1 !== "object" || typeof value2 !== "object" || value1 === null || value2 === null) {
    return false;
  }
  if (Array.isArray(value1) && Array.isArray(value2)) {
    if (value1.length !== value2.length) {
      return false;
    }
    return value1.every((item, index) => isDeepEqual(item, value2[index]));
  }
  if (!Array.isArray(value1) && !Array.isArray(value2)) {
    const keys1 = Object.keys(value1);
    const keys2 = Object.keys(value2);
    if (keys1.length !== keys2.length) {
      return false;
    }
    return keys1.every((key) => {
      return Object.prototype.hasOwnProperty.call(value2, key) && isDeepEqual(
        value1[key],
        value2[key]
      );
    });
  }
  return false;
};