Merge branch 'main' into shorthand-verbs

Author: adrienpoly

.github/workflows/ci.yml

@@ -0,0 +1,19 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+  qa:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '12'
+      - uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+      - run: yarn install
+      - name: Lint
+        run: yarn lint

README.md

@@ -20,7 +20,7 @@ Just import the `FetchRequest` class from the package and instantiate it passing
 Example:
 
 ```js
-import { Request } from '@rails/request.js'
+import { FetchRequest } from '@rails/request.js'
 
 ....
 
@@ -44,6 +44,35 @@ import { Turbo } from "@hotwired/turbo-rails"
 window.Turbo = Turbo
 ```
 
+#### Request Interceptor
+
+To authenticate fetch requests (eg. with Bearer token) you can use request interceptor. It allows pausing request invocation for fetching token and then adding it to headers:
+
+```javascript
+import { RequestInterceptor } from '@rails/request.js'
+// ...
+
+// Set interceptor
+RequestInterceptor.register(async (request) => {
+  const token = await getSessionToken(window.app)
+  request.addHeader('Authorization', `Bearer ${token}`)
+})
+
+// Reset interceptor
+RequestInterceptor.reset()
+```
+
+# Known Issues
+
+`FetchRequest` sets a `"X-Requested-With": "XmlHttpRequest"` header. If you have not upgraded to Turbo and still use `Turbolinks` in your Gemfile, this means
+you will not be able to check if the request was redirected.
+
+```js
+  const request = new FetchRequest('post', 'localhost:3000/my_endpoint', { body: { name: 'Request.JS' }})
+  const response = await request.perform()
+  response.redirected // => will always be false.
+```
+
 # License
 
 Rails Request.JS is released under the [MIT License](LICENSE).

src/fetch_request.js

@@ -1,4 +1,5 @@
 import { FetchResponse } from './fetch_response'
+import { RequestInterceptor } from './request_interceptor'
 import { getCookie } from './lib/cookie'
 
 export class FetchRequest {
@@ -9,6 +10,14 @@ export class FetchRequest {
   }
 
   async perform () {
+    try {
+      const requestInterceptor = RequestInterceptor.get()
+      if (requestInterceptor) {
+        await requestInterceptor(this)
+      }
+    } catch (error) {
+      console.error(error)
+    }
     const response = new FetchResponse(await window.fetch(this.url, this.fetchOptions))
     if (response.unauthenticated && response.authenticationURL) {
       return Promise.reject(window.location.href = response.authenticationURL)
@@ -18,6 +27,12 @@ export class FetchRequest {
     }
   }
 
+  addHeader (key, value) {
+    const headers = this.additionalHeaders
+    headers[key] = value
+    this.options.headers = headers
+  }
+
   get fetchOptions () {
     return {
       method: this.method.toUpperCase(),

src/fetch_response.js

@@ -55,7 +55,7 @@ export class FetchResponse {
   async renderTurboStream () {
     if (this.isTurboStream) {
       if (window.Turbo) {
-        Turbo.renderStreamMessage(await this.text)
+        window.Turbo.renderStreamMessage(await this.text)
       } else {
         console.warn('You must set `window.Turbo = Turbo` to automatically process Turbo Stream events with request.js')
       }

src/index.js

@@ -1,5 +1,6 @@
 import { FetchRequest } from './fetch_request'
 import { FetchResponse } from './fetch_response'
+import { RequestInterceptor } from './request_interceptor'
 import { get, post, put, patch, destroy } from './verbs'
 
-export { FetchRequest, FetchResponse, get, post, put, patch, destroy }
+export { FetchRequest, FetchResponse, RequestInterceptor, get, post, put, patch, destroy }

src/request_interceptor.js

@@ -0,0 +1,13 @@
+export class RequestInterceptor {
+  static register (interceptor) {
+    this.interceptor = interceptor
+  }
+
+  static get () {
+    return this.interceptor
+  }
+
+  static reset () {
+    this.interceptor = undefined
+  }
+}