记录学习路上的一些笔记

const downloadHost = process.env.PUPPETEER_DOWNLOAD_HOST || 
    process.env.npm_config_puppeteer_download_host ||
    process.env.npm_package_config_puppeteer_download_host;

import React from 'react'
const Button = ({ onClick: handleClick, children }) => (
  <button onClick={handleClick}>{children}</button>
)

import React, { MouseEvent, ReactNode } from 'react'
type Props = { 
 onClick(e: MouseEvent<HTMLElement>): void
 children?: ReactNode 
}
const Button = ({ onClick: handleClick, children }: Props) => (
  <button onClick={handleClick}>{children}</button>
)

const initialState = { clicksCount: 0 }

type State = Readonly<typeof initialState>

readonly state: State = initialState

this.state.clicksCount = 2 
this.state = { clicksCount: 2 }

const decrementClicksCount = (prevState: State) 
                      => ({ clicksCount: prevState.clicksCount-- })

// 将抛出一个编译错误
//
// [ts]
// Cannot assign to 'clicksCount' because it is a constant or a read-only property.

type Props = { 
  onClick(e: MouseEvent<HTMLElement>): void
  color: string 
}

type Props = { 
  onClick(e: MouseEvent<HTMLElement>): void
  color?: string 
}

const Button: SFC<Props> = ({ onClick: handleClick, color, children }) => (
  <button style={{ color }} onClick={handleClick}>
    {children}
  </button>
)

{
  onClick(e: MouseEvent<HTMLElement>): void
  color?: string
}

render(){
  return (
    <ButtonWithDefaultProps 
      onClick={this.handleIncrement}
    >
      Increment
    </ButtonWithDefaultProps>
  )
}

render(){
  return (
    <ButtonViaClass
      onClick={this.handleIncrement}
    >
      Increment
    </ButtonViaClass>
  )
}

const initialState = { show: false }
type State = Readonly<typeof initialState>

type Props = Partial<{
  children: RenderCallback
  render: RenderCallback
}>
type RenderCallback = (args: ToggleableComponentProps) => JSX.Element
type ToggleableComponentProps = { 
  show: State['show']
  toggle: Toggleable['toggle'] 
}

type RenderCallback = (args: ToggleableComponentProps) => JSX.Element

type ToggleableComponentProps = { 
  show: State['show']
  toggle: Toggleable['toggle'] 
}

export class Toggleable extends Component<Props, State> {
  // ...
  render() {
    const { children, render } = this.props
    const renderProps = { show: this.state.show, toggle: this.toggle }
    if (render) {
      return render(renderProps)
    }
    return isFunction(children) ? children(renderProps) : null
  }
  // ...
}

<Route path="/foo" component={MyView} />

import { ToggleableComponentProps } from './toggleable'
type MenuItemProps = { title: string }
const MenuItem: SFC<MenuItemProps & ToggleableComponentProps> = ({
  title,
  toggle,
  show,
  children,
}) => (
  <>
    <div onClick={toggle}>
      <h1>{title}</h1>
    </div>
    {show ? children : null}
  </>
)

type Props = { title: string }
const ToggleableMenu: SFC<Props> = ({ title, children }) => (
  <Toggleable
    render={({ show, toggle }) => (
      <MenuItem show={show} toggle={toggle} title={title}>
        {children}
      </MenuItem>
    )}
  />
)

const defaultProps = { props: {} as { [name: string]: any } }
type Props = Partial<
  {
    children: RenderCallback | ReactNode
    render: RenderCallback
    component: ComponentType<ToggleableComponentProps<any>>
  } & DefaultProps
>
type DefaultProps = typeof defaultProps

export type ToggleableComponentProps<P extends object = object> = {
  show: State['show']
  toggle: Toggleable['toggle']
} & P

render() {
    const { 
     component: InjectedComponent, 
     children, 
     render, 
     props 
    } = this.props
    const renderProps = { 
     show: this.state.show, toggle: this.toggle 
    }
    // 组件注入
    if (InjectedComponent) {
      return (
        <InjectedComponent {...props} {...renderProps}>
          {children}
        </InjectedComponent>
      )
    }
    if (render) {
      return render(renderProps)
    }
    
    // children函数渲染
    return isFunction(children) ? children(renderProps) : null
  }

export class Menu extends Component {
  render() {
    return (
      <>
        <ToggleableMenuViaComponentInjection title="First Menu">
          Some content
        </ToggleableMenuViaComponentInjection>
        <ToggleableMenuViaComponentInjection title="Second Menu">
          Another content
        </ToggleableMenuViaComponentInjection>
        <ToggleableMenuViaComponentInjection title="Third Menu">
          More content
        </ToggleableMenuViaComponentInjection>
      </>
    )
  }
}

type Props<P extends object = object> = Partial<
  {
    children: RenderCallback | ReactNode
    render: RenderCallback
    component: ComponentType<ToggleableComponentProps<P>>
  } & DefaultProps<P>
>

type DefaultProps<P extends object = object> = { props: P }
const defaultProps: DefaultProps = { props: {} }

export class Toggleable<T = {}> extends Component<Props<T>, State> {}

export class Toggleable<T extends object = object> extends Component<Props<T>, State> {
  static ofType<T extends object>() {
    return Toggleable as Constructor<Toggleable<T>>
  }
}

const initialState = { show: false }
const defaultProps: DefaultProps = { ...initialState, props: {} }
type State = Readonly<typeof initialState>
type DefaultProps<P extends object = object> = { props: P } & Pick<State, 'show'>

export class Toggleable<T = {}> extends Component<Props<T>, State> {
  static readonly defaultProps: Props = defaultProps
  // Bang operator used, I know I know ...
  state: State = { show: this.props.show! }
  componentWillReceiveProps(nextProps: Props<T>) {
    const currentProps = this.props
    if (nextProps.show !== currentProps.show) {
      this.setState({ show: Boolean(nextProps.show) })
    }
  }
}

const getAngle = ({ x: x1, y: y1 }, { x: x2, y: y2 }) => {
    const dot = x1 * x2 + y1 * y2
    const det = x1 * y2 - y1 * x2
    const angle = Math.atan2(det, dot) / Math.PI * 180
    return (angle + 360) % 360
}
const angle = getAngle({
    x: x1 - x3,
    y: y1 - y3,
}, {
    x: x2 - x3,
    y: y2 - y3,
});
console.log(angle);

const path = require('path');
const es3ifyPlugin = require('es3ify-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js',
    },
    module: {
        rules: [{
            test: /\.ts$/,
            use: ['ts-loader'],
        }],
    },
    resolve: {
        extensions: ['.ts'],
    },
    devtool: "source-map",
    plugins: [
        new es3ifyPlugin(),
    ],
};

const log = (text: string) => console.log(text);

for (let i = 0; i < 5; i++) {
    log(String(i));
}

module.exports = {
    // ...
    resolve: {
-       extensions: ['.ts'],
+       extensions: ['.js', '.ts'],
    },
    // ...
};

import "es6-promise/auto";          // 低版本浏览器支持promise

const delay = (time: number) => new Promise(resolve => setTimeout(resolve, time));

(async () => {
    await delay(1000);
    alert('done.');
})();

import "es6-promise/auto";
import delayA from "./a";
import delayB from "./b";

const delay = (time: number) => new Promise(resolve => setTimeout(resolve, time));

(async () => {
    await delay(1000);
    alert('1');
    await delayA(1000);
    alert('2');
    await delayB(1000);
    alert('3');
})();

const delay = (time: number) => new Promise(resolve => setTimeout(resolve, time));

async function delayA(time: number) {
    await delay(time);
}

export default delayA;

const delay = (time: number) => new Promise(resolve => setTimeout(resolve, time));

async function delayB(time: number) {
    await delay(time);
}

export default delayB;

// 省略以上代码

/************************************************************************/
/******/ ({

/***/ "./src/a.ts":
/*!******************!*\
  !*** ./src/a.ts ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    // ...省略
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    // ...省略    
};
exports.__esModule = true;
var delay = function (time) { return new Promise(function (resolve) { return setTimeout(resolve, time); }); };
function delayA(time) {
    return __awaiter(this, void 0, void 0, function () {
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, delay(time)];
                case 1:
                    _a.sent();
                    return [2 /*return*/];
            }
        });
    });
}
exports["default"] = delayA;


/***/ }),

/***/ "./src/b.ts":
/*!******************!*\
  !*** ./src/b.ts ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    // ...省略
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    // ...省略    
};
exports.__esModule = true;
var delay = function (time) { return new Promise(function (resolve) { return setTimeout(resolve, time); }); };
function delayB(time) {
    return __awaiter(this, void 0, void 0, function () {
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, delay(time)];
                case 1:
                    _a.sent();
                    return [2 /*return*/];
            }
        });
    });
}
exports["default"] = delayB;


/***/ }),

/***/ "./src/index.ts":
/*!**********************!*\
  !*** ./src/index.ts ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    // ...省略
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    // ...省略    
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var _this = this;
exports.__esModule = true;
__webpack_require__(/*! es6-promise/auto */ "./node_modules/es6-promise/auto.js");
var a_1 = __importDefault(__webpack_require__(/*! ./a */ "./src/a.ts"));
var b_1 = __importDefault(__webpack_require__(/*! ./b */ "./src/b.ts"));
var delay = function (time) { return new Promise(function (resolve) { return setTimeout(resolve, time); }); };
(function () { return __awaiter(_this, void 0, void 0, function () {
    return __generator(this, function (_a) {
        switch (_a.label) {
            case 0: return [4 /*yield*/, delay(1000)];
            case 1:
                _a.sent();
                alert('1');
                return [4 /*yield*/, a_1["default"](1000)];
            case 2:
                _a.sent();
                alert('2');
                return [4 /*yield*/, b_1["default"](1000)];
            case 3:
                _a.sent();
                alert('3');
                return [2 /*return*/];
        }
    });
}); })();


/***/ })

/******/ });
//# sourceMappingURL=main.js.map

import "es6-promise/auto";
+ import 'tslib/tslib';
// ...