Skip to content
This repository has been archived by the owner on Jun 23, 2019. It is now read-only.

motss/formila

Repository files navigation

🚨 No longer maintained 🚨

@motss/formila

What if you could SSR HTML form with Node.js


NPM

Version Downloads MIT License Code of Conduct

Build Status CircleCI Dependency Status NSP Status codecov Coverage Status

codebeat-badge codacy-badge

Server-rendering HTML forms with just plain JS object or with JSON object. Do note that not every rough edges are covered. This package can be helpful in making you a little bit more productive if you find yourself dealing with many different HTML forms quite often. Enjoy! 😃

Table of contents

Pre-requisites

Setup

Install

# Install via NPM
$ npm install --save @motss/formila

Usage

Node.js

const { formila } = require('@motss/formila');

const testForm = {
  // attr: {}, // Attributes
  title: 'Test title',
  subtitle: 'Test subtitle',

  hiddenList: [
    {
      name: '_csrf',
      value: '8601779472171008',
    },
  ],

  sectionList: [
    {
      // attr: {}, // Attributes
      fieldsetList: [
        {
          // attr: {}, // Attributes
          title: 'Personal Information',
          subtitle: 'Particulars',
          fieldList: [
            {
              // attr: {}, // Attributes
              elementList: [
                {
                  title: 'Email',
                  fieldTag: `<input id="email"
                  type="email"
                  name="email">`,
                  description: 'Enter your email',
                  errorMessage: 'Invalid email',
                },
              ],
              // Non-validatable (input, select) elements
              // nonElementList: [
              //   '<div>Email:</div><div></div>',
              // ],
            },
          ],
        },
      ],
    },
  ],

  errorMessage: 'Form contains invalid field',
  submitTitle: 'Next',
};

async function main() {
  try {
    // const options = { minify: true };
    const renderedForm = await formila(testForm/** options */);

    return renderedForm;
  } catch (e) {
    console.error('Error rendering form', e);
  }
}

Native ES modules or TypeScript

// @ts-check

import { formila, FormilaData, FormilaOpts } from '@motss/formila';

const testForm: FormilaData = {
  // attr: {}, // Attributes
  title: 'Test title',
  subtitle: 'Test subtitle',

  hiddenList: [
    {
      name: '_csrf',
      value: '8601779472171008',
    },
  ],

  sectionList: [
    {
      // attr: {}, // Attributes
      fieldsetList: [
        {
          // attr: {}, // Attributes
          title: 'Personal Information',
          subtitle: 'Particulars',
          fieldList: [
            {
              // attr: {}, // Attributes
              elementList: [
                {
                  title: 'Email',
                  fieldTag: `<input id="email"
                  type="email"
                  name="email">`,
                  description: 'Enter your email',
                  errorMessage: 'Invalid email',
                },
              ],
              // Non-validatable (input, select) elements
              // nonElementList: [
              //   '<div>Email:</div><div></div>',
              // ],
            },
          ],
        },
      ],
    },
  ],

  errorMessage: 'Form contains invalid field',
  submitTitle: 'Next',
};

async function main() {
  try {
    // const options: FormilaOpts = { minify: true };
    const renderedForm = await formila(testForm/** options */);

    return renderedForm;
  } catch (e) {
    console.error('Error rendering form', e);
  }
}

API Reference

FormilaData

  • attr <Object?> Optional form attributes, e.g. { id: 'checkoutForm', class: 'form__checkout' }.
  • title <string?> Optional form title.
  • subtitle <string?> Optional form subtitle.
  • hiddenList <Array?<Object>> Optional list of hidden elements in the form.
    • name <string> Name of the hidden form element, e.g. _csrf.
    • value <string> Value of the hidden form element, e.g. 5976446363238400.
  • sectionList <Array?<Object>> Optional list of sections.
    • attr <Object?> Optional section attributes.
    • fieldsetList <Array?<Object>> Optional list of fieldsets.
      • attr <Object?> Optional fieldset attributes.
      • title <string?> Optional fieldset title.
      • subtitle <string?> Optional fieldset subtitle.
      • fieldList <Array?<Object>> Optional list of fields.
        • elementList <Array?<Object>> Optional list of validatable elements such as <input> and <select> elements.
          • attr <Object?> Optional field attributes.
          • title <string?> Optional field title, e.g. Email.
          • fieldTag <string?> HTML <input> or <select> element. The element must have the attribute id set, e.g. <input id="email" type="email" name="email">.
          • description <string?> Optional field description, e.g. Enter your valid email address.
          • errorMessage <string?> Optional error message when the field is invalid, e.g. Invalid email.
        • nonElementList <Array?<string>> Optional list of non-validatable elements.
  • errorMessage <string?> Optional error message of the form, e.g. Form contains invalid field(s).
  • submitTitle <string?> Optional title of the submit button. Defaults to Submit.

FormilaOpts

  • minify <boolean?> Optional flag to minify rendered HTML form. Defaults to true.

formila(data[, options])

formilaSync(data[, options])

This methods works the same as formila(data[, options]) except that this is the synchronous version.

License

MIT License © Rong Sen Ng