domql 1.5.134 → 1.5.136

package/package.json

@@ -2,7 +2,7 @@
   "name": "domql",
   "description": "DOM rendering Javascript framework at early stage.",
   "author": "symbo.ls",
-  "version": "1.5.134",
+  "version": "1.5.136",
   "repository": "https://github.com/domql/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

package/src/element/create.js

@@ -8,7 +8,7 @@ import root from './root'
 import createNode from './node'
 import { appendNode, assignNode } from './assign'
 import { applyExtend } from './extend'
-import set, { removeContentElement } from './set'
+import set from './set'
 import createState from './state'
 import createProps from './props'
 import update from './update'
@@ -18,6 +18,13 @@ import cacheNode, { detectTag } from './cache'
 import { registry } from './mixins'
 import { throughInitialExec } from './iterate'
 import OPTIONS from './options'
+
+import {
+  applyComponentFromContext,
+  applyKeyComponentAsExtend,
+  checkIfKeyIsComponent
+} from '../utils/component'
+import { removeContentElement } from './remove'
 // import { overwrite, clone, fillTheRest } from '../utils'
 
 const ENV = process.env.NODE_ENV
@@ -276,54 +283,6 @@ const resolveExtends = (element, parent, options) => {
   return element
 }
 
-const checkIfKeyIsComponent = (key) => {
-  const isFirstKeyString = isString(key)
-  if (!isFirstKeyString) return
-
-  const firstCharKey = key.slice(0, 1)
-
-  return /^[A-Z]*$/.test(firstCharKey)
-}
-
-const extendizeByKey = (element, parent, key) => {
-  const { extend, props, state, childExtend, childProps } = element
-  const hasComponentAttrs = extend || childExtend || props || state || element.on
-  const componentKey = key.split('_')[0]
-
-  if (!hasComponentAttrs || childProps) {
-    return {
-      extend: componentKey || key,
-      props: { ...element }
-    }
-  } else if (!extend || extend === true) {
-    return {
-      ...element,
-      extend: componentKey || key
-    }
-  }
-}
-
-const applyKeyComponentAsExtend = (element, parent, key) => {
-  return extendizeByKey(element, parent, key) || element
-}
-
-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 = {}
-    }
-  }
-}
-
 const checkIfMedia = (key) => key.slice(0, 1) === '@'
 
 const applyMediaProps = (element, parent, key) => {

package/src/element/props.js

@@ -8,16 +8,34 @@ const objectizeStringProperty = propValue => {
   return propValue
 }
 
-const createPropsStack = (element, parent) => {
-  const { props, __ref } = element
-  const propsStack = __ref.propsStack = []
-
-  const matchParent = parent.props && parent.props[element.key]
-  const matchParentChildProps = parent.props && parent.props.childProps
+const inheritParentProps = (element, parent) => {
+  let propsStack = []
+  const parentProps = exec(parent, parent.state).props
 
-  if (matchParent) propsStack.push(objectizeStringProperty(matchParent))
+  const matchParent = parent.props && parentProps[element.key]
+  const matchParentIsString = isString(matchParent)
+  const matchParentChildProps = parentProps && parentProps.childProps
+
+  if (matchParent) {
+    if (matchParentIsString) {
+      const inheritedStringExists = propsStack.filter(v => v.inheritedString)[0]
+      if (inheritedStringExists) inheritedStringExists.inheritedString = matchParent
+      else {
+        propsStack = [].concat(objectizeStringProperty(matchParent), propsStack)
+      }
+    } else {
+      propsStack.push(objectizeStringProperty(matchParent))
+    }
+  }
   if (matchParentChildProps) propsStack.push(matchParentChildProps)
 
+  return propsStack
+}
+
+const createPropsStack = (element, parent) => {
+  const { props, __ref } = element
+  const propsStack = __ref.__props = inheritParentProps(element, parent)
+
   if (isObject(props)) propsStack.push(props)
   else if (props === 'inherit' && parent.props) propsStack.push(parent.props)
   else if (props) propsStack.push(props)
@@ -29,11 +47,9 @@ const createPropsStack = (element, parent) => {
     })
   }
 
-  return propsStack
-}
+  __ref.__props = propsStack
 
-const inheritProps = (element, parent) => {
-  element.props = (parent && parent.props) || { update, __element: element }
+  return propsStack
 }
 
 export const syncProps = (props, element) => {
@@ -57,7 +73,7 @@ const createProps = function (element, parent, cached) {
     __ref.__props = propsStack
     syncProps(propsStack, element)
     element.props.update = update
-  } else inheritProps(element, parent)
+  }
 
   return element
 }
@@ -66,19 +82,11 @@ export const updateProps = (newProps, element, parent) => {
   const { __ref } = element
   let propsStack = __ref.__props
 
-  const matchParent = parent.props && parent.props[element.key]
-  const matchParentIsString = isString(matchParent)
-  if (matchParentIsString) {
-    const inheritedStringExists = propsStack.filter(v => v.inheritedString)[0]
-    if (inheritedStringExists) inheritedStringExists.inheritedString = matchParent
-    else {
-      propsStack = __ref.__props = [].concat(objectizeStringProperty(matchParent), propsStack)
-    }
-  }
+  const parentProps = inheritParentProps(element, parent)
+  if (parentProps) propsStack = __ref.__props = [].concat(parentProps, propsStack)
   if (newProps) propsStack = __ref.__props = [].concat(newProps, propsStack)
 
   if (propsStack) syncProps(propsStack, element)
-  else inheritProps(element, parent)
 
   // console.log(cachedProps)
   return element
@@ -86,7 +94,6 @@ export const updateProps = (newProps, element, parent) => {
 
 function update (props, options) {
   const element = this.__element
-  // element.update({ props })
   element.update({ props }, options)
 }
 

package/src/element/remove.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import { isFunction } from '@domql/utils'
+
+export const removeContentElement = function (el) {
+  const element = el || this
+  const { __ref } = element
+
+  if (element.content) {
+    if (element.content.node) {
+      if (element.content.tag === 'fragment') element.node.innerHTML = ''
+      else element.node.removeChild(element.content.node)
+    }
+
+    const { __cached } = __ref
+    if (__cached && __cached.content) {
+      if (__cached.content.tag === 'fragment') __cached.content.parent.node.innerHTML = ''
+      else if (__cached.content && isFunction(__cached.content.remove)) __cached.content.remove()
+    }
+
+    delete element.content
+  }
+}

package/src/element/set.js

@@ -1,30 +1,12 @@
 'use strict'
 
-import { isEqualDeep, isFunction } from '@domql/utils'
+import { isEqualDeep } from '@domql/utils'
+import { removeContentElement } from './remove'
+
 import create from './create'
 import { registry } from './mixins'
 import OPTIONS from './options'
 
-export const removeContentElement = function (el) {
-  const element = el || this
-  const { __ref } = element
-
-  if (element.content) {
-    if (element.content.node) {
-      if (element.content.tag === 'fragment') element.node.innerHTML = ''
-      else element.node.removeChild(element.content.node)
-    }
-
-    const { __cached } = __ref
-    if (__cached && __cached.content) {
-      if (__cached.content.tag === 'fragment') __cached.content.parent.node.innerHTML = ''
-      else if (__cached.content && isFunction(__cached.content.remove)) __cached.content.remove()
-    }
-
-    delete element.content
-  }
-}
-
 const set = function (params, options = {}, el) {
   const element = el || this
   const __contentRef = element.content && element.content.__ref

package/src/element/update.js

@@ -28,7 +28,7 @@ const UPDATE_DEFAULT_OPTIONS = {
 
 const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   const element = this
-  const { parent, node } = element
+  const { parent, node, key } = element
 
   let __ref = element.__ref
   if (!__ref) __ref = element.__ref = {}
@@ -94,7 +94,11 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     }
   } else if (!__ref.__hasRootState) element.state = (parent && parent.state) || {}
 
-  if (__ref.__if && !options.preventPropsUpdate) updateProps(params.props, element, parent)
+  if (__ref.__if && !options.preventPropsUpdate) {
+    const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps)
+    // if (hasParentProps) console.log(hasParentProps.value)
+    updateProps(params.props || (hasParentProps && {}), element, parent)
+  }
 
   if (element.on && isFunction(element.on.initUpdate) && !options.ignoreInitUpdate) {
     const whatinitreturns = on.initUpdate(element.on.initUpdate, element, element.state)

package/src/utils/component.js

@@ -0,0 +1,56 @@
+'use strict'
+
+import { exec, isFunction, isString } from '@domql/utils'
+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 extendizeByKey = (element, parent, key) => {
+  const { extend, props, state, childExtend, childProps } = element
+  const hasComponentAttrs = extend || childExtend || props || state || element.on
+  const componentKey = key.split('_')[0]
+
+  if (!hasComponentAttrs || childProps) {
+    return {
+      extend: componentKey || key,
+      props: { ...element }
+    }
+  } else if (!extend || extend === true) {
+    return {
+      ...element,
+      extend: componentKey || key
+    }
+  } else if (isFunction(element)) {
+    console.log(element)
+    return {
+      extend: componentKey || key,
+      props: { ...element }
+    }
+  }
+}
+
+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 = {}
+    }
+  }
+}

package/src/utils/index.js

@@ -2,3 +2,4 @@
 
 export * from './object'
 export * from './extendUtils'
+export * from './component'

package/dist/cjs/element/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/element/assign.js

@@ -1,35 +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 assign_exports = {};
-__export(assign_exports, {
-  appendNode: () => appendNode,
-  assignNode: () => assignNode
-});
-module.exports = __toCommonJS(assign_exports);
-const appendNode = (node, parentNode) => {
-  parentNode.appendChild(node);
-  return node;
-};
-const assignNode = (element, parent, key) => {
-  parent[key || element.key] = element;
-  if (element.tag !== "shadow") {
-    appendNode(element.node, parent.node);
-  }
-  return element;
-};

package/dist/cjs/element/cache.js

@@ -1,74 +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 cache_exports = {};
-__export(cache_exports, {
-  default: () => cache_default,
-  detectTag: () => detectTag
-});
-module.exports = __toCommonJS(cache_exports);
-var import_globals = require("@domql/globals");
-var import_utils = require("@domql/utils");
-var import_report = require("@domql/report");
-var import_event = require("../event");
-var import_utils2 = require("../utils");
-const cachedElements = {};
-const createNode = (element) => {
-  const { tag } = element;
-  if (tag) {
-    if (tag === "string")
-      return import_globals.document.createTextNode(element.text);
-    else if (tag === "fragment") {
-      return import_globals.document.createDocumentFragment();
-    } else if (tag === "svg" || tag === "path") {
-      return import_globals.document.createElementNS("http://www.w3.org/2000/svg", tag);
-    } else
-      return import_globals.document.createElement(tag);
-  } else {
-    return import_globals.document.createElement("div");
-  }
-};
-const detectTag = (element) => {
-  let { tag, key } = element;
-  tag = (0, import_utils.exec)(tag, element);
-  if (tag === true)
-    tag = key;
-  if ((0, import_utils.isString)(tag)) {
-    const tagExists = (0, import_utils2.isTagRegistered)(tag) > -1;
-    if (tagExists)
-      return tag;
-  } else {
-    const isKeyATag = (0, import_utils2.isTagRegistered)(key) > -1;
-    if (isKeyATag)
-      return key;
-  }
-  return "div";
-};
-var cache_default = (element) => {
-  const tag = element.tag = detectTag(element);
-  if (!import_event.can.render(element)) {
-    return (0, import_report.report)("HTMLInvalidTag");
-  }
-  let cachedTag = cachedElements[tag];
-  if (!cachedTag)
-    cachedTag = cachedElements[tag] = createNode(element);
-  const clonedNode = cachedTag.cloneNode(true);
-  if (tag === "string")
-    clonedNode.nodeValue = element.text;
-  return clonedNode;
-};