Remove jQuery dependence and offer a jQuery plugin in addition to normal library

[jessepollak]

Remove jQuery dependence and offer a jQuery plugin in addition to normal library

[smizell]

👍

I was thinking I'd like to use this with React.js and would love to have a component I could use.

[jessepollak]

Yeah, I think it could definitely be done. Really, the primary obstacle is that I rely on stripe/jquery.payment for a bunch of the formatting and card data stuff. That relies on jQuery...etc.

👍 to React. I use React at work and love it. Thought about building Card with it, but figured that was too big a dependency.

[34r7h]

+1 to no jq deps!

AngularJS would rock this well.

[gsabater]

I'm definitely trying to implement that on my angularjs mobile app.

[MoOx]

You are serious guys ? Remove jQuery to rely on AngularJS for such a "tiny" thing ?

[34r7h]

with jquery, we're already loading up a minimum of 80kb to do such a 'tiny'
thing. angular costs 100kb. vanilla javascript would be best for those that
haven't learned why angular is probably the best thing out atm :P

On Fri, Jun 6, 2014 at 5:24 AM, Maxime Thirouin [email protected]
wrote:

You are serious guys ? Remove jQuery to rely on AngularJS for such a
"tiny" things ?

—
Reply to this email directly or view it on GitHub
#23 (comment).

[MoOx]

Angular is clearly not the answer to everything, like jQuery isn't. So don't try to remove a dep by adding a bigger dep, it's just stupid. Or open another issue.
The goal of this issue is to provide the feature of this package with the less dependencies possible.

[smizell]

I think it would be cool to have the core of this code as vanilla JS and CSS that can be plugged in to a jQuery plugin, React component, Angular directive, etc. With that said, since the plugin is only ~200 lines of code, it's hard to abstract away the core functionality.

[34r7h]

actually, angular can recreate the universe if you leverage your services
and controllers right so it might just be the answer to everything, as long
as your directives are conscious.. heheh but ya, like i mentioned vanilla
javascript is good too.

On Fri, Jun 6, 2014 at 9:22 AM, Maxime Thirouin [email protected]
wrote:

Angular is clearly not the answer to everything, like jQuery isn't. So
don't try to remove a dep by adding a bigger dep, it's just stupid. Or open
another issue.
The goal of this issue is to provide the feature of this package with the
less dependencies possible.

—
Reply to this email directly or view it on GitHub
#23 (comment).

[MoOx]

We could also use php & imagemagik to achieve this, but I'm not sure it's relevant.

[kud]

ng-Card plzzzzzzzzzzzzzzzz

Hell no, please do a standalone one, and wrap it if you want with angular, jquery or mootools if you want.

[jessepollak]

I'd like to do it standalone. The real dependence is on jquery.payment
unsure how much effort it would take to recreate that in vanilla.
On Jun 6, 2014 12:37 PM, "Erwänn Mest" [email protected] wrote:

ng-Card plzzzzzzzzzzzzzzzz

[image: ]

Hell no, please do a standalone one, and wrap it if you want with angular,
jquery or mootools if you want.

—
Reply to this email directly or view it on GitHub
#23 (comment).

[kud]

I understand this point.

[lukelex]

I'm on my way to remove this dependency with https://github.com/lukelex/payment.js/blob/master/src/payment.js

I'm maintaining the same API to avoid compatibility problems while trying to pass all the original tests from jquery.payment.

[jessepollak]

Terrific!
On Jun 7, 2014 8:36 AM, "Lukas Alexandre" [email protected] wrote:

I'm on my way to remove this dependency with
https://github.com/lukelex/payment.js/blob/master/src/payment.js

—
Reply to this email directly or view it on GitHub
#23 (comment).

[lukelex]

any KeyboardEvent guru here? I'm having trouble while simulate events on jsdom during tests

[luanmuniz]

Is there anyone working on this?

[jessepollak]

@lukelex was doing awesome stuff with payment.js, not sure what his progress is there. would love to drop that in instead of jquery.payment though.

[luanmuniz]

@jessepollak hey man, i'm trying to do this task, but i cant understand what some functions do.
Can you explain to me bindVal?

This is the start of what i'm doing.
I'll open a branch into my forked repo and we can do things there until its ready.
https://gist.github.com/luanmuniz/3eef90c8d057d5a07c84

And about jquery.payment lets worry about that later, one thing at a time.

[JacquesLoubser]

@luanmuniz Doesn't jquery.payment require jquery? If you are rewriting the whole library, please make the cards array public, so we can add the exclusion of some card types.

[luanmuniz]

@JacquesLoubser yeah, i don't want to worry about the dependencies now, i want to rewrite the main code first and later see what i can do about the dependences. Maybe rewrite the whole library or maybe just a tiny part, i don't know yet. But i'll have this in mind! :D

Cc @jessepollak

[quaertym]

👍 I would like to use this with Ember as well, although Ember currently depends on jQuery, I would prefer a more modular design.

[lancecarlson]

Anyone making a serious attempt at this or should I fork and start my own attempt?

[jessepollak]

both @lukelex and @luanmuniz were making progress, but I'm not sure exactly how far they are.

The hardest part is that the library relies on stripe/jquery.payment

[lancecarlson]

Kind of interesting re JQuery dependencies:

https://gist.github.com/lancecarlson/1c32c598a961f5d0b132

[JacquesLoubser]

Why not fork jquery.payment and replace the jquery bits. Maybe I'll also take a look. And then fix the jquery dependencies as per @lancecarlson stated.
Only problem I see is the initialization.

[jessepollak]

So, bindVal encompasses a bunch of functionality that's necessary to take an input and render to the outputted field on the Card. I'll walk through this functionality step by step.

opts.fill specifies whether the outputted version of the input should be "filled" if it is not full. With fill: true, an input like 54 in the number field would output on the card as 54•• •••• •••• ••••. Looking at the code, it doesn't look like this is actually enabled anywhere.

opts.filters is a list of filters that get applied to the val taken from the input. These filters can both change the value (like this filter on the expiry field) or have an external effect (like the validToggler).

opts.join is a string or a function that returns a string. It is the value that's used to join the output of multiple fields (like a first_name and last_name field).

outDefaults is an array of default values for the outputted fields (i.e. •••• •••• •••• •••• or ••/••), taken directly from them on that line.

On focus of the input, we add the focused class to the outputted field on the Card and on blur we remove that class.

On keyup, change, or paste in the input, we process the input and output it to the output field. More detail on that now.

First, we grab the value of the input (we use map because it can come from multiple inputs). Next, we get the value of the joiner, then join the values. If the result is just the join (i.e. the input fields have no value), we set the output to no value.

Next, we apply the filters.

Next, for every output field, we either set the field to val or the appropriate outDefault.

Finally, we return the $el, so these functions can be chained.

[jessepollak]

@JacquesLoubser I think jquery.payment would definitely need to be forked for this to work.

[allenan]

If you guys haven't seen it, this site has helped me out in the past when removing jquery dependencies

http://youmightnotneedjquery.com/

On Jun 30, 2014, at 3:25 PM, Jesse Pollak [email protected] wrote:

@JacquesLoubser I think jquery.payment would definitely need to be forked for this to work.

—
Reply to this email directly or view it on GitHub.

[jessepollak]

We only need to target modern browsers and IE10+ (unless anyone wants to go down the rabbit hole of CSS support for IE9).

[lukelex]

@lancecarlson @jessepollak I got stuck while trying to emulate clicks on jsdom (they just haven't implemented it yet). Besides that, I've got all original tests of jquery.payment passing.

[luanmuniz]

@lukelex can you explain better your problem? maybe i can help you.

[jessepollak]

I just opened up #94, which goes a long way towards removing the jQuery dependence from Card.

In that PR, I swap out jquery.payment for payment — a library that mimics the jquery.payment without using any jQuery. It is 100% feature-complete and increases the test coverage for the project.

Please follow along there if y'all are interested — I'm hoping to get the jQuery-free version of this library (along with a jQuery-version) out in the next week and would love to see support for the frameworks y'all have been discussing as well.

[MoOx]

Awesome. Thanks for you work @jessepollak

[quaertym]

👍 Great, thank you.

[jessepollak]

I know this has taken a long time, but this is finally getting close in #128, which will fully remove the jQuery dependence, ship as 1.0, and add some other niceties :)

[34r7h]

+1

[lukelex]

+1

[jessepollak]

Just shipped v1.0.0-beta which removes the jQuery dependence. Check it out here.

Would love to see people using and giving feedback on it!

[jessepollak]

This is going to ship in v1.0.0 later today! WOOOOO!

[jaypalkadam]

Hey hi sir this your great work.
Thank's for it

i have one problem with it . i have to use only backside .

Can you help me?

[uetkaje]

Jquery still dependency according to bower.json. Please update bower.json file.