From e8f7d61ed014134a07c4de72df0c68789f33f2f4 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Fri, 20 Jun 2025 14:00:54 +0200
Subject: [PATCH] feat: :sparkles: add wrapper around sessionStorage API

The native 'storage' event does not fire on the same browsing context if a change to the store happens, so wrapping the sessionStorage API is necessary to work around this limitation
---
 src/components/head/page-head-script.webc | 70 +++++++++++++++++++++++
 src/layouts/base.webc                     |  1 +
 2 files changed, 71 insertions(+)
 create mode 100644 src/components/head/page-head-script.webc

diff --git a/src/components/head/page-head-script.webc b/src/components/head/page-head-script.webc
new file mode 100644
index 0000000..75f88c2
--- /dev/null
+++ b/src/components/head/page-head-script.webc
@@ -0,0 +1,70 @@
+<script>
+  const storageHandler = {
+    get(target, prop) {
+      switch (prop) {
+        case 'setItem':
+          return function (...args) {
+            const [key, value] = args;
+            // Add additional logic here, such as logging or validation
+            console.log(`Setting key "${key}" to value "${value}"`);
+            updateDom(key, value);
+            target[key] = value;
+          };
+
+        case 'getItem':
+          return function (...args) {
+            const [key] = args;
+            // Add additional logic here, such as logging or validation
+            console.log(`Getting key "${key}"`);
+            return target[key];
+          };
+
+        case 'removeItem':
+          return function (...args) {
+            const [key] = args;
+            // Add additional logic here, such as logging or validation
+            console.log(`Removing key "${key}"`);
+            delete target[key];
+          };
+
+        case 'clear':
+          return function () {
+            // Add additional logic here, such as logging or validation
+            console.log('Clearing all sessionStorage');
+            for (let key in target) {
+              if (target.hasOwnProperty(key)) {
+                delete target[key];
+              }
+            }
+          };
+        default:
+          return target[prop];
+      }
+    },
+    set(target, prop, value) {
+      // Add additional logic here, such as validation or constraints
+      console.log(`Setting key "${prop}" to value "${value}"`);
+      target[prop] = value;
+      return true;
+    },
+    deleteProperty(target, prop) {
+      // Add additional logic here, such as logging or validation
+      console.log(`Deleting key "${prop}"`);
+      delete target[prop];
+      return true;
+    }
+  };
+
+  const storeProxy = new Proxy(sessionStorage, storageHandler);
+
+  const updateDom = (key, value) => {
+    if (key === 'isHorny') {
+      value ? document.body.classList.add('nsfw') : document.body.classList.remove('nsfw');
+    }
+  };
+
+  // Usage example:
+  storeProxy.getItem('isHorny') === 'true'
+    ? document.body.classList.add('nsfw')
+    : document.body.classList.remove('nsfw');
+</script>
diff --git a/src/layouts/base.webc b/src/layouts/base.webc
index 99198b5..2d791f6 100644
--- a/src/layouts/base.webc
+++ b/src/layouts/base.webc
@@ -9,6 +9,7 @@
     <template webc:is="page-head-fonts" webc:nokeep></template>
     <template webc:is="page-head-colors" webc:nokeep></template>
     <template webc:is="page-head-style" webc:nokeep></template>
+    <template webc:is="page-head-script" webc:nokeep></template>
 
     <link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
     <script type="module" :src="getBundleFileUrl('js')" webc:keep></script>