UNPKG

@dooboostore/dom-render

Version:
624 lines (623 loc) 26.3 kB
var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); var DomRenderProxy_exports = {}; __export(DomRenderProxy_exports, { DomRenderProxy: () => DomRenderProxy, getDomRenderConfig: () => getDomRenderConfig, getDomRenderOriginObject: () => getDomRenderOriginObject, getDomRenderProxy: () => getDomRenderProxy, isWrapProxyDomRenderProxy: () => isWrapProxyDomRenderProxy }); module.exports = __toCommonJS(DomRenderProxy_exports); var import_RawSet = require("./rawsets/RawSet"); var import_EventManager = require("./events/EventManager"); var import_Types = require("./types/Types"); var import_RawSetType = require("./rawsets/RawSetType"); var import_DrThisProperty = require("./operators/DrThisProperty"); var import_RawSetOperatorType = require("./rawsets/RawSetOperatorType"); var import_ComponentSet = require("./components/ComponentSet"); var import_DomRenderNoProxy = require("./decorators/DomRenderNoProxy"); var import_OnCreateRender = require("./lifecycle/OnCreateRender"); var import_OnInitRender = require("./lifecycle/OnInitRender"); var import_OnCreateRenderData = require("./lifecycle/OnCreateRenderData"); var import_OnChangeAttrRender = require("./lifecycle/OnChangeAttrRender"); var import_core_web = require("@dooboostore/core-web"); var import_OnBeforeReturnSet = require("./lifecycle/OnBeforeReturnSet"); var import_OnChildRenderedByProperty = require("./lifecycle/OnChildRenderedByProperty"); var import_core = require("@dooboostore/core"); var import_core2 = require("@dooboostore/core"); var import_OnProxyDomRender = require("./lifecycle/OnProxyDomRender"); var import_OnRawSetRendered = require("./lifecycle/OnRawSetRendered"); var import_OnChildRawSetRendered = require("./lifecycle/OnChildRawSetRendered"); var import_rawsets = require("./rawsets"); const excludeGetSetPropertys = [ import_rawsets.DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY, import_rawsets.DomRenderProxyMetaKey.onBeforeReturnGet, import_rawsets.DomRenderProxyMetaKey.onBeforeReturnSet, import_rawsets.DomRenderProxyMetaKey.__render, import_rawsets.DomRenderProxyMetaKey._rawSets, import_rawsets.DomRenderProxyMetaKey._targets, import_rawsets.DomRenderProxyMetaKey._domRender_proxy, import_rawsets.DomRenderProxyMetaKey._DomRender_isFinal, import_rawsets.DomRenderProxyMetaKey._domRender_ref, import_rawsets.DomRenderProxyMetaKey._DomRender_origin, import_rawsets.DomRenderProxyMetaKey._DomRender_ref, import_rawsets.DomRenderProxyMetaKey._DomRender_proxy ]; const isWrapProxyDomRenderProxy = (obj) => { return obj && typeof obj === "object" && "_DomRender_isProxy" in obj; }; const getDomRenderOriginObject = (obj) => { if (isWrapProxyDomRenderProxy(obj)) { return obj._domRender_origin; } return obj; }; const getDomRenderConfig = (obj) => { if (isWrapProxyDomRenderProxy(obj)) { return obj._domRender_config; } return void 0; }; const getDomRenderProxy = (obj) => { if (isWrapProxyDomRenderProxy(obj)) { return obj._domRender_proxy; } return void 0; }; class DomRenderProxy { // public name = Math.random(); constructor(_domRender_origin, target, _domRender_config) { this._domRender_origin = _domRender_origin; this._domRender_config = _domRender_config; this._domRender_ref = /* @__PURE__ */ new Map(); this._rawSets = /* @__PURE__ */ new Map(); this._targets = /* @__PURE__ */ new Set(); if (target) { this._targets.add(target); } } static unFinal(obj) { return import_Types.DomRenderFinalProxy.unFinal(obj); } static final(obj) { return import_Types.DomRenderFinalProxy.final(obj); } static isFinal(obj) { return import_core2.ValidUtils.isNull(obj) || import_Types.DomRenderFinalProxy.isFinal(obj); } static isProxy(obj) { return import_core2.ValidUtils.isNull(obj) || isWrapProxyDomRenderProxy(obj); } static getOriginalObject(obj) { if (isWrapProxyDomRenderProxy(obj)) { return obj._domRender_origin; } return obj; } async run(objProxy) { this._domRender_proxy = objProxy; if ((0, import_OnProxyDomRender.isOnProxyDomRender)(objProxy)) { objProxy.onProxyDomRender(this._domRender_config); } const obj = getDomRenderOriginObject(objProxy); if (obj) { Object.keys(obj).forEach((it) => { try { const isNoProxy = Reflect.getMetadata(import_DomRenderNoProxy.DomRenderNoProxyKey, obj, it) || Reflect.getMetadata(import_DomRenderNoProxy.DomRenderNoProxyKey, Object.getPrototypeOf(obj).constructor); if (isNoProxy) { return obj; } } catch (e) { } const target = obj[it]; if (target !== void 0 && target !== null && typeof target === "object" && !DomRenderProxy.isFinal(target) && !Object.isFrozen(target) && !(obj instanceof import_Types.Shield)) { const isExcluded = this._domRender_config.proxyExcludeTyps?.some((it2) => target instanceof it2) ?? false; if (!isExcluded) { const proxyAfter = this.proxy(objProxy, target, it); obj[it] = proxyAfter; } } }); } for (let target of this._targets) { await this.initRender(target); } } async initRender(target, rawSet) { if (target instanceof Element) { target.innerHTML = target.innerHTML.replace(/@this@/g, "this"); } const onCreate = target.getAttribute?.(import_RawSet.RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME); let createParam = []; if (onCreate) { createParam = import_core.ObjectUtils.Script.evaluateReturn(onCreate, this._domRender_proxy); if (!Array.isArray(createParam)) { createParam = [createParam]; } } if ((0, import_OnCreateRenderData.isOnCreateRenderData)(this._domRender_proxy)) { this._domRender_proxy?.onCreateRenderData({ rootParent: this._domRender_proxy }); } if ((0, import_OnCreateRender.isOnCreateRender)(this._domRender_proxy)) { this._domRender_proxy.onCreateRender(...createParam); } this._targets.add(target); const rawSets = import_RawSet.RawSet.checkPointCreates(target, this._domRender_proxy, this._domRender_config); this._domRender_config.eventManager.applyEvent( this._domRender_proxy, this._domRender_config.eventManager.findAttrElements(target, this._domRender_config), this._domRender_config ); rawSets.forEach((it) => { const variables = it.getUsingTriggerVariables(this._domRender_config); if (variables.size <= 0) { this.addRawSet("", it); } else { variables.forEach((sit) => { this.addRawSet(sit, it); }); } }); const targetRawSets = await this.render(this.getRawSets()); for (let targetRawSet of targetRawSets) { let initParam; if (onCreate) { initParam = import_core.ObjectUtils.Script.evaluateReturn(onCreate, this._domRender_proxy); } if ((0, import_OnInitRender.isOnInitRender)(this._domRender_proxy)) { await this._domRender_proxy.onInitRender( initParam, rawSet ?? { dataSet: { config: this._domRender_config } } ); } } } getRawSets() { const set = /* @__PURE__ */ new Set(); this._rawSets.forEach((v, k) => { v.forEach((it) => set.add(it)); }); return Array.from(set); } // 중요 important async render(raws, fullPathStr) { if (typeof raws === "string") { const iter = this._rawSets.get(raws); if (iter) { raws = Array.from(iter); } else { raws = void 0; } } const removeRawSets = []; const rawSets = raws ?? this.getRawSets(); const CHUNK_SIZE = 50; const chunks = []; let rawSetsArray = Array.from(rawSets); for (const rawSet of rawSetsArray) { await this.renderExecute(rawSet, fullPathStr, removeRawSets); } if ((0, import_OnChildRawSetRendered.isOnChildRawSetRendered)(this._domRender_proxy)) { await this._domRender_proxy.onChildRawSetRendered(); } if (removeRawSets.length > 0) { this.removeRawSet(...removeRawSets); } return this.getRawSets(); } async renderExecute(it, fullPathStr, removeRawSets) { it.getUsingTriggerVariables(this._domRender_config).forEach((path) => { this.addRawSet(path, it); }); let renderResult; if (it.isConnected) { const targetAttrMap = it.point.node?.getAttribute?.(import_EventManager.EventManager.normalAttrMapAttrName); if (it.detect?.action) { it.detect.action(); } else if (it.type === import_RawSetType.RawSetType.TARGET_ELEMENT && it.dataSet?.render?.currentThis && fullPathStr && targetAttrMap) { const attrStart = performance.now(); new Map(JSON.parse(targetAttrMap)).forEach((v, k) => { var _a; const isUsing = v.variablePaths.some((it2) => import_EventManager.EventManager.isUsingThisVar(it2.inner, `this.${fullPathStr}`)); if (isUsing) { const targetAttrObject = import_RawSet.RawSet.getAttributeObject(it.point.node, { script: it.dataSet?.render?.renderScript ?? "", obj: Object.assign(this._domRender_proxy ?? {}, { __render: it.dataSet?.render }) }); (_a = it.dataSet).render ?? (_a.render = {}); it.dataSet.render.attribute = targetAttrObject; if ((0, import_OnChangeAttrRender.isOnChangeAttrRender)(it.dataSet?.render?.currentThis)) { it.dataSet?.render?.currentThis?.onChangeAttrRender?.(k, targetAttrObject[k], { rawSet: it }); } } }); const attrEnd = performance.now(); } else { const renderStart = performance.now(); const rawSets = await it.render(this._domRender_proxy, this._domRender_config); const renderEnd = performance.now(); renderResult = rawSets; if (rawSets && rawSets.raws.length > 0) { await this.render(rawSets.raws); } } } else { removeRawSets.push(it); } const t = it.findNearThis(this._domRender_proxy); if ((0, import_OnRawSetRendered.isOnRawSetRendered)(t)) { await t.onRawSetRendered(it, { path: fullPathStr, value: import_core.ObjectUtils.Script.evaluateReturn(`this.${fullPathStr}`, this._domRender_proxy), root: this._domRender_proxy, renderResult }); } } // domrender_ref로 찾는걸로 바꿈 // public findRootDomRenderProxy(): DomRenderProxy<any> { // let current:DomRenderProxy<any> = this; // while (current.parentProxy) { // current = current.parentProxy; // } // return current; // } root(pathInfos, value, lastDoneExecute = true) { const rootStartTime = Date.now(); const pathKey = pathInfos.flat().map((i) => i.path).join("."); const fullPaths = []; if (this._domRender_ref.size > 0) { this._domRender_ref.forEach((it, key) => { if (import_rawsets.DomRenderProxyMetaKey._DomRender_isProxy in key) { it.forEach((sit) => { try { const recursiveStartTime = Date.now(); const concat = pathInfos.concat([[{ path: sit, obj: key }]]); const items = key._DomRender_proxy?.root( concat, value, lastDoneExecute ); fullPaths.push(items.flat()); } catch (e) { } }); } }); } else { const pathProcessStartTime = Date.now(); const shortPaths = pathInfos.reverse().map((it) => it.map((it2) => it2.path).join(",")); const fullPathStr = shortPaths.map((it) => isNaN(Number(it)) ? "." + it : `[${it}]`).join("").slice(1); if (lastDoneExecute) { const iterable = this._rawSets.get(fullPathStr); const front = shortPaths.slice(0, shortPaths.length - 1).map((it) => isNaN(Number(it)) ? "." + it : `[${it}]`).join(""); const lastPropertyName = shortPaths[shortPaths.length - 1]; const path = "this" + front; const data = import_core.ObjectUtils.Script.evaluateReturn(import_core.ObjectUtils.Path.toOptionalChainPath(path), this._domRender_proxy); const promiseStartTime = Date.now(); new Promise(async (resolve) => { const promiseInnerStartTime = Date.now(); let rData = []; const firstPathStr = front.slice(1); const dictionaryCheckStartTime = Date.now(); const firstTargets = this._rawSets.get(firstPathStr); const firstTargetDictionary = []; firstTargets?.forEach((it) => { const type = it.point.start?.getAttribute?.("type"); if (type === import_RawSetOperatorType.RawSetOperatorType.DR_THIS_PROPERTY) { firstTargetDictionary.push(it); } }); if (firstTargetDictionary.length > 0) { const rawSets = []; let skip = false; firstTargetDictionary.forEach((it) => { const startElement = it.point.start; const keys = startElement.getAttribute(import_RawSet.RawSet.DR_HAS_KEYS_OPTIONNAME)?.split(",") ?? []; if (value === void 0) { const rawSet = it.getHasRawSet(lastPropertyName); rawSet?.remove(); startElement.setAttribute( import_RawSet.RawSet.DR_HAS_KEYS_OPTIONNAME, keys.filter((it2) => it2 !== lastPropertyName).join(",") ); } if (!keys.includes(lastPropertyName)) { const raws = import_DrThisProperty.DrThisProperty.append( this._domRender_proxy, fullPathStr, lastPropertyName, it, this._domRender_config ); if (raws) { rawSets.push(...raws); } } else { skip = true; } }); if (skip === false || rawSets.length > 0) { rData = await this.render(rawSets); } } const renderStartTime = Date.now(); if (lastPropertyName === "length" && Array.isArray(data)) { const aIterable = this._rawSets.get(firstPathStr); if (aIterable) { rData = await this.render(Array.from(aIterable)); } } else if (iterable) { rData = await this.render(Array.from(iterable), fullPathStr); } const eventProcessStartTime = Date.now(); const Node = this._domRender_config.window.Node; this._targets.forEach((it) => { if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) { const findAttrStartTime = Date.now(); const targets = this._domRender_config.eventManager.findAttrElements( it, this._domRender_config ); const targetCount = targets?.size || targets?.length || 0; const changeVarStartTime = Date.now(); this._domRender_config.eventManager.changeVar( this._domRender_proxy, targets, `this.${fullPathStr}`, this._domRender_config ); } }); if (rData?.length > 0 && (0, import_OnChildRenderedByProperty.isOnChildRenderedByProperty)(data)) { const propertyValue = import_core.ObjectUtils.Script.evaluateReturn(`this.${lastPropertyName}`, data); data.onChildRenderedByProperty(lastPropertyName, propertyValue); } resolve(rData); }).then((it) => { }); } fullPaths.push([{ path: fullPathStr, obj: this._domRender_proxy }]); } return fullPaths; } set(target, p, value, receiver) { if (typeof p === "string" && p !== import_rawsets.DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY && excludeGetSetPropertys.includes(p) || Reflect.getMetadata(import_DomRenderNoProxy.DomRenderNoProxyKey, target, p)) { target[p] = value; return true; } let start = performance.now(); if (typeof p === "string") { value = this.proxy(receiver, value, p); } if (value instanceof import_ComponentSet.ComponentSet && target[p] instanceof import_ComponentSet.ComponentSet) { value.config.beforeComponentSet = target[p]; } target[p] = value; let fullPathInfo = []; if (typeof p === "string") { fullPathInfo = this.root([[{ path: p, obj: this._domRender_proxy }]], value); } const rootElement = this._domRender_config.rootElement ?? this._domRender_config.window.document; import_core_web.DocumentUtils.querySelectorAllByAttributeName(rootElement, import_EventManager.EventManager.normalAttrMapAttrName)?.forEach( (elementInfo) => { const targets = new Map( import_core.ObjectUtils.Script.evaluateReturn(elementInfo.value) ); Array.from(targets.entries()).filter(import_core2.ValidUtils.isDefined).flatMap(([key, valueScript]) => { return fullPathInfo.flat().filter((it) => valueScript.variablePaths?.some((vit) => vit.inner.includes(`this.${it.path}`))).flatMap((it) => ({ key, valueScript, pathInfo: it })); }).forEach((it) => { const variablePaths = it.valueScript.variablePaths; let targetScript = it.valueScript.originalAttrValue; let script; if (it.valueScript.isStringTemplate) { variablePaths.forEach((it2) => { let r = import_core.ObjectUtils.Path.toOptionalChainPath(it2.inner); targetScript = targetScript.replaceAll(it2.origin, `\${${r}}`); }); script = "`" + targetScript + "`"; } else { variablePaths.forEach((it2) => { let r = import_core.ObjectUtils.Path.toOptionalChainPath(it2.inner); targetScript = targetScript.replaceAll(it2.origin, `${r}`); }); script = targetScript; } const value1 = import_core.ObjectUtils.Script.evaluateReturn(script, it.pathInfo.obj); if (value1 === null || value1 === void 0) { elementInfo.element.removeAttribute(it.key); } else { elementInfo.element.setAttribute(it.key, value1); elementInfo.element[it.key] = value1; } }); } ); import_core_web.DocumentUtils.querySelectorAllByAttributeName(rootElement, import_EventManager.EventManager.linkTargetMapAttrName)?.forEach( (elementInfo) => { const targets = new Map(import_core.ObjectUtils.Script.evaluateReturn(elementInfo.value)); Array.from(targets.entries()).filter(([key, value2]) => value2.trim()).filter(import_core2.ValidUtils.isDefined).flatMap(([key, valueScript]) => { return fullPathInfo.flat().filter((it) => valueScript.includes(`this.${it.path}`)).flatMap((it) => ({ key, valueScript, pathInfo: it })); }).forEach((info) => { const value1 = import_core.ObjectUtils.Script.evaluateReturn(info.valueScript, info.pathInfo.obj); const applyAttributeName = import_EventManager.EventManager.linkAttrs.find((it) => it.name === info.key); if (applyAttributeName) { if (value1 === null) { elementInfo.element.removeAttribute(applyAttributeName.property); } else { elementInfo.element.setAttribute(applyAttributeName.property, value1); } } }); Array.from(targets.entries()).filter(([key, value2]) => value2.trim()).filter(import_core2.ValidUtils.isDefined).flatMap(([key, valueScript]) => { return fullPathInfo.flat().filter((it) => valueScript.includes(`this.${it.path}`)).flatMap((it) => ({ key, valueScript, pathInfo: it })); }).forEach((info) => { const linkInfo = import_EventManager.EventManager.linkAttrs.find((it) => it.name === info.key); if (linkInfo) { elementInfo.element[linkInfo.property] = value; } }); } ); if (import_rawsets.DomRenderProxyMetaKey.onBeforeReturnSet in receiver && typeof p === "string" && !(this._domRender_config.proxyExcludeOnBeforeReturnSets ?? []).concat(excludeGetSetPropertys).includes(p)) { if ((0, import_OnBeforeReturnSet.isOnBeforeReturnSet)(receiver)) { receiver.onBeforeReturnSet?.( p, value, fullPathInfo.map((it) => it.map((it2) => it2.path).join()) ); } } return true; } get(target, p, receiver) { if (p === import_rawsets.DomRenderProxyMetaKey._DomRender_origin || p === import_rawsets.DomRenderProxyMetaKey._domRender_origin) { return this._domRender_origin; } else if (p === import_rawsets.DomRenderProxyMetaKey._DomRender_ref || p === import_rawsets.DomRenderProxyMetaKey._domRender_ref) { return this._domRender_ref; } else if (p === import_rawsets.DomRenderProxyMetaKey._DomRender_config || p === import_rawsets.DomRenderProxyMetaKey._domRender_config) { return this._domRender_config; } else if (p === import_rawsets.DomRenderProxyMetaKey._DomRender_proxy || p === import_rawsets.DomRenderProxyMetaKey._domRender_proxy) { return this; } else { let it = target[p]; if (it && typeof it === "object" && import_rawsets.DomRenderProxyMetaKey._DomRender_isProxy in it && Object.prototype.toString.call(it._DomRender_origin) === "[object Date]") { it = it._DomRender_origin; } if (import_rawsets.DomRenderProxyMetaKey.onBeforeReturnGet in receiver && typeof p === "string" && !(this._domRender_config.proxyExcludeOnBeforeReturnGets ?? []).concat(excludeGetSetPropertys).includes(p)) { receiver?.onBeforeReturnGet?.( p, it, this.root([[{ path: p, obj: this._domRender_proxy }]], it, false) ); } return it; } } deleteProperty(target, p) { delete target[p]; if (typeof p === "string") { this.root([[{ path: p, obj: this._domRender_proxy }]]); } return true; } has(target, p) { return p === import_rawsets.DomRenderProxyMetaKey._DomRender_isProxy || p in target; } proxy(parentProxy, obj, p) { try { const isObject = typeof obj === "object"; const isNoProxy = isObject && (0, import_DomRenderNoProxy.isDomRenderNoProxy)(obj, p); const isExclude = this._domRender_config.proxyExcludeTyps?.some((it) => obj instanceof it) ?? false; const isFinal = isObject && DomRenderProxy.isFinal(obj); const isFrozen = Object.isFrozen(obj); const isShield = obj instanceof import_Types.Shield; if (obj === void 0 || obj === null || isNoProxy || isExclude || import_core2.ValidUtils.isNullOrUndefined(obj) || !isObject || isFinal || isFrozen || isShield) { return obj; } } catch (e) { } if (!isWrapProxyDomRenderProxy(obj)) { const domRender = new DomRenderProxy(obj, void 0, this._domRender_config); domRender.addRef(parentProxy, p); const proxy = new Proxy(obj, domRender); domRender.run(proxy); return proxy; } if (isWrapProxyDomRenderProxy(obj)) { const d = obj._DomRender_proxy; d.addRef(this._domRender_proxy, p); return obj; } else { return obj; } } addRef(parent, path) { if (!this._domRender_ref.get(parent)) { this._domRender_ref.set(parent, /* @__PURE__ */ new Set()); } this._domRender_ref.get(parent)?.add(path); } addRawSetAndRender(path, rawSet) { this.addRawSet(path, rawSet); this.render([rawSet]); } addRawSet(path, rawSet) { if (!this._rawSets.get(path)) { this._rawSets.set(path, /* @__PURE__ */ new Set()); } this._rawSets.get(path)?.add(rawSet); } // public removeRawSet(...raws: RawSet[]) { // this._rawSets.forEach(it => { // raws.forEach(sit => it.delete(sit)); // }) // this.garbageRawSet(); // } removeRawSet(...raws) { this._rawSets.forEach((it) => { it.forEach((sit) => { if (!sit.isConnected) { it.delete(sit); } else if (raws.includes(sit)) { it.delete(sit); } }); }); this.targetGarbageRawSet(); } // 특정 경로로 시작하는 모든 child RawSet들을 제거 // 예: path가 'users'이면 'users[0]', 'users[0].imgUrl', 'users.length' 등 모두 제거 removeChildRawSetsByPath(parentPath) { const pathsToRemove = []; this._rawSets.forEach((rawSetSet, path) => { if (path === parentPath || path.startsWith(parentPath + "[") || path.startsWith(parentPath + ".")) { pathsToRemove.push(path); } }); if (pathsToRemove.length > 0) { pathsToRemove.forEach((path) => { const rawSetSet = this._rawSets.get(path); if (rawSetSet) { rawSetSet.forEach((rawSet) => { rawSet.remove?.(); }); this._rawSets.delete(path); } }); } } targetGarbageRawSet() { this._targets.forEach((it) => { if (!it.isConnected) { this._targets.delete(it); } }); } garbageRawSet() { this._targets.forEach((it) => { if (!it.isConnected) { this._targets.delete(it); } }); this._rawSets.forEach((it) => { it.forEach((sit) => { if (!sit.isConnected) { it.delete(sit); } }); }); } } //# sourceMappingURL=DomRenderProxy.js.map