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

icechunks

v1.1.1

Published

A Stupid Simple JS Templating Module

Downloads

9

Readme

icechunks

A Stupid Simple JS Templating Module, for NodeJs and Clientside applications

What makes iceChunk special?

Can you format JSON? Then you can make an iceChunks template. When you make an ice chunks template, you define a tag name, tag attributes, and tag content. ice chiunk will render your HTML from that information. Example:

var myTemplate = {

    header: {
        tag: 'div',
        att:{
            class: 'header',
            id: 'header'
        },
        content: "<h1>My Header</h1>",
    }

};

In the Above example we define a template. Then we define header which will render to:

<div class='header' id='header'><h1>My Header</h1></div>

The obvious question is, isn't it easier to write that as HTML from the get go?

The answer to that is, well, yes. But The thing about JSON is that you can parse it quickly and easily. So while some templating languages focus on inserting content into empty slots in prebuilt templates, iceChunks makes it easy to manipulate, nest templates, and even create them on the fly, in memory. Since the template is nothing more than a Javascript object, whats stopping you from generating the template itself based on your data. That level of flexibility gives you the freedom to run wild with your architecture and makes integrating with existing system or external services a breeze.


var myTemplate = {

    header: {
        tag: 'div',
        att:{
            class: 'header',
            id: 'header'
        },
        content: {
            headerText:{
                tag:'h1',
                att:{
                    class: 'main-headet-text',
                    id: 'main-headet-text'
                },
                content:'My Header Text'
            },
            headerSubtext:{
                tag:'h2',
                content:'My Header Sub Text'
            }
        },
    }

};

var renderedContent iceChunks.renderTemplate(myTemplate);

the content parameter

content can be a string, an object or an array.

String - the content will be rendered directly to the defined element. Object - Thusis how we next more elements inside elements Array - this is how we loop with iceChunks. so we can add string or objects to the array and it will render accordingly

Directly Rendering Elements

you can also directly render elements with paramTag() and basicTag()

All these functions do is take a tag name, attributes and values, and the content of the tag then return the HTML.


What about variables inside template content? Easy! use {{}} and call replaceContentVars(<template>, <object defining variabels with key value pairs>);


You can also set content of template elements using predfiened objects with setTemplateObj(<template>, <key value pairs for content>);


And thats the skinny of it of iceChunks