Fix regressions from refactoring

Author: salmenf

@webwriter/core/model/stores/packagestore.ts

@@ -6,6 +6,7 @@ import { CustomElementsManifest, ManifestCustomElementDeclaration, ManifestDecla
 import {version as appVersion} from "../../package.json"
 import { licenses, presets } from "../templates"
 import { ImportMap } from "@jspm/import-map"
+import { toJS } from "mobx"
 
 type Options = {
   corePackages?: Package["name"][]
@@ -75,6 +76,8 @@ export class PackageStore {
 
   importMap: ImportMap
 
+  resetOnInitialize = false
+
   static allowedOrgs = [
     "@webwriter"
   ]
@@ -364,20 +367,60 @@ export class PackageStore {
     return Object.fromEntries(Object.keys(this.packages).map(name => [unscopePackageName(name), this.packages[name]]))
   }
 
-  async initialize(force=false) {
+  async initialize() {
+    if(this.resetOnInitialize) {
+      try {
+        await this.reset()
+      }
+      catch(err) {
+        console.error(err)
+      }
+    }
     return this.load()
   }
 
+  async reset() {
+    const resetOnInitialize = this.resetOnInitialize
+    
+    localStorage.clear()
+    sessionStorage.clear()
+    
+    const cacheKeys = await caches.keys()
+    await Promise.all(cacheKeys.map(key => caches.delete(key)))
+
+    const db = indexedDB.open("webwriter", 1)
+    await new Promise(r => db.addEventListener("success", r))
+    if(db.result.objectStoreNames.contains("handles")) {
+      const tx = db.result.transaction("handles", "readwrite")
+      const store = tx.objectStore("handles")
+      store.clear()
+    }
+    db.result.close()
+
+    /*await new Promise((resolve, reject) => {
+      const req = indexedDB?.deleteDatabase("webwriter")
+      req.addEventListener("success", resolve)
+      req.addEventListener("error", reject)
+      req.addEventListener("blocked", reject)
+    })*/
+    
+    if(resetOnInitialize) {
+      localStorage.setItem("webwriter_settings", JSON.stringify({ui: {resetOnInitialize: true}}))
+    }
+  }
+
   async add(urlOrHandle: string | FileSystemDirectoryHandle, name?: string) {
     const id = typeof urlOrHandle === "string"? urlOrHandle: name!
     const pkg = Package.fromID(id)
     const matchingPkg = this.installed.find(match => pkg.name === match.name)
-    const cancelled = matchingPkg && !confirm(`Installing ${id} requires uninstalling ${matchingPkg.id}. Do you want to continue?`)
-    if(matchingPkg && cancelled) {
-      return
-    }
-    else if(matchingPkg && !cancelled) {
-      await new Promise(async r => this.pmQueue.push({command: "remove", parameters: [matchingPkg.id], cwd: await this.appDir, name: matchingPkg.id}, r))
+    if(matchingPkg) {
+      const cancelled = !confirm(`Installing ${id} requires uninstalling ${matchingPkg.id}. Do you want to continue?`)
+      if(cancelled) {
+        return
+      }
+      else {
+        await new Promise(async r => this.pmQueue.push({command: "remove", parameters: [matchingPkg.id], cwd: await this.appDir, name: matchingPkg.id}, r))
+      }
     }
 
     if(typeof urlOrHandle === "string") {
@@ -622,7 +665,7 @@ export class PackageStore {
   }
 
   async getLocalHandle(id: string): Promise<FileSystemDirectoryHandle> {
-    const db = indexedDB.open("webwriter")
+    const db = indexedDB.open("webwriter", 1)
     await new Promise(r => db.addEventListener("success", r))
     const tx = db.result.transaction("handles", "readwrite")
     const store = tx.objectStore("handles")

@webwriter/core/model/stores/rootstore.ts

@@ -29,8 +29,8 @@ export class RootStore {
   constructor({corePackages, apiBase, settings, initializePackages}: AllOptions) {
     const onBundleChange = this.onBundleChange
     this.ui = new UIStore({...settings?.ui})
-    this.packages = new PackageStore({...settings?.packages, corePackages, initializePackages, apiBase})
-    this.accounts = new AccountStore(settings?.accounts.accounts)
+    this.packages = new PackageStore({...settings?.packages, corePackages, initializePackages, apiBase, resetOnInitialize: this.ui.resetOnInitialize, onBundleChange})
+    this.accounts = new AccountStore(settings?.accounts?.accounts)
     this.document = new DocumentStore({...settings?.document, lang: this.ui.locale, defaultAccount: this.accounts.getAccount("file")}, this.accounts)
   }
 

@webwriter/core/model/stores/uistore.ts

@@ -32,6 +32,7 @@ export class UIStore {
    showUnstable = false
    showUnknown = false
    showSourceEditor = false
+   resetOnInitialize = false
 
    keymap: Record<string, {shortcut: string}> = {}
 

@webwriter/core/view/app/palette/index.ts

@@ -960,11 +960,11 @@ export class Palette extends LitElement {
   }
 
   AddLocalPackageButton() {
-    const importingName = msg("Local Package")
+    const importingName = undefined
     const disabled = !this.app.store.accounts.getClient("file", "file")?.showOpenFilePickerSupported
     return html`<sl-card id="add-local" class=${classMap({"package-card": true})} @click=${() => !disabled && (this.packageFormMode = "create")} ?inert=${!!importingName} ?data-disabled=${disabled} title=${disabled? "This is a feature for developers. It only works in Chromium-based browsers with the File System Access API enabled (Chrome, Edge, etc.).": ""}>
       <sl-icon name="plus"></sl-icon>
-      <div>${importingName? prettifyPackageName(importingName): msg(" Create/import")}</div>
+      <div>${importingName ?? msg(" Create/import")}</div>
       <sl-progress-bar ?indeterminate=${!!importingName}></sl-progress-bar>
     </span>
 	</sl-card>`

@webwriter/core/viewmodel/index.ts

@@ -87,7 +87,7 @@ export const ViewModelMixin = (cls: LitElementConstructor, isSettings=false) =>
           button.remove()
         } 
       }
-      await this.store.packages.load()
+      await this.store.packages.initialize()
       this.requestUpdate()
       this.initializing = false
       document.body.classList.add("loaded")

@webwriter/core/viewmodel/settingscontroller/index.ts

@@ -163,6 +163,16 @@ export class SettingsController implements ReactiveController {
             ),
           label: msg("Show source editing commands"),
         },
+        resetOnInitialize: {
+          schema: z
+            .boolean()
+            .describe(
+              msg(
+                "Advanced: Reset all WebWriter data each time the page is loaded - for debugging purposes."
+              )
+            ),
+          label: msg("Reset all app data on page load"),
+        },
         /*showTextPlaceholder: {
           schema: z
             .boolean()