@domql/element 2.5.22 → 2.5.29

package/create.js

@@ -4,7 +4,7 @@ import createNode from './node'
 import { ROOT } from './tree'
 import { TAGS } from '@domql/registry'
 import { triggerEventOn } from '@domql/event'
-import { appendNode, assignNode, cacheNode, detectTag } from '@domql/render'
+import { assignNode, detectTag } from '@domql/render'
 import { createState } from '@domql/state'
 
 import { isMethod } from './methods'
@@ -42,7 +42,7 @@ const ENV = process.env.NODE_ENV
 /**
  * Creating a domQL element using passed parameters
  */
-const create = (element, parent, key, options = OPTIONS.create || {}) => {
+const create = (element, parent, key, options = OPTIONS.create || {}, attachOptions) => {
   cacheOptions(element, options)
 
   // if (key === 'Title') debugger
@@ -101,7 +101,7 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
 
   // if it already HAS a NODE
   if (element.node && ref.__if) {
-    return assignNode(element, parent, key)
+    return assignNode(element, parent, key, attachOptions)
   }
 
   // apply variants
@@ -115,7 +115,7 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
   // generate a CLASS name
   assignKeyAsClassname(element)
 
-  renderElement(element, parent, options)
+  renderElement(element, parent, options, attachOptions)
 
   addElementIntoParentChildren(element, parent)
 
@@ -207,16 +207,19 @@ const addElementIntoParentChildren = (element, parent) => {
   if (parent.__ref && parent.__ref.__children) parent.__ref.__children.push(element.key)
 }
 
-const renderElement = (element, parent, options) => {
+const renderElement = (element, parent, options, attachOptions) => {
   const { __ref: ref, key } = element
 
   // CREATE a real NODE
   createNode(element, options)
 
-  if (!ref.__if) return element
+  if (!ref.__if) {
+    parent[key || element.key] = element
+    return element
+  }
 
   // assign NODE
-  assignNode(element, parent, key)
+  assignNode(element, parent, key, attachOptions)
 
   // run `on.renderRouter`
   triggerEventOn('renderRouter', element, options)
@@ -252,14 +255,8 @@ const createScope = (element, parent) => {
 const createIfConditionFlag = (element, parent) => {
   const { __ref: ref } = element
 
-  if (isFunction(element.if)) {
-    // TODO: move as fragment
-    const ifPassed = element.if(element, element.state)
-    if (!ifPassed) {
-      const ifFragment = cacheNode({ tag: 'fragment' })
-      ref.__ifFragment = appendNode(ifFragment, parent.node)
-      delete ref.__if
-    } else ref.__if = true
+  if (isFunction(element.if) && !element.if(element, element.state)) {
+    delete ref.__if
   } else ref.__if = true
 }
 

package/dist/cjs/create.js

@@ -48,7 +48,7 @@ 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 || {}) => {
+const create = (element, parent, key, options = import_options.default.create || {}, attachOptions) => {
   cacheOptions(element, options);
   if (checkIfPrimitive(element)) {
     element = applyValueAsText(element, parent, key);
@@ -80,7 +80,7 @@ const create = (element, parent, key, options = import_options.default.create ||
     element.scope = element.props;
   createIfConditionFlag(element, parent);
   if (element.node && ref.__if) {
-    return (0, import_render.assignNode)(element, parent, key);
+    return (0, import_render.assignNode)(element, parent, key, attachOptions);
   }
   (0, import_component.applyVariant)(element, parent);
   const onInit = (0, import_event.triggerEventOn)("init", element, options);
@@ -88,7 +88,7 @@ const create = (element, parent, key, options = import_options.default.create ||
     return element;
   (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
   (0, import_classList.assignKeyAsClassname)(element);
-  renderElement(element, parent, options);
+  renderElement(element, parent, options, attachOptions);
   addElementIntoParentChildren(element, parent);
   (0, import_event.triggerEventOn)("complete", element, options);
   return element;
@@ -161,12 +161,14 @@ const addElementIntoParentChildren = (element, parent) => {
   if (parent.__ref && parent.__ref.__children)
     parent.__ref.__children.push(element.key);
 };
-const renderElement = (element, parent, options) => {
+const renderElement = (element, parent, options, attachOptions) => {
   const { __ref: ref, key } = element;
   (0, import_node.default)(element, options);
-  if (!ref.__if)
+  if (!ref.__if) {
+    parent[key || element.key] = element;
     return element;
-  (0, import_render.assignNode)(element, parent, key);
+  }
+  (0, import_render.assignNode)(element, parent, key, attachOptions);
   (0, import_event.triggerEventOn)("renderRouter", element, options);
   (0, import_event.triggerEventOn)("render", element, options);
 };
@@ -195,14 +197,8 @@ const createScope = (element, parent) => {
 };
 const createIfConditionFlag = (element, parent) => {
   const { __ref: ref } = element;
-  if ((0, import_utils.isFunction)(element.if)) {
-    const ifPassed = element.if(element, element.state);
-    if (!ifPassed) {
-      const ifFragment = (0, import_render.cacheNode)({ tag: "fragment" });
-      ref.__ifFragment = (0, import_render.appendNode)(ifFragment, parent.node);
-      delete ref.__if;
-    } else
-      ref.__if = true;
+  if ((0, import_utils.isFunction)(element.if) && !element.if(element, element.state)) {
+    delete ref.__if;
   } else
     ref.__if = true;
 };

package/dist/cjs/update.js

@@ -42,7 +42,6 @@ var import_iterate = require("./iterate");
 var import_mixins = require("./mixins");
 var import_applyParam = require("./applyParam");
 var import_options = __toESM(require("./cache/options"), 1);
-var import_inherit = require("../state/inherit");
 const snapshot = {
   snapshotId: import_utils.createSnapshotId
 };
@@ -58,6 +57,7 @@ const update = function(params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   const element = this;
   const { parent, node, key } = element;
   const { excludes, preventInheritAtCurrentState } = options;
+  (0, import_event.triggerEventOnUpdate)("startUpdate", params, element, options);
   if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element)
     return;
   if (!excludes)
@@ -71,12 +71,12 @@ const update = function(params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   if ((0, import_utils.isString)(params) || (0, import_utils.isNumber)(params)) {
     params = { text: params };
   }
-  const ifFails = checkIfOnUpdate(element, parent, options);
-  if (ifFails)
-    return;
   const inheritState = inheritStateUpdates(element, options);
   if (inheritState === false)
     return;
+  const ifFails = 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));
@@ -147,7 +147,7 @@ const captureSnapshot = (element, options) => {
   return [snapshotOnCallee, calleeElement];
 };
 const checkIfOnUpdate = (element, parent, options) => {
-  if (!(0, import_utils.isFunction)(element.if) || !element.state || !parent)
+  if (!(0, import_utils.isFunction)(element.if) || !parent)
     return;
   const ref = element.__ref;
   const ifPassed = element.if(element, element.state, element.context, options);
@@ -163,7 +163,16 @@ const checkIfOnUpdate = (element, parent, options) => {
       if (ref.__state) {
         element.state = ref.__state;
       }
-      const created = (0, import_create.default)(element, parent, element.key, import_options.default.create);
+      const previousElement = element.previousElement();
+      const nextElement = element.nextElement();
+      const hasPrevious = previousElement && previousElement.node;
+      const hasNext = nextElement && nextElement.node;
+      const attachOptions = {
+        position: hasPrevious ? "after" : hasNext ? "before" : null,
+        node: hasPrevious || hasNext,
+        parentNode: parent.node
+      };
+      const created = (0, import_create.default)(element, parent, element.key, import_options.default.create, attachOptions);
       if (options.preventUpdate !== true && element.on && (0, import_utils.isFunction)(element.on.update)) {
         (0, import_event.applyEvent)(element.on.update, created, created.state);
       }
@@ -191,7 +200,7 @@ const inheritStateUpdates = (element, options) => {
     state.set(execState, { ...options, preventUpdate: true });
     return;
   }
-  const keyInParentState = (0, import_inherit.findInheritedState)(element, element.parent);
+  const keyInParentState = (0, import_state.findInheritedState)(element, element.parent);
   if (!keyInParentState || options.preventInheritedStateUpdate)
     return;
   if (!options.preventInitStateUpdateListener) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.22",
+  "version": "2.5.29",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -31,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "231fe90e14adace5408e9f5def451463ec1430ae",
+  "gitHead": "df470e5a96cda567c9d99cc98337eac0136d0890",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/update.js

@@ -4,7 +4,7 @@ import { window, exec, isArray, isFunction, isNumber, isObject, isString, isUnde
 import { applyEvent, triggerEventOn, triggerEventOnUpdate } from '@domql/event'
 import { isMethod } from './methods'
 import { updateProps } from './props'
-import { createState } from '@domql/state'
+import { createState, findInheritedState } from '@domql/state'
 
 import { METHODS_EXL, isVariant } from './utils'
 import create from './create'
@@ -12,7 +12,6 @@ import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
 import { registry } from './mixins'
 import { applyParam } from './applyParam'
 import OPTIONS from './cache/options'
-import { findInheritedState } from '../state/inherit'
 
 const snapshot = {
   snapshotId: createSnapshotId
@@ -32,6 +31,8 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   const { parent, node, key } = element
   const { excludes, preventInheritAtCurrentState } = options
 
+  triggerEventOnUpdate('startUpdate', params, element, options)
+
   if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element) return
   if (!excludes) merge(options, UPDATE_DEFAULT_OPTIONS)
 
@@ -45,12 +46,12 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     params = { text: params }
   }
 
-  const ifFails = checkIfOnUpdate(element, parent, options)
-  if (ifFails) return
-
   const inheritState = inheritStateUpdates(element, options)
   if (inheritState === false) return
 
+  const ifFails = 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))
@@ -142,7 +143,7 @@ const captureSnapshot = (element, options) => {
 }
 
 const checkIfOnUpdate = (element, parent, options) => {
-  if (!isFunction(element.if) || !element.state || !parent) return
+  if (!isFunction(element.if) || !parent) return
 
   const ref = element.__ref
   const ifPassed = element.if(element, element.state, element.context, options)
@@ -159,7 +160,20 @@ const checkIfOnUpdate = (element, parent, options) => {
       if (ref.__state) {
         element.state = ref.__state
       }
-      const created = create(element, parent, element.key, OPTIONS.create)
+
+      const previousElement = element.previousElement()
+      const nextElement = element.nextElement()
+
+      const hasPrevious = previousElement && previousElement.node
+      const hasNext = nextElement && nextElement.node
+
+      const attachOptions = {
+        position: hasPrevious ? 'after' : hasNext ? 'before' : null,
+        node: hasPrevious || hasNext,
+        parentNode: parent.node
+      }
+
+      const created = 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, created, created.state)