Last active
November 7, 2018 15:59
-
-
Save petejodo/09ffe45b04bbc86d693e415b36b7ed9f to your computer and use it in GitHub Desktop.
React/Relay w. Flow VSCode snippets
This file contains hidden or 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
| { | |
| "React Flow Functional Component": { | |
| "prefix": "rffc", | |
| "body": [ | |
| "// @flow", | |
| "", | |
| "import * as React from 'react';", | |
| "", | |
| "type Props = {", | |
| "\t${1:children: React.Node,}", | |
| "};", | |
| "", | |
| "export function ${TM_FILENAME_BASE/(.*)\\..+$/$1/}(props: Props) {", | |
| "\t$0", | |
| "}", | |
| "" | |
| ], | |
| "description": "Create a React Functional Component w/ Flow" | |
| }, | |
| "React Flow Class Component": { | |
| "prefix": "rfcc", | |
| "body": [ | |
| "// @flow", | |
| "", | |
| "import * as React from 'react';", | |
| "", | |
| "type Props = {", | |
| "\t${1:children: React.Node,}", | |
| "};", | |
| "", | |
| "export class ${TM_FILENAME_BASE/(.*)\\..+$/$1/} extends React.Component<Props> {", | |
| "\trender() {", | |
| "\t\t$0", | |
| "\t}", | |
| "}", | |
| "" | |
| ], | |
| "description": "Create a React Class Component w/ Flow" | |
| }, | |
| "React Flow Stateful Class Component": { | |
| "prefix": "rfccs", | |
| "body": [ | |
| "// @flow", | |
| "", | |
| "import * as React from 'react';", | |
| "", | |
| "type Props = {", | |
| "\t${1:children: React.Node,}", | |
| "};", | |
| "", | |
| "type State = {", | |
| "\t${2:toggled: boolean,}", | |
| "};", | |
| "", | |
| "export class ${TM_FILENAME_BASE/(.*)\\..+$/$1/} extends React.Component<Props, State> {", | |
| "\tconstructor(props: Props) {", | |
| "\t\tsuper(props);", | |
| "\t\tthis.state = {", | |
| "\t\t\t${3:toggled: false,}", | |
| "\t\t};", | |
| "\t}", | |
| "", | |
| "\trender() {", | |
| "\t\t$0", | |
| "\t}", | |
| "}", | |
| "" | |
| ], | |
| "description": "Create a React Stateful Class Component w/ Flow" | |
| }, | |
| "React Flow Fragment Container as Functional Component": { | |
| "prefix": "rffcfc", | |
| "body": [ | |
| "// @flow", | |
| "", | |
| "import type { ${TM_FILENAME_BASE/(.*)\\..+$/$1/}_${1:viewer} as ${2:Viewer}Prop } from './__generated__/${TM_FILENAME_BASE/(.*)\\..+$/$1/}_${1:viewer}.graphql';", | |
| "", | |
| "import * as React from 'react';", | |
| "import { createFragmentContainer, graphql } from 'react-relay';", | |
| "", | |
| "type Props = {", | |
| "\t${1:viewer}: ${2:Viewer}Prop,", | |
| "};", | |
| "", | |
| "export function ${TM_FILENAME_BASE/(.*)\\..+$/$1/}Component(props: Props) {", | |
| "\t$0", | |
| "}", | |
| "", | |
| "export const ${TM_FILENAME_BASE/(.*)\\..+$/$1/} = createFragmentContainer(${TM_FILENAME_BASE/(.*)\\..+$/$1/}Component, {", | |
| "\t${1:viewer}: graphql`", | |
| "\t\tfragment ${TM_FILENAME_BASE/(.*)\\..+$/$1/}_${1:viewer} on ${2:Viewer} {", | |
| "\t\t\t${3:serviceId}", | |
| "\t\t}", | |
| "\t`,", | |
| "});", | |
| "" | |
| ], | |
| "description": "Create a Relay Fragment Container using a React Functional Component w/ Flow" | |
| }, | |
| "React Flow Fragment Container as Class Component": { | |
| "prefix": "rfccfc", | |
| "body": [ | |
| "// @flow", | |
| "", | |
| "import type { ${TM_FILENAME_BASE/(.*)\\..+$/$1/}_${1:viewer} as ${2:Viewer}Prop } from './__generated__/${TM_FILENAME_BASE/(.*)\\..+$/$1/}_${1:viewer}.graphql';", | |
| "", | |
| "import * as React from 'react';", | |
| "import { createFragmentContainer, graphql } from 'react-relay';", | |
| "", | |
| "type Props = {", | |
| "\t${1:viewer}: ${2:Viewer}Prop,", | |
| "};", | |
| "", | |
| "export class ${TM_FILENAME_BASE/(.*)\\..+$/$1/}Component extends React.Component<Props> {", | |
| "\trender() {", | |
| "\t\t$0", | |
| "\t}", | |
| "}", | |
| "", | |
| "export const ${TM_FILENAME_BASE/(.*)\\..+$/$1/} = createFragmentContainer(${TM_FILENAME_BASE/(.*)\\..+$/$1/}Component, {", | |
| "\t${1:viewer}: graphql`", | |
| "\t\tfragment ${TM_FILENAME_BASE/(.*)\\..+$/$1/}_${1:viewer} on ${2:Viewer} {", | |
| "\t\t\t${3:serviceId}", | |
| "\t\t}", | |
| "\t`,", | |
| "});", | |
| "" | |
| ], | |
| "description": "Create a Relay Fragment Container using a React Class Component w/ Flow" | |
| }, | |
| "React Flow Fragment Container as Stateful Class Component": { | |
| "prefix": "rfccsfc", | |
| "body": [ | |
| "// @flow", | |
| "", | |
| "import type { ${TM_FILENAME_BASE/(.*)\\..+$/$1/}_${1:viewer} as ${2:Viewer}Prop } from './__generated__/${TM_FILENAME_BASE/(.*)\\..+$/$1/}_${1:viewer}.graphql';", | |
| "", | |
| "import * as React from 'react';", | |
| "import { createFragmentContainer, graphql } from 'react-relay';", | |
| "", | |
| "type Props = {", | |
| "\t${1:viewer}: ${2:Viewer}Prop,", | |
| "};", | |
| "", | |
| "type State = {", | |
| "\t${4:toggled: boolean,}", | |
| "};", | |
| "", | |
| "export class ${TM_FILENAME_BASE/(.*)\\..+$/$1/}Component extends React.Component<Props, State> {", | |
| "\tconstructor(props: Props) {", | |
| "\t\tsuper(props);", | |
| "\t\tthis.state = {", | |
| "\t\t\t${5:toggled: false,}", | |
| "\t\t};", | |
| "\t}", | |
| "", | |
| "\trender() {", | |
| "\t\t$0", | |
| "\t}", | |
| "}", | |
| "", | |
| "export const ${TM_FILENAME_BASE/(.*)\\..+$/$1/} = createFragmentContainer(${TM_FILENAME_BASE/(.*)\\..+$/$1/}Component, {", | |
| "\t${1:viewer}: graphql`", | |
| "\t\tfragment ${TM_FILENAME_BASE/(.*)\\..+$/$1/}_${1:viewer} on ${2:Viewer} {", | |
| "\t\t\t${3:serviceId}", | |
| "\t\t}", | |
| "\t`,", | |
| "});", | |
| "" | |
| ], | |
| "description": "Create a Relay Fragment Container using a React Stateful Class Component w/ Flow" | |
| }, | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment