commit: 48f0a95a3bf53321d950f23e480607cf94349751
parent bd514ab6d0cbd6e3736cc6302d17d17130c57b33
Author: Henry Jameson <me@hjkos.com>
Date: Fri, 20 Sep 2024 12:50:05 +0300
more tests, fixed some issues
Diffstat:
7 files changed, 53 insertions(+), 18 deletions(-)
diff --git a/src/components/alert.style.js b/src/components/alert.style.js
@@ -27,7 +27,9 @@ export default {
component: 'Alert'
},
component: 'Border',
- textColor: '--parent'
+ directives: {
+ textColor: '--parent'
+ }
},
{
variant: 'error',
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
@@ -16,8 +16,7 @@ export default {
{
directives: {
background: '#ffffff',
- opacity: 0,
- shadow: []
+ opacity: 0
}
},
{
diff --git a/src/components/input.style.js b/src/components/input.style.js
@@ -26,7 +26,7 @@ export default {
{
component: 'Root',
directives: {
- '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
+ '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)'
}
},
{
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
@@ -17,7 +17,6 @@ export default {
directives: {
backgroundNoCssColor: 'yes',
background: '--fg',
- shadow: []
}
}
]
diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
@@ -6,13 +6,13 @@ const parseShadow = string => {
// inset keyword (optional)
'^(?:(inset)\\s+)?',
// x
- '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)',
+ '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)',
// y
- '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)',
+ '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)',
// blur (optional)
- '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)?',
+ '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)?',
// spread (optional)
- '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)?',
+ '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)?',
// either hex, variable or function
'(#[0-9a-f]{6}|--[a-z\\-_]+|\\$[a-z\\-()_]+)',
// opacity (optional)
@@ -23,7 +23,18 @@ const parseShadow = string => {
if (result == null) {
return string
} else {
- return Object.fromEntries(modes.map((mode, i) => [mode, result[i]]))
+ const numeric = new Set(['x', 'y', 'blur', 'spread', 'alpha'])
+ const { x, y, blur, spread, alpha, inset, color } = Object.fromEntries(modes.map((mode, i) => {
+ if (numeric.has(mode)) {
+ return [mode, Number(result[i])]
+ } else if (mode === 'inset') {
+ return [mode, !!result[i]]
+ } else {
+ return [mode, result[i]]
+ }
+ }).filter(([k, v]) => v !== false).slice(1))
+
+ return { x, y, blur, spread, color, alpha, inset }
}
}
// this works nearly the same as HTML tree converter
@@ -127,7 +138,7 @@ export const deserialize = (input) => {
const [property, value] = d.split(':')
let realValue = value.trim()
if (property === 'shadow') {
- realValue = parseShadow(value.split(',').map(v => v.trim()))
+ realValue = value.split(',').map(v => parseShadow(v.trim()))
} if (!Number.isNaN(Number(value))) {
realValue = Number(value)
}
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
@@ -2,7 +2,7 @@ import { unroll } from './iss_utils.js'
const serializeShadow = s => {
if (typeof s === 'object') {
- return `{${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}}`
+ return `${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}`
} else {
return s
}
diff --git a/test/unit/specs/services/theme_data/iss_deserializer.spec.js b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
@@ -1,16 +1,40 @@
import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
import { serialize } from 'src/services/theme_data/iss_serializer.js'
-import Button from 'src/components/button.style.js'
+const componentsContext = require.context('src', true, /\.style.js(on)?$/)
-describe('ISS (de)serialization', () => {
- describe('ISS deserialization', () => {
- it('Output should equal input', () => {
- const normalized = Button.defaultRules.map(x => ({ component: 'Button', ...x }))
+describe.only('ISS (de)serialization', () => {
+ componentsContext.keys().forEach(key => {
+ const component = componentsContext(key).default
+
+ it(`(De)serialization of component ${component.name} works`, () => {
+ const normalized = component.defaultRules.map(x => ({ component: component.name, ...x }))
const serialized = serialize(normalized)
const deserialized = deserialize(serialized)
// for some reason comparing objects directly fails the assert
- expect(JSON.stringify(deserialized)).to.equal(JSON.stringify(normalized))
+ expect(JSON.stringify(deserialized, null, 2)).to.equal(JSON.stringify(normalized, null, 2))
})
})
+
+ /*
+ // Debug snippet
+ const onlyComponent = componentsContext('./components/panel_header.style.js').default
+ it(`(De)serialization of component ${onlyComponent.name} works`, () => {
+ const normalized = onlyComponent.defaultRules.map(x => ({ component: onlyComponent.name, ...x }))
+ console.log('BEGIN INPUT ================')
+ console.log(normalized)
+ console.log('END INPUT ==================')
+ const serialized = serialize(normalized)
+ console.log('BEGIN SERIAL ===============')
+ console.log(serialized)
+ console.log('END SERIAL =================')
+ const deserialized = deserialize(serialized)
+ console.log('BEGIN DESERIALIZED =========')
+ console.log(serialized)
+ console.log('END DESERIALIZED ===========')
+
+ // for some reason comparing objects directly fails the assert
+ expect(JSON.stringify(deserialized, null, 2)).to.equal(JSON.stringify(normalized, null, 2))
+ })
+ */
})
