@symbo.ls/atoms 2.11.206 → 2.11.212

package/Collection.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { isState, getChildStateInKey } from '@domql/state'
-import { isString, isNot, isArray, isObject, isObjectLike, diff, deepClone } from '@domql/utils'
+import { isString, isNot, isArray, isObject, isObjectLike, diff, deepClone, deepContains } from '@domql/utils'
 
 export const Collection = {
   define: {
@@ -46,15 +46,22 @@ export const Collection = {
         }
       }
 
-      const obj = { tag: 'fragment' }
+      const obj = {
+        tag: 'fragment',
+        props: {
+          childProps: el.props.childProps
+        }
+      }
 
       for (const key in param) {
         const value = param[key]
         obj[key] = { state: isObjectLike(value) ? value : { value } }
       }
 
-      el.removeContent()
-      el.content = obj
+      if (!deepContains(obj, el.content)) {
+        el.removeContent()
+        el.content = obj
+      }
 
       return obj
     },
@@ -69,14 +76,22 @@ export const Collection = {
       if (isState(param)) param = param.parse()
       if (isNot(param)('array', 'object')) return
 
-      const obj = { tag: 'fragment' }
+      const obj = {
+        tag: 'fragment',
+        props: {
+          childProps: el.props.childProps
+        }
+      }
+
       for (const key in param) {
         const value = param[key]
         obj[key] = { props: isObjectLike(value) ? value : { value } }
       }
 
-      el.removeContent()
-      el.content = obj
+      if (!deepContains(obj, el.content)) {
+        el.removeContent()
+        el.content = obj
+      }
 
       // const set = () => {
       //   el.set(obj, { preventDefineUpdate: '$setPropsCollection' })

package/Img.js

@@ -3,12 +3,6 @@
 export const Img = {
   tag: 'img',
 
-  props: {
-    src: '',
-    alt: '',
-    title: ''
-  },
-
   attr: {
     src: ({ props }) => props.src,
     alt: ({ props }) => props.alt,

package/Media.js

@@ -22,6 +22,9 @@ export const keySetters = {
   $: (key, props, result, element, isSubtree) => applyCaseProps(
     key, props, isSubtree ? result : (result && result.case), element
   ),
+  '-': (key, props, result, element, isSubtree) => applyVariableProps(
+    key, props, isSubtree ? result : (result && result.variable), element
+  ),
   '.': (key, props, result, element, isSubtree) => applyConditionalCaseProps(
     key, props, isSubtree ? result : (result && result.case), element
   ),
@@ -110,6 +113,11 @@ const applyCaseProps = (key, props, result, element) => {
   return merge(result, convertPropsToClass(props, result, element))
 }
 
+const applyVariableProps = (key, props, result, element) => {
+  result[key] = props
+  return result
+}
+
 const applyConditionalCaseProps = (key, props, result, element) => {
   const caseKey = key.slice(1)
   const isPropTrue = element.props[caseKey] || element.state[caseKey]
@@ -131,7 +139,8 @@ const beforeClassAssign = (element, s) => {
   const CLASS_NAMES = {
     media: {},
     selector: {},
-    case: {}
+    case: {},
+    variable: {}
   }
 
   if (!context) return

package/Theme.js

@@ -10,6 +10,7 @@ import {
 } from '@symbo.ls/scratch'
 
 import { depth } from './Shape/style'
+import { isUndefined } from '@domql/utils'
 
 export const getSystemTheme = ({ context, state }) => {
   const rootState = state && state.__root
@@ -29,7 +30,7 @@ export const Theme = {
   },
 
   class: {
-    depth: ({ props, deps }) => props.depth && deps.depth[props.depth],
+    depth: ({ props, deps }) => !isUndefined(props.depth) && deps.depth[props.depth],
 
     theme: (element) => {
       const { props, deps } = element
@@ -74,70 +75,70 @@ export const Theme = {
         backgroundImage: deps.transformBackgroundImage(props.backgroundImage, globalTheme)
       })
     },
-    backgroundSize: ({ props }) => props.backgroundSize
+    backgroundSize: ({ props }) => !isUndefined(props.backgroundSize)
       ? ({
           backgroundSize: props.backgroundSize
         })
       : null,
-    backgroundPosition: ({ props }) => props.backgroundPosition
+    backgroundPosition: ({ props }) => !isUndefined(props.backgroundPosition)
       ? ({
           backgroundPosition: props.backgroundPosition
         })
       : null,
 
-    textStroke: ({ props, deps }) => props.textStroke
+    textStroke: ({ props, deps }) => !isUndefined(props.textStroke)
       ? ({
           WebkitTextStroke: deps.transformTextStroke(props.textStroke)
         })
       : null,
 
-    outline: ({ props, deps }) => props.outline && ({
+    outline: ({ props, deps }) => !isUndefined(props.outline) && ({
       outline: deps.transformBorder(props.outline)
     }),
 
-    border: ({ props, deps }) => props.border && ({
+    border: ({ props, deps }) => !isUndefined(props.border) && ({
       border: deps.transformBorder(props.border)
     }),
-    borderColor: ({ props, deps }) => props.borderColor && ({
+    borderColor: ({ props, deps }) => !isUndefined(props.borderColor) && ({
       borderColor: deps.getMediaColor(props.borderColor)
     }),
-    borderStyle: ({ props }) => props.borderStyle && ({
+    borderStyle: ({ props }) => !isUndefined(props.borderStyle) && ({
       borderStyle: props.borderStyle
     }),
 
-    borderLeft: ({ props, deps }) => props.borderLeft && ({
+    borderLeft: ({ props, deps }) => !isUndefined(props.borderLeft) && ({
       borderLeft: deps.transformBorder(props.borderLeft)
     }),
-    borderTop: ({ props, deps }) => props.borderTop && ({
+    borderTop: ({ props, deps }) => !isUndefined(props.borderTop) && ({
       borderTop: deps.transformBorder(props.borderTop)
     }),
-    borderRight: ({ props, deps }) => props.borderRight && ({
+    borderRight: ({ props, deps }) => !isUndefined(props.borderRight) && ({
       borderRight: deps.transformBorder(props.borderRight)
     }),
-    borderBottom: ({ props, deps }) => props.borderBottom && ({
+    borderBottom: ({ props, deps }) => !isUndefined(props.borderBottom) && ({
       borderBottom: deps.transformBorder(props.borderBottom)
     }),
 
-    boxShadow: ({ props, deps }) => props.boxShadow && ({
+    boxShadow: ({ props, deps }) => !isUndefined(props.boxShadow) && ({
       boxShadow: deps.transformShadow(props.boxShadow)
     }),
 
-    textShadow: ({ props, deps }) => props.textShadow && ({
+    textShadow: ({ props, deps }) => !isUndefined(props.textShadow) && ({
       textShadow: deps.transformShadow(props.textShadow)
     }),
 
-    opacity: ({ props }) => props.opacity && ({
+    opacity: ({ props }) => !isUndefined(props.opacity) && ({
       opacity: props.opacity
     }),
-    visibility: ({ props }) => props.visibility && ({
+    visibility: ({ props }) => !isUndefined(props.visibility) && ({
       visibility: props.visibility
     }),
 
-    columnRule: ({ props, deps }) => props.columnRule && ({
+    columnRule: ({ props, deps }) => !isUndefined(props.columnRule) && ({
       columnRule: deps.transformBorder(props.columnRule)
     }),
 
-    appearance: ({ props }) => props.appearance && ({
+    appearance: ({ props }) => !isUndefined(props.appearance) && ({
       appearance: props.appearance
     })
   }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.206",
+  "version": "2.11.212",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "ab27f765b859e8922934fee257f5d1921fbf4f5d",
+  "gitHead": "12914eac8527ac1df36183098bbf3dfcfaa2e027",
   "dependencies": {
     "@domql/state": "latest",
     "@domql/utils": "latest",