npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@askvortsov/rich-icu-message-formatter

v0.2.4

Published

An extension of @ultraq/icu-message-formatter that also supports rich text formatting.

Downloads

333

Readme

ICU Message Formatter: Rich Text Extension

npm Bundlephobia minified size

This library extends @ultraq/icu-message-formatter to add a rich method.

You'll still probably need @ultraq/icu-message-formatter for its default plural type handler and select type handler.

Installation

npm install @askvortsov/rich-icu-message-formatter @ultraq/icu-message-formatter

Usage

Usage is identical to that of @ultraq/icu-message-formatter, except that you'll need to import {RichMessageFormatter} from '@askvortsov/rich-icu-message-formatter'; instead of import {MessageFormatter} from '@ultraq/icu-message-formatter';.

You will also need to provide a "rich handler" as the 3rd constructor argument. This should be a function that takes:

  • the name of a rich tag
  • the object of placeholder data
  • Any "children" of this tag: this is an array that can contain strings and vdom elements

Rich handlers should return a vdom element or string. See defaultRichHandler and mithrilRichHandler for examples.

To use the mithrilRichHandler, you must have mithril available via the m global.

For example, assuming mithril has been properly configured:

import {RichMessageFormatter} from 'askvortsov/rich-icu-message-formatter';
import {pluralTypeHandler, selectTypeHandler} from '@ultraq/icu-message-formatter';

let formatter = new MessageFormatter('en', {
  
});

let message = formatter.rich('To register, visit <a>our website</a>!', {
  a: m(m.route.Link, {href: '/register'})
});

Message will be a mithril link to /register.

DISCLAIMER: Rich arrays generated by the rich method will not generate any rich elements from tags in placeholder array contents. In that sense, it is safe to use. However, the final output won't perform any additional sanitation on user-provided content, so the outputs of rich should not be concatted and inserted directly into the DOM without further sanitization, or without using a library that will do that sanitization for you.

Limitations

Rich text formatting currently has the following limitations:

  • Spaces are not allowed in opening/closing tags: syntax MUST be <TAG_NAME>SOME_CONTENTS</TAG_NAME>
  • Tags with attributes are not supported
  • Self closing tags are not supported.