smbls 0.8.33 → 0.8.36

package/package.json

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

package/src/Box.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive } from '.'
+import { Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, Interaction } from '.'
 
 const PropsCSS = {
   class: {
@@ -9,5 +9,5 @@ const PropsCSS = {
 }
 
 export const Box = {
-  proto: [Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS]
+  proto: [Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS, Interaction]
 }

package/src/Interaction.js

@@ -0,0 +1,7 @@
+'use strict'
+
+export const Interaction = {
+  class: {
+    cursor: ({ props }) => ({ cursor: props.cursor })
+  }
+}

package/src/Media copy.js

@@ -0,0 +1,122 @@
+'use strict'
+
+import { merge, isArray } from '@domql/utils'
+import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA, getTheme } from '@symbo.ls/scratch'
+
+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 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 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 propsClassObj
+}
+
+const applyMediaProps = (key, props, result, element) => {
+  const mediaName = CONFIG_MEDIA[key.slice(1)]
+  const mediaKey = `@media screen and ${mediaName}`
+  result[mediaKey] = convertPropsToClass(props, result, element)
+}
+
+const applySelectorProps = (key, props, result, element) => {
+  const selectorKey = `&${key}`
+  result[selectorKey] = convertPropsToClass(props, result, element)
+}
+
+const applyCaseProps = (key, props, result, element) => {
+  const caseKey = key.slice(1)
+  if (!CONFIG_CASES[caseKey]) return
+  merge(result, convertPropsToClass(props, result, element))
+}
+
+const applyConditionalCaseProps = (key, props, result, element) => {
+  const caseKey = key.slice(1)
+  if (!element.props[caseKey]) return // remove classname if not here
+  merge(result, convertPropsToClass(props, result, element))
+}
+
+const init = (element, s) => {
+  const { props, class: className } = element
+
+  const CLASS_NAMES = {
+    media: {},
+    selector: {},
+    case: {}
+  }
+
+  for (const key in props) {
+    const setter = keySetters[key.slice(0, 1)]
+    if (setter) setter(key, props[key], CLASS_NAMES, element)
+  }
+
+  merge(className, CLASS_NAMES)
+}
+
+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
+  const { props, class: className } = element
+
+  if (props.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 = {}
+      }
+    }
+  }
+}
+
+export const Responsive = {
+  on: { init, initUpdate }
+}

package/src/Media.js

@@ -1,34 +1,13 @@
 'use strict'
 
 import { merge, isArray } from '@domql/utils'
-import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA, getTheme } from '@symbo.ls/scratch'
-
-// 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)
-// }
+import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA } from '@symbo.ls/scratch'
 
 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)
+  '.': (key, props, result, element, isSubtree) => applyConditionalCaseProps(key, props, isSubtree ? result : result.case, element)
 }
 
 const execClass = (key, props, result, element) => {
@@ -45,6 +24,8 @@ const execClass = (key, props, result, element) => {
   for (const finalProp in classExec) {
     result[finalProp] = classExec[finalProp]
   }
+
+  return classExec
 }
 
 const convertPropsToClass = (props, result, element) => {
@@ -65,22 +46,44 @@ const convertPropsToClass = (props, result, element) => {
 
 const applyMediaProps = (key, props, result, element) => {
   const mediaName = CONFIG_MEDIA[key.slice(1)]
+  const generatedClass = convertPropsToClass(props, result, element)
+  const rootState = element.__root ? element.__root.state : element.state
+  const { globalTheme } = rootState
+  const name = key.slice(1)
+  const matchesGlobal = name === globalTheme
+
+  if (globalTheme) {
+    if (matchesGlobal) merge(result, generatedClass)
+    return
+  }
+
   const mediaKey = `@media screen and ${mediaName}`
-  result[mediaKey] = convertPropsToClass(props, result, element)
+  result[mediaKey] = generatedClass
+  return result[mediaKey]
 }
 
 const applySelectorProps = (key, props, result, element) => {
   const selectorKey = `&${key}`
   result[selectorKey] = convertPropsToClass(props, result, element)
+  return result[selectorKey]
 }
 
 const applyCaseProps = (key, props, result, element) => {
   const caseKey = key.slice(1)
-  if (!(CONFIG_CASES[caseKey] || element.props[caseKey])) return
-  merge(result, convertPropsToClass(props, result, element))
+  if (!CONFIG_CASES[caseKey]) return
+  return merge(result, convertPropsToClass(props, result, element))
+}
+
+const applyConditionalCaseProps = (key, props, result, element) => {
+  const caseKey = key.slice(1)
+  const isPropTrue = element.props[caseKey]
+  console.log(isPropTrue)
+  console.log(result)
+  if (!isPropTrue) return // remove classname if not here
+  return merge(result, convertPropsToClass(props, result, element))
 }
 
-const init = (element, s) => {
+const beforeClassAssign = (element, s) => {
   const { props, class: className } = element
 
   const CLASS_NAMES = {
@@ -97,45 +100,46 @@ const init = (element, s) => {
   merge(className, CLASS_NAMES)
 }
 
-export const Responsive = {
-  on: { init }
-}
+export const initUpdate = element => {
+  const { props, class: className } = element
+  const rootState = element.__root ? element.__root.state : element.state
+  const { globalTheme } = rootState
 
-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)
+  if (!globalTheme) return
+
+  const CLASS_NAMES = {
+    media: {},
+    selector: {},
+    case: {}
   }
 
-  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 key in props) {
+    const setter = keySetters[key.slice(0, 1)]
+    if (key === 'theme') {
+      props.update({ themeModifier: globalTheme }, { preventRecursive: true, ignoreInitUpdate: true })
     }
+    if (setter) setter(key, props[key], CLASS_NAMES, element)
   }
+
+  if (Object.keys(CLASS_NAMES.media).length) className.media = CLASS_NAMES.media
+  className.selector = CLASS_NAMES.selector
+  className.case = CLASS_NAMES.case
+
+  // 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 (globalTheme === mediaName) {
+  //         className.MEDIA_FORCED = className.MEDIA[mediaKey]
+  //       } else className.MEDIA_FORCED = {}
+  //     }
+  //   }
+  // }
+}
+
+export const Responsive = {
+  on: { beforeClassAssign, initUpdate }
 }

package/src/SVG.js

@@ -5,6 +5,9 @@ const useSVGSymbol = file => `<use xlink:href="${file}" />`
 // create SVG symbol
 export const SVG = {
   tag: 'svg',
+  props: {
+    css: { '*': { fill: 'currentColor' } }
+  },
   attr: {
     xmlns: 'http://www.w3.org/2000/svg',
     'xmlns:xlink': 'http://www.w3.org/1999/xlink'

package/src/Theme.js

@@ -33,9 +33,9 @@ export const Theme = {
     round: ({ props, key, ...el }) => props.round ? (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,
     borderRadius: ({ props, key, ...el }) => props.borderRadius ? (mapSpacing(props.borderRadius, 'borderRadius') || ({ borderRadius: props.borderRadius })) : null,
 
-    theme: ({ props }) => {
+    theme: ({ props, key }) => {
       if (!props.theme) return
-      return getTheme(props.theme)
+      return getTheme(props.theme, props.themeModifier)
     },
 
     color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,

package/src/index.js

@@ -16,6 +16,7 @@ export * from './Overflow'
 export * from './Transform'
 export * from './Transition'
 export * from './Media'
+export * from './Interaction'
 
 export * from './Box'