Refactor for built-in templates

src/lib/stores/templateState.ts

@@ -5,33 +5,48 @@ import type { Readable, Writable } from 'svelte/store';
 import { v4 as uuidv4 } from "uuid";
 
 export type TemplateState = {
-    templates: SerializedComfyBoxTemplate[]
+    builtInTemplates: SerializedComfyBoxTemplate[]
+    userTemplates: SerializedComfyBoxTemplate[]
     templatesByID: Record<UUID, SerializedComfyBoxTemplate>
 }
 
 type TemplateStateOps = {
+    getAllTemplates: () => SerializedComfyBoxTemplate[],
+    addTemplate: (template: SerializedComfyBoxTemplate) => boolean,
+    updateTemplate: (template: SerializedComfyBoxTemplate) => boolean,
+    removeTemplate: (templateID: UUID) => boolean,
     save: () => void,
-    load: () => void,
-    add: (template: SerializedComfyBoxTemplate) => boolean,
-    update: (template: SerializedComfyBoxTemplate) => boolean,
-    remove: (templateID: UUID) => boolean,
+    load: (builtInTemplates: SerializedComfyBoxTemplate[]) => void,
 }
 
 export type WritableTemplateStateStore = Writable<TemplateState> & TemplateStateOps;
 const store: Writable<TemplateState> = writable(
     {
-        templates: [],
+        builtInTemplates: [],
+        userTemplates: [],
         templatesByID: {}
     })
 
-function add(template: SerializedComfyBoxTemplate): boolean {
+function getTemplateList(template: SerializedComfyBoxTemplate, state: TemplateState): SerializedComfyBoxTemplate[] {
+    if (template.isBuiltIn)
+        return state.builtInTemplates
+    return state.userTemplates;
+}
+
+function getAllTemplates(): SerializedComfyBoxTemplate[] {
+    const state = get(store);
+    return state.builtInTemplates.concat(state.userTemplates);
+}
+
+function addTemplate(template: SerializedComfyBoxTemplate): boolean {
     const state = get(store);
     if (state.templatesByID[template.id]) {
         return false;
     }
 
     store.update(s => {
-        s.templates.push(template);
+        const templateList = getTemplateList(template, s)
+        templateList.push(template)
         s.templatesByID[template.id] = template;
         return s;
     })
@@ -41,15 +56,16 @@ function add(template: SerializedComfyBoxTemplate): boolean {
     return true;
 }
 
-function remove(templateID: UUID): boolean {
+function removeTemplate(templateID: UUID): boolean {
     const state = get(store);
     if (!state.templatesByID[templateID]) {
         return false;
     }
 
     store.update(s => {
-        const index = s.templates.findIndex(t => t.id === templateID)
-        s.templates.splice(index, 1);
+        const templateList = getTemplateList(s.templatesByID[templateID], s)
+        const index = templateList.findIndex(t => t.id === templateID)
+        templateList.splice(index, 1);
         delete s.templatesByID[templateID];
         return s;
     })
@@ -59,7 +75,7 @@ function remove(templateID: UUID): boolean {
     return true;
 }
 
-function update(template: SerializedComfyBoxTemplate): boolean {
+function updateTemplate(template: SerializedComfyBoxTemplate): boolean {
     const state = get(store);
     if (!state.templatesByID[template.id]) {
         return false;
@@ -67,13 +83,14 @@ function update(template: SerializedComfyBoxTemplate): boolean {
 
     store.update(s => {
         const oldId = template.id
-        const index = s.templates.findIndex(t => t.id === oldId)
-        s.templates.splice(index, 1);
+        const templateList = getTemplateList(template, s)
+        const index = templateList.findIndex(t => t.id === oldId)
+        templateList.splice(index, 1);
         delete s.templatesByID[oldId];
 
         template.id = uuidv4();
 
-        s.templates.push(template);
+        templateList.push(template);
         s.templatesByID[template.id] = template;
         return s;
     })
@@ -84,12 +101,26 @@ function update(template: SerializedComfyBoxTemplate): boolean {
 }
 
 function save() {
-    const json = JSON.stringify(get(store).templates)
+    const json = JSON.stringify(get(store).userTemplates)
     localStorage.setItem("templates", json)
     store.set(get(store))
 }
 
-function load() {
+function load(builtInTemplates: SerializedComfyBoxTemplate[]) {
+    store.update(s => {
+        s.userTemplates = []
+        s.templatesByID = {}
+
+        for (const t of builtInTemplates) {
+            t.isBuiltIn = true;
+            s.templatesByID[t.id] = t;
+        }
+
+        s.builtInTemplates = builtInTemplates;
+
+        return s
+    })
+
     const json = localStorage.getItem("templates")
     if (!json) {
         console.info("No templates in local storage, creating store")
@@ -100,18 +131,15 @@ function load() {
     const data = JSON.parse(json) as SerializedComfyBoxTemplate[];
     if (Array.isArray(data)) {
         const templatesByID: Record<UUID, SerializedComfyBoxTemplate> =
-            data.map(d => [d.id, d])
-                .reduce((dict, el: [UUID, SerializedComfyBoxTemplate]) => (dict[el[0]] = el[1], dict), {})
+            data.map(t => {
+                t.isBuiltIn = false;
+                return [t.id, t]
+            }).reduce((dict, el: [UUID, SerializedComfyBoxTemplate]) => (dict[el[0]] = el[1], dict), {})
 
-        store.set({
-            templates: data,
-            templatesByID
-        })
-    }
-    else {
-        store.set({
-            templates: [],
-            templatesByID: {}
+        store.update(s => {
+            s.userTemplates = data
+            s.templatesByID = { ...s.templatesByID, ...templatesByID }
+            return s;
         })
     }
 }
@@ -119,10 +147,11 @@ function load() {
 const templateStateStore: WritableTemplateStateStore =
 {
     ...store,
-    add,
-    remove,
-    update,
+    getAllTemplates,
+    addTemplate,
+    removeTemplate,
+    updateTemplate,
     save,
-    load,
+    load
 }
 export default templateStateStore;