babel-plugin-e2dx

JSX babel plugin that transforms JSX into e2d function calls for conveince and aesthetics.

Usage Notes

SVG Collision

Each element is targeted specifically so there are a minimal amount of collisions for developers who use JSX for React in the their projects. The only collisions happen for SVG elements.

An example .babelrc file will look like this

{
  "plugins": [
    ["e2dx", { "ignoreSVG": false }]
  ],
  "presets": ["es2015", "es2015-loose", "react"]
}

Ignoring SVG means that the path, ellipse, and rect elements will not be converted and must be called manually. For example:

import e2d from 'e2d';

let strokeRect = [e2d.path(e2d.rect(width, height)), <stroke />];

Syntactic Whitespace and JSXText

All syntactic whitespace and JSXText elements between declared elements is ignored and babel will mangle the function calls to make them harder to read when navigating and debugging e2d function calls.

Elements

TODO: TOC

Arc

To see how arcs are used, please visit mdn.

Named Parameter List:

• x: The x coordinate of the arc's center. (defaults to 0)
• y: The y coordinate of the arc's center. (defaults to 0)
• r: The arc's radius. (defaults to 1)
• startAngle: The angle at which the arc starts, measured clockwise from the positive x axis and expressed in radians.
• endAngle: The angle at which the arc ends, measured clockwise from the positive x axis and expressed in radians.
• anticlockwise: An optional Boolean which, if true, causes the arc to be drawn counter-clockwise between the two angles. By default it is drawn clockwise.

It has four forms.

<arc />
//e2d.arc(); an arc centered at [0, 0] with radius 0 with a full circle

<arc r={radius} />
//e2d.arc(radius); an arc centered at [0, 0] with radius "radius" with a full circle

<arc x={x} y={y} r={radius} />
//e2d.arc(x, y, radius); an arc centered at [x, y] with radius "radius" with a full circle

<arc x={x} y={y} r={radius}
  startAngle={startAngle} endAngle={endAngle} />
//e2d.arc(x, y, radius, startAngle, endAngle); an arc centered at [x, y] with radius "radius" from startAngle to endAngle

<arc x={x} y={y} r={radius}
  startAngle={startAngle} endAngle={endAngle}
  anticlockwise={true} />
//e2d.arc(x, y, radius, startAngle, endAngle, true); an arc centered at [x, y] with radius "radius" from startAngle to endAngle anticlockwise

arcTo

To see how the arcTo function works, please visit mdn.

Named Parameter List:

• x1: The x axis of the coordinate for the first control point.
• y1: The y axis of the coordinate for the first control point.
• x2: The x axis of the coordinate for the second control point.
• y2: The y axis of the coordinate for the second control point.
• r: The arc's radius.

It has one form:

<arcTo x1={x1} y1={y1} x2={x2} y2={y2} r={radius} />
//e2d.arcTo(x1, y1, x2, y2, radius);

beginClip

This element is provided by the API and used in the e2d.clip method. It provides the bottom level instruction that clips a canvas region, it is not recommended for manual use. Please see the <clip> element on how to do clipping regions in canvas.

<beginClip />

beginPath

This element is provided by the API and used in the e2d.path method. It provides the bottom level instruction that begins a canvas path, it is not recommended for manual use. Please see the <path> element on how to use canvas paths.

<beginPath />

bezierCurveTo

To see how the bezierCurveTo function works, please visit mdn.

Named Parameter List:

• cp1x: The x axis of the coordinate for the first control point.
• cp1y: The y axis of the coordinate for first control point.
• cp2x: The x axis of the coordinate for the second control point.
• cp2y: The y axis of the coordinate for the second control point.
• x: The x axis of the coordinate for the end point.
• y: The y axis of the coordinate for the end point.

It has one form and every parameter is required:

<bezierCurveTo cp1x={cp1x} cp1y={cp1y} cp2x={cp2x} cp2y={cp2y}
  x={x} y={y} />
//e2d.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

clearRect

This element clears a rectangle. To see how the clearRect function works, please visit mdn.

Named Parameter List:

• x: The x axis of the coordinate for the rectangle starting point. (default value is 0)
• y: The y axis of the coordinate for the rectangle starting point. (default value is 0)
• width: The rectangle's width.
• height: The rectangle's height.

It has two forms, and only the width and height are required.

//x and y are both 0
<clearRect width={width} height={height} />
//e2d.clearRect(width, height);

//x and y both must be set for this to work
<clearRect x={x} y={y} width={width} height={height} />
//e2d.clearRect(x, y, width, height);

clip

To see how path clipping function works, please visit mdn.

Please note that the fillRule parameter is not supported except in Firefox. When a wider support is acheived for this feature it will be added to the 4.X.X branch.

Named Parameter List:

• path: A path to clip.

Note: Since paths are already supported by e2d as objects, it is unnecessary for Path2D support to exist. Do not use Path2D objects.

<clip path={<rect width={100} height={100} />}>
  {children}
</clip>

clipPath

This element is provided by the API and used in the e2d.clip method. It provides the bottom level instruction that clips a canvas region, it is not recommended for manual use. Please see the <clip> element on how to do clipping regions in canvas.

<clipPath />

closePath

This element is provided by the API and used in the e2d.path method. It provides the bottom level instruction that closes a canvas path, it is not recommended for manual use. Please see the <path> element on how to use canvas paths.

<closePath />

createRegularPolygon

This is a conveince element for creating regular polygons. The polygon is an array of [x,y] coordinates.

Named Parameter List:

• radius: The radius of the circle tangent to the polygon.
• position: The [x, y] point of center
• sides: The number of sides (should be at least 3)

let polygon = <createRegularPolygon radius={radius} position={position} sides={sides} />;

ellipse

This element is "polyfilled" for older browsers and for browsers that do not support ellipses. To see how ellipses work, please visit mdn.

Named Parameter List:

• x: The x axis of the coordinate for the ellipse's center. (defaults to 0)
• y: The y axis of the coordinate for the ellipse's center.
• radiusX: The ellipse's major-axis radius. (required)
• radiusY: The ellipse's minor-axis radius. (required)
• rotation: The rotation for this ellipse, expressed in radians. (defaults to 0)
• startAngle: The starting point, measured from the x axis, from which it will be drawn, expressed in radians. (defaults to 0)
• endAngle: The end ellipse's angle to which it will be drawn, expressed in radians. (defaults to Math.PI * 2)
• anticlockwise: An Boolean which, if true, draws the ellipse anticlockwise (counter-clockwise), otherwise in a clockwise direction. (defaults to false)

It has five forms.

<ellipse radiusX={radiusX} radiusY={radiusY} />
//e2d.ellipse(radiusX, radiusY);

<ellipse x={x} y={y}
  radiusX={radiusX} radiusY={radiusY} />
//e2d.ellipse(x, y, radiusX, radiusY);

<ellipse x={x} y={y}
  radiusX={radiusX} radiusY={radiusY}
  rotation={rotation} />
//e2d.ellipse(x, y, radiusX, radiusY, rotation);

<ellipse x={x} y={y}
  radiusX={radiusX} radiusY={radiusY}
  rotation={rotation}
  startAngle={startAngle} endAngle={endAngle} />
//e2d.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle);

<ellipse x={x} y={y}
  radiusX={radiusX} radiusY={radiusY}
  rotation={rotation}
  startAngle={startAngle} endAngle={endAngle}
  anticlockwise={true} />
//e2d.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, true);

fill

This element will fill the current path with the current fillStyle. Do not forget to wrap each fill with the correct fillStyle element. Please see fillStyle to learn how to use fillStyles. Also, visit mdn for more information on how the fill function works.

<fill />
//e2d.fill()

fillArc

This element is provided for convenience to round out the API and mirror the functionality of fillRect using arcs. To see how arcs are used, please visit mdn.

Named Parameter List:

• x: The x coordinate of the arc's center. (defaults to 0)
• y: The y coordinate of the arc's center. (defaults to 0)
• r: The arc's radius. (defaults to 1)
• startAngle: The angle at which the arc starts, measured clockwise from the positive x axis and expressed in radians.
• endAngle: The angle at which the arc ends, measured clockwise from the positive x axis and expressed in radians.
• anticlockwise: An optional Boolean which, if true, causes the arc to be drawn counter-clockwise between the two angles. By default it is drawn clockwise.

It has four forms.

<fillArc />
//e2d.fillArc(); an arc centered at [0, 0] with radius 0 with a full circle

<fillArc r={radius} />
//e2d.fillArc(radius); an arc centered at [0, 0] with radius "radius" with a full circle

<fillArc x={x} y={y} r={radius} />
//e2d.fillArc(x, y, radius); an arc centered at [x, y] with radius "radius" with a full circle

<fillArc x={x} y={y} r={radius}
  startAngle={startAngle} endAngle={endAngle} />
//e2d.fillArc(x, y, radius, startAngle, endAngle); an arc centered at [x, y] with radius "radius" from startAngle to endAngle

<fillArc x={x} y={y} r={radius}
  startAngle={startAngle} endAngle={endAngle}
  anticlockwise={true} />
//e2d.fillArc(x, y, radius, startAngle, endAngle, true); an arc centered at [x, y] with radius "radius" from startAngle to endAngle anticlockwise

fillRect

This element fills a rectangle. To see how the fillRect function works, please visit mdn.

Named Parameter List:

• x: The x axis of the coordinate for the rectangle starting point. (default value is 0)
• y: The y axis of the coordinate for the rectangle starting point. (default value is 0)
• width: The rectangle's width.
• height: The rectangle's height.

It has two forms, and only the width and height are required.

//x and y are both 0
<fillRect width={width} height={height} />
//e2d.fillRect(width, height);

//x and y both must be set for this to work
<fillRect x={x} y={y} width={width} height={height} />
//e2d.fillRect(x, y, width, height);

fillStyle

This is a function that wraps the fillStyle property. To see how the fillStyle property works visit mdn.

<fillStyle style={style}>
  {children}
</fillStyle>
//e2d.fillStyle(style, children);

fillText

This element draws text to the canvas. Please see mdn for more information on how this function works.

Named Paramter List:

• text: The text to render using the current font, textAlign, textBaseline, and direction values (see fontStyle for more infomation.)
• x: The x axis of the coordinate for the text starting point. (defaults to 0)
• y: The y axis of the coordinate for the text starting point. (defaults to 0)
• maxWidth: The maximum width to draw. If specified, and the string is computed to be wider than this width, the font is adjusted to use a more horizontally condensed font (if one is available or if a reasonably readable one can be synthesized by scaling the current font horizontally) or a smaller font.

It has three forms.

<fillText text="Hello World!" />
//e2d.fillText("Hello World!");

<fillText x={x} y={y} text="Hello World!" />
//e2d.fillText(x, y, "Hello World!");

<fillText x={x} y={y} text="Hello World!" maxWidth={maxWidth}/>
//e2d.fillText(x, y, "Hello World!", maxWidth);

globalAlpha

This element sets the globalAlpha property to a value relative the current globalAlpha value. To see how globalAlpha works, please visit mdn.

Named Paramter List:

• alpha: The alpha level relative to the current alpha level. This is caluclated by calling ctx.globalAlpha * alpha.

<globalAlpha alpha={alpha}>
  {children}
</globalAlpha>
//e2d.globalAlpha(alpha, children);

hitRect, hitRegion

The hitRect and hitRegion elements use polygon regions to designate mouse areas on the canvas. Use e2d.activeRegions(ctx) to get the active mouse regions every frame after they have been rendered.

The hitRect element has two forms:

Named Parameter List:

• id: The string id for the region. Duplicates are not ignored, avoid duplicates.
• x: The x axis of the coordinate for the rectangle starting point. (default value is 0)
• y: The y axis of the coordinate for the rectangle starting point. (default value is 0)
• width: The rectangle's width.
• height: The rectangle's height.

<hitRect id="id" width={width} height={height} />
//e2d.hitRect("id", width, height);

<hitRect id="id" x={x} y={y} width={width} height={height} />
//e2d.hitRect("id", x, y, width, height);

The hitRegion element has one form:

Named Parameter List:

• id: The string id for the region. Duplicates are not ignored, avoid duplicates.
• region: The polygon that specifies the region.

<hitRegion id="id" region={region} />
//e2d.hitRegion("id", region);

Side note: This will not add accessibility regions to the canvas and this API may be deprecated if widespread support for the canvas method is provided by major browser.

imageSmoothingEnabled

This element sets the imageSmoothingEnabled property to the specified value. To see how imageSmoothingEnabled works, please visit mdn.

<imageSmoothingEnabled value={value}>
  {children}
</imageSmoothingEnabled>
//e2d.imageSmoothingEnabled(value, children);

lineStyle

This is a combination element that sets multiple properties on the canvas context.

Property List:

• lineWidth: This property of the Canvas 2D API sets the thickness of lines in space units. It ignores zero, negative, Infinity and NaN values. mdn
• lineCap: This property of the Canvas 2D API determines how the end points of every line are drawn. Possible Values: ["butt", "round", "square"] mdn: lineCap
• lineJoin: This property of the Canvas 2D API determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped). Possible Values: ["bevel", "round" "miter"] lineJoin
• miterLimit: A number specifying the miter limit ratio in space units. Zero, negative, Infinity and NaN values are ignored. mdn: miterLimit
• lineDash: A wrapper property for ctx.setLineDash() which accepts an Array. The value is list of numbers that specifies distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]. Link: setLineDash
• lineDashOffset: The lineDashOffset property of the Canvas 2D API sets the line dash pattern offset or "phase" to achieve a "marching ants" effect. Link: lineDashOffset

It has two forms:

Named Parameter List:

• style: provide a single object with key value pairs named for the style properties specified.

<lineStyle style={style}>
  {children}
</lineStyle>
//e2d.lineStyle(style, children);

The second form allows any property optionally:

<lineStyle
  lineWidth={lineWidth}
  lineCap={lineCap}
  lineJoin={lineJoin}
  miterLimit={miterLimit}
  lineDash={lineDash}
  lineDashOffset={lineDashOffset}>
  {children}
</lineStyle>
/*
e2d.lineStyle({
  lineWidth: lineWidth,
  lineCap: lineCap,
  lineJoin: lineJoin,
  miterLimit: miterLimit,
  lineDash: lineDash,
  lineDashOffset: lineDashOffset
}, children);
*/

lineTo

This element connects the last point in the sub-path to the [x, y] coordinates with a straight line (but does not draw it.)

See mdn: lineTo for more information. Named Parameter List:

• x: The x axis of the coordinate for the end of the line.
• y: The y axis of the coordinate for the end of the line.

<lineTo x={y} y={y} />

moveTo

This element moves the starting point of a new sub-path to the (x, y) coordinates.

See mdn: moveTo for more information. Named Parameter List:

• x: The x axis of the point.
• y: The y axis of the point.

<moveTo x={y} y={y} />

path

This element wraps it's children elements in beginPath and endPath.

See mdn: path.

//make a triangle
<path>
  <lineTo x={0} y={10} />
  <lineTo x={10} y={0} />
</path>

placeHolder

This element is a placeholder for a template wrapper. This is useful for instructions that are static and have children that are variable. The placeHolder element has no parameters.

let absoluteCenter = e2d.createWrapper(
  <translate x={width * 0.5} y={height * 0.5}>
    <placeHolder />
  </translate>
);

//this is equivalent to
let absoluteCenter = (...children) => <translate x={width * 0.5} y={height * 0.5}>
  {...children}
</translate>;

There are some additional optimizations that e2d can make during wrapper creation, and is a quick shorthand for a common use pattern.

quadraticCurveTo

To see how the quadraticCurveTo function works, please visit mdn.

Named Parameter List:

• cpx: The x axis of the coordinate for the control point.
• cpy: The y axis of the coordinate for control point.
• x: The x axis of the coordinate for the end point.
• y: The y axis of the coordinate for the end point.

It has one form and every parameter is required:

<quadraticCurveTo cpx={cpx} cpy={cpy} x={x} y={y} />
//e2d.quadraticCurveTo(cpx, cpy, x, y);

rect

This element is used for pathing rectangles. To see how the rect function works, please visit mdn.

Named Parameter List:

• x: The x axis of the coordinate for the rectangle starting point. (default value is 0)
• y: The y axis of the coordinate for the rectangle starting point. (default value is 0)
• width: The rectangle's width.
• height: The rectangle's height.

It has two forms, and only the width and height are required.

//x and y are both 0
<rect width={width} height={height} />
//e2d.rect(width, height);

//x and y both must be set for this to work
<rect x={x} y={y} width={width} height={height} />
//e2d.rect(x, y, width, height);

render

This is a shorthand convenience element that renders the children to a specified context.

<render ctx={ctx}>
  <clearRect width={width} height={height} />
  {children}
</render>;

//becomes
e2d.render(
  e2d.clearRect(width, height),
  children,
  ctx
);

This element prevents the need for ","s when dealing with rendering top level elements.

resetTransform

This is a convenience element that represents a call to setTransform to the identity matrix. This resets the transforms of all the children elements. See setTransform to see how to control the current context's transform values.

<resetTransform>
  {children}
</resetTransform>

//becomes

e2d.resetTransform(children)

rotate

The rotate element rotates the canvas context around the current origin and draws the children rotated. To see how rotate works, visit mdn.

Named Parameter List:

• angle: The angle to rotate clockwise in radians. You can use degree * Math.PI / 180 if you want to calculate from a degree value.

<rotate angle={angle}>
  {children}
</rotate>

//becomes

e2d.rotate(angle, children);

scale

The scale element scales the canvas context and draws the children larger or smaller depending on the scale. To see how scaling works, visit mdn.

Named Parameter List:

• x: Scaling factor in the horizontal direction.
• y: Scaling factor in the vertical direction.

...or

• value: Scaling factor in both directions

Examples:

<scale x={x} y={y}>
  {children}
</scale>
//becomes e2d.scale(x, y, children);

<scale value={value}>
  {children}
</scale>
//becomes e2d.scale(value, children);

setTransform

The setTransform element resets (overrides) the current transformation to the identity matrix and then invokes a transformation described by the arguments of this method. To see how setTransform works, visit mdn.

Named Parameter List:

• matrix: An array of at least six numbers that contain the information for the matrix transform.

let matrix = [a, b, c, d, e, f];

<setTransform  matrix={matrix}>
  {children}
</setTransform>

//becomes
e2d.setTransform(matrix, children);

shadowStyle

This is a combination element that sets multiple properties on the canvas context. Please visit mdn: Shadows to see how each property works.

Property List:

• shadowBlur: This property of the Canvas 2D API specifies the level of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0. mdn
• shadowColor: This property of the Canvas 2D API specifies the color of the shadow.
• shadowOffsetX: This property of the Canvas 2D API specifies the distance that the shadow will be offset in horizontal distance.
• shadowOffsetY: This property of the Canvas 2D API specifies the distance that the shadow will be offset in vertical distance. It has two forms:

Named Parameter List:

• style: provide a single object with key value pairs named for the style properties specified.

<shadowStyle style={style}>
  {children}
</shadowStyle>
//e2d.shadowStyle(style, children);

The second form allows any property optionally:

<shadowStyle
  shadowBlur={shadowBlur}
  shadowColor={shadowColor}
  shadowOffsetX={shadowOffsetX}
  shadowOffsetY={shadowOffsetY}
  >
  {children}
</shadowStyle>
/*
e2d.shadowStyle({
  shadowBlur: shadowBlur,
  shadowColor: shadowColor,
  shadowOffsetX: shadowOffsetX,
  shadowOffsetY: shadowOffsetY
}, children);
*/

skewX and skewY

These skew elements are provided by the API as a relative transform that will skew it's children in the direction specified by an angle.

Named Parameter List:

• angle: The angle which the children will be skewed.

<skewX angle={angle}>{children}</skewX>;
//e2d.skewX(angle, children);

<skewY angle={angle}>{children}</skewY>;
//e2d.skewY(angle, children);

stroke

This element will stroke the current or given path with the current stroke style using the non-zero winding rule. It has no parameters.

<stroke />
//e2d.stroke()

fillArc

This element is provided for convenience to round out the API and mirror the functionality of strokeRect using arcs. To see how arcs are used, please visit mdn.

Named Parameter List:

• x: The x coordinate of the arc's center. (defaults to 0)
• y: The y coordinate of the arc's center. (defaults to 0)
• r: The arc's radius. (defaults to 1)
• startAngle: The angle at which the arc starts, measured clockwise from the positive x axis and expressed in radians.
• endAngle: The angle at which the arc ends, measured clockwise from the positive x axis and expressed in radians.
• anticlockwise: An optional Boolean which, if true, causes the arc to be drawn counter-clockwise between the two angles. By default it is drawn clockwise.

It has four forms.

<strokeArc />
//e2d.strokeArc(); an arc centered at [0, 0] with radius 0 with a full circle

<strokeArc r={radius} />
//e2d.strokeArc(radius); an arc centered at [0, 0] with radius "radius" with a full circle

<strokeArc x={x} y={y} r={radius} />
//e2d.strokeArc(x, y, radius); an arc centered at [x, y] with radius "radius" with a full circle

<strokeArc x={x} y={y} r={radius}
  startAngle={startAngle} endAngle={endAngle} />
//e2d.strokeArc(x, y, radius, startAngle, endAngle); an arc centered at [x, y] with radius "radius" from startAngle to endAngle

<strokeArc x={x} y={y} r={radius}
  startAngle={startAngle} endAngle={endAngle}
  anticlockwise={true} />
//e2d.strokeArc(x, y, radius, startAngle, endAngle, true); an arc centered at [x, y] with radius "radius" from startAngle to endAngle anticlockwise

strokeRect

This element strokes a rectangle. To see how the strokeRect function works, please visit mdn.

Named Parameter List:

• x: The x axis of the coordinate for the rectangle starting point. (default value is 0)
• y: The y axis of the coordinate for the rectangle starting point. (default value is 0)
• width: The rectangle's width.
• height: The rectangle's height.

It has two forms, and only the width and height are required.

//x and y are both 0
<strokeRect width={width} height={height} />
//e2d.strokeRect(width, height);

//x and y both must be set for this to work
<strokeRect x={x} y={y} width={width} height={height} />
//e2d.strokeRect(x, y, width, height);

strokeStyle

This is a function that wraps the strokeStyle property. To see how the strokeStyle property works visit mdn.

<strokeStyle style={style}>
  {children}
</strokeStyle>
//e2d.strokeStyle(style, children);

strokeText

This element draws text to the canvas. Please see mdn for more information on how this function works.

Named Paramter List:

• text: The text to render using the current font, textAlign, textBaseline, and direction values (see fontStyle for more infomation.)
• x: The x axis of the coordinate for the text starting point. (defaults to 0)
• y: The y axis of the coordinate for the text starting point. (defaults to 0)
• maxWidth: The maximum width to draw. If specified, and the string is computed to be wider than this width, the font is adjusted to use a more horizontally condensed font (if one is available or if a reasonably readable one can be synthesized by scaling the current font horizontally) or a smaller font.

It has three forms.

<strokeText text="Hello World!" />
//e2d.strokeText("Hello World!");

<strokeText x={x} y={y} text="Hello World!" />
//e2d.strokeText(x, y, "Hello World!");

<strokeText x={x} y={y} text="Hello World!" maxWidth={maxWidth}/>
//e2d.strokeText(x, y, "Hello World!", maxWidth);

transform

This element multiplies the current transformation with the matrix described by the arguments of this method. You are able to scale, rotate, move and skew the context. To see how transform works, visit mdn.

Named Parameter List:

• matrix: An array of at least six numbers that contain the information for the matrix transform.

let matrix = [a, b, c, d, e, f];

<transform  matrix={matrix}>
  {children}
</transform>

//becomes
e2d.transform(matrix, children);

translate

This element adds a translation transformation by moving the origin x horizontally and y vertically relatively for each of it's children. To see how translate works please visit mdn.

Named Parameter List:

• x: Distance to move in the horizontal direction.
• y: Distance to move in the vertical direction.

<translate x={x} y={y}>
  {children}
</translate>

//becomes
e2d.translate(x, y, children);

This software is released under the MIT License

License

Copyright (c) 2016 Joshua Tenner

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.