Skip to content

Commit 1f0d717

Browse files
Damian SznajderDamian Sznajder
Damian Sznajder
authored and
Damian Sznajder
committed
chore: generate snippets and replace placeholders
1 parent 3e7b951 commit 1f0d717

12 files changed

+190
-242
lines changed

‎.github/workflows/typescript_and_lint.yml

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
name: Typescript & lint
22

3-
on: :push
3+
on:
4+
push:
5+
branches:
6+
- "*"
47

58
jobs:
69
lint:

‎README.md

+16-16
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,8 @@ React 17 is currently supported by `_` prefix.
137137
| `ssf→` | `this.setState((state, props) => return { })` |
138138
| `props→` | `this.props.propName` |
139139
| `state→` | `this.state.stateName` |
140-
| `rcontext→` | `const ${1:contextName} = React.createContext()` |
141-
| `cref→` | `this.${1:refName}Ref = React.createRef()` |
140+
| `rcontext→` | `const $1 = React.createContext()` |
141+
| `cref→` | `this.$1Ref = React.createRef()` |
142142
| `fref→` | `const ref = React.createRef()` |
143143
| `bnd→` | `this.methodName = this.methodName.bind(this)` |
144144
@@ -682,11 +682,11 @@ it("should $1", () => {
682682
import React from 'react'
683683
import renderer from 'react-test-renderer'
684684

685-
import { ${1:ComponentName} } from '../${1:ComponentName}'
685+
import { $1 } from '../$1'
686686

687-
describe('<${1:ComponentName} />', () => {
687+
describe('<$1 />', () => {
688688
const defaultProps = {}
689-
const wrapper = renderer.create(<${1:ComponentName} {...defaultProps} />)
689+
const wrapper = renderer.create(<$1 {...defaultProps} />)
690690

691691
test('render', () => {
692692
expect(wrapper).toMatchSnapshot()
@@ -702,13 +702,13 @@ import renderer from 'react-test-renderer'
702702
import { Provider } from 'react-redux'
703703

704704
import store from 'src/store'
705-
import { ${1:ComponentName} } from '../${1:ComponentName}'
705+
import { $1 } from '../$1'
706706

707-
describe('<${1:ComponentName} />', () => {
707+
describe('<$1 />', () => {
708708
const defaultProps = {}
709709
const wrapper = renderer.create(
710710
<Provider store={store}>
711-
<${1:${TM_FILENAME_BASE}} {...defaultProps} />)
711+
<${1TM_FILENAME_BASE}} {...defaultProps} />)
712712
</Provider>,
713713
)
714714

@@ -725,14 +725,14 @@ import 'react-native'
725725
import React from 'react'
726726
import renderer from 'react-test-renderer'
727727

728-
import ${1:ComponentName} from '../${1:ComponentName}'
728+
import $1 from '../$1'
729729

730-
describe('<${1:ComponentName} />', () => {
730+
describe('<$1 />', () => {
731731
const defaultProps = {
732732

733733
}
734734

735-
const wrapper = renderer.create(<${1:ComponentName} {...defaultProps} />)
735+
const wrapper = renderer.create(<$1 {...defaultProps} />)
736736

737737
test('render', () => {
738738
expect(wrapper).toMatchSnapshot()
@@ -749,13 +749,13 @@ import renderer from 'react-test-renderer'
749749
import { Provider } from 'react-redux'
750750

751751
import store from 'src/store/configureStore'
752-
import ${1:ComponentName} from '../${1:ComponentName}'
752+
import $1 from '../$1'
753753

754-
describe('<${1:ComponentName} />', () => {
754+
describe('<$1 />', () => {
755755
const defaultProps = {}
756756
const wrapper = renderer.create(
757757
<Provider store={store}>
758-
<${1:ComponentName} {...defaultProps} />
758+
<$1 {...defaultProps} />
759759
</Provider>,
760760
)
761761

@@ -780,7 +780,7 @@ export const mapDispatchToProps = {
780780

781781
}
782782

783-
export const ${1:hocComponentName} = (WrappedComponent) => {
783+
export const $1 = (WrappedComponent) => {
784784
const hocComponent = ({ ...props }) => <WrappedComponent {...props} />
785785

786786
hocComponent.propTypes = {
@@ -789,7 +789,7 @@ export const ${1:hocComponentName} = (WrappedComponent) => {
789789
return hocComponent
790790
}
791791

792-
export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))
792+
export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)($1(WrapperComponent))
793793
```
794794
795795
### `hoc`

‎package.json

+2-29
Original file line numberDiff line numberDiff line change
@@ -99,33 +99,7 @@
9999
]
100100
}
101101
}
102-
},
103-
"snippets": [
104-
{
105-
"language": "javascript",
106-
"path": "./snippets/generated.json"
107-
},
108-
{
109-
"language": "typescript",
110-
"path": "./lib/snippets/snippets.json"
111-
},
112-
{
113-
"language": "javascriptreact",
114-
"path": "./lib/snippets/snippets.json"
115-
},
116-
{
117-
"language": "typescriptreact",
118-
"path": "./lib/snippets/snippets.json"
119-
},
120-
{
121-
"language": "typescript",
122-
"path": "./lib/snippets/ts-snippets.json"
123-
},
124-
{
125-
"language": "typescriptreact",
126-
"path": "./lib/snippets/ts-snippets.json"
127-
}
128-
]
102+
}
129103
},
130104
"scripts": {
131105
"vscode:prepublish": "yarn compile",
@@ -141,10 +115,9 @@
141115
"devDependencies": {
142116
"@babel/cli": "7.16.0",
143117
"@babel/preset-typescript": "7.16.5",
144-
"@types/node": "17.0.4",
118+
"@types/node": "17.0.5",
145119
"@types/prettier": "2.4.2",
146120
"@types/vscode": "1.63.1",
147-
"esbuild": "0.14.8",
148121
"eslint": "8.5.0",
149122
"eslint-config-satya164": "3.1.10",
150123
"eslint-plugin-simple-import-sort": "7.0.0",

‎src/generateSnippets.ts

+101-35
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,113 @@
11
import { workspace } from "vscode";
22
import { writeFileSync } from "fs";
33

4-
import hooks, { HooksSnippet } from "./sourceSnippets/hooks";
5-
import imports, { ImportsSnippet } from "./sourceSnippets/imports";
6-
import reactNative, { ReactNativeSnippet } from "./sourceSnippets/reactNative";
7-
import typescript, { TypescriptSnippet } from "./sourceSnippets/typescript";
4+
import hooksSnippets, { HooksSnippet } from "./sourceSnippets/hooks";
5+
import importsSnippets, { ImportsSnippet } from "./sourceSnippets/imports";
6+
import reactNativeSnippets, {
7+
ReactNativeSnippet,
8+
} from "./sourceSnippets/reactNative";
9+
import typescriptSnippets, {
10+
TypescriptSnippet,
11+
} from "./sourceSnippets/typescript";
812
import { ExtensionSettings } from "./helpers";
9-
import redux, { ReduxSnippet } from "./sourceSnippets/redux";
10-
import components, { ComponentsSnippet } from "./sourceSnippets/components";
11-
import console, { ConsoleSnippet } from "./sourceSnippets/console";
12-
import propTypes, { PropTypesSnippet } from "./sourceSnippets/propTypes";
13-
import tests, { TestsSnippet } from "./sourceSnippets/tests";
14-
15-
type SnippetsArray = Array<
16-
| HooksSnippet
17-
| ImportsSnippet
18-
| ReactNativeSnippet
19-
| TypescriptSnippet
20-
| ReduxSnippet
21-
| ComponentsSnippet
22-
| ConsoleSnippet
23-
| PropTypesSnippet
24-
| TestsSnippet
25-
>;
13+
import reduxSnippets, { ReduxSnippet } from "./sourceSnippets/redux";
14+
import componentsSnippets, {
15+
ComponentsSnippet,
16+
} from "./sourceSnippets/components";
17+
import consoleSnippets, { ConsoleSnippet } from "./sourceSnippets/console";
18+
import propTypesSnippets, {
19+
PropTypesSnippet,
20+
} from "./sourceSnippets/propTypes";
21+
import testsSnippets, { TestsSnippet } from "./sourceSnippets/tests";
22+
import { SnippetPlaceholderMapping, SnippetPlaceholders } from "./types";
23+
24+
type SnippetKeys =
25+
| HooksSnippet["key"]
26+
| ImportsSnippet["key"]
27+
| ReactNativeSnippet["key"]
28+
| TypescriptSnippet["key"]
29+
| ReduxSnippet["key"]
30+
| ComponentsSnippet["key"]
31+
| ConsoleSnippet["key"]
32+
| PropTypesSnippet["key"]
33+
| TestsSnippet["key"];
34+
35+
type Snippets = {
36+
[key in SnippetKeys]:
37+
| HooksSnippet
38+
| ImportsSnippet
39+
| ReactNativeSnippet
40+
| TypescriptSnippet
41+
| ReduxSnippet
42+
| ComponentsSnippet
43+
| ConsoleSnippet
44+
| PropTypesSnippet
45+
| TestsSnippet;
46+
};
47+
48+
let snippetsCache: string | null = null;
49+
50+
const getSnippets = () => {
51+
if (snippetsCache) {
52+
return snippetsCache;
53+
}
2654

27-
const generateSnippets = () => {
2855
const config = workspace.getConfiguration(
2956
"esReactSnippets",
3057
) as unknown as ExtensionSettings;
3158

32-
const snippets: SnippetsArray = [
33-
...components,
34-
...console,
35-
...hooks,
36-
...imports,
37-
...propTypes,
38-
...reactNative,
39-
...redux,
40-
...tests,
41-
...(config.typescript ? typescript : []),
42-
];
43-
44-
writeFileSync("./snippets/generated.json", JSON.stringify(snippets, null, 2));
59+
const snippets: Snippets = [
60+
...componentsSnippets,
61+
...consoleSnippets,
62+
...hooksSnippets,
63+
...importsSnippets,
64+
...propTypesSnippets,
65+
...reactNativeSnippets,
66+
...reduxSnippets,
67+
...testsSnippets,
68+
...(config.typescript ? typescriptSnippets : []),
69+
].reduce((acc, snippet) => {
70+
acc[snippet.key] = snippet;
71+
return acc;
72+
}, {} as Snippets);
73+
74+
const jsonSnippets = String(JSON.stringify(snippets, null, 2))
75+
.replace(
76+
new RegExp(SnippetPlaceholders.FileName, "g"),
77+
SnippetPlaceholderMapping[SnippetPlaceholders.FileName],
78+
)
79+
.replace(
80+
new RegExp(SnippetPlaceholders.FirstTab, "g"),
81+
SnippetPlaceholderMapping[SnippetPlaceholders.FirstTab],
82+
)
83+
.replace(
84+
new RegExp(SnippetPlaceholders.SecondTab, "g"),
85+
SnippetPlaceholderMapping[SnippetPlaceholders.SecondTab],
86+
)
87+
.replace(
88+
new RegExp(SnippetPlaceholders.ThirdTab, "g"),
89+
SnippetPlaceholderMapping[SnippetPlaceholders.ThirdTab],
90+
)
91+
.replace(
92+
new RegExp(SnippetPlaceholders.LastTab, "g"),
93+
SnippetPlaceholderMapping[SnippetPlaceholders.LastTab],
94+
)
95+
.replace(
96+
new RegExp(SnippetPlaceholders.TypeInterface, "g"),
97+
config.typescriptComponentPropsStatePrefix || "type",
98+
);
99+
100+
snippetsCache = jsonSnippets;
101+
return jsonSnippets;
102+
};
103+
104+
const generateSnippets = () => {
105+
console.time("generate");
106+
const jsonSnippets = getSnippets();
107+
console.log(jsonSnippets);
108+
console.timeEnd("generate");
109+
110+
writeFileSync(__dirname + "/snippets/generated.json", jsonSnippets);
45111
};
46112

47113
export default generateSnippets;

‎src/helpers.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export type ExtensionSettings = {
88
quotes: boolean;
99
typescript: boolean;
1010
tabWidth: number;
11-
componentPropsPrefix: "type" | "interface";
11+
typescriptComponentPropsStatePrefix: "type" | "interface";
1212
};
1313

1414
export const getPrettierConfig = async (): Promise<Options> => {

‎src/snippetSearch.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { SnippetString, window } from "vscode";
22

33
import { parseSnippet } from "./helpers";
4+
import snippets from "./snippets/generated.json";
45

56
const snippetSearch = async () => {
67
const { showQuickPick, activeTextEditor } = window;
78

8-
const snippetsArray = [[]];
9+
const snippetsArray = Object.entries(snippets);
910

1011
const items = snippetsArray.map(
1112
// @ts-expect-error

‎src/snippets/generated.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

0 commit comments

Comments
 (0)