improvements & performance testing

This commit is contained in:
Henry Jameson 2024-02-08 18:18:01 +02:00
parent a7d771e8c8
commit 6df28cde9d
5 changed files with 71 additions and 39 deletions

View File

@ -22,7 +22,7 @@ const hoverGlow = {
export default { export default {
name: 'Button', name: 'Button',
selector: '.button-default', selector: '.button',
states: { states: {
disabled: ':disabled', disabled: ':disabled',
toggled: '.toggled', toggled: '.toggled',
@ -31,9 +31,9 @@ export default {
focused: ':focus-within' focused: ':focus-within'
}, },
variants: { variants: {
normal: '-default',
danger: '.danger', danger: '.danger',
unstyled: '.unstyled', unstyled: '-unstyled'
sublime: '.sublime'
}, },
validInnerComponents: [ validInnerComponents: [
'Text', 'Text',
@ -54,6 +54,14 @@ export default {
}, ...buttonInsetFakeBorders] }, ...buttonInsetFakeBorders]
} }
}, },
{
component: 'Button',
variant: 'unstyled',
directives: {
background: '--fg',
opacity: 0
}
},
{ {
component: 'Button', component: 'Button',
state: ['hover'], state: ['hover'],

View File

@ -28,11 +28,8 @@ export default {
hover: ':hover', hover: ':hover',
focused: ':focus-within' focused: ':focus-within'
}, },
variants: { // variants: {
danger: '.danger', // },
unstyled: '.unstyled',
sublime: '.sublime'
},
validInnerComponents: [ validInnerComponents: [
'Text' 'Text'
], ],

View File

@ -8,8 +8,6 @@ export default {
defaultRules: [ defaultRules: [
{ {
component: 'Underlay', component: 'Underlay',
// variant: 'normal',
// state: 'normal'
directives: { directives: {
background: '#000000', background: '#000000',
opacity: 0.2 opacity: 0.2

View File

@ -8,8 +8,13 @@ import {
import { defaultState } from '../../modules/config.js' import { defaultState } from '../../modules/config.js'
export const applyTheme = (input) => { export const applyTheme = (input) => {
const t0 = performance.now()
const { rules, t3b } = generatePreset(input) const { rules, t3b } = generatePreset(input)
const t1 = performance.now()
const themes3 = init(sampleRules, t3b) const themes3 = init(sampleRules, t3b)
const t2 = performance.now()
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
const head = document.head const head = document.head
const body = document.body const body = document.body
body.classList.add('hidden') body.classList.add('hidden')
@ -24,7 +29,6 @@ export const applyTheme = (input) => {
// styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max') // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max') styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
themes3.css.forEach(rule => { themes3.css.forEach(rule => {
console.log(rule)
styleSheet.insertRule(rule, 'index-max') styleSheet.insertRule(rule, 'index-max')
}) })
body.classList.remove('hidden') body.classList.remove('hidden')

View File

@ -77,7 +77,7 @@ const components = {
// into an array [item2, item3] for iterating // into an array [item2, item3] for iterating
const unroll = (item) => { const unroll = (item) => {
const out = [] const out = []
let currentParent = item.parent let currentParent = item
while (currentParent) { while (currentParent) {
const { parent: newParent, ...rest } = currentParent const { parent: newParent, ...rest } = currentParent
out.push(rest) out.push(rest)
@ -115,6 +115,8 @@ export const ruleToSelector = (rule, ignoreOutOfTreeSelector, isParent) => {
let applicableVariant = '' let applicableVariant = ''
if (applicableVariantName !== 'normal') { if (applicableVariantName !== 'normal') {
applicableVariant = variants[applicableVariantName] applicableVariant = variants[applicableVariantName]
} else {
applicableVariant = variants?.normal ?? ''
} }
let realSelector let realSelector
@ -130,7 +132,7 @@ export const ruleToSelector = (rule, ignoreOutOfTreeSelector, isParent) => {
const selectors = [realSelector, applicableVariant, ...applicableStates] const selectors = [realSelector, applicableVariant, ...applicableStates]
.toSorted((a, b) => { .toSorted((a, b) => {
if (a.startsWith(':')) return 1 if (a.startsWith(':')) return 1
if (!a.startsWith('.')) return -1 if (/^[a-z]/.exec(a)) return -1
else return 0 else return 0
}) })
.join('') .join('')
@ -189,7 +191,7 @@ const findRules = (criteria, strict) => subject => {
} }
export const init = (extraRuleset, palette) => { export const init = (extraRuleset, palette) => {
const cache = {} const stacked = {}
const computed = {} const computed = {}
const rules = [] const rules = []
@ -213,19 +215,20 @@ export const init = (extraRuleset, palette) => {
const variableSlot = variable.substring(2) const variableSlot = variable.substring(2)
if (variableSlot.startsWith('parent')) { if (variableSlot.startsWith('parent')) {
if (variableSlot === 'parent') { if (variableSlot === 'parent') {
targetColor = dynamicVars.lowerLevelBackground const { r, g, b } = dynamicVars.lowerLevelBackground
targetColor = { r, g, b }
} else { } else {
const virtualSlot = variableSlot.replace(/^parent/, '') const virtualSlot = variableSlot.replace(/^parent/, '')
targetColor = dynamicVars.lowerLevelVirtualDirectives[virtualSlot] targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
} }
} else { } else {
// TODO add support for --current prefix // TODO add support for --current prefix
switch (variableSlot) { switch (variableSlot) {
case 'background': case 'background':
targetColor = dynamicVars.inheritedBackground targetColor = convert(dynamicVars.inheritedBackground).rgb
break break
default: default:
targetColor = palette[variableSlot] targetColor = convert(palette[variableSlot]).rgb
} }
} }
@ -249,7 +252,6 @@ export const init = (extraRuleset, palette) => {
const backgroundArg = convert(findColor(args[2], dynamicVars)).rgb const backgroundArg = convert(findColor(args[2], dynamicVars)).rgb
const foregroundArg = convert(findColor(args[0], dynamicVars)).rgb const foregroundArg = convert(findColor(args[0], dynamicVars)).rgb
const amount = Number(args[1]) const amount = Number(args[1])
console.log('ASS', backgroundArg, foregroundArg, amount)
targetColor = alphaBlend(backgroundArg, amount, foregroundArg) targetColor = alphaBlend(backgroundArg, amount, foregroundArg)
break break
} }
@ -325,6 +327,12 @@ export const init = (extraRuleset, palette) => {
} }
const processInnerComponent = (component, parent) => { const processInnerComponent = (component, parent) => {
const parentList = parent ? unroll(parent).reverse().map(c => c.component) : []
if (!component.virtual) {
const path = [...parentList, component.name].join(' > ')
console.log('Component ' + path + ' process starting')
}
const t0 = performance.now()
const { const {
validInnerComponents = [], validInnerComponents = [],
states: originalStates = {}, states: originalStates = {},
@ -338,6 +346,7 @@ export const init = (extraRuleset, palette) => {
const innerComponents = validInnerComponents.map(name => components[name]) const innerComponents = validInnerComponents.map(name => components[name])
const stateCombinations = getAllPossibleCombinations(Object.keys(states)) const stateCombinations = getAllPossibleCombinations(Object.keys(states))
const stateVariantCombination = Object.keys(variants).map(variant => { const stateVariantCombination = Object.keys(variants).map(variant => {
return stateCombinations.map(state => ({ variant, state })) return stateCombinations.map(state => ({ variant, state }))
}).reduce((acc, x) => [...acc, ...x], []) }).reduce((acc, x) => [...acc, ...x], [])
@ -347,13 +356,14 @@ export const init = (extraRuleset, palette) => {
const selector = ruleToSelector({ component: component.name, ...combination, parent }, true) const selector = ruleToSelector({ component: component.name, ...combination, parent }, true)
const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ') const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ')
const lowerLevelBackground = cache[lowerLevelSelector]?.background const lowerLevelBackground = computed[lowerLevelSelector]?.background
const lowerLevelVirtualDirectives = cache[lowerLevelSelector]?.virtualDirectives const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
// console.log('ASS', lowerLevelVirtualDirectives) const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
const dynamicVars = { const dynamicVars = {
lowerLevelBackground, lowerLevelBackground,
lowerLevelVirtualDirectives lowerLevelVirtualDirectives,
lowerLevelVirtualDirectivesRaw
} }
// Inheriting all of the applicable rules // Inheriting all of the applicable rules
@ -411,7 +421,7 @@ export const init = (extraRuleset, palette) => {
const textColor = newTextRule.directives.textAuto === 'no-auto' const textColor = newTextRule.directives.textAuto === 'no-auto'
? intendedTextColor ? intendedTextColor
: getTextColor( : getTextColor(
convert(lowerLevelBackground).rgb, convert(stacked[lowerLevelSelector]).rgb,
intendedTextColor, intendedTextColor,
newTextRule.directives.textAuto === 'preserve' newTextRule.directives.textAuto === 'preserve'
) )
@ -421,17 +431,21 @@ export const init = (extraRuleset, palette) => {
const earlyLowerLevelRule = earlyLowerLevelRules.slice(-1)[0] const earlyLowerLevelRule = earlyLowerLevelRules.slice(-1)[0]
const virtualDirectives = earlyLowerLevelRule.virtualDirectives || {} const virtualDirectives = earlyLowerLevelRule.virtualDirectives || {}
const virtualDirectivesRaw = earlyLowerLevelRule.virtualDirectivesRaw || {}
// Storing color data in lower layer to use as custom css properties // Storing color data in lower layer to use as custom css properties
virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars) virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
virtualDirectivesRaw[virtualName] = textColor
earlyLowerLevelRule.virtualDirectives = virtualDirectives earlyLowerLevelRule.virtualDirectives = virtualDirectives
cache[lowerLevelSelector].virtualDirectives = virtualDirectives earlyLowerLevelRule.virtualDirectivesRaw = virtualDirectivesRaw
computed[lowerLevelSelector].virtualDirectives = virtualDirectives
computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
// Debug: lets you see what it think background color should be // Debug: lets you see what it think background color should be
const directives = { const directives = {
textColor, textColor,
background: convert(cache[lowerLevelSelector].background).hex, background: convert(computed[lowerLevelSelector].background).hex,
...inheritedTextOpacity ...inheritedTextOpacity
} }
@ -441,10 +455,10 @@ export const init = (extraRuleset, palette) => {
component: component.name, component: component.name,
...combination, ...combination,
directives, directives,
virtualDirectives virtualDirectives,
virtualDirectivesRaw
}) })
} else { } else {
cache[selector] = cache[selector] || {}
computed[selector] = computed[selector] || {} computed[selector] = computed[selector] || {}
if (computedDirectives.background) { if (computedDirectives.background) {
@ -460,7 +474,7 @@ export const init = (extraRuleset, palette) => {
} }
const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true) const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
const inheritedBackground = cache[inheritSelector].background const inheritedBackground = computed[inheritSelector].background
// TODO: DEFAULT TEXT COLOR // TODO: DEFAULT TEXT COLOR
const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
@ -469,10 +483,18 @@ export const init = (extraRuleset, palette) => {
const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb
if (!cache[selector].background) { if (!stacked[selector]) {
const blend = computedDirectives.opacity < 1 ? alphaBlend(rgb, computedDirectives.opacity, lowerLevelComputedBackground) : rgb let blend
cache[selector].background = blend const alpha = computedDirectives.opacity
computed[selector].background = rgb if (alpha >= 1) {
blend = rgb
} else if (alpha <= 0) {
blend = lowerLevelComputedBackground
} else {
blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelComputedBackground)
}
stacked[selector] = blend
computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
addRule({ addRule({
component: component.name, component: component.name,
@ -482,16 +504,19 @@ export const init = (extraRuleset, palette) => {
}) })
} }
} }
if (existingRules.length !== 0) {
console.warn('MORE EXISTING RULES', existingRules)
}
} }
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination })) innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
}) })
const t1 = performance.now()
if (!component.virtual) {
const path = [...parentList, component.name].join(' > ')
console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms')
}
} }
processInnerComponent(components.Root, { component: 'Root' }) processInnerComponent(components.Root)
return { return {
raw: rules, raw: rules,