README

Twig组件服务器端渲染器

本项目使用PHP为Twig组件提供一个服务器端渲染器。

服务器端渲染Web组件或任何JavaScript 东西可以为您提供

更快的第一次有意义的绘制时间
更好的SEO，对于没有JavaScript支持的工具
渐进增强支持
避免FOUC相关的问题

安装

composer require mortenson/twig-components-ssr

用法

渲染器接收一个数组，该数组以自定义元素名称为键，包含Twig模板名称，以及可以正确渲染这些模板的Twig环境。

以下是使用数组加载器的基本示例

$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 = '<my-component name="World"></my-component>';
$renderer = new TwigComponentsSSR\Renderer($templates);
$rendered_html = $renderer->render($html);

此时，$rendered_html应包含

<my-component name="World" data-ssr-content='""' data-ssr="true">Hello World!</my-component>

当此HTML在浏览器中显示，并加载了Twig组件的JavaScript时，服务器端渲染的内容应在Shadow DOM根附加后立即隐藏。

处理style标签

如果Twig组件模板包含一个<style>标签，这是使用Shadow DOM封装样式的常见方式，则渲染器将存储该标签的内容，并将其从组件中删除。

当所有组件渲染完成后，这些存储的样式将添加标签名前缀，并且所有规则都将变为!important；

此方法不能保证类似Shadow DOM的样式封装，但是一个良好的起点。

:host支持

Shadow DOM规范支持一些新的CSS选择器，即:host、:host-context，以及现在已删除的::shadow和/deep/。

本项目仅支持:host，并且通过简单地将:host替换为标签名来实现。

请注意，由于解析限制，使用:host(<selector>)语法仅支持一个子选择器。因此，:host(.foo)可以正常渲染，但:host(.foo,.bar)将无法工作。请使用:host(.foo),:host(.bar)代替！

slots支持

默认和命名的slots完全由此渲染器支持。

如果名为my-component的组件使用如下模板

{{ prefix }} <slot />

渲染此

<my-component prefix="Hello">World!</my-component>

将得到

<my-component prefix="Hello" data-ssr-content="World!">Hello World!</my-component>

data-ssr-content属性包含元素的原始、未修改的内容。基础组件将在附加shadow root之前使用此原始内容，以确保正确的未来渲染。

确定渲染了哪些标签

在渲染过程中，收集并存储了在提供的HTML中存在的标签名称列表。要访问它们，请调用您的TwigComponentsSSR\Renderer对象的getRenderedTags()方法。这对于只为实际存在于页面上的组件添加JavaScript非常有用。

运行测试

此项目的测试使用PHPUnit编写。要执行测试，请运行

./vendor/bin/phpunit --bootstrap vendor/autoload.php tests

编码标准

本项目使用PSR2编码标准。要检查违规情况，请运行

phpcs --standard=PSR2 src/*

示例页面

一个超轻量级的示例在/example中可用。您可以通过运行cd example && php -S 127.0.0.1:12345来检查它，然后在浏览器中访问http://127.0.0.1:12345。

待办事项

支持<slot />元素和命名的slots

mortenson / twig-components-ssr

维护者

详细信息