Negating Past Mistakes

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    mjml-fluent
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    mjml-fluent

    A component for localizing other MJML components using Fluent.

    Setup

    This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

    npm install mjml-fluent
    

    Or for installation via yarn:

    yarn add mjml-fluent
    

    (You may also be interested in installing mjml-test-library to test the output of your MJML components.)

    Once installed you need to register the component, instantiate the localizer with your Fluent bundles, and set it as the active localizer:

    import { registerComponent } from 'mjml-core';
    import MjLocalize, { MjmlLocalization, setLocalizer } from 'mjml-fluent';
    
    registerComponent(MjLocalize);
    
    const localizer = new MjmlLocalization(generateBundles());
    setLocalizer(localizer);

    With this you should now be able to use the component in your MJML templates.

    Examples

    Use the <mj-localize> tag to localize the contents or attributes of MJML components.

    Basic text

    basic-text = This is some localized basic text
    <mj-localize id="basic-text">
      <mj-text>This is some basic text</mj-text>
    </mj-localize>

    Would produce something like:

    <div
      style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"
    >
      This is some localized basic text
    </div>

    Text with inner HTML

    rich-text = This is a localized <a data-l10n-name="link">link</a>
    <mj-localize id="rich-text">
      <mj-text
        >This is a basic
        <a data-l10n-id="link" href="http://mozilla.com">link</a></mj-text
      >
    </mj-localize>

    Would produce something like:

    <div
      style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"
    >
      This is a localized <a href="http://mozilla.com">link</a>
    </div>

    Image with attributes

    image-with-attrs =
      .alt = This is a localized image alt
      .title = This is a localized image title
    <mj-localize id="image-with-attrs" attrs="alt,title">
      <mj-image
        src="image.png"
        alt="This is basic image alt text"
        title="This is basic image title text"
      />
    </mj-localize>

    Would produce something like:

    <img
      alt="This is a localized image alt"
      height="auto"
      src="image.png"
      style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
      title="This is a localized image title"
      width="550"
    />

    Button with arguments

    button-with-args = This is { $type } button text
    <mj-localize id="button-with-args" args='{ "type": "localized" }'>
      <mj-button>This is basic button text</mj-button>
    </mj-localize>

    Would produce something like:

    <table
      border="0"
      cellpadding="0"
      cellspacing="0"
      role="presentation"
      style="vertical-align:top;"
      width="100%"
    >
      <tbody>
        <tr>
          <td style="font-size:0px;word-break:break-word;">
            <div
              style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"
            >
              This is some localized basic text
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    Attributes

    The <mj-localize> tag supports three attributes:

    Name Description Required? Default
    id The ID to look up the Fluent value with Yes
    attrs A comma-separated list of attributes to replace No ''
    args A JSON string of values to interpolate into the localization No '{}'

    Issues

    Looking to contribute? Look for the Good First Issue label.

    🐛 Bugs

    Please file an issue for bugs, missing documentation, or unexpected behavior.

    See Bugs

    💡 Feature Requests

    Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

    See Feature Requests

    LICENSE

    MIT

    Keywords

    none

    Install

    npm i mjml-fluent

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    21.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • jodyheavener