@wavemaker/app-rn-runtime 11.8.5-next.27430 → 11.8.5-patch.1

package/runtime/watcher.js

@@ -0,0 +1,147 @@
+var _Watcher;
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { isArray, clone } from 'lodash';
+import { useEffect, useState } from 'react';
+import { WIDGET_LOGGER } from '@wavemaker/app-rn-runtime/core/base.component';
+const WATCH_LOGGER = WIDGET_LOGGER.extend("watch");
+class WatchExpression {
+  constructor(fn, onChange) {
+    _defineProperty(this, "last", null);
+    _defineProperty(this, "expBody", null);
+    _defineProperty(this, "lastExecutionTime", 0);
+    this.fn = fn;
+    this.onChange = onChange;
+    this.last = this.execute();
+    if (isArray(this.last)) {
+      this.last = clone(this.last);
+    }
+  }
+  getExpBody() {
+    if (!this.expBody) {
+      const expStr = this.fn.toString();
+      this.expBody = expStr.substring(expStr.indexOf('return ') + 7, expStr.lastIndexOf(';'));
+    }
+    return this.expBody;
+  }
+  execute() {
+    try {
+      return this.fn();
+    } catch (e) {
+      //do nothing
+      return null;
+    }
+  }
+  isEqual($old, $new) {
+    const isArrayObj = isArray($old) || isArray($new);
+    if (isArrayObj) {
+      if ($old && !$new || !$old && $new || $old.length !== $new.length) {
+        return false;
+      }
+      for (let i = 0; i < $old.length; i++) {
+        if ($old[i] !== $new[i]) {
+          return false;
+        }
+      }
+      return true;
+    }
+    return $old === $new;
+  }
+  get value() {
+    return this.last;
+  }
+  check() {
+    const start = Date.now();
+    const now = this.execute();
+    const changed = !this.isEqual(this.last, now);
+    this.lastExecutionTime = Date.now() - start;
+    if (changed) {
+      WATCH_LOGGER.debug(() => {
+        if (this.getExpBody() !== 'fragment') {
+          return `Watcher: <${this.getExpBody()}> Changed from ${this.last} to ${now} `;
+        }
+        return '';
+      });
+      this.onChange(this.last, now);
+      this.last = now;
+      if (isArray(this.last)) {
+        this.last = clone(this.last);
+      }
+      return true;
+    }
+    return false;
+  }
+}
+export class Watcher {
+  constructor() {
+    _defineProperty(this, "expressions", []);
+    _defineProperty(this, "isActive", true);
+    _defineProperty(this, "parent", null);
+    _defineProperty(this, "children", []);
+  }
+  check() {
+    if (this.isActive) {
+      this.expressions.forEach(expression => expression.check());
+      this.children.forEach(child => {
+        child.check();
+      });
+    }
+  }
+  create() {
+    const child = new Watcher();
+    child.parent = this;
+    this.children.push(child);
+    return child;
+  }
+  remove(child) {
+    if (this.children.length > 0) {
+      const i = this.children.indexOf(child);
+      if (i >= 0) {
+        this.children.splice(i, 1);
+      }
+    }
+  }
+  destroy() {
+    this.clear();
+    this.parent && this.parent.remove(this);
+  }
+  clear() {
+    this.children = [];
+    this.expressions = [];
+  }
+  watch(fn, onChange) {
+    const expression = new WatchExpression(fn, onChange);
+    this.expressions.push(expression);
+    return expression;
+  }
+  count() {
+    if (!this.isActive) {
+      return 0;
+    }
+    let count = this.expressions.length;
+    this.children.forEach(child => {
+      count += child.count();
+    });
+    return count;
+  }
+}
+_Watcher = Watcher;
+_defineProperty(Watcher, "ROOT", new _Watcher());
+export function useWatcher(parent) {
+  const [change, onChange] = useState({});
+  let [watcher] = useState(() => parent.create());
+  watcher.clear();
+  useEffect(() => {
+    return () => {
+      watcher.destroy();
+    };
+  }, []);
+  return {
+    watch: fn => {
+      return watcher.watch(fn, () => onChange({})).value;
+    }
+  };
+}
+;
+//# sourceMappingURL=watcher.js.map

package/runtime/watcher.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isArray","clone","useEffect","useState","WIDGET_LOGGER","WATCH_LOGGER","extend","WatchExpression","constructor","fn","onChange","_defineProperty","last","execute","getExpBody","expBody","expStr","toString","substring","indexOf","lastIndexOf","e","isEqual","$old","$new","isArrayObj","length","i","value","check","start","Date","now","changed","lastExecutionTime","debug","Watcher","isActive","expressions","forEach","expression","children","child","create","parent","push","remove","splice","destroy","clear","watch","count","_Watcher","useWatcher","change","watcher"],"sources":["watcher.ts"],"sourcesContent":["import { isEqual as _isEqual, isArray, isObject, clone, remove, reverse, sortBy } from 'lodash';\nimport { useEffect, useMemo, useState } from 'react';\nimport { WIDGET_LOGGER } from '@wavemaker/app-rn-runtime/core/base.component';\n\nconst WATCH_LOGGER = WIDGET_LOGGER.extend(\"watch\");\n\nclass WatchExpression {\n    private last: any = null;\n    private expBody: string = null as any;\n    public lastExecutionTime = 0;\n\n    constructor(private fn: Function, private onChange: (prev: any, now: any) => any) {\n        this.last = this.execute();\n        if (isArray(this.last)) {\n            this.last = clone(this.last);\n        }\n    }\n\n    private getExpBody() {\n        if (!this.expBody) {\n            const expStr = this.fn.toString();\n            this.expBody = expStr.substring(\n                expStr.indexOf('return ') + 7,\n                expStr.lastIndexOf(';'));\n        }\n        return this.expBody;\n    }\n    \n    private execute() {\n        try {\n            return this.fn();\n        } catch(e) {\n            //do nothing\n            return null;\n        }\n    }\n\n    private isEqual($old: any, $new: any) {\n        const isArrayObj = isArray($old) || isArray($new);\n        if (isArrayObj) {\n            if (($old && !$new) \n                || (!$old && $new)\n                || $old.length !== $new.length) {\n                return false;\n            }\n            for(let i = 0; i < $old.length; i++) {\n                if ($old[i] !== $new[i]) {\n                    return false;\n                }\n            }\n            return true;\n        }\n        return $old === $new;\n    }\n\n    get value() {\n        return this.last;\n    }\n\n    public check() {\n        const start = Date.now();\n        const now = this.execute();\n        const changed = !this.isEqual(this.last, now);\n        this.lastExecutionTime = Date.now() - start;\n        if (changed) {\n            WATCH_LOGGER.debug(() => {\n                if (this.getExpBody() !== 'fragment') {\n                    return `Watcher: <${this.getExpBody()}> Changed from ${this.last} to ${now} `;\n                }\n                return '';\n            });\n            this.onChange(this.last, now);\n            this.last = now;\n            if (isArray(this.last)) {\n                this.last = clone(this.last);\n            }\n            return true;\n        }\n        return false;\n    }\n}\n\nexport class Watcher {\n    public static ROOT = new Watcher();\n    public expressions = [] as WatchExpression[];\n    public isActive = true;\n    public parent: Watcher = null as any;\n    public children = [] as Watcher[];\n    private constructor() {}\n\n    check() {\n        if (this.isActive) {\n            this.expressions.forEach(expression => expression.check());\n            this.children.forEach(child => {\n                child.check();\n            });\n        }\n    }\n    \n    create() {\n        const child = new Watcher();\n        child.parent = this;\n        this.children.push(child);\n        return child;\n    }\n\n    remove(child: Watcher) {\n        if (this.children.length > 0) {\n            const i = this.children.indexOf(child);\n            if (i >= 0) {\n                this.children.splice(i, 1);\n            }\n        }\n    }\n\n    destroy() {\n        this.clear();\n        this.parent && this.parent.remove(this);\n    }\n\n    clear() {\n        this.children = [];\n        this.expressions = [];\n    }\n\n    watch(fn: Function, onChange: (prev: any, now: any) => any) {\n        const expression = new WatchExpression(fn, onChange);\n        this.expressions.push(expression);\n        return expression;\n    }\n\n    count() {\n        if (!this.isActive) {\n            return 0;\n        }\n        let count = this.expressions.length;\n        this.children.forEach(child => {\n            count += child.count();\n        });\n        return count;\n    }\n}\n\nexport function useWatcher(parent: Watcher) {\n    const [change, onChange] = useState({});\n    let [ watcher ] = useState(() => parent.create());\n    watcher.clear();\n    useEffect(() => { \n        return () => {\n            watcher.destroy();\n        };\n    }, []);\n    return {\n        watch: (fn: Function) => {\n            return watcher.watch(fn, () => onChange({})).value;\n        }\n    };\n};"],"mappings":"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","ignoreList":[]}

package/styles/background.component.js

@@ -0,0 +1,311 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import * as React from 'react';
+import { LinearGradient as ExpoLinearGradient } from 'expo-linear-gradient';
+import { Image, StyleSheet, View } from 'react-native';
+import { isEmpty, isNil, isNumber } from 'lodash-es';
+import imageSizeEstimator from '@wavemaker/app-rn-runtime/core/imageSizeEstimator';
+import { AssetConsumer } from '@wavemaker/app-rn-runtime/core/asset.provider';
+import { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';
+const IMAGE_URL_REGEX = /url\(['|"]?(.+)['|"]?\)$/gi;
+const LINEAT_GRADIENT_REGEX = /linear-gradient\((.+)\)$/gi;
+const DIMENSION_REGEX = /([0-9%]+)[a-z]*/g;
+const BACKGROUND_POSITION_REGEX = /([0-9%]+)[a-z]*\s*([0-9%]+)[a-z]*/g;
+const BACKGROUND_SIZE_REGEX = /([0-9%]+)[a-z]*\s*([0-9%]+)[a-z]*/g;
+const ASSET_CACHE = {};
+export class LinearGradient extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = this.parse();
+  }
+  parse(val = this.props.value) {
+    let state = {};
+    const splits = val.split(',').map(v => v.trim());
+    let angle = 0;
+    const locations = [];
+    if (splits[0].endsWith('deg')) {
+      angle = parseInt(splits[0].split('deg')[0]) % 360;
+      angle = angle < 0 ? 360 + angle : angle;
+      splits.shift();
+    }
+    angle += 90;
+    const delta = Math.round(Math.tan(angle * Math.PI / 180) * 100) / 100;
+    if (Math.abs(delta) > 1) {
+      state = {
+        end: {
+          x: -0.5 / delta + 0.5,
+          y: 0
+        },
+        start: {
+          x: 0.5 / delta + 0.5,
+          y: 1
+        }
+      };
+    } else {
+      state = {
+        start: {
+          x: 0,
+          y: -0.5 * delta + 0.5
+        },
+        end: {
+          x: 1,
+          y: 0.5 * delta + 0.5
+        }
+      };
+    }
+    if (angle >= 270 && angle <= 450) {
+      state = {
+        start: state.end,
+        end: state.start
+      };
+    }
+    state.colors = [];
+    state.locations = [];
+    splits.map(s => {
+      var _s$matchAll$next;
+      const p = (_s$matchAll$next = s.matchAll(/\s*([0-9]+)%/g).next()) === null || _s$matchAll$next === void 0 ? void 0 : _s$matchAll$next.value;
+      if (p) {
+        state.locations.push(parseInt(p[1]) / 100);
+        state.colors.push(s.replace(p[0], ''));
+      } else {
+        state.locations.push(null);
+        state.colors.push(s);
+      }
+    });
+    return state;
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (prevProps.value !== this.props.value) {
+      this.setState(this.parse());
+    }
+  }
+  render() {
+    var _this$props$size, _this$props$style;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [{
+        borderWidth: 0,
+        overflow: 'hidden'
+      }, StyleSheet.absoluteFill, this.props.style]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [StyleSheet.absoluteFill, this.props.middle ? {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center'
+      } : null]
+    }, /*#__PURE__*/React.createElement(ExpoLinearGradient, {
+      testID: "wm-expo-linear-gradient",
+      colors: this.state.colors,
+      locations: this.state.locations,
+      start: this.state.start,
+      end: this.state.end,
+      style: [(_this$props$size = this.props.size) !== null && _this$props$size !== void 0 && _this$props$size.width ? this.props.size : StyleSheet.absoluteFill, this.props.position, {
+        position: 'absolute',
+        borderRadius: (_this$props$style = this.props.style) === null || _this$props$style === void 0 ? void 0 : _this$props$style.borderRadius
+      }]
+    })), this.props.children);
+  }
+}
+export class BackgroundComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "loadAsset", null);
+    this.state = {
+      imageSrc: this.props.image ? ASSET_CACHE[this.props.image] : undefined
+    };
+  }
+  caluculateSize(imageSrc) {
+    if (isNumber(imageSrc)) {
+      const {
+        width,
+        height
+      } = Image.resolveAssetSource(imageSrc);
+      this.setState({
+        naturalImageWidth: width,
+        naturalImageHeight: height
+      });
+    } else if (!isNil(imageSrc)) {
+      imageSizeEstimator.getSize(imageSrc.uri, (width, height) => {
+        this.setState({
+          naturalImageWidth: width,
+          naturalImageHeight: height
+        });
+      });
+    }
+  }
+  getDimension(dim) {
+    if (dim) {
+      const value = dim.matchAll(DIMENSION_REGEX).next().value;
+      if (value[1]) {
+        return value[1].endsWith('%') ? value[1] : parseInt(value[1]);
+      }
+    }
+    return null;
+  }
+  getPosition() {
+    const result = {};
+    if (!this.props.position) {
+      return result;
+    }
+    const position = this.props.position.split(' ').map(s => s.trim());
+    if (position[0] === 'center') {
+      result.alignItems = 'center';
+    } else if (position[0] === 'top') {
+      result.top = 0;
+    } else if (position[0] === 'bottom') {
+      result.bottom = 0;
+    } else {
+      result.top = this.getDimension(position[0]);
+    }
+    if (position[1] === 'center') {
+      result.justifyContent = 'center';
+    } else if (position[1] === 'left') {
+      result.left = 0;
+    } else if (position[1] === 'bottom') {
+      result.right = 0;
+    } else {
+      result.left = this.getDimension(position[1]);
+    }
+    return result;
+  }
+  getPositionAndSize() {
+    var _this$props$size2, _this$getGradient;
+    const result = {};
+    if (this.props.resizeMode) {
+      result.resizeMode = this.props.resizeMode;
+      return result;
+    } else if (this.props.position === 'center') {
+      result.resizeMode = 'center';
+      result.position = {
+        justifyContent: 'center',
+        alignItems: 'center'
+      };
+    } else if (this.props.size === 'contain' || this.props.size === 'cover') {
+      result.resizeMode = this.props.size;
+      return result;
+    }
+    const size = (_this$props$size2 = this.props.size) === null || _this$props$size2 === void 0 ? void 0 : _this$props$size2.matchAll(BACKGROUND_SIZE_REGEX).next().value;
+    result.size = {};
+    if (size) {
+      result.size.width = size[1].endsWith('%') ? size[1] : parseInt(size[1]);
+      result.size.height = size[2].endsWith('%') ? size[2] : parseInt(size[2]);
+    }
+    if (!result.resizeMode && this.props.position) {
+      result.position = this.getPosition();
+    }
+    if (!((_this$getGradient = this.getGradient()) !== null && _this$getGradient !== void 0 && (_this$getGradient = _this$getGradient.value) !== null && _this$getGradient !== void 0 && _this$getGradient.length)) {
+      if (this.props.repeat === 'no-repeat') {
+        result.size.width = result.size.width || this.state.naturalImageWidth;
+        result.size.height = result.size.height || this.state.naturalImageHeight;
+      } else if (this.props.repeat === 'repeat-x') {
+        result.resizeMode = 'repeat';
+        result.size.width = result.size.width || '100%';
+        result.size.height = result.size.height || this.state.naturalImageHeight;
+      } else if (this.props.repeat === 'repeat-y') {
+        result.resizeMode = 'repeat';
+        result.size.width = result.size.width || this.state.naturalImageWidth;
+        result.size.height = result.size.height || '100%';
+      } else {
+        result.resizeMode = 'repeat';
+      }
+    }
+    return result;
+  }
+  renderLinearGradient(data) {
+    const psresult = this.getPositionAndSize();
+    return /*#__PURE__*/React.createElement(LinearGradient, {
+      value: data || '',
+      style: this.props.style,
+      size: psresult.size,
+      position: psresult.position,
+      middle: psresult.resizeMode === 'center'
+    }, /*#__PURE__*/React.createElement(React.Fragment, null));
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.props.image && prevProps.image !== this.props.image) {
+      this.setImage();
+    }
+  }
+  componentDidMount() {
+    setTimeout(() => this.setImage(), 100);
+  }
+  setImage() {
+    var _this$props$image, _source;
+    let source = (_this$props$image = this.props.image) === null || _this$props$image === void 0 ? void 0 : _this$props$image.trim();
+    if (!source) {
+      return;
+    }
+    if ((_source = source) !== null && _source !== void 0 && _source.startsWith('url')) {
+      var _this$props$image2;
+      source = (_this$props$image2 = this.props.image) === null || _this$props$image2 === void 0 ? void 0 : _this$props$image2.matchAll(IMAGE_URL_REGEX).next().value[1];
+    }
+    if (this.loadAsset) {
+      source = this.loadAsset(source);
+    }
+    if (isFullPathUrl(source)) {
+      source = {
+        uri: source
+      };
+    }
+    this.caluculateSize(source);
+    this.setState({
+      imageSrc: source
+    });
+    if (this.props.image) {
+      ASSET_CACHE[this.props.image] = source;
+    }
+  }
+  getGradient() {
+    var _this$props$image3;
+    return (_this$props$image3 = this.props.image) === null || _this$props$image3 === void 0 ? void 0 : _this$props$image3.trim().matchAll(LINEAT_GRADIENT_REGEX).next();
+  }
+  renderImage() {
+    const psresult = this.getPositionAndSize();
+    return /*#__PURE__*/React.createElement(AssetConsumer, null, loadAsset => {
+      var _psresult$position, _psresult$position2;
+      const loadImage = this.loadAsset !== loadAsset;
+      this.loadAsset = loadAsset;
+      if (loadImage) {
+        setTimeout(() => this.setImage(), 10);
+      }
+      return /*#__PURE__*/React.createElement(View, {
+        style: [{
+          borderWidth: 0,
+          overflow: 'hidden'
+        }, StyleSheet.absoluteFill, this.props.style]
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [StyleSheet.absoluteFill, {
+          flexDirection: 'row',
+          justifyContent: (_psresult$position = psresult.position) === null || _psresult$position === void 0 ? void 0 : _psresult$position.justifyContent,
+          alignItems: (_psresult$position2 = psresult.position) === null || _psresult$position2 === void 0 ? void 0 : _psresult$position2.alignItems
+        }]
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [{
+          position: 'absolute',
+          overflow: 'hidden'
+        }, psresult.position, isEmpty(psresult.size) ? StyleSheet.absoluteFill : psresult.size]
+      }, /*#__PURE__*/React.createElement(Image, {
+        source: this.state.imageSrc,
+        resizeMode: psresult.resizeMode || 'cover',
+        style: [{
+          width: '100%',
+          height: '100%'
+        }, !isEmpty(psresult.size) || psresult.resizeMode === 'cover' || psresult.resizeMode === 'contain' ? null : {
+          minWidth: this.state.naturalImageWidth,
+          minHeight: this.state.naturalImageHeight
+        }]
+      }))));
+    });
+  }
+  render() {
+    var _gradientData$value;
+    const gradientData = this.getGradient();
+    if (gradientData !== null && gradientData !== void 0 && (_gradientData$value = gradientData.value) !== null && _gradientData$value !== void 0 && _gradientData$value.length) {
+      return this.renderLinearGradient(gradientData.value[1]);
+    } else if (this.props.image && this.state.imageSrc) {
+      return this.renderImage();
+    }
+    return null;
+  }
+}
+//# sourceMappingURL=background.component.js.map

package/styles/selector.js

@@ -0,0 +1,204 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { last } from 'lodash-es';
+//https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
+class SpecificityWeight {
+  constructor(w1 = 0, w2 = 0, w3 = 0) {
+    this.w1 = w1;
+    this.w2 = w2;
+    this.w3 = w3;
+    _defineProperty(this, "_value", 0);
+    this._value = this.w1 * 10000 + this.w2 * 100 + this.w3;
+  }
+  add(weight) {
+    return new SpecificityWeight(this.w1 + weight.w1, this.w2 + weight.w2, this.w3 + weight.w3);
+  }
+  get value() {
+    return this._value;
+  }
+  compare(that) {
+    if (this._value > that._value) {
+      return 1;
+    } else if (this._value < that._value) {
+      return -1;
+    }
+    return 0;
+  }
+}
+;
+export class Selector {
+  constructor(specificityWeight = new SpecificityWeight(0, 0, 0)) {
+    this.specificityWeight = specificityWeight;
+  }
+}
+export const parseSelector = selectorStr => {
+  const splits = selectorStr.trim().replace(/\s[>]\s*/g, '>').replace(/\s*[+]\s*/g, '+').replace(/\s*~\s*/g, '~').replace(/[\s]+/g, ' ').replace(/([\s\+>~])/g, v => `_${v}_`).split('_').reverse();
+  let selector = new NodeSelector(splits[0]);
+  for (let i = 1; i < splits.length;) {
+    const operator = splits[i];
+    const nextSelector = new NodeSelector(splits[i + 1]);
+    if (operator === ' ') {
+      selector = new ChildSelector(selector, nextSelector);
+    } else if (operator === '+') {
+      selector = new AdjacentSiblingSelector(selector, nextSelector);
+    } else if (operator === '>') {
+      selector = new ImmediateChildSelector(selector, nextSelector);
+    } else if (operator === '~') {
+      selector = new GeneralSiblingSelector(selector, nextSelector);
+    }
+    i += 2;
+  }
+  return selector;
+};
+export class NodeSelector extends Selector {
+  constructor(selector) {
+    super();
+    this.selector = selector;
+    _defineProperty(this, "selectors", []);
+    const pseudoSelector = selector.split(':')[1];
+    if (pseudoSelector === 'first-child') {
+      this.selectors.push(new FirstChildSelector());
+    } else if (pseudoSelector === 'last-child') {
+      this.selectors.push(new LastChildSelector());
+    }
+    const _selector = selector.split(':')[0].split('.');
+    _selector.forEach((s, i) => {
+      if (i === 0) {
+        s && this.selectors.push(new TypeSelector(s));
+      } else {
+        this.selectors.push(new ClassSelector(s));
+      }
+    });
+    this.specificityWeight = this.selectors.reduce((p, s) => p.add(s.specificityWeight), new SpecificityWeight(0, 0, 0));
+  }
+  select(node) {
+    if (node && this.selectors.reduce((p, s) => p && !!s.select(node), true)) {
+      return node;
+    }
+    return undefined;
+  }
+}
+export class ClassSelector extends Selector {
+  constructor(classname) {
+    super(new SpecificityWeight(0, 1, 0));
+    this.classname = classname;
+  }
+  select(node) {
+    return node !== null && node !== void 0 && node.hasClass(this.classname) ? node : undefined;
+  }
+}
+export class TypeSelector extends Selector {
+  constructor(type) {
+    super(new SpecificityWeight(0, 0, 1));
+    this.type = type;
+  }
+  select(node) {
+    return (node === null || node === void 0 ? void 0 : node.type) === this.type ? node : undefined;
+  }
+}
+export class FirstChildSelector extends Selector {
+  constructor() {
+    super(new SpecificityWeight(0, 1, 0));
+  }
+  select(node) {
+    var _node$parent;
+    return (node === null || node === void 0 || (_node$parent = node.parent) === null || _node$parent === void 0 ? void 0 : _node$parent.children[0]) === node ? node : undefined;
+  }
+}
+export class LastChildSelector extends Selector {
+  constructor() {
+    super(new SpecificityWeight(0, 1, 0));
+  }
+  select(node) {
+    var _node$parent2;
+    return last(node === null || node === void 0 || (_node$parent2 = node.parent) === null || _node$parent2 === void 0 ? void 0 : _node$parent2.children) === node ? node : undefined;
+  }
+}
+export class AdjacentSiblingSelector extends Selector {
+  constructor(selector, sibling) {
+    super();
+    this.selector = selector;
+    this.sibling = sibling;
+    this.specificityWeight = this.specificityWeight.add(this.selector.specificityWeight).add(this.sibling.specificityWeight);
+  }
+  select(node) {
+    if (!node) {
+      return undefined;
+    }
+    node = this.selector.select(node);
+    if (node) {
+      var _node$parent3;
+      const siblings = ((_node$parent3 = node.parent) === null || _node$parent3 === void 0 ? void 0 : _node$parent3.children) || [];
+      const adjSibling = siblings[siblings.indexOf(node) - 1];
+      if (this.sibling.select(adjSibling)) {
+        return adjSibling;
+      }
+    }
+    return undefined;
+  }
+}
+export class GeneralSiblingSelector extends Selector {
+  constructor(selector, sibling) {
+    super();
+    this.selector = selector;
+    this.sibling = sibling;
+    this.specificityWeight = this.specificityWeight.add(this.selector.specificityWeight).add(this.sibling.specificityWeight);
+  }
+  select(node) {
+    if (!node) {
+      return undefined;
+    }
+    node = this.selector.select(node);
+    if (node) {
+      var _node$parent4;
+      const siblings = ((_node$parent4 = node.parent) === null || _node$parent4 === void 0 ? void 0 : _node$parent4.children) || [];
+      const index = siblings.indexOf(node);
+      return siblings.filter((s, i) => i < index).find(s => !!this.sibling.select(s));
+    }
+    return undefined;
+  }
+}
+export class ChildSelector extends Selector {
+  constructor(selector, parentSelector) {
+    super();
+    this.selector = selector;
+    this.parentSelector = parentSelector;
+    this.specificityWeight = this.specificityWeight.add(this.selector.specificityWeight).add(this.parentSelector.specificityWeight);
+  }
+  select(node) {
+    if (!node) {
+      return undefined;
+    }
+    node = this.selector.select(node);
+    if (node) {
+      let parent = node.parent;
+      while (parent) {
+        if (this.parentSelector.select(parent)) {
+          return parent;
+        }
+        parent = parent.parent;
+      }
+    }
+    return undefined;
+  }
+}
+export class ImmediateChildSelector extends Selector {
+  constructor(selector, parentSelector) {
+    super();
+    this.selector = selector;
+    this.parentSelector = parentSelector;
+    this.specificityWeight = this.specificityWeight.add(this.selector.specificityWeight).add(this.parentSelector.specificityWeight);
+  }
+  select(node) {
+    if (!node) {
+      return undefined;
+    }
+    node = this.selector.select(node);
+    if (node) {
+      return this.parentSelector.select(node.parent);
+    }
+    return undefined;
+  }
+}
+//# sourceMappingURL=selector.js.map