@domql/element 2.4.0 → 2.4.2

package/utils/component.js

@@ -0,0 +1,112 @@
+'use strict'
+
+import { exec, isArray, isFunction, isObject, isString, overwriteDeep } from '@domql/utils'
+import { applyExtend } from '../extend'
+const ENV = process.env.NODE_ENV
+
+export const checkIfKeyIsComponent = (key) => {
+  const isFirstKeyString = isString(key)
+  if (!isFirstKeyString) return
+  const firstCharKey = key.slice(0, 1)
+  return /^[A-Z]*$/.test(firstCharKey)
+}
+
+export const addAdditionalExtend = (newExtend, element) => {
+  const { extend } = element
+  const preserveExtend = isArray(extend) ? extend : [extend]
+  return {
+    ...element,
+    extend: [newExtend].concat(preserveExtend)
+  }
+}
+
+export const extendizeByKey = (element, parent, key) => {
+  const { tag, extend, props, state, childExtend, childProps, on } = element
+  const hasComponentAttrs = tag || extend || childExtend || props || state || on
+  const componentKey = key.includes('_')
+    ? key.split('_')[0]
+    : key.includes('.') ? key.split('.')[0] : key
+  const extendKey = componentKey || key
+
+  if (!hasComponentAttrs || childProps) {
+    return {
+      extend: extendKey,
+      props: { ...element }
+    }
+  } else if (!extend || extend === true) {
+    return {
+      ...element,
+      extend: extendKey
+    }
+  } else if (extend) {
+    addAdditionalExtend(extendKey, element)
+  } else if (isFunction(element)) {
+    return {
+      extend: extendKey,
+      props: { ...exec(element, parent) }
+    }
+  }
+}
+
+export const applyKeyComponentAsExtend = (element, parent, key) => {
+  return extendizeByKey(element, parent, key) || element
+}
+
+export const applyComponentFromContext = (element, parent, options) => {
+  const { context } = element
+  const { components } = context
+  const { extend } = element
+  const execExtend = exec(extend, element)
+  if (isString(execExtend)) {
+    if (components[execExtend]) element.extend = components[execExtend]
+    else {
+      if ((ENV === 'test' || ENV === 'development') && options.verbose) {
+        console.warn(execExtend, 'is not in library', components, element)
+        console.warn('replacing with ', {})
+      }
+      element.extend = {}
+    }
+  }
+}
+
+export const isVariant = (param) => {
+  if (!isString(param)) return
+  const firstCharKey = param.slice(0, 1)
+  // return (firstCharKey === '.' || firstCharKey === '$')
+  return (firstCharKey === '.')
+}
+
+export const hasVariantProp = (element) => {
+  const { props } = element
+  if (isObject(props) && isString(props.variant)) return true
+}
+
+export const overwriteVariant = (element, variant, variantProps) => {
+  let variantElement = element[variant]
+  if (!variantElement) return
+  const props = isObject(variantProps) ? variantProps : {}
+  if (isString(variantElement)) {
+    variantElement = {
+      extend: [{ props }, variantElement]
+    }
+  } else if (variantElement.extend) {
+    variantElement = addAdditionalExtend({ props }, variantElement)
+  }
+  return overwriteDeep(element, applyExtend(variantElement)) // TODO: check why string is not working
+}
+
+export const applyVariant = (element) => {
+  const { props } = element
+  if (!hasVariantProp(element)) return element
+  const { variant } = props
+  overwriteVariant(element, `.${variant}`)
+
+  const elKeys = Object.keys(element).filter((key) => isVariant(key))
+  elKeys.forEach((variant) => {
+    const slicedVariantElementKey = variant.slice(1)
+    const variantElementProps = props[slicedVariantElementKey]
+    if (variantElementProps) overwriteVariant(element, variant, variantElementProps)
+  })
+
+  return element
+}

package/utils/extendUtils.js

@@ -0,0 +1,118 @@
+'use strict'
+
+import { isArray, isFunction, isObject, isString } from '@domql/utils'
+
+export const generateHash = () => Math.random().toString(36).substring(2)
+
+// hashing
+export const extendStackRegistry = {}
+export const extendCachedRegistry = {}
+
+export const getHashedExtend = extend => {
+  return extendStackRegistry[extend.__hash]
+}
+
+export const setHashedExtend = (extend, stack) => {
+  const hash = generateHash()
+  if (!isString(extend)) { extend.__hash = hash }
+  extendStackRegistry[hash] = stack
+  return stack
+}
+
+export const getExtendStackRegistry = (extend, stack) => {
+  if (extend.__hash) { return stack.concat(getHashedExtend(extend)) }
+  return setHashedExtend(extend, stack) // stack .concat(hashedExtend)
+}
+
+// stacking
+export const extractArrayExtend = (extend, stack) => {
+  extend.forEach(each => flattenExtend(each, stack))
+  return stack
+}
+
+export const deepExtend = (extend, stack) => {
+  const extendOflattenExtend = extend.extend
+  if (extendOflattenExtend) {
+    flattenExtend(extendOflattenExtend, stack)
+  }
+  return stack
+}
+
+export const flattenExtend = (extend, stack) => {
+  if (!extend) return stack
+  if (isArray(extend)) return extractArrayExtend(extend, stack)
+  stack.push(extend)
+  if (extend.extend) deepExtend(extend, stack)
+  return stack
+}
+
+// merging
+export const deepCloneExtend = obj => {
+  const o = {}
+  for (const prop in obj) {
+    if (['parent', 'node', '__element'].indexOf(prop) > -1) continue
+    const objProp = obj[prop]
+    if (isObject(objProp)) {
+      o[prop] = deepCloneExtend(objProp)
+    } else if (isArray(objProp)) {
+      o[prop] = objProp.map(x => x)
+    } else o[prop] = objProp
+  }
+  return o
+}
+
+export const deepMergeExtend = (element, extend) => {
+  for (const e in extend) {
+    if (['parent', 'node', '__element'].indexOf(e) > -1) continue
+    const elementProp = element[e]
+    const extendProp = extend[e]
+    if (elementProp === undefined) {
+      element[e] = extendProp
+    } else if (isObject(elementProp) && isObject(extendProp)) {
+      deepMergeExtend(elementProp, extendProp)
+    } else if (isArray(elementProp) && isArray(extendProp)) {
+      element[e] = elementProp.concat(extendProp)
+    } else if (isArray(elementProp) && isObject(extendProp)) {
+      const obj = deepMergeExtend({}, elementProp)
+      element[e] = deepMergeExtend(obj, extendProp)
+    } else if (elementProp === undefined && isFunction(extendProp)) {
+      element[e] = extendProp
+    }
+  }
+  return element
+}
+
+export const cloneAndMergeArrayExtend = stack => {
+  return stack.reduce((a, c) => {
+    return deepMergeExtend(a, deepCloneExtend(c))
+  }, {})
+}
+
+export const replaceStringsWithComponents = (stack, components) => {
+  return stack.map(v => {
+    if (isString(v)) return components[v]
+    else return v
+  })
+}
+
+// joint stacks
+export const jointStacks = (extendStack, childExtendStack) => {
+  return []
+    .concat(extendStack.slice(0, 1))
+    .concat(childExtendStack.slice(0, 1))
+    .concat(extendStack.slice(1))
+    .concat(childExtendStack.slice(1))
+}
+
+// init
+export const getExtendStack = extend => {
+  if (!extend) return []
+  if (extend.__hash) return getHashedExtend(extend) || []
+  const stack = flattenExtend(extend, [])
+  return getExtendStackRegistry(extend, stack)
+}
+
+export const getExtendMerged = extend => {
+  const stack = getExtendStack(extend)
+  return cloneAndMergeArrayExtend(stack)
+}

package/utils/index.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export * from './object'
+export * from './extendUtils'
+export * from './component'

package/utils/object.js

@@ -0,0 +1,141 @@
+'use strict'
+
+import { isArray, isObject, isObjectLike, joinArrays } from '@domql/utils'
+import { IGNORE_STATE_PARAMS } from '@domql/state'
+import { IGNORE_PROPS_PARAMS } from '../props'
+import { METHODS } from '../methods'
+
+export const METHODS_EXL = joinArrays(
+  ['node', 'state', 'context', 'extend'],
+  METHODS,
+  IGNORE_STATE_PARAMS,
+  IGNORE_PROPS_PARAMS
+)
+
+export const deepMerge = (element, extend, exclude = METHODS_EXL) => {
+  for (const e in extend) {
+    if (exclude.includes(e)) continue
+    const elementProp = element[e]
+    const extendProp = extend[e]
+    if (elementProp === undefined) {
+      element[e] = extendProp
+    } else if (isObjectLike(elementProp) && isObject(extendProp)) {
+      deepMerge(elementProp, extendProp)
+    }
+  }
+  return element
+}
+
+export const clone = (obj, exclude = METHODS_EXL) => {
+  const o = {}
+  for (const e in obj) {
+    if (exclude.includes(e)) continue
+    o[e] = obj[e]
+  }
+  return o
+}
+
+/**
+ * Deep cloning of object
+ */
+export const deepClone = (obj, exclude = METHODS_EXL) => {
+  const o = isArray(obj) ? [] : {}
+  for (const e in obj) {
+    if (exclude.includes(e)) continue
+    let objProp = obj[e]
+    if (e === 'extend' && isArray(objProp)) {
+      objProp = mergeArray(objProp, exclude)
+    }
+    if (isObjectLike(objProp)) {
+      o[e] = deepClone(objProp, exclude)
+    } else o[e] = objProp
+  }
+  return o
+}
+
+/**
+ * Overwrites object properties with another
+ */
+export const overwrite = (element, params, options) => {
+  const changes = {}
+  const { __ref } = element
+  const { __exec, __cached } = __ref
+
+  for (const e in params) {
+    if (e === 'props' || e === 'state' || e === '__ref') continue
+
+    const elementProp = element[e]
+    const paramsProp = params[e]
+
+    if (paramsProp !== undefined) {
+      __cached[e] = changes[e] = elementProp
+      element[e] = paramsProp
+    }
+
+    if (options.cleanExec) delete __exec[e]
+  }
+
+  return changes
+}
+
+export const overwriteShallow = (obj, params, exclude = METHODS_EXL) => {
+  for (const e in params) {
+    if (exclude.includes(e)) continue
+    obj[e] = params[e]
+  }
+  return obj
+}
+
+/**
+ * Overwrites DEEPly object properties with another
+ */
+export const overwriteDeep = (obj, params, exclude = METHODS_EXL) => {
+  for (const e in params) {
+    if (exclude.includes(e)) continue
+    const objProp = obj[e]
+    const paramsProp = params[e]
+    if (isObjectLike(objProp) && isObjectLike(paramsProp)) {
+      overwriteDeep(objProp, paramsProp)
+    } else if (paramsProp !== undefined) {
+      obj[e] = paramsProp
+    }
+  }
+  return obj
+}
+
+/**
+ * Overwrites object properties with another
+ */
+export const mergeIfExisted = (a, b) => {
+  if (isObjectLike(a) && isObjectLike(b)) return deepMerge(a, b)
+  return a || b
+}
+
+/**
+ * Merges array extends
+ */
+export const mergeArray = (arr, exclude = ['parent', 'node', '__element', 'state', 'context', '__ref']) => {
+  return arr.reduce((a, c) => deepMerge(a, deepClone(c, exclude)), {})
+}
+
+/**
+ * Merges array extends
+ */
+export const mergeAndCloneIfArray = obj => {
+  return isArray(obj) ? mergeArray(obj) : deepClone(obj)
+}
+
+/**
+ * Overwrites object properties with another
+ */
+export const flattenRecursive = (param, prop, stack = []) => {
+  const objectized = mergeAndCloneIfArray(param)
+  stack.push(objectized)
+
+  const extendOfExtend = objectized[prop]
+  if (extendOfExtend) flattenRecursive(extendOfExtend, prop, stack)
+
+  delete objectized[prop]
+
+  return stack
+}

package/dist/cjs/applyParam.js

@@ -1,41 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var applyParam_exports = {};
-__export(applyParam_exports, {
-  applyParam: () => applyParam
-});
-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 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 (isGlobalTransformer && !hasContextDefine) {
-    if ((0, import_utils.isFunction)(isGlobalTransformer)) {
-      isGlobalTransformer(prop, element, node, options);
-      return;
-    }
-  }
-  return { hasDefine, hasContextDefine };
-};

package/dist/cjs/create.js

@@ -1,262 +0,0 @@
-"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;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-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);
-var create_exports = {};
-__export(create_exports, {
-  default: () => create_default
-});
-module.exports = __toCommonJS(create_exports);
-var import_utils = require("@domql/utils");
-var import_tree = require("./tree");
-var import_registry = require("@domql/registry");
-var import_event = require("@domql/event");
-var import_render = require("@domql/render");
-var import_classlist = require("@domql/classlist");
-var import_node = require("@domql/node");
-var import_state = require("@domql/state");
-var import_methods = require("./methods");
-var import_props = require("./props");
-var import_node2 = __toESM(require("./node"), 1);
-var import_extend = require("./extend");
-var import_mixins = require("./mixins");
-var import_iterate = require("./iterate");
-var import_options = __toESM(require("./cache/options"), 1);
-var import_component = require("./utils/component");
-var import_set = require("./methods/set");
-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;
-  }
-  if (element === void 0) {
-    if (ENV === "test" || ENV === "development") {
-      console.warn(key, "element is undefined in", parent && parent.__ref && parent.__ref.path);
-    }
-    element = {};
-  }
-  if ((0, import_utils.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.__hash) {
-    element = { extend: element };
-  }
-  if (!parent)
-    parent = import_tree.ROOT;
-  if ((0, import_utils.isNode)(parent)) {
-    parent = import_tree.ROOT[`${key}_parent`] = { key: ":root", node: parent };
-  }
-  if (checkIfPrimitive(element)) {
-    element = applyValueAsText(element, parent, key);
-  }
-  const assignedKey = (element.key || key || (0, import_utils.createKey)()).toString();
-  if ((0, import_component.checkIfKeyIsComponent)(assignedKey)) {
-    element = (0, import_component.applyKeyComponentAsExtend)(element, parent, assignedKey);
-  }
-  if (checkIfMedia(assignedKey)) {
-    element = applyMediaProps(element, parent, assignedKey);
-  }
-  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 resolveExtends(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);
-  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;
-  (0, import_node2.default)(element, options);
-  if (!ref.__if)
-    return element;
-  (0, import_render.assignNode)(element, parent, key);
-  (0, import_event.triggerEventOn)("renderRouter", element, options);
-  (0, import_event.triggerEventOn)("render", element, options);
-};
-const checkIfPrimitive = (element) => {
-  return (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 isKeyValidHTMLTag = import_registry.TAGS.body.indexOf(key) > -1 && key;
-  return {
-    text: element,
-    tag: extendTag || childExtendTag || isKeyValidHTMLTag || "string"
-  };
-};
-const applyContext = (element, parent, options) => {
-  if (options.context && !import_tree.ROOT.context && !element.context)
-    import_tree.ROOT.context = options.context;
-  if (!element.context)
-    element.context = parent.context || options.context || import_tree.ROOT.context;
-};
-const checkIf = (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_node.cacheNode)({ tag: "fragment" });
-      ref.__ifFragment = (0, import_render.appendNode)(ifFragment, parent.node);
-      delete ref.__if;
-    } else
-      ref.__if = true;
-  } else
-    ref.__if = true;
-};
-const addCaching = (element, parent) => {
-  const { __ref: ref } = 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.__class)
-    ref.__class = {};
-  if (!ref.__classNames)
-    ref.__classNames = {};
-  if (!ref.__attr)
-    ref.__attr = {};
-  if (!ref.__changes)
-    ref.__changes = [];
-  if (!ref.__children)
-    ref.__children = [];
-  const hasRoot = parent && parent.key === ":root";
-  if (!ref.__root)
-    ref.__root = hasRoot ? element : parentRef.__root;
-  if (ENV === "test" || ENV === "development") {
-    if (!parentRef)
-      parentRef = parent.ref = {};
-    if (!parentRef.__path)
-      parentRef.__path = [];
-    ref.__path = parentRef.__path.concat(element.key);
-  }
-};
-const resolveExtends = (element, parent, options) => {
-  const { __ref } = element;
-  element.tag = (0, import_node.detectTag)(element);
-  if (!__ref.__exec)
-    __ref.__exec = {};
-  if (!__ref.__attr)
-    __ref.__attr = {};
-  if (!element.props)
-    element.props = {};
-  if (!element.state)
-    element.state = {};
-  (0, import_state.createState)(element, parent, { skipApplyMethods: true });
-  (0, import_props.createProps)(element, parent);
-  (0, import_component.applyVariant)(element, parent);
-  (0, import_iterate.throughInitialExec)(element, options.propsExcludedFromExec);
-  for (const param in element) {
-    const prop = element[param];
-    if ((0, import_utils.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils.isObject)(import_mixins.registry[param]) || (0, import_component.isVariant)(param))
-      continue;
-    const hasDefined = element.define && element.define[param];
-    const ourParam = import_mixins.registry[param];
-    const hasOptionsDefine = options.define && options.define[param];
-    if (ourParam && !hasOptionsDefine)
-      continue;
-    else if (element[param] && !hasDefined && !hasOptionsDefine) {
-      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;
-};
-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;