This package has been deprecated

    Author message:

    No longer maintained.

    @motss/formila
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    @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

    Install

    npm i @motss/formila

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    22.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • motss