<commit_before>import {
  h,
  render,
  define,
  props,
  withComponent,
  withPreact,
  css,
  spacingSizes
} from '@bolt/core';


import styles from './ratio.scss';

@define
export class BoltRatio extends withComponent(withPreact()) {
  static is = 'bolt-ratio';

  static props = {
    aspectRatioHeight: props.number,
    aspectRatioWidth: props.number
  }

  constructor(){
    super();
    this.supportsCSSVars = window.CSS && CSS.supports('color', 'var(--primary)');
  }

  /**
   * sets the style so that the height is based on a ratio of width to height
   * @param {Number} aspH - the height component of the ratio
   * @param {Number} aspW - the width component of the ratio
   */
  _computeRatio() {
    const h = this.props.aspectRatioHeight && this.props.aspectRatioHeight > 0 ? this.props.aspectRatioHeight : 1;
    const w = this.props.aspectRatioWidth && this.props.aspectRatioWidth > 0 ? this.props.aspectRatioWidth : 1;

    if (this.supportsCSSVars){
      this.style.setProperty(`--aspect-ratio-height`, h);
      this.style.setProperty(`--aspect-ratio-width`, w);
      this.style.paddingTop = '';
    } else {
      this.style.paddingTop = (100 * h / w) + "%";
      this.style.removeProperty('--aspect-ratio-height');
      this.style.removeProperty('--aspect-ratio-width');
    }
  }

  connectedCallback() {
    this._computeRatio();
  }

  render() {
    const classes = css(
      'o-bolt-ratio__inner'
    );

    return (
    )
  }
}<commit_msg>feat: add ShadyDOM / ShadyCSS cross browser support while still using Preact-based rendering.<commit_after>import {
  h,
  render,
  define,
  props,
  withComponent,
  withPreact,
  css,
  spacingSizes
} from '@bolt/core';


import styles from './ratio.scss';

@define
export class BoltRatio extends withComponent(withPreact()) {
  static is = 'bolt-ratio';

  static props = {
    aspectRatioHeight: props.number,
    aspectRatioWidth: props.number
  }

  constructor(){
    super();
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
    }
    this.shadyTemplate = document.createElement('template');
    this.shadyPrepared = false;
    this.supportsCSSVars = window.CSS && CSS.supports('color', 'var(--primary)');
  }

  /**
   * sets the style so that the height is based on a ratio of width to height
   * @param {Number} aspH - the height component of the ratio
   * @param {Number} aspW - the width component of the ratio
   */
  _computeRatio() {
    const h = this.props.aspectRatioHeight && this.props.aspectRatioHeight > 0 ? this.props.aspectRatioHeight : 1;
    const w = this.props.aspectRatioWidth && this.props.aspectRatioWidth > 0 ? this.props.aspectRatioWidth : 1;

    if (this.supportsCSSVars){
      this.style.setProperty(`--aspect-ratio-height`, h);
      this.style.setProperty(`--aspect-ratio-width`, w);
      this.style.paddingTop = '';
    } else {
      this.style.paddingTop = (100 * h / w) + "%";
      this.style.removeProperty('--aspect-ratio-height');
      this.style.removeProperty('--aspect-ratio-width');
    }
  }

  connectedCallback() {
    this.update();
    this._computeRatio();
  }

  // Called when props have been set regardless of if they've changed. - recalculates ratio if props updated
  updating(props) {
    this._computeRatio();
  }

  // Render out component via Preact
  render() {
    const classes = css(
      'o-bolt-ratio__inner'
    );

    return (
      <div className={classes}>
        <style>{styles[0][1]}</style>
        <slot />
      </div>
    )
  }

  /** Idea for wiring up ShadyCSS + Preact inspired by https://github.com/daKmoR/lit-html-demos/blob/master/demo/wc02.html **/
  _render(what, where) {
    this.render(what, where);

    if (typeof ShadyCSS === 'object') {
      if (this.shadyPrepared === false) {
        this.shadyTemplate.innerHTML = this.shadowRoot.innerHTML;
        ShadyCSS.prepareTemplate(this.shadyTemplate, this.localName);
        this.shadyPrepared = true;
      }
      ShadyCSS.styleElement(this);

    /** @TODO: determine if this logic below is required. This <style> node cleanup was
     *  included in original example (mentioned above) so keeping around for now.
     */
      // if (!ShadyCSS.nativeShadow) {
      //   this.shadowRoot.querySelectorAll('style').forEach((styleNode) => {
      //     styleNode.remove();
      //   });
      // }
    }
  }

  update() {
    this._render(this.render(), this.shadowRoot);
  }

  updateShady() {
    this.shadyPrepared = false;
    this.update();
  }
}
{'fraction_non_alphanumeric': 0.13889505214111383, 'fraction_numerical': 0.0039937874417572666, 'mean_word_length': 2.826825127334465, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 14, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1795182', 'n_tokens_mistral': 1462, 'n_tokens_neox': 1425, 'n_words': 325}