Library Architecture

The JavaScript library was structured around a simple rule:

Share what is truly reusable. Keep form-specific behavior isolated.

Repository structure

A sanitized representation of the project structure:

/
├── loader.js
├── manifest.json
├── forms/
│   ├── FORM_001.js
│   ├── FORM_002.js
│   ├── FORM_003.js
│   └── ...
├── shared/
│   ├── functions.js
│   └── timing.js
└── homepages/
    └── Homepage.js

Responsibility by layer

Layer	Responsibility
loader.js	Detect the active Planon context and load the correct scripts
shared/functions.js	Reusable utilities shared by multiple forms
shared/timing.js	Helpers for elements that render asynchronously
forms/*.js	Form-specific logic
homepages/*.js	Homepage-specific behavior
manifest.json	Library metadata / registered modules

Why not one giant file?

A single large JavaScript file would make every form depend on the same implementation surface.

Instead:

                     ┌──────────────────┐
                     │   shared layer   │
                     └────────┬─────────┘
                              │
              ┌───────────────┼───────────────┐
              ▼               ▼               ▼
        ┌──────────┐    ┌──────────┐    ┌──────────┐
        │ FORM_001 │    │ FORM_002 │    │ FORM_003 │
        └──────────┘    └──────────┘    └──────────┘

Each form receives shared behavior without losing its own boundary.

Engineering trade-off

I intentionally avoided turning the shared layer into a large framework.

The shared layer exists for behavior that is genuinely reused. Business-specific logic remains with the form that owns it.

That keeps the library easier to understand and reduces accidental coupling between forms.