diesdasdigital/kirby-3-teein

This package is abandoned and no longer maintained. No replacement package was suggested.

Kirby 3 Teein/Html Virtual DOM plugin

1.0.1 2019-11-04 20:28 UTC

Requires

• php: >=7.1.0
• getkirby/composer-installer: ^1.1
• teein/html: ^1.0

MIT

• diesdas.digital

README

If this plugin is activated, it will require all Kirby templates to use the Teein/Html Virtual DOM based templating-engine.

Installation

composer require diesdasdigital/kirby-3-teein

Basic Usage

Once installed, all Kirby templates will need an explicit return statement, returning a Teein/HTML element:

<?php

use function Teein\Html\Elements\div;
use function Teein\Html\Text\text;

return div()(
  text('Hello, World!')
);

Adding Your Own Component

You can add your own components which output Teein/Html elements.

Firstly, name and save your component php file. We'll use the example grid.php.

Secondly, add a namespace at the top of your component file. For example, this can be the project name. In the example grid.php file, we'll use namespace Test\Components:

<?php

namespace Test\Components;

Thirdly, within your component file import the relevant Teein/Html functions using the use keyword and output them:

<?php

namespace Test\Components;

use function Teein\Html\Text\text;
use function Teein\Html\Elements\div;
use function Teein\Html\Attributes\class_;

function grid(array $children)
{
  return div(class_("grid"))(
    div(class_("grid__column"))(
      ...array_map(function ($child) {
        return $child;
      }, $children)
    ));
}

In order to reference this component in other files, you'll need to add the file path to autoload files in your composer.json file:

"autoload": {
  "files": [
    "site/templates/components/grid.php"
  ]
}

Following this, run composer dump-autoload to make the component available in other files.

You can now reference this component in other templates:

<?php

use function Test\Components\grid;
use function Teein\Html\Elements\div;
use function Teein\Html\Text\text;

return div()(
    grid([
        div()(text('Column')),
        div()(text('Column')),
        div()(text('Column'))
    ])
);

Created by diesdas.digital