smbls 0.8.31 → 0.8.34

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.8.31",
+  "version": "0.8.34",
   "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,61 +3,91 @@
 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) => applyConditionalCaseProps(key, props, isSubtree ? result : result.case, element)
+}
+
+const execClass = (key, props, result, element) => {
   const { class: className } = element
-  const subPropsClassname = {}
-  for (const prop in subProps) {
-    // if (prop.slice(0, 1) === ':') {
-    //   applySelectorProps(prop, lib, element)
-    //   continue
-    // }
-
-    const classnameExec = className[prop]
-    if (typeof classnameExec !== 'function') continue
-
-    let classExec = classnameExec({ props: subProps })
-    if (isArray(classExec)) {
-      classExec = classExec.reduce((a, c) => merge(a, c), {})
-    }
+  const classnameExec = className[key]
+
+  if (typeof classnameExec !== 'function') return
+
+  let classExec = classnameExec({ props })
+  if (isArray(classExec)) {
+    classExec = classExec.reduce((a, c) => merge(a, c), {})
+  }
+
+  for (const finalProp in classExec) {
+    result[finalProp] = classExec[finalProp]
+  }
+}
+
+const convertPropsToClass = (props, result, element) => {
+  const propsClassObj = {}
 
-    for (const finalProp in classExec) {
-      subPropsClassname[finalProp] = classExec[finalProp]
+  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)
     }
   }
-  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 key and ${mediaName}`
-  const mediaProps = props[key]
-  lib.media[mediaKey] = convertPropsToClass(mediaProps, lib, element)
+  const mediaKey = `@media screen and ${mediaName}`
+  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))
+  merge(result, convertPropsToClass(props, result, element))
 }
 
-const keySetters = {
-  '@': applyMediaProps,
-  ':': applySelectorProps,
-  $: applyCaseProps
+const applyConditionalCaseProps = (key, props, result, element) => {
+  const caseKey = key.slice(1)
+  if (!element.props[caseKey]) return
+  merge(result, convertPropsToClass(props, result, element))
 }
 
-const init = (el, s) => {
-  const { props, class: className } = el
+const init = (element, s) => {
+  const { props, class: className } = element
 
   const CLASS_NAMES = {
     media: {},
@@ -67,59 +97,50 @@ const init = (el, s) => {
 
   for (const key in props) {
     const setter = keySetters[key.slice(0, 1)]
-    if (setter) setter(key, CLASS_NAMES, el)
-    // if (key.slice(0, 1) === '@') {
-    //   applyMediaProps(key, CLASS_NAMES.media, el)
-    // } else if (key.slice(0, 1) === ':') {
-    //   applySelectorProps(key, CLASS_NAMES.selector, el)
-    // } else if (key.slice(0, 1) === '$') {
-    //   applyCaseProps(key, CLASS_NAMES.case, el)
-    // }
+    if (setter) setter(key, props[key], CLASS_NAMES, element)
   }
 
   merge(className, CLASS_NAMES)
 }
 
 export const Responsive = {
-  on: {
-    init,
-    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) {
-        const { theme } = props
-        // console.group(props.theme)
-
-        const convertTheme = getTheme(theme)
-
-        for (const key in convertTheme) {
-          if (key.includes('dark') || key.includes('light')) {
-            const parse = key.split(': ')[1].split(')')[0]
-            if (rootState.globalTheme === parse) {
-              props.theme = getTheme(theme[key])
-            } else props.theme = theme
-            className.MEDIA_FORCED_BY_STATE = props.theme
-          }
-        }
-        // console.groupEnd(props.theme)
+  on: { init }
+}
+
+export const initUpdate = el => {
+  // FORCE STATE UPDATE:
+  const { props, class: className } = el
+  const rootState = el.__root ? el.__root.state : el.state
+  if (el.key !== 'app') return
+
+  if (props.theme) {
+    const { theme } = props
+    // console.group(props.theme)
+
+    const convertTheme = getTheme(theme)
+
+    for (const key in convertTheme) {
+      if (key.includes('dark') || key.includes('light')) {
+        const parse = key.split(': ')[1].split(')')[0]
+        if (rootState.globalTheme === parse) {
+          props.theme = getTheme(theme[key])
+        } else props.theme = theme
+        className.MEDIA_FORCED_BY_STATE = props.theme
       }
+    }
+    // console.groupEnd(props.theme)
+  }
 
-      for (const screen in props) {
-        if (screen.slice(0, 1) === '@') {
-          const mediaName = screen.slice(1)
-          const mediaKey = `@media screen and ${CONFIG_MEDIA[mediaName]}`
-          if (mediaName === 'dark' || mediaName === 'light') {
-            const { MEDIA_FORCE } = className
-            if (!MEDIA_FORCE) className.media = {}
-            if (rootState.globalTheme === mediaName) {
-              className.MEDIA_FORCED = className.MEDIA[mediaKey]
-            } else className.MEDIA_FORCED = {}
-          }
-        }
+  for (const screen in props) {
+    if (screen.slice(0, 1) === '@') {
+      const mediaName = screen.slice(1)
+      const mediaKey = `@media screen and ${CONFIG_MEDIA[mediaName]}`
+      if (mediaName === 'dark' || mediaName === 'light') {
+        const { MEDIA_FORCE } = className
+        if (!MEDIA_FORCE) className.media = {}
+        if (rootState.globalTheme === mediaName) {
+          className.MEDIA_FORCED = className.MEDIA[mediaKey]
+        } else className.MEDIA_FORCED = {}
       }
     }
   }