@jsenv/dom 0.6.1 → 0.7.0

package/src/style/style_default.js

@@ -1,153 +0,0 @@
-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

@@ -1,128 +0,0 @@
-<!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_parsing.js

@@ -1,375 +0,0 @@
-// Properties that need px units
-const pxProperties = [
-  "width",
-  "height",
-  "top",
-  "left",
-  "right",
-  "bottom",
-  "margin",
-  "marginTop",
-  "marginRight",
-  "marginBottom",
-  "marginLeft",
-  "padding",
-  "paddingTop",
-  "paddingRight",
-  "paddingBottom",
-  "paddingLeft",
-  "border",
-  "borderWidth",
-  "borderTopWidth",
-  "borderRightWidth",
-  "borderBottomWidth",
-  "borderLeftWidth",
-  "fontSize",
-  "lineHeight",
-  "letterSpacing",
-  "wordSpacing",
-  "translateX",
-  "translateY",
-  "translateZ",
-  "borderRadius",
-  "borderTopLeftRadius",
-  "borderTopRightRadius",
-  "borderBottomLeftRadius",
-  "borderBottomRightRadius",
-  "gap",
-  "rowGap",
-  "columnGap",
-];
-
-// Properties that need deg units
-const degProperties = [
-  "rotate",
-  "rotateX",
-  "rotateY",
-  "rotateZ",
-  "skew",
-  "skewX",
-  "skewY",
-];
-
-// Properties that should remain unitless
-const unitlessProperties = [
-  "opacity",
-  "zIndex",
-  "flexGrow",
-  "flexShrink",
-  "order",
-  "columnCount",
-  "scale",
-  "scaleX",
-  "scaleY",
-  "scaleZ",
-];
-
-// Normalize a single style value
-export const normalizeStyle = (value, propertyName, context = "js") => {
-  if (propertyName === "transform") {
-    if (context === "js") {
-      if (typeof value === "string") {
-        // For js context, prefer objects
-        return parseCSSTransform(value);
-      }
-      // If code does transform: { translateX: "10px" }
-      // we want to store { translateX: 10 }
-      const transformNormalized = {};
-      for (const key of Object.keys(value)) {
-        const partValue = normalizeStyle(value[key], key, "js");
-        transformNormalized[key] = partValue;
-      }
-      return transformNormalized;
-    }
-    if (typeof value === "object" && value !== null) {
-      // For CSS context, ensure transform is a string
-      return stringifyCSSTransform(value);
-    }
-    return value;
-  }
-
-  // Handle transform.* properties (e.g., "transform.translateX")
-  if (propertyName.startsWith("transform.")) {
-    if (context === "css") {
-      console.warn(
-        `normalizeStyle: magic properties like "${propertyName}" are not applicable in "css" context. Returning original value.`,
-      );
-      return value;
-    }
-    const transformProperty = propertyName.slice(10); // Remove "transform." prefix
-    // If value is a CSS transform string, parse it first to extract the specific property
-    if (typeof value === "string") {
-      if (value === "none") {
-        return undefined;
-      }
-      const parsedTransform = parseCSSTransform(value);
-      return parsedTransform?.[transformProperty];
-    }
-    // If value is a transform object, extract the property directly
-    if (typeof value === "object" && value !== null) {
-      return value[transformProperty];
-    }
-    // never supposed to happen, the value given is neither string nor object
-    return undefined;
-  }
-
-  if (pxProperties.includes(propertyName)) {
-    return normalizeNumber(value, context, "px", propertyName);
-  }
-  if (degProperties.includes(propertyName)) {
-    return normalizeNumber(value, context, "deg", propertyName);
-  }
-  if (unitlessProperties.includes(propertyName)) {
-    return normalizeNumber(value, context, "", propertyName);
-  }
-
-  return value;
-};
-const normalizeNumber = (value, context, unit, propertyName) => {
-  if (context === "css") {
-    if (typeof value === "number") {
-      if (isNaN(value)) {
-        console.warn(`NaN found for "${propertyName}"`);
-      }
-      return `${value}${unit}`;
-    }
-    return value;
-  }
-  if (typeof value === "string") {
-    // For js context, only convert px values to numbers
-    if (unit === "px" && value.endsWith("px")) {
-      const numericValue = parseFloat(value);
-      if (!isNaN(numericValue)) {
-        return numericValue;
-      }
-    }
-    // Keep all other strings as-is (including %, em, rem, auto, none, etc.)
-    return value;
-  }
-  return value;
-};
-
-// Normalize styles for DOM application
-export const normalizeStyles = (styles, context = "js") => {
-  if (!styles) {
-    return {};
-  }
-  if (typeof styles === "string") {
-    styles = parseStyleString(styles);
-    return styles;
-  }
-  const normalized = {};
-  for (const key of Object.keys(styles)) {
-    const value = styles[key];
-    normalized[key] = normalizeStyle(value, key, context);
-  }
-  return normalized;
-};
-
-/**
- * Parses a CSS style string into a style object.
- * Handles CSS properties with proper camelCase conversion.
- *
- * @param {string} styleString - CSS style string like "color: red; font-size: 14px;"
- * @returns {object} Style object with camelCase properties
- */
-export const parseStyleString = (styleString, context = "js") => {
-  const style = {};
-
-  if (!styleString || typeof styleString !== "string") {
-    return style;
-  }
-
-  // Split by semicolon and process each declaration
-  const declarations = styleString.split(";");
-
-  for (let declaration of declarations) {
-    declaration = declaration.trim();
-    if (!declaration) continue;
-
-    const colonIndex = declaration.indexOf(":");
-    if (colonIndex === -1) continue;
-
-    const property = declaration.slice(0, colonIndex).trim();
-    const value = declaration.slice(colonIndex + 1).trim();
-
-    if (property && value) {
-      // CSS custom properties (starting with --) should NOT be converted to camelCase
-      if (property.startsWith("--")) {
-        style[property] = normalizeStyle(value, property, context);
-      } else {
-        // Convert kebab-case to camelCase (e.g., "font-size" -> "fontSize")
-        const camelCaseProperty = property.replace(
-          /-([a-z])/g,
-          (match, letter) => letter.toUpperCase(),
-        );
-        style[camelCaseProperty] = normalizeStyle(
-          value,
-          camelCaseProperty,
-          context,
-        );
-      }
-    }
-  }
-
-  return style;
-};
-
-// Convert transform object to CSS string
-export const stringifyCSSTransform = (transformObj) => {
-  const transforms = [];
-  for (const key of Object.keys(transformObj)) {
-    const transformPartValue = transformObj[key];
-    const normalizedTransformPartValue = normalizeStyle(
-      transformPartValue,
-      key,
-      "css",
-    );
-    transforms.push(`${key}(${normalizedTransformPartValue})`);
-  }
-  return transforms.join(" ");
-};
-
-// Parse transform CSS string into object
-export const parseCSSTransform = (transformString) => {
-  if (!transformString || transformString === "none") {
-    return undefined;
-  }
-
-  const transformObj = {};
-
-  // Parse transform functions
-  const transformPattern = /(\w+)\(([^)]+)\)/g;
-  let match;
-
-  while ((match = transformPattern.exec(transformString)) !== null) {
-    const [, functionName, value] = match;
-
-    // Handle matrix functions specially
-    if (functionName === "matrix" || functionName === "matrix3d") {
-      const matrixComponents = parseMatrixTransform(match[0]);
-      if (matrixComponents) {
-        // Only add non-default values to preserve original information
-        Object.assign(transformObj, matrixComponents);
-      }
-      // If matrix can't be parsed to simple components, skip it (keep complex transforms as-is)
-      continue;
-    }
-
-    // Handle regular transform functions
-    const normalizedValue = normalizeStyle(value.trim(), functionName, "js");
-    if (normalizedValue !== undefined) {
-      transformObj[functionName] = normalizedValue;
-    }
-  }
-
-  // Return undefined if no properties were extracted (preserves original information)
-  return Object.keys(transformObj).length > 0 ? transformObj : undefined;
-};
-
-// Parse a matrix transform and extract simple transform components when possible
-const parseMatrixTransform = (matrixString) => {
-  // Match matrix() or matrix3d() functions
-  const matrixMatch = matrixString.match(/matrix(?:3d)?\(([^)]+)\)/);
-  if (!matrixMatch) {
-    return null;
-  }
-
-  const values = matrixMatch[1].split(",").map((v) => parseFloat(v.trim()));
-
-  if (matrixString.includes("matrix3d")) {
-    // matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)
-    if (values.length !== 16) {
-      return null;
-    }
-    const [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p] = values;
-    // Check if it's a simple 2D transform (most common case)
-    if (
-      c === 0 &&
-      d === 0 &&
-      g === 0 &&
-      h === 0 &&
-      i === 0 &&
-      j === 0 &&
-      k === 1 &&
-      l === 0 &&
-      o === 0 &&
-      p === 1
-    ) {
-      // This is essentially a 2D transform
-      return parseSimple2DMatrix(a, b, e, f, m, n);
-    }
-    return null; // Complex 3D transform
-  }
-  // matrix(a, b, c, d, e, f)
-  if (values.length !== 6) {
-    return null;
-  }
-  const [a, b, c, d, e, f] = values;
-  return parseSimple2DMatrix(a, b, c, d, e, f);
-};
-
-// Parse a simple 2D matrix into transform components
-const parseSimple2DMatrix = (a, b, c, d, e, f) => {
-  const result = {};
-
-  // Extract translation - only add if not default (0)
-  if (e !== 0) {
-    result.translateX = e;
-  }
-  if (f !== 0) {
-    result.translateY = f;
-  }
-
-  // Check for identity matrix (no transform)
-  if (a === 1 && b === 0 && c === 0 && d === 1) {
-    return result; // Only translation
-  }
-
-  // Decompose the 2D transformation matrix
-  // Based on: https://frederic-wang.fr/decomposition-of-2d-transform-matrices.html
-
-  const det = a * d - b * c;
-  // Degenerate matrix (maps to a line or point)
-  if (det === 0) {
-    return null;
-  }
-
-  // Extract scale and rotation
-  if (c === 0) {
-    // Simple case: no skew
-    if (a !== 1) {
-      result.scaleX = a;
-    }
-    if (d !== 1) {
-      result.scaleY = d;
-    }
-    if (b !== 0) {
-      const angle = Math.atan(b / a) * (180 / Math.PI);
-      if (angle !== 0) {
-        result.rotate = angle;
-      }
-    }
-    return result;
-  }
-
-  // General case: decompose using QR decomposition approach
-  const scaleX = Math.sqrt(a * a + b * b);
-  const scaleY = det / scaleX;
-  const rotation = Math.atan2(b, a) * (180 / Math.PI);
-  const skewX =
-    Math.atan((a * c + b * d) / (scaleX * scaleX)) * (180 / Math.PI);
-  if (scaleX !== 1) {
-    result.scaleX = scaleX;
-  }
-  if (scaleY !== 1) {
-    result.scaleY = scaleY;
-  }
-  if (rotation !== 0) {
-    result.rotate = rotation;
-  }
-  if (skewX !== 0) {
-    result.skewX = skewX;
-  }
-  return result;
-};