const setStyle = (t, store, elem, pid) => {
var className = ''
const style = elem.stylesheet || new StyleSheet(elem, globalSheet)
const map = style.map
// const mediaMap = style.mediaMap
const newStyle = []
// var mc = 0
// console.log('DOOO', store)
let keys = store.keys()
let i = keys.length
while (i--) {
let key = keys[i]
let val = get(store, key)
// for (let key in store) {
if (key.indexOf('@media') === 0) {
// if (!mediaMap[key]) mediaMap[key] = { id: ++mediaMap.count, count: 0, state: {} }
// const mmap = mediaMap[key]
// const parsed = val
// for (let style in parsed) {
// const value = parsed[style]
// if (typeof value === 'object' && 'inherits' in value) {
// const id = uid(++mc) + ((pid * 33 ^ puid(value)) >>> 0)
// mmap.state[id] = toDash(style) + ':' + t.get([key, reversePrefix[style] || style]).compute(value, value)
// className += ` ${id}`
// } else {
// const s = toDash(style) + ':' + value
// if (!mmap[s]) {
// mmap[s] = uid(mmap.count++) + mmap.id
// }
// className += ` ${mmap[s]}`
// }
// // this also has to be resolved of course....
// }
} else {
if (val === '0px') val = 0
let s = toDash(key) + ':' + val
if (!map[s]) {
let id
id = uid(globalSheet.count++, globalSheet.map)
if (!globalSheet.map[s]) globalSheet.map[s] = id
const rule = globalSheet.map[s]
map[s] = rule
newStyle.push(s)
}
className += ' ' + map[s]
}
}
if (style.parsed) {
if (newStyle.length) style.update(newStyle, map)
} else if (!inProgress && 'node' in elem) {
style.exec(elem.node)
}
return className
}
export default (t, map, prevMap) => {
var changed
const keys = t.keys()
if (keys) {
let i = keys.length
while (i--) {
let p = get(t, keys[i])
if (p && !isNull(p) && p.$map) {
if (exec(p, map, prevMap)) { changed = true }
p._blockContext = null
}
}
}
return changed
}
test('group - combined', t => {
const types = {
animation: {
type: 'group',
props: {
style: true,
template: true
},
render: {
static (target, node, store) {
node.style.position = 'fixed'
node.style[target.get('style')] = target.get('template')
},
state (target, s, type, subs, tree, id, pid, store) {
var val = s && target.$ ? target.compute(s) : target.compute()
const node = parent(tree, pid)
val = (get(target, 'template') || val)
for (let key in store) {
val = val.replace(`{${key}}`, store[key])
}
node.style.position = 'fixed'
node.style[get(target, 'style')] = val
}
}
}
}
const arr = []
for (let i = 0; i < 20; i++) {
arr.push(i)
}
const state = global.state = s(arr)
var max = 350
types.poocircle = {
$: '$any',
animation: {
type: 'animation',
style: 'transform',
template: 'translate(0px, 1px)'
},
props: {
default: {
tag: 'span',
$: '$switch',
$switch: (state) => {
state = state.origin()
const x = state[0] && state[0].compute()
const y = state[1] && state[1].compute()
return x > max / 2 && y > max / 2
},
title: {
tag: 'h1',
$: 'title',
text: { $: true }
},
animation: {
type: 'animation',
style: 'transform',
template: 'translate3d({x}px, {y}px, 0px) rotate({rotate}deg)',
x: { $: 0 },
y: { $: 1 },
rotate: { $: 2 }
}
}
}
}
const app = render(
{
types,
collection: {
$: '$any',
props: {
default: {
type: 'poocircle'
}
}
},
speshcollesh: {
type: 'poocircle',
$: '0.$any',
props: {
default: {
animation: {
x: { $transform: (val) => val * 2.5 - 0.75 * max },
y: { $transform: (val) => val * 2.5 - 1.5 * max }
}
}
}
}
},
state
)
function update (cnt, field) {
const set = {}
const d = Math.ceil(65 / moons.length)
for (let i = 1; i < 65; i++) {
set[i] = {
title: moons[(i / d) | 0],
0: Math.cos((i + cnt) / 10) * (max / 2 * (1.1 * field + 2.1)) + max / 2,
1: Math.sin((i + cnt) / 10) * (max / 2 * (1.1 * field + 2.1)) + max,
2: cnt * 100 + i
}
}
state[field].set(set)
}
var cnt = 30
function loop () {
cnt++
state.forEach((p, key) => update(cnt / 20, key))
}
loop()
if ('body' in document) {
document.body.appendChild(app)
} else {
const output = fs.readFileSync(path.join(process.cwd(), 'test/group/output.html'))
t.equal(parse(app).replace(/(\d+)\.\d+/g, '$1'), output.toString().replace(/(\d+)\.\d+/g, '$1'), 'correct output')
}
t.end()
})