@domql/element
Advanced tools
Comparing version
374
create.js
@@ -7,18 +7,15 @@ 'use strict' | ||
import { | ||
HTML_TAGS, | ||
isObject, | ||
isFunction, | ||
isString, | ||
exec, | ||
is, | ||
isNode, | ||
isUndefined, | ||
generateKey, | ||
checkIfKeyIsComponent, | ||
deepClone, | ||
applyComponentFromContext, | ||
applyKeyComponentAsExtend, | ||
isVariant, | ||
detectInfiniteLoop, | ||
addChildrenIfNotInOriginal | ||
propertizeElement, | ||
createElement, | ||
applyExtends, | ||
createScope, | ||
isMethod, | ||
OPTIONS, | ||
initProps, | ||
createIfConditionFlag, | ||
deepClone | ||
} from '@domql/utils' | ||
@@ -30,6 +27,3 @@ | ||
import { isMethod } from './methods/index.js' | ||
import { createProps } from './props/index.js' | ||
import { applyExtend } from './extend.js' | ||
import { REGISTRY, registry } from './mixins/index.js' | ||
import { REGISTRY } from './mixins/index.js' | ||
import { addMethods } from './methods/set.js' | ||
@@ -39,40 +33,35 @@ import { assignKeyAsClassname } from './mixins/classList.js' | ||
import { OPTIONS } from './cache/options.js' | ||
import { | ||
applyVariant, | ||
createValidDomqlObjectFromSugar | ||
} from './utils/component.js' | ||
const ENV = process.env.NODE_ENV | ||
/** | ||
* Creating a domQL element using passed parameters | ||
* Creating a DOMQL element using passed parameters | ||
*/ | ||
export const create = async (element, parent, key, options = OPTIONS.create || {}, attachOptions) => { | ||
cacheOptions(element, options) | ||
export const create = async ( | ||
props, | ||
parentEl, | ||
passedKey, | ||
options = OPTIONS.create || {}, | ||
attachOptions | ||
) => { | ||
cacheOptions(options) | ||
// if element is STRING | ||
if (checkIfPrimitive(element)) { | ||
element = applyValueAsText(element, parent, key) | ||
} | ||
const element = createElement(props, parentEl, passedKey, options, ROOT) | ||
if (!element) return | ||
element = redefineElement(element, parent, key, options) | ||
parent = redefineParent(element, parent, key) | ||
key = createKey(element, parent, key) | ||
const { key, parent, __ref: ref } = element | ||
const ref = addRef(element, parent, key) | ||
if (element.key === 'BannerHgroup') { | ||
console.warn(deepClone(element)) | ||
} | ||
ref.__initialProps = deepClone(element.props) | ||
applyExtends(element, parent, options) | ||
applyContext(element, parent, options) | ||
if (element.key === 'BannerHgroup') { | ||
console.warn(deepClone(element)) | ||
} | ||
applyComponentFromContext(element, parent, options) | ||
propertizeElement(element, parent) | ||
if (!ref.__skipCreate) { | ||
applyExtend(element, parent, options) | ||
} | ||
await triggerEventOn('start', element, options) | ||
element.key = key | ||
if (options.onlyResolveExtends) { | ||
@@ -82,8 +71,8 @@ return onlyResolveExtends(element, parent, key, options) | ||
await triggerEventOn('start', element, options) | ||
if (element.key === 'BannerHgroup') { | ||
console.warn(element) | ||
} | ||
switchDefaultOptions(element, parent, options) | ||
resetOptions(element, parent, options) | ||
addCaching(element, parent) | ||
addMethods(element, parent, options) | ||
@@ -99,4 +88,6 @@ | ||
// apply props settings | ||
createProps(element, parent, options) | ||
if (element.scope === 'props' || element.scope === true) element.scope = element.props | ||
initProps(element, parent, options) | ||
if (element.scope === 'props' || element.scope === true) { | ||
element.scope = element.props | ||
} | ||
@@ -107,8 +98,8 @@ // recatch if it passess props again | ||
// if it already HAS a NODE | ||
if (element.node && ref.__if) { | ||
return assignNode(element, parent, key, attachOptions) | ||
if (element.node) { | ||
if (ref.__if) return assignNode(element, parent, key, attachOptions) | ||
} | ||
// apply variants | ||
applyVariant(element, parent) | ||
// applyVariant(element, parent) | ||
@@ -123,4 +114,2 @@ const onInit = await triggerEventOn('init', element, options) | ||
addChildrenIfNotInOriginal(element, parent, key) | ||
await renderElement(element, parent, options, attachOptions) | ||
@@ -135,82 +124,13 @@ | ||
const createBasedOnType = (element, parent, key, options) => { | ||
// if ELEMENT is not given | ||
if (element === undefined) { | ||
if (ENV === 'test' || ENV === 'development') { | ||
console.warn(key, 'element is undefined in', parent && parent.__ref && parent.__ref.path) | ||
} | ||
return {} | ||
} | ||
if (isString(key) && key.slice(0, 2 === '__')) { | ||
if (ENV === 'test' || ENV === 'development') { | ||
console.warn(key, 'seems like to be in __ref') | ||
} | ||
} | ||
if (element === null) return | ||
if (element === true) return { text: true } | ||
// if element is extend | ||
if (element.__hash) { | ||
return { extend: element } | ||
} | ||
return element | ||
} | ||
const redefineElement = (element, parent, key, options) => { | ||
const elementWrapper = createBasedOnType(element, parent, key, options) | ||
if (options.syntaxv3 || (element.props && element.props.syntaxv3) || (parent && parent.props && parent.props.syntaxv3) /* kalduna guard */) { | ||
if (element.props) element.props.syntaxv3 = true | ||
else element.syntaxv3 = true | ||
return createValidDomqlObjectFromSugar(element, parent, key, options) | ||
} else if (checkIfKeyIsComponent(key)) { | ||
return applyKeyComponentAsExtend(elementWrapper, parent, key) | ||
} | ||
// TODO: move as define plugins | ||
// Responsive rendering | ||
if (checkIfMedia(key)) { | ||
return applyMediaProps(elementWrapper, parent, key) | ||
} | ||
return elementWrapper | ||
} | ||
const redefineParent = (element, parent, key, options) => { | ||
if (!parent) return ROOT | ||
if (isNode(parent)) { | ||
const parentNodeWrapper = { key: ':root', node: parent } | ||
ROOT[`${key}_parent`] = parentNodeWrapper | ||
return parentNodeWrapper | ||
} | ||
return parent | ||
} | ||
const cacheOptions = (element, options) => { | ||
const cacheOptions = options => { | ||
if (options && !OPTIONS.create) { | ||
OPTIONS.create = options | ||
OPTIONS.create.context = element.context || options.context | ||
OPTIONS.create.context = options.context | ||
} | ||
} | ||
const createKey = (element, parent, key) => { | ||
return ( | ||
exec(key, element) || | ||
key || | ||
element.key || | ||
generateKey() | ||
).toString() | ||
} | ||
const addRef = (element, parent) => { | ||
if (element.__ref) element.__ref.origin = element | ||
else element.__ref = { origin: element } | ||
return element.__ref | ||
} | ||
const switchDefaultOptions = (element, parent, options) => { | ||
const resetOptions = (element, parent, options) => { | ||
if (Object.keys(options).length) { | ||
registry.defaultOptions = options | ||
if (options.ignoreChildExtend) delete options.ignoreChildExtend | ||
OPTIONS.defaultOptions = options | ||
if (options.ignoreChildExtends) delete options.ignoreChildExtends | ||
} | ||
@@ -220,3 +140,5 @@ } | ||
const addElementIntoParentChildren = (element, parent) => { | ||
if (parent.__ref && parent.__ref.__children) parent.__ref.__children.push(element.key) | ||
if (parent.__ref && parent.__ref.__children) { | ||
parent.__ref.__children.push(element.key) | ||
} | ||
} | ||
@@ -227,3 +149,5 @@ | ||
if (visitedElements.has(element)) { | ||
if (ENV === 'test' || ENV === 'development') console.warn('Cyclic rendering detected:', element.__ref.path) | ||
if (ENV === 'test' || ENV === 'development') { | ||
console.warn('Cyclic rendering detected:', element.__ref.path) | ||
} | ||
} | ||
@@ -250,10 +174,27 @@ | ||
const path = ref.path | ||
if (path.includes('ComponentsGrid')) path.splice(0, path.indexOf('ComponentsGrid') + 2) | ||
if (path.includes('demoComponent')) path.splice(0, path.indexOf('demoComponent') + 1) | ||
if (path.includes('ComponentsGrid')) { | ||
path.splice(0, path.indexOf('ComponentsGrid') + 2) | ||
} | ||
if (path.includes('demoComponent')) { | ||
path.splice(0, path.indexOf('demoComponent') + 1) | ||
} | ||
const isDemoComponent = element.lookup(el => el.state.key)?.state?.key | ||
element.warn('Error happened in:', isDemoComponent ? isDemoComponent + ' ' : '' + path.join('.')) | ||
element.warn( | ||
'Error happened in:', | ||
isDemoComponent ? isDemoComponent + ' ' : '' + path.join('.') | ||
) | ||
element.verbose() | ||
element.error(e, options) | ||
if (element.on?.error) element.on.error(e, element, element.state, element.context, options) | ||
if (element.props?.onError) element.props.onError(e, element, element.state, element.context, options) | ||
if (element.on?.error) { | ||
element.on.error(e, element, element.state, element.context, options) | ||
} | ||
if (element.props?.onError) { | ||
element.props.onError( | ||
e, | ||
element, | ||
element.state, | ||
element.context, | ||
options | ||
) | ||
} | ||
} | ||
@@ -287,105 +228,28 @@ } | ||
const checkIfPrimitive = (element) => is(element)('string', 'number') | ||
const applyValueAsText = (element, parent, key) => { | ||
const extendTag = element.extend && element.extend.tag | ||
const childExtendTag = parent.childExtend && parent.childExtend.tag | ||
const childPropsTag = parent.props.childProps && parent.props.childProps.tag | ||
const isKeyValidHTMLTag = ((HTML_TAGS.body.indexOf(key) > -1) && key) | ||
return { | ||
text: element, | ||
tag: extendTag || childExtendTag || childPropsTag || isKeyValidHTMLTag || 'string' | ||
} | ||
} | ||
const applyContext = (element, parent, options) => { | ||
const forcedOptionsContext = options.context && !ROOT.context && !element.context | ||
if (forcedOptionsContext) ROOT.context = options.context | ||
// inherit from parent or root | ||
if (!element.context) element.context = parent.context || options.context || ROOT.context | ||
} | ||
// Create scope - shared object across the elements to the own or the nearest parent | ||
const createScope = (element, parent) => { | ||
const { __ref: ref } = element | ||
// If the element doesn't have a scope, initialize it using the parent's scope or the root's scope. | ||
if (!element.scope) element.scope = parent.scope || ref.root.scope || {} | ||
} | ||
const createIfConditionFlag = (element, parent) => { | ||
const { __ref: ref } = element | ||
if (isFunction(element.if) && !element.if(element, element.state, element.context)) { | ||
delete ref.__if | ||
} else ref.__if = true | ||
} | ||
const addCaching = (element, parent) => { | ||
const { __ref: ref, key } = element | ||
let { __ref: parentRef } = parent | ||
// enable TRANSFORM in data | ||
if (!element.transform) element.transform = {} | ||
// enable CACHING | ||
if (!ref.__cached) ref.__cached = {} | ||
if (!ref.__defineCache) ref.__defineCache = {} | ||
// enable EXEC | ||
if (!ref.__exec) ref.__exec = {} | ||
if (!ref.__execProps) ref.__execProps = {} | ||
// enable CLASS CACHING | ||
if (!ref.__class) ref.__class = {} | ||
if (!ref.__classNames) ref.__classNames = {} | ||
// enable CLASS CACHING | ||
if (!ref.__attr) ref.__attr = {} | ||
// enable CHANGES storing | ||
if (!ref.__changes) ref.__changes = [] | ||
// enable CHANGES storing | ||
if (!ref.__children) ref.__children = [] | ||
if (checkIfKeyIsComponent(key)) ref.__componentKey = key.split('_')[0].split('.')[0].split('+')[0] | ||
// Add _root element property | ||
const hasRoot = parent && parent.key === ':root' | ||
if (!ref.root) ref.root = hasRoot ? element : parentRef.root | ||
// set the PATH array | ||
// if (ENV === 'test' || ENV === 'development') { | ||
if (!parentRef) parentRef = parent.ref = {} | ||
if (!parentRef.path) parentRef.path = [] | ||
ref.path = parentRef.path.concat(element.key) | ||
// } | ||
} | ||
const onlyResolveExtends = (element, parent, key, options) => { | ||
const { __ref: ref } = element | ||
if (!ref.__skipCreate) { | ||
addCaching(element, parent) | ||
addMethods(element, parent, options) | ||
addMethods(element, parent, options) | ||
createScope(element, parent) | ||
createScope(element, parent) | ||
createState(element, parent) | ||
if (element.scope === 'state') element.scope = element.state | ||
createState(element, parent) | ||
if (element.scope === 'state') element.scope = element.state | ||
createIfConditionFlag(element, parent) | ||
createIfConditionFlag(element, parent) | ||
// apply props settings | ||
createProps(element, parent, options) | ||
if (element.scope === 'props' || element.scope === true) element.scope = element.props | ||
// apply props settings | ||
initProps(element, parent, options) | ||
if (element.scope === 'props' || element.scope === true) { | ||
element.scope = element.props | ||
} | ||
if (element.node && ref.__if) { parent[key || element.key] = element } // Borrowed from assignNode() | ||
if (element.node && ref.__if) { | ||
parent[key || element.key] = element | ||
} // Borrowed from assignNode() | ||
if (!element.props) element.props = {} | ||
applyVariant(element, parent) | ||
if (!element.props) element.props = {} | ||
// applyVariant(element, parent) | ||
addElementIntoParentChildren(element, parent) | ||
} | ||
addElementIntoParentChildren(element, parent) | ||
@@ -400,9 +264,10 @@ if (element.tag !== 'string' && element.tag !== 'fragment') { | ||
isMethod(k, element) || | ||
isObject((registry.default || registry)[k]) || | ||
isVariant(k) | ||
) continue | ||
isObject(REGISTRY[k]) | ||
) { | ||
continue | ||
} | ||
const hasDefine = element.define && element.define[k] | ||
const contextHasDefine = element.context && element.context.define && | ||
element.context.define[k] | ||
const contextHasDefine = | ||
element.context && element.context.define && element.context.define[k] | ||
const optionsHasDefine = options.define && options.define[k] | ||
@@ -412,3 +277,8 @@ | ||
continue | ||
} else if (element[k] && !hasDefine && !optionsHasDefine && !contextHasDefine) { | ||
} else if ( | ||
element[k] && | ||
!hasDefine && | ||
!optionsHasDefine && | ||
!contextHasDefine | ||
) { | ||
create(exec(element[k], element), element, k, options) | ||
@@ -424,3 +294,3 @@ } | ||
// added by createProps | ||
// added by initProps | ||
if (element.props) { | ||
@@ -434,22 +304,22 @@ delete element.props.update | ||
const checkIfMedia = (key) => key.slice(0, 1) === '@' | ||
// const checkIfMedia = (key) => key.slice(0, 1) === '@' | ||
const applyMediaProps = (element, parent, key) => { | ||
const { props } = element | ||
if (props) { | ||
props.display = 'none' | ||
if (props[key]) props[key].display = props.display | ||
else props[key] = { display: props.display || 'block' } | ||
return element | ||
} else { | ||
return { | ||
...element, | ||
props: { | ||
display: 'none', | ||
[key]: { display: 'block' } | ||
} | ||
} | ||
} | ||
} | ||
// const applyMediaProps = (element, parent, key) => { | ||
// const { props } = element | ||
// if (props) { | ||
// props.display = 'none' | ||
// if (props[key]) props[key].display = props.display | ||
// else props[key] = { display: props.display || 'block' } | ||
// return element | ||
// } else { | ||
// return { | ||
// ...element, | ||
// props: { | ||
// display: 'none', | ||
// [key]: { display: 'block' } | ||
// } | ||
// } | ||
// } | ||
// } | ||
export default create |
@@ -31,5 +31,2 @@ "use strict"; | ||
var import_state = require("@domql/state"); | ||
var import_methods = require("./methods/index.js"); | ||
var import_props = require("./props/index.js"); | ||
var import_extend = require("./extend.js"); | ||
var import_mixins = require("./mixins/index.js"); | ||
@@ -39,39 +36,37 @@ var import_set = require("./methods/set.js"); | ||
var import_iterate = require("./iterate.js"); | ||
var import_options = require("./cache/options.js"); | ||
var import_component = require("./utils/component.js"); | ||
const ENV = "development"; | ||
const create = async (element, parent, key, options = import_options.OPTIONS.create || {}, attachOptions) => { | ||
cacheOptions(element, options); | ||
if (checkIfPrimitive(element)) { | ||
element = applyValueAsText(element, parent, key); | ||
const create = async (props, parentEl, passedKey, options = import_utils.OPTIONS.create || {}, attachOptions) => { | ||
cacheOptions(options); | ||
const element = (0, import_utils.createElement)(props, parentEl, passedKey, options, import_tree.ROOT); | ||
if (!element) return; | ||
const { key, parent, __ref: ref } = element; | ||
if (element.key === "BannerHgroup") { | ||
console.warn((0, import_utils.deepClone)(element)); | ||
} | ||
element = redefineElement(element, parent, key, options); | ||
parent = redefineParent(element, parent, key); | ||
key = createKey(element, parent, key); | ||
const ref = addRef(element, parent, key); | ||
ref.__initialProps = (0, import_utils.deepClone)(element.props); | ||
applyContext(element, parent, options); | ||
(0, import_utils.applyComponentFromContext)(element, parent, options); | ||
if (!ref.__skipCreate) { | ||
(0, import_extend.applyExtend)(element, parent, options); | ||
(0, import_utils.applyExtends)(element, parent, options); | ||
if (element.key === "BannerHgroup") { | ||
console.warn((0, import_utils.deepClone)(element)); | ||
} | ||
element.key = key; | ||
(0, import_utils.propertizeElement)(element, parent); | ||
await (0, import_event.triggerEventOn)("start", element, options); | ||
if (options.onlyResolveExtends) { | ||
return onlyResolveExtends(element, parent, key, options); | ||
} | ||
await (0, import_event.triggerEventOn)("start", element, options); | ||
switchDefaultOptions(element, parent, options); | ||
addCaching(element, parent); | ||
if (element.key === "BannerHgroup") { | ||
console.warn(element); | ||
} | ||
resetOptions(element, parent, options); | ||
(0, import_set.addMethods)(element, parent, options); | ||
createScope(element, parent); | ||
(0, import_utils.createScope)(element, parent); | ||
await (0, import_state.createState)(element, parent); | ||
if (element.scope === "state") element.scope = element.state; | ||
createIfConditionFlag(element, parent); | ||
(0, import_props.createProps)(element, parent, options); | ||
if (element.scope === "props" || element.scope === true) element.scope = element.props; | ||
createIfConditionFlag(element, parent); | ||
if (element.node && ref.__if) { | ||
return (0, import_render.assignNode)(element, parent, key, attachOptions); | ||
(0, import_utils.createIfConditionFlag)(element, parent); | ||
(0, import_utils.initProps)(element, parent, options); | ||
if (element.scope === "props" || element.scope === true) { | ||
element.scope = element.props; | ||
} | ||
(0, import_component.applyVariant)(element, parent); | ||
(0, import_utils.createIfConditionFlag)(element, parent); | ||
if (element.node) { | ||
if (ref.__if) return (0, import_render.assignNode)(element, parent, key, attachOptions); | ||
} | ||
const onInit = await (0, import_event.triggerEventOn)("init", element, options); | ||
@@ -81,3 +76,2 @@ if (onInit === false) return element; | ||
(0, import_classList.assignKeyAsClassname)(element); | ||
(0, import_utils.addChildrenIfNotInOriginal)(element, parent, key); | ||
await renderElement(element, parent, options, attachOptions); | ||
@@ -88,66 +82,18 @@ addElementIntoParentChildren(element, parent); | ||
}; | ||
const createBasedOnType = (element, parent, key, options) => { | ||
if (element === void 0) { | ||
if (ENV === "test" || ENV === "development") { | ||
console.warn(key, "element is undefined in", parent && parent.__ref && parent.__ref.path); | ||
} | ||
return {}; | ||
const cacheOptions = (options) => { | ||
if (options && !import_utils.OPTIONS.create) { | ||
import_utils.OPTIONS.create = options; | ||
import_utils.OPTIONS.create.context = options.context; | ||
} | ||
if ((0, import_utils.isString)(key) && key.slice(0, false)) { | ||
if (ENV === "test" || ENV === "development") { | ||
console.warn(key, "seems like to be in __ref"); | ||
} | ||
} | ||
if (element === null) return; | ||
if (element === true) return { text: true }; | ||
if (element.__hash) { | ||
return { extend: element }; | ||
} | ||
return element; | ||
}; | ||
const redefineElement = (element, parent, key, options) => { | ||
const elementWrapper = createBasedOnType(element, parent, key, options); | ||
if (options.syntaxv3 || element.props && element.props.syntaxv3 || parent && parent.props && parent.props.syntaxv3) { | ||
if (element.props) element.props.syntaxv3 = true; | ||
else element.syntaxv3 = true; | ||
return (0, import_component.createValidDomqlObjectFromSugar)(element, parent, key, options); | ||
} else if ((0, import_utils.checkIfKeyIsComponent)(key)) { | ||
return (0, import_utils.applyKeyComponentAsExtend)(elementWrapper, parent, key); | ||
} | ||
if (checkIfMedia(key)) { | ||
return applyMediaProps(elementWrapper, parent, key); | ||
} | ||
return elementWrapper; | ||
}; | ||
const redefineParent = (element, parent, key, options) => { | ||
if (!parent) return import_tree.ROOT; | ||
if ((0, import_utils.isNode)(parent)) { | ||
const parentNodeWrapper = { key: ":root", node: parent }; | ||
import_tree.ROOT[`${key}_parent`] = parentNodeWrapper; | ||
return parentNodeWrapper; | ||
} | ||
return parent; | ||
}; | ||
const cacheOptions = (element, options) => { | ||
if (options && !import_options.OPTIONS.create) { | ||
import_options.OPTIONS.create = options; | ||
import_options.OPTIONS.create.context = element.context || options.context; | ||
} | ||
}; | ||
const createKey = (element, parent, key) => { | ||
return ((0, import_utils.exec)(key, element) || key || element.key || (0, import_utils.generateKey)()).toString(); | ||
}; | ||
const addRef = (element, parent) => { | ||
if (element.__ref) element.__ref.origin = element; | ||
else element.__ref = { origin: element }; | ||
return element.__ref; | ||
}; | ||
const switchDefaultOptions = (element, parent, options) => { | ||
const resetOptions = (element, parent, options) => { | ||
if (Object.keys(options).length) { | ||
import_mixins.registry.defaultOptions = options; | ||
if (options.ignoreChildExtend) delete options.ignoreChildExtend; | ||
import_utils.OPTIONS.defaultOptions = options; | ||
if (options.ignoreChildExtends) delete options.ignoreChildExtends; | ||
} | ||
}; | ||
const addElementIntoParentChildren = (element, parent) => { | ||
if (parent.__ref && parent.__ref.__children) parent.__ref.__children.push(element.key); | ||
if (parent.__ref && parent.__ref.__children) { | ||
parent.__ref.__children.push(element.key); | ||
} | ||
}; | ||
@@ -158,3 +104,5 @@ const visitedElements = /* @__PURE__ */ new WeakMap(); | ||
if (visitedElements.has(element)) { | ||
if (ENV === "test" || ENV === "development") console.warn("Cyclic rendering detected:", element.__ref.path); | ||
if (ENV === "test" || ENV === "development") { | ||
console.warn("Cyclic rendering detected:", element.__ref.path); | ||
} | ||
} | ||
@@ -176,10 +124,27 @@ visitedElements.set(element, true); | ||
const path = ref.path; | ||
if (path.includes("ComponentsGrid")) path.splice(0, path.indexOf("ComponentsGrid") + 2); | ||
if (path.includes("demoComponent")) path.splice(0, path.indexOf("demoComponent") + 1); | ||
if (path.includes("ComponentsGrid")) { | ||
path.splice(0, path.indexOf("ComponentsGrid") + 2); | ||
} | ||
if (path.includes("demoComponent")) { | ||
path.splice(0, path.indexOf("demoComponent") + 1); | ||
} | ||
const isDemoComponent = (_b = (_a = element.lookup((el) => el.state.key)) == null ? void 0 : _a.state) == null ? void 0 : _b.key; | ||
element.warn("Error happened in:", isDemoComponent ? isDemoComponent + " " : "" + path.join(".")); | ||
element.warn( | ||
"Error happened in:", | ||
isDemoComponent ? isDemoComponent + " " : "" + path.join(".") | ||
); | ||
element.verbose(); | ||
element.error(e, options); | ||
if ((_c = element.on) == null ? void 0 : _c.error) element.on.error(e, element, element.state, element.context, options); | ||
if ((_d = element.props) == null ? void 0 : _d.onError) element.props.onError(e, element, element.state, element.context, options); | ||
if ((_c = element.on) == null ? void 0 : _c.error) { | ||
element.on.error(e, element, element.state, element.context, options); | ||
} | ||
if ((_d = element.props) == null ? void 0 : _d.onError) { | ||
element.props.onError( | ||
e, | ||
element, | ||
element.state, | ||
element.context, | ||
options | ||
); | ||
} | ||
} | ||
@@ -198,66 +163,18 @@ } | ||
}; | ||
const checkIfPrimitive = (element) => (0, import_utils.is)(element)("string", "number"); | ||
const applyValueAsText = (element, parent, key) => { | ||
const extendTag = element.extend && element.extend.tag; | ||
const childExtendTag = parent.childExtend && parent.childExtend.tag; | ||
const childPropsTag = parent.props.childProps && parent.props.childProps.tag; | ||
const isKeyValidHTMLTag = import_utils.HTML_TAGS.body.indexOf(key) > -1 && key; | ||
return { | ||
text: element, | ||
tag: extendTag || childExtendTag || childPropsTag || isKeyValidHTMLTag || "string" | ||
}; | ||
}; | ||
const applyContext = (element, parent, options) => { | ||
const forcedOptionsContext = options.context && !import_tree.ROOT.context && !element.context; | ||
if (forcedOptionsContext) import_tree.ROOT.context = options.context; | ||
if (!element.context) element.context = parent.context || options.context || import_tree.ROOT.context; | ||
}; | ||
const createScope = (element, parent) => { | ||
const { __ref: ref } = element; | ||
if (!element.scope) element.scope = parent.scope || ref.root.scope || {}; | ||
}; | ||
const createIfConditionFlag = (element, parent) => { | ||
const { __ref: ref } = element; | ||
if ((0, import_utils.isFunction)(element.if) && !element.if(element, element.state, element.context)) { | ||
delete ref.__if; | ||
} else ref.__if = true; | ||
}; | ||
const addCaching = (element, parent) => { | ||
const { __ref: ref, key } = element; | ||
let { __ref: parentRef } = parent; | ||
if (!element.transform) element.transform = {}; | ||
if (!ref.__cached) ref.__cached = {}; | ||
if (!ref.__defineCache) ref.__defineCache = {}; | ||
if (!ref.__exec) ref.__exec = {}; | ||
if (!ref.__execProps) ref.__execProps = {}; | ||
if (!ref.__class) ref.__class = {}; | ||
if (!ref.__classNames) ref.__classNames = {}; | ||
if (!ref.__attr) ref.__attr = {}; | ||
if (!ref.__changes) ref.__changes = []; | ||
if (!ref.__children) ref.__children = []; | ||
if ((0, import_utils.checkIfKeyIsComponent)(key)) ref.__componentKey = key.split("_")[0].split(".")[0].split("+")[0]; | ||
const hasRoot = parent && parent.key === ":root"; | ||
if (!ref.root) ref.root = hasRoot ? element : parentRef.root; | ||
if (!parentRef) parentRef = parent.ref = {}; | ||
if (!parentRef.path) parentRef.path = []; | ||
ref.path = parentRef.path.concat(element.key); | ||
}; | ||
const onlyResolveExtends = (element, parent, key, options) => { | ||
const { __ref: ref } = element; | ||
if (!ref.__skipCreate) { | ||
addCaching(element, parent); | ||
(0, import_set.addMethods)(element, parent, options); | ||
createScope(element, parent); | ||
(0, import_state.createState)(element, parent); | ||
if (element.scope === "state") element.scope = element.state; | ||
createIfConditionFlag(element, parent); | ||
(0, import_props.createProps)(element, parent, options); | ||
if (element.scope === "props" || element.scope === true) element.scope = element.props; | ||
if (element.node && ref.__if) { | ||
parent[key || element.key] = element; | ||
} | ||
if (!element.props) element.props = {}; | ||
(0, import_component.applyVariant)(element, parent); | ||
addElementIntoParentChildren(element, parent); | ||
(0, import_set.addMethods)(element, parent, options); | ||
(0, import_utils.createScope)(element, parent); | ||
(0, import_state.createState)(element, parent); | ||
if (element.scope === "state") element.scope = element.state; | ||
(0, import_utils.createIfConditionFlag)(element, parent); | ||
(0, import_utils.initProps)(element, parent, options); | ||
if (element.scope === "props" || element.scope === true) { | ||
element.scope = element.props; | ||
} | ||
if (element.node && ref.__if) { | ||
parent[key || element.key] = element; | ||
} | ||
if (!element.props) element.props = {}; | ||
addElementIntoParentChildren(element, parent); | ||
if (element.tag !== "string" && element.tag !== "fragment") { | ||
@@ -267,3 +184,5 @@ (0, import_iterate.throughInitialDefine)(element); | ||
for (const k in element) { | ||
if ((0, import_utils.isUndefined)(element[k]) || (0, import_methods.isMethod)(k, element) || (0, import_utils.isObject)((import_mixins.registry.default || import_mixins.registry)[k]) || (0, import_utils.isVariant)(k)) continue; | ||
if ((0, import_utils.isUndefined)(element[k]) || (0, import_utils.isMethod)(k, element) || (0, import_utils.isObject)(import_mixins.REGISTRY[k])) { | ||
continue; | ||
} | ||
const hasDefine = element.define && element.define[k]; | ||
@@ -288,20 +207,2 @@ const contextHasDefine = element.context && element.context.define && element.context.define[k]; | ||
}; | ||
const checkIfMedia = (key) => key.slice(0, 1) === "@"; | ||
const applyMediaProps = (element, parent, key) => { | ||
const { props } = element; | ||
if (props) { | ||
props.display = "none"; | ||
if (props[key]) props[key].display = props.display; | ||
else props[key] = { display: props.display || "block" }; | ||
return element; | ||
} else { | ||
return { | ||
...element, | ||
props: { | ||
display: "none", | ||
[key]: { display: "block" } | ||
} | ||
}; | ||
} | ||
}; | ||
var create_default = create; |
@@ -21,2 +21,3 @@ "use strict"; | ||
__export(iterate_exports, { | ||
isPropertyInDefines: () => isPropertyInDefines, | ||
throughExecProps: () => throughExecProps, | ||
@@ -30,4 +31,2 @@ throughInitialDefine: () => throughInitialDefine, | ||
var import_utils = require("@domql/utils"); | ||
var import_utils2 = require("./utils/index.js"); | ||
var import_methods = require("./methods/index.js"); | ||
const throughInitialExec = (element, exclude = {}) => { | ||
@@ -38,3 +37,3 @@ const { __ref: ref } = element; | ||
const prop = element[param]; | ||
if ((0, import_utils.isFunction)(prop) && !(0, import_methods.isMethod)(param, element) && !(0, import_utils.isVariant)(param)) { | ||
if ((0, import_utils.isFunction)(prop) && !(0, import_utils.isMethod)(param, element)) { | ||
ref.__exec[param] = prop; | ||
@@ -45,3 +44,3 @@ element[param] = prop(element, element.state, element.context); | ||
}; | ||
const throughUpdatedExec = (element, options = { excludes: import_utils2.METHODS_EXL }) => { | ||
const throughUpdatedExec = (element, options = {}) => { | ||
const { __ref: ref } = element; | ||
@@ -56,9 +55,13 @@ const changes = {}; | ||
if (prop && prop.node && execReturnsString) { | ||
(0, import_utils2.overwrite)(prop, { text: newExec }, options); | ||
(0, import_utils.overwrite)(prop, { text: newExec }); | ||
} else if (newExec !== prop) { | ||
if ((0, import_utils.checkIfKeyIsComponent)(param)) { | ||
const { extend, ...newElem } = (0, import_utils.extendizeByKey)(newExec, element, param); | ||
(0, import_utils2.overwrite)(prop, newElem, options); | ||
if ((0, import_utils.matchesComponentNaming)(param)) { | ||
const { extends: extend, ...newElem } = (0, import_utils.isContextComponent)( | ||
newExec, | ||
element, | ||
param | ||
); | ||
(0, import_utils.overwrite)(prop, newElem); | ||
} else { | ||
ref.__cached[param] = changes[param] = prop; | ||
changes[param] = prop; | ||
element[param] = newExec; | ||
@@ -84,2 +87,4 @@ } | ||
}; | ||
const isPropertyInDefines = (key, element) => { | ||
}; | ||
const throughInitialDefine = (element) => { | ||
@@ -93,3 +98,3 @@ const { define, context, __ref: ref } = element; | ||
let elementProp = element[param]; | ||
if ((0, import_utils.isFunction)(elementProp) && !(0, import_methods.isMethod)(param, element) && !(0, import_utils.isVariant)(param)) { | ||
if ((0, import_utils.isFunction)(elementProp) && !(0, import_utils.isMethod)(param, element)) { | ||
ref.__exec[param] = elementProp; | ||
@@ -102,3 +107,8 @@ const execParam2 = elementProp = (0, import_utils.exec)(elementProp, element); | ||
} | ||
const execParam = defineObj[param](elementProp, element, element.state, element.context); | ||
const execParam = defineObj[param]( | ||
elementProp, | ||
element, | ||
element.state, | ||
element.context | ||
); | ||
if (execParam) element[param] = execParam; | ||
@@ -116,5 +126,11 @@ } | ||
const execParam = ref.__exec[param]; | ||
if (execParam) ref.__defineCache[param] = execParam(element, element.state, element.context); | ||
if (execParam) { | ||
ref.__defineCache[param] = execParam( | ||
element, | ||
element.state, | ||
element.context | ||
); | ||
} | ||
const cached = (0, import_utils.exec)(ref.__defineCache[param], element); | ||
const newExecParam = obj[param](cached, element, element.state, element.context); | ||
const newExecParam = typeof obj[param] === "function" ? obj[param](cached, element, element.state, element.context) : void 0; | ||
if (newExecParam) element[param] = newExecParam; | ||
@@ -121,0 +137,0 @@ } |
@@ -27,4 +27,3 @@ "use strict"; | ||
var import_update = require("../update.js"); | ||
var import_content = require("../mixins/content.js"); | ||
var import_index = require("./index.js"); | ||
var import_methods = require("@domql/utils/methods"); | ||
const addMethods = (element, parent, options = {}) => { | ||
@@ -35,27 +34,30 @@ const proto = { | ||
update: import_update.update, | ||
variables: import_index.variables, | ||
remove: import_index.remove, | ||
updateContent: import_content.updateContent, | ||
removeContent: import_content.removeContent, | ||
setProps: import_index.setProps, | ||
lookup: import_index.lookup, | ||
lookdown: import_index.lookdown, | ||
lookdownAll: import_index.lookdownAll, | ||
getRef: import_index.getRef, | ||
getPath: import_index.getPath, | ||
setNodeStyles: import_index.setNodeStyles, | ||
spotByPath: import_index.spotByPath, | ||
parse: import_index.parse, | ||
parseDeep: import_index.parseDeep, | ||
keys: import_index.keys, | ||
nextElement: import_index.nextElement, | ||
previousElement: import_index.previousElement, | ||
log: import_index.log, | ||
verbose: import_index.verbose, | ||
warn: import_index.warn, | ||
error: import_index.error, | ||
call: import_index.call | ||
variables: import_methods.variables, | ||
remove: import_methods.remove, | ||
updateContent: import_set.updateContent, | ||
removeContent: import_set.removeContent, | ||
setProps: import_methods.setProps, | ||
lookup: import_methods.lookup, | ||
lookdown: import_methods.lookdown, | ||
lookdownAll: import_methods.lookdownAll, | ||
getRef: import_methods.getRef, | ||
getPath: import_methods.getPath, | ||
setNodeStyles: import_methods.setNodeStyles, | ||
spotByPath: import_methods.spotByPath, | ||
parse: import_methods.parse, | ||
parseDeep: import_methods.parseDeep, | ||
keys: import_methods.keys, | ||
nextElement: import_methods.nextElement, | ||
previousElement: import_methods.previousElement, | ||
log: import_methods.log, | ||
verbose: import_methods.verbose, | ||
warn: import_methods.warn, | ||
error: import_methods.error, | ||
call: import_methods.call | ||
}; | ||
if (element.context.methods) (options.strict ? import_utils.merge : import_utils.overwrite)(proto, element.context.methods); | ||
if (element.context.methods) { | ||
; | ||
(options.strict ? import_utils.merge : import_utils.overwrite)(proto, element.context.methods); | ||
} | ||
Object.setPrototypeOf(element, proto); | ||
}; |
@@ -31,3 +31,2 @@ "use strict"; | ||
var import_utils = require("@domql/utils"); | ||
var import_mixins = require("../mixins/index.js"); | ||
const defineSetter = (element, key, get, set) => Object.defineProperty(element, key, { get, set }); | ||
@@ -38,5 +37,2 @@ const keys = function() { | ||
for (const param in element) { | ||
if (import_mixins.REGISTRY[param] && !import_mixins.parseFilters.elementKeys.includes(param)) { | ||
continue; | ||
} | ||
keys2.push(param); | ||
@@ -82,3 +78,3 @@ } | ||
} else { | ||
console.log(__ref.path); | ||
console.log(__ref == null ? void 0 : __ref.path); | ||
const keys2 = element.keys(); | ||
@@ -85,0 +81,0 @@ keys2.forEach((v) => console.log(`%c${v}: |
@@ -27,3 +27,2 @@ "use strict"; | ||
var import_report = require("@domql/report"); | ||
var import_utils2 = require("../utils/index.js"); | ||
function attr(params, element, node) { | ||
@@ -34,7 +33,9 @@ const { __ref: ref, props } = element; | ||
if (params) { | ||
if (props.attr) (0, import_utils2.deepMerge)(params, props.attr); | ||
for (const attr2 in params) { | ||
const val = (0, import_utils.exec)(params[attr2], element); | ||
if (val !== false && !(0, import_utils.isUndefined)(val) && !(0, import_utils.isNull)(val) && node.setAttribute) node.setAttribute(attr2, val); | ||
else if (node.removeAttribute) node.removeAttribute(attr2); | ||
const attrs = (0, import_utils.exec)(params, element); | ||
if (props.attr) (0, import_utils.deepMerge)(attrs, props.attr); | ||
for (const attr2 in attrs) { | ||
const val = (0, import_utils.exec)(attrs[attr2], element); | ||
if (val !== false && !(0, import_utils.isUndefined)(val) && !(0, import_utils.isNull)(val) && node.setAttribute) { | ||
node.setAttribute(attr2, val); | ||
} else if (node.removeAttribute) node.removeAttribute(attr2); | ||
__attr[attr2] = val; | ||
@@ -41,0 +42,0 @@ } |
@@ -24,6 +24,4 @@ "use strict"; | ||
classList: () => import_classList.applyClasslist, | ||
content: () => import_content.setContent, | ||
data: () => import_data.data, | ||
html: () => import_html.html, | ||
registry: () => import_registry.REGISTRY, | ||
scope: () => import_scope.scope, | ||
@@ -37,3 +35,2 @@ state: () => import_state.state, | ||
var import_classList = require("./classList.js"); | ||
var import_content = require("./content.js"); | ||
var import_data = require("./data.js"); | ||
@@ -45,3 +42,2 @@ var import_html = require("./html.js"); | ||
var import_scope = require("./scope.js"); | ||
var import_registry = require("./registry.js"); | ||
__reExport(mixins_exports, require("./registry.js"), module.exports); |
@@ -32,5 +32,3 @@ "use strict"; | ||
REGISTRY: () => REGISTRY, | ||
collectionFilters: () => collectionFilters, | ||
default: () => registry_default, | ||
parseFilters: () => parseFilters | ||
default: () => registry_default | ||
}); | ||
@@ -40,3 +38,2 @@ module.exports = __toCommonJS(registry_exports); | ||
var import_classList = require("./classList.js"); | ||
var import_content = __toESM(require("./content.js"), 1); | ||
var import_data = __toESM(require("./data.js"), 1); | ||
@@ -53,3 +50,2 @@ var import_html = __toESM(require("./html.js"), 1); | ||
html: import_html.default, | ||
content: import_content.default, | ||
data: import_data.default, | ||
@@ -60,10 +56,10 @@ class: import_classList.classList, | ||
deps: (param, el) => param || el.parent.deps, | ||
extend: {}, | ||
childExtend: {}, | ||
childExtendRecursive: {}, | ||
extends: {}, | ||
children: {}, | ||
content: {}, | ||
childExtends: {}, | ||
childExtendsRecursive: {}, | ||
props: {}, | ||
path: {}, | ||
if: {}, | ||
define: {}, | ||
transform: {}, | ||
__name: {}, | ||
@@ -73,4 +69,2 @@ __ref: {}, | ||
__text: {}, | ||
nextElement: {}, | ||
previousElement: {}, | ||
key: {}, | ||
@@ -81,61 +75,7 @@ tag: {}, | ||
node: {}, | ||
set: {}, | ||
reset: {}, | ||
update: {}, | ||
error: {}, | ||
warn: {}, | ||
call: {}, | ||
setProps: {}, | ||
remove: {}, | ||
updateContent: {}, | ||
removeContent: {}, | ||
variables: {}, | ||
lookup: {}, | ||
lookdown: {}, | ||
getRef: {}, | ||
getPath: {}, | ||
lookdownAll: {}, | ||
setNodeStyles: {}, | ||
spotByPath: {}, | ||
keys: {}, | ||
log: {}, | ||
parse: {}, | ||
parseDeep: {}, | ||
on: {}, | ||
component: {}, | ||
context: {}, | ||
$collection: {}, | ||
$stateCollection: {}, | ||
$propsCollection: {}, | ||
$setCollection: {}, | ||
$setStateCollection: {}, | ||
$setPropsCollection: {} | ||
context: {} | ||
}; | ||
var registry_default = REGISTRY; | ||
const parseFilters = { | ||
elementKeys: [ | ||
"tag", | ||
"text", | ||
"style", | ||
"attr", | ||
"class", | ||
"state", | ||
"props", | ||
"data", | ||
"content", | ||
"html", | ||
"on", | ||
"key", | ||
"extend", | ||
"childExtend", | ||
"childExtendRecursive", | ||
"scope", | ||
"query", | ||
"$collection", | ||
"$stateCollection", | ||
"$propsCollection" | ||
], | ||
propsKeys: ["__element", "update"], | ||
stateKeys: [] | ||
}; | ||
const collectionFilters = ["$collection", "$stateCollection", "$propsCollection"]; |
@@ -26,3 +26,3 @@ "use strict"; | ||
var import_utils = require("@domql/utils"); | ||
function scope(params, element, node) { | ||
async function scope(params, element, node) { | ||
if (!(0, import_utils.isObject)(params)) return; | ||
@@ -29,0 +29,0 @@ for (const scopeItem in params) { |
@@ -25,9 +25,8 @@ "use strict"; | ||
module.exports = __toCommonJS(state_exports); | ||
var import_state = require("@domql/state"); | ||
var import_utils = require("@domql/utils"); | ||
function state(params, element, node) { | ||
const state2 = (0, import_utils.exec)(params, element); | ||
async function state(params, element, node) { | ||
const state2 = await (0, import_utils.execPromise)(params, element); | ||
if ((0, import_utils.isObject)(state2)) { | ||
for (const param in state2) { | ||
if (import_state.IGNORE_STATE_PARAMS.includes(param)) continue; | ||
if (import_utils.STATE_METHODS.includes(param)) continue; | ||
if (!Object.hasOwnProperty.call(state2, param)) continue; | ||
@@ -34,0 +33,0 @@ } |
@@ -27,4 +27,4 @@ "use strict"; | ||
var import_utils = require("@domql/utils"); | ||
function text(param, element, node) { | ||
let prop = (0, import_utils.exec)(param, element); | ||
async function text(param, element, node) { | ||
let prop = (0, import_utils.exec)(param || element.props.text, element); | ||
if ((0, import_utils.isString)(prop) && prop.includes("{{")) { | ||
@@ -40,5 +40,5 @@ prop = element.call("replaceLiteralsWithObjectFields", prop); | ||
if (element.__text.node) element.__text.node.nodeValue = prop; | ||
} else (0, import_create.create)({ tag: "string", text: prop }, element, "__text"); | ||
} else await (0, import_create.create)({ tag: "string", text: prop }, element, "__text"); | ||
} | ||
} | ||
var text_default = text; |
"use strict"; | ||
var __create = Object.create; | ||
var __defProp = Object.defineProperty; | ||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
var __getOwnPropNames = Object.getOwnPropertyNames; | ||
var __getProtoOf = Object.getPrototypeOf; | ||
var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
@@ -18,2 +20,10 @@ var __export = (target, all) => { | ||
}; | ||
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( | ||
// If the importer is in node compatibility mode or this is not an ESM | ||
// file that has been converted to a CommonJS file using a Babel- | ||
// compatible transform (i.e. "__esModule" has not been set), then set | ||
// "default" to the CommonJS "module.exports" for node compatibility. | ||
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, | ||
mod | ||
)); | ||
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); | ||
@@ -29,3 +39,2 @@ var node_exports = {}; | ||
var import_render = require("@domql/render"); | ||
var import_methods = require("./methods/index.js"); | ||
var import_create = require("./create.js"); | ||
@@ -35,33 +44,30 @@ var import_iterate = require("./iterate.js"); | ||
var import_applyParam = require("./utils/applyParam.js"); | ||
var import_propEvents = require("./utils/propEvents.js"); | ||
var import_children = __toESM(require("./children.js"), 1); | ||
var import_set = require("./set.js"); | ||
const ENV = "development"; | ||
const createNode = async (element, options) => { | ||
const createNode = async (element, opts) => { | ||
let { node, tag, __ref: ref } = element; | ||
if (!ref.__if) return element; | ||
let isNewNode; | ||
if (!node) { | ||
isNewNode = true; | ||
if (!ref.__if) return element; | ||
if (tag === "shadow") { | ||
node = element.node = element.parent.node.attachShadow({ mode: "open" }); | ||
} else node = element.node = (0, import_render.cacheNode)(element); | ||
(0, import_event.triggerEventOn)("attachNode", element, options); | ||
await (0, import_event.triggerEventOn)("attachNode", element, opts); | ||
} | ||
if (ENV === "test" || ENV === "development" || options.alowRefReference) { | ||
if (ENV === "test" || ENV === "development" || opts.alowRefReference) { | ||
node.ref = element; | ||
if ((0, import_utils.isFunction)(node.setAttribute)) node.setAttribute("key", element.key); | ||
} | ||
(0, import_iterate.throughExecProps)(element); | ||
(0, import_iterate.throughInitialDefine)(element); | ||
(0, import_iterate.throughInitialExec)(element); | ||
if (element.tag !== "string" && element.tag !== "fragment") { | ||
(0, import_propEvents.propagateEventsFromProps)(element); | ||
if (isNewNode && (0, import_utils.isObject)(element.on)) { | ||
(0, import_event.applyEventsOnNode)(element, options); | ||
} | ||
} | ||
await (0, import_iterate.throughExecProps)(element); | ||
await (0, import_iterate.throughInitialDefine)(element); | ||
await (0, import_iterate.throughInitialExec)(element); | ||
await (0, import_event.applyEventsOnNode)(element, { isNewNode, ...opts }); | ||
for (const param in element) { | ||
const value = element[param]; | ||
if (!Object.hasOwnProperty.call(element, param)) continue; | ||
if ((0, import_utils.isUndefined)(value) || (0, import_methods.isMethod)(param, element) || (0, import_utils.isVariant)(param) || (0, import_utils.isObject)(import_mixins.REGISTRY[param])) continue; | ||
const isElement = (0, import_applyParam.applyParam)(param, element, options); | ||
if (!Object.hasOwnProperty.call(element, param) || (0, import_utils.isUndefined)(value) || (0, import_utils.isMethod)(param, element) || (0, import_utils.isObject)(import_mixins.REGISTRY[param])) { | ||
continue; | ||
} | ||
const isElement = await (0, import_applyParam.applyParam)(param, element, opts); | ||
if (isElement) { | ||
@@ -71,9 +77,9 @@ const { hasDefine, hasContextDefine } = isElement; | ||
const createAsync = async () => { | ||
await (0, import_create.create)((0, import_utils.exec)(value, element), element, param, options); | ||
await (0, import_create.create)(value, element, param, opts); | ||
}; | ||
if (element.props && element.props.lazyLoad || options.lazyLoad) { | ||
if (element.props && element.props.lazyLoad || opts.lazyLoad) { | ||
window.requestAnimationFrame(async () => { | ||
await createAsync(); | ||
if (!options.preventUpdateListener) { | ||
(0, import_event.triggerEventOn)("lazyLoad", element, options); | ||
if (!opts.preventUpdateListener) { | ||
await (0, import_event.triggerEventOn)("lazyLoad", element, opts); | ||
} | ||
@@ -85,4 +91,8 @@ }); | ||
} | ||
const content = element.children ? await (0, import_children.default)(element.children, element, opts) : element.content || element.content; | ||
if (content) { | ||
await (0, import_set.setContent)(content, element, opts); | ||
} | ||
return element; | ||
}; | ||
var node_default = createNode; |
@@ -22,32 +22,92 @@ "use strict"; | ||
default: () => set_default, | ||
removeContent: () => removeContent, | ||
reset: () => reset, | ||
resetElement: () => resetElement, | ||
set: () => set | ||
resetContent: () => resetContent, | ||
set: () => set, | ||
setContent: () => setContent, | ||
setContentKey: () => setContentKey, | ||
updateContent: () => updateContent | ||
}); | ||
module.exports = __toCommonJS(set_exports); | ||
var import_utils = require("@domql/utils"); | ||
var import_options = require("./cache/options.js"); | ||
var import_create = require("./create.js"); | ||
var import_mixins = require("./mixins/index.js"); | ||
var import_content = require("./mixins/content.js"); | ||
var import_event = require("@domql/event"); | ||
const resetElement = async (params, element, options) => { | ||
if (!options.preventRemove) (0, import_content.removeContent)(element, options); | ||
const setContentKey = (element, opts = {}) => { | ||
const { __ref: ref } = element; | ||
await (0, import_create.create)(params, element, ref.contentElementKey || "content", { | ||
ignoreChildExtend: true, | ||
...import_mixins.registry.defaultOptions, | ||
...import_options.OPTIONS.create, | ||
...options | ||
}); | ||
const contentElementKey = opts.contentElementKey; | ||
if (!ref.contentElementKey || contentElementKey !== ref.contentElementKey) { | ||
ref.contentElementKey = contentElementKey || "content"; | ||
} | ||
return ref.contentElementKey; | ||
}; | ||
const reset = (options) => { | ||
const reset = async (options) => { | ||
const element = void 0; | ||
(0, import_create.create)(element, element.parent, void 0, { | ||
ignoreChildExtend: true, | ||
...import_mixins.registry.defaultOptions, | ||
...import_options.OPTIONS.create, | ||
await (0, import_create.create)(element, element.parent, void 0, { | ||
ignoreChildExtends: true, | ||
...import_utils.OPTIONS.defaultOptions, | ||
...import_utils.OPTIONS.create, | ||
...options | ||
}); | ||
}; | ||
const resetContent = async (params, element, opts) => { | ||
var _a; | ||
const contentElementKey = setContentKey(element, opts); | ||
if ((_a = element[contentElementKey]) == null ? void 0 : _a.node) removeContent(element, opts); | ||
const contentElem = await (0, import_create.create)( | ||
params, | ||
element, | ||
contentElementKey || "content", | ||
{ | ||
ignoreChildExtends: true, | ||
...import_utils.OPTIONS.defaultOptions, | ||
...import_utils.OPTIONS.create, | ||
...opts | ||
} | ||
); | ||
if (contentElementKey !== "content") opts.contentElementKey = "content"; | ||
return contentElem; | ||
}; | ||
const updateContent = async function(params, opts) { | ||
const element = this; | ||
const contentElementKey = setContentKey(element, opts); | ||
if (!element[contentElementKey]) return; | ||
if (element[contentElementKey].update) { | ||
await element[contentElementKey].update(params, opts); | ||
} | ||
}; | ||
async function setContent(param, element, opts) { | ||
const content = await (0, import_utils.execPromise)(param, element); | ||
if (content && element) { | ||
set.call(element, content, opts); | ||
} | ||
} | ||
const removeContent = function(el, opts = {}) { | ||
var _a; | ||
const element = el || this; | ||
const contentElementKey = setContentKey(element, opts); | ||
if (opts.contentElementKey !== "content") { | ||
opts.contentElementKey = "content"; | ||
} | ||
const content = element[contentElementKey]; | ||
if (!content) return; | ||
if (content.tag === "fragment" && ((_a = content.__ref) == null ? void 0 : _a.__children)) { | ||
content.__ref.__children.forEach((key) => { | ||
const child = content[key]; | ||
if (child.node && child.node.parentNode) { | ||
child.node.parentNode.removeChild(child.node); | ||
} | ||
if ((0, import_utils.isFunction)(child.remove)) { | ||
child.remove(); | ||
} | ||
}); | ||
} else { | ||
if (content.node && content.node.parentNode) { | ||
content.node.parentNode.removeChild(content.node); | ||
} | ||
if ((0, import_utils.isFunction)(content.remove)) { | ||
content.remove(); | ||
} | ||
} | ||
delete element[contentElementKey]; | ||
}; | ||
const set = async function(params, options = {}, el) { | ||
@@ -57,22 +117,33 @@ var _a; | ||
const { __ref: ref } = element; | ||
const content = (0, import_utils.setContentKey)(element, options); | ||
const contentElementKey = setContentKey(element, options); | ||
const content = element[contentElementKey]; | ||
const __contentRef = content && content.__ref; | ||
const lazyLoad = element.props && element.props.lazyLoad; | ||
const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection; | ||
if (options.preventContentUpdate === true && !hasCollection) return; | ||
if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && (0, import_utils.deepContains)(params, content)) { | ||
const hasChildren = element.children; | ||
if (options.preventContentUpdate === true && !hasChildren) return; | ||
const childHasChanged = !ref.__noChildrenDifference; | ||
const childrenIsDifferentFromCache = childHasChanged && __contentRef && Object.keys(params).length === Object.keys(content).length && (0, import_utils.deepContains)(params, content); | ||
if ((content == null ? void 0 : content.update) && !childHasChanged && !childrenIsDifferentFromCache) { | ||
if (!options.preventBeforeUpdateListener && !options.preventListeners) { | ||
const beforeUpdateReturns = await (0, import_event.triggerEventOnUpdate)("beforeUpdate", params, element, options); | ||
const beforeUpdateReturns = await (0, import_event.triggerEventOnUpdate)( | ||
"beforeUpdate", | ||
params, | ||
element, | ||
options | ||
); | ||
if (beforeUpdateReturns === false) return element; | ||
} | ||
if (content == null ? void 0 : content.update) content.update(); | ||
if (!options.preventUpdateListener) await (0, import_event.triggerEventOn)("update", element, options); | ||
await content.update(params); | ||
if (!options.preventUpdateListener && !options.preventListeners) { | ||
await (0, import_event.triggerEventOn)("update", element, options); | ||
} | ||
return; | ||
} | ||
if (params) { | ||
let { childExtend, props } = params; | ||
if (!props) props = params.props = {}; | ||
if (!childExtend && element.childExtend) { | ||
params.childExtend = element.childExtend; | ||
props.ignoreChildExtend = true; | ||
if (!params) return element; | ||
let { childExtends, props, tag } = params; | ||
if (!props) props = params.props = {}; | ||
if (tag === "fragment") { | ||
if (!childExtends && element.childExtends) { | ||
params.childExtends = element.childExtends; | ||
props.ignoreChildExtends = true; | ||
} | ||
@@ -83,13 +154,14 @@ if (!(props == null ? void 0 : props.childProps) && ((_a = element.props) == null ? void 0 : _a.childProps)) { | ||
} | ||
if (lazyLoad) { | ||
window.requestAnimationFrame(async () => { | ||
await resetElement(params, element, options); | ||
if (!options.preventUpdateListener) { | ||
(0, import_event.triggerEventOn)("lazyLoad", element, options); | ||
} | ||
}); | ||
} else await resetElement(params, element, options); | ||
} | ||
return element; | ||
if (lazyLoad) { | ||
window.requestAnimationFrame(async () => { | ||
await resetContent(params, element, options); | ||
if (!options.preventUpdateListener) { | ||
await (0, import_event.triggerEventOn)("lazyLoad", element, options); | ||
} | ||
}); | ||
} else { | ||
await resetContent(params, element, options); | ||
} | ||
}; | ||
var set_default = set; |
"use strict"; | ||
var __create = Object.create; | ||
var __defProp = Object.defineProperty; | ||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
var __getOwnPropNames = Object.getOwnPropertyNames; | ||
var __getProtoOf = Object.getPrototypeOf; | ||
var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
@@ -18,2 +20,10 @@ var __export = (target, all) => { | ||
}; | ||
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( | ||
// If the importer is in node compatibility mode or this is not an ESM | ||
// file that has been converted to a CommonJS file using a Babel- | ||
// compatible transform (i.e. "__esModule" has not been set), then set | ||
// "default" to the CommonJS "module.exports" for node compatibility. | ||
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, | ||
mod | ||
)); | ||
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); | ||
@@ -28,4 +38,2 @@ var update_exports = {}; | ||
var import_event = require("@domql/event"); | ||
var import_methods = require("./methods/index.js"); | ||
var import_props = require("./props/index.js"); | ||
var import_state = require("@domql/state"); | ||
@@ -36,7 +44,5 @@ var import_create = require("./create.js"); | ||
var import_applyParam = require("./utils/applyParam.js"); | ||
var import_options = require("./cache/options.js"); | ||
var import_utils2 = require("./utils/index.js"); | ||
const snapshot = { | ||
snapshotId: import_utils.createSnapshotId | ||
}; | ||
var import_set = require("./set.js"); | ||
var import_children = __toESM(require("./children.js"), 1); | ||
const UPDATE_DEFAULT_OPTIONS = { | ||
@@ -48,36 +54,52 @@ stackChanges: false, | ||
calleeElement: false, | ||
excludes: import_utils2.METHODS_EXL | ||
exclude: import_utils2.METHODS_EXL | ||
}; | ||
const update = async function(params = {}, opts) { | ||
const calleeElementCache = opts == null ? void 0 : opts.calleeElement; | ||
const options = (0, import_utils.deepClone)((0, import_utils.isObject)(opts) ? (0, import_utils2.deepMerge)(opts, UPDATE_DEFAULT_OPTIONS) : UPDATE_DEFAULT_OPTIONS, { exclude: ["calleeElement"] }); | ||
const options = (0, import_utils.deepClone)( | ||
(0, import_utils.isObject)(opts) ? (0, import_utils.deepMerge)(opts, UPDATE_DEFAULT_OPTIONS) : UPDATE_DEFAULT_OPTIONS, | ||
{ exclude: ["calleeElement"] } | ||
); | ||
options.calleeElement = calleeElementCache; | ||
const element = this; | ||
const { parent, node, key } = element; | ||
const { excludes, preventInheritAtCurrentState } = options; | ||
let ref = element.__ref; | ||
if (!ref) ref = element.__ref = {}; | ||
const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(element, options); | ||
const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = (0, import_utils.captureSnapshot)( | ||
element, | ||
options | ||
); | ||
if (snapshotHasUpdated) return; | ||
if (!options.preventListeners) await (0, import_event.triggerEventOnUpdate)("startUpdate", params, element, options); | ||
if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element) return; | ||
if (!excludes) (0, import_utils.merge)(options, UPDATE_DEFAULT_OPTIONS); | ||
if (!options.preventListeners) { | ||
await (0, import_event.triggerEventOnUpdate)("startUpdate", params, element, options); | ||
} | ||
const { parent, node, key } = element; | ||
const { exclude, preventInheritAtCurrentState } = options; | ||
if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element) { | ||
return; | ||
} | ||
if (!exclude) (0, import_utils.merge)(options, UPDATE_DEFAULT_OPTIONS); | ||
if ((0, import_utils.isString)(params) || (0, import_utils.isNumber)(params)) { | ||
params = { text: params }; | ||
} | ||
params = (0, import_utils.propertizeElement)(params); | ||
const inheritState = await inheritStateUpdates(element, options); | ||
if (inheritState === false) return; | ||
const ifFails = checkIfOnUpdate(element, parent, options); | ||
const ifFails = await checkIfOnUpdate(element, parent, options); | ||
if (ifFails) return; | ||
if (ref.__if && !options.preventPropsUpdate) { | ||
const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps); | ||
const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils.isFunction)(v)); | ||
const hasFunctionInProps = ref.__propsStack.filter((v) => (0, import_utils.isFunction)(v)); | ||
const props = params.props || hasParentProps || hasFunctionInProps.length; | ||
if (props) (0, import_props.updateProps)(props, element, parent); | ||
if (props) (0, import_utils.updateProps)(props, element, parent); | ||
} | ||
if (!options.preventBeforeUpdateListener && !options.preventListeners) { | ||
const beforeUpdateReturns = await (0, import_event.triggerEventOnUpdate)("beforeUpdate", params, element, options); | ||
const beforeUpdateReturns = await (0, import_event.triggerEventOnUpdate)( | ||
"beforeUpdate", | ||
params, | ||
element, | ||
options | ||
); | ||
if (beforeUpdateReturns === false) return element; | ||
} | ||
(0, import_utils.overwriteDeep)(element, params, { exclude: import_utils2.METHODS_EXL }); | ||
(0, import_utils.overwriteDeep)(element, params); | ||
(0, import_iterate.throughExecProps)(element); | ||
@@ -87,3 +109,3 @@ (0, import_iterate.throughUpdatedExec)(element, { ignore: UPDATE_DEFAULT_OPTIONS }); | ||
if (!options.isForced && !options.preventListeners) { | ||
(0, import_event.triggerEventOn)("beforeClassAssign", element, options); | ||
await (0, import_event.triggerEventOn)("beforeClassAssign", element, options); | ||
} | ||
@@ -105,5 +127,7 @@ if (!ref.__if) return false; | ||
if (preventUpdateAfter) { | ||
if ((0, import_utils.isNumber)(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount) return; | ||
else if (options.preventUpdateAfterCount === void 0) options.preventUpdateAfterCount = 1; | ||
else options.preventUpdateAfterCount++; | ||
if ((0, import_utils.isNumber)(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount) { | ||
return; | ||
} else if (options.preventUpdateAfterCount === void 0) { | ||
options.preventUpdateAfterCount = 1; | ||
} else options.preventUpdateAfterCount++; | ||
} | ||
@@ -115,6 +139,7 @@ for (const param in element) { | ||
const isInPreventDefineUpdate = (0, import_utils.isArray)(preventDefineUpdate) && preventDefineUpdate.includes(param); | ||
const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection; | ||
if ((0, import_utils.isUndefined)(prop) || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || preventContentUpdate && param === "content" && !hasCollection || (preventStateUpdate && param) === "state" || (0, import_methods.isMethod)(param, element) || (0, import_utils.isObject)(import_mixins.REGISTRY[param]) || (0, import_utils.isVariant)(param)) continue; | ||
if ((0, import_utils.isUndefined)(prop) || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || (preventStateUpdate && param) === "state" || (0, import_utils.isMethod)(param, element) || (0, import_utils.isObject)(import_mixins.REGISTRY[param])) { | ||
continue; | ||
} | ||
if (preventStateUpdate === "once") options.preventStateUpdate = false; | ||
const isElement = (0, import_applyParam.applyParam)(param, element, options); | ||
const isElement = await (0, import_applyParam.applyParam)(param, element, options); | ||
if (isElement) { | ||
@@ -128,3 +153,3 @@ const { hasDefine, hasContextDefine } = isElement; | ||
} | ||
const childUpdateCall = () => update.call(prop, params[prop], { | ||
const childUpdateCall = async () => await update.call(prop, params[prop], { | ||
...options, | ||
@@ -134,32 +159,35 @@ currentSnapshot: snapshotOnCallee, | ||
}); | ||
lazyLoad ? import_utils.window.requestAnimationFrame(() => { | ||
childUpdateCall(); | ||
if (!options.preventUpdateListener) { | ||
(0, import_event.triggerEventOn)("lazyLoad", element, options); | ||
} | ||
}) : childUpdateCall(); | ||
if (lazyLoad) { | ||
import_utils.window.requestAnimationFrame(async () => { | ||
await childUpdateCall(); | ||
if (!options.preventUpdateListener) { | ||
await (0, import_event.triggerEventOn)("lazyLoad", element, options); | ||
} | ||
}); | ||
} else await childUpdateCall(); | ||
} | ||
} | ||
if (!preventUpdateListener) (0, import_event.triggerEventOn)("update", element, options); | ||
}; | ||
const captureSnapshot = (element, options) => { | ||
const ref = element.__ref; | ||
const { currentSnapshot, calleeElement } = options; | ||
const isCallee = calleeElement === element; | ||
if (!calleeElement || isCallee) { | ||
const createdStanpshot = snapshot.snapshotId(); | ||
ref.__currentSnapshot = createdStanpshot; | ||
return [createdStanpshot, element]; | ||
if (!preventContentUpdate) { | ||
const children = params.children || element.children; | ||
const content = children ? await (0, import_children.default)(children, element, opts) : element.children || params.content; | ||
if (content) { | ||
await (0, import_set.setContent)(content, element, options); | ||
} | ||
} | ||
const snapshotOnCallee = calleeElement.__ref.__currentSnapshot; | ||
if (currentSnapshot < snapshotOnCallee) { | ||
return [snapshotOnCallee, calleeElement, true]; | ||
if (!preventUpdateListener) { | ||
await (0, import_event.triggerEventOn)("update", element, options); | ||
} | ||
return [snapshotOnCallee, calleeElement]; | ||
}; | ||
const checkIfOnUpdate = (element, parent, options) => { | ||
const checkIfOnUpdate = async (element, parent, options) => { | ||
var _a, _b, _c; | ||
if (!(0, import_utils.isFunction)(element.if) && !(0, import_utils.isFunction)((_a = element.props) == null ? void 0 : _a.if) || !parent) return; | ||
if (!(0, import_utils.isFunction)(element.if) && !(0, import_utils.isFunction)((_a = element.props) == null ? void 0 : _a.if) || !parent) { | ||
return; | ||
} | ||
const ref = element.__ref; | ||
const ifPassed = (element.if || ((_b = element.props) == null ? void 0 : _b.if))(element, element.state, element.context, options); | ||
const ifPassed = (element.if || ((_b = element.props) == null ? void 0 : _b.if))( | ||
element, | ||
element.state, | ||
element.context, | ||
options | ||
); | ||
const itWasFalse = ref.__if !== true; | ||
@@ -171,3 +199,3 @@ if (ifPassed) { | ||
delete element.__text; | ||
delete element.extend; | ||
delete element.extends; | ||
if (!ref.__hasRootState) { | ||
@@ -186,5 +214,7 @@ delete element.state; | ||
const contentKey = ref.contentElementKey; | ||
if (element.$collection || element.$stateCollection || element.$propsCollection) { | ||
if (element.children) { | ||
element.removeContent(); | ||
} else if ((_c = element[contentKey]) == null ? void 0 : _c.parseDeep) element[contentKey] = element[contentKey].parseDeep(); | ||
} else if ((_c = element[contentKey]) == null ? void 0 : _c.parseDeep) { | ||
element[contentKey] = element[contentKey].parseDeep(); | ||
} | ||
const previousElement = element.previousElement(); | ||
@@ -202,5 +232,15 @@ const previousNode = previousElement == null ? void 0 : previousElement.node; | ||
delete element.parent; | ||
const createdElement = (0, import_create.create)(element, parent, element.key, import_options.OPTIONS.create, attachOptions); | ||
const createdElement = await (0, import_create.create)( | ||
element, | ||
parent, | ||
element.key, | ||
import_utils.OPTIONS.create, | ||
attachOptions | ||
); | ||
if (options.preventUpdate !== true && element.on && (0, import_utils.isFunction)(element.on.update)) { | ||
(0, import_event.applyEvent)(element.on.update, createdElement, createdElement.state); | ||
await (0, import_event.applyEvent)( | ||
element.on.update, | ||
createdElement, | ||
createdElement.state | ||
); | ||
} | ||
@@ -227,19 +267,34 @@ return createdElement; | ||
const execState = (0, import_utils.exec)(stateKey, element); | ||
state.set(execState, { ...options, preventUpdate: true, preventStateUpdateListener: false, updatedByStateFunction: true }); | ||
state.set(execState, { | ||
...options, | ||
preventUpdate: true, | ||
preventStateUpdateListener: false, | ||
updatedByStateFunction: true | ||
}); | ||
return; | ||
} | ||
const keyInParentState = (0, import_state.findInheritedState)(element, element.parent); | ||
const keyInParentState = (0, import_utils.findInheritedState)(element, element.parent); | ||
if (!keyInParentState || options.preventInheritedStateUpdate) return; | ||
if (!options.preventBeforeStateUpdateListener && !options.preventListeners) { | ||
const initStateReturns = await (0, import_event.triggerEventOnUpdate)("beforeStateUpdate", keyInParentState, element, options); | ||
const initStateReturns = await (0, import_event.triggerEventOnUpdate)( | ||
"beforeStateUpdate", | ||
keyInParentState, | ||
element, | ||
options | ||
); | ||
if (initStateReturns === false) return element; | ||
} | ||
const newState = createStateUpdate(element, parent, options); | ||
const newState = await createStateUpdate(element, parent, options); | ||
if (!options.preventStateUpdateListener && !options.preventListeners) { | ||
await (0, import_event.triggerEventOnUpdate)("stateUpdate", newState.parse(), element, options); | ||
await (0, import_event.triggerEventOnUpdate)( | ||
"stateUpdate", | ||
newState.parse(), | ||
element, | ||
options | ||
); | ||
} | ||
}; | ||
const createStateUpdate = (element, parent, options) => { | ||
const createStateUpdate = async (element, parent, options) => { | ||
const __stateChildren = element.state.__children; | ||
const newState = (0, import_state.createState)(element, parent); | ||
const newState = await (0, import_state.createState)(element, parent); | ||
element.state = newState; | ||
@@ -246,0 +301,0 @@ for (const child in __stateChildren) { |
@@ -26,3 +26,3 @@ "use strict"; | ||
var import_mixins = require("../mixins/index.js"); | ||
const applyParam = (param, element, options) => { | ||
const applyParam = async (param, element, options) => { | ||
const { node, context, __ref: ref } = element; | ||
@@ -40,3 +40,3 @@ const prop = element[param]; | ||
if ((0, import_utils.isFunction)(isGlobalTransformer)) { | ||
isGlobalTransformer(prop, element, node, options); | ||
await isGlobalTransformer(prop, element, node, options); | ||
return; | ||
@@ -43,0 +43,0 @@ } |
@@ -6,2 +6,6 @@ "use strict"; | ||
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) => { | ||
@@ -15,8 +19,8 @@ if (from && typeof from === "object" || typeof from === "function") { | ||
}; | ||
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default")); | ||
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); | ||
var utils_exports = {}; | ||
__export(utils_exports, { | ||
METHODS_EXL: () => METHODS_EXL | ||
}); | ||
module.exports = __toCommonJS(utils_exports); | ||
__reExport(utils_exports, require("./object.js"), module.exports); | ||
__reExport(utils_exports, require("./extendUtils.js"), module.exports); | ||
__reExport(utils_exports, require("./component.js"), module.exports); | ||
const METHODS_EXL = []; |
@@ -27,8 +27,5 @@ "use strict"; | ||
var import_mixins = require("../mixins/index.js"); | ||
var import__2 = require("."); | ||
var import_methods = require("../methods"); | ||
var import_set = require("../methods/set"); | ||
var import_state = require("@domql/state"); | ||
var import_render = require("@domql/render"); | ||
var import_props = require("../props"); | ||
var import_iterate = require("../iterate"); | ||
@@ -40,3 +37,2 @@ const onlyResolveExtends = (element, parent, key, options) => { | ||
const { __ref: ref2 } = element; | ||
if (!ref2.__cached) ref2.__cached = {}; | ||
if (!ref2.__defineCache) ref2.__defineCache = {}; | ||
@@ -63,4 +59,3 @@ if (!ref2.__exec) ref2.__exec = {}; | ||
} | ||
(0, import_props.createProps)(element, parent, options); | ||
(0, import__2.applyVariant)(element, parent); | ||
(0, import_utils.initProps)(element, parent, options); | ||
if (element.tag !== "string" && element.tag !== "fragment") { | ||
@@ -71,3 +66,5 @@ (0, import_iterate.throughInitialDefine)(element); | ||
const prop = element[param]; | ||
if ((0, import_utils.isUndefined)(prop) || (0, import_methods.isMethod)(param, element) || (0, import_utils.isObject)(import_mixins.REGISTRY[param]) || (0, import__2.isVariant)(param)) continue; | ||
if ((0, import_utils.isUndefined)(prop) || (0, import_utils.isMethod)(param, element) || (0, import_utils.isObject)(import_mixins.REGISTRY[param])) { | ||
continue; | ||
} | ||
const hasDefine = element.define && element.define[param]; | ||
@@ -74,0 +71,0 @@ const contextHasDefine = element.context && element.context.define && element.context.define[param]; |
import { createNode } from "./node.js"; | ||
import { ROOT } from "./tree.js"; | ||
import { | ||
HTML_TAGS, | ||
isObject, | ||
isFunction, | ||
isString, | ||
exec, | ||
is, | ||
isNode, | ||
isUndefined, | ||
generateKey, | ||
checkIfKeyIsComponent, | ||
deepClone, | ||
applyComponentFromContext, | ||
applyKeyComponentAsExtend, | ||
isVariant, | ||
detectInfiniteLoop, | ||
addChildrenIfNotInOriginal | ||
propertizeElement, | ||
createElement, | ||
applyExtends, | ||
createScope, | ||
isMethod, | ||
OPTIONS, | ||
initProps, | ||
createIfConditionFlag, | ||
deepClone | ||
} from "@domql/utils"; | ||
@@ -24,37 +21,28 @@ import { applyAnimationFrame, triggerEventOn } from "@domql/event"; | ||
import { createState } from "@domql/state"; | ||
import { isMethod } from "./methods/index.js"; | ||
import { createProps } from "./props/index.js"; | ||
import { applyExtend } from "./extend.js"; | ||
import { REGISTRY, registry } from "./mixins/index.js"; | ||
import { REGISTRY } from "./mixins/index.js"; | ||
import { addMethods } from "./methods/set.js"; | ||
import { assignKeyAsClassname } from "./mixins/classList.js"; | ||
import { throughInitialExec, throughInitialDefine } from "./iterate.js"; | ||
import { OPTIONS } from "./cache/options.js"; | ||
import { | ||
applyVariant, | ||
createValidDomqlObjectFromSugar | ||
} from "./utils/component.js"; | ||
const ENV = "development"; | ||
const create = async (element, parent, key, options = OPTIONS.create || {}, attachOptions) => { | ||
cacheOptions(element, options); | ||
if (checkIfPrimitive(element)) { | ||
element = applyValueAsText(element, parent, key); | ||
const create = async (props, parentEl, passedKey, options = OPTIONS.create || {}, attachOptions) => { | ||
cacheOptions(options); | ||
const element = createElement(props, parentEl, passedKey, options, ROOT); | ||
if (!element) return; | ||
const { key, parent, __ref: ref } = element; | ||
if (element.key === "BannerHgroup") { | ||
console.warn(deepClone(element)); | ||
} | ||
element = redefineElement(element, parent, key, options); | ||
parent = redefineParent(element, parent, key); | ||
key = createKey(element, parent, key); | ||
const ref = addRef(element, parent, key); | ||
ref.__initialProps = deepClone(element.props); | ||
applyContext(element, parent, options); | ||
applyComponentFromContext(element, parent, options); | ||
if (!ref.__skipCreate) { | ||
applyExtend(element, parent, options); | ||
applyExtends(element, parent, options); | ||
if (element.key === "BannerHgroup") { | ||
console.warn(deepClone(element)); | ||
} | ||
element.key = key; | ||
propertizeElement(element, parent); | ||
await triggerEventOn("start", element, options); | ||
if (options.onlyResolveExtends) { | ||
return onlyResolveExtends(element, parent, key, options); | ||
} | ||
await triggerEventOn("start", element, options); | ||
switchDefaultOptions(element, parent, options); | ||
addCaching(element, parent); | ||
if (element.key === "BannerHgroup") { | ||
console.warn(element); | ||
} | ||
resetOptions(element, parent, options); | ||
addMethods(element, parent, options); | ||
@@ -65,9 +53,10 @@ createScope(element, parent); | ||
createIfConditionFlag(element, parent); | ||
createProps(element, parent, options); | ||
if (element.scope === "props" || element.scope === true) element.scope = element.props; | ||
initProps(element, parent, options); | ||
if (element.scope === "props" || element.scope === true) { | ||
element.scope = element.props; | ||
} | ||
createIfConditionFlag(element, parent); | ||
if (element.node && ref.__if) { | ||
return assignNode(element, parent, key, attachOptions); | ||
if (element.node) { | ||
if (ref.__if) return assignNode(element, parent, key, attachOptions); | ||
} | ||
applyVariant(element, parent); | ||
const onInit = await triggerEventOn("init", element, options); | ||
@@ -77,3 +66,2 @@ if (onInit === false) return element; | ||
assignKeyAsClassname(element); | ||
addChildrenIfNotInOriginal(element, parent, key); | ||
await renderElement(element, parent, options, attachOptions); | ||
@@ -84,66 +72,18 @@ addElementIntoParentChildren(element, parent); | ||
}; | ||
const createBasedOnType = (element, parent, key, options) => { | ||
if (element === void 0) { | ||
if (ENV === "test" || ENV === "development") { | ||
console.warn(key, "element is undefined in", parent && parent.__ref && parent.__ref.path); | ||
} | ||
return {}; | ||
} | ||
if (isString(key) && key.slice(0, false)) { | ||
if (ENV === "test" || ENV === "development") { | ||
console.warn(key, "seems like to be in __ref"); | ||
} | ||
} | ||
if (element === null) return; | ||
if (element === true) return { text: true }; | ||
if (element.__hash) { | ||
return { extend: element }; | ||
} | ||
return element; | ||
}; | ||
const redefineElement = (element, parent, key, options) => { | ||
const elementWrapper = createBasedOnType(element, parent, key, options); | ||
if (options.syntaxv3 || element.props && element.props.syntaxv3 || parent && parent.props && parent.props.syntaxv3) { | ||
if (element.props) element.props.syntaxv3 = true; | ||
else element.syntaxv3 = true; | ||
return createValidDomqlObjectFromSugar(element, parent, key, options); | ||
} else if (checkIfKeyIsComponent(key)) { | ||
return applyKeyComponentAsExtend(elementWrapper, parent, key); | ||
} | ||
if (checkIfMedia(key)) { | ||
return applyMediaProps(elementWrapper, parent, key); | ||
} | ||
return elementWrapper; | ||
}; | ||
const redefineParent = (element, parent, key, options) => { | ||
if (!parent) return ROOT; | ||
if (isNode(parent)) { | ||
const parentNodeWrapper = { key: ":root", node: parent }; | ||
ROOT[`${key}_parent`] = parentNodeWrapper; | ||
return parentNodeWrapper; | ||
} | ||
return parent; | ||
}; | ||
const cacheOptions = (element, options) => { | ||
const cacheOptions = (options) => { | ||
if (options && !OPTIONS.create) { | ||
OPTIONS.create = options; | ||
OPTIONS.create.context = element.context || options.context; | ||
OPTIONS.create.context = options.context; | ||
} | ||
}; | ||
const createKey = (element, parent, key) => { | ||
return (exec(key, element) || key || element.key || generateKey()).toString(); | ||
}; | ||
const addRef = (element, parent) => { | ||
if (element.__ref) element.__ref.origin = element; | ||
else element.__ref = { origin: element }; | ||
return element.__ref; | ||
}; | ||
const switchDefaultOptions = (element, parent, options) => { | ||
const resetOptions = (element, parent, options) => { | ||
if (Object.keys(options).length) { | ||
registry.defaultOptions = options; | ||
if (options.ignoreChildExtend) delete options.ignoreChildExtend; | ||
OPTIONS.defaultOptions = options; | ||
if (options.ignoreChildExtends) delete options.ignoreChildExtends; | ||
} | ||
}; | ||
const addElementIntoParentChildren = (element, parent) => { | ||
if (parent.__ref && parent.__ref.__children) parent.__ref.__children.push(element.key); | ||
if (parent.__ref && parent.__ref.__children) { | ||
parent.__ref.__children.push(element.key); | ||
} | ||
}; | ||
@@ -154,3 +94,5 @@ const visitedElements = /* @__PURE__ */ new WeakMap(); | ||
if (visitedElements.has(element)) { | ||
if (ENV === "test" || ENV === "development") console.warn("Cyclic rendering detected:", element.__ref.path); | ||
if (ENV === "test" || ENV === "development") { | ||
console.warn("Cyclic rendering detected:", element.__ref.path); | ||
} | ||
} | ||
@@ -172,10 +114,27 @@ visitedElements.set(element, true); | ||
const path = ref.path; | ||
if (path.includes("ComponentsGrid")) path.splice(0, path.indexOf("ComponentsGrid") + 2); | ||
if (path.includes("demoComponent")) path.splice(0, path.indexOf("demoComponent") + 1); | ||
if (path.includes("ComponentsGrid")) { | ||
path.splice(0, path.indexOf("ComponentsGrid") + 2); | ||
} | ||
if (path.includes("demoComponent")) { | ||
path.splice(0, path.indexOf("demoComponent") + 1); | ||
} | ||
const isDemoComponent = (_b = (_a = element.lookup((el) => el.state.key)) == null ? void 0 : _a.state) == null ? void 0 : _b.key; | ||
element.warn("Error happened in:", isDemoComponent ? isDemoComponent + " " : "" + path.join(".")); | ||
element.warn( | ||
"Error happened in:", | ||
isDemoComponent ? isDemoComponent + " " : "" + path.join(".") | ||
); | ||
element.verbose(); | ||
element.error(e, options); | ||
if ((_c = element.on) == null ? void 0 : _c.error) element.on.error(e, element, element.state, element.context, options); | ||
if ((_d = element.props) == null ? void 0 : _d.onError) element.props.onError(e, element, element.state, element.context, options); | ||
if ((_c = element.on) == null ? void 0 : _c.error) { | ||
element.on.error(e, element, element.state, element.context, options); | ||
} | ||
if ((_d = element.props) == null ? void 0 : _d.onError) { | ||
element.props.onError( | ||
e, | ||
element, | ||
element.state, | ||
element.context, | ||
options | ||
); | ||
} | ||
} | ||
@@ -194,66 +153,18 @@ } | ||
}; | ||
const checkIfPrimitive = (element) => is(element)("string", "number"); | ||
const applyValueAsText = (element, parent, key) => { | ||
const extendTag = element.extend && element.extend.tag; | ||
const childExtendTag = parent.childExtend && parent.childExtend.tag; | ||
const childPropsTag = parent.props.childProps && parent.props.childProps.tag; | ||
const isKeyValidHTMLTag = HTML_TAGS.body.indexOf(key) > -1 && key; | ||
return { | ||
text: element, | ||
tag: extendTag || childExtendTag || childPropsTag || isKeyValidHTMLTag || "string" | ||
}; | ||
}; | ||
const applyContext = (element, parent, options) => { | ||
const forcedOptionsContext = options.context && !ROOT.context && !element.context; | ||
if (forcedOptionsContext) ROOT.context = options.context; | ||
if (!element.context) element.context = parent.context || options.context || ROOT.context; | ||
}; | ||
const createScope = (element, parent) => { | ||
const { __ref: ref } = element; | ||
if (!element.scope) element.scope = parent.scope || ref.root.scope || {}; | ||
}; | ||
const createIfConditionFlag = (element, parent) => { | ||
const { __ref: ref } = element; | ||
if (isFunction(element.if) && !element.if(element, element.state, element.context)) { | ||
delete ref.__if; | ||
} else ref.__if = true; | ||
}; | ||
const addCaching = (element, parent) => { | ||
const { __ref: ref, key } = element; | ||
let { __ref: parentRef } = parent; | ||
if (!element.transform) element.transform = {}; | ||
if (!ref.__cached) ref.__cached = {}; | ||
if (!ref.__defineCache) ref.__defineCache = {}; | ||
if (!ref.__exec) ref.__exec = {}; | ||
if (!ref.__execProps) ref.__execProps = {}; | ||
if (!ref.__class) ref.__class = {}; | ||
if (!ref.__classNames) ref.__classNames = {}; | ||
if (!ref.__attr) ref.__attr = {}; | ||
if (!ref.__changes) ref.__changes = []; | ||
if (!ref.__children) ref.__children = []; | ||
if (checkIfKeyIsComponent(key)) ref.__componentKey = key.split("_")[0].split(".")[0].split("+")[0]; | ||
const hasRoot = parent && parent.key === ":root"; | ||
if (!ref.root) ref.root = hasRoot ? element : parentRef.root; | ||
if (!parentRef) parentRef = parent.ref = {}; | ||
if (!parentRef.path) parentRef.path = []; | ||
ref.path = parentRef.path.concat(element.key); | ||
}; | ||
const onlyResolveExtends = (element, parent, key, options) => { | ||
const { __ref: ref } = element; | ||
if (!ref.__skipCreate) { | ||
addCaching(element, parent); | ||
addMethods(element, parent, options); | ||
createScope(element, parent); | ||
createState(element, parent); | ||
if (element.scope === "state") element.scope = element.state; | ||
createIfConditionFlag(element, parent); | ||
createProps(element, parent, options); | ||
if (element.scope === "props" || element.scope === true) element.scope = element.props; | ||
if (element.node && ref.__if) { | ||
parent[key || element.key] = element; | ||
} | ||
if (!element.props) element.props = {}; | ||
applyVariant(element, parent); | ||
addElementIntoParentChildren(element, parent); | ||
addMethods(element, parent, options); | ||
createScope(element, parent); | ||
createState(element, parent); | ||
if (element.scope === "state") element.scope = element.state; | ||
createIfConditionFlag(element, parent); | ||
initProps(element, parent, options); | ||
if (element.scope === "props" || element.scope === true) { | ||
element.scope = element.props; | ||
} | ||
if (element.node && ref.__if) { | ||
parent[key || element.key] = element; | ||
} | ||
if (!element.props) element.props = {}; | ||
addElementIntoParentChildren(element, parent); | ||
if (element.tag !== "string" && element.tag !== "fragment") { | ||
@@ -263,3 +174,5 @@ throughInitialDefine(element); | ||
for (const k in element) { | ||
if (isUndefined(element[k]) || isMethod(k, element) || isObject((registry.default || registry)[k]) || isVariant(k)) continue; | ||
if (isUndefined(element[k]) || isMethod(k, element) || isObject(REGISTRY[k])) { | ||
continue; | ||
} | ||
const hasDefine = element.define && element.define[k]; | ||
@@ -284,20 +197,2 @@ const contextHasDefine = element.context && element.context.define && element.context.define[k]; | ||
}; | ||
const checkIfMedia = (key) => key.slice(0, 1) === "@"; | ||
const applyMediaProps = (element, parent, key) => { | ||
const { props } = element; | ||
if (props) { | ||
props.display = "none"; | ||
if (props[key]) props[key].display = props.display; | ||
else props[key] = { display: props.display || "block" }; | ||
return element; | ||
} else { | ||
return { | ||
...element, | ||
props: { | ||
display: "none", | ||
[key]: { display: "block" } | ||
} | ||
}; | ||
} | ||
}; | ||
var create_default = create; | ||
@@ -304,0 +199,0 @@ export { |
@@ -7,8 +7,7 @@ import { | ||
isString, | ||
checkIfKeyIsComponent, | ||
extendizeByKey, | ||
isVariant | ||
matchesComponentNaming, | ||
isContextComponent, | ||
isMethod, | ||
overwrite | ||
} from "@domql/utils"; | ||
import { METHODS_EXL, overwrite } from "./utils/index.js"; | ||
import { isMethod } from "./methods/index.js"; | ||
const throughInitialExec = (element, exclude = {}) => { | ||
@@ -19,3 +18,3 @@ const { __ref: ref } = element; | ||
const prop = element[param]; | ||
if (isFunction(prop) && !isMethod(param, element) && !isVariant(param)) { | ||
if (isFunction(prop) && !isMethod(param, element)) { | ||
ref.__exec[param] = prop; | ||
@@ -26,3 +25,3 @@ element[param] = prop(element, element.state, element.context); | ||
}; | ||
const throughUpdatedExec = (element, options = { excludes: METHODS_EXL }) => { | ||
const throughUpdatedExec = (element, options = {}) => { | ||
const { __ref: ref } = element; | ||
@@ -37,9 +36,13 @@ const changes = {}; | ||
if (prop && prop.node && execReturnsString) { | ||
overwrite(prop, { text: newExec }, options); | ||
overwrite(prop, { text: newExec }); | ||
} else if (newExec !== prop) { | ||
if (checkIfKeyIsComponent(param)) { | ||
const { extend, ...newElem } = extendizeByKey(newExec, element, param); | ||
overwrite(prop, newElem, options); | ||
if (matchesComponentNaming(param)) { | ||
const { extends: extend, ...newElem } = isContextComponent( | ||
newExec, | ||
element, | ||
param | ||
); | ||
overwrite(prop, newElem); | ||
} else { | ||
ref.__cached[param] = changes[param] = prop; | ||
changes[param] = prop; | ||
element[param] = newExec; | ||
@@ -65,2 +68,4 @@ } | ||
}; | ||
const isPropertyInDefines = (key, element) => { | ||
}; | ||
const throughInitialDefine = (element) => { | ||
@@ -74,3 +79,3 @@ const { define, context, __ref: ref } = element; | ||
let elementProp = element[param]; | ||
if (isFunction(elementProp) && !isMethod(param, element) && !isVariant(param)) { | ||
if (isFunction(elementProp) && !isMethod(param, element)) { | ||
ref.__exec[param] = elementProp; | ||
@@ -83,3 +88,8 @@ const execParam2 = elementProp = exec(elementProp, element); | ||
} | ||
const execParam = defineObj[param](elementProp, element, element.state, element.context); | ||
const execParam = defineObj[param]( | ||
elementProp, | ||
element, | ||
element.state, | ||
element.context | ||
); | ||
if (execParam) element[param] = execParam; | ||
@@ -97,5 +107,11 @@ } | ||
const execParam = ref.__exec[param]; | ||
if (execParam) ref.__defineCache[param] = execParam(element, element.state, element.context); | ||
if (execParam) { | ||
ref.__defineCache[param] = execParam( | ||
element, | ||
element.state, | ||
element.context | ||
); | ||
} | ||
const cached = exec(ref.__defineCache[param], element); | ||
const newExecParam = obj[param](cached, element, element.state, element.context); | ||
const newExecParam = typeof obj[param] === "function" ? obj[param](cached, element, element.state, element.context) : void 0; | ||
if (newExecParam) element[param] = newExecParam; | ||
@@ -106,2 +122,3 @@ } | ||
export { | ||
isPropertyInDefines, | ||
throughExecProps, | ||
@@ -108,0 +125,0 @@ throughInitialDefine, |
import { merge, overwrite } from "@domql/utils"; | ||
import { set, reset } from "../set.js"; | ||
import { set, reset, updateContent, removeContent } from "../set.js"; | ||
import { update } from "../update.js"; | ||
import { removeContent, updateContent } from "../mixins/content.js"; | ||
import { | ||
@@ -26,3 +25,3 @@ call, | ||
warn | ||
} from "./index.js"; | ||
} from "@domql/utils/methods"; | ||
const addMethods = (element, parent, options = {}) => { | ||
@@ -56,3 +55,6 @@ const proto = { | ||
}; | ||
if (element.context.methods) (options.strict ? merge : overwrite)(proto, element.context.methods); | ||
if (element.context.methods) { | ||
; | ||
(options.strict ? merge : overwrite)(proto, element.context.methods); | ||
} | ||
Object.setPrototypeOf(element, proto); | ||
@@ -59,0 +61,0 @@ }; |
import { isDefined, isFunction, isObjectLike } from "@domql/utils"; | ||
import { parseFilters, REGISTRY } from "../mixins/index.js"; | ||
const defineSetter = (element, key, get, set) => Object.defineProperty(element, key, { get, set }); | ||
@@ -8,5 +7,2 @@ const keys = function() { | ||
for (const param in element) { | ||
if (REGISTRY[param] && !parseFilters.elementKeys.includes(param)) { | ||
continue; | ||
} | ||
keys2.push(param); | ||
@@ -52,3 +48,3 @@ } | ||
} else { | ||
console.log(__ref.path); | ||
console.log(__ref == null ? void 0 : __ref.path); | ||
const keys2 = element.keys(); | ||
@@ -55,0 +51,0 @@ keys2.forEach((v) => console.log(`%c${v}: |
@@ -1,4 +0,3 @@ | ||
import { exec, isNot, isNull, isUndefined } from "@domql/utils"; | ||
import { deepMerge, exec, isNot, isNull, isUndefined } from "@domql/utils"; | ||
import { report } from "@domql/report"; | ||
import { deepMerge } from "../utils/index.js"; | ||
function attr(params, element, node) { | ||
@@ -9,7 +8,9 @@ const { __ref: ref, props } = element; | ||
if (params) { | ||
if (props.attr) deepMerge(params, props.attr); | ||
for (const attr2 in params) { | ||
const val = exec(params[attr2], element); | ||
if (val !== false && !isUndefined(val) && !isNull(val) && node.setAttribute) node.setAttribute(attr2, val); | ||
else if (node.removeAttribute) node.removeAttribute(attr2); | ||
const attrs = exec(params, element); | ||
if (props.attr) deepMerge(attrs, props.attr); | ||
for (const attr2 in attrs) { | ||
const val = exec(attrs[attr2], element); | ||
if (val !== false && !isUndefined(val) && !isNull(val) && node.setAttribute) { | ||
node.setAttribute(attr2, val); | ||
} else if (node.removeAttribute) node.removeAttribute(attr2); | ||
__attr[attr2] = val; | ||
@@ -16,0 +17,0 @@ } |
@@ -1,2 +0,2 @@ | ||
import { exec, isObject, deepMerge } from "@domql/utils"; | ||
import { isObject, deepMerge, exec } from "@domql/utils"; | ||
import { report } from "@domql/report"; | ||
@@ -3,0 +3,0 @@ function data(params, element, node) { |
import { attr } from "./attr.js"; | ||
import { applyClasslist } from "./classList.js"; | ||
import { setContent } from "./content.js"; | ||
import { data } from "./data.js"; | ||
@@ -10,3 +9,2 @@ import { html } from "./html.js"; | ||
import { scope } from "./scope.js"; | ||
import { REGISTRY } from "./registry.js"; | ||
export * from "./registry.js"; | ||
@@ -16,6 +14,4 @@ export { | ||
applyClasslist as classList, | ||
setContent as content, | ||
data, | ||
html, | ||
REGISTRY as registry, | ||
scope, | ||
@@ -22,0 +18,0 @@ state, |
import attr from "./attr.js"; | ||
import { classList } from "./classList.js"; | ||
import content from "./content.js"; | ||
import data from "./data.js"; | ||
@@ -15,3 +14,2 @@ import html from "./html.js"; | ||
html, | ||
content, | ||
data, | ||
@@ -22,10 +20,10 @@ class: classList, | ||
deps: (param, el) => param || el.parent.deps, | ||
extend: {}, | ||
childExtend: {}, | ||
childExtendRecursive: {}, | ||
extends: {}, | ||
children: {}, | ||
content: {}, | ||
childExtends: {}, | ||
childExtendsRecursive: {}, | ||
props: {}, | ||
path: {}, | ||
if: {}, | ||
define: {}, | ||
transform: {}, | ||
__name: {}, | ||
@@ -35,4 +33,2 @@ __ref: {}, | ||
__text: {}, | ||
nextElement: {}, | ||
previousElement: {}, | ||
key: {}, | ||
@@ -43,67 +39,11 @@ tag: {}, | ||
node: {}, | ||
set: {}, | ||
reset: {}, | ||
update: {}, | ||
error: {}, | ||
warn: {}, | ||
call: {}, | ||
setProps: {}, | ||
remove: {}, | ||
updateContent: {}, | ||
removeContent: {}, | ||
variables: {}, | ||
lookup: {}, | ||
lookdown: {}, | ||
getRef: {}, | ||
getPath: {}, | ||
lookdownAll: {}, | ||
setNodeStyles: {}, | ||
spotByPath: {}, | ||
keys: {}, | ||
log: {}, | ||
parse: {}, | ||
parseDeep: {}, | ||
on: {}, | ||
component: {}, | ||
context: {}, | ||
$collection: {}, | ||
$stateCollection: {}, | ||
$propsCollection: {}, | ||
$setCollection: {}, | ||
$setStateCollection: {}, | ||
$setPropsCollection: {} | ||
context: {} | ||
}; | ||
var registry_default = REGISTRY; | ||
const parseFilters = { | ||
elementKeys: [ | ||
"tag", | ||
"text", | ||
"style", | ||
"attr", | ||
"class", | ||
"state", | ||
"props", | ||
"data", | ||
"content", | ||
"html", | ||
"on", | ||
"key", | ||
"extend", | ||
"childExtend", | ||
"childExtendRecursive", | ||
"scope", | ||
"query", | ||
"$collection", | ||
"$stateCollection", | ||
"$propsCollection" | ||
], | ||
propsKeys: ["__element", "update"], | ||
stateKeys: [] | ||
}; | ||
const collectionFilters = ["$collection", "$stateCollection", "$propsCollection"]; | ||
export { | ||
REGISTRY, | ||
collectionFilters, | ||
registry_default as default, | ||
parseFilters | ||
registry_default as default | ||
}; |
import { isFunction, isObject } from "@domql/utils"; | ||
function scope(params, element, node) { | ||
async function scope(params, element, node) { | ||
if (!isObject(params)) return; | ||
@@ -4,0 +4,0 @@ for (const scopeItem in params) { |
@@ -1,8 +0,7 @@ | ||
import { IGNORE_STATE_PARAMS } from "@domql/state"; | ||
import { exec, isObject } from "@domql/utils"; | ||
function state(params, element, node) { | ||
const state2 = exec(params, element); | ||
import { execPromise, isObject, STATE_METHODS } from "@domql/utils"; | ||
async function state(params, element, node) { | ||
const state2 = await execPromise(params, element); | ||
if (isObject(state2)) { | ||
for (const param in state2) { | ||
if (IGNORE_STATE_PARAMS.includes(param)) continue; | ||
if (STATE_METHODS.includes(param)) continue; | ||
if (!Object.hasOwnProperty.call(state2, param)) continue; | ||
@@ -9,0 +8,0 @@ } |
import { create } from "../create.js"; | ||
import { | ||
exec, | ||
isString | ||
} from "@domql/utils"; | ||
function text(param, element, node) { | ||
let prop = exec(param, element); | ||
import { exec, isString } from "@domql/utils"; | ||
async function text(param, element, node) { | ||
let prop = exec(param || element.props.text, element); | ||
if (isString(prop) && prop.includes("{{")) { | ||
@@ -18,3 +15,3 @@ prop = element.call("replaceLiteralsWithObjectFields", prop); | ||
if (element.__text.node) element.__text.node.nodeValue = prop; | ||
} else create({ tag: "string", text: prop }, element, "__text"); | ||
} else await create({ tag: "string", text: prop }, element, "__text"); | ||
} | ||
@@ -21,0 +18,0 @@ } |
@@ -1,5 +0,4 @@ | ||
import { exec, isFunction, isObject, isUndefined, isVariant } from "@domql/utils"; | ||
import { isFunction, isMethod, isObject, isUndefined } from "@domql/utils"; | ||
import { applyEventsOnNode, triggerEventOn } from "@domql/event"; | ||
import { cacheNode } from "@domql/render"; | ||
import { isMethod } from "./methods/index.js"; | ||
import { create } from "./create.js"; | ||
@@ -13,33 +12,30 @@ import { | ||
import { applyParam } from "./utils/applyParam.js"; | ||
import { propagateEventsFromProps } from "./utils/propEvents.js"; | ||
import setChildren from "./children.js"; | ||
import { setContent } from "./set.js"; | ||
const ENV = "development"; | ||
const createNode = async (element, options) => { | ||
const createNode = async (element, opts) => { | ||
let { node, tag, __ref: ref } = element; | ||
if (!ref.__if) return element; | ||
let isNewNode; | ||
if (!node) { | ||
isNewNode = true; | ||
if (!ref.__if) return element; | ||
if (tag === "shadow") { | ||
node = element.node = element.parent.node.attachShadow({ mode: "open" }); | ||
} else node = element.node = cacheNode(element); | ||
triggerEventOn("attachNode", element, options); | ||
await triggerEventOn("attachNode", element, opts); | ||
} | ||
if (ENV === "test" || ENV === "development" || options.alowRefReference) { | ||
if (ENV === "test" || ENV === "development" || opts.alowRefReference) { | ||
node.ref = element; | ||
if (isFunction(node.setAttribute)) node.setAttribute("key", element.key); | ||
} | ||
throughExecProps(element); | ||
throughInitialDefine(element); | ||
throughInitialExec(element); | ||
if (element.tag !== "string" && element.tag !== "fragment") { | ||
propagateEventsFromProps(element); | ||
if (isNewNode && isObject(element.on)) { | ||
applyEventsOnNode(element, options); | ||
} | ||
} | ||
await throughExecProps(element); | ||
await throughInitialDefine(element); | ||
await throughInitialExec(element); | ||
await applyEventsOnNode(element, { isNewNode, ...opts }); | ||
for (const param in element) { | ||
const value = element[param]; | ||
if (!Object.hasOwnProperty.call(element, param)) continue; | ||
if (isUndefined(value) || isMethod(param, element) || isVariant(param) || isObject(REGISTRY[param])) continue; | ||
const isElement = applyParam(param, element, options); | ||
if (!Object.hasOwnProperty.call(element, param) || isUndefined(value) || isMethod(param, element) || isObject(REGISTRY[param])) { | ||
continue; | ||
} | ||
const isElement = await applyParam(param, element, opts); | ||
if (isElement) { | ||
@@ -49,9 +45,9 @@ const { hasDefine, hasContextDefine } = isElement; | ||
const createAsync = async () => { | ||
await create(exec(value, element), element, param, options); | ||
await create(value, element, param, opts); | ||
}; | ||
if (element.props && element.props.lazyLoad || options.lazyLoad) { | ||
if (element.props && element.props.lazyLoad || opts.lazyLoad) { | ||
window.requestAnimationFrame(async () => { | ||
await createAsync(); | ||
if (!options.preventUpdateListener) { | ||
triggerEventOn("lazyLoad", element, options); | ||
if (!opts.preventUpdateListener) { | ||
await triggerEventOn("lazyLoad", element, opts); | ||
} | ||
@@ -63,2 +59,6 @@ }); | ||
} | ||
const content = element.children ? await setChildren(element.children, element, opts) : element.content || element.content; | ||
if (content) { | ||
await setContent(content, element, opts); | ||
} | ||
return element; | ||
@@ -65,0 +65,0 @@ }; |
@@ -1,22 +0,17 @@ | ||
import { deepContains, setContentKey } from "@domql/utils"; | ||
import { OPTIONS } from "./cache/options.js"; | ||
import { deepContains, execPromise, isFunction, OPTIONS } from "@domql/utils"; | ||
import { create } from "./create.js"; | ||
import { registry } from "./mixins/index.js"; | ||
import { removeContent } from "./mixins/content.js"; | ||
import { triggerEventOn, triggerEventOnUpdate } from "@domql/event"; | ||
const resetElement = async (params, element, options) => { | ||
if (!options.preventRemove) removeContent(element, options); | ||
const setContentKey = (element, opts = {}) => { | ||
const { __ref: ref } = element; | ||
await create(params, element, ref.contentElementKey || "content", { | ||
ignoreChildExtend: true, | ||
...registry.defaultOptions, | ||
...OPTIONS.create, | ||
...options | ||
}); | ||
const contentElementKey = opts.contentElementKey; | ||
if (!ref.contentElementKey || contentElementKey !== ref.contentElementKey) { | ||
ref.contentElementKey = contentElementKey || "content"; | ||
} | ||
return ref.contentElementKey; | ||
}; | ||
const reset = (options) => { | ||
const reset = async (options) => { | ||
const element = void 0; | ||
create(element, element.parent, void 0, { | ||
ignoreChildExtend: true, | ||
...registry.defaultOptions, | ||
await create(element, element.parent, void 0, { | ||
ignoreChildExtends: true, | ||
...OPTIONS.defaultOptions, | ||
...OPTIONS.create, | ||
@@ -26,2 +21,63 @@ ...options | ||
}; | ||
const resetContent = async (params, element, opts) => { | ||
var _a; | ||
const contentElementKey = setContentKey(element, opts); | ||
if ((_a = element[contentElementKey]) == null ? void 0 : _a.node) removeContent(element, opts); | ||
const contentElem = await create( | ||
params, | ||
element, | ||
contentElementKey || "content", | ||
{ | ||
ignoreChildExtends: true, | ||
...OPTIONS.defaultOptions, | ||
...OPTIONS.create, | ||
...opts | ||
} | ||
); | ||
if (contentElementKey !== "content") opts.contentElementKey = "content"; | ||
return contentElem; | ||
}; | ||
const updateContent = async function(params, opts) { | ||
const element = this; | ||
const contentElementKey = setContentKey(element, opts); | ||
if (!element[contentElementKey]) return; | ||
if (element[contentElementKey].update) { | ||
await element[contentElementKey].update(params, opts); | ||
} | ||
}; | ||
async function setContent(param, element, opts) { | ||
const content = await execPromise(param, element); | ||
if (content && element) { | ||
set.call(element, content, opts); | ||
} | ||
} | ||
const removeContent = function(el, opts = {}) { | ||
var _a; | ||
const element = el || this; | ||
const contentElementKey = setContentKey(element, opts); | ||
if (opts.contentElementKey !== "content") { | ||
opts.contentElementKey = "content"; | ||
} | ||
const content = element[contentElementKey]; | ||
if (!content) return; | ||
if (content.tag === "fragment" && ((_a = content.__ref) == null ? void 0 : _a.__children)) { | ||
content.__ref.__children.forEach((key) => { | ||
const child = content[key]; | ||
if (child.node && child.node.parentNode) { | ||
child.node.parentNode.removeChild(child.node); | ||
} | ||
if (isFunction(child.remove)) { | ||
child.remove(); | ||
} | ||
}); | ||
} else { | ||
if (content.node && content.node.parentNode) { | ||
content.node.parentNode.removeChild(content.node); | ||
} | ||
if (isFunction(content.remove)) { | ||
content.remove(); | ||
} | ||
} | ||
delete element[contentElementKey]; | ||
}; | ||
const set = async function(params, options = {}, el) { | ||
@@ -31,22 +87,33 @@ var _a; | ||
const { __ref: ref } = element; | ||
const content = setContentKey(element, options); | ||
const contentElementKey = setContentKey(element, options); | ||
const content = element[contentElementKey]; | ||
const __contentRef = content && content.__ref; | ||
const lazyLoad = element.props && element.props.lazyLoad; | ||
const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection; | ||
if (options.preventContentUpdate === true && !hasCollection) return; | ||
if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && deepContains(params, content)) { | ||
const hasChildren = element.children; | ||
if (options.preventContentUpdate === true && !hasChildren) return; | ||
const childHasChanged = !ref.__noChildrenDifference; | ||
const childrenIsDifferentFromCache = childHasChanged && __contentRef && Object.keys(params).length === Object.keys(content).length && deepContains(params, content); | ||
if ((content == null ? void 0 : content.update) && !childHasChanged && !childrenIsDifferentFromCache) { | ||
if (!options.preventBeforeUpdateListener && !options.preventListeners) { | ||
const beforeUpdateReturns = await triggerEventOnUpdate("beforeUpdate", params, element, options); | ||
const beforeUpdateReturns = await triggerEventOnUpdate( | ||
"beforeUpdate", | ||
params, | ||
element, | ||
options | ||
); | ||
if (beforeUpdateReturns === false) return element; | ||
} | ||
if (content == null ? void 0 : content.update) content.update(); | ||
if (!options.preventUpdateListener) await triggerEventOn("update", element, options); | ||
await content.update(params); | ||
if (!options.preventUpdateListener && !options.preventListeners) { | ||
await triggerEventOn("update", element, options); | ||
} | ||
return; | ||
} | ||
if (params) { | ||
let { childExtend, props } = params; | ||
if (!props) props = params.props = {}; | ||
if (!childExtend && element.childExtend) { | ||
params.childExtend = element.childExtend; | ||
props.ignoreChildExtend = true; | ||
if (!params) return element; | ||
let { childExtends, props, tag } = params; | ||
if (!props) props = params.props = {}; | ||
if (tag === "fragment") { | ||
if (!childExtends && element.childExtends) { | ||
params.childExtends = element.childExtends; | ||
props.ignoreChildExtends = true; | ||
} | ||
@@ -57,12 +124,13 @@ if (!(props == null ? void 0 : props.childProps) && ((_a = element.props) == null ? void 0 : _a.childProps)) { | ||
} | ||
if (lazyLoad) { | ||
window.requestAnimationFrame(async () => { | ||
await resetElement(params, element, options); | ||
if (!options.preventUpdateListener) { | ||
triggerEventOn("lazyLoad", element, options); | ||
} | ||
}); | ||
} else await resetElement(params, element, options); | ||
} | ||
return element; | ||
if (lazyLoad) { | ||
window.requestAnimationFrame(async () => { | ||
await resetContent(params, element, options); | ||
if (!options.preventUpdateListener) { | ||
await triggerEventOn("lazyLoad", element, options); | ||
} | ||
}); | ||
} else { | ||
await resetContent(params, element, options); | ||
} | ||
}; | ||
@@ -72,5 +140,9 @@ var set_default = set; | ||
set_default as default, | ||
removeContent, | ||
reset, | ||
resetElement, | ||
set | ||
resetContent, | ||
set, | ||
setContent, | ||
setContentKey, | ||
updateContent | ||
}; |
@@ -11,20 +11,25 @@ import { | ||
merge, | ||
isVariant, | ||
overwriteDeep, | ||
createSnapshotId, | ||
deepClone | ||
deepClone, | ||
propertizeElement, | ||
isMethod, | ||
findInheritedState, | ||
deepMerge, | ||
OPTIONS, | ||
updateProps, | ||
captureSnapshot | ||
} from "@domql/utils"; | ||
import { applyEvent, triggerEventOn, triggerEventOnUpdate } from "@domql/event"; | ||
import { isMethod } from "./methods/index.js"; | ||
import { updateProps } from "./props/index.js"; | ||
import { createState, findInheritedState } from "@domql/state"; | ||
import { createState } from "@domql/state"; | ||
import { create } from "./create.js"; | ||
import { throughExecProps, throughUpdatedDefine, throughUpdatedExec } from "./iterate.js"; | ||
import { | ||
throughExecProps, | ||
throughUpdatedDefine, | ||
throughUpdatedExec | ||
} from "./iterate.js"; | ||
import { REGISTRY } from "./mixins/index.js"; | ||
import { applyParam } from "./utils/applyParam.js"; | ||
import { OPTIONS } from "./cache/options.js"; | ||
import { METHODS_EXL, deepMerge } from "./utils/index.js"; | ||
const snapshot = { | ||
snapshotId: createSnapshotId | ||
}; | ||
import { METHODS_EXL } from "./utils/index.js"; | ||
import { setContent } from "./set.js"; | ||
import setChildren from "./children.js"; | ||
const UPDATE_DEFAULT_OPTIONS = { | ||
@@ -36,28 +41,39 @@ stackChanges: false, | ||
calleeElement: false, | ||
excludes: METHODS_EXL | ||
exclude: METHODS_EXL | ||
}; | ||
const update = async function(params = {}, opts) { | ||
const calleeElementCache = opts == null ? void 0 : opts.calleeElement; | ||
const options = deepClone(isObject(opts) ? deepMerge(opts, UPDATE_DEFAULT_OPTIONS) : UPDATE_DEFAULT_OPTIONS, { exclude: ["calleeElement"] }); | ||
const options = deepClone( | ||
isObject(opts) ? deepMerge(opts, UPDATE_DEFAULT_OPTIONS) : UPDATE_DEFAULT_OPTIONS, | ||
{ exclude: ["calleeElement"] } | ||
); | ||
options.calleeElement = calleeElementCache; | ||
const element = this; | ||
const { parent, node, key } = element; | ||
const { excludes, preventInheritAtCurrentState } = options; | ||
let ref = element.__ref; | ||
if (!ref) ref = element.__ref = {}; | ||
const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(element, options); | ||
const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot( | ||
element, | ||
options | ||
); | ||
if (snapshotHasUpdated) return; | ||
if (!options.preventListeners) await triggerEventOnUpdate("startUpdate", params, element, options); | ||
if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element) return; | ||
if (!excludes) merge(options, UPDATE_DEFAULT_OPTIONS); | ||
if (!options.preventListeners) { | ||
await triggerEventOnUpdate("startUpdate", params, element, options); | ||
} | ||
const { parent, node, key } = element; | ||
const { exclude, preventInheritAtCurrentState } = options; | ||
if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element) { | ||
return; | ||
} | ||
if (!exclude) merge(options, UPDATE_DEFAULT_OPTIONS); | ||
if (isString(params) || isNumber(params)) { | ||
params = { text: params }; | ||
} | ||
params = propertizeElement(params); | ||
const inheritState = await inheritStateUpdates(element, options); | ||
if (inheritState === false) return; | ||
const ifFails = checkIfOnUpdate(element, parent, options); | ||
const ifFails = await checkIfOnUpdate(element, parent, options); | ||
if (ifFails) return; | ||
if (ref.__if && !options.preventPropsUpdate) { | ||
const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps); | ||
const hasFunctionInProps = ref.__props.filter((v) => isFunction(v)); | ||
const hasFunctionInProps = ref.__propsStack.filter((v) => isFunction(v)); | ||
const props = params.props || hasParentProps || hasFunctionInProps.length; | ||
@@ -67,6 +83,11 @@ if (props) updateProps(props, element, parent); | ||
if (!options.preventBeforeUpdateListener && !options.preventListeners) { | ||
const beforeUpdateReturns = await triggerEventOnUpdate("beforeUpdate", params, element, options); | ||
const beforeUpdateReturns = await triggerEventOnUpdate( | ||
"beforeUpdate", | ||
params, | ||
element, | ||
options | ||
); | ||
if (beforeUpdateReturns === false) return element; | ||
} | ||
overwriteDeep(element, params, { exclude: METHODS_EXL }); | ||
overwriteDeep(element, params); | ||
throughExecProps(element); | ||
@@ -76,3 +97,3 @@ throughUpdatedExec(element, { ignore: UPDATE_DEFAULT_OPTIONS }); | ||
if (!options.isForced && !options.preventListeners) { | ||
triggerEventOn("beforeClassAssign", element, options); | ||
await triggerEventOn("beforeClassAssign", element, options); | ||
} | ||
@@ -94,5 +115,7 @@ if (!ref.__if) return false; | ||
if (preventUpdateAfter) { | ||
if (isNumber(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount) return; | ||
else if (options.preventUpdateAfterCount === void 0) options.preventUpdateAfterCount = 1; | ||
else options.preventUpdateAfterCount++; | ||
if (isNumber(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount) { | ||
return; | ||
} else if (options.preventUpdateAfterCount === void 0) { | ||
options.preventUpdateAfterCount = 1; | ||
} else options.preventUpdateAfterCount++; | ||
} | ||
@@ -104,6 +127,7 @@ for (const param in element) { | ||
const isInPreventDefineUpdate = isArray(preventDefineUpdate) && preventDefineUpdate.includes(param); | ||
const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection; | ||
if (isUndefined(prop) || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || preventContentUpdate && param === "content" && !hasCollection || (preventStateUpdate && param) === "state" || isMethod(param, element) || isObject(REGISTRY[param]) || isVariant(param)) continue; | ||
if (isUndefined(prop) || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || (preventStateUpdate && param) === "state" || isMethod(param, element) || isObject(REGISTRY[param])) { | ||
continue; | ||
} | ||
if (preventStateUpdate === "once") options.preventStateUpdate = false; | ||
const isElement = applyParam(param, element, options); | ||
const isElement = await applyParam(param, element, options); | ||
if (isElement) { | ||
@@ -117,3 +141,3 @@ const { hasDefine, hasContextDefine } = isElement; | ||
} | ||
const childUpdateCall = () => update.call(prop, params[prop], { | ||
const childUpdateCall = async () => await update.call(prop, params[prop], { | ||
...options, | ||
@@ -123,32 +147,35 @@ currentSnapshot: snapshotOnCallee, | ||
}); | ||
lazyLoad ? window.requestAnimationFrame(() => { | ||
childUpdateCall(); | ||
if (!options.preventUpdateListener) { | ||
triggerEventOn("lazyLoad", element, options); | ||
} | ||
}) : childUpdateCall(); | ||
if (lazyLoad) { | ||
window.requestAnimationFrame(async () => { | ||
await childUpdateCall(); | ||
if (!options.preventUpdateListener) { | ||
await triggerEventOn("lazyLoad", element, options); | ||
} | ||
}); | ||
} else await childUpdateCall(); | ||
} | ||
} | ||
if (!preventUpdateListener) triggerEventOn("update", element, options); | ||
}; | ||
const captureSnapshot = (element, options) => { | ||
const ref = element.__ref; | ||
const { currentSnapshot, calleeElement } = options; | ||
const isCallee = calleeElement === element; | ||
if (!calleeElement || isCallee) { | ||
const createdStanpshot = snapshot.snapshotId(); | ||
ref.__currentSnapshot = createdStanpshot; | ||
return [createdStanpshot, element]; | ||
if (!preventContentUpdate) { | ||
const children = params.children || element.children; | ||
const content = children ? await setChildren(children, element, opts) : element.children || params.content; | ||
if (content) { | ||
await setContent(content, element, options); | ||
} | ||
} | ||
const snapshotOnCallee = calleeElement.__ref.__currentSnapshot; | ||
if (currentSnapshot < snapshotOnCallee) { | ||
return [snapshotOnCallee, calleeElement, true]; | ||
if (!preventUpdateListener) { | ||
await triggerEventOn("update", element, options); | ||
} | ||
return [snapshotOnCallee, calleeElement]; | ||
}; | ||
const checkIfOnUpdate = (element, parent, options) => { | ||
const checkIfOnUpdate = async (element, parent, options) => { | ||
var _a, _b, _c; | ||
if (!isFunction(element.if) && !isFunction((_a = element.props) == null ? void 0 : _a.if) || !parent) return; | ||
if (!isFunction(element.if) && !isFunction((_a = element.props) == null ? void 0 : _a.if) || !parent) { | ||
return; | ||
} | ||
const ref = element.__ref; | ||
const ifPassed = (element.if || ((_b = element.props) == null ? void 0 : _b.if))(element, element.state, element.context, options); | ||
const ifPassed = (element.if || ((_b = element.props) == null ? void 0 : _b.if))( | ||
element, | ||
element.state, | ||
element.context, | ||
options | ||
); | ||
const itWasFalse = ref.__if !== true; | ||
@@ -160,3 +187,3 @@ if (ifPassed) { | ||
delete element.__text; | ||
delete element.extend; | ||
delete element.extends; | ||
if (!ref.__hasRootState) { | ||
@@ -175,5 +202,7 @@ delete element.state; | ||
const contentKey = ref.contentElementKey; | ||
if (element.$collection || element.$stateCollection || element.$propsCollection) { | ||
if (element.children) { | ||
element.removeContent(); | ||
} else if ((_c = element[contentKey]) == null ? void 0 : _c.parseDeep) element[contentKey] = element[contentKey].parseDeep(); | ||
} else if ((_c = element[contentKey]) == null ? void 0 : _c.parseDeep) { | ||
element[contentKey] = element[contentKey].parseDeep(); | ||
} | ||
const previousElement = element.previousElement(); | ||
@@ -191,5 +220,15 @@ const previousNode = previousElement == null ? void 0 : previousElement.node; | ||
delete element.parent; | ||
const createdElement = create(element, parent, element.key, OPTIONS.create, attachOptions); | ||
const createdElement = await create( | ||
element, | ||
parent, | ||
element.key, | ||
OPTIONS.create, | ||
attachOptions | ||
); | ||
if (options.preventUpdate !== true && element.on && isFunction(element.on.update)) { | ||
applyEvent(element.on.update, createdElement, createdElement.state); | ||
await applyEvent( | ||
element.on.update, | ||
createdElement, | ||
createdElement.state | ||
); | ||
} | ||
@@ -216,3 +255,8 @@ return createdElement; | ||
const execState = exec(stateKey, element); | ||
state.set(execState, { ...options, preventUpdate: true, preventStateUpdateListener: false, updatedByStateFunction: true }); | ||
state.set(execState, { | ||
...options, | ||
preventUpdate: true, | ||
preventStateUpdateListener: false, | ||
updatedByStateFunction: true | ||
}); | ||
return; | ||
@@ -223,13 +267,23 @@ } | ||
if (!options.preventBeforeStateUpdateListener && !options.preventListeners) { | ||
const initStateReturns = await triggerEventOnUpdate("beforeStateUpdate", keyInParentState, element, options); | ||
const initStateReturns = await triggerEventOnUpdate( | ||
"beforeStateUpdate", | ||
keyInParentState, | ||
element, | ||
options | ||
); | ||
if (initStateReturns === false) return element; | ||
} | ||
const newState = createStateUpdate(element, parent, options); | ||
const newState = await createStateUpdate(element, parent, options); | ||
if (!options.preventStateUpdateListener && !options.preventListeners) { | ||
await triggerEventOnUpdate("stateUpdate", newState.parse(), element, options); | ||
await triggerEventOnUpdate( | ||
"stateUpdate", | ||
newState.parse(), | ||
element, | ||
options | ||
); | ||
} | ||
}; | ||
const createStateUpdate = (element, parent, options) => { | ||
const createStateUpdate = async (element, parent, options) => { | ||
const __stateChildren = element.state.__children; | ||
const newState = createState(element, parent); | ||
const newState = await createState(element, parent); | ||
element.state = newState; | ||
@@ -236,0 +290,0 @@ for (const child in __stateChildren) { |
import { isFunction } from "@domql/utils"; | ||
import { REGISTRY } from "../mixins/index.js"; | ||
const applyParam = (param, element, options) => { | ||
const applyParam = async (param, element, options) => { | ||
const { node, context, __ref: ref } = element; | ||
@@ -16,3 +16,3 @@ const prop = element[param]; | ||
if (isFunction(isGlobalTransformer)) { | ||
isGlobalTransformer(prop, element, node, options); | ||
await isGlobalTransformer(prop, element, node, options); | ||
return; | ||
@@ -19,0 +19,0 @@ } |
@@ -1,3 +0,4 @@ | ||
export * from "./object.js"; | ||
export * from "./extendUtils.js"; | ||
export * from "./component.js"; | ||
const METHODS_EXL = []; | ||
export { | ||
METHODS_EXL | ||
}; |
@@ -1,10 +0,14 @@ | ||
import { exec, isFunction, isObject, isUndefined } from "@domql/utils"; | ||
import { | ||
exec, | ||
initProps, | ||
isFunction, | ||
isMethod, | ||
isObject, | ||
isUndefined | ||
} from "@domql/utils"; | ||
import { create } from ".."; | ||
import { REGISTRY } from "../mixins/index.js"; | ||
import { applyVariant, isVariant } from "."; | ||
import { isMethod } from "../methods"; | ||
import { addMethods } from "../methods/set"; | ||
import { createState } from "@domql/state"; | ||
import { detectTag } from "@domql/render"; | ||
import { createProps } from "../props"; | ||
import { throughInitialDefine, throughInitialExec } from "../iterate"; | ||
@@ -16,3 +20,2 @@ const onlyResolveExtends = (element, parent, key, options) => { | ||
const { __ref: ref2 } = element; | ||
if (!ref2.__cached) ref2.__cached = {}; | ||
if (!ref2.__defineCache) ref2.__defineCache = {}; | ||
@@ -39,4 +42,3 @@ if (!ref2.__exec) ref2.__exec = {}; | ||
} | ||
createProps(element, parent, options); | ||
applyVariant(element, parent); | ||
initProps(element, parent, options); | ||
if (element.tag !== "string" && element.tag !== "fragment") { | ||
@@ -47,3 +49,5 @@ throughInitialDefine(element); | ||
const prop = element[param]; | ||
if (isUndefined(prop) || isMethod(param, element) || isObject(REGISTRY[param]) || isVariant(param)) continue; | ||
if (isUndefined(prop) || isMethod(param, element) || isObject(REGISTRY[param])) { | ||
continue; | ||
} | ||
const hasDefine = element.define && element.define[param]; | ||
@@ -50,0 +54,0 @@ const contextHasDefine = element.context && element.context.define && element.context.define[param]; |
@@ -9,10 +9,8 @@ 'use strict' | ||
isString, | ||
checkIfKeyIsComponent, | ||
extendizeByKey, | ||
isVariant | ||
matchesComponentNaming, | ||
isContextComponent, | ||
isMethod, | ||
overwrite | ||
} from '@domql/utils' | ||
import { METHODS_EXL, overwrite } from './utils/index.js' | ||
import { isMethod } from './methods/index.js' | ||
export const throughInitialExec = (element, exclude = {}) => { | ||
@@ -23,6 +21,5 @@ const { __ref: ref } = element | ||
const prop = element[param] | ||
if (isFunction(prop) && !isMethod(param, element) && !isVariant(param)) { | ||
if (isFunction(prop) && !isMethod(param, element)) { | ||
ref.__exec[param] = prop | ||
element[param] = prop(element, element.state, element.context) | ||
// if (isComponent) | ||
} | ||
@@ -32,3 +29,3 @@ } | ||
export const throughUpdatedExec = (element, options = { excludes: METHODS_EXL }) => { | ||
export const throughUpdatedExec = (element, options = {}) => { | ||
const { __ref: ref } = element | ||
@@ -47,11 +44,13 @@ const changes = {} | ||
if (prop && prop.node && execReturnsString) { | ||
overwrite(prop, { text: newExec }, options) | ||
overwrite(prop, { text: newExec }) | ||
} else if (newExec !== prop) { | ||
if (checkIfKeyIsComponent(param)) { | ||
const { extend, ...newElem } = extendizeByKey(newExec, element, param) | ||
overwrite(prop, newElem, options) | ||
// } else { | ||
// overwrite(prop, newExec, options) | ||
if (matchesComponentNaming(param)) { | ||
const { extends: extend, ...newElem } = isContextComponent( | ||
newExec, | ||
element, | ||
param | ||
) | ||
overwrite(prop, newElem) | ||
} else { | ||
ref.__cached[param] = changes[param] = prop | ||
changes[param] = prop | ||
element[param] = newExec | ||
@@ -65,7 +64,8 @@ } | ||
export const throughExecProps = (element) => { | ||
export const throughExecProps = element => { | ||
const { __ref: ref } = element | ||
const { props } = element | ||
for (const k in props) { | ||
const isDefine = k.startsWith('is') || k.startsWith('has') || k.startsWith('use') | ||
const isDefine = | ||
k.startsWith('is') || k.startsWith('has') || k.startsWith('use') | ||
const cachedExecProp = ref.__execProps[k] | ||
@@ -81,3 +81,5 @@ if (isFunction(cachedExecProp)) { | ||
export const throughInitialDefine = (element) => { | ||
export const isPropertyInDefines = (key, element) => {} | ||
export const throughInitialDefine = element => { | ||
const { define, context, __ref: ref } = element | ||
@@ -93,8 +95,10 @@ | ||
if (isFunction(elementProp) && !isMethod(param, element) && !isVariant(param)) { | ||
if (isFunction(elementProp) && !isMethod(param, element)) { | ||
ref.__exec[param] = elementProp | ||
const execParam = elementProp = exec(elementProp, element) | ||
const execParam = (elementProp = exec(elementProp, element)) | ||
if (execParam) { | ||
elementProp = element[param] = execParam.parse ? execParam.parse() : execParam | ||
elementProp = element[param] = execParam.parse | ||
? execParam.parse() | ||
: execParam | ||
ref.__defineCache[param] = elementProp | ||
@@ -104,3 +108,8 @@ } | ||
const execParam = defineObj[param](elementProp, element, element.state, element.context) | ||
const execParam = defineObj[param]( | ||
elementProp, | ||
element, | ||
element.state, | ||
element.context | ||
) | ||
if (execParam) element[param] = execParam | ||
@@ -111,3 +120,3 @@ } | ||
export const throughUpdatedDefine = (element) => { | ||
export const throughUpdatedDefine = element => { | ||
const { context, define, __ref: ref } = element | ||
@@ -122,5 +131,14 @@ const changes = {} | ||
const execParam = ref.__exec[param] | ||
if (execParam) ref.__defineCache[param] = execParam(element, element.state, element.context) | ||
if (execParam) { | ||
ref.__defineCache[param] = execParam( | ||
element, | ||
element.state, | ||
element.context | ||
) | ||
} | ||
const cached = exec(ref.__defineCache[param], element) | ||
const newExecParam = obj[param](cached, element, element.state, element.context) | ||
const newExecParam = | ||
typeof obj[param] === 'function' | ||
? obj[param](cached, element, element.state, element.context) | ||
: undefined | ||
if (newExecParam) element[param] = newExecParam | ||
@@ -127,0 +145,0 @@ } |
@@ -5,6 +5,5 @@ 'use strict' | ||
import { set, reset } from '../set.js' | ||
import { set, reset, updateContent, removeContent } from '../set.js' | ||
import { update } from '../update.js' | ||
import { removeContent, updateContent } from '../mixins/content.js' | ||
import { | ||
@@ -31,3 +30,3 @@ call, | ||
warn | ||
} from './index.js' | ||
} from '@domql/utils/methods' | ||
@@ -62,4 +61,6 @@ export const addMethods = (element, parent, options = {}) => { | ||
} | ||
if (element.context.methods) (options.strict ? merge : overwrite)(proto, element.context.methods) | ||
if (element.context.methods) { | ||
;(options.strict ? merge : overwrite)(proto, element.context.methods) | ||
} | ||
Object.setPrototypeOf(element, proto) | ||
} |
'use strict' | ||
import { isDefined, isFunction, isObjectLike } from '@domql/utils' | ||
import { parseFilters, REGISTRY } from '../mixins/index.js' | ||
@@ -13,3 +12,3 @@ export const defineSetter = (element, key, get, set) => | ||
for (const param in element) { | ||
if (REGISTRY[param] && !parseFilters.elementKeys.includes(param)) { continue } | ||
// if (REGISTRY[param] && !parseFilters.elementKeys.includes(param)) { continue } | ||
keys.push(param) | ||
@@ -43,3 +42,5 @@ } | ||
if (excl.includes(v)) return | ||
if (isObjectLike(obj[v])) { obj[v] = parseDeep.call(obj[v], excl) } | ||
if (isObjectLike(obj[v])) { | ||
obj[v] = parseDeep.call(obj[v], excl) | ||
} | ||
} | ||
@@ -56,3 +57,3 @@ return obj | ||
} else { | ||
console.log(__ref.path) | ||
console.log(__ref?.path) | ||
const keys = element.keys() | ||
@@ -59,0 +60,0 @@ keys.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v])) |
'use strict' | ||
import { exec, isNot, isNull, isUndefined } from '@domql/utils' | ||
import { deepMerge, exec, isNot, isNull, isUndefined } from '@domql/utils' | ||
import { report } from '@domql/report' | ||
import { deepMerge } from '../utils/index.js' | ||
@@ -15,8 +14,15 @@ /** | ||
if (params) { | ||
if (props.attr) deepMerge(params, props.attr) | ||
for (const attr in params) { | ||
const val = exec(params[attr], element) | ||
const attrs = exec(params, element) | ||
if (props.attr) deepMerge(attrs, props.attr) | ||
for (const attr in attrs) { | ||
const val = exec(attrs[attr], element) | ||
// if (__attr[attr] === val) return | ||
if (val !== false && !isUndefined(val) && !isNull(val) && node.setAttribute) node.setAttribute(attr, val) | ||
else if (node.removeAttribute) node.removeAttribute(attr) | ||
if ( | ||
val !== false && | ||
!isUndefined(val) && | ||
!isNull(val) && | ||
node.setAttribute | ||
) { | ||
node.setAttribute(attr, val) | ||
} else if (node.removeAttribute) node.removeAttribute(attr) | ||
__attr[attr] = val | ||
@@ -23,0 +29,0 @@ } |
@@ -5,6 +5,11 @@ 'use strict' | ||
export const assignKeyAsClassname = (element) => { | ||
export const assignKeyAsClassname = element => { | ||
const { key } = element | ||
if (element.class === true) element.class = key | ||
else if (!element.class && typeof key === 'string' && key.charAt(0) === '_' && key.charAt(1) !== '_') { | ||
else if ( | ||
!element.class && | ||
typeof key === 'string' && | ||
key.charAt(0) === '_' && | ||
key.charAt(1) !== '_' | ||
) { | ||
element.class = key.slice(1) | ||
@@ -11,0 +16,0 @@ } |
'use strict' | ||
import { exec, isObject, deepMerge } from '@domql/utils' | ||
import { isObject, deepMerge, exec } from '@domql/utils' | ||
import { report } from '@domql/report' | ||
@@ -5,0 +5,0 @@ |
@@ -5,3 +5,2 @@ 'use strict' | ||
import { applyClasslist } from './classList.js' | ||
import { setContent } from './content.js' | ||
import { data } from './data.js' | ||
@@ -13,9 +12,5 @@ import { html } from './html.js' | ||
import { scope } from './scope.js' | ||
import { REGISTRY } from './registry.js' | ||
export { REGISTRY as registry } | ||
export { applyClasslist as classList } | ||
export { setContent as content } | ||
export { | ||
applyClasslist as classList, | ||
attr, | ||
@@ -22,0 +17,0 @@ data, |
@@ -5,3 +5,2 @@ 'use strict' | ||
import { classList } from './classList.js' | ||
import content from './content.js' | ||
import data from './data.js' | ||
@@ -19,3 +18,2 @@ import html from './html.js' | ||
html, | ||
content, | ||
data, | ||
@@ -25,13 +23,12 @@ class: classList, | ||
scope, | ||
deps: (param, el) => param || el.parent.deps, | ||
extend: {}, | ||
childExtend: {}, | ||
childExtendRecursive: {}, | ||
extends: {}, | ||
children: {}, | ||
content: {}, | ||
childExtends: {}, | ||
childExtendsRecursive: {}, | ||
props: {}, | ||
path: {}, | ||
if: {}, | ||
define: {}, | ||
transform: {}, | ||
__name: {}, | ||
@@ -41,4 +38,2 @@ __ref: {}, | ||
__text: {}, | ||
nextElement: {}, | ||
previousElement: {}, | ||
key: {}, | ||
@@ -49,50 +44,8 @@ tag: {}, | ||
node: {}, | ||
set: {}, | ||
reset: {}, | ||
update: {}, | ||
error: {}, | ||
warn: {}, | ||
call: {}, | ||
setProps: {}, | ||
remove: {}, | ||
updateContent: {}, | ||
removeContent: {}, | ||
variables: {}, | ||
lookup: {}, | ||
lookdown: {}, | ||
getRef: {}, | ||
getPath: {}, | ||
lookdownAll: {}, | ||
setNodeStyles: {}, | ||
spotByPath: {}, | ||
keys: {}, | ||
log: {}, | ||
parse: {}, | ||
parseDeep: {}, | ||
on: {}, | ||
component: {}, | ||
context: {}, | ||
$collection: {}, | ||
$stateCollection: {}, | ||
$propsCollection: {}, | ||
$setCollection: {}, | ||
$setStateCollection: {}, | ||
$setPropsCollection: {} | ||
context: {} | ||
} | ||
export default REGISTRY | ||
// List of keys for .parse() and .parseDeep() to include in the result. | ||
// Keys not in the array are excluded. | ||
export const parseFilters = { | ||
elementKeys: [ | ||
'tag', 'text', 'style', 'attr', 'class', 'state', 'props', | ||
'data', 'content', 'html', 'on', 'key', 'extend', 'childExtend', | ||
'childExtendRecursive', 'scope', 'query', | ||
'$collection', '$stateCollection', '$propsCollection' | ||
], | ||
propsKeys: ['__element', 'update'], | ||
stateKeys: [] | ||
} | ||
export const collectionFilters = ['$collection', '$stateCollection', '$propsCollection'] |
@@ -9,3 +9,3 @@ 'use strict' | ||
*/ | ||
export function scope (params, element, node) { | ||
export async function scope (params, element, node) { | ||
if (!isObject(params)) return | ||
@@ -12,0 +12,0 @@ |
'use strict' | ||
import { IGNORE_STATE_PARAMS } from '@domql/state' | ||
import { exec, isObject } from '@domql/utils' | ||
import { execPromise, isObject, STATE_METHODS } from '@domql/utils' | ||
export function state (params, element, node) { | ||
const state = exec(params, element) | ||
export async function state (params, element, node) { | ||
const state = await execPromise(params, element) | ||
if (isObject(state)) { | ||
for (const param in state) { | ||
if (IGNORE_STATE_PARAMS.includes(param)) continue | ||
if (STATE_METHODS.includes(param)) continue | ||
if (!Object.hasOwnProperty.call(state, param)) continue | ||
@@ -13,0 +12,0 @@ // element.state[param] = exec(state[param], element) |
'use strict' | ||
import { create } from '../create.js' | ||
import { | ||
exec, | ||
isString | ||
} from '@domql/utils' | ||
import { exec, isString } from '@domql/utils' | ||
@@ -13,4 +10,4 @@ /** | ||
*/ | ||
export function text (param, element, node) { | ||
let prop = exec(param, element) | ||
export async function text (param, element, node) { | ||
let prop = exec(param || element.props.text, element) | ||
if (isString(prop) && prop.includes('{{')) { | ||
@@ -26,3 +23,3 @@ prop = element.call('replaceLiteralsWithObjectFields', prop) | ||
if (element.__text.node) element.__text.node.nodeValue = prop | ||
} else create({ tag: 'string', text: prop }, element, '__text') | ||
} else await create({ tag: 'string', text: prop }, element, '__text') | ||
} | ||
@@ -29,0 +26,0 @@ } |
59
node.js
'use strict' | ||
import { exec, isFunction, isObject, isUndefined, isVariant } from '@domql/utils' | ||
import { isFunction, isMethod, isObject, isUndefined } from '@domql/utils' | ||
import { applyEventsOnNode, triggerEventOn } from '@domql/event' | ||
import { cacheNode } from '@domql/render' | ||
import { isMethod } from './methods/index.js' | ||
import { create } from './create.js' | ||
@@ -16,3 +15,4 @@ | ||
import { applyParam } from './utils/applyParam.js' | ||
import { propagateEventsFromProps } from './utils/propEvents.js' | ||
import setChildren from './children.js' | ||
import { setContent } from './set.js' | ||
// import { defineSetter } from './methods' | ||
@@ -22,6 +22,8 @@ | ||
export const createNode = async (element, options) => { | ||
export const createNode = async (element, opts) => { | ||
// create and assign a node | ||
let { node, tag, __ref: ref } = element | ||
if (!ref.__if) return element | ||
let isNewNode | ||
@@ -32,4 +34,2 @@ | ||
if (!ref.__if) return element | ||
if (tag === 'shadow') { | ||
@@ -40,7 +40,7 @@ node = element.node = element.parent.node.attachShadow({ mode: 'open' }) | ||
// trigger `on.attachNode` | ||
triggerEventOn('attachNode', element, options) | ||
await triggerEventOn('attachNode', element, opts) | ||
} | ||
// node.dataset // .key = element.key | ||
if (ENV === 'test' || ENV === 'development' || options.alowRefReference) { | ||
if (ENV === 'test' || ENV === 'development' || opts.alowRefReference) { | ||
node.ref = element | ||
@@ -51,31 +51,25 @@ if (isFunction(node.setAttribute)) node.setAttribute('key', element.key) | ||
// iterate through exec props | ||
throughExecProps(element) | ||
await throughExecProps(element) | ||
// iterate through define | ||
throughInitialDefine(element) | ||
await throughInitialDefine(element) | ||
// iterate through exec | ||
throughInitialExec(element) | ||
await throughInitialExec(element) | ||
if (element.tag !== 'string' && element.tag !== 'fragment') { | ||
propagateEventsFromProps(element) | ||
await applyEventsOnNode(element, { isNewNode, ...opts }) | ||
if (isNewNode && isObject(element.on)) { | ||
applyEventsOnNode(element, options) | ||
} | ||
} | ||
for (const param in element) { | ||
const value = element[param] | ||
if (!Object.hasOwnProperty.call(element, param)) continue | ||
if ( | ||
!Object.hasOwnProperty.call(element, param) || | ||
isUndefined(value) || | ||
isMethod(param, element) || | ||
isVariant(param) || | ||
isObject(REGISTRY[param]) | ||
) continue | ||
) { | ||
continue | ||
} | ||
const isElement = applyParam(param, element, options) | ||
const isElement = await applyParam(param, element, opts) | ||
if (isElement) { | ||
@@ -85,11 +79,12 @@ const { hasDefine, hasContextDefine } = isElement | ||
const createAsync = async () => { | ||
await create(exec(value, element), element, param, options) | ||
await create(value, element, param, opts) | ||
} | ||
if ((element.props && element.props.lazyLoad) || options.lazyLoad) { | ||
// TODO: test this with promise | ||
// handle lazy load | ||
if ((element.props && element.props.lazyLoad) || opts.lazyLoad) { | ||
window.requestAnimationFrame(async () => { | ||
await createAsync() | ||
// handle lazy load | ||
if (!options.preventUpdateListener) { | ||
triggerEventOn('lazyLoad', element, options) | ||
if (!opts.preventUpdateListener) { | ||
await triggerEventOn('lazyLoad', element, opts) | ||
} | ||
@@ -102,2 +97,10 @@ }) | ||
const content = element.children | ||
? await setChildren(element.children, element, opts) | ||
: element.content || element.content | ||
if (content) { | ||
await setContent(content, element, opts) | ||
} | ||
// node.dataset.key = key | ||
@@ -104,0 +107,0 @@ return element |
{ | ||
"name": "@domql/element", | ||
"version": "2.5.200", | ||
"version": "3.0.0", | ||
"license": "MIT", | ||
@@ -30,8 +30,9 @@ "type": "module", | ||
"dependencies": { | ||
"@domql/event": "^2.5.200", | ||
"@domql/render": "^2.5.200", | ||
"@domql/state": "^2.5.200", | ||
"@domql/utils": "^2.5.200" | ||
"@domql/event": "^3.0.0", | ||
"@domql/render": "^3.0.0", | ||
"@domql/report": "^3.0.0", | ||
"@domql/state": "^3.0.0", | ||
"@domql/utils": "^3.0.0" | ||
}, | ||
"gitHead": "0afb63ec375f0526f47ff300885de393138b01e8", | ||
"gitHead": "bcbdc271a602b958de6a60ab387ea7715a935dc1", | ||
"devDependencies": { | ||
@@ -38,0 +39,0 @@ "@babel/core": "^7.12.0" |
@@ -11,3 +11,3 @@ # DOMQL Element | ||
const Poster = { | ||
extend: [Link, Img], | ||
extends: [Link, Img], | ||
props: { | ||
@@ -14,0 +14,0 @@ boxSize: [100, 200], |
170
set.js
'use strict' | ||
import { deepContains, setContentKey } from '@domql/utils' | ||
import { OPTIONS } from './cache/options.js' | ||
import { deepContains, execPromise, isFunction, OPTIONS } from '@domql/utils' | ||
import { create } from './create.js' | ||
import { registry } from './mixins/index.js' | ||
import { removeContent } from './mixins/content.js' | ||
import { triggerEventOn, triggerEventOnUpdate } from '@domql/event' | ||
export const resetElement = async (params, element, options) => { | ||
if (!options.preventRemove) removeContent(element, options) | ||
export const setContentKey = (element, opts = {}) => { | ||
const { __ref: ref } = element | ||
await create(params, element, ref.contentElementKey || 'content', { | ||
ignoreChildExtend: true, | ||
...registry.defaultOptions, | ||
...OPTIONS.create, | ||
...options | ||
}) | ||
const contentElementKey = opts.contentElementKey | ||
if (!ref.contentElementKey || contentElementKey !== ref.contentElementKey) { | ||
ref.contentElementKey = contentElementKey || 'content' | ||
} | ||
return ref.contentElementKey | ||
} | ||
export const reset = (options) => { | ||
export const reset = async options => { | ||
const element = this | ||
create(element, element.parent, undefined, { | ||
ignoreChildExtend: true, | ||
...registry.defaultOptions, | ||
await create(element, element.parent, undefined, { | ||
ignoreChildExtends: true, | ||
...OPTIONS.defaultOptions, | ||
...OPTIONS.create, | ||
@@ -32,2 +26,77 @@ ...options | ||
export const resetContent = async (params, element, opts) => { | ||
const contentElementKey = setContentKey(element, opts) | ||
if (element[contentElementKey]?.node) removeContent(element, opts) | ||
const contentElem = await create( | ||
params, | ||
element, | ||
contentElementKey || 'content', | ||
{ | ||
ignoreChildExtends: true, | ||
...OPTIONS.defaultOptions, | ||
...OPTIONS.create, | ||
...opts | ||
} | ||
) | ||
if (contentElementKey !== 'content') opts.contentElementKey = 'content' // reset to default | ||
return contentElem | ||
} | ||
export const updateContent = async function (params, opts) { | ||
const element = this | ||
const contentElementKey = setContentKey(element, opts) | ||
if (!element[contentElementKey]) return | ||
if (element[contentElementKey].update) { | ||
await element[contentElementKey].update(params, opts) | ||
} | ||
} | ||
/** | ||
* Appends anything as content | ||
* an original one as a child | ||
*/ | ||
export async function setContent (param, element, opts) { | ||
const content = await execPromise(param, element) | ||
if (content && element) { | ||
set.call(element, content, opts) | ||
} | ||
} | ||
export const removeContent = function (el, opts = {}) { | ||
const element = el || this | ||
const contentElementKey = setContentKey(element, opts) | ||
if (opts.contentElementKey !== 'content') { | ||
opts.contentElementKey = 'content' | ||
} | ||
const content = element[contentElementKey] | ||
if (!content) return | ||
// Handle fragment removal | ||
if (content.tag === 'fragment' && content.__ref?.__children) { | ||
// Remove all child nodes | ||
content.__ref.__children.forEach(key => { | ||
const child = content[key] | ||
if (child.node && child.node.parentNode) { | ||
child.node.parentNode.removeChild(child.node) | ||
} | ||
if (isFunction(child.remove)) { | ||
child.remove() | ||
} | ||
}) | ||
} else { | ||
// Handle regular element removal | ||
if (content.node && content.node.parentNode) { | ||
content.node.parentNode.removeChild(content.node) | ||
} | ||
if (isFunction(content.remove)) { | ||
content.remove() | ||
} | ||
} | ||
delete element[contentElementKey] | ||
} | ||
export const set = async function (params, options = {}, el) { | ||
@@ -37,26 +106,45 @@ const element = el || this | ||
const content = setContentKey(element, options) | ||
const contentElementKey = setContentKey(element, options) | ||
const content = element[contentElementKey] | ||
const __contentRef = content && content.__ref | ||
const lazyLoad = element.props && element.props.lazyLoad | ||
const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection | ||
if (options.preventContentUpdate === true && !hasCollection) return | ||
const hasChildren = element.children | ||
if (options.preventContentUpdate === true && !hasChildren) return | ||
if (ref.__noCollectionDifference || (__contentRef && __contentRef.__cached && deepContains(params, content))) { | ||
const childHasChanged = !ref.__noChildrenDifference | ||
const childrenIsDifferentFromCache = | ||
childHasChanged && | ||
__contentRef && | ||
Object.keys(params).length === Object.keys(content).length && | ||
deepContains(params, content) | ||
if (content?.update && !childHasChanged && !childrenIsDifferentFromCache) { | ||
if (!options.preventBeforeUpdateListener && !options.preventListeners) { | ||
const beforeUpdateReturns = await triggerEventOnUpdate('beforeUpdate', params, element, options) | ||
const beforeUpdateReturns = await triggerEventOnUpdate( | ||
'beforeUpdate', | ||
params, | ||
element, | ||
options | ||
) | ||
if (beforeUpdateReturns === false) return element | ||
} | ||
if (content?.update) content.update() | ||
if (!options.preventUpdateListener) await triggerEventOn('update', element, options) | ||
await content.update(params) | ||
if (!options.preventUpdateListener && !options.preventListeners) { | ||
await triggerEventOn('update', element, options) | ||
} | ||
return | ||
} | ||
if (params) { | ||
let { childExtend, props } = params | ||
if (!props) props = params.props = {} | ||
if (!childExtend && element.childExtend) { | ||
params.childExtend = element.childExtend | ||
props.ignoreChildExtend = true | ||
if (!params) return element | ||
let { childExtends, props, tag } = params | ||
if (!props) props = params.props = {} | ||
if (tag === 'fragment') { | ||
if (!childExtends && element.childExtends) { | ||
params.childExtends = element.childExtends | ||
props.ignoreChildExtends = true | ||
} | ||
if (!props?.childProps && element.props?.childProps) { | ||
@@ -66,17 +154,17 @@ props.childProps = element.props.childProps | ||
} | ||
} | ||
if (lazyLoad) { | ||
window.requestAnimationFrame(async () => { | ||
await resetElement(params, element, options) | ||
// handle lazy load | ||
if (!options.preventUpdateListener) { | ||
triggerEventOn('lazyLoad', element, options) | ||
} | ||
}) | ||
} else await resetElement(params, element, options) | ||
if (lazyLoad) { | ||
window.requestAnimationFrame(async () => { | ||
await resetContent(params, element, options) | ||
// handle lazy load | ||
if (!options.preventUpdateListener) { | ||
await triggerEventOn('lazyLoad', element, options) | ||
} | ||
}) | ||
} else { | ||
await resetContent(params, element, options) | ||
} | ||
return element | ||
} | ||
export default set |
256
update.js
@@ -13,24 +13,28 @@ 'use strict' | ||
merge, | ||
isVariant, | ||
overwriteDeep, | ||
createSnapshotId, | ||
deepClone | ||
deepClone, | ||
propertizeElement, | ||
isMethod, | ||
findInheritedState, | ||
deepMerge, | ||
OPTIONS, | ||
updateProps, | ||
captureSnapshot | ||
} from '@domql/utils' | ||
import { applyEvent, triggerEventOn, triggerEventOnUpdate } from '@domql/event' | ||
import { isMethod } from './methods/index.js' | ||
import { updateProps } from './props/index.js' | ||
import { createState, findInheritedState } from '@domql/state' | ||
import { createState } from '@domql/state' | ||
import { create } from './create.js' | ||
import { throughExecProps, throughUpdatedDefine, throughUpdatedExec } from './iterate.js' | ||
import { | ||
throughExecProps, | ||
throughUpdatedDefine, | ||
throughUpdatedExec | ||
} from './iterate.js' | ||
import { REGISTRY } from './mixins/index.js' | ||
import { applyParam } from './utils/applyParam.js' | ||
import { OPTIONS } from './cache/options.js' | ||
import { METHODS_EXL, deepMerge } from './utils/index.js' // old utils (current) | ||
import { METHODS_EXL } from './utils/index.js' // old utils (current) | ||
import { setContent } from './set.js' | ||
import setChildren from './children.js' | ||
const snapshot = { | ||
snapshotId: createSnapshotId | ||
} | ||
const UPDATE_DEFAULT_OPTIONS = { | ||
@@ -42,3 +46,3 @@ stackChanges: false, | ||
calleeElement: false, | ||
excludes: METHODS_EXL | ||
exclude: METHODS_EXL | ||
} | ||
@@ -48,18 +52,35 @@ | ||
const calleeElementCache = opts?.calleeElement | ||
const options = deepClone(isObject(opts) ? deepMerge(opts, UPDATE_DEFAULT_OPTIONS) : UPDATE_DEFAULT_OPTIONS, { exclude: ['calleeElement'] }) | ||
const options = deepClone( | ||
isObject(opts) | ||
? deepMerge(opts, UPDATE_DEFAULT_OPTIONS) | ||
: UPDATE_DEFAULT_OPTIONS, | ||
{ exclude: ['calleeElement'] } | ||
) | ||
options.calleeElement = calleeElementCache | ||
const element = this | ||
const { parent, node, key } = element | ||
const { excludes, preventInheritAtCurrentState } = options | ||
let ref = element.__ref | ||
if (!ref) ref = element.__ref = {} | ||
const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(element, options) | ||
const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot( | ||
element, | ||
options | ||
) | ||
if (snapshotHasUpdated) return | ||
if (!options.preventListeners) await triggerEventOnUpdate('startUpdate', params, element, options) | ||
if (!options.preventListeners) { | ||
await triggerEventOnUpdate('startUpdate', params, element, options) | ||
} | ||
if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element) return | ||
if (!excludes) merge(options, UPDATE_DEFAULT_OPTIONS) | ||
const { parent, node, key } = element | ||
const { exclude, preventInheritAtCurrentState } = options | ||
if ( | ||
preventInheritAtCurrentState && | ||
preventInheritAtCurrentState.__element === element | ||
) { | ||
return | ||
} | ||
if (!exclude) merge(options, UPDATE_DEFAULT_OPTIONS) | ||
if (isString(params) || isNumber(params)) { | ||
@@ -69,11 +90,14 @@ params = { text: params } | ||
params = propertizeElement(params) | ||
const inheritState = await inheritStateUpdates(element, options) | ||
if (inheritState === false) return | ||
const ifFails = checkIfOnUpdate(element, parent, options) | ||
const ifFails = await checkIfOnUpdate(element, parent, options) | ||
if (ifFails) return | ||
if (ref.__if && !options.preventPropsUpdate) { | ||
const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps) | ||
const hasFunctionInProps = ref.__props.filter(v => isFunction(v)) | ||
const hasParentProps = | ||
parent.props && (parent.props[key] || parent.props.childProps) | ||
const hasFunctionInProps = ref.__propsStack.filter(v => isFunction(v)) | ||
const props = params.props || hasParentProps || hasFunctionInProps.length | ||
@@ -84,3 +108,8 @@ if (props) updateProps(props, element, parent) | ||
if (!options.preventBeforeUpdateListener && !options.preventListeners) { | ||
const beforeUpdateReturns = await triggerEventOnUpdate('beforeUpdate', params, element, options) | ||
const beforeUpdateReturns = await triggerEventOnUpdate( | ||
'beforeUpdate', | ||
params, | ||
element, | ||
options | ||
) | ||
if (beforeUpdateReturns === false) return element | ||
@@ -90,3 +119,3 @@ } | ||
// apply new updates | ||
overwriteDeep(element, params, { exclude: METHODS_EXL }) | ||
overwriteDeep(element, params) | ||
@@ -99,3 +128,3 @@ // exec updates | ||
if (!options.isForced && !options.preventListeners) { | ||
triggerEventOn('beforeClassAssign', element, options) | ||
await triggerEventOn('beforeClassAssign', element, options) | ||
} | ||
@@ -110,10 +139,21 @@ | ||
const { | ||
preventUpdate, preventDefineUpdate, preventContentUpdate, preventStateUpdate, | ||
preventRecursive, preventUpdateListener, preventUpdateAfter, preventUpdateAfterCount | ||
preventUpdate, | ||
preventDefineUpdate, | ||
preventContentUpdate, | ||
preventStateUpdate, | ||
preventRecursive, | ||
preventUpdateListener, | ||
preventUpdateAfter, | ||
preventUpdateAfterCount | ||
} = options | ||
if (preventUpdateAfter) { | ||
if (isNumber(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount) return | ||
else if (options.preventUpdateAfterCount === undefined) options.preventUpdateAfterCount = 1 | ||
else options.preventUpdateAfterCount++ | ||
if ( | ||
isNumber(preventUpdateAfterCount) && | ||
preventUpdateAfter <= preventUpdateAfterCount | ||
) { | ||
return | ||
} else if (options.preventUpdateAfterCount === undefined) { | ||
options.preventUpdateAfterCount = 1 | ||
} else options.preventUpdateAfterCount++ | ||
} | ||
@@ -126,7 +166,7 @@ | ||
const isInPreventUpdate = isArray(preventUpdate) && preventUpdate.includes(param) | ||
const isInPreventDefineUpdate = isArray(preventDefineUpdate) && preventDefineUpdate.includes(param) | ||
const isInPreventUpdate = | ||
isArray(preventUpdate) && preventUpdate.includes(param) | ||
const isInPreventDefineUpdate = | ||
isArray(preventDefineUpdate) && preventDefineUpdate.includes(param) | ||
const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection | ||
if ( | ||
@@ -138,13 +178,16 @@ isUndefined(prop) || | ||
preventDefineUpdate === param || | ||
(preventContentUpdate && param === 'content' && !hasCollection) || | ||
(preventStateUpdate && param) === 'state' || | ||
isMethod(param, element) || isObject(REGISTRY[param]) || isVariant(param) | ||
) continue | ||
isMethod(param, element) || | ||
isObject(REGISTRY[param]) | ||
) { | ||
continue | ||
} | ||
if (preventStateUpdate === 'once') options.preventStateUpdate = false | ||
const isElement = applyParam(param, element, options) | ||
const isElement = await applyParam(param, element, options) | ||
if (isElement) { | ||
const { hasDefine, hasContextDefine } = isElement | ||
const canUpdate = isObject(prop) && !hasDefine && !hasContextDefine && !preventRecursive | ||
const canUpdate = | ||
isObject(prop) && !hasDefine && !hasContextDefine && !preventRecursive | ||
if (!canUpdate) continue | ||
@@ -158,46 +201,50 @@ | ||
const childUpdateCall = () => update.call(prop, params[prop], { | ||
...options, | ||
currentSnapshot: snapshotOnCallee, | ||
calleeElement | ||
}) | ||
const childUpdateCall = async () => | ||
await update.call(prop, params[prop], { | ||
...options, | ||
currentSnapshot: snapshotOnCallee, | ||
calleeElement | ||
}) | ||
lazyLoad ? window.requestAnimationFrame(() => { // eslint-disable-line | ||
childUpdateCall() | ||
// handle lazy load | ||
if (!options.preventUpdateListener) { | ||
triggerEventOn('lazyLoad', element, options) | ||
} | ||
}) : childUpdateCall() | ||
if (lazyLoad) { | ||
window.requestAnimationFrame(async () => { | ||
// eslint-disable-line | ||
await childUpdateCall() | ||
// handle lazy load | ||
if (!options.preventUpdateListener) { | ||
await triggerEventOn('lazyLoad', element, options) | ||
} | ||
}) | ||
} else await childUpdateCall() | ||
} | ||
} | ||
if (!preventUpdateListener) triggerEventOn('update', element, options) | ||
} | ||
if (!preventContentUpdate) { | ||
const children = params.children || element.children | ||
const content = children | ||
? await setChildren(children, element, opts) | ||
: element.children || params.content | ||
const captureSnapshot = (element, options) => { | ||
const ref = element.__ref | ||
const { currentSnapshot, calleeElement } = options | ||
const isCallee = calleeElement === element | ||
if (!calleeElement || isCallee) { | ||
const createdStanpshot = snapshot.snapshotId() | ||
ref.__currentSnapshot = createdStanpshot | ||
return [createdStanpshot, element] | ||
if (content) { | ||
await setContent(content, element, options) | ||
} | ||
} | ||
const snapshotOnCallee = calleeElement.__ref.__currentSnapshot | ||
if (currentSnapshot < snapshotOnCallee) { | ||
return [snapshotOnCallee, calleeElement, true] | ||
if (!preventUpdateListener) { | ||
await triggerEventOn('update', element, options) | ||
} | ||
return [snapshotOnCallee, calleeElement] | ||
} | ||
const checkIfOnUpdate = (element, parent, options) => { | ||
if ((!isFunction(element.if) && !isFunction(element.props?.if)) || !parent) return | ||
const checkIfOnUpdate = async (element, parent, options) => { | ||
if ((!isFunction(element.if) && !isFunction(element.props?.if)) || !parent) { | ||
return | ||
} | ||
const ref = element.__ref | ||
const ifPassed = (element.if || element.props?.if)(element, element.state, element.context, options) | ||
const ifPassed = (element.if || element.props?.if)( | ||
element, | ||
element.state, | ||
element.context, | ||
options | ||
) | ||
const itWasFalse = ref.__if !== true | ||
@@ -210,3 +257,3 @@ | ||
delete element.__text | ||
delete element.extend | ||
delete element.extends | ||
if (!ref.__hasRootState) { | ||
@@ -229,5 +276,7 @@ delete element.state | ||
if (element.$collection || element.$stateCollection || element.$propsCollection) { | ||
if (element.children) { | ||
element.removeContent() | ||
} else if (element[contentKey]?.parseDeep) element[contentKey] = element[contentKey].parseDeep() | ||
} else if (element[contentKey]?.parseDeep) { | ||
element[contentKey] = element[contentKey].parseDeep() | ||
} | ||
@@ -250,6 +299,20 @@ const previousElement = element.previousElement() | ||
delete element.parent | ||
const createdElement = create(element, parent, element.key, OPTIONS.create, attachOptions) | ||
const createdElement = await create( | ||
element, | ||
parent, | ||
element.key, | ||
OPTIONS.create, | ||
attachOptions | ||
) | ||
// check preventUpdate for an array (Line: 87) | ||
if (options.preventUpdate !== true && element.on && isFunction(element.on.update)) { | ||
applyEvent(element.on.update, createdElement, createdElement.state) | ||
if ( | ||
options.preventUpdate !== true && | ||
element.on && | ||
isFunction(element.on.update) | ||
) { | ||
await applyEvent( | ||
element.on.update, | ||
createdElement, | ||
createdElement.state | ||
) | ||
} | ||
@@ -265,3 +328,3 @@ return createdElement | ||
/** | ||
* Inherit state updates for a given element based on the specified options. | ||
* Inherit state updates for a given element when state is inherited. | ||
* | ||
@@ -283,3 +346,4 @@ * @param {Object} element - The element to inherit state updates for. | ||
const { parent, state } = element | ||
const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = options | ||
const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = | ||
options | ||
@@ -295,6 +359,12 @@ if (preventUpdateTriggerStateUpdate) return | ||
// If state is function, decide execution and apply setting a current state | ||
const shouldForceFunctionState = isFunction(stateKey) && !isHoisted && execStateFunction | ||
const shouldForceFunctionState = | ||
isFunction(stateKey) && !isHoisted && execStateFunction | ||
if (shouldForceFunctionState) { | ||
const execState = exec(stateKey, element) | ||
state.set(execState, { ...options, preventUpdate: true, preventStateUpdateListener: false, updatedByStateFunction: true }) | ||
state.set(execState, { | ||
...options, | ||
preventUpdate: true, | ||
preventStateUpdateListener: false, | ||
updatedByStateFunction: true | ||
}) | ||
return | ||
@@ -309,3 +379,8 @@ } | ||
if (!options.preventBeforeStateUpdateListener && !options.preventListeners) { | ||
const initStateReturns = await triggerEventOnUpdate('beforeStateUpdate', keyInParentState, element, options) | ||
const initStateReturns = await triggerEventOnUpdate( | ||
'beforeStateUpdate', | ||
keyInParentState, | ||
element, | ||
options | ||
) | ||
if (initStateReturns === false) return element | ||
@@ -315,13 +390,18 @@ } | ||
// Recreate the state again | ||
const newState = createStateUpdate(element, parent, options) | ||
const newState = await createStateUpdate(element, parent, options) | ||
// Trigger on.stateUpdate event | ||
if (!options.preventStateUpdateListener && !options.preventListeners) { | ||
await triggerEventOnUpdate('stateUpdate', newState.parse(), element, options) | ||
await triggerEventOnUpdate( | ||
'stateUpdate', | ||
newState.parse(), | ||
element, | ||
options | ||
) | ||
} | ||
} | ||
const createStateUpdate = (element, parent, options) => { | ||
const createStateUpdate = async (element, parent, options) => { | ||
const __stateChildren = element.state.__children | ||
const newState = createState(element, parent) | ||
const newState = await createState(element, parent) | ||
element.state = newState | ||
@@ -328,0 +408,0 @@ for (const child in __stateChildren) { |
@@ -6,3 +6,3 @@ 'use strict' | ||
export const applyParam = (param, element, options) => { | ||
export const applyParam = async (param, element, options) => { | ||
const { node, context, __ref: ref } = element | ||
@@ -14,3 +14,4 @@ const prop = element[param] | ||
const DOMQLProperty = REGISTRY[param] | ||
const DOMQLPropertyFromContext = context && context.registry && context.registry[param] | ||
const DOMQLPropertyFromContext = | ||
context && context.registry && context.registry[param] | ||
const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty | ||
@@ -23,7 +24,9 @@ | ||
const hasOnlyUpdate = onlyUpdate ? (onlyUpdate === param || element.lookup(onlyUpdate)) : true | ||
const hasOnlyUpdate = onlyUpdate | ||
? onlyUpdate === param || element.lookup(onlyUpdate) | ||
: true | ||
if (isGlobalTransformer && !hasContextDefine && hasOnlyUpdate) { | ||
if (isFunction(isGlobalTransformer)) { | ||
isGlobalTransformer(prop, element, node, options) | ||
await isGlobalTransformer(prop, element, node, options) | ||
return | ||
@@ -30,0 +33,0 @@ } |
'use strict' | ||
export * from './object.js' | ||
export * from './extendUtils.js' | ||
export * from './component.js' | ||
export const METHODS_EXL = [] // this is needed because of unit tests |
'use strict' | ||
import { exec, isFunction, isObject, isUndefined } from '@domql/utils' | ||
import { | ||
exec, | ||
initProps, | ||
isFunction, | ||
isMethod, | ||
isObject, | ||
isUndefined | ||
} from '@domql/utils' | ||
import { create } from '..' | ||
import { REGISTRY } from '../mixins/index.js' | ||
import { applyVariant, isVariant } from '.' | ||
import { isMethod } from '../methods' | ||
import { addMethods } from '../methods/set' | ||
import { createState } from '@domql/state' | ||
import { detectTag } from '@domql/render' | ||
import { createProps } from '../props' | ||
import { throughInitialDefine, throughInitialExec } from '../iterate' | ||
@@ -27,6 +31,4 @@ | ||
// TODO: do we need this at all? | ||
// if (!element.transform) element.transform = {} | ||
// enable CACHING | ||
if (!ref.__cached) ref.__cached = {} | ||
if (!ref.__defineCache) ref.__defineCache = {} | ||
@@ -72,6 +74,7 @@ | ||
if (element.node && ref.__if) { parent[key || element.key] = element } // Borrowed from assignNode() | ||
if (element.node && ref.__if) { | ||
parent[key || element.key] = element | ||
} // Borrowed from assignNode() | ||
createProps(element, parent, options) | ||
applyVariant(element, parent) | ||
initProps(element, parent, options) | ||
@@ -87,9 +90,12 @@ if (element.tag !== 'string' && element.tag !== 'fragment') { | ||
isMethod(param, element) || | ||
isObject(REGISTRY[param]) || | ||
isVariant(param) | ||
) continue | ||
isObject(REGISTRY[param]) | ||
) { | ||
continue | ||
} | ||
const hasDefine = element.define && element.define[param] | ||
const contextHasDefine = element.context && element.context.define && | ||
element.context.define[param] | ||
const contextHasDefine = | ||
element.context && | ||
element.context.define && | ||
element.context.define[param] | ||
const optionsHasDefine = options.define && options.define[param] | ||
@@ -99,3 +105,8 @@ | ||
continue | ||
} else if (element[param] && !hasDefine && !optionsHasDefine && !contextHasDefine) { | ||
} else if ( | ||
element[param] && | ||
!hasDefine && | ||
!optionsHasDefine && | ||
!contextHasDefine | ||
) { | ||
create(exec(prop, element), element, param, options) | ||
@@ -111,3 +122,3 @@ } | ||
// added by createProps | ||
// added by initProps | ||
if (element.props) { | ||
@@ -114,0 +125,0 @@ delete element.props.update |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
319264
18.24%118
2.61%9017
21.08%5
25%39
550%1
Infinity%+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
- Removed
- Removed
- Removed
- Removed
- Removed
Updated
Updated
Updated
Updated