Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove recast and use ast-types directly (#349)
* Remove recast and use ast-types directly * Add benchmark * Add custom serializer for NodePath * Support printing created identifiers * Fix test * Add comment * Fix lint * Fix typescript to not use recast and fix flow types
- Loading branch information
Showing
111 changed files
with
1,221 additions
and
1,063 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,249 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import clsx from 'clsx'; | ||
| import { chainPropTypes } from '@material-ui/utils'; | ||
| import withStyles from '../styles/withStyles'; | ||
| import { capitalize } from '../utils/helpers'; | ||
|
|
||
| const SIZE = 44; | ||
|
|
||
| function getRelativeValue(value, min, max) { | ||
| const clampedValue = Math.min(Math.max(min, value), max); | ||
| return (clampedValue - min) / (max - min); | ||
| } | ||
|
|
||
| function easeOut(t) { | ||
| t = getRelativeValue(t, 0, 1); | ||
| // https://gist.github.com/gre/1650294 | ||
| t = (t -= 1) * t * t + 1; | ||
| return t; | ||
| } | ||
|
|
||
| function easeIn(t) { | ||
| return t * t; | ||
| } | ||
|
|
||
| export const styles = theme => ({ | ||
| /* Styles applied to the root element. */ | ||
| root: { | ||
| display: 'inline-block', | ||
| lineHeight: 1, // Keep the progress centered | ||
| }, | ||
| /* Styles applied to the root element if `variant="static"`. */ | ||
| static: { | ||
| transition: theme.transitions.create('transform'), | ||
| }, | ||
| /* Styles applied to the root element if `variant="indeterminate"`. */ | ||
| indeterminate: { | ||
| animation: 'mui-progress-circular-rotate 1.4s linear infinite', | ||
| // Backward compatible logic between JSS v9 and v10. | ||
| // To remove with the release of Material-UI v4 | ||
| animationName: '$mui-progress-circular-rotate', | ||
| }, | ||
| /* Styles applied to the root element if `color="primary"`. */ | ||
| colorPrimary: { | ||
| color: theme.palette.primary.main, | ||
| }, | ||
| /* Styles applied to the root element if `color="secondary"`. */ | ||
| colorSecondary: { | ||
| color: theme.palette.secondary.main, | ||
| }, | ||
| /* Styles applied to the `svg` element. */ | ||
| svg: {}, | ||
| /* Styles applied to the `circle` svg path. */ | ||
| circle: { | ||
| stroke: 'currentColor', | ||
| // Use butt to follow the specification, by chance, it's already the default CSS value. | ||
| // strokeLinecap: 'butt', | ||
| }, | ||
| /* Styles applied to the `circle` svg path if `variant="static"`. */ | ||
| circleStatic: { | ||
| transition: theme.transitions.create('stroke-dashoffset'), | ||
| }, | ||
| /* Styles applied to the `circle` svg path if `variant="indeterminate"`. */ | ||
| circleIndeterminate: { | ||
| animation: 'mui-progress-circular-dash 1.4s ease-in-out infinite', | ||
| // Backward compatible logic between JSS v9 and v10. | ||
| // To remove with the release of Material-UI v4 | ||
| animationName: '$mui-progress-circular-dash', | ||
| // Some default value that looks fine waiting for the animation to kicks in. | ||
| strokeDasharray: '80px, 200px', | ||
| strokeDashoffset: '0px', // Add the unit to fix a Edge 16 and below bug. | ||
| }, | ||
| '@keyframes mui-progress-circular-rotate': { | ||
| '100%': { | ||
| transform: 'rotate(360deg)', | ||
| }, | ||
| }, | ||
| '@keyframes mui-progress-circular-dash': { | ||
| '0%': { | ||
| strokeDasharray: '1px, 200px', | ||
| strokeDashoffset: '0px', | ||
| }, | ||
| '50%': { | ||
| strokeDasharray: '100px, 200px', | ||
| strokeDashoffset: '-15px', | ||
| }, | ||
| '100%': { | ||
| strokeDasharray: '100px, 200px', | ||
| strokeDashoffset: '-125px', | ||
| }, | ||
| }, | ||
| /* Styles applied to the `circle` svg path if `disableShrink={true}`. */ | ||
| circleDisableShrink: { | ||
| animation: 'none', | ||
| }, | ||
| }); | ||
|
|
||
| /** | ||
| * ## ARIA | ||
| * | ||
| * If the progress bar is describing the loading progress of a particular region of a page, | ||
| * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy` | ||
| * attribute to `true` on that region until it has finished loading. | ||
| */ | ||
| const CircularProgress = React.forwardRef(function CircularProgress( | ||
| props, | ||
| ref, | ||
| ) { | ||
| const { | ||
| classes, | ||
| className, | ||
| color, | ||
| disableShrink, | ||
| size, | ||
| style, | ||
| thickness, | ||
| value, | ||
| variant, | ||
| ...other | ||
| } = props; | ||
|
|
||
| const circleStyle = {}; | ||
| const rootStyle = {}; | ||
| const rootProps = {}; | ||
|
|
||
| if (variant === 'determinate' || variant === 'static') { | ||
| const circumference = 2 * Math.PI * ((SIZE - thickness) / 2); | ||
| circleStyle.strokeDasharray = circumference.toFixed(3); | ||
| rootProps['aria-valuenow'] = Math.round(value); | ||
|
|
||
| if (variant === 'static') { | ||
| circleStyle.strokeDashoffset = `${( | ||
| ((100 - value) / 100) * | ||
| circumference | ||
| ).toFixed(3)}px`; | ||
| rootStyle.transform = 'rotate(-90deg)'; | ||
| } else { | ||
| circleStyle.strokeDashoffset = `${( | ||
| easeIn((100 - value) / 100) * circumference | ||
| ).toFixed(3)}px`; | ||
| rootStyle.transform = `rotate(${(easeOut(value / 70) * 270).toFixed( | ||
| 3, | ||
| )}deg)`; | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className={clsx( | ||
| classes.root, | ||
| { | ||
| [classes[`color${capitalize(color)}`]]: color !== 'inherit', | ||
| [classes.indeterminate]: variant === 'indeterminate', | ||
| [classes.static]: variant === 'static', | ||
| }, | ||
| className, | ||
| )} | ||
| style={{ width: size, height: size, ...rootStyle, ...style }} | ||
| ref={ref} | ||
| role="progressbar" | ||
| {...rootProps} | ||
| {...other} | ||
| > | ||
| <svg | ||
| className={classes.svg} | ||
| viewBox={`${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`} | ||
| > | ||
| <circle | ||
| className={clsx(classes.circle, { | ||
| [classes.circleIndeterminate]: variant === 'indeterminate', | ||
| [classes.circleStatic]: variant === 'static', | ||
| [classes.circleDisableShrink]: disableShrink, | ||
| })} | ||
| style={circleStyle} | ||
| cx={SIZE} | ||
| cy={SIZE} | ||
| r={(SIZE - thickness) / 2} | ||
| fill="none" | ||
| strokeWidth={thickness} | ||
| /> | ||
| </svg> | ||
| </div> | ||
| ); | ||
| }); | ||
|
|
||
| CircularProgress.propTypes = { | ||
| /** | ||
| * Override or extend the styles applied to the component. | ||
| * See [CSS API](#css) below for more details. | ||
| */ | ||
| classes: PropTypes.object.isRequired, | ||
| /** | ||
| * @ignore | ||
| */ | ||
| className: PropTypes.string, | ||
| /** | ||
| * The color of the component. It supports those theme colors that make sense for this component. | ||
| */ | ||
| color: PropTypes.oneOf(['primary', 'secondary', 'inherit']), | ||
| /** | ||
| * If `true`, the shrink animation is disabled. | ||
| * This only works if variant is `indeterminate`. | ||
| */ | ||
| disableShrink: chainPropTypes(PropTypes.bool, props => { | ||
| if (props.disableShrink && props.variant !== 'indeterminate') { | ||
| return new Error( | ||
| 'Material-UI: you have provided the `disableShrink` property ' + | ||
| 'with a variant other than `indeterminate`. This will have no effect.', | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| }), | ||
| /** | ||
| * The size of the circle. | ||
| */ | ||
| size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
| /** | ||
| * @ignore | ||
| */ | ||
| style: PropTypes.object, | ||
| /** | ||
| * The thickness of the circle. | ||
| */ | ||
| thickness: PropTypes.number, | ||
| /** | ||
| * The value of the progress indicator for the determinate and static variants. | ||
| * Value between 0 and 100. | ||
| */ | ||
| value: PropTypes.number, | ||
| /** | ||
| * The variant to use. | ||
| * Use indeterminate when there is no progress value. | ||
| */ | ||
| variant: PropTypes.oneOf(['determinate', 'indeterminate', 'static']), | ||
| }; | ||
|
|
||
| CircularProgress.defaultProps = { | ||
| color: 'primary', | ||
| disableShrink: false, | ||
| size: 40, | ||
| thickness: 3.6, | ||
| value: 0, | ||
| variant: 'indeterminate', | ||
| }; | ||
|
|
||
| export default withStyles(styles, { name: 'MuiCircularProgress', flip: false })( | ||
| CircularProgress, | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| /* eslint-disable */ | ||
| const fs = require('fs'); | ||
| const path = require('path'); | ||
| const Table = require('cli-table'); | ||
| const Benchmark = require('benchmark'); | ||
| const { parse } = require('..'); | ||
|
|
||
| console.log(`Node: ${process.version}`); | ||
|
|
||
| const head = ['fixture', 'timing']; | ||
|
|
||
| const files = ['./fixtures/CircularProgress.js']; | ||
|
|
||
| const table = new Table({ | ||
| head, | ||
| style: { | ||
| head: ['bold'], | ||
| }, | ||
| }); | ||
|
|
||
| if (!global.gc) { | ||
| console.error( | ||
| 'Garbage collection unavailable. Pass --expose-gc ' + | ||
| 'when launching node to enable forced garbage collection.', | ||
| ); | ||
| process.exit(); | ||
| } | ||
|
|
||
| files.forEach(file => { | ||
| const code = fs.readFileSync(path.join(__dirname, file), 'utf-8'); | ||
| const suite = new Benchmark.Suite(file.replace(/\.\/fixtures\//, '')); | ||
| const options = { filename: file, babelrc: false, configFile: false }; | ||
|
|
||
| // warmup | ||
| parse(code, null, null, options); | ||
| global.gc(); | ||
| suite.add(0, () => { | ||
| parse(code, null, null, options); | ||
| }); | ||
| const result = [suite.name]; | ||
| suite.on('cycle', function(event) { | ||
| { | ||
| // separate scope so we can cleanup all this afterwards | ||
| const bench = event.target; | ||
| const factor = bench.hz < 100 ? 100 : 1; | ||
| const msg = `${Math.round(bench.hz * factor) / | ||
| factor} ops/sec ±${Math.round(bench.stats.rme * 100) / | ||
| 100}% (${Math.round(bench.stats.mean * 1000)}ms)`; | ||
| result.push(msg); | ||
| } | ||
| global.gc(); | ||
| }); | ||
|
|
||
| console.log(`Running benchmark for ${suite.name} ...`); | ||
| global.gc(); | ||
| suite.run({ async: false }); | ||
| global.gc(); // gc is disabled so ensure we run it | ||
| table.push(result); | ||
| }); | ||
| global.gc(); // gc is disabled so ensure we run it | ||
| console.log(table.toString()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.