index.js

import { jsx } from '@emotion/react'

export const CSSProperties = [
  "accentColor",
  "alignContent",
  "alignItems",
  "alignSelf",
  "alignTracks",
  "animationDelay",
  "animationDirection",
  "animationDuration",
  "animationFillMode",
  "animationIterationCount",
  "animationName",
  "animationPlayState",
  "animationTimeline",
  "animationTimingFunction",
  "appearance",
  "aspectRatio",
  "backdropFilter",
  "backfaceVisibility",
  "backgroundAttachment",
  "backgroundBlendMode",
  "backgroundClip",
  "backgroundColor",
  "backgroundImage",
  "backgroundOrigin",
  "backgroundPositionX",
  "backgroundPositionY",
  "backgroundRepeat",
  "backgroundSize",
  "blockOverflow",
  "blockSize",
  "borderBlockColor",
  "borderBlockEndColor",
  "borderBlockEndStyle",
  "borderBlockEndWidth",
  "borderBlockStartColor",
  "borderBlockStartStyle",
  "borderBlockStartWidth",
  "borderBlockStyle",
  "borderBlockWidth",
  "borderBottomColor",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderBottomStyle",
  "borderBottomWidth",
  "borderCollapse",
  "borderEndEndRadius",
  "borderEndStartRadius",
  "borderImageOutset",
  "borderImageRepeat",
  "borderImageSlice",
  "borderImageSource",
  "borderImageWidth",
  "borderInlineColor",
  "borderInlineEndColor",
  "borderInlineEndStyle",
  "borderInlineEndWidth",
  "borderInlineStartColor",
  "borderInlineStartStyle",
  "borderInlineStartWidth",
  "borderInlineStyle",
  "borderInlineWidth",
  "borderLeftColor",
  "borderLeftStyle",
  "borderLeftWidth",
  "borderRightColor",
  "borderRightStyle",
  "borderRightWidth",
  "borderSpacing",
  "borderStartEndRadius",
  "borderStartStartRadius",
  "borderTopColor",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderTopStyle",
  "borderTopWidth",
  "bottom",
  "boxDecorationBreak",
  "boxShadow",
  "boxSizing",
  "breakAfter",
  "breakBefore",
  "breakInside",
  "captionSide",
  "caretColor",
  "clear",
  "clipPath",
  "color",
  "colorAdjust",
  "colorScheme",
  "columnCount",
  "columnFill",
  "columnGap",
  "columnRuleColor",
  "columnRuleStyle",
  "columnRuleWidth",
  "columnSpan",
  "columnWidth",
  "contain",
  "content",
  "contentVisibility",
  "counterIncrement",
  "counterReset",
  "counterSet",
  "cursor",
  "direction",
  "display",
  "emptyCells",
  "filter",
  "flexBasis",
  "flexDirection",
  "flexGrow",
  "flexShrink",
  "flexWrap",
  "float",
  "fontFamily",
  "fontFeatureSettings",
  "fontKerning",
  "fontLanguageOverride",
  "fontOpticalSizing",
  "fontSize",
  "fontSizeAdjust",
  "fontSmooth",
  "fontStretch",
  "fontStyle",
  "fontSynthesis",
  "fontVariant",
  "fontVariantAlternates",
  "fontVariantCaps",
  "fontVariantEastAsian",
  "fontVariantLigatures",
  "fontVariantNumeric",
  "fontVariantPosition",
  "fontVariationSettings",
  "fontWeight",
  "forcedColorAdjust",
  "gridAutoColumns",
  "gridAutoFlow",
  "gridAutoRows",
  "gridColumnEnd",
  "gridColumnStart",
  "gridRowEnd",
  "gridRowStart",
  "gridTemplateAreas",
  "gridTemplateColumns",
  "gridTemplateRows",
  "hangingPunctuation",
  "height",
  "hyphenateCharacter",
  "hyphens",
  "imageOrientation",
  "imageRendering",
  "imageResolution",
  "initialLetter",
  "inlineSize",
  "inputSecurity",
  "inset",
  "insetBlock",
  "insetBlockEnd",
  "insetBlockStart",
  "insetInline",
  "insetInlineEnd",
  "insetInlineStart",
  "isolation",
  "justifyContent",
  "justifyItems",
  "justifySelf",
  "justifyTracks",
  "left",
  "letterSpacing",
  "lineBreak",
  "lineHeight",
  "lineHeightStep",
  "listStyleImage",
  "listStylePosition",
  "listStyleType",
  "marginBlock",
  "marginBlockEnd",
  "marginBlockStart",
  "marginBottom",
  "marginInline",
  "marginInlineEnd",
  "marginInlineStart",
  "marginLeft",
  "marginRight",
  "marginTop",
  "maskBorderMode",
  "maskBorderOutset",
  "maskBorderRepeat",
  "maskBorderSlice",
  "maskBorderSource",
  "maskBorderWidth",
  "maskClip",
  "maskComposite",
  "maskImage",
  "maskMode",
  "maskOrigin",
  "maskPosition",
  "maskRepeat",
  "maskSize",
  "maskType",
  "mathStyle",
  "maxBlockSize",
  "maxHeight",
  "maxInlineSize",
  "maxLines",
  "maxWidth",
  "minBlockSize",
  "minHeight",
  "minInlineSize",
  "minWidth",
  "mixBlendMode",
  "motionDistance",
  "motionPath",
  "motionRotation",
  "objectFit",
  "objectPosition",
  "offsetAnchor",
  "offsetDistance",
  "offsetPath",
  "offsetRotate",
  "offsetRotation",
  "opacity",
  "order",
  "orphans",
  "outlineColor",
  "outlineOffset",
  "outlineStyle",
  "outlineWidth",
  "overflowAnchor",
  "overflowBlock",
  "overflowClipBox",
  "overflowClipMargin",
  "overflowInline",
  "overflowWrap",
  "overflowX",
  "overflowY",
  "overscrollBehaviorBlock",
  "overscrollBehaviorInline",
  "overscrollBehaviorX",
  "overscrollBehaviorY",
  "paddingBlock",
  "paddingBlockEnd",
  "paddingBlockStart",
  "paddingBottom",
  "paddingInline",
  "paddingInlineEnd",
  "paddingInlineStart",
  "paddingLeft",
  "paddingRight",
  "paddingTop",
  "pageBreakAfter",
  "pageBreakBefore",
  "pageBreakInside",
  "paintOrder",
  "perspective",
  "perspectiveOrigin",
  "placeContent",
  "pointerEvents",
  "position",
  "printColorAdjust",
  "quotes",
  "resize",
  "right",
  "rotate",
  "rowGap",
  "rubyAlign",
  "rubyMerge",
  "rubyPosition",
  "scale",
  "scrollBehavior",
  "scrollMargin",
  "scrollMarginBlock",
  "scrollMarginBlockEnd",
  "scrollMarginBlockStart",
  "scrollMarginBottom",
  "scrollMarginInline",
  "scrollMarginInlineEnd",
  "scrollMarginInlineStart",
  "scrollMarginLeft",
  "scrollMarginRight",
  "scrollMarginTop",
  "scrollPadding",
  "scrollPaddingBlock",
  "scrollPaddingBlockEnd",
  "scrollPaddingBlockStart",
  "scrollPaddingBottom",
  "scrollPaddingInline",
  "scrollPaddingInlineEnd",
  "scrollPaddingInlineStart",
  "scrollPaddingLeft",
  "scrollPaddingRight",
  "scrollPaddingTop",
  "scrollSnapAlign",
  "scrollSnapMargin",
  "scrollSnapMarginBottom",
  "scrollSnapMarginLeft",
  "scrollSnapMarginRight",
  "scrollSnapMarginTop",
  "scrollSnapStop",
  "scrollSnapType",
  "scrollbarColor",
  "scrollbarGutter",
  "scrollbarWidth",
  "shapeImageThreshold",
  "shapeMargin",
  "shapeOutside",
  "tabSize",
  "tableLayout",
  "textAlign",
  "textAlignLast",
  "textCombineUpright",
  "textDecorationColor",
  "textDecorationLine",
  "textDecorationSkip",
  "textDecorationSkipInk",
  "textDecorationStyle",
  "textDecorationThickness",
  "textDecorationWidth",
  "textEmphasisColor",
  "textEmphasisPosition",
  "textEmphasisStyle",
  "textIndent",
  "textJustify",
  "textOrientation",
  "textOverflow",
  "textRendering",
  "textShadow",
  "textSizeAdjust",
  "textTransform",
  "textUnderlineOffset",
  "textUnderlinePosition",
  "top",
  "touchAction",
  "transform",
  "transformBox",
  "transformOrigin",
  "transformStyle",
  "transitionDelay",
  "transitionDuration",
  "transitionProperty",
  "transitionTimingFunction",
  "translate",
  "unicodeBidi",
  "userSelect",
  "verticalAlign",
  "visibility",
  "whiteSpace",
  "widows",
  "width",
  "willChange",
  "wordBreak",
  "wordSpacing",
  "wordWrap",
  "writingMode",
  "zIndex",
  "zoom",
  "all",
  "animation",
  "background",
  "backgroundPosition",
  "border",
  "borderBlock",
  "borderBlockEnd",
  "borderBlockStart",
  "borderBottom",
  "borderColor",
  "borderImage",
  "borderInline",
  "borderInlineEnd",
  "borderInlineStart",
  "borderLeft",
  "borderRadius",
  "borderRight",
  "borderStyle",
  "borderTop",
  "borderWidth",
  "columnRule",
  "columns",
  "flex",
  "flexFlow",
  "font",
  "gap",
  "grid",
  "gridArea",
  "gridColumn",
  "gridRow",
  "gridTemplate",
  "lineClamp",
  "listStyle",
  "margin",
  "mask",
  "maskBorder",
  "motion",
  "offset",
  "outline",
  "overflow",
  "overscrollBehavior",
  "padding",
  "placeItems",
  "placeSelf",
  "textDecoration",
  "textEmphasis",
  "transition",
]

export class ElementBuilder extends Function {
  constructor(elementType) {
    super('...args', 'return this._bound._call(...args)')
    this._bound = this.bind(this)
    this._bound._elementType = elementType
    this._bound._props = { style: {}, className: '' }
    this._bound._classes = []
    this.children = null

    const handler = {
      get(target, prop, receiver) {
        if (CSSProperties.includes(prop)) {
          return (value) => target.style({ [prop]: value })
        }

        return target[prop]
      }
    };

    const proxy = new Proxy(this._bound, handler)
    return proxy
  }

  _call(...args) {
    const calledAsElement = args.length === 2 && Object.keys(args[1]).length === 0

    if (calledAsElement) {
      // the function was used as a react element
      const props = args[0]

      return jsx(
        this._elementType,
        { ...this._props, ...props, style: {}, css: this._props.style }
      )

    } else {
      // called with children directly
      const children = args

      let className = this._props.className + " " + this._classes.join(" ")
      className = className.trim()
      if (className === "") {
        className = null
      }

      return jsx(
        this._elementType,
        { ...this._props, className, style: {}, css: this._props.style },
        children.length > 0 ? children : null
      )
    }
  }

  clone() {
    const newObject = new this.constructor()
    Object.assign(newObject._props, this._props)
    newObject._props.style = { ...this._props.style }
    newObject._classes = [...this._classes]
    newObject._elementType = this._elementType
    if (this.children) {
      newObject.children = [...this.children]
    }
    return newObject
  }

  with(expression) {
    const newItem = this.clone()
    expression(newItem)
    return newItem
  }

  props(props) { return this.with(x => { Object.assign(x._props, props) }) }

  // properties
  style(style) { return this.with(x => { Object.assign(x._props.style, style) }) }
  type(type) { return this.with(x => x._props.type = type) }
  href(url) { return this.with(x => x._props.href = url) }
  rel(value) { return this.with(x => x._props.rel = value) }
  target(value) { return this.with(x => x._props.target = value) }
  classes(...classes) { return this.with(x => x._classes = [...x._classes, ...classes]) }

  // callbacks
  onClick(value) { return this.with(x => x._props.onClick = value) }

  // style selectors
  hover(expression) {
    const newItem = this.clone()

    if (newItem._props.style["&:hover"] === undefined) {
      newItem._props.style["&:hover"] = {}
    }

    const target = newItem._props.style["&:hover"]

    const handler = {
      get(target, prop, receiver) {
        if (CSSProperties.includes(prop)) {
          return (value) => {
            target[prop] = value
            return receiver
          }
        }

        return target[prop]
      }
    };

    const proxy = new Proxy(target, handler)
    expression(proxy)

    return newItem
  }
}

export const el = (elementType) => new ElementBuilder(elementType)

export const Div = el("div")
export const Input = el("input")
export const A = el("a")
export const Button = el("Button")

export default { el, Div, Input, A, Button }