@getmeli/sdk NPM

Meli SDK

Forms

Using

Place a .meli.yml at your site root:

forms:
    form1:
        type: email
        recipient: test@test.com

Create an HTML form:

<!doctype html>
<html>
<head>
    <!-- ... other scripts -->
    <script async src="https://unpkg.com/@getmeli/sdk@^1/build/browser.js"></script>
</head>
<body>

<form data-form="form1" id="my-form">
    <input type="text" name="name">
    <input type="file" name="logo">
    <button type="submit">Submit</button>
</form>

<script>
    const formElement = document.getElementById('my-form');
    formElement.addEventListener('submitted', () => {
        console.log('submitted');
    });
</script>

</body>
</html>

By default, the lib will automatically load and look for forms with the data-form attribute. You can disable this by:

adding the data-meli-init="false" to your script tag
removing the async directive from your script tag

<script ... data-meli-init="false"></script>
<script>
    Meli.Forms.init().catch(console.error);
</script>

Using Npm

Install the lib:

npm i @getmeli/sdk

Use it in your code:

import Meli from 'meli';

Meli.Forms.init().catch(console.error);

Api

To pass your own forms:

const form = document.getElementById('my-form');

Meli.Forms
    .init([form])
    .catch(console.error);

Manually create a form and bind it:

Meli.Forms
    .init([]) // passing the empty array cancels the auto detection
    .then(() => {
        const formElement = document.getElementById('my-form');
        const form = new Meli.Forms.Form(form);
    })
    .catch(console.error);

To remove all listeners:

// ...
const form = new Meli.Forms.Form(form);
forms.remove();

Events

On the HTML form element:

const formElement = document.getElementById('my-form');
formElement.addEventListener('submitted', () => {
    console.log('submitted');
});

Or on the Form object:

Meli.Forms
    .init([])
    .then(() => {
        const formElement = document.getElementById('my-form');
        const form = new Meli.Forms.Form(form);
        form.addEventListener('submitted', () => {
            console.log('submitted');
        });
    })
    .catch(console.error);

Event	Callback signature	Description
`submitting`	`() => void`	The form submit callback was called.
`submitted`	`() => void`	The form was submitted successfully.
`error`	`(error) => void`	Something went wrong.

Development

Run Meli locally
Ship a site with a form
Run npx http-server -p 3030 .
In your site's index.html, use http://localhost:3030/build/browser.js for the SDK src
Start the build npm i && npm start

meli sdk

core-js debug

@infinitebrahmanuniverse/nolb-_get @everything-registry/sub-chunk-359

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago