Skip to content

Commit 64426cc

Browse files
rolandjitsurolandjitsu
committed
feat: impl. the stream hook
1 parent 86503df commit 64426cc

21 files changed

+6804
-0
lines changed

‎.eslintignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
coverage/
2+
dist/
3+
typings/*

‎.eslintrc.defaults.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
module.exports = {
2+
parser: '@babel/eslint-parser',
3+
extends: [
4+
'eslint:recommended',
5+
'plugin:import/errors',
6+
'plugin:import/warnings',
7+
'plugin:prettier/recommended'
8+
],
9+
rules: {
10+
'prettier/prettier': [
11+
'error',
12+
{
13+
singleQuote: true,
14+
trailingComma: 'none',
15+
bracketSpacing: false,
16+
arrowParens: 'avoid'
17+
}
18+
]
19+
},
20+
env: {
21+
browser: true,
22+
node: true,
23+
es2017: true,
24+
jest: true
25+
}
26+
};

‎.eslintrc.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
extends: ['./.eslintrc.defaults.js', 'plugin:node/recommended'],
3+
parserOptions: {
4+
sourceType: 'module'
5+
}
6+
};

‎.github/ISSUE_TEMPLATE.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!-- Before creating an issue please make sure you are using the latest version of this package. -->
2+
3+
**Do you want to request a *feature* or report a *bug*?**
4+
<!-- Please ask questions on StackOverflow. Questions will most likely be closed. -->
5+
6+
- [ ] I found a bug
7+
- [ ] I want to propose a feature
8+
9+
**What is the current behavior?**
10+
11+
**If the current behavior is a bug, please provide the steps to reproduce.**
12+
<!-- You can use https://codesandbox.io/ to illustrate the issue you're experiencing or you can provide relevant code samples. -->
13+
14+
1.
15+
2.
16+
3.
17+
18+
**What is the expected behavior?**
19+
20+
**If this is a feature request, what is motivation or use case for changing the behavior?**
21+
22+
**Other info**
23+
<!-- Please mention other relevant information such as the browser version, operating system, version, etc. -->

‎.github/PULL_REQUEST_TEMPLATE.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. -->
2+
3+
**What kind of change does this PR introduce?**
4+
5+
- [ ] bugfix
6+
- [ ] feature
7+
- [ ] refactoring / style
8+
- [ ] build / chore
9+
- [ ] documentation
10+
11+
**Did you add tests for your changes?**
12+
13+
- [ ] Yes, my code is well tested
14+
- [ ] Not relevant
15+
16+
**If relevant, did you update the documentation?**
17+
18+
- [ ] Yes, I've updated the documentation
19+
- [ ] Not relevant
20+
21+
**Summary**
22+
23+
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
24+
<!-- Try to link to an open issue for more information. -->
25+
26+
**Does this PR introduce a breaking change?**
27+
<!-- If this PR introduces a breaking change, please describe the impact and a migration path for existing applications. -->
28+
29+
**Other information**

‎.github/workflows/release.yml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: Release
2+
on:
3+
push:
4+
branches:
5+
- master
6+
- "[0-9]+.[0-9]+.x"
7+
8+
jobs:
9+
release:
10+
name: release
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v2
14+
- uses: actions/setup-node@v1
15+
with:
16+
node-version: "12.x"
17+
- run: yarn install --pure-lockfile
18+
- run: yarn build
19+
# - run: npx semantic-release
20+
# env:
21+
# GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
22+
# NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.github/workflows/test.yml

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
name: Test
2+
on:
3+
push:
4+
branches:
5+
- master
6+
- "[0-9]+.[0-9]+.x"
7+
pull_request:
8+
types: [opened, synchronize]
9+
10+
jobs:
11+
test:
12+
runs-on: ubuntu-latest
13+
strategy:
14+
matrix:
15+
node_version: [10, 12, 14]
16+
17+
steps:
18+
- uses: actions/checkout@v2
19+
- name: Use Node.js ${{ matrix.node_version }}
20+
uses: actions/setup-node@v1
21+
with:
22+
node-version: ${{ matrix.node_version }}
23+
- name: Install
24+
run: yarn install --pure-lockfile
25+
- name: Test
26+
run: yarn test:cov
27+
- uses: coverallsapp/[email protected]
28+
with:
29+
github-token: ${{ secrets.GITHUB_TOKEN }}
30+
parallel: true
31+
32+
coverage:
33+
needs: test
34+
runs-on: ubuntu-latest
35+
steps:
36+
- uses: coverallsapp/[email protected]
37+
with:
38+
github-token: ${{ secrets.GITHUB_TOKEN }}
39+
parallel-finished: true

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,7 @@ Icon
4343
npm-debug.log*
4444
yarn-debug.log*
4545
yarn-error.log*
46+
47+
# Misc
48+
.envrc
49+
dist

‎.npmignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
coverage
2+
node_modules
3+
src/*.test.js
4+
test
5+
.editorconfig
6+
.eslintignore
7+
.eslintrc.defaults.js
8+
.eslintrc.js
9+
babel.config.js
10+
jest.config.js
11+
rollup.config.js
12+
setupTests.js
13+
yarn.lock

‎README.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
# react-fetch-streams
2+
3+
> A react hook for using the [Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) with the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to stream data from a server.
4+
5+
[![npm](https://img.shields.io/npm/v/react-fetch-streams.svg?style=flat-square)](https://www.npmjs.com/package/react-fetch-streams)
6+
[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/rolandjitsu/react-fetch-streams/Test?label=tests&style=flat-square)](https://github.com/rolandjitsu/react-fetch-streams/actions?query=workflow%3ATest)
7+
[![Coveralls Github Branch](https://img.shields.io/coveralls/github/rolandjitsu/react-fetch-streams/master?style=flat-square)](https://coveralls.io/github/rolandjitsu/react-fetch-streams?branch=master)
8+
9+
# Table of Contents
10+
11+
* [Installation](#installation)
12+
* [Usage](#usage)
13+
* [Browser Support](#browser-support)
14+
* [Contribute](#contribute)
15+
16+
### Installation
17+
----------------
18+
You can install this package from [NPM](https://www.npmjs.com):
19+
```bash
20+
npm add react-fetch-streams
21+
```
22+
23+
Or with [Yarn](https://yarnpkg.com/en):
24+
```bash
25+
yarn add react-fetch-streams
26+
```
27+
28+
#### CDN
29+
For CDN, you can use [unpkg](https://unpkg.com):
30+
31+
[https://unpkg.com/react-fetch-streams/dist/index.min.js](https://unpkg.com/react-fetch-streams/dist/index.min.js)
32+
33+
The global namespace for react-fetch-streams is `reactFetchStreams`:
34+
```html
35+
<script type="text/javascript" src="https://unpkg.com/react-fetch-streams/dist/index.min.js"></script>
36+
37+
<script type="text/javascript">
38+
const {useStream} = reactFetchStreams;
39+
...
40+
</script>
41+
42+
```
43+
44+
### Usage
45+
---------
46+
Stream some data from some server:
47+
```jsx
48+
import React, {useCallback, useState} from 'react';
49+
import {useStream} from 'react-fetch-streams';
50+
51+
const MyComponent = props => {
52+
const [data, setData] = useState({});
53+
const onNext = useCallback(async res => {
54+
const data = await res.json();
55+
setData(data);
56+
}, [setData]);
57+
useStream('http://myserver.io/stream', {onNext});
58+
59+
return (
60+
<React.Fragment>
61+
{data.myProp}
62+
</React.Fragment>
63+
);
64+
};
65+
```
66+
67+
You can also pass the fetch request init props using `fetchParams`:
68+
```jsx
69+
import React, {useCallback, useState} from 'react';
70+
import {useStream} from 'react-fetch-streams';
71+
72+
const fetchParams = {mode: 'cors'}
73+
74+
const MyComponent = props => {
75+
const [data, setData] = useState({});
76+
const onNext = useCallback(async res => {
77+
const data = await res.json();
78+
setData(data);
79+
}, [setData]);
80+
useStream('http://myserver.io/stream', {onNext, fetchParams});
81+
82+
return (
83+
<React.Fragment>
84+
{data.myProp}
85+
</React.Fragment>
86+
);
87+
};
88+
```
89+
90+
For more examples, please check the [tests](./src/stream.test.js).
91+
92+
### Browser Support
93+
-------------------
94+
You can expect this hook to work wherever the following APIs are supported:
95+
* [File API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility)
96+
* [Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API#Browser_compatibility)
97+
* [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController#Browser_compatibility)
98+
* [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal#Browser_compatibility)
99+
100+
### Contribute
101+
--------------
102+
If you wish to contribute, please use the following guidelines:
103+
* Use [Conventional Commits](https://conventionalcommits.org)

0 commit comments

Comments
 (0)