Add Prettier, Lint Staged to help maintain repo consistency (#35672)

* [Toolchain] Add Prettier

* [Toolchain] Add lint-staged

* [Toolchain] Apply prettier to some types

* Switch to using precise commits so that only changed code is ran through prettier
This commit is contained in:
Christopher Pappas 2019-06-14 05:40:49 -10:00 committed by Orta
parent 7dab06838a
commit a52799f9e9
15 changed files with 260 additions and 212 deletions

View File

@ -7,3 +7,4 @@ insert_final_newline = true
[{*.json,*.yml,*.ts,*.tsx,*.md}]
indent_style = space

1
.prettierignore Normal file
View File

@ -0,0 +1 @@
*.json

20
.prettierrc.json Normal file
View File

@ -0,0 +1,20 @@
{
"$schema": "http://json.schemastore.org/prettierrc",
"parser": "typescript",
"printWidth": 120,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5",
"overrides": [
{
"files": ["*.md"],
"options": {
"tabWidth": 2
}
}
]
}

View File

@ -23,7 +23,15 @@
},
"devDependencies": {
"dtslint": "latest",
"husky": ">=1",
"precise-commits": "^1.0.2",
"prettier": "^1.17.1",
"types-publisher": "github:Microsoft/types-publisher#production"
},
"dependencies": {}
"dependencies": {},
"husky": {
"hooks": {
"pre-commit": "precise-commits"
}
}
}

View File

@ -1,5 +1,5 @@
import * as React from "react";
import * as RelayRuntimeTypes from "relay-runtime";
import * as React from 'react';
import * as RelayRuntimeTypes from 'relay-runtime';
// ~~~~~~~~~~~~~~~~~~~~~
// Maybe Fix
@ -19,7 +19,7 @@ export interface RelayQuery {
export interface FragmentResolver {
dispose(): void;
resolve(
fragment: RelayQuery["Fragment"],
fragment: RelayQuery['Fragment'],
dataIDs: RelayRuntimeTypes.DataID | RelayRuntimeTypes.DataID[]
): StoreReaderData | StoreReaderData[] | undefined | null;
}
@ -29,18 +29,18 @@ export interface RelayEnvironmentInterface {
querySet: RelayRuntimeTypes.RelayQuerySet,
onReadyStateChange: RelayRuntimeTypes.ReadyStateChangeCallback
): RelayRuntimeTypes.Abortable;
getFragmentResolver(fragment: RelayQuery["Fragment"], onNext: () => void): FragmentResolver;
getFragmentResolver(fragment: RelayQuery['Fragment'], onNext: () => void): FragmentResolver;
getStoreData(): RelayStoreData;
primeCache(
querySet: RelayRuntimeTypes.RelayQuerySet,
onReadyStateChange: RelayRuntimeTypes.ReadyStateChangeCallback
): RelayRuntimeTypes.Abortable;
read(
node: RelayQuery["Node"],
node: RelayQuery['Node'],
dataID: RelayRuntimeTypes.DataID,
options?: StoreReaderOptions
): StoreReaderData | void;
readQuery(root: RelayQuery["Root"], options?: StoreReaderOptions): StoreReaderData[] | void;
readQuery(root: RelayQuery['Root'], options?: StoreReaderOptions): StoreReaderData[] | void;
}
// ~~~~~~~~~~~~~~~~~~~~~
@ -50,7 +50,7 @@ export type ClientMutationID = string;
/** Fragments are a hash of functions */
export interface Fragments {
[query: string]: ((variables?: RelayVariables) => string);
[query: string]: (variables?: RelayVariables) => string;
}
export interface CreateContainerOpts {
@ -65,7 +65,7 @@ export interface RelayVariables {
/** add static getFragment method to the component constructor */
export interface RelayContainerClass<T> extends React.ComponentClass<T> {
getFragment: ((q: string, v?: RelayVariables) => string);
getFragment: (q: string, v?: RelayVariables) => string;
}
export interface RelayQueryRequestResolve {
@ -73,12 +73,12 @@ export interface RelayQueryRequestResolve {
}
export type RelayMutationStatus =
| "UNCOMMITTED" // Transaction hasn't yet been sent to the server. Transaction can be committed or rolled back.
| "COMMIT_QUEUED" // Transaction was committed but another transaction with the same collision key is pending, so the transaction has been queued to send to the server.
| "COLLISION_COMMIT_FAILED" // Transaction was queued for commit but another transaction with the same collision key failed. All transactions in the collision queue,
| 'UNCOMMITTED' // Transaction hasn't yet been sent to the server. Transaction can be committed or rolled back.
| 'COMMIT_QUEUED' // Transaction was committed but another transaction with the same collision key is pending, so the transaction has been queued to send to the server.
| 'COLLISION_COMMIT_FAILED' // Transaction was queued for commit but another transaction with the same collision key failed. All transactions in the collision queue,
// including this one, have been failed. Transaction can be recommitted or rolled back.
| "COMMITTING" // Transaction is waiting for the server to respond.
| "COMMIT_FAILED";
| 'COMMITTING' // Transaction is waiting for the server to respond.
| 'COMMIT_FAILED';
export class RelayMutationTransaction {
applyOptimistic(): RelayMutationTransaction;
@ -187,27 +187,25 @@ export interface RenderStateConfig {
export type RenderCallback = (renderState: RenderStateConfig) => any;
export type ReadyStateEvent =
| "ABORT"
| "CACHE_RESTORED_REQUIRED"
| "CACHE_RESTORE_FAILED"
| "CACHE_RESTORE_START"
| "NETWORK_QUERY_ERROR"
| "NETWORK_QUERY_RECEIVED_ALL"
| "NETWORK_QUERY_RECEIVED_REQUIRED"
| "NETWORK_QUERY_START"
| "STORE_FOUND_ALL"
| "STORE_FOUND_REQUIRED";
| 'ABORT'
| 'CACHE_RESTORED_REQUIRED'
| 'CACHE_RESTORE_FAILED'
| 'CACHE_RESTORE_START'
| 'NETWORK_QUERY_ERROR'
| 'NETWORK_QUERY_RECEIVED_ALL'
| 'NETWORK_QUERY_RECEIVED_REQUIRED'
| 'NETWORK_QUERY_START'
| 'STORE_FOUND_ALL'
| 'STORE_FOUND_REQUIRED';
export type OnReadyStateChange = (
readyState: {
ready: boolean;
done: boolean;
stale: boolean;
error?: Error;
events: ReadyStateEvent[];
aborted: boolean;
}
) => void;
export type OnReadyStateChange = (readyState: {
ready: boolean;
done: boolean;
stale: boolean;
error?: Error;
events: ReadyStateEvent[];
aborted: boolean;
}) => void;
export interface RelayProp<V = any> {
readonly route: { name: string }; // incomplete, also has params and queries

View File

@ -1,12 +1,12 @@
export { QueryRenderer, fetchQuery, graphql } from "./index";
export { QueryRenderer, fetchQuery, graphql } from './index';
import {
ConnectionConfig,
RelayPaginationProp as RelayModernPaginationProp,
RelayRefetchProp as RelayModernRefetchProp,
} from "./index";
export { ConcreteFragment, ConcreteRequest, ConcreteBatchRequest } from "relay-runtime";
import * as RelayRuntimeTypes from "relay-runtime";
import { RelayEnvironmentInterface } from "./classic";
} from './index';
export { ConcreteFragment, ConcreteRequest, ConcreteBatchRequest } from 'relay-runtime';
import * as RelayRuntimeTypes from 'relay-runtime';
import { RelayEnvironmentInterface } from './classic';
// ~~~~~~~~~~~~~~~~~~~~~
// Maybe Fix

View File

@ -20,29 +20,31 @@ export {
fetchRelayModernQuery as fetchQuery,
GraphQLTaggedNode,
requestRelaySubscription as requestSubscription,
} from "relay-runtime";
} from 'relay-runtime';
import * as React from "react";
import * as RelayRuntimeTypes from "relay-runtime";
import * as React from 'react';
import * as RelayRuntimeTypes from 'relay-runtime';
// ~~~~~~~~~~~~~~~~~~~~~
// Utility types
// ~~~~~~~~~~~~~~~~~~~~~
export interface _RefType<T> {
" $refType": T;
' $refType': T;
}
export interface _FragmentRefs<T> {
" $fragmentRefs": T;
' $fragmentRefs': T;
}
export type FragmentOrRegularProp<T> = T extends _RefType<infer U>
? _FragmentRefs<U>
: T extends ReadonlyArray<_RefType<infer U>> ? ReadonlyArray<_FragmentRefs<U>> : T;
: T extends ReadonlyArray<_RefType<infer U>>
? ReadonlyArray<_FragmentRefs<U>>
: T;
export type MappedFragmentProps<T> = { [K in keyof T]: FragmentOrRegularProp<T[K]> };
export type RemoveRelayProp<P> = Pick<P, Exclude<keyof P, "relay">>;
export type RemoveRelayProp<P> = Pick<P, Exclude<keyof P, 'relay'>>;
export interface ComponentRef {
componentRef?: (ref: any) => void;
@ -92,11 +94,11 @@ export const graphql: GraphqlInterface;
export interface QueryRendererProps<T extends RelayRuntimeTypes.OperationBase = RelayRuntimeTypes.OperationDefaults> {
cacheConfig?: RelayRuntimeTypes.CacheConfig;
dataFrom?: "NETWORK_ONLY"|"STORE_THEN_NETWORK";
dataFrom?: 'NETWORK_ONLY' | 'STORE_THEN_NETWORK';
environment: RelayRuntimeTypes.Environment;
query?: RelayRuntimeTypes.GraphQLTaggedNode | null;
render(readyState: ReadyState<T["response"]>): React.ReactNode;
variables: T["variables"];
render(readyState: ReadyState<T['response']>): React.ReactNode;
variables: T['variables'];
rerunParamExperimental?: RelayRuntimeTypes.RerunParam;
}
export interface ReadyState<T extends RelayRuntimeTypes.Variables = RelayRuntimeTypes.Variables> {
@ -153,7 +155,7 @@ export function FragmentVariablesGetter(
totalCount: number
): RelayRuntimeTypes.Variables;
export interface ConnectionConfig<P> {
direction?: "backward" | "forward";
direction?: 'backward' | 'forward';
getConnectionFromProps?(props: P): ConnectionData | undefined | null;
getFragmentVariables?: typeof FragmentVariablesGetter;
getVariables(
@ -196,6 +198,4 @@ export function createRefetchContainer<P>(
// Context
// ~~~~~~~~~~~~~~~~~~~~~
export const ReactRelayContext: React.Context<
RelayRuntimeTypes.CRelayContext<RelayRuntimeTypes.Environment>
>;
export const ReactRelayContext: React.Context<RelayRuntimeTypes.CRelayContext<RelayRuntimeTypes.Environment>>;

View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as Relay from "react-relay/classic";
import * as React from 'react';
import * as Relay from 'react-relay/classic';
import { CompatContainer } from "./react-relay-compat-tests";
import { CompatContainer } from './react-relay-compat-tests';
interface Props {
text: string;
@ -25,13 +25,13 @@ export default class AddTweetMutation extends Relay.Mutation<Props, {}> {
getConfigs() {
return [
{
type: "RANGE_ADD",
parentName: "user",
type: 'RANGE_ADD',
parentName: 'user',
parentID: this.props.userId,
connectionName: "tweets",
edgeName: "tweetEdge",
connectionName: 'tweets',
edgeName: 'tweetEdge',
rangeBehaviors: {
"": "append",
'': 'append',
},
},
];
@ -63,7 +63,7 @@ const ArtworkContainer = Relay.createContainer(Artwork, {
artwork: () => Relay.QL`
fragment on Artwork {
title
${CompatContainer.getFragment("whatever")}
${CompatContainer.getFragment('whatever')}
}
`,
},
@ -72,13 +72,13 @@ const ArtworkContainer = Relay.createContainer(Artwork, {
class StubbedArtwork extends React.Component {
render() {
const props = {
artwork: { title: "CHAMPAGNE FORMICA FLAG" },
artwork: { title: 'CHAMPAGNE FORMICA FLAG' },
relay: {
route: {
name: "champagne",
name: 'champagne',
},
variables: {
artworkID: "champagne-formica-flag",
artworkID: 'champagne-formica-flag',
},
setVariables: () => {},
forceFetch: () => {},

View File

@ -1,13 +1,13 @@
import * as React from "react";
import * as React from 'react';
import {
QueryRenderer as CompatQueryRenderer,
createFragmentContainer as createFragmentContainerCompat,
commitMutation as commitMutationCompat,
CompatEnvironment,
RelayPaginationProp as RelayPaginationPropCompat,
} from "react-relay/compat";
} from 'react-relay/compat';
import { configs, mutation, optimisticResponse } from "./react-relay-tests";
import { configs, mutation, optimisticResponse } from './react-relay-tests';
// testting compat mutation with classic environment
function markNotificationAsReadCompat(environment: CompatEnvironment, source: string, storyID: string) {
@ -24,13 +24,13 @@ function markNotificationAsReadCompat(environment: CompatEnvironment, source: st
optimisticResponse,
variables,
onCompleted: (response, errors) => {
console.log("Response received from server.");
console.log('Response received from server.');
},
onError: err => console.error(err),
updater: (store, data) => {
const field = store.get(storyID);
if (field) {
field.setValue(data.story, "story");
field.setValue(data.story, 'story');
}
},
});

View File

@ -1,7 +1,7 @@
// tslint:disable:interface-over-type-literal
import * as React from "react";
import { Environment, Network, RecordSource, Store, ConnectionHandler } from "relay-runtime";
import * as React from 'react';
import { Environment, Network, RecordSource, Store, ConnectionHandler } from 'relay-runtime';
import {
graphql,
@ -15,13 +15,13 @@ import {
RelayRefetchProp,
RelayPaginationProp,
RelayProp,
} from "react-relay";
} from 'react-relay';
// ~~~~~~~~~~~~~~~~~~~~~
// Modern Environment
// ~~~~~~~~~~~~~~~~~~~~~
function fetchQuery(operation: any, variables: any, cacheConfig: {}) {
return fetch("/graphql");
return fetch('/graphql');
}
const network = Network.create(fetchQuery);
const source = new RecordSource();
@ -59,7 +59,7 @@ const MyQueryRenderer = (props: { name: string; show: boolean }) => (
: null
}
variables={{
pageID: "110798995619330",
pageID: '110798995619330',
}}
render={({ error, props }) => {
if (error) {
@ -82,7 +82,7 @@ const MyEmptyQueryRenderer = () => (
if (error) {
return <div>{error.message}</div>;
} else if (props) {
throw new Error("This code path should never be hit");
throw new Error('This code path should never be hit');
}
return <div>Loading</div>;
}}
@ -102,7 +102,7 @@ type Story_story = {
readonly id: string;
readonly text: string;
readonly isPublished: boolean;
readonly " $refType": Story_story$ref;
readonly ' $refType': Story_story$ref;
};
const Story = (() => {
@ -141,7 +141,7 @@ const Story = (() => {
render() {
return (
<div>
{this.props.story.isPublished ? "" : "Draft: "}
{this.props.story.isPublished ? '' : 'Draft: '}
{this.props.story.text}
{this.state.isLoading && <span></span>}
<button onClick={() => this.props.onLike(this.props.story.id)}>LIKE</button>
@ -172,7 +172,7 @@ const Story = (() => {
function doesNotRequireRelayPropToBeProvided() {
const onLike = (id: string) => console.log(`Liked story #${id}`);
const story: { " $fragmentRefs": Story_story$ref } = {} as any;
const story: { ' $fragmentRefs': Story_story$ref } = {} as any;
<StoryRefetchContainer story={story} onLike={onLike} />;
}
@ -192,15 +192,15 @@ type FeedStories_feed = {
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly " $fragmentRefs": Story_story$ref & FeedStories_feed$ref;
readonly ' $fragmentRefs': Story_story$ref & FeedStories_feed$ref;
};
readonly " $fragmentRefs": FeedStory_edges$ref;
readonly ' $fragmentRefs': FeedStory_edges$ref;
}>;
readonly " $refType": FeedStories_feed$ref;
readonly ' $refType': FeedStories_feed$ref;
};
type FeedStory_edges = ReadonlyArray<{
readonly publishedAt: string;
readonly " $refType": FeedStory_edges$ref;
readonly ' $refType': FeedStory_edges$ref;
}>;
const Feed = (() => {
@ -212,7 +212,7 @@ const Feed = (() => {
}
const FeedStoryEdges: React.SFC<{ edges: FeedStory_edges }> = ({ edges }) => (
<div>{edges.map(({ publishedAt }) => publishedAt).join(", ")}</div>
<div>{edges.map(({ publishedAt }) => publishedAt).join(', ')}</div>
);
const FeedStoryEdgesFragmentContainer = createFragmentContainer(FeedStoryEdges, {
@ -254,7 +254,7 @@ const Feed = (() => {
function doesNotRequireRelayPropToBeProvided() {
const onStoryLike = (id: string) => console.log(`Liked story #${id}`);
const feed: { " $fragmentRefs": FeedStories_feed$ref } = {} as any;
const feed: { ' $fragmentRefs': FeedStories_feed$ref } = {} as any;
<FeedFragmentContainer feed={feed} onStoryLike={onStoryLike} />;
}
@ -274,11 +274,10 @@ type UserFeed_user = {
readonly endCursor?: string | null;
readonly hasNextPage: boolean;
};
readonly " $fragmentRefs": FeedStories_feed$ref;
readonly ' $fragmentRefs': FeedStories_feed$ref;
};
readonly " $refType": UserFeed_user$ref;
readonly ' $refType': UserFeed_user$ref;
};
() => {
interface Props {
relay: RelayPaginationProp;
@ -332,7 +331,7 @@ type UserFeed_user = {
`,
},
{
direction: "forward",
direction: 'forward',
getConnectionFromProps(props) {
return props.user && props.user.feed;
},
@ -363,7 +362,7 @@ type UserFeed_user = {
);
function doesNotRequireRelayPropToBeProvided() {
const user: { " $fragmentRefs": UserFeed_user$ref } = {} as any;
const user: { ' $fragmentRefs': UserFeed_user$ref } = {} as any;
<UserFeedPaginationContainer loadMoreTitle="Load More" user={user} />;
}
};
@ -384,38 +383,38 @@ export const mutation = graphql`
export const optimisticResponse = {
markReadNotification: {
notification: {
seenState: "SEEN" as "SEEN",
seenState: 'SEEN' as 'SEEN',
},
},
};
export const configs = [
{
type: "NODE_DELETE" as "NODE_DELETE",
deletedIDFieldName: "destroyedShipId",
type: 'NODE_DELETE' as 'NODE_DELETE',
deletedIDFieldName: 'destroyedShipId',
},
{
type: "RANGE_ADD" as "RANGE_ADD",
parentID: "shipId",
type: 'RANGE_ADD' as 'RANGE_ADD',
parentID: 'shipId',
connectionInfo: [
{
key: "AddShip_ships",
rangeBehavior: "append",
key: 'AddShip_ships',
rangeBehavior: 'append',
},
],
edgeName: "newShipEdge",
edgeName: 'newShipEdge',
},
{
type: "RANGE_DELETE" as "RANGE_DELETE",
parentID: "todoId",
type: 'RANGE_DELETE' as 'RANGE_DELETE',
parentID: 'todoId',
connectionKeys: [
{
key: "RemoveTags_tags",
rangeBehavior: "append",
key: 'RemoveTags_tags',
rangeBehavior: 'append',
},
],
pathToConnection: ["todo", "tags"],
deletedIDFieldName: "removedTagId",
pathToConnection: ['todo', 'tags'],
deletedIDFieldName: 'removedTagId',
},
];
@ -430,7 +429,7 @@ function markNotificationAsRead(source: string, storyID: string) {
type MyMutationResponse = {
readonly markReadNotification: {
readonly notification: {
readonly seenState: "SEEN" | "UNSEEN";
readonly seenState: 'SEEN' | 'UNSEEN';
};
};
};
@ -451,7 +450,7 @@ function markNotificationAsRead(source: string, storyID: string) {
},
onCompleted: (response, errors) => {
if (errors) {
console.log(`Errors received from server: ${errors.map(error => error.message).join(", ")}`);
console.log(`Errors received from server: ${errors.map(error => error.message).join(', ')}`);
} else {
console.log(`Response received from server: ${response.markReadNotification.notification.seenState}`);
}
@ -460,7 +459,7 @@ function markNotificationAsRead(source: string, storyID: string) {
updater: (store, data) => {
const story = store.get(storyID);
if (story) {
story.setValue(data.markReadNotification.notification.seenState, "seenState");
story.setValue(data.markReadNotification.notification.seenState, 'seenState');
}
},
});
@ -479,7 +478,7 @@ const subscription = graphql`
}
`;
const variables = {
storyID: "123",
storyID: '123',
};
requestSubscription(
modernEnvironment, // see Environment docs
@ -492,12 +491,12 @@ requestSubscription(
// example of a custom updater
updater: store => {
// Get the notification
const rootField = store.getRootField("markReadNotification");
const notification = !!rootField && rootField.getLinkedRecord("notification");
const rootField = store.getRootField('markReadNotification');
const notification = !!rootField && rootField.getLinkedRecord('notification');
// Add it to a connection
const viewer = store.getRoot().getLinkedRecord("viewer");
const notifications = ConnectionHandler.getConnection(viewer, "notifications");
const edge = ConnectionHandler.createEdge(store, notifications, notification, "<TypeOfNotificationsEdge>");
const viewer = store.getRoot().getLinkedRecord('viewer');
const notifications = ConnectionHandler.getConnection(viewer, 'notifications');
const edge = ConnectionHandler.createEdge(store, notifications, notification, '<TypeOfNotificationsEdge>');
ConnectionHandler.insertEdgeAfter(notifications, edge);
},
}

View File

@ -5,7 +5,7 @@
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
import * as React from "react";
import * as React from 'react';
export interface TrackingProp<P = {}> {
trackEvent(data: Partial<P>): any;
@ -16,7 +16,7 @@ export interface TrackingProp<P = {}> {
getTrackingData(): {};
}
type Falsy = false | null | undefined | "";
type Falsy = false | null | undefined | '';
export interface Options<T> {
/**

View File

@ -1,5 +1,14 @@
import * as React from 'react';
import { Track, track as _track, TrackingProp, Options, Decorator, TrackingContext, ReactTrackingContext, useTracking } from 'react-tracking';
import {
Track,
track as _track,
TrackingProp,
Options,
Decorator,
TrackingContext,
ReactTrackingContext,
useTracking,
} from 'react-tracking';
import { string } from 'prop-types';
function customEventReporter(data: { page?: string }) {}
@ -20,15 +29,18 @@ interface TrackingData {
const track: Track<TrackingData, Props, State> = _track;
@track({ page: "ClassPage" }, {
dispatch: customEventReporter,
dispatchOnMount: contextData => ({ event: "pageDataReady" }),
process: ownTrackingData => ownTrackingData.page ? { event: 'pageview' } : null,
})
@track(
{ page: 'ClassPage' },
{
dispatch: customEventReporter,
dispatchOnMount: contextData => ({ event: 'pageDataReady' }),
process: ownTrackingData => (ownTrackingData.page ? { event: 'pageview' } : null),
}
)
class ClassPage extends React.Component<Props, State> {
@track({ event: "Clicked" })
@track({ event: 'Clicked' })
handleClick() {
// ... other stuff
// ... other stuff
}
@track((_props, _state, [e]: [React.MouseEvent]) => ({ event: `drag started at ${e.screenX}x${e.screenY}` }))
@ -46,20 +58,24 @@ class ClassPage extends React.Component<Props, State> {
}
}
const FunctionPage: React.SFC<Props> = (props) => {
return (
<div onClick={() => {
props.tracking && props.tracking.trackEvent({ action: 'click' });
}}
/>
);
const FunctionPage: React.SFC<Props> = props => {
return (
<div
onClick={() => {
props.tracking && props.tracking.trackEvent({ action: 'click' });
}}
/>
);
};
const WrappedFunctionPage = track({
page: 'FunctionPage'
}, {
dispatchOnMount: true
})(FunctionPage);
const WrappedFunctionPage = track(
{
page: 'FunctionPage',
},
{
dispatchOnMount: true,
}
)(FunctionPage);
class Test extends React.Component<any, null> {
render() {
@ -77,8 +93,8 @@ const TestContext = () => {
tracking: {
data: { foo: 'bar' },
dispatch: (data: {}) => data,
process: (x: string) => x
}
process: (x: string) => x,
},
};
return (
<ReactTrackingContext.Provider value={trackingContext}>
@ -94,9 +110,13 @@ interface Trackables {
const App = track()((props: { foo: string }) => {
const tracking = useTracking<Trackables>();
return <div onClick={() => {
tracking.trackEvent({
page: 'Home'
});
}}/>;
return (
<div
onClick={() => {
tracking.trackEvent({
page: 'Home',
});
}}
/>
);
});

View File

@ -3,15 +3,18 @@ import { Track, track, TrackingProp, useTracking } from 'react-tracking';
function customEventReporter(data: { page?: string }) {}
@track({ page: "ClassPage" }, {
dispatch: customEventReporter,
dispatchOnMount: contextData => ({ event: "pageDataReady" }),
process: ownTrackingData => ownTrackingData.page ? { event: 'pageview' } : null,
})
@track(
{ page: 'ClassPage' },
{
dispatch: customEventReporter,
dispatchOnMount: contextData => ({ event: 'pageDataReady' }),
process: ownTrackingData => (ownTrackingData.page ? { event: 'pageview' } : null),
}
)
class ClassPage extends React.Component<any> {
@track({ event: "Clicked" })
@track({ event: 'Clicked' })
handleClick() {
// ... other stuff
// ... other stuff
}
@track((_props, _state, [e]) => ({ event: `drag started at ${e.screenX}x${e.screenY}` }))
@ -22,28 +25,28 @@ class ClassPage extends React.Component<any> {
// Only need to cast this to `any` because the settings for this project is to disallow implicit `any`.
@track((props: any, state: any) => ({ event: `got ${props.someProp} and clicked ${state.isClicked}` }))
render() {
return (
<button onClick={this.handleClick}>
Click Me!
</button>
);
return <button onClick={this.handleClick}>Click Me!</button>;
}
}
const FunctionPage: React.SFC<any> = (props) => {
return (
<div onClick={() => {
props.tracking && props.tracking.trackEvent({ action: 'click' });
}}
/>
);
const FunctionPage: React.SFC<any> = props => {
return (
<div
onClick={() => {
props.tracking && props.tracking.trackEvent({ action: 'click' });
}}
/>
);
};
const WrappedFunctionPage = track({
page: 'FunctionPage'
}, {
dispatchOnMount: true
})(FunctionPage);
const WrappedFunctionPage = track(
{
page: 'FunctionPage',
},
{
dispatchOnMount: true,
}
)(FunctionPage);
class Test extends React.Component<any, null> {
render() {
@ -58,10 +61,14 @@ class Test extends React.Component<any, null> {
const App = track()(({ foo }: { foo: string }) => {
const tracking = useTracking();
return <div onClick={() => {
tracking.trackEvent({
page: 'Home',
foo
});
}}/>;
return (
<div
onClick={() => {
tracking.trackEvent({
page: 'Home',
foo,
});
}}
/>
);
});

View File

@ -149,7 +149,7 @@ export type SubscribeFunction = (
* - cache size limiting, with least-recently *updated* entries purged first
*/
export class QueryResponseCache {
constructor(options: {size: number; ttl: number});
constructor(options: { size: number; ttl: number });
clear(): void;
get(queryID: string, variables: Variables): QueryPayload | null;
set(queryID: string, variables: Variables, payload: QueryPayload): void;
@ -564,11 +564,11 @@ export interface RerunParam {
max_runs: number;
}
export interface FIELDS_CHANGE {
type: "FIELDS_CHANGE";
type: 'FIELDS_CHANGE';
fieldIDs: { [fieldName: string]: DataID | DataID[] };
}
export interface RANGE_ADD {
type: "RANGE_ADD";
type: 'RANGE_ADD';
parentName?: string;
parentID?: string;
connectionInfo?: Array<{
@ -581,14 +581,14 @@ export interface RANGE_ADD {
rangeBehaviors?: RangeBehaviors;
}
export interface NODE_DELETE {
type: "NODE_DELETE";
type: 'NODE_DELETE';
parentName?: string;
parentID?: string;
connectionName?: string;
deletedIDFieldName: string;
}
export interface RANGE_DELETE {
type: "RANGE_DELETE";
type: 'RANGE_DELETE';
parentName?: string;
parentID?: string;
connectionKeys?: Array<{
@ -600,7 +600,7 @@ export interface RANGE_DELETE {
pathToConnection: string[];
}
export interface REQUIRED_CHILDREN {
type: "REQUIRED_CHILDREN";
type: 'REQUIRED_CHILDREN';
children: RelayConcreteNode[];
}
export type RelayMutationConfig = FIELDS_CHANGE | RANGE_ADD | NODE_DELETE | RANGE_DELETE | REQUIRED_CHILDREN;
@ -613,11 +613,7 @@ export type RelayMutationTransactionCommitFailureCallback = (
transaction: RelayMutationTransaction,
preventAutoRollback: () => void
) => void;
export type RelayMutationTransactionCommitSuccessCallback = (
response: {
[key: string]: any;
}
) => void;
export type RelayMutationTransactionCommitSuccessCallback = (response: { [key: string]: any }) => void;
export interface NetworkLayer {
sendMutation(request: RelayMutationRequest): Promise<any> | null;
sendQueries(requests: RelayQueryRequest[]): Promise<any> | null;
@ -636,16 +632,16 @@ export interface ReadyState {
ready: boolean;
stale: boolean;
}
export type RelayContainerErrorEventType = "CACHE_RESTORE_FAILED" | "NETWORK_QUERY_ERROR";
export type RelayContainerErrorEventType = 'CACHE_RESTORE_FAILED' | 'NETWORK_QUERY_ERROR';
export type RelayContainerLoadingEventType =
| "ABORT"
| "CACHE_RESTORED_REQUIRED"
| "CACHE_RESTORE_START"
| "NETWORK_QUERY_RECEIVED_ALL"
| "NETWORK_QUERY_RECEIVED_REQUIRED"
| "NETWORK_QUERY_START"
| "STORE_FOUND_ALL"
| "STORE_FOUND_REQUIRED";
| 'ABORT'
| 'CACHE_RESTORED_REQUIRED'
| 'CACHE_RESTORE_START'
| 'NETWORK_QUERY_RECEIVED_ALL'
| 'NETWORK_QUERY_RECEIVED_REQUIRED'
| 'NETWORK_QUERY_START'
| 'STORE_FOUND_ALL'
| 'STORE_FOUND_REQUIRED';
export type ReadyStateChangeCallback = (readyState: ReadyState) => void;
export interface ReadyStateEvent {
type: RelayContainerLoadingEventType | RelayContainerErrorEventType;
@ -669,13 +665,11 @@ export interface QueryPayload {
export interface RelayQuerySet {
[queryName: string]: any;
}
export type RangeBehaviorsFunction = (
connectionArgs: {
[argName: string]: any;
}
) => "APPEND" | "IGNORE" | "PREPEND" | "REFETCH" | "REMOVE";
export type RangeBehaviorsFunction = (connectionArgs: {
[argName: string]: any;
}) => 'APPEND' | 'IGNORE' | 'PREPEND' | 'REFETCH' | 'REMOVE';
export interface RangeBehaviorsObject {
[key: string]: "APPEND" | "IGNORE" | "PREPEND" | "REFETCH" | "REMOVE";
[key: string]: 'APPEND' | 'IGNORE' | 'PREPEND' | 'REFETCH' | 'REMOVE';
}
export type RangeBehaviors = RangeBehaviorsFunction | RangeBehaviorsObject;
@ -781,7 +775,7 @@ export class RecordSource {
delete(dataID: DataID): void;
get(dataID: DataID): RelayInMemoryRecordSource | null;
getRecordIDs(): DataID[];
getStatus(dataID: DataID): "EXISTENT" | "NONEXISTENT" | "UNKNOWN";
getStatus(dataID: DataID): 'EXISTENT' | 'NONEXISTENT' | 'UNKNOWN';
has(dataID: DataID): boolean;
load(dataID: DataID, callback: (error: Error | null, record: RelayInMemoryRecordSource | null) => void): void;
remove(dataID: DataID): void;
@ -1041,13 +1035,13 @@ export function commitLocalUpdate(environment: Environment, updater: StoreUpdate
export interface MutationConfig<T extends OperationBase> {
configs?: RelayMutationConfig[];
mutation: GraphQLTaggedNode;
variables: T["variables"];
variables: T['variables'];
uploadables?: UploadableMap;
onCompleted?(response: T["response"], errors: PayloadError[] | null | undefined): void;
onCompleted?(response: T['response'], errors: PayloadError[] | null | undefined): void;
onError?(error?: Error): void;
optimisticUpdater?: SelectorStoreUpdater<T["response"]>;
optimisticResponse?: T["response"];
updater?: SelectorStoreUpdater<T["response"]>;
optimisticUpdater?: SelectorStoreUpdater<T['response']>;
optimisticResponse?: T['response'];
updater?: SelectorStoreUpdater<T['response']>;
}
export function commitRelayModernMutation<T extends OperationBase = OperationDefaults>(
environment: Environment,

View File

@ -9,7 +9,7 @@ import {
commitLocalUpdate,
QueryResponseCache,
ROOT_ID,
} from "relay-runtime";
} from 'relay-runtime';
const source = new RecordSource();
const store = new Store(source);
@ -20,8 +20,8 @@ const store = new Store(source);
// Define a function that fetches the results of an operation (query/mutation/etc)
// and returns its results as a Promise:
function fetchQuery(operation: any, variables: { [key: string]: string }, cacheConfig: {}) {
return fetch("/graphql", {
method: "POST",
return fetch('/graphql', {
method: 'POST',
body: JSON.stringify({
query: operation.text, // GraphQL text from input
variables,
@ -35,7 +35,7 @@ function fetchQuery(operation: any, variables: { [key: string]: string }, cacheC
const network = Network.create(fetchQuery);
// Create a cache for storing query responses
const cache = new QueryResponseCache({size: 250, ttl: 60000});
const cache = new QueryResponseCache({ size: 250, ttl: 60000 });
// ~~~~~~~~~~~~~~~~~~~~~
// Environment
@ -53,9 +53,9 @@ const environment = new Environment({
function handlerProvider(handle: any) {
switch (handle) {
// Augment (or remove from) this list:
case "connection":
case 'connection':
return ConnectionHandler;
case "viewer":
case 'viewer':
return ViewerHandler;
}
throw new Error(`handlerProvider: No handler provided for ${handle}`);
@ -72,6 +72,6 @@ const inspector = new RecordSourceInspector(source);
// ~~~~~~~~~~~~~~~~~~~~~
commitLocalUpdate(environment, store => {
const root = store.get(ROOT_ID)!;
root.setValue("foo", "localKey");
const root = store.get(ROOT_ID)!;
root.setValue('foo', 'localKey');
});