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

t5

v0.0.9

Published

T5 is a templating engine focusing on client-side modification and some other groovy things

Downloads

9

Readme

T5

T5 is a templating engine designed to be very different.

Typically you do this:

data + template => output

But this only works in one place and it doesn't work well when you want to dynamically change the template but not rewrite the DOM (spoiling any CSS effects etc).

T5 does this:

template => create-function + management-class

Those two outputs use the same data (if you want to play safe):

  • Create Function - This is what you typically use and it'll spit out HTML with your data added in.

    Note: This output will have t5-x classes and some comments and the odd <span class="t5-x"><!-- [t5] base64 --></span> and it's perfectly safe

  • Management Class - This will take in your DOM once rendered on-screen and allow you to dynamically change the data and update affected elements (kind of like VueJS, an inspiration for this project)

This means that if you do not use XML/HTML or the DOM, this is pretty useless and you shouldn't use it.

This will be used in WhatTheForms when this has reached a point where it is stable enough to do so.

More soon haha, this is currently very WIP

## How to use

var t5 = require("t5");
tpl = t5.compile( "html string here" );
var buildFunction = tpl.build();
var manageClass = tpl.manageClass;

buildFunction is a function which takes two parameters ent and data. This is because the nodejs modules don't work too well with dynamically creating functions :(

manageClass is a string which will generate a class based on the name attribute (defaults to TPL), which can be initialised on the client like so:

var ins = new TPL( element, data );

This allows you to dynamically change stuff.

The result is a very limited T5Result class to ensure all of the ugly-ness is hidden away and only useful results are provided for you to use.

Building

This requires gulp and running npm install, but the default gulp task builds everything required. BUT thanks to browserify, you need to use

./build.sh

Tests

You should have Mocha installed, but we use CoffeeScript, so run

./runtest.sh

If you can't use sh then use the command inside of it