fluent-dom 0.2.0 (April 11, 2018)

• DOM Overlays v2 (#168)

  Major refactor of DOM Overlays allowing developers to provide node elements as arguments. This is breaking change compared to [email protected].

  In 0.1.0 only text-level elements were allowed in translations. Additionally, if a element of the same type was present in the source HTML, its functional attributes were copied to the translated element. This approach allowed translations to use the <a> element and have its href attribute copied from the source. It was limited, however, to text-semantic elements (<img> or <button> were not supported) and to overlaying child elements in the order defined by the source.

  0.2.0 introduces two separate use-cases:

  • Text-level elements. Localizers may want to use some HTML markup to make the translation correct according to the rules of grammar and spelling. For instance, <em> may be used for words borrowed from foreign languages, <sup> may be used for ordinals or abbreviations, etc.

  • Functional elements. Developers may want to pass elements as arguments to the translation and create rich language-agnostic UIs. For instance, they may define an <img> element which should be placed inline inside of the translation. Each language will need to decide where exactly the <img> should go.

  Text-Level Elements

  For the first use-case, fluent-dom will now always allow a safe set of text-level elements such as <em> and <strong>. Their contents will always be converted to pure text (no nesting is allowed) and their attributes will be sanitized using a well-defined list of safe attributes.

  hello = Hello, <em title="It's a wonderful world.">world</em>!
  

  Functional Elements

  For the latter use-case, developers may put child elements inside of the element which is the target of the translation. These child elements must be annotated with the data-l10n-name attribute. fluent-dom will look for corresponding child elements defined by the translation and clone them into the final translated result. The cloning preserves functional attributes defined in the source (href, class, src) but destroys any event listeners attached to the child element. (We may be able to relax this limitation in the future.) Safe attributes found on the matching child element from the translation will be copied to the resulting child.

  <p data-l10n-id="hello-icon">
      <img data-l10n-name="world" src="world.png">
  </p>
  
  hello-icon = Hello, <img data-l10n-name="world">!
  

• Refactored error reporting (#160)

• Fixed a minor bug which caused an extraneous retranslation when data-l10n-id was being removed from an element.