Socket
Socket
Sign inDemoInstall

@getmeli/sdk

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@getmeli/sdk

Meli SDK


Version published
Maintainers
1
Created
Source

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);
EventCallback signatureDescription
submitting() => voidThe form submit callback was called.
submitted() => voidThe form was submitted successfully.
error(error) => voidSomething went wrong.

Development

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

Keywords

FAQs

Package last updated on 19 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc