PHPackages mortenson/twig-components-ssr - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. mortenson/twig-components-ssr ActiveLibrary[Templating & Views](/categories/templating) mortenson/twig-components-ssr ============================= Provides tools to server side render Twig Components. 244611PHP Since Apr 4Pushed 8y ago3 watchersCompare [ Source](https://github.com/mortenson/twig-components-ssr)[ Packagist](https://packagist.org/packages/mortenson/twig-components-ssr)[ RSS](/packages/mortenson-twig-components-ssr/feed)WikiDiscussions master Synced 2w ago READMEChangelogDependenciesVersions (1)Used By (0) [![Build Status](https://camo.githubusercontent.com/5fc1ed0ab6d048a274f791a06adaa286ef4508f6b6c60bb16578291b73b08024/68747470733a2f2f7472617669732d63692e6f72672f6d6f7274656e736f6e2f747769672d636f6d706f6e656e74732d7373722e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/mortenson/twig-components-ssr) Twig Components Server Side Renderer ==================================== [](#twig-components-server-side-renderer) This project provides a server side renderer for [Twig Components](https://github.com/mortenson/twig-components)using PHP. Server side rendering Web Components or any Javascript *thing* gives you: 1. Faster time to first meaningful paint 2. Better SEO, for tools without Javascript support 3. Progressive enhancement support 4. Avoidance of FOUC-related issues Installation ============ [](#installation) ``` composer require mortenson/twig-components-ssr ``` Usage ===== [](#usage) The renderer takes an array of Twig template names keyed by custom element name, and a Twig Environment that can properly render those templates. Here's a basic example with the array loader: ``` $templates = [ 'my-component.twig' => 'Hello {{ name }}!', ]; $loader = new \Twig_Loader_Array($templates); $environment = new \Twig_Environment($loader); $tag_templates = ['my-component' => 'my-component.twig']; $renderer = new Renderer($tag_templates, $environment); $html = ''; $renderer = new TwigComponentsSSR\Renderer($templates); $rendered_html = $renderer->render($html); ``` At this point, `$rendered_html` should contain: ``` Hello World! ``` When this HTML is displayed in a browser, and the Javascript for the Twig Component is loaded, the server side rendered content should be hidden as soon as the Shadow DOM root is attached. Handling of style tags ====================== [](#handling-of-style-tags) If a Twig Component template contains a `` tag, which is a common way to have encapsulated styles using Shadow DOM, the renderer will store the contents of the tag and remove it from the component. When all component rendering is complete, those stored styles will have the tag name prepended to them, and all rules will become `!important`; This method does not guarantee Shadow DOM-like style encapsulation, but is a good start. Support for :host ----------------- [](#support-for-host) The Shadow DOM spec has support for some new CSS selectors, namely `:host`, `:host-context`, and the now removed `::shadow` and `/deep/`. This project only supports `:host`, and does so by simply replacing `:host`with the name of the tag. Note that because of parsing constraints, using the `:host()` syntax only supports one sub-selector. So `:host(.foo)` will render fine, but `:host(.foo,.bar)` will not work. Use `:host(.foo),:host(.bar)` instead! Support for slots ================= [](#support-for-slots) Default and named slots are fully supported by this renderer. If a component named `my-component` uses a template like: ``` {{ prefix }} ``` rendering this: ``` World! ``` would result in: ``` Hello World! ``` The `data-ssr-content` attribute contains the original, untouched content of the element. The base component will use this original content before attaching the shadow root to ensure proper future rendering. Determining what tags were rendered =================================== [](#determining-what-tags-were-rendered) During the render process a list of tag names that were present in the provided HTML are collected and stored. To access them, call the `getRenderedTags()`method of your `TwigComponentsSSR\Renderer` object. This is useful for only adding Javascript for components that are actually present on the page. Running tests ============= [](#running-tests) Tests for this project are written using PHPUnit. To execute tests, run: ``` ./vendor/bin/phpunit --bootstrap vendor/autoload.php tests ``` Coding standards ================ [](#coding-standards) This project uses the PSR2 coding standard. To check for violations, run: ``` phpcs --standard=PSR2 src/* ``` Example page ============ [](#example-page) A super light-weight example is available at /example. You can check it out by running `cd example && php -S 127.0.0.1:12345`, then visiting `http://127.0.0.1:12345` in your browser. Todo ==== [](#todo) - Support the `` element and named slots ### Health Score 25 — LowBetter than 36% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity22 Limited adoption so far Community9 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/39c2a2cb0119d25bf47fee43624599e4d7c6665ea209f1803455a88ba1b3679f?d=identicon)[mortenson](/maintainers/mortenson) --- Top Contributors [![mortenson](https://avatars.githubusercontent.com/u/2091002?v=4)](https://github.com/mortenson "mortenson (3 commits)") ### Embed Badge ![Health badge](/badges/mortenson-twig-components-ssr/health.svg) ``` [![Health](https://phpackages.com/badges/mortenson-twig-components-ssr/health.svg)](https://phpackages.com/packages/mortenson-twig-components-ssr) ``` ### Alternatives [limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3861.2M](/packages/limenius-react-bundle)[area17/laravel-auto-head-tags Laravel Auto Head Tags helps you build the list of head elements for your app 4616.0k](/packages/area17-laravel-auto-head-tags)[jelix/wikirenderer WikiRenderer is a library to generate HTML or anything else from wiki content. 1712.2k1](/packages/jelix-wikirenderer)[webkinder/sproutset A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects. 281.8k](/packages/webkinder-sproutset) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)