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

@elvoline/twig

v2.1.7

Published

Twig.js renderer for Elvoline

Downloads

37

Readme

npm version build status codecov

About

This is a Twig.js renderer customized for use on Elvoline.

Added features are:

  • always-on promise support
  • deferred template parsing
  • render hooks
  • global variables
  • automatic DOM creation
  • i18n

Docs

Documentation for Twig features is available in the twig.js repo on Github.

Usage

Install using npm:

$ npm install --save-dev @elvoline/twig 

jQuery and Twig are required peer dependencies:

$ npm install --save-dev jquery twig

Rendering a twig template:

import renderer from '@elvoline/twig';

const template = renderer({
	'data': '<p>it renders {{ text }}</p>',
});

const promise = template.render({
	'text': 'twig'
});

promise is going to be fulfilled with a jQuery collection of DOM elements.

promise.then((elements) => $('body').append(elements));

Adding hooks

import { addHook } from '@elvoline/twig';

addHook((elements) => {
	// do any jQuery operation on elements
});

Hooks are run before the promise is fulfilled.

Adding globals

import { addGlobal } from '@elvoline/twig';

addGlobal('varName', 'value');
addGlobal('params', {
	'foo': 'bar'
});

You can also check the previously added globals using the getGlobals() export.

Translations

The system is based on gettext to maintain compatibility with the PHP renderer. Keys for the translations are hashed to keep the front-end bundle small.

Our extraction and conversion scripts are not published but you can easily convert your .po files into a .json format using gettext-parser.

Singular translations are a JSON stringified string, plural translations are a JSON stringified array of two (or the number of plural forms the target language has) strings. Keys are always hashed from the singular form.

Here is an example of how to set the translations:

import { hashCode, setTranslations } from '@elvoline/twig';

setTranslations({
	'plural': {
		'forms': 2,
		'expression': 'n != 1',
	},
	'translations': {
		'map': {
			[hashCode(JSON.stringify('foo'))]: JSON.stringify('bar'),
			[hashCode(JSON.stringify('value and {{ var }}'))]: JSON.stringify('moo and {{ var }}'),
			[hashCode(JSON.stringify('single'))]: JSON.stringify(['singularized', 'pluralized']),
			[hashCode(JSON.stringify('single and {{ var }}'))]: JSON.stringify(['singularized and {{ var }}', 'pluralized and {{ var }}']),
		},
	},
});

You can also pass a promise to setTranslations(), rendering will be deferred globally until the promise fulfills with the translations.