chore: Update import paths for db module in components

src/db/db.js

@@ -63,7 +63,7 @@ export class HazeDB extends Dexie {
     /** @type {Dexie.Table<File, number>} */
     this.files = this.table("files");
 
-    /** @type {Dexie.Table<Save, number>} */
+    /** @type {Dexie.Table<Save, number | string>} */
     this.save = this.table("save");
 
     /** @type {Dexie.Table<Plugin, number>} */

src/db/table/changes.js

@@ -11,7 +11,7 @@ import { db } from '../db';
 /**
  * @typedef {object} ChangeDB
  * @property {() => Promise<Change[]>} getAllChanges - Get all changes
- * @property {(id: number) => Promise<Change>} getChange - Get a change by id
+ * @property {(id: number) => Promise<Change[]>} getChange - Get a change by id
  * @property {(change: Change) => Promise<number>} addChange - Add a new change
  * @property {(id: number, change: Change) => Promise<number>} updateChange - Update a change by id
  * @property {(id: number) => Promise<void>} deleteChange - Delete a change by id
@@ -26,11 +26,13 @@ export const changeDB = {
     },
 
     getChange: async (id) => {
-        return await db.changes.get(id);
+        return await db.changes.where("commentId")
+        .equals(id)
+        .toArray();
     },
 
     addChange: async (change) => {
-        return await db.changes.add(change);
+        return await db.changes.put(change);
     },
 
     updateChange: async (id, change) => {

src/db/table/comments.js

@@ -34,6 +34,8 @@ export const commentDB = {
         return await db.comments.add(comment);
     },
 
+
+
     updateComment: async (id, comment) => {
         return await db.comments.update(id, comment);
     },

src/db/table/files.js

@@ -11,6 +11,7 @@ import { db } from '../db';
  * @property {() => Promise<File[]>} getAllFiles - Get all files
  * @property {(id: number) => Promise<File>} getFile - Get a file by id
  * @property {(file: File) => Promise<number>} addFile - Add a new file
+ * @property {(file: File[]) => Promise<number>} addBulk - Add a new files
  * @property {(id: number, file: File) => Promise<number>} updateFile - Update a file by id
  * @property {(id: number) => Promise<void>} deleteFile - Delete a file by id
  */
@@ -45,6 +46,10 @@ export const fileDB = {
         return await db.files.add(file);
     },
 
+    addBulk: async (files) => {
+        return await db.files.bulkPut(files);
+    },
+
     /**
      * Update a file by id
      * @param {number} id - The id of the file to update
@@ -55,6 +60,8 @@ export const fileDB = {
         return await db.files.update(id, file);
     },
 
+
+
     /**
      * Delete a file by id
      * @param {number} id - The id of the file to delete

src/db/table/libs.js

@@ -2,7 +2,7 @@ import { db } from '../db';
 
 /**
  * @typedef {object} Lib
- * @property {number} id
+ * @property {number} [id]
  * @property {string} name
  * @property {string} file
  * @property {string} type

src/db/table/save.js

@@ -10,7 +10,7 @@ import { db } from '../db';
  * @typedef {object} SaveDB
  * @property {() => Promise<Save[]>} getAllSaves - Get all saves
  * @property {(id: number) => Promise<Save>} getSave - Get a save by id
- * @property {(save: Save) => Promise<number>} addSave - Add a new save
+ * @property {(save: Save) => Promise<number | string>} addSave - Add a new save
  * @property {(id: number, save: Save) => Promise<number>} updateSave - Update a save by id
  * @property {(id: number) => Promise<void>} deleteSave - Delete a save by id
  */
@@ -29,22 +29,26 @@ export const saveDB = {
 
     /**
      * Get a save by id
-     * @param {number} id - The id of the save
+     * @param {number | string} id - The id of the save
      * @returns {Promise<Save>} - A promise that resolves to the save object
      */
     getSave: async (id) => {
         return await db.save.get(id);
     },
 
+
+
     /**
      * Add a new save
      * @param {Save} save - The save object to add
-     * @returns {Promise<number>} - A promise that resolves to the ID of the added save
+     * @returns {Promise<number|string>} - A promise that resolves to the ID of the added save
      */
     addSave: async (save) => {
         return await db.save.add(save);
     },
 
+
+
     /**
      * Update a save by id
      * @param {number} id - The id of the save to update

src/js/changes.js

@@ -1,37 +1,41 @@
 // @ts-nocheck
-import { db } from "../db/db";
+import { branchDB, changeDB, commentDB, fileDB, saveDB } from "../db/db";
 import * as Diff from "diff";
 import { Err, Success, toast } from "./toast";
 import { Co } from "./confirm";
 
 export const commitFiles = async function (comment = "") {
-   let added = 0;
+  let added = 0;
   let removed = 0;
   // current
-  const html = await db.save.get("html").then((file) => {
+  const html = await saveDB.get("html").then((file) => {
     return file?.content || "";
   });
-  const css = await db.save.get("css").then((file) => {
+
+  const css = await saveDB.get("css").then((file) => {
     return file?.content || "";
   });
-  const js = await db.save.get("js").then((file) => {
+
+  const js = await saveDB.get("js").then((file) => {
     return file?.content || "";
   });
 
   // previous
-  const htmlStored = await db.files.get("html").then((file) => {
+  const htmlStored = await fileDB.get("html").then((file) => {
     if (file) {
       return file?.content;
     }
     return "";
   });
-  const cssStored = await db.files.get("css").then((file) => {
+
+  const cssStored = await fileDB.get("css").then((file) => {
     if (file) {
       return file?.content;
     }
     return "";
   });
-  const jsStored = await db.files.get("js").then((file) => {
+
+  const jsStored = await fileDB.get("js").then((file) => {
     if (file) {
       return file?.content;
     }
@@ -41,6 +45,7 @@ export const commitFiles = async function (comment = "") {
   const options = {
     ignoreWhitespace: true,
   };
+
   // diff html, css, and js in parallel
   const [htmlDifferences, cssDifferences, jsDifferences] = await Promise.all([
     Diff.diffLines(htmlStored, html, options),
@@ -73,7 +78,6 @@ export const commitFiles = async function (comment = "") {
     }
   });
 
-
   // Insert the changes into the `changes` table
   const differences = [htmlDifferences, cssDifferences, jsDifferences];
   const filesChanged = differences.reduce(
@@ -84,20 +88,23 @@ export const commitFiles = async function (comment = "") {
   if (!filesChanged.length) return;
   if (comment == "") return;
 
-  let commentId = await commitComment({comment,changes:{added, removed}}).then((id) => {
+  let commentId = await commitComment({
+    comment,
+    changes: { added, removed },
+  }).then((id) => {
     return id;
   });
 
   const store = { commentId, files: filesChanged, differences };
-  await db.changes.put(store);
+  await changeDB.addChange(store);
   const files = [
     { name: "html", content: html },
     { name: "css", content: css },
     { name: "js", content: js },
   ];
 
-  // @ts-ignore
-  db.files.bulkPut(files);
+  await fileDB.addBulk(files);
+
   return true;
 };
 
@@ -108,9 +115,9 @@ function didItChange(file) {
   return false;
 }
 
-export async function commitComment(comment , user = 1) {
-  let id = await db.comments
-    .add({
+export async function commitComment(comment, user = 1) {
+  let id = await commentDB
+    .addComment({
       comment: comment.comment,
       userId: user,
       changes: comment.changes,
@@ -125,14 +132,13 @@ export async function commitComment(comment , user = 1) {
 export const getChanges = async function (commentId) {
   try {
     // As an array, get the changes where the commentId matches
-    const changes = await db.changes
-      .where("commentId")
-      .equals(commentId)
-      .toArray();
+    const changes = await changeDB.getChange(commentId);
+
 
     return changes;
   } catch (err) {
     Err("Failed to get changes");
+    console.error(err);
     return false;
   }
 };
@@ -144,15 +150,15 @@ export const clear = async function () {
   if (await result) {
     // User confirmed clearing
     await Promise.all([
-      db.changes.clear(),
-      db.comments.clear(),
-      db.files.clear(),
-      db.branches.clear(),
+      commentDB.clear(),
+      changeDB.clear(),
+      fileDB.clear(),
+      branchDB.clear(),
     ]);
     Success("data Cleared");
     return true;
   } else {
     toast("Cancelled", "info");
-    return false
+    return false;
   }
 };

src/js/plugin-config.js

@@ -0,0 +1,10 @@
+const PluginGistID = "63b21fc999c51181d023346032e25f1a";
+
+let baseUrl = "https://api.github.com/gists/";
+
+export async function getPluginUrl() {
+  let url = baseUrl + PluginGistID;
+  let response = await fetch(url);
+  let data = await response.json();
+  return data.files["plugins.json"].raw_url;
+}

src/js/plugin.js

@@ -3,8 +3,11 @@ import { DB, db } from "../db/db";
 import { setThemeMode } from "./editor";
 import { Err } from "./toast";
 
+
+
 const cacheName = "plugin-cache";
 const cache = await caches.open(cacheName);
+
 export async function installPlugin(plugin) {
   try {
     const response = await fetch(plugin.file, { cache: "no-cache" });

src/js/template.js

@@ -4,14 +4,15 @@ import { settings } from "../store";
 const libs = await db.libs.toArray();
 let csslibs = "";
 let jslibs = "";
-let meta = '';
+let meta = "";
+
 async function getLibs() {
   csslibs = "";
   jslibs = "";
   await libs
     .filter((lib) => lib.type === "css" && lib.active)
     .forEach((lib) => {
-        csslibs += `<link rel="stylesheet" href="${lib.file}" />\n`;
+      csslibs += `<link rel="stylesheet" href="${lib.file}" />\n`;
     });
 
   await libs
@@ -21,9 +22,20 @@ async function getLibs() {
     });
 }
 
+let consoleMessage = `
+(function () {
+  var consoleMethods = ["log", "error", "warn", "info"];
+  consoleMethods.forEach(function (method) {
+    console[method] = function (message) {
+      window.parent.postMessage({ type: method, message: message }, "*");
+    };
+  });
+})();
+`;
+
 settings.subscribe(async (s) => {
   meta = await s.metaData.value;
-})
+});
 
 export async function createTemplate(html, css, js) {
   await getLibs();
@@ -46,7 +58,14 @@ export async function createTemplate(html, css, js) {
           </style>
         </head>
         <body>${html || ""}
-          <script>${js}</script>
+          <script>
+          ${consoleMessage}
+          try {
+          ${js}
+          } catch (error) {
+            console.error(error);
+          }
+          </script>
         </body>
       </html>
     `;

src/lib/changes/changes.svelte

@@ -2,23 +2,23 @@
   import ChangesMain from "./changesMain.svelte";
   import { getChanges } from "../../js/changes";
   import ChangesSidebar from "./changesSidebar.svelte";
+  
   let changes;
-  let commentsNumber = 0;
-  async function handleSelect(event) {     
-     let c = null;
+  let commentsNumber = 1;
+  async function handleSelect(event) {
+    let c = null;
     if (event.detail == "latest") {
-       c = await getChanges(commentsNumber);
+      c = await getChanges(commentsNumber);
     } else {
-       c = await getChanges(event.detail.id);
+      c = await getChanges(event.detail.id);
     }
-    
+
     changes = c[0];
   }
 
   async function handleNumber(event) {
     commentsNumber = event.detail;
   }
-
 </script>
 
 <div class="s12 m6 l3">