Docs - How-to for svelte

[avimar]

I'm not expecting official support for svelte, but I'd like to make notes in an easy to find place about how to integrate cleave.js into svelte (like angular, react,etc.)

The only other option "natively" in svelte is imask, which has double the package size. And cleave.js is slick.

1. The naive way to mount is to wait for the tag to finish with an onMount, but we can simply do use which will run our cleave initialization when the particular HTML dom is ready.
2. Also, we should pass a callback to teardown when appropriate.
3. We need to sync with our native svelte models, when the user updates the form.

Here's an example with all 3 of those taken care of:

import Cleave from 'cleave.js';
var cleaveCreditCard; //available outside of the scope for setting the raw value
function formatCard(){
	cleaveCreditCard = new Cleave('#credit-card', {
		creditCard: true
		,onValueChanged: s => credit_card_number=s.target.rawValue //sync the raw value back to our model, for {3}
		});
	return { destroy(){ 
		//console.log('cleaning up cleaveCreditCard'); // for {2}
		cleaveCreditCard.destroy();
		}}
	}

...

<input maxlength=20 placeholder="Credit Card Number"
	id="credit-card" use:formatCard autocomplete="cc-number" />

({1} The use:formatCard triggers to instantiate when the <input is ready, and stores the destroy callback.)

4. (WIP, not so sure about this) If you need to set the raw value, you can then use the function cleaveCreditCard.setRawValue(MyValue); e.g. when getting data back from AJAX The canonical way might be to bind like this: $: cleaveCreditCard&& cleaveCreditCard.setRawValue(credit_card_number); but that seems like it would trigger a loop. But it seemed to work just fine!

If I've mistaken anything, or there's a much better way, please update here. Or maybe someone will write a wrapper that handles all the boilerplate.

[avimar]

Well, that 4) for the reactive 2 way binding seemed fine in chrome and firefox, but in chrome 83.0.4103.96 on mobile (F1 pocophone) the input box keeps flashing the text I can erase some, but it seems to show the old data there, too. I guess there is some sort of race condition, but only on mobile..?

[skwasha]

Has anyone got a fully working example of this with specifically the phone module? I've tried all manner of inclusion for the required phone-type-formatter.{country}.js (svelte:head, in my main layout as a script, via import). But no luck... no matter what I still get the error indicating the file needs to be included. I see it being loaded in dev tools. Any ideas?

[Kaperstone]

I know this is super old (2y old)

but for who encounter the issue with phone-type-formatter.{country}.js

add:

import "cleave.js/dist/addons/cleave-phone.i18n"

Or change i18n with your desired country.