`<f-my-component attribute="value" />` support by fadrian06 · Pull Request #710 · flightphp/core

fadrian06 · 2026-06-25T01:02:39Z

This pull request introduces a major enhancement to the template rendering system by adding support for reusable components, along with several improvements to the View class and its tests. The changes include the introduction of a new Component base class, significant refactoring and expansion of the View class to support component rendering, and modernizations to the test suite for better reliability and clarity.

Key highlights:

The View class now supports rendering component tags (e.g., <f-component-name />) with automatic property passing, CSS/JS injection, and improved template resolution.
A new abstract Component base class is introduced for reusable UI elements.
The test suite is updated for clarity, modern PHPUnit practices, and to cover new features.

Component System Enhancements

Introduced a new abstract Component base class in flight/template/Component.php, which provides a structure for reusable template components with html(), css(), and js() methods.
Refactored View to support component rendering: detects custom component tags, parses their properties, and renders them recursively, including their CSS and JS, ensuring each style/script is only included once.

View Class Improvements

Extended the View constructor to accept componentPrefix and componentsPath for flexible component tag naming and location. Improved template variable management, file path resolution, and error handling.
Refactored and improved the set, clear, exists, and getTemplate methods for better type safety and clarity. Added utility methods for argument resolution and style/script rendering. [1] [2] [3]

Test Suite Modernization

Updated tests/ViewTest.php to use self::assert* methods, improved output normalization, and added/updated tests to cover new component and template features. [1] [2] [3]

Miscellaneous Improvements

Updated author homepage URLs in composer.json to use HTTPS.
Broadened .editorconfig rules to apply to all files under tests/views/ recursively.

…ponent

n0nag0n · 2026-06-25T13:30:10Z

So I think this is ok minus the one change, but you probably should add to the Flight docs for the docs related to this change. The other thing that I don't know right now is if this will break for people using the current view class. There might be some future issues related to this you should be prepared to fix if they get surfaced.

fadrian06 · 2026-06-25T16:13:05Z

don't worry, I am testing this is personal apps and it works as expected, both old and new syntax...

Use per-render instance state for component style/script dedupe in View::fetch so assets are deduped within a render without leaking across tests or subsequent renders. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Extend View component rendering tests to cover functional and class components receiving props via variadic and individual parameters, and update View callable invocation to map template data into callable arguments. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Allow class components to return full <style> or <script> tags from css() and js(), while preserving default wrapping for raw CSS/JS strings. Add data-provider coverage and fixtures for both custom style and custom script tag behavior. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot

Pull request overview

This PR adds a reusable “component tag” system to Flight’s template rendering by extending flight\template\View to detect and render <f-... /> tags (including nested components), and introduces a flight\template\Component base class for class-based components. It also updates/expands the test suite and fixtures to validate the new rendering behavior.

Changes:

Introduces flight\template\Component and extends View::fetch() to support functional (callable) and class-based components, plus one-time CSS/JS injection per component.
Adds component-tag parsing (<prefix-component ... />) with prop extraction and recursive rendering.
Modernizes/expands view tests and adds many new test fixture templates/components.

Reviewed changes

Copilot reviewed 45 out of 45 changed files in this pull request and generated 24 comments.

Show a summary per file

File	Description
tests/ViewTest.php	Updates View tests and adds extensive new coverage for component tag rendering and fixtures comparison helpers.
tests/views/world.html	Uses short echo syntax in fixture.
tests/views/pages/page-with-three-different-components.php	New fixture page exercising multiple component types.
tests/views/pages/page-with-multiple-components.php	New fixture page rendering repeated components inside a loop.
tests/views/pages/page-with-functional-component.php	New fixture page rendering a functional component.
tests/views/pages/page-with-functional-component-with-props.php	New fixture page rendering a functional component with props.
tests/views/pages/page-with-functional-component-with-individual-props.php	New fixture page rendering a functional component with named props.
tests/views/pages/page-with-component-with-two-props.php	New fixture page rendering a component with two props.
tests/views/pages/page-with-component-with-subcomponent.php	New fixture page validating nested/subcomponent rendering.
tests/views/pages/page-with-component-with-prop-which-value-contains-spaces-and-numbers.php	New fixture page validating prop values containing spaces/numbers.
tests/views/pages/page-with-component-with-one-prop.php	New fixture page rendering a component with one prop.
tests/views/pages/page-with-component-with-old-syntax.php	New fixture page validating legacy `$this->render(...)` component usage.
tests/views/pages/page-with-component-with-new-syntax.php	New fixture page validating `<f-... />` syntax.
tests/views/pages/page-with-component-with-custom-prefix.php	New fixture page validating configurable component prefix.
tests/views/pages/page-with-component-from-another-path.php	New fixture page validating configurable components path.
tests/views/pages/page-with-class-component.php	New fixture page rendering a class-based component.
tests/views/pages/page-with-class-component-with-styles.php	New fixture page validating CSS injection for a component.
tests/views/pages/page-with-class-component-with-scripts.php	New fixture page validating JS injection for a component.
tests/views/pages/page-with-class-component-with-props.php	New fixture page validating constructor props for class components.
tests/views/pages/page-with-class-component-with-custom-style-tag.php	New fixture page validating custom `<style ...>` payload passthrough.
tests/views/pages/page-with-class-component-with-custom-script-tag.php	New fixture page validating custom `<script ...>` payload passthrough.
tests/views/pages/page-with-class-component-that-extends-another-class-component.php	New fixture page validating inheritance-based class components.
tests/views/pages/page-two-same-components-with-one-style-and-script-tag.php	New fixture page validating style/script de-duplication across repeated components.
tests/views/hello.php	Uses short echo syntax in fixture.
tests/views/components/subcomponent.php	New fixture component used for nested component rendering.
tests/views/components/my-functional-component.php	New fixture functional component implementation.
tests/views/components/my-functional-component-with-props.php	New fixture functional component using variadic props.
tests/views/components/my-functional-component-with-individual-props.php	New fixture functional component with named parameters.
tests/views/components/my-component.php	New fixture basic component template.
tests/views/components/my-component-with-subcomponent.php	New fixture component that renders a subcomponent tag.
tests/views/components/my-class-component.php	New fixture class-based component implementation.
tests/views/components/my-class-component-with-styles.php	New fixture class-based component returning CSS for injection.
tests/views/components/my-class-component-with-scripts.php	New fixture class-based component returning JS for injection.
tests/views/components/my-class-component-with-props.php	New fixture class-based component with constructor props.
tests/views/components/my-class-component-with-custom-style-tag.php	New fixture class-based component returning a complete `<style ...>` tag.
tests/views/components/my-class-component-with-custom-script-tag.php	New fixture class-based component returning a complete `<script ...>` tag.
tests/views/components/my-class-component-that-extends-another-class-component.php	New fixture class-based component extending another component class.
tests/views/components/greeting.php	New fixture component template for greeting output.
tests/views/components/greeting-with-two-props.php	New fixture component template for greeting output with two props.
tests/views/components/another-class-component.php	New fixture base class component used by an extending component.
tests/components/my-component-from-another-path.php	New fixture component placed outside the default components directory to test custom `componentsPath`.
flight/template/View.php	Core implementation: adds component rendering, CSS/JS de-dupe, new constructor options, and refactors template resolution and fetching.
flight/template/Component.php	New abstract base class for class-based components with `html/css/js` hooks.
composer.json	Updates author homepage URL to HTTPS.
.editorconfig	Broadens formatting rule scope to apply recursively under `tests/views/`.

+            extract($this->vars);
+
+            if (is_array($data)) {
+                extract($data);
+


+                if ($this->preserveVars) {
+                    $this->vars += $data;
+                }


+            preg_match_all(
+                "/<$this->componentPrefix-(?<component>[a-z-]+)\s*(?<props>([a-z]+=\"[^\"]+\"\s*)*)?\s*\/>/",
+                $view,
+                $tagsMatches,
+            );


+        $isLinuxAbsolutePath = $file[0] === '/';
+        $isWindowsAbsolutePath = PHP_OS === 'WINNT' && $file[1] === ':';


+     * For example, if the prefix is `f`, then a component tag would look like `<f-component-name />`
+     * @param string $componentsPath Path to components directory.
+     * If is a relative path, it will be relative to the `$path` property.
+     * **We recomment that you always use absolute paths for explicitness**.


+    #[Override]
+    public function html(): string


+    #[Override]
+    public function js(): string


+    #[Override]
+    public function html(): string


+use flight\template\Component;
+use Override;
+


+        #[Override]
+        public function html(): string


fadrian06 added 21 commits June 23, 2026 14:22

update mikecao copyright

cd2072e

update license docblock

a3423b4

import Exception

98e20c6

simplify docblocks

f047d22

use $this instead of self

7d29fdf

replace iterable for arrays

d28939f

simplify render

206eff4

simplify getTemplate

2321b0e

remove \ from global function calls

abdf845

always normalize paths

6b50663

remove final_newlines to all tests/views/*

b1c56b1

simplify view instantiation

ee9699e

remove ViewTest methods comments

6afd221

use short echo

a6dbd32

simplify ViewTest

5768019

1. renders self close components without arguments

a94431a

2. renders self close functional and class components

50c23de

3. renders self close class components that extends another class com…

bc86e7a

…ponent

4. renders self close components with one prop

538c9d3

5. views can repass props

38d4458

6. renders self close components with many props

5cdc2e8

fadrian06 self-assigned this Jun 25, 2026

fadrian06 added Enhancement Feature labels Jun 25, 2026

fadrian06 linked an issue Jun 25, 2026 that may be closed by this pull request

View class steroids 🙌🏽 #580

Open

fadrian06 added the refactor Code optimization, improved readability or simplify framework structure label Jun 25, 2026

fadrian06 added 2 commits June 25, 2026 12:37

allow to change the prefix

8280d4d

allow to change the components path

5c4b9b9

fadrian06 and others added 7 commits June 25, 2026 13:54

allow custom indentations in tests (> 1 space)

5076b26

allow to render different components

52ec6b8

allow props which values contains spaces and numbers

8c88b9d

fix styles and scripts duplication

7acf6c0

Fix component style/script dedupe leakage

8c277da

Use per-render instance state for component style/script dedupe in View::fetch so assets are deduped within a render without leaking across tests or subsequent renders. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

fadrian06 marked this pull request as ready for review June 25, 2026 21:14

Copilot AI review requested due to automatic review settings June 25, 2026 21:14

Copilot started reviewing on behalf of fadrian06 June 25, 2026 21:15 View session

Copilot AI reviewed Jun 25, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

`<f-my-component attribute="value" />` support#710

`<f-my-component attribute="value" />` support#710
fadrian06 wants to merge 30 commits into
masterfrom
580-view-class-steroids

fadrian06 commented Jun 25, 2026 •

edited

Loading

Uh oh!

n0nag0n commented Jun 25, 2026

Uh oh!

fadrian06 commented Jun 25, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		$isLinuxAbsolutePath = $file[0] === '/';
		$isWindowsAbsolutePath = PHP_OS === 'WINNT' && $file[1] === ':';

Uh oh!

Conversation

fadrian06 commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Component System Enhancements

View Class Improvements

Test Suite Modernization

Miscellaneous Improvements

Uh oh!

n0nag0n commented Jun 25, 2026

Uh oh!

fadrian06 commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fadrian06 commented Jun 25, 2026 •

edited

Loading

fadrian06 commented Jun 25, 2026 •

edited

Loading