v1.6.1

What's Changed

This release fixes a crash that occurred when richText was enabled.

• [DIT-6297] Fix dompurify import by @asnewman in #40

Full Changelog: v1.6.0...v1.6.1

v1.6.0

Feature Additions

Ditto text items with rich text can now be rendered natively by passing the richText property on either Ditto or DittoText.

This expands rich text support from v1.5.0 which introduced support for rich text on components.

Example

<Ditto
  textId="text_61e7238bbae5dc00fb66de15"
  variables={{ itemCount: 5 }}
  richText
/>

Related issue: #34

v1.5.0

Feature Additions

Ditto components with rich text can now be rendered natively by passing the richText property on either Ditto or DittoComponent.

Example

<Ditto componentId="shopping-cart" richText />

Related issue: #34

v1.4.1

Bugfixes

Fixed an issue causing variables to not use passed values.

Thanks to @Taiwar for reporting.

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

v1.3.0

Feature Additions

Usage of the variables property to interpolate values in text is now supported even when the Ditto source data doesn't contain Ditto variables associated with a given piece of text; this enables ditto-react users to pull Ditto data in the flat format without losing variable support.

Previously, interpolation would only take place if a given Ditto component / text item contained variables corresponding to the keys passed in the variables property.

Example

Given this application code:

And this Ditto source data:

This is the result:

v1.2.1

Bugfixes

Fixed an issue causing falsy variable values (namely 0 and "") to not be interpolated.

Before

After

Thanks to @Taiwar for reporting.

v.1.2.0

Feature Additions

Hooks

• Expose hooks-based API being used internally. Rationale explained in #16 (comment):

A public hooks-based API for library consumers to use has been on our roadmap for quite some time, but we haven't yet gotten around to implementing it. The hooks that ditto-react uses internally have some ergonomic rough edges due to how they've evolved from legacy constraints, which is why those haven't always been exported alongside the associated React components.

Although we still expect to release a better-designed hooks API in the future, I think it makes total sense to allow usage of the existing (currently internal) hooks until then -- as mentioned in #13 (comment), we just want to make sure we get things right before advocating for people to adopt them.

import { useDittoComponent, useDittoSingleText } from "ditto-react";

const SomePage = () => {
  // consume text synced from components in a Ditto component library
  const componentText: string | null = useDittoComponent({ componentId: "xxx-xxx-xxx" });

  // consume text synced from text items in a Ditto project
  const text: string | null = useDittoSingleText({ textId: "xxx-xxx-xxx" });
  ...
}

See the README for more information.

Thanks to @dgreene1, @VladymyrPylypchatin, @JeffBaumgardt, and others for advocating for the change.

Miscellaneous

• General cleanup of types to accommodate hooks being used directly

Update example project

This update:

• update example project to display variant variables and plurals
• remove unused options props from DittoContext

v1.1.1

This update introduces support for two new Ditto features:

1. Variable Interpolation
2. Pluralization

Additionally the example project has been rebuilt to support development with variables and plurals.

Variable Interpolation

• add in the variables prop to the Ditto components to support dynamic text

• <DittoText /> // The cart contains {{itemCount}} {{itemName}}
• <DittoText variables={{ itemCount: 4, itemName: 'apples' }} /> // The cart contains 4 apples

• For more info please refer to the documentation: https://github.com/dittowords/ditto-react#interpolation

Pluralization

• add in the count prop to the Ditto components to support pluralized text

• <DittoText /> // The cart contains {{itemCount}} items
• <DittoText variables={{ itemCount: 3}} count={3}/> // The cart contains 3 items
• <DittoText variables={{ itemCount: 1}} count={1}/> // The cart contains 1 item

• For more info please refer to the documentation: https://github.com/dittowords/ditto-react#plurals