Formatter
No summary available
import { Formatter } from "@schukai/monster/source/text/formatter.mjs";'%3E%3Cpath style='stroke:none;fill-rule:nonzero;fill:%23f03c2e;fill-opacity:1' d='M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371'/%3E%3C/g%3E%3C/svg%3E "View source code")
Introduction
The Formatter replaces markers inside strings with values from a data object. It supports nested markers, parameter blocks, and the full pipe syntax for transformations.
Basic Usage
import { Formatter } from "@schukai/monster/source/text/formatter.mjs";
const formatter = new Formatter({
title: "Hello",
name: "World"
});
formatter.format("${title} ${name}!");
Pipes and Callbacks
You can use pipe commands to transform values. Custom callbacks can be injected through the callbacks option.
const formatter = new Formatter({ value: "1" }, {
callbacks: {
quote: (v) => `"${v}"`
}
});
formatter.format("${value | call:quote}");
Marker Parameters
A marker can carry its own parameter list using :: and = separators. Parameters are forwarded to pipe commands.
formatter.format("${price::currency=EUR | money}");
/** this example does not use an extra script **/
Monster
Build fantastic websites!
Efficient Web Design with Custom Components
Monster is the foundation of our front-end projects and greatly simplifies the creation of websites and applications. Our library includes a wide range of pre-built, elegant and customizable components. From precise buttons that provide feedback on user actions to complex data lists with sorting and filtering capabilities, Monster gives you the tools you need to design quickly and consistently.
As an open-source project, Monster is constantly being expanded and refined by a dedicated team. Our goal is to constantly improve the functionality and at the same time make it intuitive to use to make your everyday work easier.
<monster-button id="my-button">
Click Me!
</monster-button>
const myButton = document.getElementById('my-button');
myButton.setOption("actions.click", () => {
myButton.setState("successful", 2000);
})
Below, you'll find the "Click Me!" button. When clicked, a checkmark briefly appears to confirm the operation was successful.
The accompanying source code, shown on the right, uses HTML to define the button and JavaScript to set its state to "successful" for 2000 milliseconds following the click.
This demonstrates a straightforward way to provide immediate feedback on user interfaces.
Web Components for Tomorrow's Needs
Customizable Components
Monster offers a diverse suite of web components that blend seamlessly into any design. Customize colors, shapes, and functionalities to fit your specific needs.
Optimized for consistent performance across all screen sizes, our components ensure a smooth user experience on every device.
Efficient Integration & Maintenance
With Monster's modular structure, you can swiftly add or remove components without overhauling your entire codebase.
This feature streamlines project maintenance and expedites the deployment of new features, enhancing overall productivity.
Future-Proof Technology
Committed to innovation, we continuously update Monster to align with the latest web standards and browser technologies.
This proactive approach ensures that your projects remain compatible and secure against future technological shifts.
The current width of the area is too small to display the content correctly.
Exported
FormatterDerived from
BaseWithOptionsOptions
The Options listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the BaseWithOptions.
Properties
The Properties listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Properties from these parent classes. If you cannot find a specific Properties in this list, we recommend consulting the documentation of the BaseWithOptions.
Methods
The methods listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the BaseWithOptions.
Constructor
constructor(object,options)object: objectoptions: options
${ and }Structural methods
setMarker(open,close)1.12.0open{array|string}: openclose{array|string|undefined}: close
- {Formatter}
{TypeError}value is not a string
${ and } ``formatter.setMarker('#'); // open and close are both # formatter.setMarker('[',']'); formatter.setMarker('i18n{','}');``setParameterChars(delimiter,assignment)1.24.0delimiter{string}: delimiterassignment{string}: assignment
- {Formatter}
{TypeError}value is not a string
:: and = ``formatter.setParameterChars('#'); formatter.setParameterChars('[',']'); formatter.setParameterChars('i18n{','}');``Other methods
format(text)text{string}: text
- {string}
{TypeError}value is not a string{Error}too deep nesting
Events
This component does not fire any public events. It may fire events that are inherited from its parent classes.