README

Extended HTML Document Library

This library provides a way to work with HTML elements in PHP, offering an object-oriented approach that aligns with the HTML5 specifications. It also provides a way to automatically transform HTML into different templating engines or code for frontend frameworks. It also adds autocompletion to PHP for all HTML5 elements, which is especially useful when working with DOM Documents. It adds additional functionality and a stronger focus on HTML5 while being fully compatible with PHP's DOM\HTMLDocument and DOM\HTMLElement classes.

Installation

composer require --dev vardumper/extended-htmldocument

TL;DR

This library adds the HTML5 specification to PHP and is fully compatible with DOM\HTMLDocument. You can now instantiate an Anchor without passing a document.

use Html\Element\Inline\Anchor;
use Html\Enum\RelEnum;

echo (new Anchor())
    ->setClass('secondary')
    ->setRel(RelEnum::NOFOLLOW)
    ->setHref('https://google.com')
    ->setTitle('Google it')
    ->setContent('Click me');
// produces: <a class="secondary" href="https://google.com" rel="nofollow" title="Google it">Click me</a>

Generated Templates

Templates are generated from the HTML5 schema for every HTML element. These allow for better consistency in your design system(s), support all possible HTML attributes and have basic validations for enum attributes. Files are grouped into inline, block and void elements. For elements with a specific content model, a composed template is generated as well. (eg <table><tr><td>Cell</td><tr></table>)

Blade

Blade templates can be found in templates/blade. The README has more infos and usage examples. Blade templates can also be installed via npm with the @typesafe-html5/blade package.

Each element's template is generated as index.blade.php inside a subdirectory named after the element (e.g. blade/block/div/index.blade.php), which Blade resolves as x-block.div.

The blade-component generator converts a full YAML component definition into a Blade document using <x-block.*>, <x-inline.*> and <x-void.*> component tags. Use it via the watch command — see the README for examples.

React & NextJS

React and NextJS templates can be found in templates/nextjs. See the README file for details. NextJS templates can also be installed via npm with the @typesafe-html5/react package.

Storybook

Storybook with atoms for all HTML5 elements can be seen in the Demo. Files can be found in templates/storybook. There's also a README with more details.

Storybook for Twig

TBD

Storybook for React/NextJS

TBD

Twig

Twig templates for flexible and performant use with include, embed, and use can be found in templates/twig. See the README for more details and usage examples. Twig templates can also be installed via npm with the @typesafe-html5/twig package.

Twig Components Bundle

Generated, typesafe Twig Components for use with Symfony UXs Twig Components can be found in templates/twig-component. See the README for more details and usage examples. Twig templates can also be installed via the Symfony Bundle vardumper/html5-twig-component-bundle package.

Typescript

Typescript templates can be found in templates/typescript. See the README for more details and usage examples. Typescript templates can also be installed via npm with the @typesafe-html5/typescript package.

Documentation

See the Documentation for more.