New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@domql/element

Package Overview
Dependencies
Maintainers
0
Versions
222
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@domql/element - npm Package Compare versions

Comparing version

to
3.0.0

__tests__/checkIfOnUpdate.test.js

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 @@ }

'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],

'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

@@ -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