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

pointy

v0.1.0

Published

a template language that embeds JavaScript in HTML

Downloads

2

Readme

Pointy is a template language for embedding JavaScript in HTML.

It was heavily inspired by the Razor template language.

It works with both Node.js and in the browser.

Installation

Use npm or download the source from GitHub.

With Node, just npm install pointy and then require('pointy') in your code.

In the browser, just include pointy.js and there will be a global variable named pointy that you can use.

Syntax

Expressions are evaluated by prefixing them with the @ character:

Hello, @user!

Expressions can be continued with dots, parentheses, or brackets:

Hello, @user.names[0].toUpperCase()!

Expressions are terminated as soon as a non-identifier character is encountered (! in the previous example).

If you need more control, use parentheses:

Hello, @(user.name.first + ' ' + user.name.last)!

Expressions that start with if, for, and while are interpreted as statements and terminated with }. Inside the braces, the parser figures out if a line is code or content automatically:

@if (user.authenticated) {
    var name = user.name.first;
    <p>Hello, @name!</p>
}

Use the <text> tag to surround plain text:

@if (user.authenticated) {
    var name = user.name.first;
    <text>Hello, @name!</text>
}

The <text> tag is stripped does not appear in the output.

You can also use @: to indicate that the rest of the line is plain text:

@if (user.isAuthenticated) {
    var name = user.names[0].first;
    @:Hello, @name!
}

For more control over statements, use braces with your @ signs:

@{
    // Any number of JavaScript statements can go here.
}

See the examples folder for more examples.

API

The easiest function to use is pointy.render(source, data). It parses the template source, compiles it into a function, invokes the function with the data, and returns the rendered output:

var html = pointy.render(source, data);

To cache the compiled functions, use the pointy.compile(source) function which takes in the template source and returns a function that accepts the data and returns the rendered output:

var fn = pointy.compile(source);
var output = fn(data);

This is compatible with Express so you can register the pointy module as a template engine:

app.register('.jshtml', require('pointy'));

Tests

With Node.js:

npm install --dev
npm test

In the browser: test/test.html