[Feature Request]: x-fragment for Section-Based Rendering

[Phil-Venter]

Description

The proposed introduction of the x-fragment tag in Tempest offers a way to simplify the development process by allowing inline rendering of small, callable sections within a single file, eliminating the need for separate component files for minor elements. This proposal is inspired by Laravel's Blade @fragment directive and is designed to improve workflow efficiency and code clarity.

Current Challenge:

Currently, developers must create separate files for even simple components, leading to a cumbersome workflow. For example:

• Table Display File:

  <x-app title="Users" nav="user">
      <table>
          <thead>
              <tr>
                  <th>Name</th>
                  <th>Email</th>
              </tr>
          </thead>
          <tbody>
              <?php foreach ($this->users as $user): ?>
                  <x-user-row :name="$user->name" :email="$user->email" />
              <?php endforeach ?>
          </tbody>
      </table>
  </x-app>

• Row Component File:

  <x-component name="x-user-row">
      <tr>
          <td><?= $this->name ?></td>
          <td><?= $this->email ?></td>
      </tr>
  </x-component>

While functional, this structure requires developers to switch between files, adding complexity, especially as projects grow in size.

Proposed Solution: x-fragment Tag

The x-fragment tag allows developers to define sections within the same file, that can be called seperately, keeping everything centralised and reducing the need for file switching. This tag can be likened to inline components but eliminates the need for a separate file. During normal rendering, fragment tags can be ignored entirely. They only come into play once partial rendering is done.

Example Usage:

Instead of creating a separate component file for table rows, the developer can use the x-fragment tag directly within the table display file:

<x-app title="Users" nav="user">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($this->users as $user): ?>
                <x-fragment name="user-row">
                    <tr>
                        <td><?= $user->name ?></td>
                        <td><?= $user->email ?></td>
                    </tr>
                </x-fragment>
            <?php endforeach ?>
        </tbody>
    </table>
</x-app>

In this example, the x-fragment tag allows the developer to keep everything in one file, making the code more manageable and reducing the need for additional files.

Targeting and Rendering Specific Fragments:

Fragments can also be rendered individually, which is useful for dynamic content updates, such as when using HTMX:

return view('table-display.view.php#user-row', user: $user);

Benefits of x-fragment:

1. Centralised Code: Developers can maintain sections within the same file, reducing clutter and improving workflow.

2. Reduced File Management: No need for separate files for minor components, allowing for a more streamlined process.

3. Component-Like Behaviour: Fragments function kind of similar to components, but without the need for external file management.

4. Easier Data Handling: Passing data between sections within a single file simplifies the process and minimises debugging.

5. Dynamic Content Compatibility: Integrates well with tools like HTMX for partial page updates, supporting dynamic and modern user interfaces.

Potential Downsides:

1. Larger Files: Consolidating everything into one file can lead to larger and potentially harder-to-manage files as templates grow in complexity.

2. Code Duplication Risk: Developers may unintentionally duplicate fragments in the same templates, leading to maintenance challenges.

3. Limited Cross-Template Reusability: Unlike standalone components, fragments are inline and local to the specific file, limiting their use across different templates or even elsewhere in the same template.

4. Overuse of Fragments: Using too many small fragments might lead to performance issues.

Conclusion:

The x-fragment tag would significantly improve Tempest by allowing developers to manage small, reusable template sections within a single file. This change would reduce file management overhead, promote cleaner code (hopefully), and improve developer productivity, making it a valuable feature despite the potential challenges of managing larger files and limiting cross-template reusability.