jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement React example of WS integration with Flipper

Browse Source 
Summary: Create an example of how one can use `js-flipper` in a browser to connect to Flipper over WS.

Reviewed By: mweststrate

Differential Revision: D31688114

fbshipit-source-id: 135f826daeddeda8dca5b3df6504cc2bdc04dd1b
This commit is contained in:
Andrey Goncharov
2021-10-21 09:12:21 -07:00
committed by Facebook GitHub Bot
parent 25a6fc1ab1
commit 02115722b3
16 changed files with 12047 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
js/react-flipper-example/.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

21
js/react-flipper-example/LICENSE Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) Facebook, Inc. and its affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

9
js/react-flipper-example/README.md Normal file
View File

@@ -0,0 +1,9 @@
# React Flipper Example
Examplary integration of any browser app with Flipper.
## How to start
1. `yarn` to install the deps
2. `yarn relative-deps` to link `js-flipper`
3. `yarn start` to start the app

50
js/react-flipper-example/package.json Normal file
View File

@@ -0,0 +1,50 @@
{
"name": "react-flipper-example",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prepare": "relative-deps"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"relative-deps": "^1.0.7"
},
"relativeDependencies": {
"js-flipper": "../js-flipper"
}
}

22
js/react-flipper-example/public/index.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

27
js/react-flipper-example/src/App.tsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import {FC} from 'react';
import FlipperTicTacToe from './FlipperTicTacToe';
const App: FC = () => {
return (
<div>
<header>
React Flipper WebSocket Example
</header>
<section>
<FlipperTicTacToe />
</section>
</div>
);
}
export default App;

27
js/react-flipper-example/src/FlipperTicTacToe.css Normal file
View File

@@ -0,0 +1,27 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
.grid {
display: grid;
grid-template-rows: repeat(3, 40px);
grid-template-columns: repeat(3, 40px);
}
.cell {
line-height: 40px;
text-align: center;
}
.cell:disabled {
color: black;
}
.cell:hover:not(:disabled), .cell:focus:not(:disabled) {
background-color: blue;
}

93
js/react-flipper-example/src/FlipperTicTacToe.tsx Normal file
View File

@@ -0,0 +1,93 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import {useState, useEffect, FC} from 'react';
import type {FlipperPluginConnection, FlipperClient} from 'js-flipper';
import './FlipperTicTacToe.css';
// We want to import and start flipper client only in development and test modes
let flipperClientPromise: Promise<FlipperClient> | undefined;
if (process.env.NODE_ENV !== 'production') {
flipperClientPromise = import('js-flipper').then(({flipperClient}) => {
flipperClient.start('React Tic-Tac-Toe');
return flipperClient;
});
}
interface GameState {
cells: string[];
turn: string;
winner: string;
}
const FlipperTicTacToe: FC = () => {
const [status, setStatus] = useState('Waiting for Flipper Desktop Player...');
const [gameState, setGameState] = useState<GameState>({
cells: [],
turn: ' ',
winner: ' ',
});
const [connection, setConnection] = useState<FlipperPluginConnection>();
useEffect(() => {
flipperClientPromise?.then(flipperClient => {
flipperClient.addPlugin({
getId() {
return 'ReactNativeTicTacToe';
},
onConnect(connection) {
setStatus('Desktop player present');
setConnection(connection);
// listen to updates
connection.receive('SetState', (gameState: GameState) => {
if (gameState.winner !== ' ') {
setStatus(
`Winner is ${gameState.winner}! Waiting for a new game...`,
);
} else {
setStatus(
gameState.turn === 'X'
? 'Your turn...'
: 'Awaiting desktop players turn...',
);
}
setGameState(gameState);
});
// request initial state
connection.send('GetState');
},
onDisconnect() {
setConnection(undefined);
setStatus('Desktop player gone...');
},
});
});
}, []);
return (
<div>
<p>{status}</p>
<div className="grid">
{gameState.cells.map((state, idx) => (
<button
key={idx}
disabled={!connection || gameState.turn !== 'X' || state !== ' '}
onClick={() => connection?.send('XMove', {move: idx})}
className="cell">
{state}
</button>
))}
</div>
</div>
);
};
export default FlipperTicTacToe;

20
js/react-flipper-example/src/index.tsx Normal file
View File

@@ -0,0 +1,20 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

10
js/react-flipper-example/src/react-app-env.d.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
/// <reference types="react-scripts" />

27
js/react-flipper-example/tsconfig.json Normal file
View File

@@ -0,0 +1,27 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"rootDir": "."
},
"include": [
"src"
]
}

11654
js/react-flipper-example/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff