Component Module for ProcessWire CMS/CMF

Module will check :

• site/modules/**/components/*/templates/template.php
• site/templates/components/*/templates/template.php

directories for the components. If you want to use default params create a component.php file in Component root dir.

Template Components

└── site/templates/components
    └── name-of-component
        ├── component.php (optional)
        ├── layout-default.php (optional)
        ├── layout-home.php (optional)
        ├── layout-contact.php (optional)
        ├── fields.php (optional)
        └── templates
            └── template.php (required)

Module Components

└── site/modules/name-of-module/components
    └── name-of-component
        ├── component.php (optional)
        ├── layout-default.php (optional)
        ├── layout-home.php (optional)
        ├── layout-contact.php (optional)
        ├── fields.php (optional)
        └── templates
            └── template.php (required)

Requirements

• ProcessWire 3.0 or newer
• PHP 8.1 or newer

Installation

Install the module from the modules directory

Via Composer:

composer require trk/component

Via git clone:

cd your-processwire-project-folder/
cd site/modules/
git clone https://github.com/trk/Component.git

All component.php file settings

<?php

namespace ProcessWire;

return [
    'title' => 'Title of component',
    'params' => [
        'foo' => '',
    ],
    'params' => [
        
    ],
    'parent' => [],
    // cache the output
    'cache' => function (array $component): array {
        return [
            'name' => 'name-of-cache',
            'expire' => 'expire-time-of-cache'
        ];
    },
    'metadata' => function (array $params, array $component): void {
        // add some metadata for component
    },
    'defaults' => function (array $params, array $component): array {
        $defaults = [
            'foo' => 'bar'
        ];
        return $defaults;
    },
    'transform' => function (array $params, array $component): array {
        // do something with params
        return $params;
    },
    // 'attrs' => [
    //     // add more attrs
    // ],
    'attrs' => function (array $attrs, array $component): array {
        // do something with attrs
        return $attrs;
    },
    'fn' => [
        // add hello method to TemplateFile and use it like $this->hello(); in template
        'hello' => function (HookEvent $e) {
            $e->return = 'Hello World';
        }
    ],
    // Check component has required parameters
    'render' => function(array $params, array $component): bool {
        return count($params);
    },
    // Do something with output
    // 'output' => function(string $output, array $component): bool {
    //     return str_replace('<alert />', component('alert', ['content' => 'Warning !']), $output);
    // }
];

Component array output

[
    'name' => 'name-of-component', // string
    'dir' => 'path-of-component', // string
    'templateFile' => 'template-file-of-component', // string
    'componentFile' => null, // optional component configuration file, ?string
    'fieldsFile' => null, // optional fields configuration file, ?string
    'layouts' => [], // optional ready to use layout files, you can overwrite params by passing `layout` array of layout file list
    'title' => 'title-of-component', // string 
    'params' => [], // array
    'parent' => null, // ?array
    'cache' => null, // ?callable
    'metadata' => null, // ?callable
    'defaults' => null, // ?array|callable
    'transform' => null, // ?callable
    'attrs' => null, // ?array|callable
    'fn' => null, // ?array
    'render' => null, // ?callable 
    'output' => null // ?callable
];

Create heading Component Config File not required

// site/templates/components/heading/component.php
<?php

namespace ProcessWire;

return [
    // Set default params
    'params' => [
        'content' => '',
        'tag' => 'h1',
        'size' => '',
        'decoration' => '',
        'transform' => '',
        'color' => '',
        'align' => ''
    ],
    // cache the output
    'cache' => function (array $component): array {
        $params = $component['params'];

        $name = null;
        $expire = null;
        
        if (isset($params['page']) && $params['page'] instanceof Page) {
            $name = $params['page']->id;
            $expire = $params['page'];
        }

        return [
            'name' => $page->id,
            'expire' => $expire
        ];
    },
    'transform' => function (array $params): array {
        // do something with params
        return $params;
    },
    // 'attrs' => [
    //     // add more attrs
    // ],
    'attrs' => function (array $attrs): array {
        // do something with attrs
        return $attrs;
    },
    'fn' => [
        // add hello method to TemplateFile and use it like $this->hello(); in template
        'hello' => function (HookEvent $e) {
            $e->return = 'Hello World';
        }
    ],
    // Check component has required parameters
    'render' => function(array $params): bool {
        return strlen($params['content']) ?: false;
    },
    // Do something with output
    // 'output' => function(string $output): bool {
    //     return str_replace('<alert />', component('alert', ['content' => 'Warning !']), $output);
    // }
];

Create heading Template File required

// site/templates/components/heading/templates/template.php
<?php

namespace ProcessWire;

/**
 * @var WireFileTools $files
 * @var string  $__name Name of the component
 * @var string  $__title Title of component
 * @var string  $__dir Directory of component
 * @var string  $__template Template file of component
 * @var string  $__component Component file of component
 * @var string  $__fields Fields file of component
 * @var array   $__layouts Layouts of component
 * @var ?array  $parent Parent component
 * @var array   $params Parameters of component
 * @var array   $attrs Attributes of component
 * @var array   $children Children of component
 */

if ($params['size']) {
    $attrs['class'][] = "uk-{$params['size']}";
}

if ($params['decoration']) {
    $attrs['class'][] = "uk-{$params['decoration']}";
}

if ($params['transform']) {
    $attrs['class'][] = "uk-text-{$params['transform']}";
}

if ($params['color']) {
    $attrs['class'][] = "uk-text-{$params['transform']}";
}

if ($params['align']) {
    $attrs['class'][] = "uk-text-{$params['align']}";
}

// $this->hello(); added dynamically as function
// $this->attrs(array $attrs); Accept array of attributes, return is string

echo "<{$params['tag']}{$this->attrs($attrs)}>{$params['content']}</{$params['tag']}>";

Print heading Component

echo component('heading', [
    'content' => 'Hello World !',
]);