The following script create an object filtering some input data.
It is coded in a declarative way using several nested forEach
.
I would like to know which API to use in rewritting this code using ramdajs or lodash, specially I would be interested in understand if use of pipe is appropriate in this case otherwise another way.
An example of code would be appreciate (specially for ramdajs). Thanks.
var data = {
"type": "stylesheet",
"stylesheet": {
"rules": [{
"type": "keyframes",
"name": "bounce",
"keyframes": [{
"type": "keyframe",
"values": [
"from",
"20%",
"53%",
"80%",
"to"
],
"declarations": [{
"type": "declaration",
"property": "animation-timing-function",
"value": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
"position": {
"start": {
"line": 3,
"column": 5
},
"end": {
"line": 3,
"column": 72
}
}
}, {
"type": "declaration",
"property": "transform",
"value": "translate3d(0,0,0)",
"position": {
"start": {
"line": 4,
"column": 5
},
"end": {
"line": 4,
"column": 34
}
}
}],
"position": {
"start": {
"line": 2,
"column": 3
},
"end": {
"line": 5,
"column": 4
}
}
}, {
"type": "keyframe",
"values": [
"40%",
"43%"
],
"declarations": [{
"type": "declaration",
"property": "animation-timing-function",
"value": "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
"position": {
"start": {
"line": 8,
"column": 5
},
"end": {
"line": 8,
"column": 72
}
}
}, {
"type": "declaration",
"property": "transform",
"value": "translate3d(0, -30px, 0)",
"position": {
"start": {
"line": 9,
"column": 5
},
"end": {
"line": 9,
"column": 40
}
}
}],
"position": {
"start": {
"line": 7,
"column": 3
},
"end": {
"line": 10,
"column": 4
}
}
}, {
"type": "keyframe",
"values": [
"70%"
],
"declarations": [{
"type": "declaration",
"property": "animation-timing-function",
"value": "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
"position": {
"start": {
"line": 13,
"column": 5
},
"end": {
"line": 13,
"column": 72
}
}
}, {
"type": "declaration",
"property": "transform",
"value": "translate3d(0, -15px, 0)",
"position": {
"start": {
"line": 14,
"column": 5
},
"end": {
"line": 14,
"column": 40
}
}
}],
"position": {
"start": {
"line": 12,
"column": 3
},
"end": {
"line": 15,
"column": 4
}
}
}, {
"type": "keyframe",
"values": [
"90%"
],
"declarations": [{
"type": "declaration",
"property": "transform",
"value": "translate3d(0,-4px,0)",
"position": {
"start": {
"line": 18,
"column": 5
},
"end": {
"line": 18,
"column": 37
}
}
}],
"position": {
"start": {
"line": 17,
"column": 3
},
"end": {
"line": 19,
"column": 4
}
}
}],
"position": {
"start": {
"line": 1,
"column": 1
},
"end": {
"line": 20,
"column": 2
}
}
}, {
"type": "rule",
"selectors": [
".bounce"
],
"declarations": [{
"type": "declaration",
"property": "animation-name",
"value": "bounce",
"position": {
"start": {
"line": 23,
"column": 3
},
"end": {
"line": 23,
"column": 25
}
}
}, {
"type": "declaration",
"property": "transform-origin",
"value": "center bottom",
"position": {
"start": {
"line": 24,
"column": 3
},
"end": {
"line": 24,
"column": 34
}
}
}],
"position": {
"start": {
"line": 22,
"column": 1
},
"end": {
"line": 25,
"column": 2
}
}
}, {
"type": "keyframes",
"name": "spark",
"keyframes": [{
"type": "keyframe",
"values": [
"0%",
"50%"
],
"declarations": [{
"type": "declaration",
"property": "transform",
"value": "translate3d(0,0,0)",
"position": {
"start": {
"line": 29,
"column": 5
},
"end": {
"line": 29,
"column": 34
}
}
}],
"position": {
"start": {
"line": 28,
"column": 3
},
"end": {
"line": 30,
"column": 4
}
}
}, {
"type": "keyframe",
"values": [
"100%"
],
"declarations": [{
"type": "declaration",
"property": "transform",
"value": "translate3d(0,-4px,0)",
"position": {
"start": {
"line": 32,
"column": 5
},
"end": {
"line": 32,
"column": 37
}
}
}],
"position": {
"start": {
"line": 31,
"column": 3
},
"end": {
"line": 33,
"column": 4
}
}
}],
"position": {
"start": {
"line": 27,
"column": 1
},
"end": {
"line": 34,
"column": 2
}
}
}, {
"type": "rule",
"selectors": [
".spark"
],
"declarations": [{
"type": "declaration",
"property": "animation-name",
"value": "spark",
"position": {
"start": {
"line": 37,
"column": 3
},
"end": {
"line": 37,
"column": 24
}
}
}, {
"type": "declaration",
"property": "transform-origin",
"value": "center center",
"position": {
"start": {
"line": 38,
"column": 3
},
"end": {
"line": 38,
"column": 34
}
}
}],
"position": {
"start": {
"line": 36,
"column": 1
},
"end": {
"line": 39,
"column": 2
}
}
}],
"parsingErrors": []
}
};
var result = {};
var kfs = data.stylesheet.rules.filter(function(rule) {
return rule.type === 'keyframes'
});
kfs.forEach(function(kf) {
result[kf.name] = [];
kf.keyframes.forEach(function(kfi) {
kfi.values.forEach(function(v) {
var r = {};
var vNew;
vNew = v;
if (v === 'from') {
vNew = 0;
} else if (v === 'to') {
vNew = 100;
} else {
vNew = parseFloat(v);
}
r.offset = vNew;
kfi.declarations.forEach(function(d) {
r[d.property] = d.value;
});
result[kf.name].push(r);
});
});
});
console.log(result);
EDIT:
So far I was able to achieve this result in ramdajs:
var rulesLense = R.lensPath(['stylesheet', 'rules']);
var ruleView = R.view(rulesLense, obj);
var keyframes = R.filter(R.propEq('type', 'keyframes'));
var groupByKeyframe = R.groupBy(keyframe => {
return R.prop('name', keyframe);
});
var process = R.pipe(
keyframes,
groupByKeyframe
);
var result = process(ruleView);