Skip to content

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

Draft
fadrian06 wants to merge 30 commits into
masterfrom
580-view-class-steroids
Draft

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

Conversation

@fadrian06

@fadrian06fadrian06 commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

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.

@fadrian06fadrian06 self-assigned this Jun 25, 2026
@fadrian06fadrian06 linked an issue Jun 25, 2026 that may be closed by this pull request
@fadrian06fadrian06 added the refactor Code optimization, improved readability or simplify framework structure label Jun 25, 2026
@n0nag0n

Copy link
Copy Markdown
Collaborator

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

fadrian06 commented Jun 25, 2026

Copy link
Copy Markdown
ContributorAuthor

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

fadrian06and others added 7 commits June 25, 2026 13:54
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>
@fadrian06
fadrian06 marked this pull request as ready for review June 25, 2026 21:14
CopilotAI review requested due to automatic review settings June 25, 2026 21:14

CopilotAI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment threadflight/template/View.php
Comment threadflight/template/View.php
Comment threadflight/template/View.php
Comment threadflight/template/View.php
Comment threadflight/template/View.php
Comment threadtests/views/components/my-class-component-with-scripts.php
Comment threadtests/views/components/my-class-component-with-scripts.php
Comment threadtests/views/components/another-class-component.php
Comment threadtests/views/components/another-class-component.php
@fadrian06
fadrian06 marked this pull request as draft June 25, 2026 22:32
@fadrian06
fadrian06force-pushed the 580-view-class-steroids branch 3 times, most recently from ee7b496 to 48035d6CompareJune 25, 2026 23:38
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

EnhancementFeaturerefactorCode optimization, improved readability or simplify framework structure

Projects

None yet

Development

Successfully merging this pull request may close these issues.

View class steroids 🙌🏽

3 participants

@fadrian06@n0nag0n