Skip to content
This repository was archived by the owner on Aug 24, 2019. It is now read-only.

Commit 10e9857

Browse files
gregbergegregberge
authored
Merge pull request #1 from mattijsbliek/master
Add special casing transform for certain JSX elements.
2 parents 5b7849a + d498f5a commit 10e9857

File tree

2 files changed

+153
-3
lines changed

2 files changed

+153
-3
lines changed

‎packages/h2x-plugin-jsx/src/index.test.js‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,45 @@ describe('transformJsx', () => {
99
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
1010
<title>Dismiss</title>
1111
<desc>Created with Sketch.</desc>
12-
<defs></defs>
12+
<defs>
13+
<linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
14+
<stop offset="0%" stop-color="#FAD961" />
15+
<stop offset="100%" stop-color="#F7955D" />
16+
</linearGradient>
17+
<filter
18+
id="b"
19+
width="157.1%"
20+
height="180%"
21+
x="-28.6%"
22+
y="-20%"
23+
filterUnits="objectBoundingBox">
24+
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
25+
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5" />
26+
<feColorMatrix
27+
in="shadowBlurOuter1"
28+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
29+
/>
30+
</filter>
31+
</defs>
1332
<g id="Blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
1433
<g id="Dismiss" stroke="#063855" stroke-width="2">
1534
<path d="M51,37 L37,51" id="Shape"></path>
1635
<path d="M51,51 L37,37" id="Shape"></path>
36+
<circle
37+
cx="43.5"
38+
cy="42.5"
39+
r="31.5"
40+
fill="url(#a)"
41+
opacity=".1"
42+
/>
43+
<circle
44+
fill="#f00"
45+
cx="43.5"
46+
cy="42.5"
47+
r="21.5"
48+
filter="url(#b)"
49+
opacity="1"
50+
/>
1751
</g>
1852
</g>
1953
</svg>
@@ -29,11 +63,23 @@ describe('transformJsx', () => {
2963
<desc>
3064
Created with Sketch.
3165
</desc>
32-
<defs />
66+
<defs>
67+
<linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
68+
<stop offset="0%" stopColor="#FAD961" />
69+
<stop offset="100%" stopColor="#F7955D" />
70+
</linearGradient>
71+
<filter id="b" width="157.1%" height="180%" x="-28.6%" y="-20%" filterUnits="objectBoundingBox">
72+
<feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
73+
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5" />
74+
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
75+
</filter>
76+
</defs>
3377
<g id="Blocks" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd" strokeLinecap="square">
3478
<g id="Dismiss" stroke="#063855" strokeWidth={2}>
3579
<path d="M51,37 L37,51" id="Shape" />
3680
<path d="M51,51 L37,37" id="Shape" />
81+
<circle cx="43.5" cy="42.5" r="31.5" fill="url(#a)" opacity=".1" />
82+
<circle fill="#f00" cx="43.5" cy="42.5" r="21.5" filter="url(#b)" opacity={1} />
3783
</g>
3884
</g>
3985
</svg>`)

‎packages/h2x-plugin-jsx/src/visitor.js‎

Lines changed: 105 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,104 @@ const ELEMENT_ATTRIBUTE_MAPPING = {
1919
},
2020
}
2121

22+
// Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements
23+
const ELEMENT_TAG_NAME_MAPPING = {
24+
a: 'a',
25+
altglyph: 'altGlyph',
26+
altglyphdef: 'altGlyphDef',
27+
altglyphitem: 'altGlyphItem',
28+
animate: 'animate',
29+
animatecolor: 'animateColor',
30+
animatemotion: 'animateMotion',
31+
animatetransform: 'animateTransform',
32+
audio: 'audio',
33+
canvas: 'canvas',
34+
circle: 'circle',
35+
clippath: 'clipPath',
36+
'color-profile': 'colorProfile',
37+
cursor: 'cursor',
38+
defs: 'defs',
39+
desc: 'desc',
40+
discard: 'discard',
41+
ellipse: 'ellipse',
42+
feblend: 'feBlend',
43+
fecolormatrix: 'feColorMatrix',
44+
fecomponenttransfer: 'feComponentTransfer',
45+
fecomposite: 'feComposite',
46+
feconvolvematrix: 'feConvolveMatrix',
47+
fediffuselighting: 'feDiffuseLighting',
48+
fedisplacementmap: 'feDisplacementMap',
49+
fedistantlight: 'feDistantLight',
50+
fedropshadow: 'feDropShadow',
51+
feflood: 'feFlood',
52+
fefunca: 'feFuncA',
53+
fefuncb: 'feFuncB',
54+
fefuncg: 'feFuncG',
55+
fefuncr: 'feFuncR',
56+
fegaussianblur: 'feGaussianBlur',
57+
feimage: 'feImage',
58+
femerge: 'feMerge',
59+
femergenode: 'feMergeNode',
60+
femorphology: 'feMorphology',
61+
feoffset: 'feOffset',
62+
fepointlight: 'fePointLight',
63+
fespecularlighting: 'feSpecularLighting',
64+
fespotlight: 'feSpotLight',
65+
fetile: 'feTile',
66+
feturbulence: 'feTurbulence',
67+
filter: 'filter',
68+
font: 'font',
69+
'font-face': 'fontFace',
70+
'font-face-format': 'fontFaceFormat',
71+
'font-face-name': 'fontFaceName',
72+
'font-face-src': 'fontFaceSrc',
73+
'font-face-uri': 'fontFaceUri',
74+
foreignobject: 'foreignObject',
75+
g: 'g',
76+
glyph: 'glyph',
77+
glyphref: 'glyphRef',
78+
hatch: 'hatch',
79+
hatchpath: 'hatchpath',
80+
hkern: 'hkern',
81+
iframe: 'iframe',
82+
image: 'image',
83+
line: 'line',
84+
lineargradient: 'linearGradient',
85+
marker: 'marker',
86+
mask: 'mask',
87+
mesh: 'mesh',
88+
meshgradient: 'meshgradient',
89+
meshpatch: 'meshpatch',
90+
meshrow: 'meshrow',
91+
metadata: 'metadata',
92+
'missing-glyph': 'missingGlyph',
93+
mpath: 'mpath',
94+
path: 'path',
95+
pattern: 'pattern',
96+
polygon: 'polygon',
97+
polyline: 'polyline',
98+
radialgradient: 'radialGradient',
99+
rect: 'rect',
100+
script: 'script',
101+
set: 'set',
102+
solidcolor: 'solidcolor',
103+
stop: 'stop',
104+
style: 'style',
105+
svg: 'svg',
106+
switch: 'switch',
107+
symbol: 'symbol',
108+
text: 'text',
109+
textpath: 'textPath',
110+
title: 'title',
111+
tref: 'tref',
112+
tspan: 'tspan',
113+
unknown: 'unknown',
114+
use: 'use',
115+
video: 'video',
116+
view: 'view',
117+
vkern: 'vkern'
118+
};
119+
22120
function isNumeric(input) {
23121
return (
24122
input !== undefined &&
@@ -47,6 +145,11 @@ function getAttributeName(attribute, node) {
47145
return attribute.name
48146
}
49147

148+
function transformTagName(tagName) {
149+
const lowercaseTagName = tagName.toLowerCase();
150+
return ELEMENT_TAG_NAME_MAPPING[lowercaseTagName] || lowercaseTagName;
151+
}
152+
50153
function getAttributeValue(attribute) {
51154
return attribute.value
52155
}
@@ -63,7 +166,8 @@ export default {
63166
HTMLElement: {
64167
enter(path) {
65168
const jsxElement = new JSXElement()
66-
jsxElement.name = path.node.tagName.toLowerCase()
169+
170+
jsxElement.name = transformTagName(path.node.tagName)
67171
jsxElement.attributes = listToArray(path.node.attributes)
68172
jsxElement.children = listToArray(path.node.childNodes)
69173
path.replace(jsxElement)

0 commit comments

Comments
 (0)