smbls 0.8.32 → 0.8.33

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.8.32",
+  "version": "0.8.33",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [

package/src/Link.js

@@ -7,7 +7,7 @@ export const Link = {
   proto: [Shape, Text],
   tag: 'a',
   props: {
-    theme: 'link',
+    // theme: 'link',
     aria: {},
     fontWeight: 'bold',
     textDecoration: 'none'

package/src/Media.js

@@ -3,69 +3,85 @@
 import { merge, isArray } from '@domql/utils'
 import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA, getTheme } from '@symbo.ls/scratch'
 
-const convertPropsToClass = (subProps, lib, element) => {
+// const keySetters = {
+//   '@': (props, result, element, isSubtree) => {
+//     if (isSubtree) result.media = {}
+//     return applyMediaProps(props, result.media, element)
+//   },
+//   ':': (props, result, element, isSubtree) => {
+//     if (isSubtree) result.selector = {}
+//     return applySelectorProps(props, result.selector, element)
+//   },
+//   $: (props, result, element, isSubtree) => {
+//     if (isSubtree) result.case = {}
+//     return applyCaseProps(props, result.case, element)
+//   }
+// }
+
+// const keySetters = {
+//   '@': (props, result, element) => applyMediaProps(props, result.media, element),
+//   ':': (props, result, element) => applySelectorProps(props, result.selector, element),
+//   $: (props, result, element) => applyCaseProps(props, result.case, element)
+// }
+
+const keySetters = {
+  '@': (key, props, result, element, isSubtree) => applyMediaProps(key, props, isSubtree ? result : result.media, element),
+  ':': (key, props, result, element, isSubtree) => applySelectorProps(key, props, isSubtree ? result : result.selector, element),
+  $: (key, props, result, element, isSubtree) => applyCaseProps(key, props, isSubtree ? result : result.case, element),
+  '.': (key, props, result, element, isSubtree) => applyCaseProps(key, props, isSubtree ? result : result.case, element)
+}
+
+const execClass = (key, props, result, element) => {
   const { class: className } = element
-  const subPropsClassname = {}
+  const classnameExec = className[key]
 
-  for (const prop in subProps) {
-    // if (prop.slice(0, 1) === ':') {
-    //   applySelectorProps(prop, lib, element)
-    //   continue
-    // }
+  if (typeof classnameExec !== 'function') return
 
-    const classnameExec = className[prop]
-    if (typeof classnameExec !== 'function') continue
+  let classExec = classnameExec({ props })
+  if (isArray(classExec)) {
+    classExec = classExec.reduce((a, c) => merge(a, c), {})
+  }
 
-    let classExec = classnameExec({ props: subProps })
-    if (isArray(classExec)) {
-      classExec = classExec.reduce((a, c) => merge(a, c), {})
-    }
+  for (const finalProp in classExec) {
+    result[finalProp] = classExec[finalProp]
+  }
+}
 
-    for (const finalProp in classExec) {
-      subPropsClassname[finalProp] = classExec[finalProp]
+const convertPropsToClass = (props, result, element) => {
+  const propsClassObj = {}
+
+  for (const key in props) {
+    const setter = keySetters[key.slice(0, 1)]
+    if (setter) {
+      setter(key, props[key], propsClassObj, element, true)
+      continue
+    } else {
+      execClass(key, props, propsClassObj, element)
     }
   }
 
-  // console.group(subProps)
-  // console.log(subPropsClassname)
-  // console.log(lib)
-  // console.log(className)
-  // console.groupEnd(subProps)
-
-  return subPropsClassname
+  return propsClassObj
 }
 
-const applyMediaProps = (key, lib, element) => {
-  const { props } = element
+const applyMediaProps = (key, props, result, element) => {
   const mediaName = CONFIG_MEDIA[key.slice(1)]
   const mediaKey = `@media screen and ${mediaName}`
-  const mediaProps = props[key]
-  lib.media[mediaKey] = convertPropsToClass(mediaProps, lib, element)
+  result[mediaKey] = convertPropsToClass(props, result, element)
 }
 
-const applySelectorProps = (key, lib, element) => {
-  const { props } = element
+const applySelectorProps = (key, props, result, element) => {
   const selectorKey = `&${key}`
-  const selectorProps = props[key]
-  lib.selector[selectorKey] = convertPropsToClass(selectorProps, lib, element)
+  result[selectorKey] = convertPropsToClass(props, result, element)
 }
 
-const applyCaseProps = (key, lib, element) => {
-  const { props } = element
+const applyCaseProps = (key, props, result, element) => {
   const caseKey = key.slice(1)
-  if (!CONFIG_CASES[caseKey]) return
-  const caseProps = props[key]
-  merge(lib.case, convertPropsToClass(caseProps, lib, element))
+  if (!(CONFIG_CASES[caseKey] || element.props[caseKey])) return
+  merge(result, convertPropsToClass(props, result, element))
 }
 
-const keySetters = {
-  '@': applyMediaProps,
-  ':': applySelectorProps,
-  $: applyCaseProps
-}
-
-const init = (el, s) => {
-  const { props, class: className } = el
+const init = (element, s) => {
+  const { props, class: className } = element
 
   const CLASS_NAMES = {
     media: {},
@@ -75,7 +91,7 @@ const init = (el, s) => {
 
   for (const key in props) {
     const setter = keySetters[key.slice(0, 1)]
-    if (setter) setter(key, CLASS_NAMES, el)
+    if (setter) setter(key, props[key], CLASS_NAMES, element)
   }
 
   merge(className, CLASS_NAMES)
@@ -89,7 +105,6 @@ export const initUpdate = el => {
   // FORCE STATE UPDATE:
   const { props, class: className } = el
   const rootState = el.__root ? el.__root.state : el.state
-  console.log(props)
   if (el.key !== 'app') return
 
   if (props.theme) {