|
|
|
@ -149,11 +149,30 @@ const ruleToSelector = genericRuleToSelector(components)
|
|
|
|
|
|
|
|
|
|
|
|
export const getEngineChecksum = () => engineChecksum
|
|
|
|
export const getEngineChecksum = () => engineChecksum
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* Initializes and compiles the theme according to the ruleset
|
|
|
|
|
|
|
|
*
|
|
|
|
|
|
|
|
* @param {Object[]} inputRuleset - set of rules to compile theme against. Acts as an override to
|
|
|
|
|
|
|
|
* component default rulesets
|
|
|
|
|
|
|
|
* @param {string} ultimateBackgroundColor - Color that will be the "final" background for
|
|
|
|
|
|
|
|
* calculating contrast ratios and making text automatically accessible. Really used for cases when
|
|
|
|
|
|
|
|
* stuff is transparent.
|
|
|
|
|
|
|
|
* @param {boolean} debug - print out debug information in console, mostly just performance stuff
|
|
|
|
|
|
|
|
* @param {boolean} liteMode - use validInnerComponentsLite instead of validInnerComponents, meant to
|
|
|
|
|
|
|
|
* generatate theme previews and such that need to be compiled faster and don't require a lot of other
|
|
|
|
|
|
|
|
* components present in "normal" mode
|
|
|
|
|
|
|
|
* @param {boolean} onlyNormalState - only use components 'normal' states, meant for generating theme
|
|
|
|
|
|
|
|
* previews since states are the biggest factor for compilation time and are completely unnecessary
|
|
|
|
|
|
|
|
* when previewing multiple themes at same time
|
|
|
|
|
|
|
|
* @param {string} rootComponentName - [UNTESTED] which component to start from, meant for previewing a
|
|
|
|
|
|
|
|
* part of the theme (i.e. just the button) for themes 3 editor.
|
|
|
|
|
|
|
|
*/
|
|
|
|
export const init = ({
|
|
|
|
export const init = ({
|
|
|
|
inputRuleset,
|
|
|
|
inputRuleset,
|
|
|
|
ultimateBackgroundColor,
|
|
|
|
ultimateBackgroundColor,
|
|
|
|
debug = false,
|
|
|
|
debug = false,
|
|
|
|
liteMode = false,
|
|
|
|
liteMode = false,
|
|
|
|
|
|
|
|
onlyNormalState = false,
|
|
|
|
rootComponentName = 'Root'
|
|
|
|
rootComponentName = 'Root'
|
|
|
|
}) => {
|
|
|
|
}) => {
|
|
|
|
if (!inputRuleset) throw new Error('Ruleset is null or undefined!')
|
|
|
|
if (!inputRuleset) throw new Error('Ruleset is null or undefined!')
|
|
|
|
@ -402,11 +421,16 @@ export const init = ({
|
|
|
|
const processInnerComponent = (component, parent) => {
|
|
|
|
const processInnerComponent = (component, parent) => {
|
|
|
|
const combinations = []
|
|
|
|
const combinations = []
|
|
|
|
const {
|
|
|
|
const {
|
|
|
|
validInnerComponents = [],
|
|
|
|
|
|
|
|
states: originalStates = {},
|
|
|
|
states: originalStates = {},
|
|
|
|
variants: originalVariants = {}
|
|
|
|
variants: originalVariants = {}
|
|
|
|
} = component
|
|
|
|
} = component
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const validInnerComponents = (
|
|
|
|
|
|
|
|
liteMode
|
|
|
|
|
|
|
|
? (component.validInnerComponentsLite || component.validInnerComponents)
|
|
|
|
|
|
|
|
: component.validInnerComponents
|
|
|
|
|
|
|
|
) || []
|
|
|
|
|
|
|
|
|
|
|
|
// Normalizing states and variants to always include "normal"
|
|
|
|
// Normalizing states and variants to always include "normal"
|
|
|
|
const states = { normal: '', ...originalStates }
|
|
|
|
const states = { normal: '', ...originalStates }
|
|
|
|
const variants = { normal: '', ...originalVariants }
|
|
|
|
const variants = { normal: '', ...originalVariants }
|
|
|
|
@ -418,22 +442,26 @@ export const init = ({
|
|
|
|
|
|
|
|
|
|
|
|
// Optimization: we only really need combinations without "normal" because all states implicitly have it
|
|
|
|
// Optimization: we only really need combinations without "normal" because all states implicitly have it
|
|
|
|
const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
|
|
|
|
const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
|
|
|
|
const stateCombinations = [
|
|
|
|
const stateCombinations = onlyNormalState
|
|
|
|
['normal'],
|
|
|
|
? [
|
|
|
|
...getAllPossibleCombinations(permutationStateKeys)
|
|
|
|
['normal']
|
|
|
|
.map(combination => ['normal', ...combination])
|
|
|
|
]
|
|
|
|
.filter(combo => {
|
|
|
|
: [
|
|
|
|
// Optimization: filter out some hard-coded combinations that don't make sense
|
|
|
|
['normal'],
|
|
|
|
if (combo.indexOf('disabled') >= 0) {
|
|
|
|
...getAllPossibleCombinations(permutationStateKeys)
|
|
|
|
return !(
|
|
|
|
.map(combination => ['normal', ...combination])
|
|
|
|
combo.indexOf('hover') >= 0 ||
|
|
|
|
.filter(combo => {
|
|
|
|
combo.indexOf('focused') >= 0 ||
|
|
|
|
// Optimization: filter out some hard-coded combinations that don't make sense
|
|
|
|
combo.indexOf('pressed') >= 0
|
|
|
|
if (combo.indexOf('disabled') >= 0) {
|
|
|
|
)
|
|
|
|
return !(
|
|
|
|
}
|
|
|
|
combo.indexOf('hover') >= 0 ||
|
|
|
|
return true
|
|
|
|
combo.indexOf('focused') >= 0 ||
|
|
|
|
})
|
|
|
|
combo.indexOf('pressed') >= 0
|
|
|
|
]
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return true
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
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 }))
|
|
|
|
@ -460,7 +488,9 @@ export const init = ({
|
|
|
|
const t0 = performance.now()
|
|
|
|
const t0 = performance.now()
|
|
|
|
const combinations = processInnerComponent(components[rootComponentName] ?? components.Root)
|
|
|
|
const combinations = processInnerComponent(components[rootComponentName] ?? components.Root)
|
|
|
|
const t1 = performance.now()
|
|
|
|
const t1 = performance.now()
|
|
|
|
console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
|
|
|
|
if (debug) {
|
|
|
|
|
|
|
|
console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const result = combinations.map((combination) => {
|
|
|
|
const result = combinations.map((combination) => {
|
|
|
|
if (combination.lazy) {
|
|
|
|
if (combination.lazy) {
|
|
|
|
@ -470,7 +500,9 @@ export const init = ({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}).filter(x => x)
|
|
|
|
}).filter(x => x)
|
|
|
|
const t2 = performance.now()
|
|
|
|
const t2 = performance.now()
|
|
|
|
console.debug('Eager processing took ' + (t2 - t1) + ' ms')
|
|
|
|
if (debug) {
|
|
|
|
|
|
|
|
console.debug('Eager processing took ' + (t2 - t1) + ' ms')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
lazy: result.filter(x => typeof x === 'function'),
|
|
|
|
lazy: result.filter(x => typeof x === 'function'),
|
|
|
|
|
Henry Jameson
2 months ago