afformative
Advanced tools
afformative - npm Package Compare versions
Comparing version 0.6.0-alpha.0 to 0.6.0-alpha.1
@@ -61,4 +61,5 @@ declare type Suggestion = "abbreviated" | "icon" | "primitive" | "verbose"; | ||
| /** | ||
| * Function used to format the value. Has the same signature as the one passed to `makeFormatter`, | ||
| * except a `format` function is passed in the first position to simplify delegation. | ||
| * Function used to format the value. Has the same signature as the one passed | ||
| * to `makeFormatter`, except a `delegate` function is passed in the first position. | ||
| * This function can be used to delegate formatting to the original (inner) formatter. | ||
| */ | ||
@@ -68,3 +69,7 @@ nextFormat: FormatChainDefinition<TInput, TOutput, TNextInput, TNextOutput>, | ||
| nextFormatterOptions?: FormatterOptions) => Formatter<TNextInput, TNextOutput>; | ||
| /** Backwards-compatible way to use the formatter as a React component. */ | ||
| /** | ||
| * Backwards-compatible way to use the formatter as a React component. | ||
| * | ||
| * @deprecated Since v0.6.0. Prefer using the `.format` method instead. | ||
| */ | ||
| (props: FormatterProps<TInput>): TOutput; | ||
@@ -71,0 +76,0 @@ } |
| { | ||
| "name": "afformative", | ||
| "version": "0.6.0-alpha.0", | ||
| "version": "0.6.0-alpha.1", | ||
| "license": "MIT", | ||
@@ -34,3 +34,3 @@ "main": "dist/afformative.cjs.js", | ||
| "sideEffects": false, | ||
| "gitHead": "a4b909a9ab844c3546ef12409a57bfa9e9f4ff77" | ||
| "gitHead": "187c3168ffaa87b8b5c4070b04a41e61ff818109" | ||
| } |
@@ -45,3 +45,3 @@ <h1 align="center"> | ||
| A formatter is an object with a `.format` method. Formatters should be created solely using the `makeFormatter` function. | ||
| A formatter is an object with a `.format` method. Formatters should be created solely using the `makeFormatter` factory. | ||
@@ -79,15 +79,15 @@ ```js | ||
| > Formatters in older versions of afformative were intended to be used as React components. This usage is now deprecated in favour of always using the `.format` method. This is to make formatters more versatile, as the ability to use formatters as React components implies that hook usage within formatters is okay, when in reality it just makes using the formatters harder in some contexts. | ||
| ### Usage Context | ||
| Although formatters can render icons or custom translation components, we often need to access primitive data instead of React elements. Lexicographic sorting of items based on translations is a typical real world example, especially when you are using a custom React component for visualising the translation keys alongside the actual translations. This is where the suggestion mechanism comes into play. | ||
| Although formatters can render icons or custom translation components, we often need to access primitive data instead of React elements. | ||
| Suggestions can be used to tell formatters that a value needs to be rendered with some special care. For example, use `"abbreviated"` to tell a formatter that it is being used in a narrow table column. | ||
| > Lexicographic sorting of items based on translations is a typical real world example, especially when you are using a custom React component for visualising the translation keys alongside the actual translations. | ||
| This is where usage suggestions comes into play. Suggestions can be used to tell formatters that a value needs to be rendered with some special care. For example, pass `"primitive"` to tell a formatter that it should return a primitive value, such as a string. | ||
| ```js | ||
| import { makeFormatter } from "afformative" | ||
| const booleanFormatter = makeFormatter((value, suggestions) => { | ||
| if (suggestions.includes("primitive")) { | ||
| const booleanFormatter = makeFormatter((value, usageSuggestions) => { | ||
| if (usageSuggestions.includes("primitive")) { | ||
| return value ? "True" : "False" | ||
@@ -103,3 +103,3 @@ } | ||
| You can also pass arbitrary data to formatters as the third argument: the data context. Let's use a dummy table component as an example. | ||
| You can also pass arbitrary data to formatters as the third argument: data context. Let's use a dummy table component as an example. | ||
@@ -140,7 +140,6 @@ ```js | ||
| Using the `makeFormatter` factory statically is sufficient if your values do not depend on any external context. Things get a bit trickier once you need to statically format values which depend on React context. | ||
| Use hooks. | ||
| ```js | ||
| const useEnumFormatter = enumType => { | ||
| // Resolve your data context here via React hooks. | ||
| // `useSelector` is from `react-redux`, `useIntl` from `react-intl`. | ||
@@ -166,6 +165,2 @@ // `makeSelectEnumTranslationKeys` is a made-up Redux selector factory. | ||
| `someEnumFormatter` is now usable even for static formatting, it has access to React context via a closure. | ||
| Awesome, right? | ||
| ### Consuming Formatters | ||
@@ -175,3 +170,3 @@ | ||
| All formatters also expose the `.wrap` static method. You can use this method to alter the behaviour of the formatter for some specific values. | ||
| All formatters also expose the `.wrap` method. You can use this method to alter the behaviour of the formatter for some specific values. | ||
@@ -178,0 +173,0 @@ ```js |
@@ -71,4 +71,5 @@ type Suggestion = "abbreviated" | "icon" | "primitive" | "verbose" | ||
| /** | ||
| * Function used to format the value. Has the same signature as the one passed to `makeFormatter`, | ||
| * except a `format` function is passed in the first position to simplify delegation. | ||
| * Function used to format the value. Has the same signature as the one passed | ||
| * to `makeFormatter`, except a `delegate` function is passed in the first position. | ||
| * This function can be used to delegate formatting to the original (inner) formatter. | ||
| */ | ||
@@ -79,3 +80,7 @@ nextFormat: FormatChainDefinition<TInput, TOutput, TNextInput, TNextOutput>, | ||
| ) => Formatter<TNextInput, TNextOutput> | ||
| /** Backwards-compatible way to use the formatter as a React component. */ | ||
| /** | ||
| * Backwards-compatible way to use the formatter as a React component. | ||
| * | ||
| * @deprecated Since v0.6.0. Prefer using the `.format` method instead. | ||
| */ | ||
| (props: FormatterProps<TInput>): TOutput | ||
@@ -82,0 +87,0 @@ } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by2.3%
444
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-1.49%
29452
- Number of lines in readme file
- decreased by-2.54%
192