@elf-framework/sapa
Version:
Fantastic UI library for vanilla JS
1,759 lines (1,758 loc) • 151 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
return value;
};
var __accessCheck = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet = (obj, member, getter) => {
__accessCheck(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd = (obj, member, value) => {
if (member.has(obj))
throw TypeError("Cannot add the same private member more than once");
member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
};
var __privateSet = (obj, member, value, setter) => {
__accessCheck(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var _handlerCache, _state, _cachedMethodList, _functionCache, _childObjectList;
const VNODE_INSTANCE = "__vnodeInstance";
const COMPONENT_INSTANCE = "__componentInstance";
const ALTERNATE_TEMPLATE = "__alternateTemplate";
const SELF_COMPONENT_INSTANCE = "__selfComponentInstance";
const COMPONENT_ROOT_CONTEXT = "__componentRootContext";
const ELEMENT_INSTANCE = "__elementInstance";
const PARENT_VNODE_INSTANCE = "__parentVNodeInstance";
const FRAGMENT_VNODE_INSTANCE = "__fragmentVNodeInstance";
const ELEMENT_PROPS = "__elementProps";
const IS_FRAGMENT_ITEM = "__is_fragment_item";
function collectProps(root, rootClass, filterFunction = () => true) {
let p = root;
let results = [];
do {
const isObject2 = p instanceof Object;
if (isObject2 === false) {
break;
}
const isRootClass = p.constructor.name === rootClass.name;
if (isRootClass) {
break;
}
const names = Object.getOwnPropertyNames(p).filter(filterFunction);
results.push.apply(results, names);
} while (p = Object.getPrototypeOf(p));
return results;
}
function debounce(callback, delay = 0) {
if (delay === 0) {
return callback;
}
var t = void 0;
return function($1, $2, $3, $4, $5) {
if (t) {
window.clearTimeout(t);
}
t = window.setTimeout(function() {
callback($1, $2, $3, $4, $5);
}, delay || 300);
};
}
function throttle(callback, delay) {
var t = void 0;
return function($1, $2, $3, $4, $5) {
if (!t) {
t = window.setTimeout(function() {
callback($1, $2, $3, $4, $5);
t = null;
}, delay || 300);
}
};
}
function ifCheck(callback, context, checkMethods) {
return (...args) => {
const ifResult = checkMethods.every((check2) => {
return context[check2].apply(context, args);
});
if (ifResult) {
callback.apply(context, args);
}
};
}
function makeRequestAnimationFrame(callback, context) {
return (...args) => {
if (callback.requestAnimationFrameId) {
cancelAnimationFrame(callback.requestAnimationFrameId);
}
callback.requestAnimationFrameId = requestAnimationFrame(() => {
callback.apply(context, args);
});
};
}
function keyEach(obj, callback) {
Object.keys(obj).forEach((key, index2) => {
callback(key, obj[key], index2);
});
}
function keyMap(obj, callback) {
return Object.keys(obj).map((key, index2) => {
return callback(key, obj[key], index2);
});
}
function keyMapJoin(obj, callback, joinString = "") {
return keyMap(obj, callback).join(joinString);
}
function get(obj, key, callback) {
var returnValue = defaultValue(obj[key], key);
if (isFunction(callback)) {
return callback(returnValue);
}
return returnValue;
}
function defaultValue(value, defaultValue2) {
return typeof value == "undefined" ? defaultValue2 : value;
}
function isUndefined(value) {
return typeof value == "undefined";
}
function isNotUndefined(value) {
return !isUndefined(value);
}
function isBoolean(value) {
return typeof value == "boolean";
}
function isString(value) {
return typeof value == "string";
}
function isNotString(value) {
return !isString(value);
}
function isArray(value) {
return Array.isArray(value);
}
function isObject(value) {
return typeof value == "object" && !Array.isArray(value) && !isNumber(value) && !isString(value) && value !== null;
}
function isFunction(value) {
return typeof value == "function";
}
function isValue(value) {
return value !== void 0 && value !== null;
}
function isNumber(value) {
return typeof value == "number";
}
function isZero(num) {
return num === 0;
}
function isNotZero(num) {
return !isZero(num);
}
const CLONE_FUNCTION = (obj) => JSON.parse(JSON.stringify(obj));
function clone(obj) {
if (isUndefined(obj))
return void 0;
return CLONE_FUNCTION(obj);
}
function combineKeyArray(obj) {
Object.keys(obj).forEach((key) => {
if (Array.isArray(obj[key])) {
obj[key] = obj[key].join(", ");
}
});
return obj;
}
function classnames(...args) {
const result = [];
args.filter(Boolean).forEach((it) => {
if (isArray(it)) {
result.push(classnames(...it));
} else if (isObject(it)) {
Object.keys(it).filter((k) => Boolean(it[k])).forEach((key) => {
result.push(key);
});
} else if (isString(it)) {
result.push(it);
}
});
return result.length ? result.join(" ") : void 0;
}
const VNodeType = {
NODE: 8,
TEXT: 3,
FRAGMENT: 11,
COMPONENT: 100,
ELEMENT: 101,
COMMENT: 102,
ROOT: 103,
PORTAL: 104,
LAZY: 105
};
const MAGIC_METHOD_REG = /^@magic:([a-zA-Z][a-zA-Z0-9]*)[\W]{1}(.*)*$/g;
const MAGIC_METHOD = "@magic:";
const SPLITTER = "|";
const FUNC_REGEXP = /(([\$a-z_\-]+)\([^\(\)]*\)|([a-z_\-]+))/gi;
const FUNC_START_CHARACTER = "(";
const FUNC_END_CHARACTER = ")";
const MAGICMETHOD_EXTRA = {
KEYWORD: "keyword",
FUNCTION: "function",
VALUE: "value"
};
class MagicMethod {
constructor(obj) {
this.context = obj.context;
this.originalMethod = obj.originalMethod;
this.method = obj.method;
this.args = obj.args;
this.pipes = obj.pipes;
this.keys = obj.keys;
this.__cache = /* @__PURE__ */ new Map();
}
setCache(key, value) {
this.__cache.set(key, value);
}
hasCache(key) {
return this.__cache.has(key);
}
getCache(key) {
return this.__cache.get(key);
}
hasKeyword(keyword) {
if (this.hasCache(keyword)) {
return this.getCache(keyword);
}
let exists = false;
this.pipes.forEach((pipe) => {
switch (pipe.type) {
case MAGICMETHOD_EXTRA.KEYWORD:
if (pipe.value === keyword) {
exists = true;
}
break;
}
});
this.setCache(keyword, exists);
return exists;
}
hasFunction(funcName) {
if (this.hasCache(funcName)) {
return this.getCache(funcName);
}
let exists = !!this.getFunction(funcName);
this.setCache(funcName, exists);
return exists;
}
getFunction(funcName) {
return this.functions.find((pipe) => pipe.func === funcName);
}
getFunctionList(funcName) {
return this.functions.filter((pipe) => pipe.func === funcName);
}
get originalCallback() {
return this.context[this.originalMethod];
}
get keywords() {
return this.keys[MAGICMETHOD_EXTRA.KEYWORD].map((pipe) => pipe.value);
}
get functions() {
return this.keys[MAGICMETHOD_EXTRA.FUNCTION];
}
get values() {
return this.keys[MAGICMETHOD_EXTRA.VALUE].map((pipe) => pipe.value);
}
execute(...args) {
return this.originalCallback.call(this.context, ...args);
}
executeWithContext(context, ...args) {
return this.originalCallback.call(context, ...args);
}
static make(str, ...args) {
return `${MAGIC_METHOD}${str} ${args.join(SPLITTER)}`;
}
static check(str) {
return str.match(MAGIC_METHOD_REG) !== null;
}
static parse(str, context = {}) {
const matches = str.match(MAGIC_METHOD_REG);
if (!matches) {
return void 0;
}
const result = matches[0].split(MAGIC_METHOD)[1].split(SPLITTER).map((item) => item.trim());
let [initializer, ...pipes] = result;
const [method, ...args] = initializer.split(" ");
const pipeList = pipes.map((it) => {
return this.parsePipe(it);
}).filter((it) => it.value);
const pipeObjects = {
function: [],
keyword: [],
value: []
};
pipeList.forEach((pipe) => {
if (pipe.type === "function") {
pipeObjects.function.push(pipe);
} else if (pipe.type === "keyword") {
pipeObjects.keyword.push(pipe);
} else {
pipeObjects.value.push(pipe);
}
});
return new MagicMethod({
context,
originalMethod: str,
method,
args,
pipes: pipeList,
keys: pipeObjects
});
}
static parsePipe(it) {
const result = it.match(FUNC_REGEXP);
if (!result) {
return {
type: "value",
value: it
};
}
const [value] = result;
if (value.includes(FUNC_START_CHARACTER)) {
const [func, rest] = value.split(FUNC_START_CHARACTER);
const [args] = rest.split(FUNC_END_CHARACTER);
return {
type: "function",
value,
func,
args: args.split(",").map((it2) => it2.trim()).filter(Boolean)
};
}
return {
type: "keyword",
value: result[0]
};
}
}
const UUID_REG = /[xy]/g;
function uuid() {
var dt = new Date().getTime();
var uuid2 = "xxx12-xx-34xx".replace(UUID_REG, function(c) {
var r = (dt + Math.random() * 16) % 16 | 0;
dt = Math.floor(dt / 16);
return (c == "x" ? r : r & 3 | 8).toString(16);
});
return uuid2;
}
function uuidShort() {
var dt = new Date().getTime();
var uuid2 = "idxxxxxxx".replace(UUID_REG, function(c) {
var r = (dt + Math.random() * 16) % 16 | 0;
dt = Math.floor(dt / 16);
return (c == "x" ? r : r & 3 | 8).toString(16);
});
return uuid2;
}
const makeEventChecker = (value, split = SPLITTER) => {
return ` ${split} ${value}`;
};
const MULTI_PREFIX = "ME@";
const PIPE = (...args) => {
return args.join(SPLITTER);
};
const EVENT = (...args) => {
return MULTI_PREFIX + PIPE(...args);
};
const COMMAND = EVENT;
const ON = EVENT;
const NAME_SAPARATOR = ":";
const SAPARATOR = " ";
const DOM_EVENT_MAKE = (...keys) => {
var key = keys.join(NAME_SAPARATOR);
return (...args) => {
const [selector, ...result] = args;
return MagicMethod.make("domevent", [key, selector].join(" "), ...result);
};
};
const SUBSCRIBE_EVENT_MAKE = (...args) => {
return MagicMethod.make("subscribe", ...args);
};
const CALLBACK_EVENT_MAKE = (...args) => {
return MagicMethod.make("callback", ...args);
};
const OBSERVER_EVENT_MAKE = (...args) => {
return MagicMethod.make("observer", ...args);
};
const PROPS_MAKE = (ref, ...args) => {
return MagicMethod.make("props", ref, ...args);
};
const CHECKER = (value, split = SPLITTER) => {
return makeEventChecker(value, split);
};
const AFTER = (value, split = SPLITTER) => {
return CHECKER(`after(${value})`, split);
};
const BEFORE = (value, split = SPLITTER) => {
return CHECKER(`before(${value})`, split);
};
const IF = CHECKER;
const ARROW_UP = CHECKER("ArrowUp");
const ARROW_DOWN = CHECKER("ArrowDown");
const ARROW_LEFT = CHECKER("ArrowLeft");
const ARROW_RIGHT = CHECKER("ArrowRight");
const ENTER = CHECKER("Enter");
const SPACE = CHECKER("Space");
const ESCAPE = CHECKER("Escape");
const BACKSPACE = CHECKER("Backspace");
const DELETE = CHECKER("Delete");
const EQUAL = CHECKER("Equal");
const MINUS = CHECKER("Minus");
const BRACKET_RIGHT = CHECKER("BracketRight");
const BRACKET_LEFT = CHECKER("BracketLeft");
const ALT = CHECKER("isAltKey");
const SHIFT = CHECKER("isShiftKey");
const META = CHECKER("isMetaKey");
const CONTROL = CHECKER("isCtrlKey");
const MOUSE = CHECKER("hasMouse");
const TOUCH = CHECKER("hasTouch");
const PEN = CHECKER("hasPen");
const SELF = CHECKER("self");
const LEFT_BUTTON = CHECKER("isMouseLeftButton");
const RIGHT_BUTTON = CHECKER("isMouseRightButton");
const FIT = CHECKER("fit");
const PASSIVE = CHECKER("passive");
const DEBOUNCE = (t = 100) => {
return CHECKER(`debounce(${t})`);
};
const DELAY = (t = 300) => {
return CHECKER(`delay(${t})`);
};
const D1000 = DEBOUNCE(1e3);
const THROTTLE = (t = 100) => {
return CHECKER(`throttle(${t})`);
};
const ALL_TRIGGER = CHECKER("allTrigger()");
const SELF_TRIGGER = CHECKER("selfTrigger()");
const FRAME = CHECKER("frame()");
const PARAMS = (obj) => {
return CHECKER(`params(${variable(obj)})`);
};
const CAPTURE = CHECKER("capture()");
const PREVENT = AFTER(`preventDefault`);
const STOP = AFTER(`stopPropagation`);
const SUBSCRIBE = SUBSCRIBE_EVENT_MAKE;
const SUBSCRIBE_ALL = (...args) => SUBSCRIBE_EVENT_MAKE(...args, ALL_TRIGGER);
const SUBSCRIBE_SELF = (...args) => SUBSCRIBE_EVENT_MAKE(...args, SELF_TRIGGER);
const CONFIG = (config, ...args) => SUBSCRIBE_EVENT_MAKE(`config:${config}`, ...args);
const CALLBACK = CALLBACK_EVENT_MAKE;
const RAF = CALLBACK("requestAnimationFrame");
const OBSERVER = OBSERVER_EVENT_MAKE;
const PROPS = PROPS_MAKE;
const CUSTOM = DOM_EVENT_MAKE;
const CLICK = DOM_EVENT_MAKE("click");
const DOUBLECLICK = DOM_EVENT_MAKE("dblclick");
const MOUSEDOWN = DOM_EVENT_MAKE("mousedown");
const MOUSEUP = DOM_EVENT_MAKE("mouseup");
const MOUSEMOVE = DOM_EVENT_MAKE("mousemove");
const MOUSEOVER = DOM_EVENT_MAKE("mouseover");
const MOUSEOUT = DOM_EVENT_MAKE("mouseout");
const MOUSEENTER = DOM_EVENT_MAKE("mouseenter");
const MOUSELEAVE = DOM_EVENT_MAKE("mouseleave");
const TOUCHSTART = DOM_EVENT_MAKE("touchstart");
const TOUCHMOVE = DOM_EVENT_MAKE("touchmove");
const TOUCHEND = DOM_EVENT_MAKE("touchend");
const KEYDOWN = DOM_EVENT_MAKE("keydown");
const KEYUP = DOM_EVENT_MAKE("keyup");
const KEYPRESS = DOM_EVENT_MAKE("keypress");
const DRAG = DOM_EVENT_MAKE("drag");
const DRAGSTART = DOM_EVENT_MAKE("dragstart");
const DROP = DOM_EVENT_MAKE("drop");
const DRAGOVER = DOM_EVENT_MAKE("dragover");
const DRAGENTER = DOM_EVENT_MAKE("dragenter");
const DRAGLEAVE = DOM_EVENT_MAKE("dragleave");
const DRAGEXIT = DOM_EVENT_MAKE("dragexit");
const DRAGOUT = DOM_EVENT_MAKE("dragout");
const DRAGEND = DOM_EVENT_MAKE("dragend");
const CONTEXTMENU = DOM_EVENT_MAKE("contextmenu");
const CHANGE = DOM_EVENT_MAKE("change");
const INPUT = DOM_EVENT_MAKE("input");
const FOCUS = DOM_EVENT_MAKE("focus");
const FOCUSIN = DOM_EVENT_MAKE("focusin");
const FOCUSOUT = DOM_EVENT_MAKE("focusout");
const BLUR = DOM_EVENT_MAKE("blur");
const PASTE = DOM_EVENT_MAKE("paste");
const RESIZE = DOM_EVENT_MAKE("resize");
const SCROLL = DOM_EVENT_MAKE("scroll");
const SUBMIT = DOM_EVENT_MAKE("submit");
const POINTERSTART = (...args) => {
return CUSTOM("pointerdown")(...args) + LEFT_BUTTON;
};
const POINTEROVER = CUSTOM("pointerover");
const POINTERENTER = CUSTOM("pointerenter");
const POINTEROUT = CUSTOM("pointerout");
const POINTERLEAVE = CUSTOM("pointerleave");
const POINTERMOVE = CUSTOM("pointermove");
const POINTEREND = CUSTOM("pointerup");
const CHANGEINPUT = CUSTOM("change", "input");
const WHEEL = CUSTOM("wheel", "mousewheel", "DOMMouseScroll");
const ANIMATIONSTART = DOM_EVENT_MAKE("animationstart");
const ANIMATIONEND = DOM_EVENT_MAKE("animationend");
const ANIMATIONITERATION = DOM_EVENT_MAKE("animationiteration");
const TRANSITIONSTART = DOM_EVENT_MAKE("transitionstart");
const TRANSITIONEND = DOM_EVENT_MAKE("transitionend");
const TRANSITIONRUN = DOM_EVENT_MAKE("transitionrun");
const TRANSITIONCANCEL = DOM_EVENT_MAKE("transitioncancel");
const DOUBLETAB = CUSTOM("doubletab");
const POPSTATE = CUSTOM("popstate");
const ORIENTATIONCHANGE = CUSTOM("orientationchange");
const HASHCHANGE = CUSTOM("hashchange");
const Event = {
addDomEvent(eventTarget, eventName, callback, useCapture = false) {
if (eventTarget) {
eventTarget.addEventListener(eventName, callback, useCapture);
}
},
removeDomEvent(eventTarget, eventName, callback) {
if (eventTarget) {
eventTarget.removeEventListener(eventName, callback);
}
},
pos(e) {
if (e.touches && e.touches[0]) {
return e.touches[0];
}
return e;
},
posXY(e) {
var pos = this.pos(e);
return {
x: pos.pageX,
y: pos.pageY
};
}
};
class BaseHandler {
constructor(context, options = {}) {
this.context = context;
this.options = options;
}
initialize() {
}
load() {
}
refresh() {
}
render() {
}
getRef(id) {
return this.context.getRef(id);
}
run() {
}
destroy() {
}
}
const scrollBlockingEvents = {
touchstart: true,
touchmove: true,
mousedown: true,
mouseup: true,
mousemove: true
};
const eventConverts = {
doubletab: "touchend"
};
const customEventNames = {
doubletab: true
};
const selfCheckMethods = {
self(e) {
return e && e.$dt && e.$dt.is(e.target);
},
isAltKey(e) {
return e.altKey;
},
isCtrlKey(e) {
return e.ctrlKey;
},
isShiftKey(e) {
return e.shiftKey;
},
isMetaKey(e) {
return e.metaKey || e.key == "Meta" || e.code.indexOf("Meta") > -1;
},
isMouseLeftButton(e) {
return e.buttons === 1;
},
isMouseRightButton(e) {
return e.buttons === 2;
},
hasMouse(e) {
return e.pointerType === "mouse";
},
hasTouch(e) {
return e.pointerType === "touch";
},
hasPen(e) {
return e.pointerType === "pen";
},
preventDefault(e) {
e.preventDefault();
return true;
},
stopPropagation(e) {
e.stopPropagation();
return true;
}
};
class DomEventHandler extends BaseHandler {
initialize() {
var _a, _b;
if (!isGlobalForceRender() && this._domEvents && this.context.notEventRedefine) {
return;
}
if (!this._domEvents || this._domEvents.length === 0 || this._bindings.length === 0) {
this._domEvents = this.context.filterMethodes("domevent");
}
if (!this._initialized && !((_a = this._bindings) == null ? void 0 : _a.length) && ((_b = this._domEvents) == null ? void 0 : _b.length)) {
this._domEvents.forEach((it) => this.parseDomEvent(it));
this._initialized = true;
}
}
update() {
}
destroy() {
if (this.context.notEventRedefine)
;
}
getCallback(field) {
return this.context[field] || selfCheckMethods[field];
}
removeEventAll() {
this.getBindings().forEach((obj) => {
this.removeDomEvent(obj);
});
this.initBindings();
}
removeDomEvent({ eventName, dom, callback }) {
Event.removeDomEvent(dom, eventName, callback);
}
getBindings() {
if (!this._bindings) {
this.initBindings();
}
return this._bindings;
}
addBinding(obj) {
this.getBindings().push(obj);
}
initBindings() {
this._bindings = [];
}
matchPath(el, selector) {
if (el) {
if (el.matches(selector)) {
return el;
}
return this.matchPath(el.parentElement, selector);
}
return null;
}
hasDelegate(e, eventObject) {
return this.matchPath(e.target || e.srcElement, eventObject.delegate);
}
makeCallback(eventObject, magicMethod, callback) {
if (eventObject.delegate) {
return this.makeDelegateCallback(eventObject, magicMethod, callback);
} else {
return this.makeDefaultCallback(eventObject, magicMethod, callback);
}
}
makeDefaultCallback(eventObject, magicMethod, callback) {
return (e) => {
var returnValue = this.runEventCallback(
e,
eventObject,
magicMethod,
callback
);
if (isNotUndefined(returnValue)) {
return returnValue;
}
};
}
makeDelegateCallback(eventObject, magicMethod, callback) {
return (e) => {
const delegateTarget = this.hasDelegate(e, eventObject);
if (delegateTarget) {
e.$dt = Dom.create(delegateTarget);
var returnValue = this.runEventCallback(
e,
eventObject,
magicMethod,
callback
);
if (isNotUndefined(returnValue)) {
return returnValue;
}
}
};
}
runEventCallback(e, eventObject, magicMethod, callback) {
const context = this.context;
e.xy = Event.posXY(e);
if (eventObject.beforeMethods.length) {
eventObject.beforeMethods.every((before) => {
var _a;
return (_a = this.getCallback(before.target)) == null ? void 0 : _a.call(context, e, before.param);
});
}
if (this.checkEventType(e, eventObject)) {
var returnValue = callback(e, e.$dt, e.xy);
if (returnValue !== false && eventObject.afterMethods.length) {
eventObject.afterMethods.forEach((after) => {
var _a;
return (_a = this.getCallback(after.target)) == null ? void 0 : _a.call(context, e, after.param);
});
}
return returnValue;
}
}
checkEventType(e, eventObject) {
const context = this.context;
var hasKeyCode = true;
if (eventObject.codes.length) {
hasKeyCode = (e.code ? eventObject.codes.indexOf(e.code.toLowerCase()) > -1 : false) || (e.key ? eventObject.codes.indexOf(e.key.toLowerCase()) > -1 : false);
}
var isAllCheck = true;
if (eventObject.checkMethodList.length) {
isAllCheck = eventObject.checkMethodList.every((field) => {
var fieldValue = this.getCallback(field);
if (isFunction(fieldValue) && fieldValue) {
return fieldValue.call(context, e);
} else if (isNotUndefined(fieldValue)) {
return !!fieldValue;
}
return true;
});
}
return hasKeyCode && isAllCheck;
}
getDefaultDomElement(dom) {
const context = this.context;
let el;
if (dom) {
el = context.refs[dom] || context[dom] || window[dom];
} else {
el = context.el || context.$el || context.$root;
}
if (el instanceof Dom) {
return el.getElement();
}
return el;
}
getRealEventName(eventName) {
return eventConverts[eventName] || eventName;
}
getCustomEventName(eventName) {
return customEventNames[eventName] ? eventName : "";
}
getDefaultEventObject(eventName, dom, delegate, magicMethod, callback) {
var _a, _b;
const obj = {
eventName: this.getRealEventName(eventName),
customEventName: this.getCustomEventName(eventName),
callback
};
const [, , ...delegates] = magicMethod.args;
obj.dom = this.getDefaultDomElement(dom);
obj.delegate = delegates.join(SAPARATOR);
obj.beforeMethods = [];
obj.afterMethods = [];
obj.codes = [];
obj.checkMethodList = [];
const debounceFunction = magicMethod.getFunction("debounce");
const throttleFunction = magicMethod.getFunction("throttle");
if (debounceFunction) {
var debounceTime = +(((_a = debounceFunction.args) == null ? void 0 : _a[0]) || 0);
obj.callback = debounce(callback, debounceTime);
} else if (throttleFunction) {
var throttleTime = +(((_b = throttleFunction.args) == null ? void 0 : _b[0]) || 0);
obj.callback = throttle(callback, throttleTime);
}
const afterFunctionList = magicMethod.getFunctionList("after");
const beforeFunctionList = magicMethod.getFunctionList("before");
if (afterFunctionList.length) {
afterFunctionList.forEach((afterFunction) => {
var r = afterFunction.args[0].split(" ");
var [target, param] = r;
obj.afterMethods.push({
target,
param
});
});
}
if (beforeFunctionList.length) {
beforeFunctionList.forEach((beforeFunction) => {
var r = beforeFunction.args[0].split(" ");
var [target, param] = r;
obj.beforeMethods.push({
target,
param
});
});
}
magicMethod.keywords.forEach((keyword) => {
const method = keyword;
if (this.getCallback(method)) {
obj.checkMethodList.push(method);
} else {
obj.codes.push(method.toLowerCase());
}
});
return obj;
}
addDomEvent(eventObject, magicMethod, callback) {
eventObject.callback = this.makeCallback(
eventObject,
magicMethod,
callback
);
this.addBinding(eventObject);
var options = false;
if (magicMethod.hasKeyword("capture")) {
options = true;
}
if (scrollBlockingEvents[eventObject.eventName]) {
options = {
passive: true,
capture: options
};
}
if (eventObject.dom) {
Event.addDomEvent(
eventObject.dom,
eventObject.eventName,
eventObject.callback,
options
);
}
}
makeCustomEventCallback(eventObject, magicMethod, callback) {
var _a;
if (eventObject.customEventName === "doubletab") {
var delay = 300;
var delayFunction = magicMethod.getFunction("delay");
if (delayFunction) {
delay = +(((_a = delayFunction.args) == null ? void 0 : _a[0]) || 0);
}
return (...args) => {
if (!this.doubleTab) {
this.doubleTab = {
time: window.performance.now()
};
} else {
if (window.performance.now() - this.doubleTab.time < delay) {
callback(...args);
}
this.doubleTab = null;
}
};
}
return callback;
}
bindingDomEvent([eventName, dom, ...delegate], magicMethod, callback) {
let eventObject = this.getDefaultEventObject(
eventName,
dom,
delegate,
magicMethod,
callback
);
eventObject.callback = this.makeCustomEventCallback(
eventObject,
magicMethod,
eventObject.callback
);
this.addDomEvent(eventObject, magicMethod, eventObject.callback);
}
getEventNames(eventName) {
let results = [];
eventName.split(NAME_SAPARATOR).forEach((e) => {
var arr = e.split(NAME_SAPARATOR);
results.push.apply(results, arr);
});
return results;
}
parseDomEvent(it) {
const context = this.context;
var arr = it.args;
if (arr) {
var eventNames = this.getEventNames(arr[0]);
var callback = context[it.originalMethod].bind(context);
for (let i = 0, len = eventNames.length; i < len; i++) {
arr[0] = eventNames[i];
this.bindingDomEvent(arr, it, callback);
}
}
}
}
class ObserverHandler extends BaseHandler {
initialize() {
var _a, _b;
if (this._observers && this.context.notEventRedefine) {
return;
}
if (!this._observers || this._observers.length === 0) {
this._observers = this.context.filterMethodes("observer");
}
if (!((_a = this._bindings) == null ? void 0 : _a.length) && ((_b = this._observers) == null ? void 0 : _b.length)) {
this._observers.forEach((it) => this.parseObserver(it));
}
}
destroy() {
if (this.context.notEventRedefine)
;
else {
this.removeEventAll();
}
}
removeEventAll() {
this.getBindings().forEach((observer) => {
this.disconnectObserver(observer);
});
this.initBindings();
}
disconnectObserver(observer) {
observer == null ? void 0 : observer.disconnect();
}
getBindings() {
if (!this._bindings) {
this.initBindings();
}
return this._bindings;
}
addBinding(obj) {
this.getBindings().push(obj);
}
initBindings() {
this._bindings = [];
}
addObserver(observer) {
this.addBinding(observer);
}
getDefaultDomElement(dom) {
const context = this.context;
let el;
if (dom) {
el = context.refs[dom] || context[dom] || window[dom];
} else {
el = context.el || context.$el || context.$root;
}
if (el instanceof Dom) {
return el.getElement();
}
return el;
}
createObserver(magicMethod, callback) {
var _a;
const [observerType, observerTarget] = magicMethod.args || ["intersection"];
const $target = this.getDefaultDomElement(observerTarget);
const params = magicMethod.getFunction("params");
const options = getVariable((_a = params == null ? void 0 : params.args) == null ? void 0 : _a[0]);
let observer;
switch (observerType) {
case "intersection":
if (options.root) {
options.root = this.getDefaultDomElement(options.root);
}
observer = new window.IntersectionObserver(callback, options || {});
observer.observe($target);
break;
case "mutation":
observer = new window.MutationObserver(callback);
observer.observe(
$target,
options || {
attributes: true,
characterData: true,
childList: true
}
);
break;
case "performance":
observer = new window.PerformanceObserver(callback);
observer.observe(
options || {
entryTypes: ["paint"]
}
);
break;
}
return observer;
}
bindingObserver(magicMethod, callback) {
this.addObserver(this.createObserver(magicMethod, callback));
}
parseObserver(it) {
const context = this.context;
var originalCallback = context[it.originalMethod].bind(context);
this.bindingObserver(it, originalCallback);
}
}
class StoreHandler extends BaseHandler {
initialize() {
var _a, _b;
if (!this._callbacks) {
this._callbacks = this.context.filterMethodes("subscribe");
}
if (!((_a = this._bindings) == null ? void 0 : _a.length) && ((_b = this._callbacks) == null ? void 0 : _b.length)) {
this._callbacks.forEach((key) => this.parseSubscribe(key));
}
}
destroy() {
if (this.context.notEventRedefine)
;
else {
this.context.$store.offAll(this.context);
this._callbacks = null;
}
}
getCallback(field) {
return this.context[field];
}
getBindings() {
if (!this._bindings) {
this.initBindings();
}
return this._bindings;
}
addBinding(obj) {
this.getBindings().push(obj);
}
initBindings() {
this._bindings = [];
}
createLocalCallback(event, callback) {
var newCallback = callback.bind(this.context);
newCallback.displayName = `${this.context.sourceName}.${event}`;
newCallback.source = this.context.source;
return newCallback;
}
parseSubscribe(magicMethod) {
var _a, _b;
const events = magicMethod.args.join(" ");
const checkMethodList = [];
const eventList = [];
let debounce2 = 0;
let throttle2 = 0;
let isAllTrigger = false;
let isSelfTrigger = false;
let isFrameTrigger = false;
const debounceFunction = magicMethod.getFunction("debounce");
const throttleFunction = magicMethod.getFunction("throttle");
const allTriggerFunction = magicMethod.getFunction("allTrigger");
const selfTriggerFunction = magicMethod.getFunction("selfTrigger");
const frameFunction = magicMethod.getFunction("frame");
if (debounceFunction) {
debounce2 = +(((_a = debounceFunction.args) == null ? void 0 : _a[0]) || 0);
}
if (throttleFunction) {
throttle2 = +(((_b = throttleFunction.args) == null ? void 0 : _b[0]) || 0);
}
if (allTriggerFunction) {
isAllTrigger = true;
}
if (selfTriggerFunction) {
isSelfTrigger = true;
}
if (frameFunction) {
isFrameTrigger = true;
}
magicMethod.keywords.forEach((keyword) => {
const method = keyword;
if (this.context[method]) {
checkMethodList.push(method);
} else {
eventList.push(method);
}
});
const originalCallback = this.context[magicMethod.originalMethod];
[...eventList, events].filter(Boolean).forEach((e) => {
var callback = this.createLocalCallback(e, originalCallback);
this.context.$store.on(
e,
callback,
this.context,
debounce2,
throttle2,
isAllTrigger,
isSelfTrigger,
checkMethodList,
isFrameTrigger
);
});
this.addBinding(magicMethod);
}
}
let contextProviderList = {};
const renderFromRootCallback = debounce(() => {
renderRootElementInstanceList();
}, 10);
function renderFromRoot() {
renderFromRootCallback();
}
function useBatch(callback) {
getCurrentComponent().useBatch(callback);
}
function useRender(component) {
renderComponent(component);
}
function useId() {
return getCurrentComponent().useId();
}
function useSyncExternalStore(subscribe, getSnapshot) {
return getCurrentComponent().useSyncExternalStore(subscribe, getSnapshot);
}
function useState(initialState) {
return getCurrentComponent().useState(initialState);
}
function useEffect(callback, deps) {
return getCurrentComponent().useEffect(callback, deps);
}
function useReducer(reducer, initialState) {
return getCurrentComponent().useReducer(reducer, initialState);
}
function useMemo(callback, deps) {
return getCurrentComponent().useMemo(callback, deps);
}
function useCallback(callback, deps) {
return getCurrentComponent().useCallback(callback, deps);
}
function useRef(initialValue) {
return getCurrentComponent().useRef(initialValue);
}
function useContext(context) {
return getCurrentComponent().useContext(context);
}
function createContextProvider(context) {
contextProviderList[context.id] = {
context,
index: 0,
lastProvider: null
};
}
class InnerProvider {
constructor(context, provider) {
this.context = context;
this.provider = provider;
}
get id() {
return this.provider.id;
}
get value() {
return this.provider.value;
}
set(provider) {
this.provider = provider;
}
}
function pushContextProvider(context, provider) {
const innerProvider = new InnerProvider(context, provider);
const contextInfo = contextProviderList[context.id];
if (!contextInfo.lastProvider) {
contextInfo.prevProvider = contextInfo.lastProvider;
contextInfo.lastProvider = innerProvider;
contextInfo.lastProvider.prev = contextInfo.prevProvider;
} else {
const lastProvider = contextInfo.lastProvider;
const lastProviderValue = lastProvider.value;
const lastProviderId = lastProvider.id;
if (lastProviderId === innerProvider.id) {
contextInfo.lastProvider.set(innerProvider);
} else {
contextInfo.lastProvider.next = innerProvider;
innerProvider.prev = contextInfo.lastProvider;
contextInfo.lastProvider = innerProvider;
}
if (lastProviderValue !== innerProvider.value) {
runProviderSubscribe(innerProvider);
}
}
}
function popContextProvider(context) {
const contextInfo = contextProviderList[context.id];
if (contextInfo.lastProvider && contextInfo.lastProvider.prev) {
contextInfo.lastProvider = contextInfo.lastProvider.prev;
if (contextInfo.lastProvider) {
contextInfo.lastProvider.next = null;
}
}
}
function getContextProvider(context) {
const contextInfo = contextProviderList[context.id];
return contextInfo.lastProvider;
}
let contextIndex = 0;
function createContext(defaultValue2) {
const context = {
id: "context-" + contextIndex++,
defaultValue: defaultValue2,
lastProvider: null,
Provider: function({ value, content }) {
pushContextProvider(context, {
value,
id: this.id,
component: this
});
useEffect(() => {
popContextProvider(context);
}, []);
return content[0] || content;
}
};
context.Consumer = ({ content: [children2] }) => {
const value = getContextProvider(context).value;
return children2(value);
};
createContextProvider(context);
return context;
}
const providerEvents = {};
function addProviderSubscribe(providerId, component, callback) {
if (!providerEvents[providerId]) {
providerEvents[providerId] = {};
}
providerEvents[providerId][component.id] = callback;
}
function runProviderSubscribe(provider) {
const components = providerEvents[provider.id];
if (components) {
Object.values(components).forEach((callback) => {
callback(provider);
});
}
}
function useStore(key, defaultValue2) {
return getCurrentComponent().useStore(key, defaultValue2);
}
function useStoreSet(key, value) {
return getCurrentComponent().useStoreSet(key, value);
}
function useStoreValue(key, defaultValue2) {
return getCurrentComponent().useStoreValue(key, defaultValue2);
}
function useGetStoreValue(key, defaultValue2) {
return getCurrentComponent().useGetStoreValue(key, defaultValue2);
}
function useSetStoreValue(key) {
return getCurrentComponent().useSetStoreValue(key);
}
function useRootContext(key) {
return useStore(COMPONENT_ROOT_CONTEXT)[key];
}
function useSubscribe(name, callback, debounceSecond = 0, throttleSecond = 0, isSelf = false) {
return getCurrentComponent().useSubscribe(
name,
callback,
debounceSecond,
throttleSecond,
isSelf
);
}
function useComponentRender(name, options = {
debounce: 0,
throttle: 0,
isSelf: false,
checkFunction: null
}) {
const component = getCurrentComponent();
return component.useSubscribe(
name,
(...args) => {
if (isFunction(options.checkFunction)) {
if (options.checkFunction(...args)) {
useRender(component);
}
} else {
useRender(component);
}
},
options.debounce,
options.throttle,
options.isSelf
);
}
function useSelf(name, callback, debounceSecond = 0, throttleSecond = 0) {
return getCurrentComponent().useSelf(
name,
callback,
debounceSecond,
throttleSecond
);
}
function useEmit(name, ...args) {
return getCurrentComponent().emit(name, ...args);
}
function useTrigger(name, ...args) {
return getCurrentComponent().trigger(name, ...args);
}
function useMagicMethod(methodName, callback) {
return getCurrentComponent().initMagicMethod(methodName, callback);
}
function forwardRef(callback) {
return getCurrentComponent().forwardRef(callback);
}
class MagicHandler {
constructor() {
__privateAdd(this, _handlerCache, {});
this.handlers = this.initializeHandler();
}
initializeHandler(localHandlers = {}) {
return createHandlerInstance(this, localHandlers);
}
loadHandlerCache(func) {
if (!__privateGet(this, _handlerCache)[func]) {
__privateGet(this, _handlerCache)[func] = this.handlers.filter((h) => h[func]);
}
return __privateGet(this, _handlerCache)[func];
}
async runHandlers(func = "run", ...args) {
await Promise.all(
this.loadHandlerCache(func).map(async (h) => {
await h[func](...args);
})
);
}
filterFunction(func, ...args) {
return this.loadHandlerCache(func).map((h) => {
return h[func](...args);
});
}
}
_handlerCache = new WeakMap();
const USE_STATE = Symbol("useState");
const USE_EFFECT = Symbol("useEffect");
const USE_MEMO = Symbol("useMemo");
const USE_CALLBACK = Symbol("useCallback");
const USE_REF = Symbol("useRef");
const USE_CONTEXT = Symbol("useContext");
const USE_SUBSCRIBE = Symbol("useSubscribe");
const USE_ID = Symbol("useId");
const USE_SYNC_EXTERNAL_STORE = Symbol("useSyncExternalStore");
const USE_STORE_VALUE = Symbol("useStoreValue");
const USE_SET_STORE_VALUE = Symbol("useSetStoreValue");
const USE_GET_STORE_VALUE = Symbol("useGetStoreValue");
class RefClass {
constructor(current) {
this.current = current;
}
setCurrent(current) {
if (this.current !== current) {
this.current = current;
}
}
}
function createRef(current = void 0) {
const refInstance = new RefClass(current);
return refInstance;
}
function createState({ value, component }) {
let localValue = { value, component };
function getValue(v) {
if (typeof v === "function") {
return v(localValue.value);
}
return v;
}
localValue.update = (newValue) => {
const _newValue = getValue(newValue);
if (localValue.value !== _newValue) {
localValue.value = _newValue;
renderComponent(localValue.component);
}
};
return localValue;
}
function createExternalStore({ subscribe, getSnapshot, isEqual: isEqual2, component }) {
let localValue = {
value: getSnapshot(),
subscribe,
getSnapshot,
unsubscribe: null,
component
};
const update = () => {
const _newValue = getSnapshot();
const isDiff = isFunction(isEqual2) ? isEqual2(localValue, _newValue) === false : localValue.value !== _newValue;
if (isDiff) {
localValue.value = _newValue;
renderComponent(localValue.component);
}
};
localValue.unsubscribe = subscribe(update);
return localValue;
}
function createStoreValue({ key, defaultValue: defaultValue2, component }) {
let localValue = Object.assign(
{},
createGetStoreValue({ key, defaultValue: defaultValue2, component }),
createSetStoreValue({ key, defaultValue: defaultValue2, component })
);
return localValue;
}
function createGetStoreValue({ key, defaultValue: defaultValue2, component }) {
let localValue = {
key,
component,
getValue: () => {
return component.$store.get(key, defaultValue2);
}
};
return localValue;
}
function createSetStoreValue({ key, defaultValue: defaultValue2, component }) {
let localValue = {
key,
component,
defaultValue: defaultValue2,
update: (value) => {
let _newValue = value;
if (isFunction(value)) {
_newValue = value(component.$store.get(key) || defaultValue2);
}
component.$store.set(key, _newValue);
}
};
return localValue;
}
function createEffect({ callback, deps, component, hasChangedDeps }) {
return {
callback,
deps,
hasChangedDeps,
component
};
}
function createMemo({ callback, deps, component, value }) {
const localValue = {
callback,
deps,
component,
value: null
};
localValue.value = isUndefined(value) ? callback.call(component) : value;
return localValue;
}
function createSubscribe({
name,
callback,
debounceSecond,
throttleSecond,
isSelf,
component
}) {
const localValue = {
name,
callback,
component,
debounceSecond,
throttleSecond,
isSelf
};
localValue.unsubscribe = component.$store.on(
name,
callback,
component,
debounceSecond,
throttleSecond,
false,
isSelf
);
return localValue;
}
class HookMachine extends MagicHandler {
constructor() {
super(...arguments);
__publicField(this, "__stateHooks", []);
__publicField(this, "__stateHooksIndex", 0);
}
copyHooks() {
return {
__stateHooks: this.__stateHooks,
__stateHooksIndex: this.__stateHooksIndex
};
}
initHooks() {
this.__stateHooks = [];
this.__stateHooksIndex = 0;
}
reloadHooks(hooks) {
this.__stateHooks = hooks.__stateHooks || [];
this.__stateHooksIndex = hooks.__stateHooksIndex || 0;
this.__stateHooks.forEach((hook, index2) => {
switch (hook == null ? void 0 : hook.type) {
case USE_STATE:
hook.hookInfo = createState({
value: hook.hookInfo.value,
component: this
});
break;
case USE_MEMO:
case USE_CALLBACK:
case USE_REF:
var newData = {
callback: hook.hookInfo.callback,
deps: hook.hookInfo.deps,
component: this
};
if (hook.type === USE_REF || hook.type === USE_MEMO) {
newData.value = hook.hookInfo.value;
}
hook.hookInfo = createMemo(newData);
break;
case USE_STORE_VALUE:
hook.hookInfo = createStoreValue({
key: hook.hookInfo.key,
defaultValue: hook.hookInfo.defaultValue,
component: this
});
break;
case USE_GET_STORE_VALUE:
hook.hookInfo = createGetStoreValue({
key: hook.hookInfo.key,
defaultValue: hook.hookInfo.defaultValue,
component: this
});
break;
case USE_SET_STORE_VALUE:
hook.hookInfo = createSetStoreValue({
key: hook.hookInfo.key,
defaultValue: hook.hookInfo.defaultValue,
component: this
});
break;
case USE_SYNC_EXTERNAL_STORE:
hook.hookInfo = createExternalStore({
subscribe: hook.hookInfo.subscribe,
getSnapshot: hook.hookInfo.getSnapshot,
isEqual: hook.hookInfo.isEqual,
component: this
});
break;
case USE_SUBSCRIBE:
if (hook.hookInfo.unsubscribe) {
hook.hookInfo.unsubscribe();
}
hook.hookInfo = createSubscribe({
name: hook.hookInfo.name,
callback: hook.hookInfo.callback.bind(this),
debounceSecond: hook.hookInfo.debounceSecond,
throttleSecond: hook.hookInfo.throttleSecond,
isSelf: hook.hookInfo.isSelf,
component: this
});
break;
case USE_EFFECT:
default:
this.__stateHooks[index2] = void 0;
break;
}
});
}
resetCurrentComponent() {
this.resetHookIndex();
resetCurrentComponent(this);
}
resetHookIndex() {
this.__stateHooksIndex = 0;
}
increaseHookIndex() {
this.__stateHooksIndex++;
}
getHook(hookType) {
const hookInfo = this.__stateHooks[this.__stateHooksIndex];
if (hookType && (hookInfo == null ? void 0 : hookInfo.type) !== hookType) {
return void 0;
}
return hookInfo;
}
setHook(type, hookInfo) {
this.__stateHooks[this.__stateHooksIndex] = {
type,
hookInfo
};
}
useBatch(callback) {
pendingComponent(this);
callback && callback();
removePendingComponent(this);
renderComponent(this);
}
useId() {
if (!this.getHook(USE_ID)) {
this.setHook(USE_ID, { value: uuid(), component: this });
}
const { value } = this.getHook().hookInfo;
this.increaseHookIndex();
return value;
}
useSyncExternalStore(subscribe, getSnapshot, isEqual2) {
if (!this.getHook(USE_SYNC_EXTERNAL_STORE)) {
this.setHook(
USE_SYNC_EXTERNAL_STORE,
createExternalStore({
subscribe,
getSnapshot,
isEqual: isEqual2,
component: this
})
);
}
const { value } = this.getHook().hookInfo;
this.increaseHookIndex();
return value;
}
useState(initialState) {
if (!this.getHook(USE_STATE)) {
this.setHook(
USE_STATE,
createState({ value: initialState, component: this })
);
}
const value = this.getHook().hookInfo;
this.increaseHookIndex();
return [value.value, value.update];
}
isChangedDeps(deps) {
const hasDeps = !deps;
const {
hookInfo: { deps: currentDeps }
} = this.getHook() || { hookInfo: {} };
const hasChangedDeps = currentDeps ? !deps.every((d, i) => d === currentDeps[i]) : true;
if (isArray(deps) && deps.length === 0 && isArray(currentDeps) && currentDeps.length === 0) {
return false;
}
return hasDeps || hasChangedDeps;
}
useEffect(callback, deps) {
this.setHook(
USE_EFFECT,
createEffect({
deps,
callback,
hasChangedDeps: this.isChangedDeps(deps),
component: this
})
);
this.increaseHookIndex();
}
useReducer(reducer, initialState) {
const [state, setState] = this.useState(initialState);
function dispatch(action) {
setState((prevState) => reducer(prevState, action));
}
return [state, dispatch];
}
useMemo(callback, deps, useType = USE_MEMO) {
const hasChangedDeps = this.isChangedDeps(deps);
if (hasChangedDeps) {
this.setHook(
useType,
createMemo({
deps,
callback,
component: this
})
);
}
const lastHookValue = this.getHook().hookInfo || {};
this.increaseHookIndex();
return lastHookValue.value;
}
useCallback(callback, deps) {
return this.useMemo(() => callback, deps, USE_CALLBACK);
}
useRef(initialValue) {
return this.useMemo(() => createRef(initialValue), [], USE_REF);
}
refreshProvider(provider) {
const hookInfo = this.filterHooks(USE_CONTEXT).find(
(it) => it.provider.id === provider.id
);
if (hookInfo) {
hookInfo.provider = provider;
}
}
useContext(context) {
if (!this.getHook(USE_CONTEXT)) {
this.setHook(USE_CONTEXT, {
provider: getContextProvider(context),
component: this
});
}
const { provider } = this.getHook().hookInfo;
addProviderSubscribe(provider.id, this, () => {
renderComponent(this);
});
this.increaseHookIndex();
return (provider == null ? void 0 : provider.value) || context.defaultValue;
}
useSubscribe(name, callback, debounceSecond = 0, throttleSecond = 0, isSelf = false) {
if (!this.getHook(USE_SUBSCRIBE)) {
this.setHook(
USE_SUBSCRIBE,
createSubscribe({
name,
callback,
component: this,
debounceSecond,
throttleSecond,
isSelf
})
);
}
this.increaseHookIndex();
}
useSelf(name, callback, debounceSecond = 0, throttleSecond = 0) {
return this.useSubscribe(
name,
callback,
debounceSecond,
throttleSecond,
true
);
}
useEmit(name, ...args) {
return this.emit(name, ...args);
}
useStoreValue(key, defaultValue2) {
this.useSubscribe(key, () => {
renderComponent(this);
});
if (!this.getHook(USE_STORE_VALUE)) {
this.setHook(
USE_STORE_VALUE,
createStoreValue({
key,
defaultValue: defaultValue2,
component: this
})
);
}
const value = this.getHook().hookInfo;
this.increaseHookIndex();
return [value.getValue(), value.update];
}
useGetStoreValue(key, defaultValue2) {
if (!this.getHook(USE_GET_STORE_VALUE)) {
this.setHook(
USE_GET_STORE_VALUE,
createGetStoreValue({
key,
defaultValue: defaultValue2,
component: this