ppph/ppph.code-snippets at master · charlzyx/ppph · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
{
  "PipeHOC class template": {
    "scope": "javascript",
    "prefix": "ppc",
    "body": [
      "import React, { Component, forwardRef } from 'react';",
      "import PropTypes from 'prop-types';",
      "import hoistNonReactStatics from 'hoist-non-react-statics';",
      "import { piper } from 'ppph';",
      "",
      "/**",
      " * --------------------------------------------",
      " * PipeHOC$1",
      " * --------------------------------------------",
      " * introduce your pipeHOC",
      " */",
      "const PipeHOC$1 = (Comp) => {",
      "  class Pipe$1Wrapper extends Component {",
      "    static displayName = `Pipe$1Wrapper${Comp.displayName || Comp.name || ''}`;",
      "",
      "    static propTypes = {",
      "      forwardRef: PropTypes.oneOfType([",
      "        PropTypes.func,",
      "        // Element is just window.Element, this type for React.createRef()",
      "        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),",
      "      ]),",
      "    };",
      "",
      "    static defaultProps = {",
      "      forwardRef: null,",
      "    }",
      "",
      "    render() {",
      "      const { props } = this;",
      "      const nextProps = {",
      "        ...props,",
      "        ref: props.forwardRef,",
      "      };",
      "      return <Comp {...nextProps} />;",
      "    }",
      "  }",
      "",
      "  // it is not need for ppph, but it better to make your PipeHOC common.",
      "  // forward the ref.",
      "  const ForwardRefPipe$1Wrappr = forwardRef((props, ref) => <Pipe$1Wrapper {...props} forwardRef={ref} />);",
      "  hoistNonReactStatics(ForwardRefPipe$1Wrappr, Comp);",
      "};",
      "",
      "/**",
      " * --------------------------------------------",
      " * pipe $2",
      " * --------------------------------------------",
      " * introduce your pipe",
      " */",
      "export default piper({",
      "  who: '$2',                        // name for pipe",
      "  when: (type, props) => props.$2,  // condition to use the pipe",
      "  how: PipeHOC$1,                   // the HOC for this pipe, means how to deal with it",
      "  why: (e) => {                     // a callback will be call when error occur.",
      "    console.error('[PipeHOC$1] error: ');",
      "    console.dir(e);",
      "  },",
      "  // pH: means sort weight, just like pH, the lower pH value, the heighter sort weight;",
      "  // key: pependent key name in JSX, which will be sort by write order;",
      "  ph: [7, '$2'],",
      "});",
    ]
  },
  "PipeHOC function template": {
    "scope": "javascript",
    "prefix": "ppf",
    "body": [
      "import React, { forwardRef } from 'react';",
      "import PropTypes from 'prop-types';",
      "import hoistNonReactStatics from 'hoist-non-react-statics';",
      "import { piper } from 'ppph';",
      "",
      "/**",
      " * --------------------------------------------",
      " * PipeHOC$1",
      " * --------------------------------------------",
      " * introduce your pipe.",
      " */",
      "const PipeHOC$1 = (Comp) => {",
      "  // forward the ref.",
      "  const Pipe$1Wrapper = forwardRef((props, ref) => {",
      "    const nextProps = {",
      "      ...props,",
      "      ref,",
      "    };",
      "    return <Comp {...nextProps} />;",
      "  });",
      "  Pipe$1Wrapper.displayName = `Pipe$1Wrapper${Comp.displayName || Comp.name || ''}`;",
      "",
      "  Pipe$1Wrapper.propTypes = {",
      "  };",
      "",
      "  Pipe$1Wrapper.defaultProps = {",
      "  };",
      "",
      "  // it is not need for ppph, but it better to make your PipeHOC common.",
      "  hoistNonReactStatics(Pipe$1Wrapper, Comp);",
      "  return Pipe$1Wrapper;",
      "};",
      "",
      "/**",
      " * --------------------------------------------",
      " * pipe $2",
      " * --------------------------------------------",
      " * introduce your pipe",
      " */",
      "export default piper({",
      "  who: '$2',                        // name for pipe",
      "  when: (type, props) => props.$2,  // condition to use the pipe",
      "  how: PipeHOC$1,                   // the HOC for this pipe, means how to deal with it",
      "  why: (e) => {                     // a callback will be call when error occur.",
      "    console.error('[PipeHOC$1] error: ');",
      "    console.dir(e);",
      "  },",
      "  // pH: means sort weight, just like pH, the lower pH value, the heighter sort weight;",
      "  // key: pependent key name in JSX, which will be sort by write order;",
      "  ph: [7, '$2'],",
      "});",
    ]
  }
}