README

一个使用PHP构建VanJS（或HTML）DOM树的机制。

示例

以下PHP代码

require(__DIR__ . '/../vendor/autoload.php');

use Dup\VanPHP\DomElement;
use Dup\VanPHP\DomElement\Renderer\JsFunc;

$v = new DomElement\Factory(new DomElement\Output\VanJs);

echo $v->label(
	['for' => 'testInput'],
	$v->div('Label text wrapped in nested div'),
	'Label text not wrapped in div',
	$v->input(['type' => 'text', 'id' => 'testInput']),
	$v->button(['onclick' => fn() => new JsFunc(__DIR__ . '/OnClickFunc.js')], 'Click Me')
) . "\n";

输出以下VanJS DOM树（缩进以提高可读性）

label(
	{ for: "testInput" },
	div("Label text wrapped in nested div"),
	"Label text not wrapped in div",
	input({ type: "text", id: "testInput" }),
	button(
		{
			onclick: (e) => {
				e.preventDefault()
				alert(document.getElementById('testInput').value)
			}
		},
		"Click Me"
	)
)

以下具有相同输入语法的PHP代码

echo $h->label(
	['for' => 'testInput'],
	$h->div('Label text wrapped in div'),
	'Label text not wrapped in div',
	$h->input(['type' => 'text', 'id' => 'testInput']),
	$h->button(['onclick' => fn() => new JsFunc(__DIR__ . '/OnClickInline.js')], 'Click Me')
) . "\n";

输出以下HTML DOM树（缩进以提高可读性）

<label for="testInput">
    <div>Label text wrapped in div</div>
    Label text not wrapped in div
    <input type="text" id="testInput" />
    <button onclick="alert(document.getElementById('testInput').value);">Click Me</button>
</label>

为什么？

一个可能的用例是使用PHP生成的VanJS进行SSR，因为这样可以使用相同的输入风格生成HTML和VanJS。

考虑以下示例

function renderOutput($e) {
	return $e->label(
		['for' => 'testInput'],
		$e->div('Label text wrapped in nested div'),
		'Label text not wrapped in div',
		$e->input(['type' => 'text', 'id' => 'testInput']),
		$e->button(['onclick' => fn() => new JsFunc(__DIR__ . '/OnClickFunc.js')], 'Click Me')
	) . "\n";
}

$e = new DomElement\Factory(new DomElement\Output\Html);
echo renderOutput($e);

$e->output = new DomElement\Output\VanJs;
echo renderOutput($e);

在这种情况下，来自renderOutput()的相同输入被用来生成HTML和VanJS DOM。

入门

通过Composer

mkdir VanPHP && cd VanPHP
composer require groovenectar/vanphp
php vendor/groovenectar/vanphp/test/test.php

通过Git

git clone https://github.com/groovenectar/VanPHP.git && cd VanPHP
php test/test.php

# Optionally use Composer for autoloading
composer dump-autoload