@soleil-se/app-util 5.3.0 → 5.4.0

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.4.0] - 2023-08-09
+
+- Add `fetchJson` function to make requests to app routes or other resources.
+
 ## [5.3.0] - 2023-07-06
 
 - Added helper functions for managing parameters in the URL-field.

package/README.md

@@ -180,7 +180,7 @@ Stringify an object to a query string compatible with Sitevision.
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
 | params | `Object` | | Object with parameters to stringify. |
-| [options] | `Object` | `{}` | Settings object. |
+| [options] | `Object` | `{}` | Options object. |
 | [options.addQueryPrefix] | `Boolean` | `false` | If a leading `?` should be added to the string. |
 
 ```js
@@ -214,6 +214,79 @@ const params = parseParams('?foo=bar&arr[]=1&arr[]=2');
 
 Following API:s are available in a client context.
 
+### Fetch
+
+Fetch wrapper for calling app routes, rest-api or external resources.
+
+#### fetchJson() => `Promise<Object>`
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| uri | `String` | | URI for resource |
+| [options] | `Object` | `{}` | Options object, two custom options rest is standard [fetch options](https://developer.mozilla.org/en-US/docs/Web/API/fetch#options) |
+| [options.params] | `Object` | `{}` | Object with parameters to be appended to the URI |
+| [options.retries] | `Number` | `0` | Number of retries if the request times out. |
+
+**Returns**: `Promise<Object>` - Promise containing parsed JSON-data.  
+**Throws** `Error` - Extended error object with custom properties for `status`, `aborted` and other JSON-data returned by the request.
+
+Most common usage is getting data from a route in the current app.
+
+```js
+import { fetchJson } from '@soleil-se/webapp-util/client';
+
+async function getItems() {
+  const params = { query: 'foo', start: 0, num: 10 };
+  const result = await fetchJson('/items', { params });
+  console.log(result);
+}
+```
+
+Posting form data.
+
+```js
+import { fetchJson } from '@soleil-se/webapp-util/client';
+
+async function postForm() {
+  const body = new FormData();
+  body.append('name', 'Foo');
+  body.append('mail', 'foo@bar.com');
+
+  const result = await fetchJson('/create', { method: 'POST', body }));
+  console.log(result);
+}
+```
+
+Specify number of retries if a request times out.
+
+```js
+import { fetchJson } from '@soleil-se/webapp-util/client';
+
+async function getItems() {
+  const params = { query: 'foo', start: 0, num: 10 };
+  const result = await fetchJson('/items', { params, retries: 5 });
+  console.log(result);
+}
+```
+
+Handle aborted requests called in rapid succession, for example searching when typing.
+
+```js
+import { fetchJson } from '@soleil-se/webapp-util/client';
+
+async function onInput() {
+  const params = { query: 'foo' };
+  try {
+    const result = await fetchJson('/search', { params });
+    console.log(result);
+  } catch(e) {
+    // Ignore aborts due to new search.
+    if(e.aborted) return;
+    // Handle error as usual.
+  }
+}
+```
+
 ### URL Parameters
 
 Helper functions setting, getting, updating and clearing query parameters in the URL-field.

package/client/fetch-json/index.js

@@ -0,0 +1,48 @@
+import { getRouteUri, stringifyParams } from '../../common';
+
+function getUrl(uri, params) {
+  if (uri.startsWith('/rest-api') || uri.startsWith('/appresource') || !uri.startsWith('/')) {
+    return uri + stringifyParams(params, { addQueryPrefix: true });
+  }
+  return getRouteUri(uri, params);
+}
+
+function toJson(response) {
+  try {
+    return response.json();
+  } catch (e) {
+    return {};
+  }
+}
+
+async function handleResponse(response) {
+  const json = await toJson(response);
+  if (!response.ok) {
+    const error = new Error(json?.message || response?.statusText);
+    Object.entries(json).forEach(([key, value]) => {
+      error[key] = value;
+    });
+    error.status = response.status;
+    throw error;
+  }
+
+  return json;
+}
+
+const controllers = {};
+
+export default function fetchJson(uri, { params = {}, retries = 0, ...options } = {}) {
+  if (controllers[uri]) controllers[uri].abort();
+  controllers[uri] = new AbortController();
+  return fetch(getUrl(uri, params), { signal: controllers[uri].signal, ...options })
+    .then(handleResponse)
+    .catch((error) => {
+      const isTimeout = error.status === 504 || error.status === 408 || error.message.includes('SocketTimeoutException');
+      if (isTimeout && retries > 0) {
+        return fetchJson(uri, { ...options, params, retries: retries - 1 });
+      }
+      // eslint-disable-next-line no-param-reassign
+      error.aborted = error.name === 'AbortError';
+      return Promise.reject(error);
+    });
+}

package/client/index.js

@@ -5,3 +5,5 @@ export {
   updateUrlParams,
   clearUrlParams,
 } from './url-params';
+
+export { default as fetchJson } from './fetch-json';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Utility and rendering functions for WebApps.",
   "main": "./common/index.js",
   "author": "Soleil AB",
@@ -14,6 +14,6 @@
   "peerDependencies": {
     "@sitevision/api": "*"
   },
-  "gitHead": "1928f2e710e25b16b0e3a792bb8d6b9254d72084",
+  "gitHead": "b590af917fa521db8bdb7e6f97bd35dffa50a0de",
   "dependencies": {}
 }

package/docs/2.vue.md

@@ -1,57 +0,0 @@
-# Vue (DEPRECATED)
-
-Sitevision only supports client side rendering with Vue.
-
-## index.js
-
-Render an app with only client code.
-`index.js`
-
-```javascript
-import router from '@sitevision/api/common/router';
-
-router.get('/', (req, res) => {
-  const props = { foo: 'bar' };
-  res.agnosticRender('', props)
-});
-```
-
-## main.js
-
-### `render(App, { target, props })`
-
-`@soleil-api/webapp-util/client/vue`
-
-Renders a client side Vue application.
-
-**Returns**: <code>\*</code> - Initialized Vue app.
-
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| App | <code>\*</code> |  | Svelte app root component. |
-| [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
-| [settings.target] | <code>Element</code> | | Target where app should be mounted. |
-| [settings.props] | <code>Object</code> | | Root component props. |
-
-`main.js`
-
-```javascript
-import { render } from '@soleil-api/webapp-util/client/vue';
-import App from './App.vue';
-
-export default (props, target) => {
-  render(App, { props, target });
-};
-```
-
-Mount the app in another element:
-`main.js`
-
-```javascript
-import { render } from '@soleil-api/webapp-util/client/vue';
-import App from './App.vue';
-
-export default (props) => {
-  render(App, { props, target: document.querySelector('#mount_app_here') });
-};
-```