Created
June 3, 2020 20:14
-
-
Save mwarger/d5846d9a74d65bc27c1e7a5a5216151c to your computer and use it in GitHub Desktop.
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
{ | |
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and | |
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope | |
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is | |
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: | |
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. | |
// Placeholders with the same ids are connected. | |
// Example: | |
// "Print to console": { | |
// "scope": "javascript,typescript", | |
// "prefix": "log", | |
// "body": [ | |
// "console.log('$1');", | |
// "$2" | |
// ], | |
// "description": "Log output to console" | |
// } | |
"Functional Component": { | |
"scope": "typescriptreact", | |
"prefix": "fc", | |
"body": [ | |
"export const $TM_FILENAME_BASE:React.FC = () => {\n", | |
" return <>$1</>", | |
"}" | |
] | |
}, | |
"Functional Component With Props": { | |
"scope": "typescriptreact", | |
"prefix": "fcp", | |
"body": [ | |
"export const $TM_FILENAME_BASE:React.FC<$1> = ({$2}) => {\n", | |
" return <>$3</>", | |
"}" | |
] | |
}, | |
"Functional Component Test": { | |
"scope": "typescriptreact", | |
"prefix": "fct", | |
"body": [ | |
"import React from 'react';", | |
"import { render } from 'utils/test-utils';", | |
"import { $1 } from '../$1';", | |
"\n", | |
"test('renders without crashing', () => {", | |
"\trender(<$1 />);", | |
"});" | |
] | |
}, | |
"Functional Route Component": { | |
"scope": "typescriptreact", | |
"prefix": "fcr", | |
"body": [ | |
"import { RouteComponentProps } from '@reach/router'\n", | |
"const $TM_FILENAME_BASE:React.FC<RouteComponentProps<{$1}>> = ({$2}) => {\n", | |
" return <>$3</>", | |
"}\n", | |
"export default $TM_FILENAME_BASE" | |
] | |
}, | |
"Cypress text input": { | |
"scope": "typescript", | |
"prefix": "cyinput", | |
"body": [ | |
"cy.findByLabelText(/$1/i)", | |
".should('exist')", | |
".type($2)" | |
] | |
}, | |
"Import * from React": { | |
"scope": "typescriptreact", | |
"prefix": "imr", | |
"body": "import * as React from 'react'\n" | |
}, | |
"Import JSX and pragma": { | |
"scope": "typescriptreact", | |
"prefix": "imjsx", | |
"body": "/** @jsx jsx */\nimport { jsx } from 'theme-ui'" | |
}, | |
"Query Handler": { | |
"scope": "typescriptreact", | |
"prefix": "queryhandler", | |
"body": "<QueryHandler {...$1}>{({data}) => {$2}}</QueryHandler>" | |
}, | |
"Create separate context value and dispatch with provider": { | |
"prefix": "context", | |
"scope": "typescriptreact", | |
"body": [ | |
"import * as React from \"react\";", | |
"", | |
"type Action = { type: \"$1\" };", | |
"type Dispatch = (action: Action) => void;", | |
"type State = { $2: $3 };", | |
"type ${TM_FILENAME_BASE}ProviderProps = { children: React.ReactNode };", | |
"", | |
"const ${TM_FILENAME_BASE}StateContext = React.createContext<State | undefined>(undefined);", | |
"const ${TM_FILENAME_BASE}DispatchContext = React.createContext<Dispatch | undefined>(", | |
"undefined", | |
");", | |
"", | |
"function ${TM_FILENAME_BASE}Reducer(state: State, action: Action) {", | |
"switch (action.type) {", | |
"case \"$1\": {", | |
"return { ...state, $2: $4 };", | |
"}", | |
"default: {", | |
"throw new Error(`Unhandled action type: ${action.type}`);", | |
"}", | |
"}", | |
"}", | |
"", | |
"const initialState = { $2: $4 }", | |
"", | |
"function ${TM_FILENAME_BASE}Provider({ children }: ${TM_FILENAME_BASE}ProviderProps) {", | |
"const [state, dispatch] = React.useReducer(${TM_FILENAME_BASE}Reducer, initialState);", | |
"return (", | |
"<${TM_FILENAME_BASE}StateContext.Provider value={state}>", | |
"<${TM_FILENAME_BASE}DispatchContext.Provider value={dispatch}>", | |
"{children}", | |
"</${TM_FILENAME_BASE}DispatchContext.Provider>", | |
"</${TM_FILENAME_BASE}StateContext.Provider>", | |
");", | |
"}", | |
"", | |
"function use${TM_FILENAME_BASE}State() {", | |
"const context = React.useContext(${TM_FILENAME_BASE}StateContext);", | |
"if (context === undefined) {", | |
"throw new Error(\"use${TM_FILENAME_BASE}State must be used within a ${TM_FILENAME_BASE}Provider\");", | |
"}", | |
"return context;", | |
"}", | |
"", | |
"function use${TM_FILENAME_BASE}Dispatch() {", | |
"const context = React.useContext(${TM_FILENAME_BASE}DispatchContext);", | |
"if (context === undefined) {", | |
"throw new Error(\"use${TM_FILENAME_BASE}Dispatch must be used within a ${TM_FILENAME_BASE}Provider\");", | |
"}", | |
"return context;", | |
"}", | |
"", | |
"export { ${TM_FILENAME_BASE}Provider, use${TM_FILENAME_BASE}State, use${TM_FILENAME_BASE}Dispatch };", | |
"" | |
], | |
"description": "Kent Dodd's contexts" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment