domql 1.6.26 → 1.6.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "domql",
   "description": "DOM rendering Javascript framework at early stage.",
-  "version": "1.6.26",
+  "version": "1.6.27",
   "repository": "https://github.com/domql/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

package/src/element/extend.js

@@ -15,7 +15,14 @@ export const applyExtend = (element, parent, options = {}) => {
   let { extend, props, context, __ref } = element
 
   const COMPONENTS = (context && context.components) || options.components
-  if (isString(extend) && COMPONENTS) extend = COMPONENTS[extend]
+  if (isString(extend)) {
+    if (COMPONENTS && COMPONENTS[extend]) extend = COMPONENTS[extend]
+    else {
+      if (ENV !== 'test' || ENV !== 'development') {
+        console.warn('Extend is string but component was not found:', extend)
+      } extend = {}
+    }
+  }
 
   const extendStack = getExtendStack(extend)
 
@@ -55,7 +62,7 @@ export const applyExtend = (element, parent, options = {}) => {
     stack = [].concat(stack, defaultOptionsExtend)
   }
 
-  __ref.__extend = stack
+  if (__ref) __ref.__extend = stack
   const findAndReplaceStrings = replaceStringsWithComponents(stack, COMPONENTS)
   let mergedExtend = cloneAndMergeArrayExtend(findAndReplaceStrings)
 

package/src/element/utils/component.js

@@ -1,6 +1,7 @@
 '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) => {
@@ -10,6 +11,15 @@ export const checkIfKeyIsComponent = (key) => {
   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 { extend, props, state, childExtend, childProps, on } = element
   const hasComponentAttrs = extend || childExtend || props || state || on
@@ -27,12 +37,7 @@ export const extendizeByKey = (element, parent, key) => {
       extend: extendKey
     }
   } else if (extend) {
-    const { extend } = element
-    const preserveExtend = isArray(extend) ? extend : [extend]
-    return {
-      ...element,
-      extend: [extendKey].concat(preserveExtend)
-    }
+    addAdditionalExtend(extendKey, element)
   } else if (isFunction(element)) {
     return {
       extend: extendKey,
@@ -74,12 +79,32 @@ export const hasVariantProp = (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 } = element.props
-  const extendVariant = element[`.${variant}`] || element[`$${variant}`]
-  if (extendVariant) {
-    return overwriteDeep(element, extendVariant)
-  }
+  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
 }