npm package: @shopify/app-bridge-validate
Description: App Bridge Validate is a middleware that validates action-instantiation props and payloads of dispatched actions. It can provide helpful error messages during development. As a separate package from [app-bridge]('../app-bridge'), this utility should be om
Author: Shopify Inc.
Latest version: 1.0.7
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/app-bridge-validate`

App Bridge Validate is a middleware that validates action-instantiation props and payloads of dispatched actions. It can provide helpful error messages during development. As a separate package from [app-bridge]('../app-bridge'), this utility should be omitted in production to reduce file size.

## Usage

To use the validator in an app, initialize your app with `createAppWrapper` instead of `createApp`. Using `createAppWrapper` allows you to pass in optional middlewares:

```ts
import {createAppWrapper, ClientApplication} from '@shopify/app-bridge';
import validatorMiddleware from '@shopify/app-bridge-validate';

const app = createAppWrapper(window.top, window.location.origin, [validatorMiddleware])({
  apiKey: 'API_KEY_FROM_PARTNER_DASH',
  shopOrigin: 'testshop.myshopify.io',
});
```

After the validator is set up, it validates action instantiation and dispatch against rules defined in the [actions]('./src/actions') directory. Invalid actions will throw an error.

## Validation in App Bridge Playground

The [App Bridge Playground]('../app-bridge-playground') is set up to use the validator. To try it out, follow the setup steps from the playground package and then view the app with a shop.

### Props validation

Edit code samples from any section of the playground app so that it creates an error. For example:

```ts
{
  message: "Unicorn",
  duration: '1234', // duration should be a positive integer
  isError: false,
}
```

Using the code above to instantiate a `Toast` action will throw an error. Details of the error can be found in the browser's debug console.

### Dispatch validation

In the **Any Action** section of the playground, attempt to dispatch an action with an invalid payload. For example, try to dispatch the invalid `Toast` action below:

```json
{
  "type": "APP::TOAST::SHOW",
  "group": "Toast",
  "payload": {
    "id": "123",
    "message": 1234 // message should be a string
  },
  "version": "1.0.0"
}
```

The action should result in an error with a `message` property that shows the path to where the error occurred:

```json
{
  "error": {
    "action": {
      "type": "APP::TOAST::SHOW",
      "group": "Toast",
      "payload": {
        "id": "123",
        "message": 1234
      },
      "version": "1.0.0"
    },
    "message": "`type_error_expected_string` thrown for path: ['payload']['message'] and value: `1234` | `type_error_expected_integer` thrown for path: ['payload']['duration'] and value: `undefined`",
    "type": "APP::ERROR::INVALID_PAYLOAD",
    "id": "123"
  }
}
```

## Creating validation rules

New actions and action groups in [app-bridge](../app-bridge) should be accompanied by validation rules. Add new validation rules to a TS file with the name of the action.

The following example adds validation rules to `toast.ts` for the the `Toast` action:

```ts
import {MetaAction} from '@shopify/app-bridge/actions';
import {ActionType} from '@shopify/app-bridge/actions/Toast';
import {validate, ValidationError} from '@shopify/app-bridge-validate/type-validate';
import {createActionValidator} from '@shopify/app-bridge-validate/utils';

export const toastSchema = matchesObject({
  message: matchesString(),
  duration: matchesPositiveInteger(),
  isError: makeOptional(matchesBoolean()),
});

export function validateProps(props: Indexable) {
  return validate(props, toastSchema);
}

export function validateAction(action: MetaAction): ValidationError[] | undefined {
  switch (action.type) {
    case ActionType.SHOW:
      return validate(action, createActionValidator(ActionType, toastSchema, true));
    default:
      return validate(action, createActionValidator(ActionType));
  }
}
```