MP, settings an other things are now done.

server/server.ts

@@ -58,7 +58,7 @@ if (parsedDoc.marketplace.enabled) {
 
 await app.register(fastifyMiddie);
 
-//app.use(ssrHandler);
+app.use(ssrHandler);
 
 const port: number =
     parseInt(process.env.PORT as string) || parsedDoc.server.server.port || parseInt("8080");

src/pages/[lang]/catalog/[...page].astro

@@ -2,7 +2,7 @@
 import CatalogCard from "@components/catalog/CatalogCard.astro";
 import Layout from "@layouts/Layout.astro";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
-import Pagnation from "./pagnation.astro";
+import Pagination from "./pagination.astro";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 
@@ -39,8 +39,8 @@ const lastPage = assetsJson.pages;
       <a href={`/${lang}/catalog/${nextPage}`} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{nextPage}</a>
         )
       }
-      {/* Pagnation input */}
+      {/* Pagination input */}
-      <Pagnation />
+      <Pagination />
       {/* The last page. If the user is on this page, don't show it. */}
       {page != lastPage && (
       <a href={`/${lang}/catalog/${assetsJson.pages}`} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">

src/pages/[lang]/catalog/package/[...packageName].astro

@@ -89,97 +89,97 @@ const assetsJson = await response.json();
       )
     }
   </div>
-  <variable-define
+  <package-vars data-assets={JSON.stringify(assetsJson)} data-name={packageName} data-type={assetsJson.type}></package-vars>
-    data-assets={JSON.stringify(assetsJson)}
-    data-name={packageName}
-    data-type={assetsJson.type}></variable-define>
 </Layout>
 <script>
-  import { pageLoad } from "@utils/events";
+    import { Elements } from "@utils/index";
-  import { settings, Settings, type PackageType } from "@utils/settings/index";
+    import { Marketplace } from "@utils/marketplace"; 
-  import type { SWPagePlugin } from "@utils/settings/types";
+
-  let packageName: string;
+    const init = async () => {
-  let assetsJson: any;
+        await Marketplace.ready();
-  let packageType: string;
+        const marketplace = Marketplace.getInstances().next().value!;
-  //some weird trickery to get the variables.
+        const elements = Elements.select([
-  class VariableDefiner extends HTMLElement {
+            { type: 'id', val: 'install' },
-    constructor() {
+            { type: 'id', val: 'uninstall' }
-      super();
+        ]);
-      assetsJson = this.dataset.assets;
+        return { marketplace, elements };
-      packageName = this.dataset.name as string;
+    }; 
-      packageType = this.dataset.type as PackageType;
+
-    }
+     const handleThemes = async (marketplace: Marketplace, name: string, assets: any) => {
-  }
+        const { exists } = await marketplace.getThemes(name);
-  customElements.define("variable-define", VariableDefiner);
+        if (!exists) {
-  const fn = () => {
+            await marketplace.installTheme({ name: name });
-    const cssItems =
+            await marketplace.theme({
-      JSON.parse(
+                type: 'normal',
-        localStorage.getItem(Settings.AppearanceSettings.themes) as string
+                payload: assets.payload,
-      ) || [];
+                name: name,
-    const cssItemExists = cssItems.indexOf(packageName) !== -1;
+                sources: {
-    const pluginItems =
+                    video: assets.background_video,
-      JSON.parse(
+                    bg: assets.background_image
-        localStorage.getItem(Settings.PluginSettings.plugins) as string
-      ) || [];
-    //@ts-ignore
-    const pluginItemExists = pluginItems.find(
-      //@ts-ignore
-      ({ name, remove }) => name === packageName && remove !== true
-    );
-    const installButton = document.getElementById(
-      "install"
-    ) as HTMLButtonElement;
-    const uninstallButton = document.getElementById(
-      "uninstall"
-    ) as HTMLButtonElement;
-    const payload = assetsJson ? JSON.parse(assetsJson) : undefined;
-    if (cssItemExists || pluginItemExists) {
-      uninstallButton.classList.remove("hidden");
-      installButton.classList.add("hidden");
-    }
-    installButton.addEventListener("click", () => {
-      console.log(payload);
-      settings.marketPlaceSettings
-        .install(
-          payload.type === "theme"
-            ? {
-                theme: {
-                  payload: payload.payload,
-                  video: payload.background_video,
-                  bgImage: payload.background_image,
-                },
-              }
-            : payload.type === "plugin-page"
-              ? {
-                  plugin: {
-                    name: packageName,
-                    src: payload.payload,
-                    type: "page",
-                  },
                 }
-              : {
+            });
-                  plugin: {
+        }
-                    name: packageName,
+        else {
-                    src: payload.payload,
+            await marketplace.theme({ type: 'remove', name: name });
-                    type: "serviceWorker",
+            await marketplace.uninstallTheme({ name: name });
-                  },
+        }
-                },
+    } 
-          packageName,
+
-          payload.payload
+     const handlePlugins = async (marketplace: Marketplace, name: string, assets: any) => {
-        )
+         const { plug } = await marketplace.getPlugins(name);
-        .then(() => {
+         console.log(plug);
-          installButton.classList.add("hidden");
+         console.log(assets);
-          uninstallButton.classList.remove("hidden");
+         if (!plug || plug.remove === true) {
-        });
+             await marketplace.installPlugin({
-    });
+                 name: name,
-    uninstallButton.addEventListener("click", () => {
+                 src: assets.payload,
-      settings.marketPlaceSettings
+                 type: assets.type === "plugin-page" ? "page": "serviceWorker"
-        .uninstall(packageType as PackageType, packageName)
+             });
-        .then(() => {
+             return;
-          uninstallButton.classList.add("hidden");
+         }
-          installButton.classList.remove("hidden");
+         await marketplace.uninstallPlugin({
-        });
+             name: name,
-    });
+             type: assets.type === "plugin-page" ? "page": "serviceWorker"
-  };
+         });
-  pageLoad(fn);
+     }
+
+    Elements.createCustomElement("package-vars", 
+        async(datasets) => { 
+            const { marketplace, elements } = await init();
+            const { dataAssets, dataName, dataType } = { dataAssets: datasets![0].val, dataName: datasets![1].val, dataType: datasets![2].val };
+            const { exists: themeExists } = await marketplace.getThemes(dataName!);
+            const { plug } = await marketplace.getPlugins(dataName!);
+            console.log(dataName);
+            const installButton = Elements.exists<HTMLButtonElement>(await elements.next());
+            const uninstallButton = Elements.exists<HTMLButtonElement>(await elements.next());
+
+            Elements.attachEvent(installButton, "click", async () => {
+                dataType?.startsWith("plugin") 
+                    ? await handlePlugins(marketplace, dataName!, JSON.parse(dataAssets!) || []) 
+                    : await handleThemes(marketplace, dataName!, JSON.parse(dataAssets!) || []);
+                installButton.classList.add("hidden");
+                uninstallButton.classList.remove("hidden");
+            });
+
+            Elements.attachEvent(uninstallButton, "click", async () => {
+                dataType?.startsWith("plugin") 
+                    ? await handlePlugins(marketplace, dataName!, JSON.parse(dataAssets!) || [])
+                    : await handleThemes(marketplace, dataName!, JSON.parse(dataAssets!) || []);
+                uninstallButton.classList.add("hidden");
+                installButton.classList.remove("hidden");
+            });
+            
+            if (themeExists || (plug && plug.remove === false || plug.remove === undefined)) {
+                installButton.classList.add("hidden");
+                uninstallButton.classList.remove("hidden");
+            }
+        },
+        //Pull in the data elements.
+        [
+            { name: 'assets' },
+            { name: 'name' },
+            { name: 'type' }
+        ]
+    );
+
 </script>

src/pages/[lang]/catalog/pagination.astro

@@ -0,0 +1,27 @@
+<input
+  class="w-10 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+  type="number"
+  id="pageinationInput"
+  placeholder="..."
+/>
+<script>
+    import { EventHandler } from "@utils/events";
+    import { Elements } from "@utils/index";
+    import { navigate } from "astro:transitions/client";
+    new EventHandler({
+        events: {
+            "astro:page-load": async () => {
+                const el = Elements.select([
+                    { type: 'id', val: 'pageinationInput' }
+                ]);
+                const input = Elements.exists<HTMLInputElement>(await el.next());
+                Elements.attachEvent(input, "keyup", (event?: Event) => {
+                    const e = event as KeyboardEvent | undefined;
+                    if (e?.key) return navigate(`${input.value}`);
+                });
+            }
+        },
+        logging: false
+    })
+    .bind();
+</script>

src/pages/[lang]/catalog/pagnation.astro

@@ -1,17 +0,0 @@
-<input
-  class="w-10 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-  type="number"
-  id="pagnation_input"
-  placeholder="..."
-/>
-<script>
-import { pageLoad } from "@utils/events";
-pageLoad(() => {
-    const pagenationInput = document.getElementById('pagnation_input') as HTMLInputElement;
-    pagenationInput?.addEventListener("keyup", function (event) {
-        if (event.key === "Enter") {
-            window.location.href = pagenationInput?.value;
-        }
-    });
-  });
-</script>

src/pages/[lang]/index.astro

@@ -54,9 +54,8 @@ import { VERSION } from "astro:env/client";
     import { search, Elements } from "@utils/index";
     import { BareClient } from "@mercuryworkshop/bare-mux";
     import { defaultStore } from "@utils/storage";
-    import { Settings } from "@utils/settings";
+    import { SW } from "@utils/serviceWorker";
-    import { setTransport, SW } from "@utils/serviceWorker";
+    import { Marketplace } from "@utils/marketplace";
-import { navigate } from "astro:transitions/client";
 
     type Suggestion = {
         phrase: string;
@@ -87,6 +86,8 @@ import { navigate } from "astro:transitions/client";
         const copyright = Elements.exists<HTMLDivElement>(await se.next());
         const iframe = Elements.exists<HTMLIFrameElement>(await se.next());
         const prox = async (input: string, prox: "uv" | "sj") => {
+            await Marketplace.ready();
+            const mp = Marketplace.getInstances().next().value!;
             const sw = SW.getInstances().next().value as SW; 
             iframe.classList.remove("hidden");
             const val = search(
@@ -95,6 +96,8 @@ import { navigate } from "astro:transitions/client";
                 ? SearchEngines[defaultStore.getVal(SettingsVals.proxy.searchEngine)]
                 : SearchEngines.ddg
             );
+            const { serviceWorker } = await sw.getSWInfo();
+            mp.handlePlugins(serviceWorker);
             switch(prox) {
                 case "uv": {
                     iframe.src = `${__uv$config.prefix}${__uv$config.encodeUrl!(val)}`;

src/pages/[lang]/settings/credits.astro

@@ -1,9 +1,7 @@
 ---
-import InstalledThemes from "@components/catalog/InstalledThemes.svelte";
 import Layout from "@layouts/Layout.astro";
 import SettingsLayout from "@layouts/SettingsLayout.astro";
 import SettingsSection from "@layouts/SettingsSection.astro";
-import { Icon } from "astro-icon/components";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);

src/pages/[lang]/settings/pr.astro

@@ -178,10 +178,10 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
 <script>
   import { EventHandler } from "@utils/events";
   import { Elements, toast } from "@utils/index";
-import { defaultStore } from "@utils/storage";
+  import { defaultStore } from "@utils/storage";
-import { SettingsVals } from "@utils/values";
+  import { SettingsVals } from "@utils/values";
-import { Settings } from "@utils/settings";
+  import { Settings } from "@utils/settings";
-import { setTransport, SW } from "@utils/serviceWorker";
+  import { setTransport, SW } from "@utils/serviceWorker";
 
   const init = async (): Promise<AsyncGenerator> => {
       return Elements.select([

src/utils/index.ts

@@ -40,6 +40,11 @@ type Items = {
     val: string 
 }
 
+type ElementDatasets = {
+    name: string,
+    val: string | undefined 
+}
+
 class Elements {
     /** 
         * An async generator function to get your objects quickly and easily.
@@ -75,11 +80,17 @@ class Elements {
         item.addEventListener(event, fn);
     }
 
-    static createCustomElement(name: string, fn: () => unknown) {
+    static createCustomElement(name: string, fn: (datasets?: ElementDatasets[]) => unknown, datasets?: Omit<ElementDatasets, "val">[]) {
         class CustomEl extends HTMLElement {
+            dat: ElementDatasets[] = [];
             constructor() {
                 super();
-                (async () => await fn())();
+                if (datasets) {
+                    datasets.forEach((data) => {
+                        this.dat.push({ name: data.name, val: this.dataset[data.name] });
+                    });
+                }
+                (async () => await fn(this.dat))();
             }
         }
 

src/utils/marketplace.ts

@@ -112,6 +112,24 @@ class Marketplace {
         });
     }
 
+    async getValueFromStore(val: string): Promise<string> {
+        return this.#storage.getVal(val);
+    }
+
+
+    async getThemes(name?: string): Promise<{themes: any, theme: string, exists: Boolean}> {
+        const themes = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.themes)) || [];
+        const theme = themes.find((t: any) => t === name);
+        const exists = themes.indexOf(name) !== -1;
+        return { themes, theme, exists };
+    } 
+
+    async getPlugins(pname?: string): Promise<{plugins: any, plug: any}> {
+        const plugins = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.plugins)) || [];
+        const plug = plugins.find(({ name } : { name: string }) => name === pname );
+        return { plugins, plug }
+    }
+    
     /**
         * Install a theme into both localstorage AND set the theme.
         *
@@ -124,47 +142,39 @@ class Marketplace {
             * //bgImage: pass the BG image here if you have one
         * });
     */
-    async installTheme(theme: Theme) {
+    async installTheme(theme: Omit<Theme, "payload">) {
-        const themes = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.themes)) || [];
+        const { themes, exists } = await this.getThemes(theme.name);
-        if (themes.find((t: any) => t === theme.name)) return log({ type: 'error', bg: false, prefix: false, throw: true }, `${theme.name} is already installed!`)
+        if (exists) return log({ type: 'error', bg: false, prefix: false, throw: true }, `${theme.name} is already installed!`)
         themes.push(theme.name);
         this.#storage.setVal(SettingsVals.marketPlace.themes, JSON.stringify(themes));
     }
 
-    async getValueFromStore(val: string): Promise<string> {
-        return this.#storage.getVal(val);
-    }
-
     async installPlugin(plugin: Plug) {
-        const plugins = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.plugins)) || [];
+        let { plugins, plug } = await this.getPlugins(plugin.name);
-
+        if (plug && plug.remove) { plug.remove = false; console.log(plug); return this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(plugins)) };
-        const plug = plugins.find(({ name }: { name: string }) => name === plugin.name);
-        if (plug && plug.remove === false) return log({ type: 'error', bg: false, prefix: false, throw: true }, `${plugin.name} is already installed!`);
-        if (plug && plug.remove) { plug.remove = false; return this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(plugins)) };
         plugins.push({ name: plugin.name, src: plugin.src, type: plugin.type } as unknown as Plug);
         this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(plugins));
     }
 
     async uninstallTheme(theme: Omit<Theme, "payload" | "video" | "bgImage">) {
-        const items = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.themes)) || [];
+        const { themes: items, exists } = await this.getThemes(theme.name);
-        if (!items.find((th: string) => th === theme.name)) {
+        if (!exists) return log({ type: 'error', bg: false, prefix: false, throw: true }, `Theme: ${theme.name} is not installed!`);
-            return log({ type: 'error', bg: false, prefix: false, throw: true }, `Theme: ${theme.name} is not installed!`);
-        }
         const idx = items.indexOf(theme.name);
         items.splice(idx, 1);
         this.#storage.setVal(SettingsVals.marketPlace.themes, JSON.stringify(items));
     }
 
     async uninstallPlugin(plug: Omit<Plug, "src">) {
-        const items = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.plugins)) || [];
+        let { plugins: items, plug: plugin } = await this.getPlugins(plug.name);
-        const plugin = items.find(({ name }: { name: string }) => name === plug.name);
+
         if (!plugin) return log({ type: 'error', bg: false, prefix: false, throw: true }, `Plugin: ${plug.name} is not installed!`);
         plugin.remove = true;
         this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(items));
     }
 
     async handlePlugins(worker: ServiceWorkerRegistration) {
-        let plugins = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.plugins)) || [];
+        let { plugins } = await this.getPlugins();
+
         const pagePlugins: SWPagePlugin[] = [];
         const swPlugins: SWPlugin[] = [];
         if (plugins.length === 0) return log({ type: 'info', bg: false, prefix: true }, 'No plugins to add! Exiting.');
@@ -172,7 +182,9 @@ class Marketplace {
             if (plugin.type === "page") {
                 const script = await fetch(`/packages/${plugin.name}/${plugin.src}`);
                 const scriptRes = await script.text();
+                console.log(scriptRes);
                 const evaledScript = eval(scriptRes);
+                console.log(evaledScript);
                 const inject = (await evaledScript()) as unknown as SWPagePlugin;
                 if (!plugin.remove) {
                     pagePlugins.push({