phug/component

Extension for pug-php and phug to use components in templates

1.1.4 2020-04-25 21:32 UTC

Requires

• php: >=7.2
• phug/phug: ^1.7.2

Requires (Dev)

• machy8/xhtml-formatter: ^1.0
• phpunit/phpunit: ^8.5
• pug-php/pug: ^3.3

MIT

• KyleKatarn

• html
• component
• pug
• phug

README

Extension for Pug-php and Phug to use components in templates

Installation

composer require phug/component

Enable it globally:

\Phug\Component\ComponentExtension::enable();

To enable it automatically when calling static methods render, renderFile, display, displayFile etc. on either \Pug\Facade or \Phug\Phug class.

If using in a \Pug\Pug or \Phug\Renderer instance, add the ComponentExtension class to modules:

$pug = new \Pug\Pug([/*options*/]);
\Phug\Component\ComponentExtension::enable($pug);

Usage

//- Register a component
component alert
  .alert.alert-danger
    .alert-title
      slot title
  
    slot

section
  //- Somewhere later in your template
  +alert
    slot title
      | Hello #[em world]!

    p This is an alert!

Output:

<section>
  <div class="alert alert-danger">
    <div class="alert-title">
      Hello <em>world</em>!
    </div>

    <p>This is an alert!</p>
  </div>
</section>

Default slots

component page
  header
    slot header
      | Default header

  slot

  footer
    slot footer
      | Default footer

+page
  | My page content

  slot footer
    | Custom footer

Output:

<header>
  Default header
</header>

My page content

<footer>
  Custom footer
</footer>

Parameters

Component inherit mixin behavior.

Parameters can be passed as in mixins:

component page($title)
  header
    h1=$title

  slot

  footer
    slot footer
      | Footer of #{$title} page

+page("Contact")
  | Contact us

($title becomes title if you use pug-php or js-phpize)

Output:

<header>
  <h1>
    Contact
  </h1>
</header>

Contact us

<footer>
  Footer of Contact page
</footer>

Fallback component

This package also include a function to get the first defined mixin/component among given names:

component page
  | Page component

+#{$firstComponent('customPage', 'page')}

Output:

Page component

And if customPage component is defined, it will be used instead:

component page
  | Page component

component customPage
  | CustomPage component

+#{$firstComponent('customPage', 'page')}

Output:

CustomPage component

($firstComponent becomes firstComponent if you use pug-php or js-phpize) $firstMixin is also available as an alias.