typerscript
Version:
hyperscript and hyperscript helpers written in TypeScript, leveraging TypeStyle
186 lines • 6.49 kB
JavaScript
;
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var typestyle_1 = require("typestyle");
var typestyle = require("typestyle");
exports.typestyle = typestyle;
var __ = { IS_NATIVE__: false };
// This avoids allocating new empty objects all the time
var EmptyObject = Object.freeze({});
var objIsLocked = function (obj) {
return !Object.isExtensible(obj) || Object.isFrozen(obj) || Object.isSealed(obj);
};
var Style = /** @class */ (function () {
function Style(_a) {
var selector = _a.selector, rules = _a.rules;
var firstChar = selector[0];
this.selector = firstChar === '.' || firstChar === '#' ? selector : '.' + selector;
this.rules = rules;
}
return Style;
}());
exports.Style = Style;
function createClasses(classes) {
var styles = {};
Object.entries(classes).forEach(function (_a) {
var key = _a[0], val = _a[1];
var selector = __.IS_NATIVE__ ? key : typestyle_1.style(__assign({ $debugName: key }, val));
styles[key] = new Style({
rules: val,
selector: selector,
});
});
return styles;
}
exports.createClasses = createClasses;
//const isValidString = param => typeof param === 'string' && param.length > 0
var startsWith = function (str, start) { return str[0] === start; };
//const isValidSelector = param => isValidString(param) && (startsWith(param, '.') || startsWith(param, '#'))
var isStyleObject = function (param) { return param instanceof Style; };
// isSelectorOrStyle = param => isValidString(param) || isStyleObject(param)
var isSelector = function (param) { return typeof param === 'string'; };
var isChildren = Array.isArray;
var classIdSplit = /([\.#]?[a-zA-Z0-9\u007F-\uFFFF_:-]+)/;
function parseSelector(selector) {
var parts = selector.split(classIdSplit);
var classNames = [];
var id;
for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
var part = parts_1[_i];
if (part.startsWith('#'))
id = part.substring(1);
else if (part.startsWith('.'))
classNames.push(part.substring(1));
}
var className = classNames.join(' ');
if (id && className) {
return { id: id, className: className };
}
if (id) {
return { id: id };
}
if (className) {
return { className: className };
}
return undefined;
}
function createElement(nameOrType, properties, children) {
if (properties === void 0) { properties = { isRendered: true }; }
if (children === void 0) { children = []; }
var isRendered = properties.isRendered, props = __rest(properties, ["isRendered"]);
if (!isRendered && isRendered !== undefined)
return null;
var args = [nameOrType, props];
if (!Array.isArray(children)) {
args.push(children);
}
else {
args.push.apply(args, children);
}
return React.createElement.apply(React, args);
}
function filterObject(obj, predicate) {
return Object.assign.apply(Object, [{}].concat(Object.keys(obj)
.filter(function (key) { return predicate(obj[key], key); })
.map(function (key) {
return (_a = {}, _a[key] = obj[key], _a);
var _a;
})));
}
var flexKeys = ['flex', 'flexGrow', 'flexShrink', 'flexBasis'];
var getFlexObj = function (rules) { return filterObject(rules, function (value, key) { return flexKeys.includes(key); }); };
function _hh() {
var _args = [];
for (var _i = 0; _i < arguments.length; _i++) {
_args[_i] = arguments[_i];
}
}
exports._hh = _hh;
function hh(nameOrType) {
return (function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return h.apply(void 0, [nameOrType].concat(args));
});
}
exports.hh = hh;
function h(nameOrType) {
var _args = [];
for (var _i = 1; _i < arguments.length; _i++) {
_args[_i - 1] = arguments[_i];
}
// const name = nameOrType.displayName || nameOrType.name || nameOrType
var selector;
var rules;
var props;
var children;
var isLocked = false;
var args = _args.filter(function (arg) { return arg !== undefined; });
var arg = 0;
if (isSelector(args[arg])) {
selector = parseSelector(args[arg]);
arg++;
}
else if (isStyleObject(args[arg])) {
selector = parseSelector(args[arg].selector);
// if (__.IS_NATIVE__) {
rules = args[arg].rules;
// }
arg++;
}
if (typeof args[arg] === 'object' && !isChildren(args[arg])) {
props = args[arg];
isLocked = true;
arg++;
}
else
props = {};
if (isChildren(args[arg])) {
children = args[arg];
}
if (__.IS_NATIVE__) {
if (isLocked) {
props = __assign({}, props);
}
props.style = props.style ? __assign({}, rules, props.style) : rules;
}
else if (rules) {
if (isLocked) {
props = __assign({}, props);
}
// react-native-web needs 'flex' props as an actual style prop in order
// to work correctly
var flexObj = getFlexObj(rules);
if (Object.keys(flexObj).length > 0) {
props.style = props.style ? __assign({}, flexObj, props.style) : flexObj;
}
}
if (selector) {
props = __assign({}, selector, props);
}
// In some cases, e.g. react-native's TouchableWithoutFeedback we will get
// 'Error: React.Children.only expected to receive a single React element child.'
// when passing an array, so if there is only one child, just put that
return createElement(nameOrType, props, children);
}
exports.h = h;
//# sourceMappingURL=index.js.map