@jsenv/dom 0.1.0 → 0.3.0

package/src/style/style_default.js

@@ -0,0 +1,153 @@
+import { normalizeStyle } from "./style_parsing.js";
+
+const DEBUG = false;
+
+// Register the style isolator custom element once
+let persistentStyleIsolator = null;
+const getNaviStyleIsolator = () => {
+  if (persistentStyleIsolator) {
+    return persistentStyleIsolator;
+  }
+
+  class StyleIsolator extends HTMLElement {
+    constructor() {
+      super();
+
+      // Create shadow DOM to isolate from external CSS
+      const shadow = this.attachShadow({ mode: "closed" });
+
+      shadow.innerHTML = `
+        <style>
+          :host {
+            all: initial;
+            display: block;
+            position: fixed;
+            top: 0;
+            left: 0;
+            opacity: ${DEBUG ? 0.5 : 0};
+            visibility: ${DEBUG ? "visible" : "hidden"};
+            pointer-events: none;
+          }
+          * {
+            all: revert;
+          }
+        </style>
+        <div id="unstyled_element_slot"></div>
+      `;
+
+      this.unstyledElementSlot = shadow.querySelector("#unstyled_element_slot");
+    }
+
+    getIsolatedStyles(element, context = "js") {
+      if (!DEBUG) {
+        this.unstyledElementSlot.innerHTML = "";
+      }
+      const unstyledElement = element.cloneNode(true);
+      this.unstyledElementSlot.appendChild(unstyledElement);
+
+      // Get computed styles of the actual element inside the shadow DOM
+      const computedStyles = getComputedStyle(unstyledElement);
+      // Create a copy of the styles since the original will be invalidated when element is removed
+      const stylesCopy = {};
+      for (let i = 0; i < computedStyles.length; i++) {
+        const property = computedStyles[i];
+        stylesCopy[property] = normalizeStyle(
+          computedStyles.getPropertyValue(property),
+          property,
+          context,
+        );
+      }
+
+      return stylesCopy;
+    }
+  }
+
+  if (!customElements.get("navi-style-isolator")) {
+    customElements.define("navi-style-isolator", StyleIsolator);
+  }
+  // Create and add the persistent element to the document
+  persistentStyleIsolator = document.createElement("navi-style-isolator");
+  document.body.appendChild(persistentStyleIsolator);
+  return persistentStyleIsolator;
+};
+
+const stylesCache = new Map();
+/**
+ * Gets the default browser styles for an HTML element by creating an isolated custom element
+ * @param {string|Element} input - CSS selector (e.g., 'input[type="text"]'), HTML source (e.g., '<button>'), or DOM element
+ * @param {string} context - Output format: "js" for JS object (default) or "css" for CSS string
+ * @returns {Object|string} Computed styles as JS object or CSS string
+ */
+export const getDefaultStyles = (input, context = "js") => {
+  let element;
+  let cacheKey;
+
+  // Determine input type and create element accordingly
+  if (typeof input === "string") {
+    if (input[0] === "<") {
+      // HTML source
+      const tempDiv = document.createElement("div");
+      tempDiv.innerHTML = input;
+      element = tempDiv.firstElementChild;
+      if (!element) {
+        throw new Error(`Invalid HTML source: ${input}`);
+      }
+      cacheKey = `${input}:${context}`;
+    } else {
+      // CSS selector
+      element = createElementFromSelector(input);
+      cacheKey = `${input}:${context}`;
+    }
+  } else if (input instanceof Element) {
+    // DOM element
+    element = input;
+    cacheKey = `${input.outerHTML}:${context}`;
+  } else {
+    throw new Error(
+      "Input must be a CSS selector, HTML source, or DOM element",
+    );
+  }
+
+  // Check cache first
+  if (stylesCache.has(cacheKey)) {
+    return stylesCache.get(cacheKey);
+  }
+
+  // Get the persistent style isolator element
+  const naviStyleIsolator = getNaviStyleIsolator();
+  const defaultStyles = naviStyleIsolator.getIsolatedStyles(element, context);
+
+  // Cache the result
+  stylesCache.set(cacheKey, defaultStyles);
+
+  return defaultStyles;
+};
+
+/**
+ * Creates an HTML element from a CSS selector
+ * @param {string} selector - CSS selector (e.g., 'input[type="text"]', 'button', 'a[href="#"]')
+ * @returns {Element} DOM element
+ */
+const createElementFromSelector = (selector) => {
+  // Parse the selector to extract tag name and attributes
+  const tagMatch = selector.match(/^([a-zA-Z][a-zA-Z0-9-]*)/);
+  if (!tagMatch) {
+    throw new Error(`Invalid selector: ${selector}`);
+  }
+
+  const tagName = tagMatch[1].toLowerCase();
+  const element = document.createElement(tagName);
+
+  // Extract and apply attributes from selector
+  const attributeRegex = /\[([^=\]]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\]]*)))?\]/g;
+  let attributeMatch;
+
+  while ((attributeMatch = attributeRegex.exec(selector)) !== null) {
+    const attrName = attributeMatch[1];
+    const attrValue =
+      attributeMatch[2] || attributeMatch[3] || attributeMatch[4] || "";
+    element.setAttribute(attrName, attrValue);
+  }
+
+  return element;
+};

package/src/style/style_default_demo.html

@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Button Background-Color Demo</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 40px;
+        line-height: 1.6;
+      }
+
+      .demo-section {
+        background: white;
+        padding: 20px;
+        margin: 20px 0;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+      }
+
+      .result {
+        background: #f8f8f8;
+        border: 1px solid #ddd;
+        padding: 15px;
+        margin: 10px 0;
+        font-family: monospace;
+        font-size: 14px;
+      }
+
+      .result h3 {
+        margin-top: 0;
+        font-family: Arial, sans-serif;
+      }
+
+      .color-preview {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border: 1px solid #333;
+        vertical-align: middle;
+        margin-left: 8px;
+      }
+
+      /* Intentionally style buttons to test isolation */
+      button {
+        background: red !important;
+        color: white !important;
+        border: 3px solid blue !important;
+        padding: 10px 20px;
+        margin: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Button Background-Color Demo</h1>
+    <p>
+      This demo tests <code>getDefaultStyles('button')</code> and focuses on the
+      background-color property.
+    </p>
+
+    <div class="demo-section">
+      <h2>Styled Button on Page</h2>
+      <p>This button is styled with CSS (red background):</p>
+      <button>Styled Button</button>
+      <p>
+        <em
+          >The button above should be red, proving our page CSS is working.</em
+        >
+      </p>
+    </div>
+
+    <div class="demo-section">
+      <h2>Default Button Background-Color Test</h2>
+      <div id="result"></div>
+    </div>
+
+    <script type="module">
+      import { getDefaultStyles } from "./style_default.js";
+
+      // Make function available globally for onclick
+      window.testButtonBackgroundColor = testButtonBackgroundColor;
+
+      function testButtonBackgroundColor() {
+        const resultDiv = document.getElementById("result");
+
+        try {
+          console.log("Testing button default background-color...");
+          const startTime = performance.now();
+
+          // Get default styles for button
+          const styles = getDefaultStyles("button");
+
+          const endTime = performance.now();
+          const duration = (endTime - startTime).toFixed(2);
+
+          // Extract background-color
+          const backgroundColor = styles["background-color"];
+
+          // Display result
+          resultDiv.innerHTML = `
+                    <div class="result">
+                        <h3>Result (${duration}ms)</h3>
+                        <p><strong>Element:</strong> button</p>
+                        <p><strong>background-color:</strong> <code>${backgroundColor}</code> <span class="color-preview" style="background-color: ${backgroundColor};" title="Color preview: ${backgroundColor}"></span></p>
+                        <p><strong>Expected:</strong> Should be a light color (not red), proving CSS isolation works</p>
+                        <p><strong>Full styles object keys:</strong> ${Object.keys(styles).length} properties</p>
+                    </div>
+                `;
+
+          console.log("Button default background-color:", backgroundColor);
+          console.log("Full styles object:", styles);
+        } catch (error) {
+          console.error("Error:", error);
+          resultDiv.innerHTML = `
+                    <div class="result" style="background: #ffe6e6;">
+                        <h3>Error</h3>
+                        <p>${error.message}</p>
+                    </div>
+                `;
+        }
+      }
+
+      // Auto-run test on page load
+      setTimeout(testButtonBackgroundColor, 500);
+    </script>
+  </body>
+</html>

package/src/style/style_effect.js

@@ -0,0 +1,27 @@
+import StyleObserver from "style-observer";
+
+import { normalizeStyle } from "./style_parsing.js";
+
+export const styleEffect = (element, callback, properties = []) => {
+  const check = () => {
+    const values = {};
+    const computedStyle = getComputedStyle(element);
+    for (const property of properties) {
+      values[property] = normalizeStyle(
+        computedStyle.getPropertyValue(property),
+        property,
+      );
+    }
+    callback(values);
+  };
+
+  check();
+  const observer = new StyleObserver(() => {
+    check();
+  });
+  observer.observe(element, properties);
+
+  return () => {
+    observer.unobserve();
+  };
+};

package/src/style/style_parsing.js

@@ -136,6 +136,9 @@ const normalizeNumber = (value, context, unit, propertyName) => {
     if (value === "auto") {
       return "auto";
     }
+    if (value === "none") {
+      return "none";
+    }
     const numericValue = parseFloat(value);
     if (isNaN(numericValue)) {
       console.warn(