babel-plugin-gruu
Version:
Babel plugin for transpiling JSX to Gruu
291 lines (290 loc) • 8.47 kB
HTML
<html lang="en">
<head>
<title>Code coverage report for index.js</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="prettify.css" />
<link rel="stylesheet" href="base.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
.coverage-summary .sorter {
background-image: url(sort-arrow-sprite.png);
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='pad1'>
<h1>
<a href="index.html">All files</a> index.js
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Statements</span>
<span class='fraction'>34/34</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Branches</span>
<span class='fraction'>22/22</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Functions</span>
<span class='fraction'>12/12</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Lines</span>
<span class='fraction'>29/29</span>
</div>
</div>
</div>
<div class='status-line high'></div>
<pre><table class="coverage">
<tr><td class="line-count quiet">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">16x</span>
<span class="cline-any cline-yes">16x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">12x</span>
<span class="cline-any cline-yes">26x</span>
<span class="cline-any cline-yes">26x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">12x</span>
<span class="cline-any cline-yes">26x</span>
<span class="cline-any cline-yes">17x</span>
<span class="cline-any cline-yes">17x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">26x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">12x</span>
<span class="cline-any cline-yes">12x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">12x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">12x</span>
<span class="cline-any cline-yes">12x</span>
<span class="cline-any cline-yes">12x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">12x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">13x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">10x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js"> const babelPluginSyntaxJSX = require('babel-plugin-syntax-jsx')
const componentExpression = t => properties => (
t.callExpression(t.memberExpression(t.identifier('Gruu'), t.identifier('createComponent')), [
t.objectExpression(properties)
])
)
const prepareChildren = t => children => children.reduce((acc, child) => {
const item = child.expression || child
return {
dynamic: acc.dynamic || t.isFunction(item),
items: [...acc.items, item]
}
}, { items: [], dynamic: false })
const parseChildren = t => children => children.map(child => {
if (t.isJSXText(child) || t.isStringLiteral(child)) {
const string = child.value.replace(/^[\n ]*/g, '').replace(/[\n ]*$/g, '')
return string ? t.stringLiteral(string) : null
}
if (t.isFunction(child)) {
return componentExpression(t)([
t.objectProperty(t.identifier('$children'), child)
])
}
if (t.isArrayExpression(child) || t.isCallExpression(child)) {
return componentExpression(t)([
t.objectProperty(t.identifier('children'), child)
])
}
return child
}).filter(v => v)
const excludedAttributes = ['_type', 'children', '$children']
module.exports = (babel) => {
const t = babel.types
return {
inherits: babelPluginSyntaxJSX,
visitor: {
JSXElement (path) {
const { openingElement, children } = path.node
const { name: { name: componentType }, attributes } = openingElement
const typeProperty = componentType !== '$'
? [t.objectProperty(t.identifier('_type'), t.stringLiteral(componentType))]
: []
const preparedChildren = prepareChildren(t)(children)
const items = (parseChildren(t)(preparedChildren.items))
const childrenProperty = items.length > 0 ? [t.objectProperty(
t.identifier('children'),
t.arrayExpression(items)
)] : []
path.replaceWith(componentExpression(t)([
...typeProperty,
...childrenProperty,
...attributes
.filter(({ name }) => !excludedAttributes.includes(name.name))
.map(({ name, value }) => (
t.objectProperty(
t.identifier(name.name),
t.isStringLiteral(value) ? value : value.expression
)
))
]))
}
}
}
}
</pre></td></tr>
</table></pre>
<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Wed Aug 09 2017 21:20:45 GMT+0200 (CEST)
</div>
</div>
<script src="prettify.js"></script>
<script>
window.onload = function () {
if (typeof prettyPrint === 'function') {
prettyPrint();
}
};
</script>
<script src="sorter.js"></script>
</body>
</html>