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

brazejs

v1.7.1

Published

Liquid template engine for the Braze variant by pure JavaScript: compatible to Braze, easy to extend.

Downloads

186

Readme

brazejs

npm npm Build Status Coveralls GitHub issues David David Dev DUB Commitizen friendly semantic-release

A braze compatible Liquid template engine in pure JavaScript. Built on top of liquidjs, with Braze tags/filters/syntax added and incompatible features removed.

Install via npm:

npm install --save brazejs

For detailed usage please refer to liquidjs' original doc.

Difference with liquidjs

Braze's liquid is a subset of Shopify's liquid, hence some incompatible features have to be removed. Braze also has it's own support for some Braze specific tags/filters/output, we add them in as plugin to liquidjs.

Removed

  • filters

    • abs: Braze doesn't support abs

Added

  • Filters

    • Encoding

      | Filter Name | Example | Notes | | --- | --- | --- | | md5 | {{"sample" \| md5}} | | | sha1 | {{"strings" \| sha1}} | | | sha2 | {{"to" \| sha2}} | This is using SHA-256 | | hmac_sha1 | {{"be" \| hmac_sha1}} | | | base64 | {{"encoded" \| base64}} | |

    • URL

      | Filter Name | Example | Notes | | --- | --- | --- | | url_escape | {{"hey<>hi" \| url_escape}} | ⚠️ this uses encodeURI which is slightly different from Braze's implementation | | url_param_escape | {{"hey<>hi" \| url_param_escape}} | ⚠️ this uses encodeURIComponent which is slightly different from Braze's implementation |

    • Property Accessor

      | Filter Name | Example | Notes | | --- | --- | --- | | property_accessor | {{hash \| property_accessor: 'key'}} | Example hash: { 'key' => 'hello' } |

    • Number Formatting

      | Filter Name | Example | Notes | | --- | --- | --- | | number_with_delimiter | {{123456 \| number_with_delimiter}} | ⚠️ this uses toLocaleString which is slightly different from Braze's implementation |

    • JSON Escape

      | Filter Name | Example | Notes | | --- | --- | --- | | json_escape | {{'123"456' \| json_escape}} | ⚠️ this uses JSON.stringify which is slightly different from Braze's implementation |

  • Tags

    • abort_message: abort rendering and output an optional message

      Example:

      {% abort_message() %}
      {% abort_message('aborted due to error') %}
    • connected_content: call an external API

      Example:

      {% connected_content http://numbersapi.com/random/trivia :save trivia :cache 900 :basic_auth <secret_name> %}

      Supported options: :basic_auth, :content_type, :save, :cache, :method, :body, :headers

      For basic auth to work, you'll need to add the username and password into the context object.

      // replace <secret_name> so that it matches your basic auth name in Braze 
      {
          "__secrets": {
              "<secret_name>": {
                  "username": "<your username>",
                  "password": "<your password>"
              }
          }
      }
  • Output

    • ${} support for Personalization tags

      For it to work the attributes need to be added into context

      {
          "first_name": "<my_name>",
          "user_id": "<my_uid>",
          "custom_attribute": {
              "<attr1>": "<val1>",
              "<attr2>": "<val2>"
          }
      }

      Then you can access them in the template:

      {{ ${first_name} }}
      {{ custom_attribute.${attr1} }}
    • Object will be converted to Ruby presentation

      If context is { "obj": {"foo": "bar"} }, liquidjs renders to [object Object], while brazejs renders it to {"foo"=>"bar"}

  • Content blocks

    • Content Blocks is supported

      {{content_blocks.${contentBlockName}}}

      By default the content blocks template is being searched in directories in following order:

        1. current dir
        2. content_blocks under current dir
        3. content_blocks in parent dir
              

      It will also search for file names in this order:

        1. exact match
        2. convert file name to kebab-case
        3. append .liquid
        4. convert file name to kebab-case and append .liquid
              

      It's also possible to configure the root dir and file extension in context:

        {
            "__contentBlocks": {
                "root": "path_to_dir",
                "ext": ".html"
            }
        }
              

      If your content blocks are in more than one roots, you can set an array as the root. Please make sure you give your content blocks different names, otherwise only the first matching content block will be used.

        {
            "__contentBlocks": {
                "root": ["path1", "path2"],
                "ext": ".html"
            }
        }
          

      ⚠️ At time of writing, Braze only support nesting 2 levels of content blocks

Use cases