v1.4.0

The new version of the SDK includes behavior updates that rely on a recent update to the structured format returned by the API.

• If you are using the structured format, ensure that you re-run ditto-cli pull before updating to this release of ditto-react
• if you are not using the structured format, no action is necessary

Feature Additions

This release adds explicit support for the upcoming release of two new types of variables: map and list.

When passing data for a list variable, an error is logged to the console if the passed data doesn't correspond to a value in the list.

const source = {
  "shopping-cart": {
    "text": "The cart contains {{itemName}}.",
    "variables": {
      "itemName": [
        "apples",
        "pears",
        "oranges"
      ]
    }
  }
}

...

// ✔ value in list, no error logged
<Ditto componentId="shopping-cart" variables={{ itemName: "pears" }} />
output === "The cart contains pears."

// ❌ value NOT in list, error logged (but output retained)
<Ditto componentId="shopping-cart" variables={{ itemName: "grapes" }} />
output === "The cart contains pears."

When passing data for a map variable:

• if the data corresponds to a map key, the corresponding value in the map is interpolated
• if the data doesn't correspond to a map key, an error is logged to the console and the data is interpolated directly

const source = {
  "user-role": {
    "text": "You are {{role}} in this workspace.",
    "variables": {
      "role": {
        "admin": "an administrator",
        "editor": "an editor",
        "commenter": "a commenter",
        "__type": "map"
      }
    }
  }
}

...

// ✔ in list, corresponding value interpolated
<Ditto componentId="user-role" variables={{ role: "admin" }} />
output === "You are an administrator in this workspace."

// ❌ NOT in list, error logged, passed data directly interpolated
<Ditto componentId="user-role" variables={{ role: "owner" }} />
output === "You are owner in this workspace."

Cleanup

• Added deprecation notices to the README for the DittoBlock and DittoFrame components in correspondence with the deprecation of the full format.

import {
  DittoFrame, // deprecated
  DittoBlock, // deprecated
  DittoText,
  DittoComponent, // rendering components from your Ditto component library
} from "ditto-react";

• Removed examples dependent on the deprecated format
• Cleaned up and clarified existing examples
• Updates the Ditto CLI used in the example application to the latest version