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

frytki

v1.5.47

Published

For the love of fries

Downloads

13

Readme

Frytki

Unique data binding library for dynamic fast data binding

NPM version Gitter

Table of contents

What is it?

This library allows you to use event listeners in such a manner as standard events to listen to changes on any data set or data structure combining the methodology of arrays and objects as one.

Installation

This libray can be installed using:

  • NPM : npm install frytki --save
  • Bower : bower install frytki --save
  • Yarn : yarn add frytki

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)/frytki/frytki.min.js"></script>

To start using it is as simple as just passing data or json into the frytki method

Object

 var obj = { arr: [20, 40, 50], obj: { num: 500, str: "string" } };
 var data = frytki(obj);
 
 data.addEventListener('num', console.log);

JSON

 var json = '{ "arr": ["20", "40", "50"], "obj": { "num": "500", "str": "string" } }';
 var data = frytki(json);
 
 data.addEventListener('num', console.log);

When listening for data events there are two different types of listeners, the pre data update listener and the post data update listener. By simply adding update to the end of any listener your event will fire post data update meaning the object will have already changed and updated

 data.addEventListener('numupdate', console.log);

Mixed objects

Frytki objects act both as arrays and as objects allowing for unique and quick non parsing abilities. Array methods will only effect numerical indexes as an array should whil object methods effect all properties as they should.

Example:

var obj = { obj: { num: 500 } };
var data = frytki(obj);

data.push("text");

console.log(data.keys()); // (2) ["0", "obj"]
console.log(data.length); // 1

Data binding

Data binding allows you to listen for the changes of any changes on an object the same way you would listen to an event on the dom, this includes bubbling and preventing default changes. Data binding comes in two forms a pre data update and a post data update. Post data means the object has already been updated with the new value and can onlybe reverted by changing again. WHile a pre update event can prevent the value from being set.

Bubbling:

var obj = { obj: { num: 500, inner: { str: "string" } } };
var data = frytki(obj);

data.addEventListener("str", console.log);

data.obj.inner.str = "char"; // changeEvent

Prevent Default:

  var obj = { obj: { num: 500, inner: { str: "string" } } };
  var data = frytki(obj);

  data.addEventListener("str", function(e){ e.preventDefault(); return false; });

  data.obj.inner.str = "char";

  console.log(data.obj.inner.str); // "string"

Listening to events also allows for listening to when new data is created or deleted

var data = frytki();
data.addEventListener("create", console.log);
data.addEventListener("delete", console.log);

data.add("text","string") // eventObject
data.del("text") // eventObject

Functions

All functions you would find on an object or array are included in the frytki mixed data object, special not on Array mutation functions, these methods will not call the changes until they have finished process the changes for the data and then will fire all associated change events.

Standard methods that allow you to interact with your observable data, not using these methods will result in non observable data

  • add|create(key, value) (required to add new observable properties)
  • set(key, value) (can be used to set or create a value)
  • del|remove(key) (deletes an observable property and all associated events)

Handling JSON

Built in parsing methods allow for easy conversion of JSON data from and to observable data. using JSON.stringify even on circular objects will result in a clean json string that replaces circular values with "[Circular key_name]"

 var json = '{ "arr": ["20", "40", "50"], "obj": { "num": "500", "str": "string" } }';
 var data = frytki(json);
 
 or
 
 var data = frytki.parse(json);

Pointers

Pointers allow us to reference outside objects within our own data object and not change the structure. Events are also passed to these other objects but when removed, the events are also removed with them.

  var obj = { obj: { num: 500, inner: { str: "string" } } };
  var outsideObj = { text: "writing" };
  var data = frytki(obj);

  data.addPointer("outside", outsideObj, "text");

  outsideObj.text = "reading";

  console.log(data.outside); // "reading"

Event object

The event object that is passed to each of these fired events allow for similar functionality as that of a standard DOM event listener

event.preventDefault()

When called from a pre data update event, this method can be used to prevent the data from updating

 data.addEventListener('num', function(e){ e.preventDefault(); });

event.stop()

When called from a pre data update event, this method can be used to stop the post data update events from firing

 data.addEventListener('num', function(e){ e.stop(); });
 
 // this will not fire
 data.addEventListener('numupdate', console.log);

event.stopPropogation()

When called no bubbled listeners after the current one will fire, including post data updates

event.stopImmediatePropogation()

When called no listeners after the current one will fire, including post data updates

event.value

Shows the value that is being set

event.oldValue

Shows the previous value of the item being set

event.srcObject

The original object that fired the event

event.parent

The parent object of this property if any

All other event properties follow the same guideline as a standard Event object

Examples

Updating dom from json data

var json = fetchDataFromServer();
var data = frytki(json);
var node = document.querySelector(node);

node.innerHTML = data.title;

data.addEventListener("titleupdate", function(e){ 
  node.innerHTML = e.value;
});

How to contribute

If You would like to contribute here are the steps

  1. Clone Repo: Frytki 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