Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
Size: Mime:
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.stylin = styleh;
exports.default = void 0;

var _identifier = require("../../identifier");

var _StyledComponent = require("./StyledComponent");

var _templateHandler = require("./templateHandler");

/* eslint-disable max-statements */
//

/**
 * @type {Factory}
 * @param {String} styles
 */
function toComponent(styles) {
  /**
   * @type {React.StatelessComponent}
   * @return {StyledComponent}
   */
  return function styledComponentStatelessFactory() {
    return function styledComponentStateless() {
      return (0, _StyledComponent.asStyledComponent)(styles);
    };
  };
}
/**
 * @description transpile
 * @see templateHandler
 * @param {Array<String>} literalSections
 * @param {TemplateStringsArray | ?Array<String | Function | Array>} interpolationSubstitutions
 * @return {ClassDecorator}
 */


function styleh() {
  // --- stylehg transpiling ---
  const styles = _templateHandler.templateHandler.apply(this, arguments);
  /**
   * @type {ClassDecorator}
   * @param {React.ComponentType} [Target=undefined] @curried 1
   * @return {Observer}
   * @modifies render to add an array of elements
   */


  function styledDecorator(Target) {
    // --- decorator ---
    // @james @todo split
    if (Target === undefined) {
      return styledDecorator;
    } else if (!Target.prototype) {
      // @note moved this below as `toComponent`
      // then it is props
      // if (Object.isExtensible(Target) === false && Object.isFrozen(Target)) {
      //   return asStyledComponent(styles, Target)
      // }
      console.warn('NO_PROTOTYPE_DECORATOR_STYLED');
      console.log(Target);
      return styledDecorator;
    } // --- style react block ---


    const named = (0, _identifier.toComponentName)(Target);
    const stylesBlock = (0, _StyledComponent.asStyledComponent)(styles, Target);
    const className = ''; // ---- react component decoration ----

    const render = Target.prototype.render;

    Target.prototype.render = function () {
      const rendered = render.call(this, this); // @todo could use traverser?
      // @note - this is when not using [children, syntax]
      // @todo + this identifies className
      //
      // import {selectorAndStyleForStyledComponent} from './selectorless'
      //
      // const { css, selector, className } = selectorAndStyleForStyledComponent(styles, rendered)
      // const finalStylesBeforeTranspile = css ? css : styles
      // const stylesBlock = asStyledComponent(styles, Target)
      //
      // return (
      //   <div data-styled-for-component={named} className={className || 'styled-wrap'}>
      //     {stylesBlock}
      //     {rendered}
      //   </div>
      // )
      // @todo - errors with render keys...
      // const key = named + Math.random(0, 1000000)
      // const cloned = React.cloneElement(rendered, { key })

      return [stylesBlock, rendered];
    };

    return Target;
  }
  /**
   * @description this allows decorated styles
   *              to be coerced from decorator back to styles
   *
   * @type {Function | String}
   * @return {String}
   */


  styledDecorator.toString = styledDecorator[Symbol.toPrimitive] = function () {
    return styles;
  };

  styledDecorator.styles = styledDecorator;
  styledDecorator.toComponent = toComponent(styles);
  return styledDecorator;
}
/**
 * @description skips parsing, just returns as string, for easy change
 * @param {TemplateStringsArray} mixinStyles
 * @return {String}
 */


function styledMixin(mixinStyles) {
  return styled.apply(this, arguments);
  /**
   * @todo - this returns raw input, often is an array, the above parses it immediately, should use template handler
   */
  // return mixinStyles
  // if (Array.isArray(mixinStyles)) {
  //   return mixinStyles.map(style => style.raw).join('\n')
  // } else {
  //   return mixinStyles
  // }
}

styleh.mixin = styledMixin;
styleh.theme = _templateHandler.templateHandler.theme;
styleh.setTheme = _templateHandler.templateHandler.setTheme;

function withConfig(name) {
  // console.log('WITH_CONFIG_', name)
  return styleh;
}

styleh.mixin.withConfig = withConfig;
styleh.withConfig = withConfig; // styleh.tabletOrLarger.withConfig = withConfig
// styleh.tabletOrLarger.withConfig = withConfig
// styleh.tabletOrLarger.withConfig = withConfig
// styleh.tabletOrLarger.withConfig = withConfig
// export { styleh }

var _default = styleh;
exports.default = _default;