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

Commit

Permalink
Add element tag name mapping for certain JSX elements.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattijsbliek
mattijsbliek committed Sep 15, 2017
1 parent 5b7849a commit d498f5a
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 3 deletions.
50 changes: 48 additions & 2 deletions packages/h2x-plugin-jsx/src/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,45 @@ describe('transformJsx', () => {
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Dismiss</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<defs>
<linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#FAD961" />
<stop offset="100%" stop-color="#F7955D" />
</linearGradient>
<filter
id="b"
width="157.1%"
height="180%"
x="-28.6%"
y="-20%"
filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5" />
<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"
/>
</filter>
</defs>
<g id="Blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<g id="Dismiss" stroke="#063855" stroke-width="2">
<path d="M51,37 L37,51" id="Shape"></path>
<path d="M51,51 L37,37" id="Shape"></path>
<circle
cx="43.5"
cy="42.5"
r="31.5"
fill="url(#a)"
opacity=".1"
/>
<circle
fill="#f00"
cx="43.5"
cy="42.5"
r="21.5"
filter="url(#b)"
opacity="1"
/>
</g>
</g>
</svg>
Expand All @@ -29,11 +63,23 @@ describe('transformJsx', () => {
<desc>
Created with Sketch.
</desc>
<defs />
<defs>
<linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
<stop offset="0%" stopColor="#FAD961" />
<stop offset="100%" stopColor="#F7955D" />
</linearGradient>
<filter id="b" width="157.1%" height="180%" x="-28.6%" y="-20%" filterUnits="objectBoundingBox">
<feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5" />
<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" />
</filter>
</defs>
<g id="Blocks" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd" strokeLinecap="square">
<g id="Dismiss" stroke="#063855" strokeWidth={2}>
<path d="M51,37 L37,51" id="Shape" />
<path d="M51,51 L37,37" id="Shape" />
<circle cx="43.5" cy="42.5" r="31.5" fill="url(#a)" opacity=".1" />
<circle fill="#f00" cx="43.5" cy="42.5" r="21.5" filter="url(#b)" opacity={1} />
</g>
</g>
</svg>`)
Expand Down
106 changes: 105 additions & 1 deletion packages/h2x-plugin-jsx/src/visitor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,104 @@ const ELEMENT_ATTRIBUTE_MAPPING = {
},
}

// Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements
const ELEMENT_TAG_NAME_MAPPING = {
a: 'a',
altglyph: 'altGlyph',
altglyphdef: 'altGlyphDef',
altglyphitem: 'altGlyphItem',
animate: 'animate',
animatecolor: 'animateColor',
animatemotion: 'animateMotion',
animatetransform: 'animateTransform',
audio: 'audio',
canvas: 'canvas',
circle: 'circle',
clippath: 'clipPath',
'color-profile': 'colorProfile',
cursor: 'cursor',
defs: 'defs',
desc: 'desc',
discard: 'discard',
ellipse: 'ellipse',
feblend: 'feBlend',
fecolormatrix: 'feColorMatrix',
fecomponenttransfer: 'feComponentTransfer',
fecomposite: 'feComposite',
feconvolvematrix: 'feConvolveMatrix',
fediffuselighting: 'feDiffuseLighting',
fedisplacementmap: 'feDisplacementMap',
fedistantlight: 'feDistantLight',
fedropshadow: 'feDropShadow',
feflood: 'feFlood',
fefunca: 'feFuncA',
fefuncb: 'feFuncB',
fefuncg: 'feFuncG',
fefuncr: 'feFuncR',
fegaussianblur: 'feGaussianBlur',
feimage: 'feImage',
femerge: 'feMerge',
femergenode: 'feMergeNode',
femorphology: 'feMorphology',
feoffset: 'feOffset',
fepointlight: 'fePointLight',
fespecularlighting: 'feSpecularLighting',
fespotlight: 'feSpotLight',
fetile: 'feTile',
feturbulence: 'feTurbulence',
filter: 'filter',
font: 'font',
'font-face': 'fontFace',
'font-face-format': 'fontFaceFormat',
'font-face-name': 'fontFaceName',
'font-face-src': 'fontFaceSrc',
'font-face-uri': 'fontFaceUri',
foreignobject: 'foreignObject',
g: 'g',
glyph: 'glyph',
glyphref: 'glyphRef',
hatch: 'hatch',
hatchpath: 'hatchpath',
hkern: 'hkern',
iframe: 'iframe',
image: 'image',
line: 'line',
lineargradient: 'linearGradient',
marker: 'marker',
mask: 'mask',
mesh: 'mesh',
meshgradient: 'meshgradient',
meshpatch: 'meshpatch',
meshrow: 'meshrow',
metadata: 'metadata',
'missing-glyph': 'missingGlyph',
mpath: 'mpath',
path: 'path',
pattern: 'pattern',
polygon: 'polygon',
polyline: 'polyline',
radialgradient: 'radialGradient',
rect: 'rect',
script: 'script',
set: 'set',
solidcolor: 'solidcolor',
stop: 'stop',
style: 'style',
svg: 'svg',
switch: 'switch',
symbol: 'symbol',
text: 'text',
textpath: 'textPath',
title: 'title',
tref: 'tref',
tspan: 'tspan',
unknown: 'unknown',
use: 'use',
video: 'video',
view: 'view',
vkern: 'vkern'
};

function isNumeric(input) {
return (
input !== undefined &&
Expand Down Expand Up @@ -47,6 +145,11 @@ function getAttributeName(attribute, node) {
return attribute.name
}

function transformTagName(tagName) {
const lowercaseTagName = tagName.toLowerCase();
return ELEMENT_TAG_NAME_MAPPING[lowercaseTagName] || lowercaseTagName;
}

function getAttributeValue(attribute) {
return attribute.value
}
Expand All @@ -63,7 +166,8 @@ export default {
HTMLElement: {
enter(path) {
const jsxElement = new JSXElement()
jsxElement.name = path.node.tagName.toLowerCase()

jsxElement.name = transformTagName(path.node.tagName)
jsxElement.attributes = listToArray(path.node.attributes)
jsxElement.children = listToArray(path.node.childNodes)
path.replace(jsxElement)
Expand Down

0 comments on commit d498f5a

Please sign in to comment.