@askviraj/linter 1.1.0 → 1.1.3

package/node_modules/@rviscomi/capo.js/src/extension/capo.js

@@ -0,0 +1,93 @@
+import { analyzeHead } from "@rviscomi/capo.js";
+import { BrowserAdapter } from "@rviscomi/capo.js/adapters/browser";
+import { IO } from "@rviscomi/capo.js/lib/io";
+import { Options } from "@rviscomi/capo.js/lib/options";
+
+/**
+ * @param {any} obj
+ * @param {IO} [io]
+ * @returns {any}
+ */
+function sanitizeForStorage(obj, io) {
+  if (obj === null || obj === undefined) {
+    return obj;
+  }
+  if (typeof obj === "object" && (obj.nodeType || (typeof Element !== "undefined" && obj instanceof Element))) {
+    return io ? io.stringifyElement(obj) : (obj.outerHTML || obj.tagName || String(obj));
+  }
+  if (obj instanceof Date) {
+    return obj.toString();
+  }
+  if (Array.isArray(obj)) {
+    return obj.map((item) => sanitizeForStorage(item, io));
+  }
+  if (typeof obj === "object") {
+    /** @type {Record<string, any>} */
+    const clean = {};
+    for (const [key, value] of Object.entries(obj)) {
+      if (key === "element" && value && typeof value === "object" && (value.nodeType || (typeof Element !== "undefined" && value instanceof Element))) {
+        continue;
+      }
+      clean[key] = sanitizeForStorage(value, io);
+    }
+    return clean;
+  }
+  return obj;
+}
+
+/**
+ * @param {IO} io
+ * @returns {Promise<{ actual: Array<{ weight: number, color: string, selector: string, html: string, isValid: boolean, customValidations: any }> }>}
+ */
+async function run(io) {
+  await io.init();
+  const headElement = io.getHead();
+  const adapter = new BrowserAdapter();
+  const result = analyzeHead(headElement, adapter);
+
+  const headWeights = io.logAnalysis(result);
+
+  return {
+    actual: headWeights.map(
+      ({ element, weight, isValid, customValidations }) => {
+        return {
+          weight,
+          color: io.getColor(weight),
+          selector: io.stringifyElement(element),
+          html: element.innerHTML,
+          isValid: Boolean(isValid),
+          customValidations: sanitizeForStorage(customValidations, io),
+        };
+      }
+    ),
+  };
+}
+
+/**
+ * @returns {Promise<Options>}
+ */
+async function initOptions() {
+  const { options } = await chrome.storage.sync.get("options");
+  return new Options(options);
+}
+
+/**
+ * @returns {Promise<void>}
+ */
+async function init() {
+  const options = await initOptions();
+  const io = new IO(document, options);
+
+  const { click } = await chrome.storage.local.get("click");
+  if (click) {
+    io.logElementFromSelector(JSON.parse(click));
+    await chrome.storage.local.remove("click");
+  } else {
+    const data = await run(io);
+    await chrome.storage.local.set({
+      data: data,
+    });
+  }
+}
+
+init();

package/node_modules/@rviscomi/capo.js/src/extension/chrome.js

@@ -0,0 +1,120 @@
+init();
+
+/**
+ * @returns {Promise<chrome.scripting.InjectionTarget>}
+ */
+async function getCurrentTab() {
+  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  if (!tab) {
+    [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+  }
+  return { tabId: tab?.id || 0 };
+}
+
+/**
+ * @returns {Promise<void>}
+ */
+async function init() {
+  chrome.storage.onChanged.addListener((changes) => {
+    console.log("Storage changed", changes);
+    const { data } = changes;
+    if (data?.newValue) {
+      print(data.newValue);
+    }
+  });
+
+  await chrome.storage.local.remove("data");
+
+  await chrome.scripting.executeScript({
+    target: await getCurrentTab(),
+    files: ["capo.js"],
+  });
+
+  const { data } = await chrome.storage.local.get("data");
+  if (data) {
+    print(data);
+  }
+}
+
+/**
+ * @param {any} result
+ */
+function print(result) {
+  console.log("Data", result);
+  const actualEl = document.getElementById("actual");
+  const sortedEl = document.getElementById("sorted");
+
+  if (actualEl) actualEl.textContent = "";
+  if (sortedEl) sortedEl.textContent = "";
+
+  let frag = document.createDocumentFragment();
+  for (let r of result.actual) {
+    frag.appendChild(getCapoHeadElement(r));
+  }
+  if (actualEl) actualEl.appendChild(frag);
+
+  result.sorted = result.actual.slice().sort((/** @type {any} */ a, /** @type {any} */ b) => {
+    return b.weight - a.weight;
+  });
+  frag = document.createDocumentFragment();
+  for (let r of result.sorted) {
+    frag.appendChild(getCapoHeadElement(r));
+  }
+  if (sortedEl) sortedEl.appendChild(frag);
+  document.body.addEventListener("click", handleCapoClick);
+}
+
+/**
+ * @param {Object} params
+ * @param {number} params.weight
+ * @param {string} params.color
+ * @param {string} params.selector
+ * @param {string} params.html
+ * @param {boolean} params.isValid
+ * @param {any} params.customValidations
+ * @returns {HTMLSpanElement}
+ */
+function getCapoHeadElement({
+  weight,
+  color,
+  selector,
+  html,
+  isValid,
+  customValidations,
+}) {
+  const span = document.createElement("span");
+  span.classList.add("capo-head-element");
+  span.classList.toggle("invalid", !isValid);
+  span.dataset.weight = String(weight);
+  span.style.backgroundColor = color;
+  span.dataset.selector = selector;
+  span.dataset.html = html;
+  span.dataset.customValidations = JSON.stringify(customValidations);
+  span.title = `[${weight + 1}] ${selector}`;
+  return span;
+}
+
+/**
+ * @param {MouseEvent} event
+ */
+async function handleCapoClick(event) {
+  const target = /** @type {HTMLElement} */ (event.target);
+  if (!target || !target.dataset) return;
+  const { weight, selector, html } = target.dataset;
+  const customValidations = JSON.parse(target.dataset.customValidations || '{}');
+  const isValid = !target.classList.contains("invalid");
+
+  await chrome.storage.local.set({
+    click: JSON.stringify({
+      weight,
+      selector,
+      html,
+      isValid,
+      customValidations,
+    }),
+  });
+  await chrome.scripting.executeScript({
+    target: await getCurrentTab(),
+    files: ["capo.js"],
+  });
+}

package/node_modules/@rviscomi/capo.js/{crx → src/extension}/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Capo: get your ﹤𝚑𝚎𝚊𝚍﹥ in order",
   "description": "Visualize the optimal ordering of ﹤𝚑𝚎𝚊𝚍﹥ elements on any web page",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "permissions": [
     "scripting",
     "activeTab",

package/node_modules/@rviscomi/capo.js/src/extension/options/options.css

@@ -0,0 +1,81 @@
+:root {
+  --brand: #d53e4f;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --brand: #66c2a5;
+    --brand-5: #2a6a56;
+    --brand-7: #193f33;
+    --brand-shadow: 0 0 10px var(--brand-5), 0 0 25px var(--brand-7);
+  }
+  html {
+    background: var(--gray-9);
+    color: var(--gray-1);
+  }
+  h1 {
+    text-shadow: var(--brand-shadow);
+  }
+  a {
+    text-shadow: var(--brand-shadow);
+  }
+}
+
+:where(html) {
+  background: white;
+  color: var(--gray-8);
+  accent-color: var(--brand, var(--link));
+  font-family: var(--font-sans);
+}
+
+body {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  font-size: var(--font-size-2);
+}
+
+#options {
+  display: grid;
+  grid-gap: 2em 1em;
+  margin: 0 auto;
+}
+
+.option {
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: end;
+  min-height: 2em;
+  min-width: 2em;
+  text-align: end;
+}
+
+label {
+  grid-column: 2 / 3;
+  align-self: center;
+}
+
+header {
+  grid-column: 1 / 3;
+  display: flex;
+}
+
+h1 {
+  margin: 0 0 1rem;
+  font-size: var(--font-size-8);
+  font-weight: var(--font-weight-8);
+  letter-spacing: var(--font-letterspacing-1);
+}
+
+footer {
+  grid-column: 1 / 3;
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--font-size-0);
+}
+
+a {
+  color: var(--link, var(--brand));
+}

package/node_modules/@rviscomi/capo.js/src/extension/options/options.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Capo Options</title>
+    <link rel="stylesheet" href="../styles/open-props.css" />
+    <link rel="stylesheet" href="options.css" />
+  </head>
+  <body class="surface-1">
+    <form id="options">
+      <header>
+        <h1>Capo options</h1>
+      </header>
+      <input id="prefer-static" name="prefer-static" type="checkbox" class="option" />
+      <label for="prefer-static">
+        Prefer to evaluate the static, server-rendered
+        <code>&lt;head></code> (<a href="https://rviscomi.github.io/capo.js/user/config/#static-and-dynamic-evaluation"
+          >learn more</a
+        >)
+      </label>
+
+      <input id="validation" name="validation" type="checkbox" class="option" />
+      <label for="validation">
+        Validate the elements in the <code>&lt;head></code> (<a
+          href="https://rviscomi.github.io/capo.js/user/config/#validation"
+          >learn more</a
+        >)
+      </label>
+
+      <select id="palette" name="palette" class="option"></select>
+      <label for="palette">
+        Color palette (<a href="https://rviscomi.github.io/capo.js/user/config/#built-in-color-palettes">learn more</a>)
+      </label>
+
+      <footer>
+        <p>Options saved automatically</p>
+        <p>
+          <a href="https://rviscomi.github.io/capo.js/user/extension/">rviscomi/capo.js</a>
+        </p>
+      </footer>
+    </form>
+    <script src="options.js" type="module"></script>
+  </body>
+</html>

package/node_modules/@rviscomi/capo.js/src/extension/options.js

@@ -0,0 +1,87 @@
+import { Options } from '../lib/options.js';
+
+/** @type {Options} */
+let options;
+
+/**
+ * @returns {Promise<void>}
+ */
+async function initOptions() {
+  const data = await chrome.storage.sync.get('options');
+  options = new Options(data.options);
+}
+
+function initUI() {
+  const preferStatic = /** @type {HTMLInputElement|null} */ (document.getElementById('prefer-static'));
+  const validation = /** @type {HTMLInputElement|null} */ (document.getElementById('validation'));
+  const palette = /** @type {HTMLSelectElement|null} */ (document.getElementById('palette'));
+
+  if (preferStatic) {
+    preferStatic.checked = options.prefersStaticAssessment();
+    preferStatic.dataset.option = 'PREFERRED_ASSESSMENT_MODE';
+  }
+  if (validation) {
+    validation.checked = options.isValidationEnabled();
+    validation.dataset.option = 'VALIDATION';
+  }
+  
+  if (palette) {
+    Object.entries(Options.Palettes).forEach(([name, value]) => {
+      const option = document.createElement('option');
+      option.textContent = name;
+      option.value = name;
+      option.selected = options.isPreferredPalette(value);
+      option.dataset.colors = JSON.stringify(value);
+      palette.appendChild(option);
+    });
+    palette.dataset.option = 'PALETTE';
+  }
+
+  listenForUpdates();
+}
+
+function listenForUpdates() {
+  const optionsForm = document.getElementById('options');
+  if (optionsForm) {
+    optionsForm.addEventListener('change', handleUpdate);
+  }
+}
+
+/**
+ * @param {Event} event
+ */
+async function handleUpdate(event) {
+  const target = /** @type {HTMLInputElement|HTMLSelectElement} */ (event.target);
+  if (!target || !target.dataset) return;
+
+  const option = target.dataset.option;
+  let value;
+
+  switch (option) {
+    case 'PREFERRED_ASSESSMENT_MODE':
+      value = /** @type {HTMLInputElement} */ (target).checked;
+      options.setPreferredAssessmentModeToStatic(value);
+      break;
+    case 'VALIDATION':
+      value = /** @type {HTMLInputElement} */ (target).checked;
+      options.setValidation(value);
+      break;
+    case 'PALETTE':
+      value = /** @type {HTMLSelectElement} */ (target).value;
+      options.setPalette(value);
+      break;
+    default:
+      console.warn(`Unknown option: ${option}`);
+      return;
+  }
+
+  await chrome.storage.sync.set({ options: options.valueOf() });
+  await chrome.storage.sync.get('options');
+}
+
+async function init() {
+  await initOptions();
+  initUI();
+}
+
+init();