refactoring + move storage to helpers for compatibility

extension/helpers.js

@@ -6,15 +6,25 @@
 
 'use strict';
 
-import './dep/markdown-it.min.js';
-
 export const ERROR = Symbol();
 
 export const env = {};
 env.name = 'browser';
 
-env.openEnhancerMenu = ({ theme } = {}) =>
+env.openEnhancerMenu = () => chrome.runtime.sendMessage({ type: 'enhancerMenu.open' });
-  chrome.runtime.sendMessage({ type: 'enhancerMenu.open', data: { theme } });
+
+/** - */
+
+export const storage = {};
+
+storage.set = (id, key, value) =>
+  new Promise((res, rej) => chrome.storage.sync.set({ [`[${id}]${key}`]: value }, res));
+storage.get = (id, key) =>
+  new Promise((res, rej) =>
+    chrome.storage.sync.get([`[${id}]${key}`], (values) => res(values[`[${id}]${key}`]))
+  );
+
+/** - */
 
 export const web = {};
 
@@ -66,17 +76,6 @@ web.escapeHtml = (str) =>
 // https://marketplace.visualstudio.com/items?itemName=bierner.lit-html
 web.html = (html, ...templates) => html.map((str) => str + (templates.shift() || '')).join('');
 
-web.Prism = async () => {
-  try {
-    return Prism;
-  } catch {
-    await import('./dep/prism.js');
-    Prism.manual = true;
-    web.loadStyleset('./dep/prism.css');
-  }
-  return Prism;
-};
-
 /**
  * @param {string} sheet
  */
@@ -116,6 +115,37 @@ web.hotkeyListener = (keys, callback) => {
   web._hotkeys.push({ keys, callback });
 };
 
+/** - */
+
+export const fmt = {};
+
+import './dep/prism.js';
+fmt.Prism = Prism;
+fmt.Prism.manual = true;
+fmt.Prism.hooks.add('complete', (event) => {
+  if (!fmt.Prism._stylesheetLoaded) {
+    web.loadStyleset('./dep/prism.css');
+    fmt.Prism._stylesheetLoaded = true;
+  }
+});
+// delete globalThis['Prism'];
+
+import './dep/markdown-it.min.js';
+fmt.md = new markdownit({
+  linkify: true,
+  highlight: (str, lang) =>
+    web.html`<pre${lang ? ` class="language-${lang}"` : ''}><code>${web.escapeHtml(
+      str
+    )}</code></pre>`,
+});
+fmt.md.renderer.rules.code_block = (tokens, idx, options, env, slf) =>
+  web.html`<pre${slf.renderAttrs(tokens[idx])}><code>${web.escapeHtml(
+    tokens[idx].content
+  )}</code></pre>\n`;
+// delete globalThis['markdownit'];
+
+/** - */
+
 export const fs = {};
 
 /**
@@ -133,6 +163,8 @@ fs.isFile = async (path) => {
   }
 };
 
+/** - */
+
 export const regexers = {
   uuid(str) {
     const match = str.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i);
@@ -166,6 +198,8 @@ export const regexers = {
   },
 };
 
+/** - */
+
 export const registry = {};
 
 registry.validate = async (mod, err, check) => {
@@ -391,15 +425,3 @@ registry.errors = async (callback = () => {}) => {
   callback(registry._errors);
   return registry._errors;
 };
-
-export const markdown = new markdownit({
-  linkify: true,
-  highlight: (str, lang) =>
-    web.html`<pre${lang ? ` class="language-${lang}"` : ''}><code>${web.escapeHtml(
-      str
-    )}</code></pre>`,
-});
-markdown.renderer.rules.code_block = (tokens, idx, options, env, slf) =>
-  web.html`<pre${slf.renderAttrs(tokens[idx])}><code>${web.escapeHtml(
-    tokens[idx].content
-  )}</code></pre>\n`;

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.js

@@ -6,7 +6,8 @@
 
 'use strict';
 
-import { web, fs, env } from '../../helpers.js';
+const _id = 'a6621988-551d-495a-97d8-3c568bca2e9e';
+import { env, storage, web, fs } from '../../helpers.js';
 
 const sidebarSelector =
   '#notion-app > div > div.notion-cursor-listener > div.notion-sidebar-container > div > div > div > div:nth-child(4)';
@@ -16,15 +17,10 @@ web.whenReady([sidebarSelector], async () => {
       `<div class="enhancer--sidebarMenuTrigger" role="button" tabindex="0"><div><div>${enhancerIcon}</div><div><div>notion-enhancer</div></div></div></div>`
     );
   const setTheme = () =>
-    new Promise((res, rej) =>
+    storage.set(_id, 'theme', document.querySelector('.notion-dark-theme') ? 'dark' : 'light');
-      chrome.storage.local.set(
+  enhancerSidebarElement.addEventListener('click', () => {
-        { 'notion.theme': document.querySelector('.notion-dark-theme') ? 'dark' : 'light' },
+    setTheme().then(env.openEnhancerMenu);
-        res
+  });
-      )
-    );
-  enhancerSidebarElement.addEventListener('click', () =>
-    setTheme().then(env.openEnhancerMenu)
-  );
   window.addEventListener('focus', setTheme);
   window.addEventListener('blur', setTheme);
   setTheme();

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js

@@ -6,7 +6,8 @@
 
 'use strict';
 
-import { web, fs, registry, markdown } from '../../helpers.js';
+const _id = 'a6621988-551d-495a-97d8-3c568bca2e9e';
+import { storage, web, fmt, fs, registry } from '../../helpers.js';
 
 for (let mod of await registry.get()) {
   for (let sheet of mod.css?.menu || []) {
@@ -42,7 +43,7 @@ components.card = {
     </ul>`),
   description: ({ description }) =>
     web.createElement(
-      web.html`<p class="library--description">${markdown.renderInline(description)}</p>`
+      web.html`<p class="library--description">${fmt.md.renderInline(description)}</p>`
     ),
   authors: ({ authors }) =>
     web.createElement(web.html`<ul class="library--authors">
@@ -129,7 +130,6 @@ components.options = {
       <p>${web.escapeHtml(label)}</p>
       <input id="number--${web.escapeHtml(`${id}.${key}`)}" type="number" />
     </label>`),
-
   async file(id, { key, label, extensions }) {
     const opt = web.createElement(web.html`<label
       for="file--${web.escapeHtml(`${id}.${key}`)}"
@@ -187,11 +187,11 @@ components.documentation = {
     const readme = web.createElement(web.html`<article class="documentation--body">
       ${
         (await fs.isFile(`repo/${mod._dir}/README.md`))
-          ? markdown.render(await fs.getText(`repo/${mod._dir}/README.md`))
+          ? fmt.md.render(await fs.getText(`repo/${mod._dir}/README.md`))
           : ''
       }
     </article>`);
-    (await web.Prism()).highlightAllUnder(readme);
+    fmt.Prism.highlightAllUnder(readme);
     return readme;
   },
 };
@@ -290,10 +290,10 @@ window.addEventListener('popstate', (ev) => {
   if (ev.state) views._load();
 });
 
-function theme() {
+async function theme() {
-  chrome.storage.local.get(['notion.theme'], (result) => {
+  document.documentElement.className = `notion-${
-    document.documentElement.className = `notion-${result['notion.theme'] || 'dark'}-theme`;
+    (await storage.get(_id, 'theme')) || 'dark'
-  });
+  }-theme`;
 }
 window.addEventListener('focus', theme);
 theme();