@domql/element 2.4.10 → 2.4.12

package/applyParam.js

@@ -4,7 +4,7 @@ import { isFunction } from '@domql/utils'
 import { registry } from './mixins'
 
 export const applyParam = (param, element, options) => {
-  const { node, context } = element
+  const { node, context, __ref: ref } = element
   const prop = element[param]
 
   const DOMQLProperty = registry[param]
@@ -14,6 +14,8 @@ export const applyParam = (param, element, options) => {
   const hasDefine = element.define && element.define[param]
   const hasContextDefine = context && context.define && context.define[param]
 
+  if (!ref.__if) return
+
   if (isGlobalTransformer && !hasContextDefine) {
     if (isFunction(isGlobalTransformer)) {
       isGlobalTransformer(prop, element, node, options)

package/create.js

@@ -1,8 +1,6 @@
 'use strict'
 
 import createNode from './node'
-
-import { isObject, isFunction, isString, exec, is, isNode, isUndefined, createKey } from '@domql/utils'
 import { ROOT } from './tree'
 import { TAGS } from '@domql/registry'
 import { triggerEventOn } from '@domql/event'
@@ -15,9 +13,20 @@ import { createProps } from './props'
 import { applyExtend } from './extend'
 import { registry } from './mixins'
 import { addMethods } from './methods/set'
-import { assignClass } from './mixins/classList'
+import { assignKeyAsClassname } from './mixins/classList'
 import { throughInitialExec } from './iterate'
 
+import {
+  isObject,
+  isFunction,
+  isString,
+  exec,
+  is,
+  isNode,
+  isUndefined,
+  generateKey
+} from '@domql/utils'
+
 import OPTIONS from './cache/options'
 
 import {
@@ -34,123 +43,155 @@ const ENV = process.env.NODE_ENV
  * Creating a domQL element using passed parameters
  */
 const create = (element, parent, key, options = OPTIONS.create || {}) => {
-  if (options && !OPTIONS.create) {
-    OPTIONS.create = options
-    OPTIONS.create.context = element.context || options.context
-  }
-
-  // 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)
-    }
-    element = {}
-  }
-  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) element = { text: true }
-
-  // if element is extend
-  if (element.__hash) {
-    element = { extend: element }
-  }
-
-  // if PARENT is not given
-  if (!parent) parent = ROOT
-  if (isNode(parent)) {
-    parent = ROOT[`${key}_parent`] = { key: ':root', node: parent }
-  }
+  cacheOptions(element, options)
 
   // if element is STRING
   if (checkIfPrimitive(element)) {
-    element = applyValueAsText(element, parent, key)
-  }
-
-  // define KEY
-  const assignedKey = (key || element.key || createKey()).toString()
-
-  if (checkIfKeyIsComponent(assignedKey)) {
-    element = applyKeyComponentAsExtend(element, parent, assignedKey)
+    return applyValueAsText(element, parent, key)
   }
 
-  // TODO: move as define plugins
-  // Responsive rendering
-  if (checkIfMedia(assignedKey)) {
-    element = applyMediaProps(element, parent, assignedKey)
-  }
+  element = redefineElement(element, parent, key, options)
+  parent = redefineParent(element, parent, key)
+  key = createKey(element, parent, key)
 
-  if (element.__ref) element.__ref.origin = element
-  else element.__ref = { origin: element } // eslint-disable-line 
-  const __ref = element.__ref
+  const ref = addRef(element, parent, key)
 
   // assign context
   applyContext(element, parent, options)
-  const { context } = element
 
-  if (context && context.components) {
-    applyComponentFromContext(element, parent, options)
-  }
+  applyComponentFromContext(element, parent, options)
 
   // create EXTEND inheritance
   applyExtend(element, parent, options)
 
   // create and assign a KEY
-  element.key = assignedKey
+  element.key = key
 
   // Only resolve extends, skip everything else
   if (options.onlyResolveExtends) {
     return onlyResolveExtends(element, parent, options)
   }
 
-  if (Object.keys(options).length) {
-    registry.defaultOptions = options
-    if (options.ignoreChildExtend) delete options.ignoreChildExtend
-  }
+  replaceOptions(element, parent, options)
 
   addCaching(element, parent)
 
   addMethods(element, parent)
 
-  // enable STATE
-  element.state = createState(element, parent)
+  createState(element, parent)
 
-  // don't render IF in condition
-  checkIf(element, parent)
+  createIfConditionFlag(element, parent)
 
   // if it already HAS a NODE
-  if (element.node && __ref.__if) { // TODO: check on if
-    return assignNode(element, parent, assignedKey)
+  if (element.node && ref.__if) {
+    return assignNode(element, parent, key)
   }
 
   // apply props settings
-  if (__ref.__if) createProps(element, parent)
+  createProps(element, parent)
 
   // apply variants
   applyVariant(element, parent)
 
-  // run `on.init`
-  const initReturns = triggerEventOn('init', element, options)
-  if (initReturns === false) return element
+  const onInit = triggerEventOn('init', element, options)
+  if (onInit === false) return element
 
-  // run `on.beforeClassAssign`
   triggerEventOn('beforeClassAssign', element, options)
 
   // generate a CLASS name
-  assignClass(element)
+  assignKeyAsClassname(element)
 
   renderElement(element, parent, options)
 
-  if (parent.__ref && parent.__ref.__children) parent.__ref.__children.push(element.key)
+  addElementIntoParentChildren(element, parent)
 
   triggerEventOn('complete', element, options)
 
   return element
 }
 
+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 (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) => {
+  if (options && !OPTIONS.create) {
+    OPTIONS.create = options
+    OPTIONS.create.context = element.context || options.context
+  }
+}
+
+const createKey = (element, parent, key) => {
+  return (
+    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 replaceOptions = (element, parent, options) => {
+  if (Object.keys(options).length) {
+    registry.defaultOptions = options
+    if (options.ignoreChildExtend) delete options.ignoreChildExtend
+  }
+}
+
+const addElementIntoParentChildren = (element, parent) => {
+  if (parent.__ref && parent.__ref.__children) parent.__ref.__children.push(element.key)
+}
+
 const renderElement = (element, parent, options) => {
   const { __ref: ref, key } = element
 
@@ -188,7 +229,7 @@ const applyContext = (element, parent, options) => {
   if (!element.context) element.context = parent.context || options.context || ROOT.context
 }
 
-const checkIf = (element, parent) => {
+const createIfConditionFlag = (element, parent) => {
   const { __ref: ref } = element
 
   if (isFunction(element.if)) {
@@ -249,7 +290,6 @@ const onlyResolveExtends = (element, parent, options) => {
   if (!__ref.__attr) __ref.__attr = {}
 
   if (!element.props) element.props = {}
-  if (!element.state) element.state = element.parent.state || {}
 
   createState(element, parent, { skipApplyMethods: true, ...options })
   createProps(element, parent)
@@ -278,7 +318,6 @@ const onlyResolveExtends = (element, parent, options) => {
     }
   }
 
-  delete element.parent
   delete element.update
   delete element.__element
 
@@ -287,8 +326,6 @@ const onlyResolveExtends = (element, parent, options) => {
   delete element.props.__element
 
   // added by createState
-  delete element.state.__element
-  delete element.state.__element
   if (!options.keepRef) delete element.__ref
 
   return element

package/dist/cjs/applyParam.js

@@ -24,13 +24,15 @@ module.exports = __toCommonJS(applyParam_exports);
 var import_utils = require("@domql/utils");
 var import_mixins = require("./mixins");
 const applyParam = (param, element, options) => {
-  const { node, context } = element;
+  const { node, context, __ref: ref } = element;
   const prop = element[param];
   const DOMQLProperty = import_mixins.registry[param];
   const DOMQLPropertyFromContext = context && context.registry && context.registry[param];
   const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty;
   const hasDefine = element.define && element.define[param];
   const hasContextDefine = context && context.define && context.define[param];
+  if (!ref.__if)
+    return;
   if (isGlobalTransformer && !hasContextDefine) {
     if ((0, import_utils.isFunction)(isGlobalTransformer)) {
       isGlobalTransformer(prop, element, node, options);

package/dist/cjs/create.js

@@ -32,7 +32,6 @@ __export(create_exports, {
 });
 module.exports = __toCommonJS(create_exports);
 var import_node = __toESM(require("./node"), 1);
-var import_utils = require("@domql/utils");
 var import_tree = require("./tree");
 var import_registry = require("@domql/registry");
 var import_event = require("@domql/event");
@@ -46,19 +45,52 @@ var import_mixins = require("./mixins");
 var import_set = require("./methods/set");
 var import_classList = require("./mixins/classList");
 var import_iterate = require("./iterate");
+var import_utils = require("@domql/utils");
 var import_options = __toESM(require("./cache/options"), 1);
 var import_component = require("./utils/component");
 const ENV = "development";
 const create = (element, parent, key, options = import_options.default.create || {}) => {
-  if (options && !import_options.default.create) {
-    import_options.default.create = options;
-    import_options.default.create.context = element.context || options.context;
+  cacheOptions(element, options);
+  if (checkIfPrimitive(element)) {
+    return applyValueAsText(element, parent, key);
+  }
+  element = redefineElement(element, parent, key, options);
+  parent = redefineParent(element, parent, key);
+  key = createKey(element, parent, key);
+  const ref = addRef(element, parent, key);
+  applyContext(element, parent, options);
+  (0, import_component.applyComponentFromContext)(element, parent, options);
+  (0, import_extend.applyExtend)(element, parent, options);
+  element.key = key;
+  if (options.onlyResolveExtends) {
+    return onlyResolveExtends(element, parent, options);
+  }
+  replaceOptions(element, parent, options);
+  addCaching(element, parent);
+  (0, import_set.addMethods)(element, parent);
+  (0, import_state.createState)(element, parent);
+  createIfConditionFlag(element, parent);
+  if (element.node && ref.__if) {
+    return (0, import_render.assignNode)(element, parent, key);
   }
+  (0, import_props.createProps)(element, parent);
+  (0, import_component.applyVariant)(element, parent);
+  const onInit = (0, import_event.triggerEventOn)("init", element, options);
+  if (onInit === false)
+    return element;
+  (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
+  (0, import_classList.assignKeyAsClassname)(element);
+  renderElement(element, parent, options);
+  addElementIntoParentChildren(element, parent);
+  (0, import_event.triggerEventOn)("complete", element, options);
+  return element;
+};
+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);
     }
-    element = {};
+    return {};
   }
   if ((0, import_utils.isString)(key) && key.slice(0, 2 === "__")) {
     if (ENV === "test" || ENV === "development") {
@@ -68,65 +100,58 @@ const create = (element, parent, key, options = import_options.default.create ||
   if (element === null)
     return;
   if (element === true)
-    element = { text: true };
+    return { text: true };
   if (element.__hash) {
-    element = { extend: element };
+    return { extend: element };
   }
-  if (!parent)
-    parent = import_tree.ROOT;
-  if ((0, import_utils.isNode)(parent)) {
-    parent = import_tree.ROOT[`${key}_parent`] = { key: ":root", node: parent };
+  return element;
+};
+const redefineElement = (element, parent, key, options) => {
+  const elementWrapper = createBasedOnType(element, parent, key, options);
+  if ((0, import_component.checkIfKeyIsComponent)(key)) {
+    return (0, import_component.applyKeyComponentAsExtend)(elementWrapper, parent, key);
   }
-  if (checkIfPrimitive(element)) {
-    element = applyValueAsText(element, parent, key);
+  if (checkIfMedia(key)) {
+    return applyMediaProps(elementWrapper, parent, key);
   }
-  const assignedKey = (key || element.key || (0, import_utils.createKey)()).toString();
-  if ((0, import_component.checkIfKeyIsComponent)(assignedKey)) {
-    element = (0, import_component.applyKeyComponentAsExtend)(element, parent, assignedKey);
+  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;
   }
-  if (checkIfMedia(assignedKey)) {
-    element = applyMediaProps(element, parent, assignedKey);
+  return parent;
+};
+const cacheOptions = (element, options) => {
+  if (options && !import_options.default.create) {
+    import_options.default.create = options;
+    import_options.default.create.context = element.context || options.context;
   }
+};
+const createKey = (element, parent, key) => {
+  return (key || element.key || (0, import_utils.generateKey)()).toString();
+};
+const addRef = (element, parent) => {
   if (element.__ref)
     element.__ref.origin = element;
   else
     element.__ref = { origin: element };
-  const __ref = element.__ref;
-  applyContext(element, parent, options);
-  const { context } = element;
-  if (context && context.components) {
-    (0, import_component.applyComponentFromContext)(element, parent, options);
-  }
-  (0, import_extend.applyExtend)(element, parent, options);
-  element.key = assignedKey;
-  if (options.onlyResolveExtends) {
-    return onlyResolveExtends(element, parent, options);
-  }
+  return element.__ref;
+};
+const replaceOptions = (element, parent, options) => {
   if (Object.keys(options).length) {
     import_mixins.registry.defaultOptions = options;
     if (options.ignoreChildExtend)
       delete options.ignoreChildExtend;
   }
-  addCaching(element, parent);
-  (0, import_set.addMethods)(element, parent);
-  element.state = (0, import_state.createState)(element, parent);
-  checkIf(element, parent);
-  if (element.node && __ref.__if) {
-    return (0, import_render.assignNode)(element, parent, assignedKey);
-  }
-  if (__ref.__if)
-    (0, import_props.createProps)(element, parent);
-  (0, import_component.applyVariant)(element, parent);
-  const initReturns = (0, import_event.triggerEventOn)("init", element, options);
-  if (initReturns === false)
-    return element;
-  (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
-  (0, import_classList.assignClass)(element);
-  renderElement(element, parent, options);
+};
+const addElementIntoParentChildren = (element, parent) => {
   if (parent.__ref && parent.__ref.__children)
     parent.__ref.__children.push(element.key);
-  (0, import_event.triggerEventOn)("complete", element, options);
-  return element;
 };
 const renderElement = (element, parent, options) => {
   const { __ref: ref, key } = element;
@@ -155,7 +180,7 @@ const applyContext = (element, parent, options) => {
   if (!element.context)
     element.context = parent.context || options.context || import_tree.ROOT.context;
 };
-const checkIf = (element, parent) => {
+const createIfConditionFlag = (element, parent) => {
   const { __ref: ref } = element;
   if ((0, import_utils.isFunction)(element.if)) {
     const ifPassed = element.if(element, element.state);
@@ -209,8 +234,6 @@ const onlyResolveExtends = (element, parent, options) => {
     __ref.__attr = {};
   if (!element.props)
     element.props = {};
-  if (!element.state)
-    element.state = element.parent.state || {};
   (0, import_state.createState)(element, parent, { skipApplyMethods: true, ...options });
   (0, import_props.createProps)(element, parent);
   (0, import_component.applyVariant)(element, parent);
@@ -228,13 +251,10 @@ const onlyResolveExtends = (element, parent, options) => {
       create((0, import_utils.exec)(prop, element), element, param, options);
     }
   }
-  delete element.parent;
   delete element.update;
   delete element.__element;
   delete element.props.update;
   delete element.props.__element;
-  delete element.state.__element;
-  delete element.state.__element;
   if (!options.keepRef)
     delete element.__ref;
   return element;

package/dist/cjs/mixins/classList.js

@@ -19,14 +19,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var classList_exports = {};
 __export(classList_exports, {
   applyClassListOnNode: () => applyClassListOnNode,
-  assignClass: () => assignClass,
+  assignKeyAsClassname: () => assignKeyAsClassname,
   classList: () => classList,
   classify: () => classify,
   default: () => classList_default
 });
 module.exports = __toCommonJS(classList_exports);
 var import_utils = require("@domql/utils");
-const assignClass = (element) => {
+const assignKeyAsClassname = (element) => {
   const { key } = element;
   if (element.class === true)
     element.class = key;

package/dist/cjs/node.js

@@ -60,8 +60,6 @@ const createNode = (element, options) => {
     if ((0, import_utils.isFunction)(node.setAttribute))
       node.setAttribute("key", element.key);
   }
-  if (!ref.__if)
-    return element;
   if (element.tag !== "string" || element.tag !== "fragment") {
     (0, import_iterate.throughInitialDefine)(element);
     (0, import_iterate.throughInitialExec)(element);

package/dist/cjs/props/create.js

@@ -63,9 +63,11 @@ const syncProps = (props, element) => {
 };
 const createProps = function(element, parent, cached) {
   const propsStack = cached || createPropsStack(element, parent);
-  const { __ref } = element;
+  const { __ref: ref } = element;
+  if (!ref.__if)
+    return;
   if (propsStack.length) {
-    __ref.__props = propsStack;
+    ref.__props = propsStack;
     syncProps(propsStack, element);
     element.props.update = update;
   }

package/dist/cjs/utils/component.js

@@ -76,6 +76,8 @@ const applyKeyComponentAsExtend = (element, parent, key) => {
 };
 const applyComponentFromContext = (element, parent, options) => {
   const { context } = element;
+  if (!context || !context.components)
+    return;
   const { components } = context;
   const { extend } = element;
   const execExtend = (0, import_utils.exec)(extend, element);

package/mixins/classList.js

@@ -2,7 +2,7 @@
 
 import { exec, isObject, isString } from '@domql/utils'
 
-export const assignClass = (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) !== '_') {

package/node.js

@@ -44,8 +44,6 @@ export const createNode = (element, options) => {
     if (isFunction(node.setAttribute)) node.setAttribute('key', element.key)
   }
 
-  if (!ref.__if) return element
-
   // iterate through all given params
   if (element.tag !== 'string' || element.tag !== 'fragment') {
     // iterate through define

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.4.10",
+  "version": "2.4.12",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -26,12 +26,11 @@
   },
   "dependencies": {
     "@domql/event": "latest",
-    "@domql/node": "^2.3.125",
-    "@domql/render": "^2.4.7",
+    "@domql/render": "latest",
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "0b2e301e066ed1745f29966e05bca8531c3487f6",
+  "gitHead": "fb655eb1dbbde28cb1b843f13aad21afcfcece40",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/props/create.js

@@ -43,10 +43,12 @@ export const syncProps = (props, element) => {
 
 export const createProps = function (element, parent, cached) {
   const propsStack = cached || createPropsStack(element, parent)
-  const { __ref } = element
+  const { __ref: ref } = element
+
+  if (!ref.__if) return
 
   if (propsStack.length) {
-    __ref.__props = propsStack
+    ref.__props = propsStack
     syncProps(propsStack, element)
     element.props.update = update
   }

package/utils/component.js

@@ -54,6 +54,9 @@ export const applyKeyComponentAsExtend = (element, parent, key) => {
 
 export const applyComponentFromContext = (element, parent, options) => {
   const { context } = element
+
+  if (!context || !context.components) return
+
   const { components } = context
   const { extend } = element
   const execExtend = exec(extend, element)