leaverou / bliss

Blissful JavaScript

Bliss: Heavenly JavaScript

blissfuljs.com

Want to use Vanilla JS but find native APIs a bit unwieldy? Bliss is for you.

Install

If using npm:

npm install blissfuljs --save

If not using npm, no worries! Just download your preferred Bliss bundle from http://blissfuljs.com

Build

npm install
gulp

Test

npm test

Contribute to Bliss!

• Please follow the existing code style.
• Do not add new methods before consulting.
• If editing Bliss, do not edit bliss.js! It’s auto-generated by gulp. The source files are bliss.shy.js and bliss._.js.
• Remember, code simplicity, readability and conciseness matters a lot for this project. Often juggling the three can be tricky.
• Right now what Bliss badly needs is tests. If you want to contribute, please consider contributing tests! See here for details.

Browser Support

(Assuming use of polyfill.io alongside)

✔	✔	✔	9+ ✔	✔	6.1+ ✔

bliss's Issues

z-index issue on bliss site

in Chrome 47.0.2526.73 (64-bit)
there is a z-index issue with the stripes under the code snippets.

Locally i do not see this issue. It must have been resolved but not deployed.

Error when using bliss + underscore + browserSync (liveReload)

The error seen when using the browserSync - stops working liveReload, in its absence, there is no error.
Please fix as soon as possible :)

The text of the error:
Uncaught TypeError: Cannot read property 'listeners' of undefined
A block of code:
...
// Hijack addEventListener and removeEventListener to store callbacks
...
var listeners = this[].bliss.listeners = this[].bliss.listeners || {};
...

ps: thanks for such a wonderful library! :)
pss: please add versioning for convenience

Tests for $.before()

Working on this.

Opt for getElementById when applicable?

In the name of optimization, would it make sense to allow the $() method to check the passed in argument to determine if getElementById is most applicable?

https://jsperf.com/getelementbyid-vs-queryselector/218

The question would be, does the checking of the argument against a regex defeat the purpose of optimizing?

Creating an element with $.create passing in `tag` adds a `tag` attribute

Creating an element like this:

$.create({tag: "span", className: "extra"});

results in the following element:

<span tag="span" class="extra"></span>

The alternative invocation works as expected:

$.create("span", {className: "extra"});

<span class="extra"></span>

The things you find while writing tests!

Helper to manage function arguments

This is a very frequent pattern in Bliss: A function which accepts either separate arguments or objects which provide the same values en masse.
Here are a few examples:

• $.delegate() (2 levels of this!)
• $.lazy()
• $.live()
• $.set()
• $.once()
• $.add()

Also, several others that might benefit from similar handling, e.g. $.events().

I was thinking, it would be nice to have a small helper to handle these cases, so that the functions themselves are only defined for the case of having everything as separate argument, and the helper takes care of looping if the argument is an object instead.
It doesn't have to handle nested cases of this, since that only happens in $.delegate(), and we could apply the helper twice there.
That way, not only the Bliss code will be simplified, but also our users get a helper function that might help them on their own code too.
I spent some time thinking about this before releasing Bliss, but couldn't come up with a good idea for a good API for such a helper. Let’s brainstorm in this thread if you think it's worthwhile!

Test for $.events

Hi again,
I must be really dumb lol.
So, i test $.events
Right now,i only tested with the global syntax ( $.event(subject, handlers) )

describe("$.events", function() {
    it('exists', function() {
        expect($.events).to.exist;
    });
    describe("use with global", function() {
        it("Set multiple event listeners on an element based on element", function(done) {
            var subject = document.createElement("input");
            subject.type = "text";
            subject.id = "test";
            document.body.appendChild(subject);

            var clone = document.createElement("textarea");
            clone.addEventListener("input", function(e){ done(); });
            clone.addEventListener("click", function(e){ done(); });
            $.events(subject, clone);

/*          var ev = document.createEvent("MouseEvent");
            ev.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            subject.dispatchEvent(ev);*/
            subject.value = "test";
        });
[...]

So the test is a success with the click event, but failed when i just change the value of the input.
If it was copying the events from the element, the test should pass with click event and input event.

The input event is implemented on both input and textarea. doc

I also tried with my own handler (not cloning from an other elements) and it didn't work at all.

        it("Set multiple event listeners on an element", function(done) {
            var subject = document.createElement("input");
            subject.type = "text";
            subject.id = "test";
            document.body.appendChild(subject);

            $.events(subject, {
                'oninput onclick': function(e){ done(); }
            });

            var ev = document.createEvent("MouseEvent");
            ev.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            subject.dispatchEvent(ev);
        });

I don't know if i do things badly or i am just unlucky but i'm not really helping right now, i can't make a single test work :/
Sorry guys.

Need Help for testing

Hi, i wanted to contribute so i decide to test the Events.
But i can't figure it out what i'm doing wrong here :

describe("$.delegate", function() {
    it("exists", function() {
        expect($.delegate).to.exist;
    });
    it("add event on children of subject", function() {
        var test = false;
        var subject = document.createElement("ul");
        subject.id = "tete";
        var inside = document.createElement("li");
        subject.appendChild(inside);

        document.body.appendChild(subject);
        $.delegate(subject, "click", {
            li: function(){
                console.log("te");
                test = true;
            }
        });
        $('#tete li').click();
        expect(test).to.be.equal(true);
    });
});

My file called "DelegateSpec.js" in the folder "tests/Events/" and i get this error by karma:

TypeError: 'undefined' is not a function (evaluating '$('#tete li').click()')
            at F:/Web/bliss/tests/Events/DelegateSpec.js:19

I'm quite new at testing (and already hate that :-P), so be nice with me please :-)

Tests for Objects & Arrays

Ill start with all and go from there. Ill pull request off my branch after i finish up tests for each of these methods.

Not that I'm reserving all of this, just opening an issue for where I would like to work.

for those who have been irreparably damaged by Java-like languages.

so funny...

Karma Reporter

@LeaVerou has mentioned it would be nice to have an HTML reporter where users can re-run the tests in the browser. I was looking at something like this: https://www.npmjs.com/package/karma-jasmine-html-reporter.

@dperrymorrow - Seen this anywhere with karma? Ideas.

$.once does not remove event handlers for multiple elements

See #75

Bliss logo on docs page should link to home page

Seems intuitive. There's currently no way to go back to the home page.

Write tests for $.style

Just creating issue so everyone knows I'm taking care of it.

Let elemens be created using the <tag> syntax

jQuery:
$('<div>')

wouldn't sacrifice perf too much if only the first char is checked expr[0] === '<', call create(expr.slice(1, -1)

Tests for $.inside();

Working on this next.

Project Structure

There have been a lot of conversation so far relating to the project structure, so I'm going to summarize them all here.

1. #59: Src and dist structure.
2. #79: Bower package not found.
3. #71: Karma Reporter

We have the following criteria we'd like to solve:

1. Tagged releases on Github and NPM.
2. Src and dist folders in the project.
3. Lea would like the latest version for download at any time.
4. Move website JS files to separate directory?

We also don't want the project to be more work than it already is. So let's take a look at this post-commit hook by Domenic: https://gist.github.com/domenic/ec8b0fc8ab45f39403dd.

I'd like to get SauceLabs or Browserstack set up as well. We can get a free account since this is open source.

Last, we want to consider the possibility of being able to execute the karma tests in-browser, as part of the gh-pages branch. Currently, I only know of QUnit doing this well. Haven't really seen solutions for Karma.

Something can't fit on the page and there is a horizontal scrolling

But I'm too lazy to figure out what's wrong.. :)

Calling $.create with no arguments creates element

When running this code:

var myElement = $.create();

myElement is an Element with tagName UNDEFINED (like <undefined></undefined>).

It should probably either throw a TypeError complaining about the number of arguments (like document.createElement), or create a div, like passing in an empty object does.

Tests for $$()

Placeholder for myself to work on testing the $$() API.

Tabs?

so is this project's code style tabs? I see that the bliss.js file has tabs instead of spaces. @LeaVerou should all code follow this convention?

Any other conventions we should be aware of?
One possibility to make sure everyone adheres to your conventions is to add a lint / hint runner to Karma.

for example: adding https://www.npmjs.com/package/karma-jshint-preprocessor to the test runner with a .jshint file enforcing the rules.

Tests for $.attributes

I'm working on this now.

Tests for $()

Putting this as a placeholder. I'm starting work on these.

Tag releases

Please use the git tag for marking any releases, that might be made available to npm or other 3rd party managers.
Using tags make it easier to inspect any changes between the given tags.

Test case for $.once

Looking into the source code I've found an undocumented method once and I've tested it: in this example I want to move one div twice, but I want to execute the transitionend handler just once.

Expecting result: the number inside the foobardiv should be increased one time in all browsers
Actual result: the number inside the div increases twice on Chrome 47.0.2526.80 (64-bit) and Safari 9.0.2 (9537.86.3.9.1) and increases properly once on Firefox 42.0 on a MacOSX 10.9.5 (see screenshot below about the comparison between Chrome and Firefox)
Hint: it seems the problem is related to 'webkitTransitionEnd transitionend' event type string: if I specify only 'transitionend' the demo works as expected in all the tested browsers.

---

---

This is my test case

<html>

    <head>
        <style>
        div {
            border: 3px #79b solid;
            display: inline-block;
            padding: 1em 3em;
            transform: translateX(0);
            transition: all 3s;
        }
        </style>
    </head>

    <body>

        <div id="foobar">0</div>
        <script src="bliss.min.js"></script>

        <script>
        $.ready().then(function() {
            var foobar = $('#foobar');
            foobar._.style({
                transform: 'translateX(160px)'
            });

            /* this is executed twice */
            foobar._.once('webkitTransitionEnd transitionend', function l(evt) {
                this.textContent = +this.textContent + 1;
                this._.style({
                    transform: 'translateX(0)'
                })
            });

            /* tried also this */
            /* foobar._.once({
                'webkitTransitionEnd transitionend': function l(evt) {
                    this.textContent = +this.textContent + 1;
                    this._.style({
                        transform: 'translateX(0)'
                    })
                }
            }); */


        });
        </script>

Viewing method implementation for `$` and `$$` doesn't work as expected

I love this feature of being able to view the implementation right in the documentation!

There is a bug where the documentation for $() is actually showing the implementation for $$(), and the documentation for $$() shows undefined.

This is because the code that finds the source looks for the method name on the $ object and the $.sources object.

This works fine for all of the other methods, but for these in particular, it doesn't work:

$["$"];  // => The $.$() method, also known as $$()
$["$$"]; // => Undefined

Endless recursion loop on Internet Explorer

Loading of bliss with a "script" tag in a html file fails on Internet Explorer versions 9 - 11.

I tried to debug this and found that the problem is in line 634 of bliss.js:

Object.defineProperty(this, _, {

when execution arrives this line it enters an endless recursion loop and eventually throws "Out of stack space".

$.once() needs documentation

See #75

array merge

ever needed to merge 1 or more arrays?

adding this to the prototype is tacky, and would necessitate its own file. instead provide a function that takes infinite arguments. heres the prototype:

var merge = function(){
    var args = [],
    result = [],
    unique = function(a,b) {
        var a = a.concat(b);
        for(var i=0; i<a.length; ++i) {
            for(var j=i+1; j<a.length; ++j) {
                if(a[i] === a[j])
                    a.splice(j--, 1);
            }
        }
        return a;
    };
    Array.prototype.push.apply(args,arguments);
    for(k=0;k<args.length;k++){
        result = unique(result,args[k]);
    }
    return result; 
};

if you feel like its useful, just use it. no attribution necessary.

Errors in Safari

Project Home page http://blissfuljs.com/ crashes safari
http://d.pr/i/1lK4X

Safari 9.0.1
OSX 10.11.1 (El Capitan)
MacBook Pro (13-inch, Mid 2012)

Calling `set` on arrays with an object fails

As an example, try this code in the console on the Bliss Docs page:

$$("h1")._.set({className: "title"});

This fails with the following error in Chrome:

Uncaught TypeError: Cannot read property 'map' of undefined
    at HTMLHeadingElement.$.Array.(anonymous function) (http://blissfuljs.com/bliss.js:575:25)
    at http://blissfuljs.com/bliss.js:576:44
    at Array.map (native)
    at Object.$.Array.(anonymous function) [as set] (http://blissfuljs.com/bliss.js:575:26)

The error points at this line:

bliss/bliss.js

Line 575 in 10bd9ad

return this.subject.map(function(element) {

There is a failing test for this included in the tests for $.set, over at #21.

Tests for $.live

I'm working on this

Test for $.clone

becase you do not only live once!

Feature request: Support `element.createChild` (and maybe a few other DOM methods)

After working on the Chrome DevTools source, what I miss most in vanilla JS is element.createChild and a few related methods.

It turns this:

var span = document.createElement("span");
span.classList.add("class-name");
span.textContent = "Hi!";
document.getElementById("parent").appendChild(span);

into:

document.getElementById("parent").createChild("span", "class-name").textContent = "Hi!";

Tests for $.properties

I'm starting on this.

Should we move to a src and dist directory structure?

It's not high priority but right now even changing the gulp file triggers the watch. It would probably be better to move the src in src directory and generated files in dist directory?

Tests for $.around

I'm starting work on this.

Bliss-ful events?

I’d love to see simple, chain-able events. This is a proposal I’ve been kicking around. Do you think Bliss would be a good home for it?

Chaining events:

$element.on('keypress').then(function (event) {
    // log the key code each time a key is pressed
    console.log(event.keyCode);
}).then(function (event) {
    // then log whether the shift key is pressed
    console.log(event.shiftKey);
});

---

Filtering events:

$element.on('keypress').filter(function (event) {
    // pass the keypress event forward if the shift key is active
    return event.shiftKey;
}).then(function (event) {
    // then log the key code (if the shift key is active)
    console.log(event.keyCode);
});

---

Mapping events:

$element.on('keypress').map(function (event) {
    // pass the key code forward
    return event.keyCode;
}).then(function (keyCode) {
    // then log the key code
    console.log(keyCode);
});

---

Removing events:

$element.on('keypress').then(function (event) {
    // log the key code
    console.log(event.keyCode);
}).until(function (event) {
    // then remove the listener if the shift key is pressed
    return event.shiftKey;
});

// drop any keypress events
$element.off('keypress');

---

Triggering events:

$element.on('custom-event').forEach(function (event) {
    console.log(event); // includes { anything: 'you want' }
});

$element.do('custom-event', {
    anything: 'you want'
});

$.create() should always create elements

See #73 (comment)

Use fetch, instead xhr request

Nice library!

It would be in keeping with the theme of the library to use fetch instead of xhr request - https://github.com/LeaVerou/bliss/blob/gh-pages/bliss.js#L263

You may want to just tell people to use fetch and not expose your own fetch object or wrap it and optionally return something more similiar to fetch (e.g. one annoyance I find is needing a 2nd promise on the result instead of just getting the contents and automatically JSON.parse if the content type is json).

Spec: https://fetch.spec.whatwg.org/
Polyfill: https://github.com/github/fetch

What should be the actual name?

I think you have to stick to one..

https://github.com/LeaVerou/bliss/blob/gh-pages/package.json#L2
https://github.com/LeaVerou/bliss/blob/gh-pages/bower.json#L2
https://github.com/LeaVerou/bliss/blob/gh-pages/index.html#L6
https://github.com/LeaVerou/bliss/blob/gh-pages/index.html#L15

• Bliss
• Blissful
• Blissful.js
• Bliss.js

I know it's the hardest part.. but I think we'll have to use one :)

More tests for $.delegate

I'm working on this! I want to cover all of the ways $.delegate can be used.

Tests for $.after()

Working on this.

Testing Framework

So I'll help write tests. Anyone have an opinion on what they'd like to use? I thought the simplest thing might be Mocha/BDD/JSDOM.

Thoughts. Votes.

Bower package not found

Hi,

I tried to install bliss with bower (bower install --save bliss) and i've got the following response:

bower                        ENOTFOUND Package bliss not found

So i tried to install right from the github URL bower install --savehttps://github.com/LeaVerou/bliss.git` and i've got the following response:

bower bliss#*               not-cached https://github.com/LeaVerou/bliss.git#*
bower bliss#*                  resolve https://github.com/LeaVerou/bliss.git#*
bower bliss#*             ENORESTARGET Tag/branch master does not exist

Additional error details:
No tags found in https://github.com/LeaVerou/bliss.git

I think that the package need his first tag 😇

Compatibility with jQuery Plugins

Just I want to know if is in the target of the library be compatible with jQuery Plugins.

These Plugins need jQuery.fn namespaces. Actually I never implemented one, so I'm not sure if need something specific of the jQuery core or really depend of each plugin implementation.

Could be very interesting unlock this power using bliss!

Help choose what chat solution we use!

If you need access to the Slack instance at http://blissjs.slack.com, leave your email in a comment. I'll delete it when I've added you.

Not sure how else to do this.

Remove Chrome from Karma config?

Thinking about taking Chrome out of the Karma config, just to remove those errors in the build. Seems pretty simple for anyone working on the project to add Chrome if they want it. Personally, I'm ok with just PhantomJS.

Thoughts?

$.clone doesn't clone delegated events

This test fails but should not:

    var element = $.create("div", { class: "parent",  contents: "This is the parent" });
    element._.delegate("click", "p", function() {
      done();
    });

    var child = $.create("p");
    element.appendChild(child);

    var clone = $.clone(element);

    var ev = document.createEvent("MouseEvent");
        ev.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    clone.childNodes[1].dispatchEvent(ev);

Add browser support table to the readme

Currently, there is no clear "Which browsers are supported?". Would be great to know your intention.

For example, I've asked myself why the fetch method doesn't first check if the native fetch API is available.

Prefer natives

Hey, some of the methods in bliss duplicate stuff native JavaScript does - I think it would be nice if bliss polyfilled these methods instead of duplicating them. For example: $.extend and Object.assign.