ryanflorence/snack

A tiny, cross-browser, JavaScript library.

snack.js

... because sometimes, all you need is a snack.

¡WARNING!

I don't maintain this, so if you use it, you have assumed maintenence.

Features

Tiny!

• ~3.4kb! (minified, gzipped)

Elements

• Use any selector engine. Ships with multiple builds (QSA, Qwery, Slick, Sizzle)
• Several element methods
• API to add more element methods

Events

• Cross-browser DOMContentLoaded (domready)
• Cross-browser DOM events
• Event Delegation (with or without a selector engine)

Pub/Sub

• Publisher objects for application communication

AJAX

• Cross-browser AJAX
• JSONP

Utilities

• Shallow object merge with snack.extend
• Prototypal inheritance with Object.create
• A few other utilities (only those snack uses)

Documentation

Snack is very well documented. In the repository is a docs folder. Simply open docs/index.html in your browser or visit the Snack Homepage.

Contributing / Testing / Building Snack

Submodules (selector engines)

Because Snack ships with several selector engines, there are submodules for each one. You'll need to first update them to build or test Snack:

From the root of the repository:

$ git submodule init
$ git submodule update

Tests

The tests require node >= 0.4.6, npm >= 1.0.0, and submodules to be updated (see above).

To run the tests, install dependencies and fire up the server (used for all the ajax stuff).

$ npm install .
$ node server.js

Building

Build snack like so:

$ ./build

The tests do not require you to build snack.

Inspiration and code snatching from:

• MooTools (c) Valerio Proietti, MIT license
• jQuery (c) John Resig, Dual license MIT or GPL Version 2
• Zepto (c) Thomas Fuchs, MIT License
• ContentLoaded (c) Diego Perini, MIT License

License

MIT Style license.

Copyright

Copyright (c) Ryan Florence

snack's Issues

snack.wrap on non-existent element returns length of 1

When I run snack.wrap on an element that doesn't exist in the DOM I expect it to return an object with length of zero (0). Alternatively "undefined". This is needed to test if an element exists.

This is what I get when I run snack.wrap on an non-existent element today:

0 []

id 16

length 1

addClass function()

attach function()

data function()

delegate function()

detach function()

each function()

fire function()

removeClass function()

Your indexOf fallback doesn't follow ES5

I noticed your indexOf fallback doesn't follow ES5 either.

Snack.Request Callback

Regardless of the status code a server can still send back a response. This allows someone the response being the error message from the server, in the case of validation for say. Rather then sending a request of 2xx, and parsing it to see if there is an error like message versus a success message.:

if(err) {
    alert(res); 
}

For example in PHP, the server has a change to pass the validation message rather then response being undefined see: https://github.com/iammerrick/Sleepy/blob/master/classes/sleepy/core.php#L175-182.

Currently, if it is not a successful request snack has the body as undefined. I don't know if this is the defacto standard in JS. If so please ignore this. :-)

Merrick

request sends [object Object] for deep objects

snack.request({
  data: {
    something: { foo: 'bar', baz: 'quux' }
  }
})

Will send data: [object Object], forcing form data to be flat.

Please remove me..

I'm such a noob at github.

Event listener bug

Hei, I've spent some time debugging some weirdness and tracked it down to snackjs code

snack.listener = function (params, handler){
if (params.delegate){
params.capture = true
_handler = handler
handler = function (event){

it should be "var _handler = handler" instead.

isArray can leverage native Array.isArray.

isArray can leverage native Array.isArray.
Native equiv code is toString.call(value) == '[object Array]'
(snippet assumes the variable var toString = {}.toString;)

assignment to variable without var keyword

On line 34 for (key in arguments[i]) should be for (var key in arguments[i]).

AJAX bug: synchronous requests only

There is an error in the request.send method. Therefor every request is synchronous. You have to change

xhr.open(method.toUpperCase(), url, open.async, options.user, options.password)

to

xhr.open(method.toUpperCase(), url, options.async, options.user, options.password)

Snack qwery JS conflicts with jquery

Hi,

we are using snack-qwery-min.js file to elements wrapping and handle the events in DOM. We encountered that when we have multiple jquery files, snack.wrap returns irrelevent results insteadof elements.

I am just using the fallowing
var ele = snack.wrap(".className");

It is returning the results in console.
[
c.fn.c.init[1]
, c.fn.c.init[1],
c.fn.c.init[1], c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
,
c.fn.c.init[1]
]

Please suggest on this.

Thanks
Govindarajulu

Object doesn’t support this property or method

Hi,

Snack.js core functions will not work in IE browser if we have snack.js and mootool.js in the same page.

We use snack.js for attaching events, adding/removing the classes,
wrapping the DOM elements and JSONP.

If we have snack and mootools files in the same page, core functions like snack.attach,snack.bind,snack.wrap,snack.addClass,snack.removeClass
do not work on IE and mozilla browser.

IE browser shows error as “Object doesn’t support this property or method.”

Please help me on this.

Thanks
Ramesh

Feature request: Cross browser way to get/set inner content

be it a placeholder, the content of a

tag or the value of an input field.

Error passing snackjs through google closure compiler

JSC_VAR_ARGUMENTS_SHADOWED_ERROR: Shadowing "arguments" is not allowed at line 661 character 27
fire: function (namespace, arguments){
^
JSC_VAR_ARGUMENTS_SHADOWED_ERROR: Shadowing "arguments" is not allowed at line 674 character 52
function listenerMethod(wrapper, method, namespace, arguments){
^

Changing the parameter name to anything else solve the problem ex: "arguments" by "params"

JSONP Invalid Labels

The same JSON, but on different servers causes invalid labels error.

This is version 1, which works perfectly:

snack.JSONP({
  url: 'http://jsonip.appspot.com/',
  key: 'callback'
}, function (data){
    alert(data.ip);
});

Here is version 2 using the same JSON data, but hosted on a different site, and doesn't work:

snack.JSONP({
  url: 'http://www.rentedsmile.com/ip.php',
  key: 'callback'
}, function (data){
    alert(data.ip);
});

Snack.deferred

Would it be possible to add deferreds to snackjs? snack.request could then return that instead. It's such a common pattern, that it would make sense to be part of the core. Currently I'm using an external lib for that. Just an suggestion.

SCRIPT5007: Function.prototype.apply: argument is null or undefined

Using snack-qwery 1.2.3 along with Bonzo for a very minimal html widget, no other libraries are used except a Base64 encoding script for working with an api.

It works fine in all browsers, except IE 8 rendering mode inside IE 9.0.8112.

Error:

SCRIPT5007: Function.prototype.apply: argument is null or undefined
line 677 character 9

Prevents our script from working.

Snack.Wrap

Maybe this is desired behavior, but

var form = snack.wrap(document.getElementById('shorten-form'));

returns an array of the input elements and not the form itself. Is this how it is intended to work, grab all child nodes of whatever element is passed in? If so perhaps the example could show what the expected output of d00d should be.

Thanks!

tests/index.html has incorrect path to server.js

https://github.com/rpflorence/snack/blob/master/tests/index.html#L35 says run node tests/server.js from the project root -- but it's just node server.js.

Object.create fallback isn't ES5 compliant.

The Object.create fallback you use doesn't follow ES5 and really can't.
Instead of putting that method on Object which might cause other scripts that weak inference it like if (Object.create) { to get a false positive, you should simply make it a utility method like beget.

snack.bind has unexpected behavior on "message" event

I have an embedded iframe that uses postMessage to communicate with my javascript file on the 3rd party site. When adding a listener to the code for receiving this message I used:

snack.listener({
node: window,
event: "message"
}, snack.bind(this.receiveMessage, this));

When my receiveMessage got the event it was always the same event. I debugged down into the bind code and everytime someone was calling postMessage that MessageEvent was getting appended to args via:

push.apply(args, arguments)

So when I would bind my function it kept getting the original MessageEvent instead of the new one.

Is this the intended behavior that I should always grab the last item in the arguements object in by bound functions?

snack.toQueryString on an object with null values errors out.

Input:

snack.toQueryString({'a':10,'b':null})

Result:

TypeError: obj is null

Probably needs to prune out nil values.

this is just a test

I needed a repo

const what = "does this look like?"

snack.ready() not working?

Tried it on Firefox 7 and Chrome 17. Seems to somehow be related to my async loader yepnode. Jquery loads fine though

Snack addons

Hi!

snack is awesome slick library, I've created a small collection of snack addons here:
https://github.com/artvolk/javascript-snack-addons/

Anybody interested?