smbls 0.8.31 → 0.8.32

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.32",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [

package/src/Media.js

@@ -6,6 +6,7 @@ import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA, getTheme } from '@symbo.l
 const convertPropsToClass = (subProps, lib, element) => {
   const { class: className } = element
   const subPropsClassname = {}
+
   for (const prop in subProps) {
     // if (prop.slice(0, 1) === ':') {
     //   applySelectorProps(prop, lib, element)
@@ -24,13 +25,20 @@ const convertPropsToClass = (subProps, lib, element) => {
       subPropsClassname[finalProp] = classExec[finalProp]
     }
   }
+
+  // console.group(subProps)
+  // console.log(subPropsClassname)
+  // console.log(lib)
+  // console.log(className)
+  // console.groupEnd(subProps)
+
   return subPropsClassname
 }
 
 const applyMediaProps = (key, lib, element) => {
   const { props } = element
   const mediaName = CONFIG_MEDIA[key.slice(1)]
-  const mediaKey = `@media key and ${mediaName}`
+  const mediaKey = `@media screen and ${mediaName}`
   const mediaProps = props[key]
   lib.media[mediaKey] = convertPropsToClass(mediaProps, lib, element)
 }
@@ -68,58 +76,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)
-    // }
   }
 
   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
+  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)
+  }
 
-      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 = {}
       }
     }
   }