Use <time> in place of <span> for FormattedDate, FormattedRelative, and FormattedTime?

[formatjs]

Use in place of for FormattedDate, FormattedRelative, and FormattedTime?

from formatjs.

[ericf]

For these components we ideally want them to just emit text on render and leave it up to the developer to wrap them how they see fit. The React core team has talked about possibly supporting this idea that components can simply render text, and I think that feature would be a good fit for React Intl.

If we switch things to render a <time> node, things get a bit tricky since we'd then need to pass along all the props to that node for things like className, style, etc. If we were to do this same for <FormattedNumber> these props would clash since style is used as an option to number formatting.

I think we should continue the discussion on this to figure out what the best thing to do is, and whether or not support for rendering text nodes is still in the cards for React.

Right now to do what you want, you can easily wrap it:

<time dateTime={this.props.date}>
    <FormattedRelative value={this.props.date} />
</time>

[ericf]

This is also related to the discussion in #72

[BradDenver]

Thanks for the considered response @ericf.

I agree that if React can emit only text then it should be up to the developer to wrap that response as required. If not then the transfer of props is an interesting issue to be considered.

[onemanstartup]

@ericf in the docs I see

_formatDate(), formatTime(), formatRelative(), formatNumber(), and formatMessage() methods provide an imperative API to formatting data and strings, but these methods will likely be deprecated in v2.0, so use the Components._

so how should I implement this then?

    <time dateTime={this.props.date} title={this.humanReadableDate()} >
      <FormattedRelative value={this.props.date}/>
    </time>

[ericf]

@onemanstartup I don't follow what you're asking; you're example is using the React Intl Components.

[onemanstartup]

@ericf sorry, I mean rendering time in title. Without component.

[ericf]

We're exploring a couple options for this:

1. Keep the methods on the mixin. This has the problem of React moving away from using or encouraging the use of mixins.
2. Create a FormatJS lib. Right now we have the core Intl* APIs that are built in to JavaScript, plus the ones we created for message and relative time formatting, but we could create a higher-level imperative API. This would allow us to add the caching and intl metadata features at a lower level than our template and component integration libs like React Intl.

We've been exploring option 2, but have some reservations around creating a this higher-level imperative library when we want to contribute back to the ECMAScript spec. But it may be the practicality of it that ends up bringing it to live. Right now we have 4 integration libraries that each have to do similar work to extract and build all the locale data, implement Intl* instance memoization, and add connivence for managing intl metadata. We're feeling the pain of our current architecture and could move to something like:

To use FormatJS and React Intl there's two libraries you need to use: format.js and react-intl.js. The FormatJS lib would provide the imperative API, memoization, intl metadata handling, while React Intl would be the declarative component layer on top.

So for your example you would be able to access the FormatJS lib directly to implement this.humanReadableDate().

Whatever approach we end up going with we'll provide a way to handle what you're trying to do.

[onemanstartup]

@ericf thank you for explanation. Second version is seems good way to go.

[ericf]

Closing this, we're keeping with the suggestion to wrap.