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

czosnek

v1.5.47

Published

An html and css template mapping library for bindings

Downloads

25

Readme

Czosnek

An html and css template mapping library

NPM version Gitter

Table of contents

What is it?

This library allows you to save component html templates and create mappings sets of the bindings in those templates. This does not manipulate data in any manner but simply parses the template elements and returns an object containing all necessary info to manipulate the binds

Getting started

The script can be loaded both in the head and in the body. All functionality is automatically loaded as soon as the file is loaded.

 <script src="/(node_modules|bower_modules)/czosnek/czosnek.min.js"></script>

To start using it you must register component templates you will want to use

 czosnek.register("component_name", '<div>{{map}}</div>');

To create the component and its maps object

HTML

<div>
  <component_name></component_name>
</div>

JS

  var componentNode = document.querySelector('component_name');
  var componentMaps = new czosnek(componentNode);

Templates

Templates allow us to register component names to larger sets of html

  czosnek.register("component_name", '<div>{{map}}</div>');

Thus when we use the czosnek constructor an expanded version of this html will be created when a node with the tagname of a registered template is used.

You can also choose to unregister a template later if you need to

czsonek.unregister("component_name");

Fetching Components
============
You can use some useful methods to help in the fetching of components in your html or dom

#### getUnknown (node | html string)
- node: (This allows us to fetch all component nodes inside a passed element)
- html string: (This allows us to fetch all components in an html string, useful for loading component files by name)

#### isUnknown (tag name)
This helps us determine if the tag name in question is a real dom node or not

Mappings
============
Mappings are designated by the typical `{{}}` double curly braces and can be placed anywhere from text, attributes and even element names.

There are a few formats for how these binds can be presented:

#### Standard
`{{name}}`
This is your standard map

#### Insert
`{{>name}}`
This is considered a insert map, something to use for placing data but not binding to

#### For
`{{for name loop component_name}}`
This helps to show where an data list mapping can be constructed

#### Node
`<{{name}}></{{name}}>`
This allows mapping to special nodes meant for dynamic hot swapping

Filters
============
Filters are extra names attached by a `|` character to allow extra functionality

There are a few formats for how filters are presented

#### Standard
`{{name | filter_name, filter_name_two}}`
standard filter names, multiple can be parse when seperated by `,`

#### VFilters
`{{name | (filter_name)}}`
allows for a secondary type of filter names

#### Storage
`{{name | [+filter_name], [-filter_name], [~filter_name]}}`
Allow for maping to storage names. `+` for local storage, `-` for session storage, `~` for model storage

Maps
============
The maps object will give you all required information about your component

#### name
Name of the component

#### template
Template of the component

#### node
Node passed

#### params
Any attributes attached to the node

#### pointers
Any maps from a parent element

#### innerHTML
Any nodes located inside the component

#### expanded
The expanded component template as elements

#### maps
The associate binding maps

Examples
========
#### Creating a simple template replacer

HTML

JS

czosnek.register('custom-input', '<input type="text" placeholder="custom" />');
czosnek.register('custom-component', '<div><h1>Hello</h1><span class="large-yellow">World</span></div>');

czosnek.getUnknown(document.body)
.forEach(function(component){
  var maps = new czosnek(component);
  component.parentElement.replaceChild(maps.expanded, component);
});

How to contribute

If You would like to contribute here are the steps

  1. Clone Repo: Czosnek Github Repo
  2. Install any necessary dev dependencies
  3. build the project npm run build
  4. test your changes don't break anything npm test
  5. Make a pull request on github for your changes :)

License

You can view the license here: License