Code Monkey home page Code Monkey logo

protostar-relay's Introduction

Proto Relay

Proto Relay is a Chrome extension devtool for React Relay based off the official devtool. It is designed to be light-weight, performant, and easy-to-use.

Table of Contents

  • insert table of contents later

Features

  • Preview Relay store content from the Chrome devtools panel
  • View store content over time with included snapshots
  • View store mutations and network queries

Installation

  1. Fork and clone this repository onto your local computer
  2. Install dependencies and run a build using either the 'Yarn' or 'NPM' commands below:
# Yarn
yarn npm install
yarn run build

# NPM
npm run install
npm run build
  1. Access the Chome extensions within the browser
  2. Access Chrome extensions within the browser
  3. Click on "Load Unpacked"
  4. Navigate and select the folder: protostar-relay > Shells > browser > chrome > build > unpacked
  5. Go to a website built with Relay and open the "proto*" panel. Websites that use Relay include:

How to Use

  • Example of how to access proto* and interact with the relay store.

  • Example of typing in the search box and resetting the store.

  • Example of interacting with snapshot feature and store timeline.

  • Example of navigating between the store and network.

Contributing

Protostar-relay is currently in beta release. We encourage you to submit issues for any bugs or ideas for enhancements. Also feel free to fork this repo and submit pull requests to contribute as well. Below are some features we would like to add as we iterate on this project:

  • Optimistic updates:
    • Visual representation.
    • List of all optimistic updates with pending/resolved status.
    • Control data flow.

Google Chrome Web Store

Get it on the Chrome Extension Store: coming soon.

Contributors

Aryeh Kobrinsky, Liz Lotto, Marc Burnie, Qwen Ballard

License

This project is licensed under the MIT License- see the LICENSE.md for more details.

protostar-relay's People

Contributors

marcburnie avatar elizlotto avatar qwenballard avatar akobrinsky avatar

Stargazers

Alice Fu avatar Joseph Kinney avatar miguelmanalo avatar Jinseon Shin  avatar Wayne Alan WIlcox  avatar Khizar Rehman avatar Silvia Miranda avatar  avatar  avatar Sara Powers avatar  avatar Ben Brower avatar Justin Jaeger avatar Keriann avatar Travis Frank avatar Nancy Kousholt avatar Patty Qian avatar Mike Lauri avatar Martin Chiang avatar Dan Lin avatar  avatar  avatar Rob Nobile avatar  avatar Nate Adams avatar Gary Slootskiy avatar Minchan Jun avatar  avatar Stanley Huang avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.