@domql/state 2.3.121 → 2.3.123

package/createState.js

@@ -5,23 +5,24 @@ import { deepClone, exec, is, isFunction, isObject } from '@domql/utils'
 import { IGNORE_STATE_PARAMS } from './ignore'
 import { add, apply, clean, destroy, parse, remove, rootUpdate, toggle } from './methods'
 import { updateState } from './updateState'
-import { checkIfInherits, createInheritedState } from './utils'
+import { checkIfInherits, createInheritedState } from './inherit'
 
 export const createState = function (element, parent, opts) {
   const skip = (opts && opts.skip) ? opts.skip : false
 
   const objectizeState = checkForTypes(element)
   if (objectizeState === false) return parent.state || {}
-  else element.state = objectizeState
+  else element.state = deepClone(objectizeState, IGNORE_STATE_PARAMS)
 
   const whatInitReturns = triggerEventOn('stateInit', element)
   if (whatInitReturns === false) return element.state
 
   if (checkIfInherits(element)) {
-    element.state = createInheritedState(element, parent) || {}
+    const inheritedState = createInheritedState(element, parent)
+    element.state = inheritedState || {}
   }
 
-  const dependentState = applyDependentState(element, state)
+  const dependentState = applyDependentState(element, element.state)
   if (dependentState) element.state = dependentState
 
   // NOTE: Only true when 'onlyResolveExtends' option is set to true

package/dist/cjs/createState.js

@@ -26,21 +26,22 @@ var import_utils = require("@domql/utils");
 var import_ignore = require("./ignore");
 var import_methods = require("./methods");
 var import_updateState = require("./updateState");
-var import_utils2 = require("./utils");
+var import_inherit = require("./inherit");
 const createState = function(element, parent, opts) {
   const skip = opts && opts.skip ? opts.skip : false;
   const objectizeState = checkForTypes(element);
   if (objectizeState === false)
     return parent.state || {};
   else
-    element.state = objectizeState;
+    element.state = (0, import_utils.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
   const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element);
   if (whatInitReturns === false)
     return element.state;
-  if ((0, import_utils2.checkIfInherits)(element)) {
-    element.state = (0, import_utils2.createInheritedState)(element, parent) || {};
+  if ((0, import_inherit.checkIfInherits)(element)) {
+    const inheritedState = (0, import_inherit.createInheritedState)(element, parent);
+    element.state = inheritedState || {};
   }
-  const dependentState = applyDependentState(element, state);
+  const dependentState = applyDependentState(element, element.state);
   if (dependentState)
     element.state = dependentState;
   if (skip)
@@ -49,8 +50,8 @@ const createState = function(element, parent, opts) {
   (0, import_event.triggerEventOn)("stateCreated", element);
   return element.state;
 };
-const applyDependentState = (element, state2) => {
-  const { __ref: ref } = state2;
+const applyDependentState = (element, state) => {
+  const { __ref: ref } = state;
   if (!ref)
     return;
   const dependentState = (0, import_utils.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
@@ -59,42 +60,42 @@ const applyDependentState = (element, state2) => {
   return dependentState;
 };
 const checkForTypes = (element) => {
-  const { state: state2, __ref: ref } = element;
-  if ((0, import_utils.isFunction)(state2)) {
-    ref.__state = state2;
-    return (0, import_utils.exec)(state2, element);
+  const { state, __ref: ref } = element;
+  if ((0, import_utils.isFunction)(state)) {
+    ref.__state = state;
+    return (0, import_utils.exec)(state, element);
   }
-  if ((0, import_utils.is)(state2)("string", "number")) {
-    ref.__state = state2;
+  if ((0, import_utils.is)(state)("string", "number")) {
+    ref.__state = state;
     return {};
   }
-  if (state2 === true) {
+  if (state === true) {
     ref.__state = element.key;
     return {};
   }
-  if (state2) {
+  if (state) {
     ref.__hasRootState = true;
-    return state2;
+    return state;
   }
   return false;
 };
 const applyMethods = (element) => {
-  const state2 = element.state;
+  const state = element.state;
   const ref = element.__ref;
-  state2.clean = import_methods.clean;
-  state2.parse = import_methods.parse;
-  state2.destroy = import_methods.destroy;
-  state2.update = import_updateState.updateState;
-  state2.rootUpdate = import_methods.rootUpdate;
-  state2.create = createState;
-  state2.add = import_methods.add;
-  state2.toggle = import_methods.toggle;
-  state2.remove = import_methods.remove;
-  state2.apply = import_methods.apply;
-  state2.parent = element.parent.state;
-  state2.__element = element;
-  state2.__children = {};
-  state2.__root = ref.__root ? ref.__root.state : state2;
-  if (state2.parent)
-    state2.parent.__children[element.key] = state2;
+  state.clean = import_methods.clean;
+  state.parse = import_methods.parse;
+  state.destroy = import_methods.destroy;
+  state.update = import_updateState.updateState;
+  state.rootUpdate = import_methods.rootUpdate;
+  state.create = createState;
+  state.add = import_methods.add;
+  state.toggle = import_methods.toggle;
+  state.remove = import_methods.remove;
+  state.apply = import_methods.apply;
+  state.parent = element.parent.state;
+  state.__element = element;
+  state.__children = {};
+  state.__root = ref.__root ? ref.__root.state : state;
+  if (state.parent)
+    state.parent.__children[element.key] = state;
 };

package/dist/cjs/index.js

@@ -19,4 +19,4 @@ __reExport(state_exports, require("./ignore"), module.exports);
 __reExport(state_exports, require("./createState"), module.exports);
 __reExport(state_exports, require("./updateState"), module.exports);
 __reExport(state_exports, require("./methods"), module.exports);
-__reExport(state_exports, require("./utils"), module.exports);
+__reExport(state_exports, require("./inherit"), module.exports);

package/dist/cjs/{utils.js → inherit.js}

@@ -16,18 +16,23 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var utils_exports = {};
-__export(utils_exports, {
+var inherit_exports = {};
+__export(inherit_exports, {
   checkIfInherits: () => checkIfInherits,
+  createChangesByKey: () => createChangesByKey,
   createInheritedState: () => createInheritedState,
+  findInheritedState: () => findInheritedState,
   getChildStateInKey: () => getChildStateInKey,
   getParentStateInKey: () => getParentStateInKey,
   isState: () => isState
 });
-module.exports = __toCommonJS(utils_exports);
+module.exports = __toCommonJS(inherit_exports);
 var import_utils = require("@domql/utils");
-const getParentStateInKey = (stateKey, parentState) => {
-  const arr = stateKey.split("../");
+var import_ignore = require("./ignore");
+const getParentStateInKey = (stateKey2, parentState) => {
+  if (!stateKey2.includes("../"))
+    return;
+  const arr = stateKey2.split("../");
   const arrLength = arr.length - 1;
   for (let i = 0; i < arrLength; i++) {
     if (!parentState.parent)
@@ -36,48 +41,55 @@ const getParentStateInKey = (stateKey, parentState) => {
   }
   return parentState;
 };
-const getChildStateInKey = (stateKey, parentState) => {
-  const arr = stateKey.split("/");
+const getChildStateInKey = (stateKey2, parentState, options) => {
+  const arr = stateKey2.split("/");
   const arrLength = arr.length - 1;
   for (let i = 0; i < arrLength; i++) {
     const childKey = arr[i];
     const grandChildKey = arr[i + 1];
     const childInParent = parentState[childKey];
     if (childInParent && childInParent[grandChildKey]) {
-      stateKey = grandChildKey;
+      stateKey2 = grandChildKey;
       parentState = childInParent;
     } else
       return;
   }
-  return parentState[stateKey];
+  if (options.returnParent)
+    return parentState;
+  return parentState[stateKey2];
 };
-const createInheritedState = (element, parent) => {
-  const __elementRef = element.__ref;
-  let stateKey = __elementRef.__state;
-  if (!stateKey || (0, import_utils.isNot)(stateKey)("number", "string"))
-    return element.state;
+const findInheritedState = (element, parent, options = {}) => {
+  const ref = element.__ref;
+  let stateKey2 = ref.__state;
+  if (!checkIfInherits(element))
+    return;
   let parentState = parent.state;
-  if (stateKey.includes("../")) {
-    parentState = getParentStateInKey(stateKey, parent.state);
-    stateKey = stateKey.replaceAll("../", "");
+  const findGrandParentState = getParentStateInKey(stateKey2, parent.state);
+  if (findGrandParentState) {
+    parentState = findGrandParentState;
+    stateKey2 = stateKey2.replaceAll("../", "");
   }
   if (!parentState)
     return;
-  const keyInParentState = getChildStateInKey(stateKey, parentState);
-  if (!keyInParentState)
-    return;
-  if ((0, import_utils.is)(keyInParentState)("object", "array")) {
-    return (0, import_utils.deepClone)(keyInParentState);
-  } else if ((0, import_utils.is)(keyInParentState)("string", "number")) {
-    __elementRef.__stateType = "string";
-    return { value: keyInParentState };
+  return getChildStateInKey(stateKey2, parentState, options);
+};
+const createInheritedState = (element, parent) => {
+  const ref = element.__ref;
+  const inheritedState = findInheritedState(element, parent);
+  if (!inheritedState)
+    return element.state;
+  if ((0, import_utils.is)(inheritedState)("object", "array")) {
+    return (0, import_utils.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+  } else if ((0, import_utils.is)(inheritedState)("string", "number")) {
+    ref.__stateType = "string";
+    return { value: inheritedState };
   }
   console.warn(stateKey, "is not present. Replacing with", {});
 };
 const checkIfInherits = (element) => {
-  const __elementRef = element.__ref;
-  const stateKey = __elementRef.__state;
-  if (!stateKey || (0, import_utils.isNot)(stateKey)("number", "string"))
+  const ref = element.__ref;
+  const stateKey2 = ref.__state;
+  if (!stateKey2 || (0, import_utils.isNot)(stateKey2)("number", "string"))
     return false;
   return true;
 };
@@ -87,3 +99,16 @@ const isState = function(state) {
   const keys = Object.keys(state);
   return (0, import_utils.arrayContainsOtherArray)(keys, ["update", "parse", "clean", "create", "parent", "rootUpdate"]);
 };
+const createChangesByKey = (path, value) => {
+  if (!path) {
+    return value || {};
+  }
+  const keys = path.split("/");
+  let obj = {};
+  let ref = obj;
+  keys.forEach((key, index) => {
+    ref[key] = index === keys.length - 1 ? value || {} : {};
+    ref = ref[key];
+  });
+  return obj;
+};

package/dist/cjs/methods.js

@@ -84,13 +84,15 @@ const add = function(value, options = {}) {
   const state = this;
   if ((0, import_utils.isArray)(state)) {
     state.push(value);
-    state.update(state.parse(), { skipOverwrite: true, ...options });
+    state.update(state.parse(), { replace: true, ...options });
+  } else if ((0, import_utils.isObject)(state)) {
+    const key = Object.keys(state).length;
+    state.update({ [key]: value }, options);
   }
 };
 const toggle = function(key, options = {}) {
   const state = this;
-  state[key] = !state[key];
-  state.update({ [key]: !state[key] }, { skipOverwrite: true, ...options });
+  state.update({ [key]: !state[key] }, options);
 };
 const remove = function(key, options = {}) {
   const state = this;
@@ -98,12 +100,12 @@ const remove = function(key, options = {}) {
     (0, import_utils.removeFromArray)(state, key);
   if ((0, import_utils.isObject)(state))
     (0, import_utils.removeFromObject)(state, key);
-  return state.update(state.parse(), { skipOverwrite: true, ...options });
+  return state.update(state.parse(), { replace: true, ...options });
 };
 const apply = function(func, options = {}) {
   const state = this;
   if ((0, import_utils.isFunction)(func)) {
     func(state);
-    return state.update(state, { skipOverwrite: true, ...options });
+    return state.update(state, { replace: true, ...options });
   }
 };

package/dist/cjs/updateState.js

@@ -25,8 +25,11 @@ var import_report = require("@domql/report");
 var import_event = require("@domql/event");
 var import_ignore = require("./ignore");
 var import_utils = require("@domql/utils");
-var import_utils2 = require("./utils");
-const updateState = function(obj, options = {}) {
+var import_inherit = require("./inherit");
+const STATE_UPDATE_OPTIONS = {
+  preventHoistElementUpdate: true
+};
+const updateState = function(obj, options = STATE_UPDATE_OPTIONS) {
   const state = this;
   const element = state.__element;
   if (!state.__element)
@@ -58,23 +61,27 @@ const applyOverwrite = (state, obj, options) => {
 };
 const hoistStateUpdate = (state, obj, options) => {
   const element = state.__element;
-  const __elementRef = element.__ref;
-  const stateKey = __elementRef.__state;
+  const { parent, __ref: ref } = element;
+  const stateKey = ref.__state;
   if (!stateKey)
     return;
-  const asksForInherit = (0, import_utils2.checkIfInherits)(element);
-  const shouldPropagateState = asksForInherit && !options.stopStatePropagation;
-  const parentState = element.parent.state;
+  const asksForInherit = (0, import_inherit.checkIfInherits)(element);
+  const inheritedState = (0, import_inherit.findInheritedState)(element, parent, { returnParent: true });
+  const shouldPropagateState = asksForInherit && inheritedState && !options.stopStatePropagation;
   if (!shouldPropagateState)
     return;
-  const isStringState = __elementRef.__stateType === "string";
+  const isStringState = ref.__stateType === "string";
   const value = isStringState ? state.value : state.parse();
   const passedValue = isStringState ? state.value : obj;
-  parentState[stateKey] = value;
-  parentState.update({ [stateKey]: passedValue }, {
-    skipOverwrite: true,
+  const findGrandParentState = (0, import_inherit.getParentStateInKey)(stateKey, parent.state);
+  const changesValue = (0, import_inherit.createChangesByKey)(stateKey, passedValue);
+  const targetParent = findGrandParentState || parent.state;
+  if (options.replace)
+    targetParent[stateKey] = value;
+  targetParent.update(changesValue, {
+    ...options,
     preventUpdate: options.preventHoistElementUpdate,
-    ...options
+    skipOverwrite: options.replace
   });
 };
 const updateDependentState = (state, obj, options) => {

package/index.js

@@ -4,4 +4,4 @@ export * from './ignore'
 export * from './createState'
 export * from './updateState'
 export * from './methods'
-export * from './utils'
+export * from './inherit'

package/{utils.js → inherit.js}

@@ -1,8 +1,10 @@
 'use strict'
 
 import { arrayContainsOtherArray, deepClone, is, isNot, isObjectLike } from '@domql/utils'
+import { IGNORE_STATE_PARAMS } from './ignore'
 
 export const getParentStateInKey = (stateKey, parentState) => {
+  if (!stateKey.includes('../')) return
   const arr = stateKey.split('../')
   const arrLength = arr.length - 1
   for (let i = 0; i < arrLength; i++) {
@@ -12,7 +14,7 @@ export const getParentStateInKey = (stateKey, parentState) => {
   return parentState
 }
 
-export const getChildStateInKey = (stateKey, parentState) => {
+export const getChildStateInKey = (stateKey, parentState, options) => {
   const arr = stateKey.split('/')
   const arrLength = arr.length - 1
   for (let i = 0; i < arrLength; i++) {
@@ -24,37 +26,44 @@ export const getChildStateInKey = (stateKey, parentState) => {
       parentState = childInParent
     } else return
   }
+  if (options.returnParent) return parentState
   return parentState[stateKey]
 }
 
-export const createInheritedState = (element, parent) => {
-  const __elementRef = element.__ref
-  let stateKey = __elementRef.__state
-  if (!stateKey || isNot(stateKey)('number', 'string')) return element.state
+export const findInheritedState = (element, parent, options = {}) => {
+  const ref = element.__ref
+  let stateKey = ref.__state
+  if (!checkIfInherits(element)) return
 
   let parentState = parent.state
-  if (stateKey.includes('../')) {
-    parentState = getParentStateInKey(stateKey, parent.state)
+  const findGrandParentState = getParentStateInKey(stateKey, parent.state)
+  if (findGrandParentState) {
+    parentState = findGrandParentState
     stateKey = stateKey.replaceAll('../', '')
   }
+
   if (!parentState) return
+  return getChildStateInKey(stateKey, parentState, options)
+}
 
-  const keyInParentState = getChildStateInKey(stateKey, parentState)
-  if (!keyInParentState) return
+export const createInheritedState = (element, parent) => {
+  const ref = element.__ref
+  const inheritedState = findInheritedState(element, parent)
+  if (!inheritedState) return element.state
 
-  if (is(keyInParentState)('object', 'array')) {
-    return deepClone(keyInParentState)
-  } else if (is(keyInParentState)('string', 'number')) {
-    __elementRef.__stateType = 'string'
-    return { value: keyInParentState }
+  if (is(inheritedState)('object', 'array')) {
+    return deepClone(inheritedState, IGNORE_STATE_PARAMS)
+  } else if (is(inheritedState)('string', 'number')) {
+    ref.__stateType = 'string'
+    return { value: inheritedState }
   }
 
   console.warn(stateKey, 'is not present. Replacing with', {})
 }
 
 export const checkIfInherits = (element) => {
-  const __elementRef = element.__ref
-  const stateKey = __elementRef.__state
+  const ref = element.__ref
+  const stateKey = ref.__state
   if (!stateKey || isNot(stateKey)('number', 'string')) return false
   return true
 }
@@ -64,3 +73,17 @@ export const isState = function (state) {
   const keys = Object.keys(state)
   return arrayContainsOtherArray(keys, ['update', 'parse', 'clean', 'create', 'parent', 'rootUpdate'])
 }
+
+export const createChangesByKey = (path, value) => {
+  if (!path) {
+    return value || {};
+  }
+  const keys = path.split('/');
+  let obj = {};
+  let ref = obj;
+  keys.forEach((key, index) => {
+    ref[key] = index === keys.length - 1 ? value || {} : {};
+    ref = ref[key];
+  });
+  return obj;
+}

package/methods.js

@@ -64,27 +64,30 @@ export const add = function (value, options = {}) {
   const state = this
   if (isArray(state)) {
     state.push(value)
-    state.update(state.parse(), { skipOverwrite: true, ...options })
+    state.update(state.parse(), { replace: true, ...options })
+  }
+  else if (isObject(state)) {
+    const key = Object.keys(state).length
+    state.update({ [key]: value }, options)
   }
 }
 
 export const toggle = function (key, options = {}) {
   const state = this
-  state[key] = !state[key]
-  state.update({ [key]: !state[key] }, { skipOverwrite: true, ...options })
+  state.update({ [key]: !state[key] }, options)
 }
 
 export const remove = function (key, options = {}) {
   const state = this
   if (isArray(state)) removeFromArray(state, key)
   if (isObject(state)) removeFromObject(state, key)
-  return state.update(state.parse(), { skipOverwrite: true, ...options })
+  return state.update(state.parse(), { replace: true, ...options })
 }
 
 export const apply = function (func, options = {}) {
   const state = this
   if (isFunction(func)) {
     func(state)
-    return state.update(state, { skipOverwrite: true, ...options })
+    return state.update(state, { replace: true, ...options })
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/state",
-  "version": "2.3.121",
+  "version": "2.3.123",
   "license": "MIT",
   "type": "module",
   "module": "dist/esm/index.js",
@@ -26,5 +26,5 @@
     "@domql/report": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "7bb63fd5aab7bfa92c0aaa3a7205ff9a002fac1c"
+  "gitHead": "feb0d24eb5924f0f9ebea660a93afffc7d6a2059"
 }

package/updateState.js

@@ -4,9 +4,13 @@ import { report } from '@domql/report'
 import { triggerEventOn } from '@domql/event'
 import { IGNORE_STATE_PARAMS } from './ignore'
 import { deepMerge, overwriteDeep, overwriteShallow } from '@domql/utils'
-import { checkIfInherits } from './utils'
+import { checkIfInherits, createChangesByKey, findInheritedState, getParentStateInKey } from './inherit'
 
-export const updateState = function (obj, options = {}) {
+const STATE_UPDATE_OPTIONS = {
+  preventHoistElementUpdate: true
+}
+
+export const updateState = function (obj, options = STATE_UPDATE_OPTIONS) {
   const state = this
   const element = state.__element
 
@@ -48,24 +52,27 @@ const applyOverwrite = (state, obj, options) => {
 
 const hoistStateUpdate = (state, obj, options) => {
   const element = state.__element
-  const __elementRef = element.__ref
-  const stateKey = __elementRef.__state
+  const { parent, __ref: ref } = element
+  const stateKey = ref.__state
   if (!stateKey) return
 
   const asksForInherit = checkIfInherits(element)
-  const shouldPropagateState = asksForInherit && !options.stopStatePropagation
-  const parentState = element.parent.state
-
+  const inheritedState = findInheritedState(element, parent, { returnParent: true })
+  const shouldPropagateState = asksForInherit && inheritedState && !options.stopStatePropagation
   if (!shouldPropagateState) return
-  const isStringState = (__elementRef.__stateType === 'string')
+
+  const isStringState = (ref.__stateType === 'string')
   const value = isStringState ? state.value : state.parse()
   const passedValue = isStringState ? state.value : obj
 
-  parentState[stateKey] = value
-  parentState.update({ [stateKey]: passedValue }, {
-    skipOverwrite: true,
+  const findGrandParentState = getParentStateInKey(stateKey, parent.state)
+  const changesValue = createChangesByKey(stateKey, passedValue)
+  const targetParent = findGrandParentState || parent.state
+  if (options.replace) targetParent[stateKey] = value
+  targetParent.update(changesValue, {
+    ...options,
     preventUpdate: options.preventHoistElementUpdate,
-    ...options
+    skipOverwrite: options.replace
   })
 }