🚨 No longer maintained 🚨

@motss/formila

What if you could SSR HTML form with Node.js

---

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

• Table of contents
• Pre-requisites
• Setup
  • Install
  • Usage
    • Node.js
    • Native ES modules or TypeScript
• API Reference
  • FormilaData
  • FormilaOpts
  • formila(data[, options])
  • formilaSync(data[, options])
• License

Pre-requisites

• Node.js >= 8.9.0
• NPM >= 5.5.1 (NPM comes with Node.js so there is no need to install separately.)

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])

• data <FormilaData> Form data.
• options <FormilaOpts?> Optional configuration to render the HTML form.
• returns: <Promise<string>> Promise which resolves with rendered HTML form.

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