Proposal to Include a General Purpose but Advanced Form Controller

[bitifet]

Hi everyone!

Following the kind invitation from Kyle to open this thread, I’d like to propose a discussion around integrating a pre-existing library of mine that aligns with the goals of this project.

Introduction

This library is a rebuild from scratch of a concept I developed while working on an already in production (but primarily internal) application.

Starting from the ground up allowed me to shape it in ways I prefer.

However, working on it exclusively in my leisure (while balancing a job and family) imposes tight limits on the time I can dedicate to it.

Currently, it lacks more comprehensive tests and the documentation, though improving, is still incomplete from my point of view.

That said, there are a few fully functional, downloadable examples with source code that effectively demonstrate its capabilities.

How It Works

I won’t repeat what's already covered in the documentation (see links below), but here are some key features:

• No reliance on a specific HTML structure: Designers have complete freedom.

  • Examples follow a specific structure simply to match a sample CSS for visual appeal.

• Supports complex JSON structures: The library handles subforms (plain objects) and lists (arrays) that can be dynamically extended, shrunk, or sorted via the designed UI, depending on the controls designers include.

• No manual wiring needed between controls and fields: Lists and subforms are treated as fields too.

Let's see a little sample snippet:

<div data-smark='{"type":"form","name":"personal_data"}'>
  <input name='name' data-smark>
  <input name='surname' data-smark>
  <ul data-smark='{"type":"list","name":"pets", "sortable":true}'>
    <li>
      <input name='species' data-smark>
      <input name='name' data-smark>
      <button data-smark='{"action":"removeItem"}'>Remove this Pet</button>
    </li>
  </ul>
  <button data-smark='{"action":"addItem","context":"pets"}'>Add Pet</button>
</div>

The main idea is that most forms perform similar tasks. Why reinvent the wheel each time?

We can build it once, then spend the saved time improving it!

Other Features

• Fields and controls are just simple HTML tags with metadata:

  • Fields import/export specific data types based on the field type.
  • Controls, called "triggers," perform actions such as adding/removing list items.

• Fields are addressable using "filesystem-like" paths:

  • Absolute paths (starting with "/") reference the root form.
  • Relative paths are from the current field's location.

• Triggers identify fields via their form hierarchy position (DOM-based but restricted to enhanced fields):

  • Target fields can also be specified using relative or absolute paths.

• "Import" and "export" actions are supported for all fields:

  • These actions trigger events, allowing data flow and even operation blocking if necessary.

Caveats

At first glance, this might seem like a framework, but it’s not!

It's just a library that allows flexible form creation through markup, where the needed customization is limited to tasks like data import/export and content validation reacting to events like change (interactive), export (general validation).

👉 It offers full freedom to designers, as almost no part of the markup is tied to complex components (just a lightweight, reusable old-style form controller.

Links

🔗 Documentation
🔗 Examples
🔗 GitHub

Finally

As you can see, this is more than just a small library, but as a side project, I can’t promise a fully finished product on my own.

However, I believe it has the potential to grow into something bigger. It’s just a matter of finding others who share the same vision.

Looking forward to your thoughts!

Cheers,

[getify]

Nice!