[Refactor] Retire reaction and merge files into Force #5636
Conversation
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
…to retire-reaction * 'retire-reaction' of https://github.com/damassi/force: (23 commits) Disable codecov for jest for now [Migration] Comment out experiment viewed [Migration] Fix tracking event invocation Move artsy/reaction#3590 [Migration] Update coffeescript /v2 paths to relative Move artsy/reaction#3587 Move artsy/reaction#3589 Move artsy/reaction#3576 Move artsy/reaction#3572 Rename .babelrc to babel.config.js [Migration] Finish migration [Migration] Migrate tests [Migration] Rename v2/*.test to .jest [Migration] Delete publishing folder [Migration] Update import paths [Migration] Enable incremental type-checking [Migration] Temporarily disable @types for relay [Migration] Storybooks [Migration] Add relay Fix type-check errors in force ...
Error RangeErrorDangerfile |
Duplicate Sources / Packages - Duplicates found!
|
damassi
force-pushed
the
retire-reaction
branch
2 times, most recently
from
f1c3de1 to
ce82b67
Compare
damassi
force-pushed
the
retire-reaction
branch
3 times, most recently
from
8be4a62 to
d656ffb
Compare
damassi
force-pushed
the
retire-reaction
branch
2 times, most recently
from
6dffa44 to
79183d3
Compare
Merged
vscode-apollo-relayAuthor: Eloy Durán Description: Simple configuration of vscode-apollo for Relay projects. Homepage: https://github.com/relay-tools/vscode-apollo-relay#readme
|
| Created | about 5 years ago |
| Last Updated | 6 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 37 |
| Direct Dependencies | typescript-template-language-service-decorator, vscode-css-languageservice, vscode-emmet-helper, vscode-languageserver-textdocument and vscode-languageserver-types |
| Keywords | TypeScript, styled, styled-components, styled components and css |
relay-config
Author: Unknown
Description: Config parser for Relay applications.
Homepage: https://facebook.github.io/relay/
| Created | over 3 years ago |
| Last Updated | 6 months ago |
| License | MIT |
| Maintainers | 9 |
| Releases | 2123 |
| Direct Dependencies | cosmiconfig |
| Keywords | graphql and relay |
README
Relay Config
Only works with Relay 12 and below, Relay 13 does not use this format
Handles the config which would traditionally be passed into the relay-compiler via the CLI command-line, or inside the babel plugin config.
To use this package, first install it: yarn add relay-config, then create a relay.config.js which includes fields the relay-compiler CLI describes:
// relay.config.js
module.exports = {
// ...
// Configuration options accepted by the `relay-compiler` command-line tool and `babel-plugin-relay`.
src: "./src",
schema: "./data/schema.graphql",
exclude: ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],
}Here's the full CLI input reference (as of Relay v12)
relay-compiler --schema <path> --src <path> [--watch]
Options:
--schema Path to schema.graphql or schema.json[string] [required]
--src Root directory of application code [string] [required]
--include Directories to include under src
[array] [default: ["**"]]
--exclude Directories to ignore under src [array] [default:
["**/node_modules/**","**/__mocks__/**","**/__generated__/**"]]
--extensions File extensions to compile (defaults to extensions
provided by the language plugin) [array]
--verbose More verbose logging [boolean] [default: false]
--quiet No output to stdout [boolean] [default: false]
--watchman Use watchman when not in watch mode
[boolean] [default: true]
--watch If specified, watches files and regenerates on changes
[boolean] [default: false]
--validate Looks for pending changes and exits with non-zero code
instead of writing to disk [boolean] [default: false]
--persistFunction An async function (or path to a module exporting this
function) which will persist the query text and return
the id. [string]
--persistOutput A path to a .json file where persisted query metadata
should be saved. Will use the default implementation
(md5 hash) if `persistFunction` is not passed. [string]
--repersist Run the persist function even if the query has not
changed. [boolean] [default: false]
--noFutureProofEnums This option controls whether or not a catch-all entry is
added to enum type definitions for values that may be
added in the future. Enabling this means you will have
to update your application whenever the GraphQL server
schema adds new enum values to prevent it from breaking.
[boolean] [default: false]
--language The name of the language plugin used for input files and
artifacts [string] [default: "javascript"]
--artifactDirectory A specific directory to output all artifacts to. When
enabling this the babel plugin needs `artifactDirectory`
set as well. [string]
--customScalars Mappings from custom scalars in your schema to built-in
GraphQL types, for type emission purposes. (Uses yargs
dot-notation, e.g. --customScalars.URL=String)
--eagerESModules This option enables emitting es modules artifacts.
[boolean] [default: false]
relay-compiler-language-typescript
Author: Unknown
Description: A language plugin for Relay that adds TypeScript support, including emitting type definitions.
Homepage: https://github.com/relay-tools/relay-compiler-language-typescript
| Created | almost 5 years ago |
| Last Updated | 6 months ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 69 |
| Direct Dependencies | invariant |
| Keywords | graphql, react, relay and typescript |
README
Obsolete
This is repository is obsolete as relay@13 now supports TypeScript directly.
relay-compiler-language-typescript
A language plugin for Relay that adds
TypeScript support, including emitting type definitions.
Installation
Add the package to your dev dependencies:
yarn add graphql relay-compiler --dev
yarn add typescript relay-compiler-language-typescript --dev
Note: Starting with version 15.0.0 relay-compiler-language-typescript requires a minimum TypeScript version of 4.5.0 being installed in your project.
Configuration
relay-compiler
Then configure your relay-compiler script to use it, like so:
{
"scripts": {
"relay":
"relay-compiler --src ./src --schema data/schema.graphql --language typescript --artifactDirectory ./src/__generated__"
}
}This is going to store all artifacts in a single directory, which you also need
to instruct babel-plugin-relay to use in your .babelrc:
{
"plugins": [["relay", { "artifactDirectory": "./src/__generated__" }]]
}TypeScript
Also be sure to configure the TypeScript compiler to transpile to ES2015
modules (or higher) and leave transpilation to CommonJS modules (if required)
up to Babel with the following tsconfig.json settings:
{
"compilerOptions": {
"module": "ES2015", // ES2015 or higher
"target": "ES2020" // best use the highest target setting compatible with your Babel setup
}
}The reason for this is that tsc would otherwise generate code where the
imported graphql function is being namespaced (react_relay_1 in this
example):
react_relay_1.createFragmentContainer(
MyComponent,
react_relay_1.graphql`
...
`
);… which makes it impossible for babel-plugin-relay to find the locations
where the graphql function is being used.
The generated code uses ES2015 module syntax if module is set to ES2015 or
higher in your tsconfig.json. Note that the eagerESModules option from
relay-compiler has no effect on the generated code if module is ES2015 or
higher.
Custom Headers
If you need to add a custom header to generated files, perhaps for a custom linter
or to get boilerplate license code in, that can be passed in also in compilerOptions
as banner:
{
"compilerOptions": {
"banner": "/* © 2021 Example.org - @generated code */"
}
}Problems
React Hot Loader
React Hot Loader is known to not always work well with generated code such as
our typing artifacts, which will lead to loading modules with TypeScript types
into the browser and break. As a maintainer of RHL
pointed out in a
similar issue:
The problem - hot reloading is not "complete"
So
until RHL will be made “complete”
this project can’t gurantee to always work well with it, nor is it our control
to do anything about that.
Also see
- You can find a copy of the Relay
example TODO app
inside this repository or you can take a look at the
Artsy React Native app. - There are Relay tslint rules available
here.
License
This package is available under the MIT license. See the included LICENSE file
for details.
relay-compiler
Author: Unknown
Description: A compiler tool for building GraphQL-driven applications.
Homepage: https://relay.dev
| Created | over 5 years ago |
| Last Updated | about 23 hours ago |
| License | MIT |
| Maintainers | 10 |
| Releases | 2927 |
| Keywords | graphql and relay |
raw-loader
Author: Tobias Koppers @sokra
Description: A loader for webpack that allows importing files as a String
Homepage: https://github.com/webpack-contrib/raw-loader
| Created | over 10 years ago |
| Last Updated | 5 months ago |
| License | MIT |
| Maintainers | 7 |
| Releases | 18 |
| Direct Dependencies | loader-utils and schema-utils |
| Keywords | webpack |
README
raw-loader
A loader for webpack that allows importing files as a String.
Getting Started
To begin, you'll need to install raw-loader:
$ npm install raw-loader --save-devThen add the loader to your webpack config. For example:
file.js
import txt from './file.txt';webpack.config.js
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.txt$/i,
use: 'raw-loader',
},
],
},
};And run webpack via your preferred method.
Options
| Name | Type | Default | Description |
|---|---|---|---|
esModule |
{Boolean} |
true |
Uses ES modules syntax |
esModule
Type: Boolean
Default: true
By default, raw-loader generates JS modules that use the ES modules syntax.
There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.
You can enable a CommonJS module syntax using:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.txt$/i,
use: [
{
loader: 'raw-loader',
options: {
esModule: false,
},
},
],
},
],
},
};Examples
Inline
import txt from 'raw-loader!./file.txt';Beware, if you already define loader(s) for extension(s) in webpack.config.js you should use:
import css from '!!raw-loader!./file.txt'; // Adding `!!` to a request will disable all loaders specified in the configurationContributing
Please take a moment to read our contributing guidelines if you haven't yet done so.
License
jest-styled-components
Author: Michele Bertoli
Description: Jest utilities for Styled Components
Homepage: https://github.com/styled-components/jest-styled-components#readme
| Created | over 5 years ago |
| Last Updated | 3 months ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 103 |
| Direct Dependencies | @adobe/css-tools |
jest-raw-loader
Author: Kepler Sticka-Jones
Description: Jest transformer mimicking webpack-contrib/raw-loader's functionality
Homepage: http://npmjs.com/package/jest-raw-loader
| Created | about 5 years ago |
| Last Updated | 5 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 3 |
README
jest-raw-loader
Jest transformer mimicking webpack-contrib/raw-loader's functionality
Install
$ npm install --save-dev jest-raw-loader
Usage
Use jest's transform configuration options to use this package in your unit tests.
For example use the following to raw load .md and .graphql files:
"jest": {
"transform": {
"\\.graphql$": "jest-raw-loader",
"\\.md$": "jest-raw-loader"
}
}License
MIT © Kepler Sticka-Jones
graphql-tools
Author: Unknown
Description: Useful tools to create and manipulate GraphQL schemas.
Homepage: https://github.com/ardatan/graphql-tools#readme
| Created | over 6 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 1351 |
| Direct Dependencies | @graphql-tools/schema, tslib and @apollo/client |
babel-plugin-relay
Author: Unknown
Description: A Babel Plugin for use with Relay applications.
Homepage: https://relay.dev
| Created | about 7 years ago |
| Last Updated | about 23 hours ago |
| License | MIT |
| Maintainers | 12 |
| Releases | 2930 |
| Direct Dependencies | babel-plugin-macros, cosmiconfig and graphql |
| Keywords | graphql, relay, babel and babel-plugin |
@types/underscore.string
Author: Unknown
Description: TypeScript definitions for underscore.string
Homepage: http://npmjs.com/package/@types/underscore.string
| Created | over 6 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 23 |
| Direct Dependencies | @types/underscore |
README
Installation
npm install --save @types/underscore.string
Summary
This package contains type definitions for underscore.string (https://github.com/epeli/underscore.string).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/underscore.string
Additional Details
- Last updated: Wed, 19 Jun 2019 17:06:09 GMT
- Dependencies: @types/underscore
- Global values: none
Credits
These definitions were written by Ry Racherbaumer https://github.com/rygine.
@types/styled-components
Author: Unknown
Description: TypeScript definitions for styled-components
Homepage: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/styled-components
| Created | about 4 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 66 |
| Direct Dependencies | @types/hoist-non-react-statics, @types/react and csstype |
README
[object Object]
@types/storybook__react
Author: Unknown
Description: Stub TypeScript definitions entry for @storybook/react, which provides its own types definitions
Homepage: https://github.com/storybooks/storybook#readme
| Created | over 5 years ago |
| Last Updated | 8 months ago |
| License | NO LICENSE FOUND |
| Maintainers | 1 |
| Releases | 15 |
| Direct Dependencies | @storybook/react |
README
This is a stub types definition for @storybook/react (https://github.com/storybooks/storybook).
@storybook/react provides its own type definitions, so you don't need @types/storybook__react installed!
@types/react-transition-group
Author: Unknown
Description: TypeScript definitions for react-transition-group
| Created | over 5 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 41 |
| Direct Dependencies | @types/react |
README
[object Object]
@types/react-tracking
Author: Unknown
Description: TypeScript definitions for react-tracking
Homepage: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-tracking
| Created | about 5 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 16 |
| Direct Dependencies | @types/react |
README
Installation
npm install --save @types/react-tracking
Summary
This package contains type definitions for react-tracking (https://github.com/NYTimes/react-tracking).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-tracking.
Additional Details
- Last updated: Mon, 02 May 2022 19:31:38 GMT
- Dependencies: @types/react
- Global values: none
Credits
These definitions were written by Eloy Durán, Christopher Pappas, and Chen Asraf.
@types/react-test-renderer
Author: Unknown
Description: TypeScript definitions for react-test-renderer
| Created | almost 6 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 35 |
| Direct Dependencies | @types/react |
README
Installation
npm install --save @types/react-test-renderer
Summary
This package contains type definitions for react-test-renderer (https://facebook.github.io/react/).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-test-renderer/v17.
Additional Details
- Last updated: Tue, 12 Apr 2022 06:01:18 GMT
- Dependencies: @types/react
- Global values: none
Credits
These definitions were written by Arvitaly, Lochbrunner, John Reilly, John Gozde, Jessica Franco, and Dhruv Jain.
@types/react-stripe-elements
Author: Unknown
Description: TypeScript definitions for react-stripe-elements
| Created | about 5 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 31 |
| Direct Dependencies | @types/react and @types/stripe-v3 |
README
Installation
npm install --save @types/react-stripe-elements
Summary
This package contains type definitions for react-stripe-elements (https://github.com/stripe/react-stripe-elements#readme).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-stripe-elements.
Additional Details
- Last updated: Thu, 07 Oct 2021 22:31:33 GMT
- Dependencies: @types/react, @types/stripe-v3
- Global values: none
Credits
These definitions were written by dan-j, Santiago Doldan, sonnysangha, Andrew Goh Yisheng, Thomas Chia, Piotr Dabrowski, Victor Irzak, Alex Price, Maciej Dabek, Hiroshi Ioka, Austin Turner, and Benedikt Bauer.
@types/react-slick
Author: Unknown
Description: TypeScript definitions for react-slick
Homepage: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-slick
| Created | over 6 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 23 |
| Direct Dependencies | @types/react |
README
[object Object]
@types/react-overlays
Author: Unknown
Description: Stub TypeScript definitions entry for react-overlays, which provides its own types definitions
Homepage: http://npmjs.com/package/@types/react-overlays
| Created | almost 6 years ago |
| Last Updated | 5 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 21 |
| Direct Dependencies | react-overlays |
README
This is a stub types definition for react-overlays (https://github.com/react-bootstrap/react-overlays).
react-overlays provides its own type definitions, so you don't need @types/react-overlays installed!
@types/qs
Author: Unknown
Description: TypeScript definitions for qs
Homepage: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/qs
| Created | over 6 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 28 |
| Direct Dependencies |
README
Installation
npm install --save @types/qs
Summary
This package contains type definitions for qs (https://github.com/ljharb/qs).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/qs.
Additional Details
- Last updated: Wed, 07 Jul 2021 17:02:42 GMT
- Dependencies: none
- Global values:
qs
Credits
These definitions were written by Roman Korneev, Leon Yu, Belinda Teh, Melvin Lee, Arturs Vonda, Carlos Bonetti, Dan Smith, Hunter Perrin, and Jordan Harband.
@types/qrcode.react
Author: Unknown
Description: TypeScript definitions for qrcode.react
Homepage: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/qrcode.react
| Created | over 5 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 11 |
| Direct Dependencies | @types/react |
README
Installation
npm install --save @types/qrcode.react
Summary
This package contains type definitions for qrcode.react (https://github.com/zpao/qrcode.react).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/qrcode.react.
index.d.ts
// Type definitions for qrcode.react 1.0
// Project: https://github.com/zpao/qrcode.react, http://zpao.github.io/qrcode.react
// Definitions by: Mleko <https://github.com/mleko>,
// Yonas <https://github.com/yonasadiel>,
// Bjoluc <https://github.com/bjoluc>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
/// <reference types="react" />
declare namespace qrcode {
interface ImageSettings {
src: string;
x?: number | undefined;
y?: number | undefined;
height?: number | undefined;
width?: number | undefined;
excavate?: boolean | undefined;
}
interface BaseQRCodeProps {
value: string;
size?: number | undefined;
includeMargin?: boolean | undefined;
bgColor?: string | undefined;
fgColor?: string | undefined;
level?: "L"|"M"|"Q"|"H" | undefined;
imageSettings?: ImageSettings | undefined;
}
type CanvasQRCodeProps = BaseQRCodeProps & {
renderAs?: "canvas" | undefined
} & React.CanvasHTMLAttributes<HTMLCanvasElement>;
type SvgQRCodeProps = BaseQRCodeProps & {
renderAs: "svg"
} & React.SVGProps<SVGSVGElement>;
type QRCode = React.ComponentClass<CanvasQRCodeProps | SvgQRCodeProps>;
}
declare const qrcode: qrcode.QRCode;
export = qrcode;Additional Details
- Last updated: Wed, 07 Jul 2021 17:02:41 GMT
- Dependencies: @types/react
- Global values: none
Credits
@types/memoize-one
Author: Unknown
Description: Stub TypeScript definitions entry for memoize-one, which provides its own types definitions
Homepage: http://npmjs.com/package/@types/memoize-one
| Created | over 4 years ago |
| Last Updated | 8 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 6 |
| Direct Dependencies | memoize-one |
README
This is a stub types definition for memoize-one (https://github.com/alexreardon/memoize-one#readme).
memoize-one provides its own type definitions, so you don't need @types/memoize-one installed!
@types/loadable__component
Author: Unknown
Description: TypeScript definitions for @loadable/component
| Created | almost 4 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 9 |
| Direct Dependencies | @types/react |
README
Installation
npm install --save @types/loadable__component
Summary
This package contains type definitions for @loadable/component (https://github.com/smooth-code/loadable-components).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/loadable__component.
Additional Details
- Last updated: Tue, 06 Jul 2021 22:02:42 GMT
- Dependencies: @types/react
- Global values: none
Credits
These definitions were written by Martynas Kadiša, and Daniel Playfair Cal.
@types/flickity
Author: Unknown
Description: TypeScript definitions for Flickity
Homepage: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/flickity
| Created | over 6 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 28 |
| Direct Dependencies |
README
[object Object]
@types/dedent
Author: Unknown
Description: TypeScript definitions for dedent
Homepage: http://npmjs.com/package/@types/dedent
| Created | over 5 years ago |
| Last Updated | 4 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 1 |
| Direct Dependencies |
README
Installation
npm install --save @types/dedent
Summary
This package contains type definitions for dedent (https://github.com/dmnd/dedent).
Details
Files were exported from https://www.github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/dedent
Additional Details
- Last updated: Fri, 30 Jun 2017 21:28:45 GMT
- Dependencies: none
- Global values: none
Credits
These definitions were written by Douglas Duteil https://github.com/douglasduteil.
@types/chalk
Author: Unknown
Description: Stub TypeScript definitions entry for chalk, which provides its own types definitions
Homepage: http://npmjs.com/package/@types/chalk
| Created | over 6 years ago |
| Last Updated | 5 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 14 |
| Direct Dependencies | chalk |
README
This is a stub types definition for chalk (https://github.com/chalk/chalk).
chalk provides its own type definitions, so you don't need @types/chalk installed!
@storybook/react
Author: Unknown
Description: Storybook for React: Develop React Component in isolation with Hot Reloading.
Homepage: https://github.com/storybookjs/storybook/tree/main/app/react
| Created | over 5 years ago |
| Last Updated | 1 day ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 1127 |
| Direct Dependencies | @babel/preset-flow, @babel/preset-react, @pmmmwh/react-refresh-webpack-plugin, @storybook/addons, @storybook/client-logger, @storybook/core, @storybook/core-common, @storybook/csf, @storybook/docs-tools, @storybook/node-logger, @storybook/react-docgen-typescript-plugin, @storybook/semver, @storybook/store, @types/estree, @types/node, @types/webpack-env, acorn, acorn-jsx, acorn-walk, babel-plugin-add-react-displayname, babel-plugin-react-docgen, core-js, escodegen, fs-extra, global, html-tags, lodash, prop-types, react-element-to-jsx-string, react-refresh, read-pkg-up, regenerator-runtime, ts-dedent, util-deprecate and webpack |
| Keywords | storybook |
@storybook/cli
Author: Storybook Team
Description: Storybook's CLI - easiest method of adding storybook to your projects
Homepage: https://github.com/storybookjs/storybook/tree/main/lib/cli
| Created | over 5 years ago |
| Last Updated | 1 day ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 1141 |
| Direct Dependencies | @babel/core, @babel/preset-env, @storybook/codemod, @storybook/core-common, @storybook/csf-tools, @storybook/node-logger, @storybook/semver, @storybook/telemetry, boxen, chalk, commander, core-js, cross-spawn, envinfo, express, find-up, fs-extra, get-port, globby, jscodeshift, json5, leven, prompts, puppeteer-core, read-pkg-up, shelljs, strip-json-comments, ts-dedent and update-notifier |
| Keywords | cli, generator and storybook |
@storybook/addons
Author: Unknown
Description: Storybook addons store
Homepage: https://github.com/storybookjs/storybook/tree/main/lib/addons
| Created | over 5 years ago |
| Last Updated | 1 day ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 1128 |
| Direct Dependencies | @storybook/api, @storybook/channels, @storybook/client-logger, @storybook/core-events, @storybook/csf, @storybook/router, @storybook/theming, @types/webpack-env, core-js, global and regenerator-runtime |
| Keywords | storybook |
@storybook/addon-viewport
Author: Unknown
Description: Build responsive components by adjusting Storybook’s viewport size and orientation
Homepage: https://github.com/storybookjs/storybook/tree/main/addons/viewport
| Created | about 5 years ago |
| Last Updated | 1 day ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 1090 |
| Direct Dependencies | @storybook/addons, @storybook/api, @storybook/client-logger, @storybook/components, @storybook/core-events, @storybook/theming, core-js, global, memoizerific, prop-types and regenerator-runtime |
| Keywords | addon, storybook, style and essentials |
@storybook/addon-options
Author: Unknown
Description: Options addon for storybook
Homepage: https://github.com/storybookjs/storybook/tree/master/addons/options
| Created | over 5 years ago |
| Last Updated | 5 months ago |
| License | MIT |
| Maintainers | 0 |
| Releases | 511 |
| Direct Dependencies | @storybook/addons, core-js and util-deprecate |
| Keywords | addon and storybook |
README
Options Addon is deprecated as of Storybook 5.0
Please read https://storybook.js.org/docs/configurations/options-parameter/ to learn about storybook's options and setting them.
@storybook/addon-info
Author: Unknown
Description: A Storybook addon to show additional information for your stories.
Homepage: https://github.com/storybookjs/storybook/tree/master/addons/info
| Created | over 5 years ago |
| Last Updated | 5 months ago |
| License | MIT |
| Maintainers | 0 |
| Releases | 495 |
| Direct Dependencies | @storybook/addons, @storybook/client-logger, @storybook/components, @storybook/theming, core-js, global, marksy, nested-object-assign, prop-types, react, react-addons-create-fragment, react-element-to-jsx-string, react-is, react-lifecycles-compat and util-deprecate |
| Keywords | addon and storybook |
README
Storybook Info Addon
Storybook Info Addon will show additional information for your stories in Storybook.
Useful when you want to display usage or other types of documentation alongside your story.
Installation
Install the following npm module:
npm i -D @storybook/addon-infoBasic usage
Then, add withInfo as a decorator to your book of stories.
It is possible to add info by default to all or a subsection of stories by using a global or story decorator.
It is important to declare this decorator as the first decorator, otherwise it won't work well.
// Globally in your .storybook/preview.js.
import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
addDecorator(withInfo); or
export default {
title: 'Component',
decorators: [withInfo],
};Then, you can use the info parameter to either pass certain options or specific documentation text to your stories.
A complete list of possible configurations can be found in a later section.
This can be done per book of stories:
import Component from './Component';
export default {
title: 'Component',
parameters: {
info: {},
},
};...or for each story individually:
import Component from './Component';
export default {
title: 'Component',
};
export const defaultView = () => <Component />;
defaultView.story = {
parameters: {
info: { inline: true },
},
};It is also possible to disable the info addon entirely.
Depending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an addParameters call.
info: {
disable: true,
}
Markdown
The info addon also supports markdown.
To use markdown as additional textual documentation for your stories, either pass it directly as a String to the info parameters, or use the text option.
info: {
text: `
description or documentation about my component, supports markdown
~~~js
<Button>Click Here</Button>
~~~
`,
}Setting Global Options
To configure default options for all usage of the info addon, pass a option object along with the decorator in .storybook/preview.js.
import { withInfo } from '@storybook/addon-info';
addDecorator(
withInfo({
header: false,
})
);Configuration parameters can be set at 3 different locations: passed as default options along the addDecorator call, passed as an object of parameters to a book of stories to the addParameters call, and passed as direct parameters to each individual story.
In order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.
Options and Defaults
{
/**
* Text to display with storybook component
*/
text?: string;
/**
* Displays info inline vs click button to view
* @default false
*/
inline: boolean,
/**
* Toggles display of header with component name and description
* @default true
*/
header: boolean,
/**
* Displays the source of story Component
* @default true
*/
source: boolean,
/**
* Components used in story
* Displays Prop Tables with these components
* @default []
*/
propTables: Array<React.ComponentType>,
/**
* Exclude Components from being shown in Prop Tables section
* Accepts an array of component classes or functions
* @default []
*/
propTablesExclude: Array<React.ComponentType>,
/**
* Overrides styles of addon. The object should follow this shape:
* https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.
* This prop can also accept a function which has the default stylesheet passed as an argument
*/
styles: Object | Function,
/**
* Overrides components used to display markdown
* @default {}
*/
components: { [key: string]: React.ComponentType },
/**
* Max props to display per line in source code
* @default 3
*/
maxPropsIntoLine: number,
/**
* Displays the first 10 characters of the prop name
* @default 3
*/
maxPropObjectKeys: number,
/**
* Displays the first 10 items in the default prop array
* @default 3
*/
maxPropArrayLength: number,
/**
* Displays the first 100 characters in the default prop string
* @default 50
*/
maxPropStringLength: number,
/**
* Override the component used to render the props table
* @default PropTable
*/
TableComponent: React.ComponentType,
/**
* Will exclude any respective properties whose name is included in array
* @default []
*/
excludedPropTypes: Array<string>,
}Rendering a Custom Table
The TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.
{
propDefinitions: Array<{
property: string, // The name of the prop
propType: Object | string, // The prop type. TODO: info about what this object is...
required: boolean, // True if the prop is required
description: string, // The description of the prop
defaultValue: any // The default value of the prop
}>
}Example:
// button.js
// @flow
import React from 'react';
const paddingStyles = {
small: '4px 8px',
medium: '8px 16px',
};
const Button = ({
size,
...rest
}: {
/** The size of the button */
size: 'small' | 'medium',
}) => {
const style = {
padding: paddingStyles[size] || '',
};
return <button style={style} {...rest} />;
};
Button.defaultProps = {
size: 'medium',
};
export default Button;// stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './button';
export default {
title: 'Button',
component: Button,
parameters: {
info: TableComponent,
},
};
const Red = props => <span style={{ color: 'red' }} {...props} />;
const TableComponent = ({ propDefinitions }) => {
const props = propDefinitions.map(
({ property, propType, required, description, defaultValue }) => {
return (
<tr key={property}>
<td>
{property}
{required ? <Red>*</Red> : null}
</td>
<td>{propType.name}</td>
<td>{defaultValue}</td>
<td>{description}</td>
</tr>
);
}
);
return (
<table>
<thead>
<tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
<tbody>{props}</tbody>
</table>
);
};
export const defaultView = () => <Button />;React Docgen Integration
React Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time.
When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.
import React from 'react';
import PropTypes from 'prop-types';
/** Button component description */
const DocgenButton = ({ disabled, label, style, onClick }) => (
<button disabled={disabled} style={style} onClick={onClick}>
{label}
</button>
);
DocgenButton.defaultProps = {
disabled: false,
onClick: () => {},
style: {},
};
DocgenButton.propTypes = {
/** Boolean indicating whether the button should render as disabled */
disabled: PropTypes.bool,
/** button label. */
label: PropTypes.string.isRequired,
/** onClick handler */
onClick: PropTypes.func,
/** component styles */
style: PropTypes.shape,
};
export default DocgenButton;Comments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.
The FAQ
Components lose their names on static build
Component names also get minified with other javascript code when building for production.
When creating components, set the displayName static property to show the correct component name on static builds.
@babel/plugin-proposal-decorators
Author: Unknown
Description: Compile class and object decorators to ES5
Homepage: https://babel.dev/docs/en/next/babel-plugin-proposal-decorators
| Created | about 5 years ago |
| Last Updated | 14 days ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 83 |
| Direct Dependencies | @babel/helper-create-class-features-plugin, @babel/helper-plugin-utils, @babel/helper-replace-supers, @babel/helper-split-export-declaration and @babel/plugin-syntax-decorators |
| Keywords | babel, babel-plugin and decorators |
relay-runtime
Author: Unknown
Description: A core runtime for building GraphQL-driven applications.
Homepage: https://relay.dev
| Created | over 5 years ago |
| Last Updated | about 23 hours ago |
| License | MIT |
| Maintainers | 10 |
| Releases | 2925 |
| Direct Dependencies | @babel/runtime, fbjs and invariant |
| Keywords | graphql and relay |
relay-mock-network-layer
Author: Rob Richard
Description: Relay modern network layer that returns schema correct mock data
Homepage: https://github.com/1stdibs/relay-mock-network-layer#readme
| Created | about 5 years ago |
| Last Updated | 5 months ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 12 |
| Direct Dependencies | graphql-tools |
README
relay-mock-network-layer
Provides a network layer for relay modern that returns schema-correct mock data using addMockFunctionsToSchema from graphql-tools;
This is useful for working in an environment like storybook where you want to work on your components without hitting a live GraphQL server.
Usage
import {
Environment,
Network,
RecordSource,
Store
} from 'relay-runtime';
import getNetworkLayer from 'relay-mock-network-layer';
import schema from './graphql.schema.json';
const network = Network.create(getNetworkLayer({
schema,
// pass custom mocks as documented in graphql-tools
// http://dev.apollodata.com/tools/graphql-tools/mocking.html#Customizing-mocks
mocks: {
Geography: () => ({
id: '2',
countries: [{
abbreviation: 'US',
name: 'United States'
}, {
abbreviation: 'UK',
name: 'United Kingdom'
}],
usStates: [{
abbreviation: 'NY',
name: 'New York'
}, {
abbreviation: 'NJ',
name: 'New Jersey'
}]
}),
Address: () => ({
country: 'US',
city: 'New York',
state: 'NY',
zipCode: '10012',
})
},
// See https://www.apollographql.com/docs/graphql-tools/mocking.html#Mocking-interfaces
preserveResolvers: false,
// Forward along other options to `makeExecutableSchema`.
...schemaDefinitionOptions
}));
// Create an environment using this network:
const store = new Store(new RecordSource());
const environment = new Environment({network, store});
// use environment in <QueryRenderer>Mocking custom scalar types
If your schema has custom scalar types you'll need to use the resolvers option to ensure those types get mocked correctly. Pass this option an object containing a resolve function for each custom scalar.
...
import getNetworkLayer from 'relay-mock-network-layer';
import {GraphQLScalarType} from 'graphql';
...
getNetworkLayer({
schema,
mocks: {...},
resolvers: {
CustomScalar: new GraphQLScalarType({
name: 'CustomScalar',
parseLiteral: () => {},
parseValue: () => {},
serialize: () => {}
}),
CustomScalar2: ...
}
});react-relay-network-modern-ssr
Author: Pavel Chertorogov @nodkz
Description: Server side rendering middleware for react-relay-network-modern
Homepage: https://github.com/relay-tools/react-relay-network-modern-ssr#readme
| Created | over 4 years ago |
| Last Updated | 6 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 13 |
| Direct Dependencies | |
| Keywords | relay, react, network layer, ssr and server side rendering |
README
SSR middleware for react-relay-network-modern (for Relay Modern)
For a full examples, see:
- https://github.com/damassi/react-relay-network-modern-ssr-example
- https://github.com/damassi/react-relay-network-modern-ssr-todomvc
Server
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import { RelayNetworkLayer } from 'react-relay-network-modern';
import RelayServerSSR from 'react-relay-network-modern-ssr/lib/server';
import serialize from 'serialize-javascript';
import { Environment, Network, RecordSource, Store } from 'relay-runtime';
import schema from './schema';
const app = express();
app.get('/*', async (req, res, next) => {
const relayServerSSR = new RelayServerSSR();
const network = new RelayNetworkLayer([
// There are three possible ways relayServerSSR.getMiddleware() can be used;
// choose the one that best matches your context:
// By default, if called without arguments it will use `fetch` under the hood
// to request data. (See https://github.com/relay-tools/react-relay-network-modern
// for more info)
relayServerSSR.getMiddleware(),
// OR, you can directly pass in a GraphQL schema, which will use `graphql`
// from `graphql-js` to request data
relayServerSSR.getMiddleware({
schema,
contextValue: {},
}),
// OR, if you need to prepare context in async mode, `getMiddleware` will also
// accept a function:
relayServerSSR.getMiddleware(async () => ({
schema,
contextValue: await prepareGraphQLContext(req),
})),
]);
const source = new RecordSource();
const store = new Store(source);
const relayEnvironment = new Environment({ network, store });
// Once the RelayEnvironment is instantiated, two App renders need to be made in
// order to prepare data for hydration:
// First, kick off Relay requests with an initial render
ReactDOMServer.renderToString(<App relayEnvironment={relayEnvironment} />);
// Second, await while all data were recieved from graphql server
const relayData = await relayServerSSR.getCache();
// Third, render the app a second time now that the Relay store has been primed
// and send HTML and bootstrap data to the client for rehydration.
const appHtml = ReactDOMServer.renderToString(
<App
relayEnvironment={new Environment({
network: Network.create(() => relayData[0][1]),
store,
})}
/>
);
try {
res.status(200).send(`
<html>
<body>
<div id="react-root">${appHtml}</div>
<script>
window.__RELAY_BOOTSTRAP_DATA__ = ${serialize(relayData)};
</script>
<script src="/assets/bundle.js"></script>
</body>
</html>
`);
} catch (error) {
console.log('(server.js) Error: ', error);
next(error);
}
}
app.listen(3000);
// simple example, how to asynchronously prepare data for GraphQL context
async function prepareGraphQLContext(req) {
const { userToken } = req.cookies;
const user = userToken ? (await somehowLoadUser(userToken)) : undefined;
return {
user,
req,
}
}Client
import { RelayNetworkLayer } from 'react-relay-network-modern';
import RelayClientSSR from 'react-relay-network-modern-ssr/lib/client';
const relayClientSSR = new RelayClientSSR(window.__RELAY_BOOTSTRAP_DATA__);
const network = new RelayNetworkLayer([
relayClientSSR.getMiddleware({
lookup: true // Will preserve cache rather than purge after mount.
}),
]);
...
ReactDOM.render(
<QueryRenderer
dataFrom="STORE_THEN_NETWORK" // Required for Relay 1.5
environment={environment}
...
/>,
document.getElementById('react-root')
);Contribute
I actively welcome pull requests with code and doc fixes.
License
react-relay-network-modern
Author: Pavel Chertorogov @nodkz
Description: Network Layer for React Relay and Express (Batch Queries, AuthToken, Logging, Retry)
Homepage: https://github.com/relay-tools/react-relay-network-modern#readme
| Created | about 5 years ago |
| Last Updated | 6 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 57 |
| Direct Dependencies | core-js and extract-files |
| Keywords | relay, react, network layer, batch, express, jwt and auth token |
react-relay
Author: Unknown
Description: A framework for building GraphQL-driven React applications.
Homepage: https://relay.dev
| Created | over 7 years ago |
| Last Updated | about 23 hours ago |
| License | MIT |
| Maintainers | 11 |
| Releases | 2969 |
| Direct Dependencies | @babel/runtime, fbjs, invariant, nullthrows and relay-runtime |
| Keywords | graphql, relay and react |
found-scroll
Author: 4Catalyzer
Description: Scroll management for found
Homepage: https://github.com/4Catalyzer/found-scroll#readme
| Created | about 6 years ago |
| Last Updated | 3 months ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 13 |
| Direct Dependencies | farce, prop-types and scroll-behavior |
| Keywords | scroll, react and router |
README
Found Scroll 
Scroll management for Found.
Usage
import { createBrowserRouter, createRender } from 'found';
import { ScrollManager } from 'found-scroll';
/* ... */
const render = createRender({ renderError });
const BrowserRouter = createBrowserRouter({
routeConfig,
render: (renderArgs) => (
<ScrollManager renderArgs={renderArgs}>{render(renderArgs)}</ScrollManager>
),
});Guide
Installation
$ npm i -S react found
$ npm i -S found-scroll
Basic usage
When constructing a router, in the render method, wrap the rendered element with <ScrollManager>, and pass in renderArgs as a prop, as in the above example.
Scrollable Containers
Generally only the window scroll position is restored for a location. For
cases where you also want to restore alternative scroll container there is useScrollContainer
import { useScrollContainer } from 'found-scroll';
function MyScrollView() {
const scrollRef = useScrollContainer('my-scroll-view');
return <div ref={scrollRef} />;
}Scroll containers are identified with a 'scrollKey'. There should only be one element associated with a given key for any given location. Think of it as similar to React's key prop, in that it provides a stable identity for an element across renders.
Custom scroll behavior
You can provide a custom shouldUpdateScroll callback as a prop to <ScrollManager>. This callback receives the previous and the current renderArgs.
The callback can return:
- a falsy value to suppress updating the scroll position
- a position array of
xandy, such as[0, 100], to scroll to that position - a string with the
idornameof an element, to scroll to that element - a truthy value to emulate the browser default scroll behavior
const shouldUpdateScrollByPathname = (prevRenderArgs, { location }) =>
!prevRenderArgs || location.pathname !== prevRenderArgs.location.pathname;
const shouldUpdateScrollByRoute = (prevRenderArgs, { routes }) => {
if (routes.some((route) => route.ignoreScrollBehavior)) {
return false;
}
if (routes.some((route) => route.scrollToTop)) {
return [0, 0];
}
return true;
};
const render = (renderArgs) => (
<ScrollManager
shouldUpdateScroll={shouldUpdateScrollByPathname}
renderArgs={renderArgs}
>
{/* ... */}
</ScrollManager>
);You can customize <ScrollManager> even further by providing a createScrollBehavior callback that creates the scroll behavior object. This allows using a custom subclass of ScrollBehavior from scroll-behavior with custom logic. When using a custom createScrollBehavior callback, you can continue to specify the shouldUpdateScroll callback as above.
const render = (renderArgs) => (
<ScrollManager
createScrollBehavior={(config) => new MyScrollBehavior(config)}
renderArgs={renderArgs}
>
{/* ... */}
</ScrollManager>
);found-relay
Author: 4Catalyzer
Description: Relay integration for found
Homepage: https://github.com/relay-tools/found-relay#readme
| Created | about 6 years ago |
| Last Updated | 3 months ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 53 |
| Direct Dependencies | @babel/runtime, dequal, is-promise, prop-types and warning |
| Keywords | router, relay and react |
README
Found Relay 
Table of Contents generated with DocToc
Usage
import { BrowserProtocol, queryMiddleware } from 'farce';
import {
createFarceRouter,
createRender,
makeRouteConfig,
Route,
} from 'found';
import { Resolver } from 'found-relay';
/* ... */
const Router = createFarceRouter({
historyProtocol: new BrowserProtocol(),
historyMiddlewares: [queryMiddleware],
routeConfig: makeRouteConfig(
<Route
path="/"
Component={Application}
query={graphql`
query app_Application_Query {
viewer {
...Application_viewer
}
}
`}
>
<Route path="widgets">
<Route
Component={WidgetList}
query={graphql`
query app_WidgetList_Query {
widgets {
...WidgetList_widgets
}
}
`}
prepareVariables={prepareWidgetListVariables}
/>
<Route
path=":name"
Component={Widget}
query={graphql`
query app_Widget_Query($name: String!) {
widget(name: $name) {
...Widget_widget
}
}
`}
render={({ props }) => (props ? <Widget {...props} /> : <Loading />)}
/>
</Route>
</Route>,
),
render: createRender({}),
});
ReactDOM.render(
<Router resolver={new Resolver(environment)} />,
document.getElementById('root'),
);Examples
Guide
Installation
$ npm i -S farce found react react-relay
$ npm i -S found-relay
Router configuration
Create a router component class using createFarceRouter or a lower-level API. Create a Resolver with your Relay environment, then use that as the resolver instead of the default Found resolver.
import { BrowserProtocol, queryMiddleware } from 'farce';
import { createFarceRouter, createRender } from 'found';
import { Resolver } from 'found-relay';
/* ... */
const Router = createFarceRouter({
historyProtocol: new BrowserProtocol(),
historyMiddlewares: [queryMiddleware],
routeConfig,
render: createRender({}),
});
ReactDOM.render(
<Router resolver={new Resolver(environment)} />,
document.getElementById('root'),
);Route configuration
Route configuration works similarly to that in Found, but instead of data or getData, routes accept properties that control Relay data fetching. Each route behaves as if it were its own <QueryRenderer>, except that all data fetching happens in parallel, even for nested routes. Found Relay routes accept the following properties:
queryorgetQuery: the Relay query for the route, or a method that returns the Relay query for the routecacheConfigorgetCacheConfig: the cache configuration for the route, or a method that returns the cache configuration for the routefetchPolicyorgetFetchPolicy: the fetch policy for the Relay data for the route, or a method that returns the fetch policy for the Relay data for the route;network-only(the default),store-and-network, orstore-or-networkprepareVariables: a method to apply additional transformations to the route variablesrender: as on Found, a method that returns the element for the route, but with additional properties
Note that Found Relay routes ignore data, getData, and defer.
query or getQuery
To inject Relay data into a route, specify query or getQuery on the route. The value should be a Relay query. In general, Component for this route will likely be a fragment container, and the query should compose the fragment or fragments from Component.
By default, the available variables for the query will be the accumulated path parameters for this route and its parents. To customize these variables or inject additional ones from the routing state, use prepareVariables as described below.
As with <QueryRenderer>, upon routing, the route will not refetch its data if its query and variables are the same. To force refetching upon navigation even when the query and variables stay the same, use prepareVariables below to add a nonce variable.
cacheConfig or getCacheConfig
As on <QueryRenderer>, this value will be forwarded directly to the network layer.
fetchPolicy
As on <QueryRenderer>, this controls the fetch policy for data for the route. In addition to network-only and store-and-network as on <QueryRenderer>, this can also take the value store-or-network, which bypasses the network fetch entirely when the data are available in the store.
prepareVariables
By default, the available variables for the route query will be the accumulated path parameters for this route and its parents. If specified, the prepareVariables callback receives the accumulated variables used from all parent routes and the current route match. It should return the updated variables for this route, which will also be accumulated into the variables used for all child routes.
const widgetListRoute = (
<Route
path="widgets"
Component={WidgetList}
query={graphql`
query app_WidgetList_Query($color: String, $size: String, $limit: Int) {
widgets(color: $color, size: $size, limit: $limit) {
...WidgetList_widgets
}
}
`}
prepareVariables={(params, { location }) => {
const { color, size } = location.query;
const limit = location.state && location.state.limit;
return {
...params,
color,
size: size && parseInt(size, 10),
limit: limit || 10,
};
}}
/>
);render
This behaves identically to render in Found, except its render arguments object receives the following additional properties:
error: the Relay error, if any, as onrenderon<QueryRenderer>retry: when available, a callback that will refetch the data for the route, as on<QueryRenderer>environment: the current Relay environmentvariables: an object containing the Relay variables used for the routeresolving: a boolean indicating whether the route is rendering as part of router navigation resolution rather than due to a subsequent store update; in general, it is only safe to throwHttpErrororRedirectExceptioninstances to trigger navigation whenresolvingistrue
If render returns a truthy value, then the rendered element will also subscribe to Relay store updates.
found
Author: 4Catalyzer
Description: Extensible route-based routing for React applications
Homepage: https://github.com/4Catalyzer/found#readme
| Created | over 8 years ago |
| Last Updated | 3 months ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 82 |
| Direct Dependencies | @babel/runtime, @restart/context, @restart/hooks, @types/react, dequal, farce, is-promise, prop-types, react-redux, redux, tiny-set-immediate and tiny-warning |
| Keywords | react, router, routes and routing |
README
Found
Extensible route-based routing for React applications.
Found is a router for React applications with a focus on power and extensibility. Found uses static route configurations. This enables efficient code splitting and data fetching with nested routes. Found also offers extensive control over indicating those loading states, even for routes with code bundles that have not yet been downloaded.
Found is designed to be extremely customizable. Most pieces of Found such as the path matching algorithm and the route element resolution can be fully replaced. This allows extensions such as Found Relay to provide first-class support for different use cases.
Found uses Redux for state management and Farce for controlling browser navigation. It can integrate with your existing store and connected components.
@babel/cli
Author: Unknown
Description: Babel command line.
Homepage: https://babel.dev/docs/en/next/babel-cli
| Created | about 5 years ago |
| Last Updated | about 2 months ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 90 |
| Direct Dependencies | @jridgewell/trace-mapping, commander, convert-source-map, fs-readdir-recursive, glob, make-dir and slash |
| Keywords | 6to5, babel, es6, transpile, transpiler, babel-cli and compiler |
New dependencies added: @babel/cli, found, found-relay, found-scroll, react-relay, react-relay-network-modern, react-relay-network-modern-ssr, relay-mock-network-layer, relay-runtime, @babel/plugin-proposal-decorators, @storybook/addon-info, @storybook/addon-options, @storybook/addon-viewport, @storybook/addons, @storybook/cli, @storybook/react, @types/chalk, @types/dedent, @types/flickity, @types/loadable__component, @types/memoize-one, @types/qrcode.react, @types/qs, @types/react-overlays, @types/react-slick, @types/react-stripe-elements, @types/react-test-renderer, @types/react-tracking, @types/react-transition-group, @types/storybook__react, @types/styled-components, @types/underscore.string, babel-plugin-relay, graphql-tools, jest-raw-loader, jest-styled-components, raw-loader, relay-compiler, relay-compiler-language-typescript, relay-config, typescript-styled-plugin and vscode-apollo-relay.
Hi there! 👋
We're trialing semantic commit formatting which has not been detected in your PR title.
Refer to README#327 and Conventional Commits for PR/commit formatting guidelines.
|
Lol, good ol' peril. Fun to see this issue pop back up in my notifs. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Opening non-fork version of #5628
Related: artsy/reaction#3586
See RFC for more information.
Browse code on Reaction prior to this PR: https://github.com/artsy/reaction/tree/e2d2fe105661ed2bbb7ec8a2e2e6493112c0425a